.v16-root .v21-mocks{
  /* the V21 palette, as the mockup's own cascade computes it */
  --m21-ink:#192d40;
  --m21-ink-deep:#19364a;
  --m21-muted:#60798b;
  --m21-line:#d4dfe6;
  --m21-panel:#fff;
  --m21-panel-line:#dbe2e7;
  --m21-rule:#e4eaee;
  --m21-option-hover:#f2f6f8;
  --m21-option-on:#edf3f7;
  --m21-option-on-line:#9bb2c3;
  --m21-option-on-edge:#41657f;
  --m21-glyph:#18364b;
  --m21-image-ground:#c4d1dd;
  --m21-text-btn:#476478;
  --m21-text-btn-hover:#162f43;
  --m21-night:#19344c;
  --m21-night-label:#a5bdcd;
  --m21-night-figure:#f5f8fa;
  --m21-night-noun:#b2c4d0;
  --m21-warm:#f19b47;
  --m21-warm-line:#eb9441;
  --m21-warm-hover:#f5aa63;
  --m21-warm-ink:#18364b;
  --m21-ring:#eda957;
  --m21-ring-rest:#dce5eb;
  /* the probe's two score tones and its two curves */
  --tone-low:#b8650f;
  --tone-ok:#007a52;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  color:var(--m21-ink)}
.v16-root .v21-mocks button,.v16-root .v21-mocks a{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.v16-root .v21-mocks :focus-visible{outline:2px solid var(--m21-option-on-edge);outline-offset:2px}

/* ————— the page header: the title, and the two doors out of the room ————— */
.v16-root .v21-mocks .page-heading{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:58px;margin:0 0 22px}
.v16-root .v21-mocks .page-heading > div{min-width:0}
.v16-root .v21-mocks .page-heading h1{margin:0;font-size:32px;font-weight:570;letter-spacing:-1.1px;
  line-height:1.18;color:var(--m21-ink)}
.v16-root .v21-mocks .headactions{display:flex;align-items:center;gap:18px;flex:none}
.v16-root .v21-mocks .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:7px;background:none;padding:5px 0;min-height:40px;
  font:inherit;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;text-decoration:none;
  color:var(--m21-text-btn);cursor:pointer;
  transition:color .15s,transform 160ms var(--ease-out)}
.v16-root .v21-mocks .btn .icon{width:17px;height:17px;flex:none}

/* ————— the one action: the warm button, with press feedback and a busy state ————— */
.v16-root .v21-mocks .go{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:46px;padding:11px 18px;border:1px solid var(--m21-warm-line);border-radius:9px;
  background:var(--m21-warm);color:var(--m21-warm-ink);font:inherit;font-size:14px;font-weight:580;
  cursor:pointer;text-decoration:none;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.v16-root .v21-mocks .go svg{width:17px;height:17px;flex:none}
.v16-root .v21-mocks .go[aria-busy="true"]{pointer-events:none;background:var(--m21-warm-hover)}
.v16-root .v21-mocks .spin{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid rgba(24,54,75,.25);
  border-top-color:var(--m21-warm-ink);animation:m21-spin 600ms linear infinite}
@keyframes m21-spin{to{transform:rotate(360deg)}}

/* ————— the quiet text control, the header doors' register ————— */
.v16-root .v21-mocks .tlink{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;
  background:none;font:inherit;font-size:13px;font-weight:500;color:var(--m21-text-btn);cursor:pointer;
  text-decoration:none;transition:color 150ms ease,transform 160ms var(--ease-out)}
.v16-root .v21-mocks .tlink svg{width:15px;height:15px;flex:none}
.v16-root .v21-mocks .tlink b{font-weight:500;color:var(--m21-ink-deep)}
.v16-root .v21-mocks .protag{display:inline-block;padding:1px 6px;border-radius:5px;background:var(--night);
  color:var(--cream);font-size:10px;letter-spacing:.04em}
.v16-root .v21-mocks .chev{transition:transform 200ms var(--ease-out)}
.v16-root .v21-mocks [aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ————— a subject row, its picture and its last score ————— */
.v16-root .v21-mocks .srow{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:6px 14px 6px 6px;
  border:1px solid transparent;border-radius:10px;background:none;font:inherit;font-size:14px;text-align:left;
  color:var(--m21-muted);cursor:pointer;transition:background-color 120ms ease,transform 160ms var(--ease-out)}
.v16-root .v21-mocks .srow img{width:68px;height:45px;flex:none;border-radius:6px;object-fit:cover;background:var(--m21-image-ground)}
.v16-root .v21-mocks .srow .nm{flex:1;min-width:0}
.v16-root .v21-mocks .srow[aria-pressed="true"]{background:var(--m21-option-on);border-color:var(--m21-option-on-line);
  color:var(--m21-ink-deep);box-shadow:inset 2px 0 var(--m21-option-on-edge)}
/* the last score: a 56px bar against the pass line, then the number */
.v16-root .v21-mocks .sc{display:inline-flex;align-items:center;gap:8px;flex:none}
.v16-root .v21-mocks .sb2{position:relative;width:56px;height:5px;border-radius:3px;background:var(--m21-ring-rest)}
.v16-root .v21-mocks .sb2 i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.v16-root .v21-mocks .sb2 b{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:var(--m21-ink-deep);opacity:.55}
.v16-root .v21-mocks .sc.low .sb2 i{background:var(--m21-ring)}
.v16-root .v21-mocks .sc.ok .sb2 i{background:var(--tone-ok)}
.v16-root .v21-mocks .pc{min-width:30px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
.v16-root .v21-mocks .sc.low .pc{color:var(--tone-low)}
.v16-root .v21-mocks .sc.ok .pc{color:var(--tone-ok)}
.v16-root .v21-mocks .kick{font-size:12px;color:var(--m21-muted)}
.v16-root .v21-mocks .line{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--m21-muted)}
/* NOT THE PROBE'S: the locked headline and a failed start, both in the line's own register */
.v16-root .v21-mocks .line b{display:block;margin-bottom:4px;font-weight:580;color:var(--m21-ink-deep)}
.v16-root .v21-mocks .err{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--tone-low)}

/* ————— Split (desktop): the list beside the pane ————— */
.v16-root .v21-mocks .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden;
  border:1px solid var(--m21-panel-line);border-radius:16px;background:var(--m21-panel)}
.v16-root .v21-mocks .list{display:grid;gap:2px;align-content:start;padding:8px;border-right:1px solid var(--m21-rule)}
.v16-root .v21-mocks .srow.t{min-height:48px;gap:12px;font-size:13.5px;padding:4px 12px 4px 4px}
.v16-root .v21-mocks .srow.t img{width:54px;height:36px;border-radius:5px}
.v16-root .v21-mocks .pane{display:flex;flex-direction:column;padding:26px 28px}
.v16-root .v21-mocks .ph{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.v16-root .v21-mocks .ph img{width:112px;height:75px;flex:none;border-radius:9px;object-fit:cover;background:var(--m21-image-ground)}
.v16-root .v21-mocks .ph h2{margin:3px 0 0;font-size:22px;font-weight:570;letter-spacing:-.5px;line-height:1.2;color:var(--m21-ink)}
.v16-root .v21-mocks .stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 18px;border-radius:12px;background:var(--m21-night);overflow:hidden}
.v16-root .v21-mocks .stats > div{padding:14px 16px}
.v16-root .v21-mocks .stats > div + div{border-left:1px solid rgba(139,163,182,.22)}
.v16-root .v21-mocks .stats dt{font-size:11.5px;color:var(--m21-night-label)}
.v16-root .v21-mocks .stats dd{margin:4px 0 0;font-size:28px;font-weight:400;letter-spacing:-1px;line-height:1.1;color:var(--m21-night-figure)}
.v16-root .v21-mocks .stats dd small{margin-left:3px;font-size:12px;letter-spacing:0;color:var(--m21-night-noun)}
.v16-root .v21-mocks .topicrow{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding:4px 0;
  border-top:1px solid var(--m21-rule);border-bottom:1px solid var(--m21-rule);font-size:12.5px;color:var(--m21-muted)}
.v16-root .v21-mocks .pane .go{margin-top:auto}

/* ————— Sorted (phone): papers sat first, lowest first, then the rest ————— */
.v16-root .v21-mocks .sorted{display:none}
.v16-root .v21-mocks .glabel{margin:0 0 8px 4px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--m21-muted)}
.v16-root .v21-mocks .shelf{display:grid;gap:4px;padding:6px;border:1px solid var(--m21-panel-line);border-radius:16px;background:var(--m21-panel)}
.v16-root .v21-mocks .shelf + .glabel{margin-top:22px}
.v16-root .v21-mocks .shelf.quiet{grid-template-columns:1fr;gap:2px;background:transparent;border-color:transparent;padding:0}
.v16-root .v21-mocks .srow.lite{min-height:44px;gap:11px;font-size:13px;padding:5px 10px 5px 5px}
.v16-root .v21-mocks .srow.lite img{width:42px;height:28px;border-radius:5px;opacity:.92}
.v16-root .v21-mocks .bar{display:none}

