/*
 * Phone and small-tablet fixes for the cloned page.
 *
 * The original was built desktop-only: every style is inline, several grids use
 * pixel columns, and body copy ends up in a 90-140px gutter on a phone. Desktop
 * rendering is left byte-identical to the original on purpose, so all of this is
 * scoped to <= 820px and needs !important to beat the inline styles.
 */

@media (max-width: 820px) {
  /* ---------------------------------------------------- stack every grid */
  #site [style*='grid-template-columns: 1fr 420px'],
  #site [style*='grid-template-columns: 420px 1fr'],
  #site [style*='grid-template-columns: 80px 1fr 1fr'],
  #site [style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* the numbered "who this is for" rows: number sits above its own block */
  #site [style*='grid-template-columns: 80px 1fr 1fr'] {
    gap: 0.6rem !important;
    padding: 1.75rem 0 !important;
  }

  /* the two photo panels sit side by side at 195px each: give them the width */
  #site [style*='grid-template-columns: 1fr 1fr'][style*='gap: 4px'] > * {
    min-height: 320px !important;
  }

  /* ------------------------------------------------------- breathing room */
  #site [style*='padding: 8rem 2.5rem'] { padding: 4.5rem 1.25rem !important; }
  #site [style*='padding: 9rem 2.5rem'] { padding: 5rem 1.25rem !important; }
  #site [style*='padding: 10rem 2.5rem'] { padding: 5.5rem 1.25rem !important; }
  #site [style*='padding: 0px 2.5rem'] { padding: 0 1.25rem !important; }
  #site [style*='padding: 0px 2.5rem 6rem'] { padding: 0 1.25rem 4rem !important; }
  #site [style*='gap: 5rem'] { gap: 2.5rem !important; }
  #site [style*='gap: 4rem'] { gap: 2.25rem !important; }
  #site [style*='gap: 3rem'] { gap: 2rem !important; }

  /* ------------------------------------------------------------ the nav */
  #site nav { padding: 0.85rem 1rem !important; }
  #site nav span { font-size: 0.95rem !important; letter-spacing: 0.1em !important; white-space: nowrap !important; }
  #site nav a[data-cta] {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.7rem 1rem !important;
  }

  /* --------------------------------------------- readable type, not tiny */
  #site [style*='font-size: 0.7rem'] { font-size: 0.8rem !important; }
  #site [style*='font-size: 0.72rem'] { font-size: 0.82rem !important; }
  #site [style*='font-size: 0.75rem'] { font-size: 0.84rem !important; }
  #site [style*='font-size: 0.78rem'] { font-size: 0.84rem !important; }
  #site [style*='font-size: 0.8rem'] { font-size: 0.86rem !important; }
  #site [style*='font-size: 0.85rem'] { font-size: 0.92rem !important; }
  #site [style*='font-size: 0.875rem'] { font-size: 0.95rem !important; }
  #site [style*='font-size: 0.9rem'] { font-size: 0.95rem !important; }
  #site [style*='font-size: 0.9375rem'] { font-size: 1rem !important; line-height: 1.7 !important; }
  #site [style*='font-size: 1rem'] { line-height: 1.75 !important; }
  #site [style*='letter-spacing: 0.22em'] { letter-spacing: 0.14em !important; }
  #site [style*='letter-spacing: 0.2em'] { letter-spacing: 0.13em !important; }

  /* the 6rem stat numerals are taller than they need to be once stacked */
  #site [style*='font-size: 6rem'] { font-size: 4.25rem !important; }
  #site [style*='font-size: 3.5rem'] { font-size: 2.5rem !important; }

  /* ------------------------------------------ contrast against near-black */
  #site [style*='rgba(245, 240, 232, 0.25)'] { color: rgba(245, 240, 232, 0.58) !important; }
  #site [style*='rgba(245, 240, 232, 0.3)'] { color: rgba(245, 240, 232, 0.6) !important; }
  #site [style*='rgba(245, 240, 232, 0.35)'] { color: rgba(245, 240, 232, 0.62) !important; }
  #site [style*='rgba(245, 240, 232, 0.4)'] { color: rgba(245, 240, 232, 0.66) !important; }
  #site [style*='rgba(245, 240, 232, 0.45)'] { color: rgba(245, 240, 232, 0.68) !important; }
  #site [style*='rgba(245, 240, 232, 0.5)'] { color: rgba(245, 240, 232, 0.7) !important; }
  #site [style*='rgba(245, 240, 232, 0.6)'] { color: rgba(245, 240, 232, 0.76) !important; }
  #site [style*='rgba(245, 240, 232, 0.65)'] { color: rgba(245, 240, 232, 0.8) !important; }
  #site [style*='rgba(245, 240, 232, 0.7)'] { color: rgba(245, 240, 232, 0.82) !important; }
  #site [style*='rgba(245, 240, 232, 0.78)'] { color: rgba(245, 240, 232, 0.86) !important; }
  #site [style*='color: rgba(232, 93, 4, 0.4)'] { color: rgba(232, 93, 4, 0.85) !important; }

  /* the ghosted second line of a headline still has to be readable */
  #site h2 [style*='rgba(245, 240, 232, 0.25)'],
  #site [style*='font-size: 2.5rem'][style*='rgba(245, 240, 232, 0.25)'] {
    color: rgba(245, 240, 232, 0.62) !important;
  }

  /* ------------------------------------------------------- tap targets */
  #site a,
  #site button { min-height: 44px; }

  /* --------------------------------------------------------- the quiz */
  .fq-close {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
  }
  .fq-top { padding: 0.9rem 1.1rem 0.8rem; }
  .fq-bar { margin: 0 1.1rem; }
  .fq-card { padding: 2rem 1.1rem 3rem; }
  .fq-q { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .fq-q.is-long { font-size: clamp(1.45rem, 6.6vw, 2rem); }
  .fq-help { font-size: 1.02rem; }
  .fq-lede { font-size: 1.05rem; line-height: 1.7; }
  .fq-choice { font-size: 1.05rem; padding: 1rem 1rem; min-height: 56px; }
  .fq-input,
  .fq-textarea { font-size: 1.15rem; } /* 16px+ keeps iOS from zooming on focus */
  .fq-dot { min-height: 52px; font-size: 1.05rem; }
  .fq-next { min-height: 54px; font-size: 1.05rem; }
  .fq-sig { font-size: 0.86rem; }
  .fq-count { font-size: 0.82rem; letter-spacing: 0.14em; }
}

