/* =====================================================================
   VMA components
   Every value comes from tokens.css. Do not put colors, fonts or sizes
   here; add a token instead. Class prefix: v-
   Breakpoints (phone first):
     phone   < 700px
     tablet  700-1099px  (upright tablets)
     desktop >= 1100px   (computers, Chromebooks, sideways tablets)
   ===================================================================== */

/* ---------- 1. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text)}
body{margin:0;font-family:var(--font-body);font-weight:var(--body-weight);font-size:var(--text-md);line-height:1.5;-webkit-text-size-adjust:100%}
:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
/* Light surfaces switch the focus colour to ink */
/* The outline sits just OUTSIDE the control, so its colour follows the surface around it */
.v-paper,.v-question,.v-tester,.v-mission{--focus-color:var(--brand-ink)}
.v-topbar{--focus-color:var(--brand-yellow)}
/* Links inside text are underlined, never colour-only. WCAG 1.4.1 */
a:not([class]){color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Text boxes never get the yellow ring: they use the calmer field focus below.
   (Checkboxes and switches keep a ring; see section 10.) */
:where(textarea,input:not([type="checkbox"]):not([type="radio"]),select):is(:focus,:focus-visible){outline:none;box-shadow:none;border-radius:inherit}
/* A box inside a box shows ONE focus mark: the outer box's. Never a second line on the inner field. */
.v-composer textarea:focus,.v-composer textarea:focus-visible{outline:none!important;box-shadow:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.v-display,.v-h1,.v-h2,.v-h3,.v-h4{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);text-transform:var(--display-case);letter-spacing:var(--display-tracking);font-stretch:var(--display-stretch);line-height:1.05;margin:0;text-wrap:balance}
.v-h1{font-size:var(--h1)} .v-h2{font-size:var(--h2)} .v-h3{font-size:var(--h3)} .v-h4{font-size:var(--h4);font-style:normal}
.v-muted{color:var(--text-muted)}
.v-num{font-variant-numeric:tabular-nums}
.v-gutter{padding-left:max(var(--s-4), env(safe-area-inset-left,0px));padding-right:max(var(--s-4), env(safe-area-inset-right,0px))}
.v-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 2. Tester bar (platform owner only; data-design.md 6.1b) ----------
   Sits in the normal page flow ABOVE the app: never fixed or sticky, never covers content.
   Always shows "Testing as: <role> (test)". "Back to Owner" hides while already on Owner.
   Tablet/desktop: a row of 6 portal buttons. Phone: one dropdown chip instead. */
.v-tester{position:relative;display:flex;align-items:center;gap:var(--s-2);min-height:48px;
  padding:calc(var(--s-1) + env(safe-area-inset-top,0px)) max(var(--s-3), env(safe-area-inset-right,0px)) var(--s-1) max(var(--s-3), env(safe-area-inset-left,0px));
  background:var(--brand-yellow);color:var(--brand-ink);font-size:var(--text-sm);font-weight:700;
  border-bottom:4px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--brand-ink) 0 8px,var(--brand-yellow) 8px 16px) 4}
.v-tester__status{white-space:nowrap;flex:none}
.v-tester__status b{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);text-transform:uppercase;letter-spacing:.03em;font-size:16px}
.v-tester__portals{display:none;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.v-tester__portals::-webkit-scrollbar{display:none}
.v-tester__portal{flex:none;min-height:36px;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:rgba(17,19,24,.1);color:var(--brand-ink);font-weight:700;white-space:nowrap}
.v-tester__portal[aria-current="page"]{background:var(--brand-ink);color:var(--brand-yellow)}
.v-tester__select{flex:1;min-width:0;min-height:40px;padding:0 34px 0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--brand-ink);color:var(--brand-yellow);font-weight:700;
  appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brand-yellow) 50%),linear-gradient(135deg,var(--brand-yellow) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;text-overflow:ellipsis}
