/* ===================================================================
   mobile.css — phone layout and interaction. Loaded LAST so it wins.

   The phone is not a narrow desktop. Three things change:
     1. Navigation becomes a 5-slot thumb-reachable tab bar; the other
        destinations move into a "More" sheet instead of scrolling off
        the edge of an 8-item bar.
     2. Everything that was a side-by-side grid stacks, and anything
        that cannot stack (tables, wide charts) scrolls inside its own
        container so the PAGE never scrolls sideways.
     3. Tap targets go to 44px, and the practice runner puts its
        primary action within thumb reach.
   =================================================================== */

/* ---------- global: the page must never scroll sideways ---------- */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  /* Grid and flex children default to min-width:auto and therefore REFUSE to
     shrink below their content — that is what was clipping the hero text and
     the second button. Every container AND its direct children need this. */
  .view, .card, .hero, .prompt, .scorecard, .recorder, .player,
  .u-row, .u-col, .u-between, .skillcard, .focusrow { min-width: 0; }
  .hero > *, .grid > *, .cols > *, .scorecard > *, .card > *,
  .u-row > *, .u-col > *, .u-between > *, .prompt > *, .skillcard > * { min-width: 0; }
  /* button rows must wrap rather than run off the edge */
  .u-row, .u-between { flex-wrap: wrap; }
  .view { max-width: 100%; }
  /* wide content scrolls itself rather than the page */
  .table-wrap, .chart-host { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table { min-width: 460px; }
}

/* =====================================================================
   PHONE  (<= 720px)
   ===================================================================== */
