/* media.css: ALL responsive overrides, loaded LAST so a responsive rule always wins over
   the base component rule it changes, regardless of which component file that rule lives in. */

@media (min-width:601px){
    .ob .left>.brand,.ob .left>.lead,.ob .left>.trustflow{width:100%;max-width:600px;margin-inline:auto}
  }

@media (max-width:600px){ .progress em .lg{display:none} .progress em .sm{display:inline} .progress .p em{font-size:10px} }

@media (max-width:640px){
    .ready-wrap{padding:0}
    .ready-card{border-radius:0;border:0;max-height:none;height:100%}
    .readycheck{gap:6px}
    .rc-row{position:relative;flex-direction:column;justify-content:center;gap:5px;padding:9px 6px;text-align:center}
    .rc-tx{white-space:normal;font-size:11.5px;line-height:1.25}
    .rc-meter{display:none}
    .readycheck .rc-row .rc-st,.readycheck .rc-row.done .rc-st,.readycheck .rc-row.blocked .rc-st{position:absolute;top:6px;right:6px;width:14px;height:14px;margin:0}
    .readycheck .rc-row.done .rc-st::after{left:4.5px;top:1.8px;width:3.5px;height:7px}
    .nu em{display:none}
  }

@media (min-width:900px){
    .ready-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  }



@media (min-width:960px) and (max-height:700px){
    .done-wrap{padding:6px 20px}
    .done-wrap .done{padding:14px 24px}
    .done-wrap .done .seal{width:38px;height:38px;margin-bottom:0}
    .done-wrap .done h3{font-size:20px}
    .skills{gap:8px}
    .done-wrap .done>.ladder{margin-top:2px}
    .bandcard{margin-bottom:10px}
    .unlockbox{margin-top:12px;padding-top:10px}
    .emailcap{margin-top:10px}
    .summary{margin-top:8px}
  }

@media (max-width:560px){
    .recap{grid-template-columns:repeat(2,1fr);margin-top:14px}
    /* 108px could not hold "Fluency & coherence" or "Grammatical range" on one line, so every
       criterion row grew to two lines and the card grew with it. Shrink the type, widen the track. */
    .skrow{grid-template-columns:124px minmax(0,1fr);font-size:12px;gap:10px}
    .skills{gap:9px}
    .done-wrap{padding:12px}
    .done-wrap .done{padding:16px 16px}
    .done-wrap .done .seal{width:42px;height:42px}
    .done-wrap .done .seal svg{width:19px;height:19px}
    .done-wrap .done h3{font-size:20px;line-height:1.2}
    .done-wrap .done>button[data-go]{margin-top:12px!important}
    .done-wrap .done .kicker{margin-top:10px}
    .bandcard{margin-bottom:10px}
    .unlockbox{margin-top:12px;padding-top:10px}
    .lticks{gap:5px}
    .lticks div{font-size:13px;line-height:1.35}
    .lnote{font-size:11.5px;line-height:1.35;margin-top:8px}
    .unlockbox #unlockAi{margin-top:10px!important}
    .lcard #bookHuman{margin-top:10px!important}
    .ladder{margin-top:10px}
    .lcard{padding:14px}
    .lhead{flex-wrap:wrap;margin-bottom:8px}
    .emailcap{margin-top:10px}
    .summary{margin-top:8px}
  }

@media (min-width:881px){
    .ob .right{position:sticky;top:0;align-self:start;min-height:100dvh}
  }

/* The full-size left panel needs ~940px of height to fit its portrait, headline, blurb and the
   four-step trustflow. This compaction used to start only below 800px, which left a dead zone at
   801-940px: too tall for the compact rules, too short for the full layout. A normal laptop window
   with a bookmarks bar lands right in it, and the trustflow got cut off below the fold. Measured,
   not guessed: at 820px the panel wants 938px and overflows by 64-160px. */
@media (min-width:881px) and (max-height:1040px){
    .ob{min-height:100dvh}
    /* `safe center` centres the panel when the content fits and silently falls back to top-aligned
       when it does not. Plain `center` overflows in BOTH directions, and the panel is overflow:hidden
       (it has to be, to clip its radial glow), so the top of the content would be cut away with no
       scrollbar and no way to reach it. */
    .ob .left{padding:28px 36px;justify-content:safe center;gap:14px}
    .ob .right{padding:28px 40px}
    .portrait .frame{width:clamp(110px,20vh,170px);height:clamp(110px,20vh,170px)}
    .portrait .cap{margin-top:9px}
    .left .pitch h2{font-size:clamp(21px,3.4vh,28px);line-height:1.16;margin-bottom:9px}
    .left .pitch p{font-size:clamp(12.5px,1.9vh,14px);line-height:1.5}
    .left .pitch .trust{font-size:11.5px;margin-top:9px;padding-top:9px}
    .trustflow li{font-size:11.5px;padding-bottom:13px}
    .trustflow li::before{width:9px;height:9px}
    .trustflow li:not(:last-child)::after{top:12px}
  }