.v-tester__back{flex:none;margin-left:auto;min-height:40px;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:#fff;color:var(--brand-ink);font-weight:700;white-space:nowrap}
.v-tester__back[hidden]{display:none}
@media (max-width:699px){ .v-tester__who,.v-tester__colon{display:none} }
@media (min-width:700px){
  .v-tester__select{display:none}
  .v-tester__portals{display:flex}
}

/* ---------- 3. App top bar ---------- */
.v-topbar{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:62px;background:var(--topbar);color:var(--on-topbar);
  padding-left:max(var(--s-4), env(safe-area-inset-left,0px));padding-right:max(var(--s-4), env(safe-area-inset-right,0px))}
.v-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:var(--stripe)}
.v-brand{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-display);font-style:var(--display-style);font-weight:900;font-stretch:var(--display-stretch);text-transform:uppercase;font-size:22px;white-space:nowrap;color:inherit;text-decoration:none}
.v-brand__mark{width:38px;height:38px;border-radius:var(--r-sm);background:var(--brand-yellow);color:var(--brand-ink);display:grid;place-items:center;font-size:22px;flex:none}
[data-look="arena"] .v-brand__mark,:root:not([data-look]) .v-brand__mark{transform:skewX(-8deg)}
.v-brand__name{overflow:hidden;text-overflow:ellipsis}
.v-topbar__end{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.v-picker{min-height:var(--tap);display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3);border-radius:var(--r-sm);border:var(--border) solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:inherit;font-weight:700}
.v-avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-teal);color:var(--brand-ink);display:grid;place-items:center;font-weight:700;flex:none;border:0}
@media (max-width:699px){ .v-brand__name{display:none} .v-topbar{min-height:56px} }

/* ---------- 4. Area tiles (the main tabs) ---------- */
.v-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.v-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-1);
  min-height:var(--tap-kid);padding:var(--s-3) var(--s-1);border:0;border-radius:var(--r-md);color:var(--on-area);text-decoration:none;
  transition:transform .12s ease}
.v-tile > *{position:relative}
.v-tile::before{content:"";position:absolute;inset:0}
.v-tile__icon{width:24px;height:24px}
.v-tile__name{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);text-transform:var(--display-case);font-size:var(--tile-name-phone);line-height:1.05}
.v-tile__num,.v-tile__note{display:none}
.v-tile__long{display:none} /* phone shows the short name; put both in .v-tile__name */

.v-tile:active{transform:scale(.97)}
.v-tile--home{background:var(--paper);color:var(--paper-text)}
.v-tile--home::before{background:var(--stripe) left bottom/100% 6px no-repeat}
.v-tile--create{background:var(--area-create)}
.v-tile--create::before{background:repeating-linear-gradient(-45deg,rgba(17,19,24,.1) 0 10px,transparent 10px 22px)}
.v-tile--students{background:var(--area-students)}
.v-tile--students::before{background:radial-gradient(circle at 105% 110%,rgba(255,255,255,.35) 0 52px,transparent 53px),radial-gradient(circle at 105% 110%,rgba(17,19,24,.12) 0 80px,transparent 81px)}
.v-tile--games{background:var(--area-games)}
.v-tile--games::before{background:conic-gradient(from 135deg at 100% 100%,rgba(255,255,255,.3) 0 25%,transparent 0) right bottom/90px 90px no-repeat,conic-gradient(from 135deg at 100% 100%,rgba(17,19,24,.06) 0 25%,transparent 0) right bottom/140px 140px no-repeat}
.v-tile--build{background:var(--area-build)}
.v-tile--build::before{background:radial-gradient(rgba(17,19,24,.16) 2px,transparent 2.5px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(120deg,transparent 40%,#000 75%);mask-image:linear-gradient(120deg,transparent 40%,#000 75%)}
.v-tile[aria-current="page"]{box-shadow:0 0 0 3px var(--text)}
.v-tiles .v-tile--home{display:none}
@media (min-width:700px){
  .v-tiles{grid-template-columns:repeat(5,1fr);gap:var(--s-3)}
  .v-tiles .v-tile--home{display:flex}
  .v-tile__long{display:inline} .v-tile__short{display:none}
  .v-tile{align-items:flex-start;text-align:left;min-height:104px;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg)}
  .v-tile__name{font-size:18px}
  .v-tile__num{display:block;margin-top:auto;font-family:var(--font-display);font-style:var(--display-style);font-weight:900;font-stretch:var(--display-stretch);font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
}
@media (min-width:1100px){
  .v-tiles{grid-template-columns:1.1fr repeat(4,1fr);gap:var(--s-4)}
  .v-tile{min-height:120px}
  .v-tile__name{font-size:21px}
  .v-tile__num{font-size:38px}
  .v-tile__note{display:block;font-size:13px;font-weight:700}
}

/* ---------- 5. Page layouts ---------- */
.v-page{padding-block:var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.v-desk{display:flex;flex-direction:column;gap:var(--s-4);min-height:0}
.v-desk__side{display:none}
@media (min-width:700px){
  .v-page{padding-block:var(--s-6) var(--s-8)}
  .v-desk__side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);order:-1}
  .v-desk__side .v-item:nth-of-type(n+3){display:none}
}
@media (min-width:1100px){
  .v-desk{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--s-6);align-items:start}
  .v-desk__side{display:flex;flex-direction:column;order:0}
  .v-desk__side .v-item:nth-of-type(n+3){display:flex}
}
.v-wrap{max-width:1360px;margin:0 auto;width:100%}

/* ---------- 6. Panels and lists (on the background) ---------- */
.v-panel{background:var(--raised);color:var(--text);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);box-shadow:inset 0 0 0 1px var(--line)}
.v-panel__title{font-family:var(--font-display);font-style:normal;font-weight:var(--display-weight);font-stretch:var(--display-stretch);text-transform:var(--display-case);font-size:var(--h4);margin:0 0 var(--s-1)}
.v-item{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 0;font-size:var(--text-sm)}
.v-item + .v-item{border-top:1px solid var(--line)}
.v-item__title{font-weight:700}
.v-item__sub{color:var(--text-muted);margin:0}