/* ————— overlays: the topic dialog (desktop), the sheet (phone) ————— */
.v16-root .v21-mocks.ovl{position:fixed;inset:0;z-index:60}
.v16-root .v21-mocks.ovl .scrim{position:absolute;inset:0;background:rgba(7,24,45,.32);opacity:0;
  transition:opacity 200ms ease}
.v16-root .v21-mocks.ovl[data-open] .scrim{opacity:1}
/* the probe's overlay card was the kit's .card, so it kept that card's
   20 / 22 padding under its own ground, radius and shadow */
.v16-root .v21-mocks.ovl .ocard{position:absolute;padding:20px 22px;background:var(--card);color:var(--m21-ink);
  box-shadow:0 1px 2px rgba(13,27,42,.08),0 18px 48px -12px rgba(13,27,42,.32);
  display:flex;flex-direction:column;max-height:min(70vh,640px);overflow:hidden}
.v16-root .v21-mocks.ovl.dlg .ocard{left:50%;top:50%;width:min(560px,calc(100vw - 48px));border-radius:16px;
  opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.v16-root .v21-mocks.ovl.dlg[data-open] .ocard{opacity:1;transform:translate(-50%,-50%)}
.v16-root .v21-mocks.ovl.sheet .ocard{left:0;right:0;bottom:0;max-height:86dvh;border-radius:18px 18px 0 0;
  padding-bottom:calc(0px + env(safe-area-inset-bottom));transform:translateY(100%);
  transition:transform 260ms var(--ease-drawer)}
.v16-root .v21-mocks.ovl.sheet[data-open] .ocard{transform:none}
.v16-root .v21-mocks.ovl .grab{width:36px;height:4px;border-radius:2px;background:var(--m21-line);margin:8px auto 0;flex:none}
.v16-root .v21-mocks.ovl .hd{flex:none;padding:16px 18px 12px;border-bottom:1px solid var(--m21-rule)}
.v16-root .v21-mocks.ovl .hd h2{margin:0;font-size:16px;font-weight:580;letter-spacing:-.25px}
.v16-root .v21-mocks.ovl .hd p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--m21-muted)}
.v16-root .v21-mocks.ovl .bd{overflow-y:auto;overscroll-behavior:contain;padding:6px}
.v16-root .v21-mocks.ovl .bd.facts-bd{padding:4px 18px 10px}
.v16-root .v21-mocks.ovl .ft{flex:none;display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-top:1px solid var(--m21-rule)}
.v16-root .v21-mocks.ovl .ft .go{width:auto;flex:1}
.v16-root .v21-mocks.ovl .grp{margin:10px 12px 4px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--m21-muted)}
.v16-root .v21-mocks.ovl .trow{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:9px;
  font-size:13.5px;color:var(--m21-ink-deep);cursor:pointer;transition:background-color 120ms ease}