@media (max-width:880px){
    /* minmax(0,1fr), not 1fr: a `1fr` track floors at the item's min-content, so the burgundy
       panel refused to shrink below portrait + headline and overflowed narrow phones. */
    .ob{grid-template-columns:minmax(0,1fr)}
    .left .pitch{min-width:0}
    .ob .left{padding:40px 32px}
    .ob .right{padding:38px 32px;max-width:none}
    .portrait .frame{width:170px;height:170px}
  }

@media (max-width:560px), (max-height:640px){
    .ob .right{padding:16px 20px}
    .mic-panel{padding:16px}
    .mic-idle{height:44px;margin-bottom:10px}
    .mic-note{font-size:11.5px;margin-top:8px}
    /* Once the check has passed the waveform says nothing the tick does not, and on a phone it was
       the 50px that pushed "Continue" under the fold. */
    .mic-panel.passed .mic-visual{display:none}
    .mic-panel.passed{padding:12px}
    .mic-play{padding:10px 16px;font-size:14px}
    .howrow{padding:6px 0}
    .reassure{margin-top:8px;font-size:12.5px}
    .stage>.sub{font-size:13px;line-height:1.45}
    .stage>h3{font-size:clamp(20px,3.6vh,26px);line-height:1.18}
  }

@media (max-width:600px){
    .ob .left{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px}
    .left .lead{flex-direction:row;align-items:center;gap:14px;justify-content:flex-start;flex:1;min-width:0}
    /* 34px next to an 84px portrait wrapped to four lines and ate the fold. */
    .left .pitch h2{font-size:19px;line-height:1.2;margin-bottom:0}
    /* The vertical dot-and-rail timeline collapses to a horizontal chevron trail under the compact
       header: drop the dots and connecting rail, and reuse ::before as an inline → between items. */
    .trustflow{flex:1 0 100%;flex-direction:row;flex-wrap:wrap;gap:3px 8px;margin:2px 0 0}
    .trustflow li{font-size:10.5px;font-weight:600;display:flex;align-items:center;padding:0}
    .trustflow li::before,.trustflow li::after{content:none}
    .trustflow li+li::before{content:"→";display:inline;position:static;width:auto;height:auto;background:none;box-shadow:none;border-radius:0;margin:0 8px 0 0;color:var(--rose)}
    /* Was position:absolute, so the headline and portrait ran straight through the wordmark. Put it
       back in flow as its own full-width row: no overlap, and no dead padding reserved for it. */
    .brand{position:static;flex:1 0 100%;margin-bottom:2px}
    .portrait{margin:0}
    .portrait .frame{width:70px;height:70px;border-radius:16px}
    .portrait .cap{display:none}
    .left .pitch h2{font-size:21px;margin-bottom:0}
    .left .pitch p{display:none}
    .ob .right{padding:18px 20px}
    .stage h3{font-size:22px}
    .stage .sub{font-size:14px;margin-bottom:14px}
    .navrow{margin-top:16px}
    .howrow{padding:8px 0}
    .field-row{grid-template-columns:1fr;margin-top:12px}
    .settings-fold>summary{display:block;cursor:pointer;font-size:13px;font-weight:600;color:var(--burgundy);list-style:none;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--rose-mist)}
    .settings-fold>summary::-webkit-details-marker{display:none}
    .settings-fold>summary::after{content:" ▾";color:var(--muted)}
    .settings-fold[open]>summary::after{content:" ▴"}
    .navrow .btn{flex:1}

    /* The exam room on a phone. It used to be built for a desktop and merely squeezed: on a 422px
       screen the portrait floored at 170px (30vw is only 127px, so the clamp's FLOOR won and it took
       40% of the screen width) and the status heading sat at 25px. The examiner state and the
       question card could not both be on screen. Everything below is scaled to the WIDTH we actually
       have, so the candidate can see the question they are being asked. */
    .room{padding:clamp(8px,1.4vh,14px) 14px clamp(8px,1.4vh,14px)}
    .room-top{width:100%;gap:8px}
    .parts{gap:5px}
    .parts .p{padding:6px 9px;font-size:11px}
    .engine-tag{font-size:10px;padding:5px 8px}
    .clock-elapsed{font-size:12px}
    .parttimer{padding:5px 9px;white-space:nowrap}
    .parttimer .pt-k,.topicchip{display:none}
    .room-meta{gap:6px}
    /* min() not clamp(): a floor is exactly what broke this. 26vw of 390px is 101px, of 430px is 112px. */
    .figure{width:min(26vw,120px);height:min(26vw,120px);margin-top:6px}
    .figure .pic{border-width:3px}
    .turn{margin:10px 0 2px}
    .turn .node{padding:6px 11px;font-size:11px}
    .status{margin-top:10px}
    .status .label{font-size:19px;line-height:1.2}
    .status .cue{margin-top:4px;font-size:13px;min-height:2.9em}
    /* "AI examiner · trained by former IELTS examiner Daniel James" is a trust line that earns its
       place on the readiness screen. Mid-exam, on a phone, it is small print sitting between the
       candidate and the question they are supposed to be answering. */
    .tipline{display:none}
    .viz{transform:scale(.8);transform-origin:center;margin:2px 0}
    .qcard{padding:12px 14px}
  }