/* ---------- 7. Paper: white reading surface (chat, test papers, forms) ---------- */
.v-paper{background:var(--paper);color:var(--paper-text);border-radius:var(--r-lg);padding:var(--s-4)}
@media (min-width:700px){ .v-paper{padding:var(--s-5) var(--s-6)} }
.v-paper .v-muted,.v-paper .v-item__sub{color:var(--paper-muted)}
.v-paper .v-item + .v-item{border-color:var(--paper-line)}

/* ---------- 8. Buttons ---------- */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-5);
  border:0;border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--text-md);text-decoration:none;white-space:nowrap;
  transition:transform .1s ease,filter .1s ease}
.v-btn:hover{filter:brightness(1.06)}
.v-btn:active{transform:translateY(1px)}
.v-btn--secondary{background:transparent;color:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.v-paper .v-btn--secondary{color:var(--paper-text)}
.v-btn--quiet{background:var(--paper-2);color:var(--paper-text)}
.v-btn--danger{background:var(--bad);color:#fff}
.v-btn--sm{min-height:36px;padding:0 var(--s-3);font-size:var(--text-sm)}
.v-btn--lg{min-height:56px;padding:0 var(--s-6);font-size:var(--text-lg)}
.v-btn--icon{width:var(--tap);padding:0}
.v-btn--block{width:100%}
.v-btn[disabled],.v-btn[aria-disabled="true"]{background:var(--paper-2);color:var(--paper-muted);box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.v-btn.is-loading{color:transparent;position:relative;pointer-events:none}
.v-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--on-primary);border-right-color:transparent;animation:v-spin .7s linear infinite}
.v-btn svg{width:20px;height:20px;flex:none}
@keyframes v-spin{to{transform:rotate(360deg)}}

/* ---------- 9. Status pills ---------- */
.v-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:700;white-space:nowrap;line-height:1.4}
.v-pill--good{background:var(--good-bg);color:var(--good)}
.v-pill--warn{background:var(--warn-bg);color:var(--warn)}
/* Draft vs Scheduled must not rely on colour: Draft is a dashed outline, Scheduled a solid fill. WCAG 1.4.1 */
.v-pill--draft{background:var(--warn-bg);color:var(--warn);outline:1.5px dashed currentColor;outline-offset:-1.5px}
.v-pill--bad{background:var(--bad-bg);color:var(--bad)}
.v-pill--info{background:var(--info-bg);color:var(--info)}
.v-pill--soon{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* ---------- 10. Forms ---------- */
.v-field{display:flex;flex-direction:column;gap:6px}
.v-label{font-weight:700;font-size:var(--text-sm)}
.v-help{font-size:var(--text-sm);color:var(--paper-muted)}
.v-error{font-size:var(--text-sm);color:var(--bad);font-weight:700}
.v-error::before{content:"\26A0\FE0E  " / "";}
.v-input,.v-textarea,.v-select{width:100%;min-height:var(--tap);padding:10px var(--s-3);border-radius:var(--r-sm);border:2px solid var(--field-border);background:var(--paper);color:var(--paper-text);font-size:var(--text-md)}
.v-textarea{min-height:110px;resize:vertical}
.v-input:focus,.v-textarea:focus,.v-select:focus{outline:none;border-color:var(--field-focus-border);box-shadow:var(--field-focus-glow)}
/* Thin, neutral scrollbars inside text boxes and the chat thread */
.v-input,.v-textarea,.v-composer textarea,.v-thread{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
.v-textarea::-webkit-scrollbar,.v-composer textarea::-webkit-scrollbar,.v-thread::-webkit-scrollbar{width:8px;height:8px}
.v-textarea::-webkit-scrollbar-track,.v-composer textarea::-webkit-scrollbar-track,.v-thread::-webkit-scrollbar-track{background:transparent}
.v-textarea::-webkit-scrollbar-thumb,.v-composer textarea::-webkit-scrollbar-thumb,.v-thread::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:8px}
.v-input::placeholder,.v-textarea::placeholder{color:var(--paper-muted)}
.v-field.has-error .v-input,.v-field.has-error .v-textarea{border-color:var(--bad)}
.v-check{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);font-weight:600}
.v-check input{width:24px;height:24px;accent-color:var(--brand-ink);margin:0}
.v-switch{display:inline-flex;align-items:center;gap:var(--s-3);min-height:var(--tap);font-weight:600;cursor:pointer}
.v-switch input{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:var(--r-pill);background:var(--field-border);position:relative;margin:0;cursor:pointer;transition:background .15s}
.v-switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.v-switch input:checked{background:var(--brand-ink)}
.v-switch input:checked::after{transform:translateX(22px)}