.v16-root .v21-mocks.ovl .trow input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--m21-option-on-edge)}
.v16-root .v21-mocks.ovl .trow b{flex:1;min-width:0;font-weight:400}
.v16-root .v21-mocks.ovl .trow span{font-size:11.5px;color:var(--m21-muted);white-space:nowrap}
.v16-root .v21-mocks.ovl .note{padding:18px;font-size:13.5px;line-height:1.55;color:var(--m21-ink-deep)}
.v16-root .v21-mocks.ovl .note b{display:block;margin-bottom:6px;font-size:15px;font-weight:580}
.v16-root .v21-mocks.ovl .note p{margin:0 0 6px;color:var(--m21-muted)}
/* the paper's facts, in the phone's details sheet */
.v16-root .v21-mocks .facts{margin:0;padding:6px 0 0}
.v16-root .v21-mocks .facts > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-top:1px solid var(--m21-rule);font-size:12.5px;line-height:1.5}
.v16-root .v21-mocks .facts dt{color:var(--m21-muted)}
.v16-root .v21-mocks .facts dd{margin:0;text-align:right;color:var(--m21-ink-deep)}
.v16-root .v21-mocks .facts-topics{padding:4px 0 6px}

/* ————— phone: the shell's 920px, where the dock rises ————— */
@media(max-width:920px){
  .v16-root .v21-mocks .page-heading{flex-wrap:nowrap;margin-bottom:16px}
  .v16-root .v21-mocks .page-heading > div{flex:1 1 auto}
  .v16-root .v21-mocks .page-heading h1{font-size:26px;letter-spacing:-.8px}
  .v16-root .v21-mocks .headactions{gap:14px}
  .v16-root .v21-mocks .headactions .btn{font-size:12px}
  .v16-root .v21-mocks .headactions .btn svg{display:none}

  .v16-root .v21-mocks .split{display:none}
  .v16-root .v21-mocks .sorted{display:block;--float-foot:calc(130px + env(safe-area-inset-bottom));
    --page-foot:90px;--float-gap:16px;
    padding-bottom:max(0px,calc(var(--float-foot) + var(--float-gap) - var(--page-foot)))}
  .v16-root .v21-mocks .srow{min-height:54px;gap:12px;font-size:13.5px;padding-right:10px}
  .v16-root .v21-mocks .srow img{width:58px;height:39px}
  .v16-root .v21-mocks .srow.lite{min-height:44px;gap:11px;font-size:13px;padding:5px 10px 5px 5px}
  .v16-root .v21-mocks .srow.lite img{width:42px;height:28px}
  .v16-root .v21-mocks .sb2{width:40px}

  .v16-root .v21-mocks .bar{display:flex;align-items:center;gap:10px;position:fixed;left:10px;right:10px;
    bottom:calc(68px + env(safe-area-inset-bottom));z-index:35;padding:8px;border:1px solid var(--m21-line);
    border-radius:14px;background:var(--card);box-shadow:0 10px 30px -10px rgba(13,27,42,.35)}
  .v16-root .v21-mocks .bar .info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;
    font:inherit;text-align:left;color:var(--m21-ink-deep);cursor:pointer;min-height:44px}
  .v16-root .v21-mocks .bar .info img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
  .v16-root .v21-mocks .bar .info > span{min-width:0}
  .v16-root .v21-mocks .bar .info b{display:block;font-size:13.5px;font-weight:570;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v16-root .v21-mocks .bar .info small{display:block;font-size:11.5px;color:var(--m21-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v16-root .v21-mocks .bar .go{width:auto;min-height:44px;padding:10px 16px}
}

/* ————— touch craft (documents/styleguide.md section 3) —————
   A press answers on pointer down with a small scale, ease-out, under 200ms;
   hover tints are gated to a real pointer so a tapped row on a phone does not
   keep one. */
.v16-root .v21-mocks .btn:active,.v16-root .v21-mocks .go:active,.v16-root .v21-mocks .tlink:active{transform:scale(.97)}
.v16-root .v21-mocks .srow:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .v16-root .v21-mocks .btn:hover,.v16-root .v21-mocks .tlink:hover{color:var(--m21-text-btn-hover)}
  .v16-root .v21-mocks .go:hover{background:var(--m21-warm-hover)}
  .v16-root .v21-mocks .srow:hover,.v16-root .v21-mocks.ovl .trow:hover{background:var(--m21-option-hover)}
  .v16-root .v21-mocks .srow[aria-pressed="true"]:hover{background:var(--m21-option-on)}
}

/* A reader who asks for no motion gets none: the sheet and the dialog fade
   instead of travelling, and nothing scales or spins. */
@media (prefers-reduced-motion: reduce){
  .v16-root .v21-mocks.ovl .ocard{transform:none!important;transition:opacity 160ms ease!important}
  .v16-root .v21-mocks.ovl.sheet .ocard{opacity:0}
  .v16-root .v21-mocks.ovl.sheet[data-open] .ocard{opacity:1}
  .v16-root .v21-mocks.ovl.dlg .ocard{transform:translate(-50%,-50%)!important}
  .v16-root .v21-mocks .chev,.v16-root .v21-mocks .btn,.v16-root .v21-mocks .go,
  .v16-root .v21-mocks .tlink,.v16-root .v21-mocks .srow{transition:none}
  .v16-root .v21-mocks .btn:active,.v16-root .v21-mocks .go:active,.v16-root .v21-mocks .tlink:active,
  .v16-root .v21-mocks .srow:active{transform:none}
  .v16-root .v21-mocks .spin{animation:none}
}