/* very small phones */
@media (max-width: 380px) {
  #site nav a[data-cta] { font-size: 0.66rem !important; padding: 0.65rem 0.8rem !important; }
  .fq-scale { grid-template-columns: repeat(5, 1fr); }
}

/* ------------------------------------------------ second pass, measured */
@media (max-width: 820px) {
  /* the nav button was shrunk to stop it wrapping; give some of it back */
  #site nav a[data-cta] { font-size: 0.76rem !important; padding: 0.75rem 1.05rem !important; }

  .fq-eyebrow { font-size: 0.8rem; letter-spacing: 0.18em; }
  .fq-label { font-size: 0.78rem; color: rgba(245, 240, 232, 0.62); }
  .fq-sig { color: rgba(245, 240, 232, 0.62); }
  .fq-hint { color: rgba(245, 240, 232, 0.5); }
  .fq-back {
    color: rgba(245, 240, 232, 0.62);
    font-size: 0.84rem;
    min-height: 44px;
    padding: 0.6rem 0.2rem;
  }

  /* admin: the compact desktop chrome is too small on a phone */
  .btn.tiny { font-size: 12px; padding: 0.5rem 0.75rem; }
  .btn { min-height: 44px; }
  .field-lbl { font-size: 0.8rem; }
  .card .k { font-size: 0.8rem; }
  header.top .brand { font-size: 0.95rem; }
  .tab { font-size: 0.9rem; min-height: 44px; }
  .drawer { padding: 1.1rem; }
  main { padding-bottom: 5rem; }
}

/* ------------------------------------------- admin on a phone, third pass */
@media (max-width: 700px) {
  header.top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: 'brand view out' 'tabs tabs tabs';
    gap: 0.5rem 0.5rem;
    padding: 0.7rem 0.85rem;
  }
  header.top .brand { grid-area: brand; align-self: center; }
  header.top nav.tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
  header.top .tab { padding: 0.5rem 0.25rem; font-size: 0.8rem; letter-spacing: 0.06em; text-align: center; }
  header.top a.btn.ghost.tiny { grid-area: view; }
  header.top button#logout { grid-area: out; }
  header.top .btn.tiny { min-height: 36px; padding: 0.4rem 0.6rem; }

  /* wide tables stay readable by scrolling instead of wrapping to one word a line */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #dropoff { min-width: 560px; }
  #apps-table { min-width: 620px; }
  #dropoff td:nth-child(2) { max-width: 280px; }

  .head-row { gap: 0.6rem; }
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  /* the question editor toolbar has to wrap or it pushes the page sideways */
  .qedit .bar { flex-wrap: wrap; row-gap: 0.5rem; }
  .qedit .spacer { flex-basis: 100%; height: 0; }
  .qedit .num { width: auto; }
}