@media (max-width: 720px) {

  /* ---------- app shell ---------- */
  .app { display: block; }
  .main {
    padding: var(--s-4) var(--s-4) calc(76px + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  /* ---------- bottom tab bar ---------- */
  .sidebar {
    position: fixed; inset: auto 0 0 0; top: auto;
    height: auto; width: 100%;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border);
    background: var(--nav);
    padding: 0 0 env(safe-area-inset-bottom);
    z-index: 40;                       /* above the scanline overlay */
  }
  .sidebar__brand, .sidebar__foot, .sidebar__group { display: none; }
  .sidebar__nav {
    flex: 1; flex-direction: row; overflow: visible;
    padding: 0; gap: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  /* only the four tab destinations + More appear in the bar */
  .navlink--extra { display: none; }
  .navlink {
    flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; padding: 8px 2px 6px;
    min-height: 54px;                  /* comfortable thumb target */
    border-radius: 0; text-align: center;
  }
  .navlink__label { display: none; }   /* desktop label */
  .navlink__tablabel {
    display: block;
    font-family: var(--ff-mono); font-size: 8.5px;
    letter-spacing: .06em; text-transform: uppercase;
    color: inherit; line-height: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .navlink__icon { width: 22px; height: 22px; }
  /* active tab: acid mark above the icon, not a full block (too heavy here) */
  .sidebar .navlink[aria-current="page"] {
    background-color: var(--accent-sunk);
    color: var(--accent);
  }
  .sidebar .navlink[aria-current="page"] .navlink__icon,
  .sidebar .navlink[aria-current="page"] .navlink__tablabel { color: var(--accent); }
  .sidebar .navlink[aria-current="page"]::after {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%;
    height: 2px; background: var(--accent);
  }
  .navlink__badge--live {
    position: absolute; top: 5px; left: 50%; margin-left: 6px;
    padding: 0 5px; min-width: 16px;
  }

  /* ---------- the "More" sheet ---------- */
  .sheet { display: flex; flex-direction: column; gap: 2px; }
  .sheet__row {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 14px var(--s-3); min-height: 52px;
    color: var(--text); text-align: left; width: 100%;
    background: var(--surface-2);
    clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  }
  .sheet__row:hover { background: var(--hover); text-decoration: none; }
  .sheet__icon { flex: none; color: var(--accent); display: grid; place-items: center; }
  .sheet__label { flex: 1; font-weight: 600; }
  .sheet__go { color: var(--text-3); font-family: var(--ff-mono); font-size: var(--fs-xs); }
  .sheet__sep { height: 1px; background: var(--border-soft); margin: var(--s-3) 0; }
  /* the sync chip is a .navlink, so the tab-bar rules would strip its label
     and leave a bare dot — restore the row form inside the sheet */
  .sheet .navlink {
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: var(--s-3); min-height: 52px; padding: 14px var(--s-3);
    background: var(--surface-2); text-align: left;
    clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  }
  .sheet .navlink__label {
    display: block; font-family: var(--ff-sans); text-transform: none;
    letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text);
  }
  .sheet .navlink__tablabel { display: none; }
  .sheet .navlink__icon { width: 22px; height: 22px; }

  /* keep the recorder status and the skip button on one line */
  .recorder > .u-between { flex-wrap: nowrap; align-items: center; }
  .recorder__skip { white-space: nowrap; font-size: 9px; padding-inline: var(--s-3); }

  /* the points jump reads better as two tight columns than wrapped captions */
  .pointsjump__cap { white-space: nowrap; font-size: 8.5px; }
  .pointsjump__n { font-size: 2rem; }

  /* ---------- type + spacing ---------- */
  h1 { font-size: 1.75rem; }
  .hero__title { font-size: 1.6rem; }
  .hero .in, .hero { padding: var(--s-5) var(--s-4); }
  .view-head { margin-bottom: var(--s-5); }
  .card { padding: var(--s-4); }
  /* title and its caption stack — side by side they squeeze each other to
     two ugly wrapped columns at this width */
  .card__head, .section-head {
    flex-direction: column; align-items: flex-start; gap: var(--s-1);
  }
  .section-head::after { display: none; }   /* the trailing rule adds nothing here */

  /* ---------- stack every side-by-side layout ---------- */
  .hero, .grid, .grid--2, .grid--3, .grid--4,
  .grid--sidebar-r, .skillgrid, .cols, .scorecard {
    display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  }
  .scorecard { justify-items: start; text-align: left; }
  .pointsjump { width: 100%; }

  /* ---------- tap targets ---------- */
  .btn { min-height: 44px; padding-inline: var(--s-4); }
  .btn--sm { min-height: 38px; }
  .opt, .todo, .taskrow, .focusrow, .usercard { min-height: 48px; }
  input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .select, .input { width: 100%; }

  /* ---------- runner: the screen that matters most ---------- */
  .runner__bar {
    margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0;
    padding: var(--s-2) var(--s-4);
    gap: var(--s-2); flex-wrap: nowrap;
  }
  .runner__id b { font-size: var(--fs-sm); }
  .runner__id span { display: none; }        /* trait list is noise on a phone */
  .phases { display: none; }
  .prompt { padding: var(--s-4); }
  .prompt__directive { padding: var(--s-3); gap: var(--s-2); }
  .prompt__directive-icon { width: 28px; height: 28px; }
  .prompt__instr { font-size: var(--fs-base); }
  .readaloud { font-size: 1.2rem; line-height: 1.7; padding: var(--s-4); max-width: 100%; }
  .passage { font-size: 1rem; }

  /* recorder: stack so the wave gets full width and the mic is big */
  .recorder > .u-row { flex-wrap: wrap; gap: var(--s-3); }
  .recorder .ring-timer { transform: scale(.86); transform-origin: left center; }
  .recorder .u-grow { flex-basis: 100%; order: 3; }
  .micwrap { margin-left: auto; }
  .mic-btn { width: 60px; height: 60px; }      /* unmissable primary action */
  .miccap { font-size: 8px; }

  /* answer area + submit within thumb reach */
  .runner__foot {
    position: sticky; bottom: calc(64px + env(safe-area-inset-bottom));
    background: var(--bg); padding: var(--s-3) 0;
    margin: 0 calc(var(--s-4) * -1); padding-inline: var(--s-4);
    border-top: 1px solid var(--border-soft);
    flex-direction: row-reverse;                /* primary action on the right */
    z-index: 5;
  }
  .runner__foot .btn { flex: 1; }

  /* ---------- charts ---------- */
  .chart-host svg { max-width: 100%; height: auto; }
  /* Describe Image: give the chart the whole card width and let it be tall.
     It was rendering ~180px inside a 300px box, which is unusable for a task
     whose whole point is reading the data off the image. */
  .imgwrap { padding: var(--s-3); gap: var(--s-2); }
  .imgwrap__title { font-size: var(--fs-base); text-align: left; }
  .imgwrap svg { max-height: none; }
  .radarkey { justify-content: center; }

  /* coaching panel: tighter, and collapsed content still reads at 375px */
  .tips__head { padding: var(--s-3); font-size: 10px; letter-spacing: .05em; }
  .tips__body { padding: 0 var(--s-3) var(--s-3); }
  .tips__list { padding-left: 1.1em; }
  .tips__list li { font-size: var(--fs-sm); }

  /* ---------- learn ---------- */
  .learntabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .learntab { flex: none; }

  /* ---------- modals become bottom sheets ---------- */
  .modal {
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: 100%; max-height: 86vh;
    margin: 0; overflow-y: auto;
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
  }
  .modal__actions .btn { flex: 1; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .navlink__tablabel { font-size: 8px; letter-spacing: 0; }
  .skillcard__score { font-size: 2.25rem; }
  h1 { font-size: 1.55rem; }
}

/* ---------- desktop keeps the tab-only labels hidden ---------- */
@media (min-width: 721px) {
  .navlink__tablabel { display: none; }
  .navlink--more { display: none; }
}