/* ---------- 11. In-page tabs (segmented) ---------- */
.v-tabs{display:flex;gap:var(--s-1);padding:var(--s-1);border-radius:var(--r-md);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none}
.v-tabs::-webkit-scrollbar{display:none}
.v-tab{flex:none;min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);font-weight:700;white-space:nowrap}
.v-tab[aria-selected="true"]{background:var(--text);color:var(--bg)}

/* ---------- 12. AI chat ---------- */
.v-chat{display:flex;flex-direction:column;gap:var(--s-3);min-height:0}
.v-thread{display:flex;flex-direction:column;gap:var(--s-4);overflow-y:auto;min-height:0}
.v-msg{max-width:88%;padding:var(--s-3) var(--s-4);border-radius:18px}
.v-msg p{margin:0} .v-msg p + p{margin-top:var(--s-2)}
.v-msg--me{align-self:flex-end;max-width:78%;background:var(--paper-text);color:var(--paper);border-bottom-right-radius:4px}
.v-msg--ai{align-self:flex-start;background:var(--paper-2);color:var(--paper-text);border-bottom-left-radius:4px}
.v-msg--error{align-self:flex-start;background:var(--bad-bg);color:var(--bad);font-weight:600;border-bottom-left-radius:4px}
.v-who{font-family:var(--font-display);font-style:normal;font-weight:800;font-stretch:var(--display-stretch);text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--accent-text);margin-bottom:2px}
.v-action{background:var(--paper);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-top:var(--s-3)}
.v-action__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);font-size:var(--text-xs);font-weight:700;color:var(--paper-muted)}
.v-action__title{font-family:var(--font-display);font-style:normal;font-weight:800;font-stretch:var(--display-stretch);text-transform:var(--display-case);font-size:20px;line-height:1.1;margin:6px 0 2px}
.v-action__meta{color:var(--paper-muted);font-size:var(--text-sm)}
.v-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.v-scores{list-style:none;margin:var(--s-2) 0;padding:0}
.v-scores li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--paper-line);font-variant-numeric:tabular-nums}
.v-scores li:last-child{border-bottom:0}
/* Low score: red AND a down-arrow, so it is not colour-only. Add visually hidden "low" text in the app. */
.v-score-low{color:var(--score-low);font-weight:700}
.v-score-low::before{content:"\25BC\FE0E  " / "";font-size:.7em;vertical-align:.1em}
.v-typing{display:inline-flex;gap:5px;padding:var(--s-3) var(--s-4);background:var(--paper-2);border-radius:18px;align-self:flex-start}
.v-typing i{width:8px;height:8px;border-radius:50%;background:var(--paper-muted);animation:v-blink 1.2s infinite}
.v-typing i:nth-child(2){animation-delay:.2s} .v-typing i:nth-child(3){animation-delay:.4s}
@keyframes v-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.v-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.v-chip{min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-text);box-shadow:inset 0 0 0 1.5px var(--paper-line);font-size:var(--text-sm);font-weight:700}
.v-composer{display:flex;align-items:flex-end;gap:var(--s-2);padding:6px 6px 6px var(--s-4);border-radius:var(--r-md);background:var(--paper);box-shadow:inset 0 0 0 2px var(--field-border)}
.v-composer:focus-within{box-shadow:inset 0 0 0 2px var(--field-focus-border),var(--field-focus-glow)}
/* Auto-growing box: no fixed height. Grows with its text (field-sizing where the browser supports it,
   or the app sets height from scrollHeight) up to about 8 lines, then scrolls inside. */