@media (max-width:1024px){
    .arena{grid-template-columns:1fr;gap:0}
    .answermeter .am-hint{display:none}
  }

@media (min-width:960px){
    .done-wrap{padding:28px 20px}
    .done-wrap .done{width:min(1040px,100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:28px;align-items:start;padding:26px 30px}
    /* Rows pinned for the same reason as the ready card: left to auto-placement, .emailcap waits for
       the tall .lockwrap row to close and opens a ~330px hole under the upgrade card. Spanning
       .lockwrap across the right column's four rows lets that column stack tightly against it. */
    /* Row 7 is the flexible one. .lockwrap is taller than the right column's stack, and grid hands a
       spanning item's surplus height to the tracks it covers: without an fr track to absorb it, the
       surplus was shared out and opened a ~250px gap above "Test summary". */
    .done-wrap .done{grid-template-rows:auto auto auto auto auto auto 1fr auto}
    .done-wrap .done>.seal{grid-column:1 / -1;grid-row:1}
    .done-wrap .done>h3{grid-column:1 / -1;grid-row:2}
    .done-wrap .done>.lockwrap{grid-column:1;grid-row:3 / 8}
    .done-wrap .done>.ladder{grid-column:2;grid-row:3}
    .done-wrap .done>.emailcap{grid-column:2;grid-row:4}
    .done-wrap .done>.unlocknote{grid-column:2;grid-row:5}
    .done-wrap .done>.summary{grid-column:2;grid-row:6}
    .done-wrap .done>button[data-go]{grid-column:1 / -1;grid-row:8}
    .ladder{margin-top:0}
  }

@media (max-height:700px){
    .figure{width:clamp(96px,22vh,150px);height:clamp(96px,22vh,150px);margin-top:0}
    .figure .pic{border-width:3px}
    .turn{margin:4px 0 0}
    .turn .node{padding:6px 12px;font-size:12px}
    .status{margin-top:4px}
    .status .label{font-size:20px;line-height:1.2}
    .status .cue{margin-top:2px;font-size:13px;min-height:2.9em}
    .tipline{display:none}
    .viz{height:30px;margin-top:4px}
    .answermeter{margin-top:6px}
    .micwarn{margin:6px auto 4px;padding:7px 12px;font-size:12.5px;line-height:1.35}
    .topicchip{padding:6px 12px;margin-bottom:4px}
    .room-actions{margin-top:4px;padding-top:2px}
    .room:has(.cuecard:not([hidden])) .figure{width:76px;height:76px}
    .room:has(.cuecard:not([hidden])) .status .cue,.room:has(.cuecard:not([hidden])) .viz{display:none}
    .cuecard{margin-top:6px;padding:10px 18px;border-radius:14px}
    .cuecard .cc-tag{margin-bottom:4px;font-size:10px}
    .cuecard .cc-prep{padding:5px 10px;margin-bottom:6px}
    .cuecard .cc-title{font-size:16px;margin-bottom:4px}
    .cuecard .cc-intro{font-size:12px;margin-bottom:4px}
    .cuecard .cc-bullets{grid-template-columns:1fr 1fr;gap:2px 18px}
    .cuecard .cc-bullets li{font-size:13.5px;line-height:1.35}
    .cuecard .cc-notes{margin-top:6px;min-height:0;height:44px;padding:6px 10px;font-size:13px}
    .prepcard{padding:14px 22px 14px;border-radius:18px}
    .prep-timer{font-size:40px;margin:2px 0}
    .prep-sub{margin-bottom:8px;font-size:12.5px}
    .prep-cue{padding:10px 14px;margin-bottom:8px}
    .prep-notes{min-height:56px;height:56px;margin-bottom:8px;padding:8px 11px}
  }

@media (max-height:1040px){
    .room:has(.cuecard:not([hidden])) .figure{width:clamp(76px,14vh,130px);height:clamp(76px,14vh,130px);margin-top:0}
    .room:has(.cuecard:not([hidden])) :is(.status .cue,.tipline,.viz){display:none}
    .room:has(.cuecard:not([hidden])) .cuecard .cc-bullets{grid-template-columns:1fr 1fr;gap:4px 18px}
    .room:has(.cuecard:not([hidden])) .qcard.has-q{margin-top:10px}
  }