.v-composer textarea{flex:1;min-width:0;height:auto;min-height:var(--tap);max-height:calc(8 * 1.5em + 22px);overflow-y:auto;field-sizing:content;
  border:0;background:transparent;color:var(--paper-text);resize:none;padding:11px 0;outline:none;box-shadow:none;font-size:var(--text-md);line-height:1.5}
.v-composer textarea::placeholder{color:var(--paper-muted)}
.v-composer .v-btn--quiet{width:var(--tap);padding:0}

/* ---------- 13. Tables (roster, papers) ---------- */
.v-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);background:var(--paper)}
.v-table{width:100%;border-collapse:collapse;color:var(--paper-text);font-size:var(--text-sm);min-width:560px}
.v-table th,.v-table td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--paper-line);vertical-align:middle}
.v-table th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--paper-muted);font-weight:700}
.v-table td.v-num,.v-table th.v-num{text-align:right}
.v-table tbody tr{cursor:pointer}
.v-table tbody tr:hover{background:var(--paper-2)}
.v-table tbody tr:last-child td{border-bottom:0}

/* ---------- 14. States: empty, loading, error, coming soon ---------- */
.v-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-8) var(--s-4);border-radius:var(--r-lg);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.v-state__icon{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--raised-2);color:var(--text)}
.v-state__title{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);font-stretch:var(--display-stretch);text-transform:var(--display-case);font-size:var(--h3);margin:var(--s-2) 0 0}
.v-state p{margin:0;max-width:44ch;color:var(--text-muted)}
.v-state .v-btn{margin-top:var(--s-3)}
.v-state--error .v-state__icon{background:var(--bad-bg);color:var(--bad)}
.v-state--soon{background:repeating-linear-gradient(-45deg,var(--raised) 0 14px,var(--raised-2) 14px 28px)}
.v-state--soon .v-state__icon{background:var(--brand-yellow);color:var(--brand-ink)}
.v-banner{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);font-weight:600}
.v-banner--error{background:var(--bad-bg);color:var(--bad)}
.v-banner--warn{background:var(--warn-bg);color:var(--warn)}
.v-banner--good{background:var(--good-bg);color:var(--good)}
.v-skeleton{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--raised) 0%,var(--raised-2) 50%,var(--raised) 100%) 0 0/200% 100%;animation:v-shimmer 1.4s linear infinite;min-height:16px}
.v-paper .v-skeleton{background-image:linear-gradient(90deg,var(--paper-2) 0%,#fff 50%,var(--paper-2) 100%)}
@keyframes v-shimmer{to{background-position:-200% 0}}
.v-toast{position:fixed;left:50%;bottom:calc(var(--s-5) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:var(--s-3);
  max-width:calc(100% - 32px);padding:var(--s-3) var(--s-5);border-radius:var(--r-md);background:var(--paper-text);color:var(--paper);font-weight:700;box-shadow:var(--lift)}

/* ---------- 15. Kid Arcade pieces ---------- */
.v-kid{font-size:17px}
.v-kid .v-h1{font-size:var(--hero)}
.v-mission{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);align-items:center;padding:var(--s-4);border-radius:var(--r-lg);color:var(--on-area);background:var(--area-create)}
.v-mission--striped{background:var(--area-create) repeating-linear-gradient(-45deg,rgba(17,19,24,.1) 0 10px,transparent 10px 22px)}
.v-mission--students{background:var(--area-students)} .v-mission--games{background:var(--area-games)} .v-mission--build{background:var(--area-build)}
.v-mission__from{font-size:var(--text-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.v-mission__title{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);text-transform:var(--display-case);font-size:26px;line-height:1.05;overflow-wrap:break-word;hyphens:auto}
.v-mission__meta{font-size:var(--text-sm)}
.v-mission .v-play{grid-column:2;grid-row:1 / 4}
.v-progress{grid-column:1 / -1;height:10px;border-radius:var(--r-pill);background:rgba(17,19,24,.2);overflow:hidden;margin-top:var(--s-2)}
.v-progress > i{display:block;height:100%;background:var(--brand-ink);border-radius:inherit}
.v-play{min-height:var(--tap-kid);padding:0 var(--s-6);border:0;border-radius:var(--r-md);background:var(--brand-ink);color:#fff;font-family:var(--font-display);font-style:var(--display-style);font-weight:900;font-stretch:var(--display-stretch);text-transform:uppercase;font-size:24px}
.v-answers{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.v-answer{min-height:var(--tap-kid);padding:var(--s-2);border:0;border-radius:var(--r-md);color:var(--on-area);font-family:var(--font-display);font-weight:800;font-stretch:var(--display-stretch);font-size:26px;box-shadow:var(--press);transition:transform .08s}
.v-answer:nth-child(4n+1){background:var(--area-create)} .v-answer:nth-child(4n+2){background:var(--area-students)} .v-answer:nth-child(4n+3){background:var(--area-games)} .v-answer:nth-child(4n+4){background:var(--area-build)}
/* Picked / right / wrong never rely on colour alone: picked = pressed in + ink ring, right = tick, wrong = cross
   + struck through. The app also sets aria-pressed / announces "Correct" or "Not quite" in a live region. */
.v-answer:active,.v-answer.is-picked{transform:translateY(3px);box-shadow:0 0 0 4px var(--brand-ink)}
.v-answer.is-right{background:var(--good);color:#fff;box-shadow:0 0 0 4px var(--brand-ink)}
.v-answer.is-right::after{content:"\2713\FE0E" / "";margin-left:10px;font-size:.9em}
.v-answer.is-wrong{background:var(--paper-2);color:var(--paper-muted);box-shadow:inset 0 0 0 2px var(--field-border)}
.v-answer.is-wrong *{text-decoration:line-through;text-decoration-thickness:3px}
.v-answer.is-wrong::after{content:"\2717\FE0E" / "";margin-left:10px;font-size:.9em;text-decoration:none}
.v-question{background:var(--paper);color:var(--paper-text);border-radius:var(--r-xl);padding:var(--s-5)}
.v-question__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:800;font-stretch:var(--display-stretch);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.v-question__text{font-family:var(--font-display);font-weight:800;font-stretch:var(--display-stretch);text-transform:var(--display-case);font-size:26px;line-height:1.2;margin:var(--s-3) 0 var(--s-4)}
.v-fraction{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:middle;font-weight:900}
.v-fraction > :first-child{border-bottom:3px solid currentColor;padding:0 3px 2px}
.v-fraction > :last-child{padding-top:2px}
.v-world{position:relative;overflow:hidden;min-height:112px;display:flex;align-items:flex-end;padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-lg);color:var(--on-area);font-family:var(--font-display);font-weight:800;font-stretch:var(--display-stretch);text-transform:uppercase;font-size:20px;text-align:left}

/* Very small phones (320px): keep kid cards inside the screen. WCAG 1.4.10 */
@media (max-width:359px){
  .v-play{padding:0 var(--s-4);font-size:20px}
  .v-mission__title{font-size:clamp(17px,6vw,22px)}
  /* the dropdown itself shows "Student (test)", so the words "Testing as" can go */
  .v-tester__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.v-world{overflow-wrap:break-word;hyphens:auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}