:root{
  --ink:var(--vq-ink);
  --muted:var(--vq-ink-muted);
  --leaf:var(--vq-accent);
}
@property --level-progress{syntax:"<angle>";inherits:false;initial-value:0deg}

*{box-sizing:border-box}
.parent-dashboard{width:min(1280px,100%);margin:auto}
.identity-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.profile-avatar{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;border-radius:50%;color:var(--ink);font:900 1.1rem/1 var(--font-ui)}
.eyebrow{margin:0;color:var(--vq-accent);font:900 .7rem/1.2 var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.identity-row h1{line-height:1;letter-spacing:-.05em}
.identity-row p:last-child{margin:0;color:var(--muted);font-size:.84rem}
.report-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.report-header:has(.back-link[hidden]){display:none}
.report-card{margin-top:12px;overflow:hidden}
.report-card+.report-card{margin-top:14px}
.eyebrow+.report-card,.report-header+.report-card,.children-progress .report-card:first-child{margin-top:0}
button.report-card{display:block;width:100%;border:0;color:var(--vq-ink);text-align:inherit;font:inherit}
.report-card-row{display:flex;align-items:stretch}
.report-card-copy{flex:0 0 80%;min-width:0;padding:12px 24px}
.report-card-copy h1,.report-card-copy h2,.report-card-copy h3,.report-card-copy h4{margin:0;color:var(--vq-ink);font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-.03em}
.report-card-copy p{margin:5px 0 0;color:var(--muted);font-size:.86rem}
.report-state{align-self:center;margin-right:16px}
.knowledge-status .report-card-copy h1,.report-card-copy h2,.knowledge-status .report-card-copy h3{font-size:clamp(1.7rem,3.6vw,2.2rem)}
.children-progress .report-card-copy h3{font-size:clamp(.95rem,1.6vw,1.1rem)}
.children-progress{margin-top:12px}
.back-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:800 .85rem/1 var(--font-ui);cursor:pointer}
.leaf-card{position:relative}
.leaf-card .leaf-card-copy{padding-right:52px}
.leaf-card-row{display:flex;align-items:flex-start}
.leaf-card-number{display:flex;flex:0 0 28px;align-items:center;padding:12px 0 12px 24px}
.leaf-card-number span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;background:var(--vq-line);color:var(--ink);font-size:.75rem;font-weight:700}
.leaf-card-copy{flex:1 1 auto;min-width:0;padding:12px 24px 12px 12px}
.leaf-card-copy p{margin:0;color:var(--muted);font-size:.85rem;font-weight:400}
.leaf-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px!important}
.leaf-card .leaf-card-status{position:absolute;right:24px;bottom:12px;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;padding:0;background:transparent!important}
.leaf-card-status svg{width:16px;height:16px}
.back-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;font:800 .9rem/1 var(--font-ui);cursor:pointer}
.back-button svg{width:18px;height:18px;flex:0 0 18px}
.question{display:grid}
.question-loading{display:flex;min-height:126px;align-items:center;gap:14px;color:var(--ink)}
.loading-spinner{width:24px;height:24px;flex:0 0 24px;border:3px solid var(--vq-surface-tint);border-top-color:var(--leaf);border-radius:50%;animation:question-spin .8s linear infinite}
@keyframes question-spin{to{transform:rotate(360deg)}}
.evaluator-note{margin:0;padding:12px 14px;border:var(--vq-border);border-left:6px solid var(--vq-accent);border-radius:0 var(--vq-radius-sm) var(--vq-radius-sm) 0;background:var(--vq-surface);color:var(--muted);font-size:.8rem}

.student-surface{
  width:100%;
  height:auto!important;
  min-height:0!important;
  margin:0;
  padding:clamp(20px,4vw,34px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:none;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.student-surface::-webkit-scrollbar{display:none}
.student-surface{scroll-padding-bottom:72px}

.identity-row{
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid var(--vq-line);
}

.profile-avatar{
  width:44px;
  height:44px;
  flex-basis:44px;
  background:var(--app-sun,var(--vq-focus));
  box-shadow:none;
}

.identity-row h1{
  margin:0 0 3px;
  font-size:clamp(1.55rem,6vw,2.35rem);
}

.knowledge-status{margin-top:0;padding-bottom:20px;border-bottom:1px solid var(--vq-line)}
.subjects-section{margin-top:28px}
.report-header{height:auto;min-height:44px;margin-bottom:12px}

.report-card{
  border:var(--vq-border);
  border-radius:var(--vq-radius-md);
  background:var(--vq-surface);
  box-shadow:none;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}

button.report-card,.leaf-card[role="button"]{cursor:pointer}
button.report-card:hover,.leaf-card[role="button"]:hover{transform:translateY(-2px);background:var(--vq-surface-tint);box-shadow:none}
button.report-card:focus-visible,.leaf-card[role="button"]:focus-visible{background:var(--vq-surface-tint);outline:3px solid var(--vq-focus);outline-offset:3px}
button.report-card:active,.leaf-card[role="button"]:active{transform:scale(.992);box-shadow:none}

.knowledge-status .report-card-copy{padding:18px 22px}
.knowledge-status>.report-card{border:0;background:transparent}
.knowledge-status .report-card-row.has-icon{align-items:center}
.report-card-icon{display:grid;width:50px;height:50px;flex:0 0 50px;place-items:center;border:var(--vq-border);border-radius:50%;background:var(--vq-surface);color:var(--ink);box-shadow:none}
.report-card-icon svg{width:24px;height:24px;stroke-width:2}
.report-card-symbol{display:block;font:400 1.7rem/1 Georgia,serif}
.knowledge-status .has-icon .report-card-copy{flex:1 1 auto;min-width:0;padding:4px 18px}
.children-progress .report-card-copy{padding:13px 18px}
.children-progress .report-card-row.has-icon{align-items:center}
.children-progress .has-icon .report-card-icon{width:42px;height:42px;flex-basis:42px;margin-left:14px;background:var(--vq-accent-soft);color:var(--vq-accent)}
.children-progress .has-icon .report-card-icon svg{width:20px;height:20px}
.children-progress .has-icon .report-card-symbol{font-size:1.4rem}
.children-progress .has-icon .report-card-copy{flex:1 1 auto;min-width:0;padding-left:12px}
.children-progress .report-card+.report-card{margin-top:10px}

.back-link{
  order:-1;
  min-width:44px;
  min-height:44px;
  margin-right:auto;
  color:var(--vq-accent);
  text-decoration:none;
}

.report-header .eyebrow{margin-left:auto;text-align:right}
.leaf-card-meta{text-transform:uppercase;letter-spacing:.08em;font-size:.64rem!important;font-weight:800!important}

#validation-screen{
  height:100%;
  min-height:0;
  padding:0;
}

#validation-screen .validation-panel{
  position:relative;
  height:100%;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  max-width:none!important;
  margin:0;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#validation-section,.validation-panel>#validation-title,.validation-panel>#validation-can-do{display:none}

.validation-panel>.back-button{
  justify-self:start;
  width:max-content;
  margin:0 0 16px;
  border:0;
  padding:8px 4px 8px 0;
  color:var(--vq-accent);
}

#validation-screen .question{min-height:0;padding:0 2px 12px 0;border:0;border-radius:0;background:transparent;gap:16px;overflow:auto;scrollbar-width:none}
#validation-screen .question::-webkit-scrollbar{display:none}
#validation-screen .question:has(.question-loading){display:grid;place-items:center;padding:0;overflow:hidden}
#validation-screen .question-loading{min-height:0;flex-direction:column;justify-content:center;gap:12px;text-align:center}
#validation-screen .question-loading strong{font:750 .9rem/1.2 var(--font-ui)}
#validation-screen .question-block{min-width:0}
.question-block.is-topic-cycle{padding-inline:clamp(2px,1vw,6px);transition:opacity .25s ease,transform .25s ease}
.question-block.is-topic-cycle #question-prompt{animation:cycle-in .2s ease both}
.topic-game-hud{position:relative;display:flex;min-height:78px;margin:0 0 clamp(22px,3.5vh,34px);padding:53px 4px 0;align-items:center;justify-content:space-between;color:var(--vq-ink-muted);font-variant-numeric:tabular-nums}
.topic-game-hud::before{content:"";position:absolute;top:40px;left:0;width:100%;height:3px;border-radius:999px;background:var(--vq-line)}
.topic-game-hud strong{display:flex;align-items:center;gap:8px;font:800 .9rem/1 var(--font-ui);letter-spacing:.005em}
.topic-game-hud .hud-icon{font-size:.94rem;filter:grayscale(1);opacity:.62}
.topic-game-hud b{font:inherit}
.topic-game-hud #game-xp{transform-origin:left center}
.topic-game-hud #game-xp.is-gaining{animation:hud-xp-gain .62s cubic-bezier(.2,.8,.2,1)}
@keyframes hud-xp-gain{0%{color:var(--vq-ink-muted);transform:scale(1) translateX(0)}18%{color:var(--vq-accent);transform:scale(1.2) translateX(0)}30%{transform:scale(1.17) translateX(-2px)}42%{transform:scale(1.19) translateX(2px)}54%{transform:scale(1.17) translateX(-1px)}68%{color:var(--vq-accent);transform:scale(1.1) translateX(1px)}100%{color:var(--vq-ink-muted);transform:scale(1) translateX(0)}}
@media(prefers-reduced-motion:reduce){.topic-game-hud #game-xp.is-gaining{animation:hud-xp-gain-reduced .35s ease}@keyframes hud-xp-gain-reduced{50%{color:var(--vq-accent)}100%{color:var(--vq-ink-muted)}}}
.hud-xp-gain{position:absolute;left:50%;color:var(--vq-accent);font:900 1rem/1 var(--font-ui);opacity:0;pointer-events:none;transform:translateX(-50%) scale(.85)}
.hud-xp-gain.is-visible{animation:hud-gain-pop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes hud-gain-pop{0%{opacity:0;transform:translateX(-50%) scale(.8)}18%,65%{opacity:1;transform:translateX(-50%) scale(1.18)}100%{opacity:0;transform:translateX(-50%) scale(1)}}
.viewport-timer{position:absolute;z-index:3;top:40px;left:0;width:100%;height:3px;border-radius:999px;background:var(--vq-accent);box-shadow:none;transform-origin:left center;transition:width .1s linear}
.question-block.is-topic-cycle .question-media{display:grid;max-height:210px;margin:0 0 14px;place-items:center;overflow:hidden;border-radius:16px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.question-block.is-topic-cycle .question-media img{display:block;max-width:100%;max-height:210px;object-fit:contain}
.question-block.is-topic-cycle .answer-options{visibility:hidden}
.question-block.is-topic-cycle .answer-options label{opacity:0;transform:translateY(10px)}
@keyframes cycle-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#validation-screen #question-prompt{width:100%;margin:0 2px clamp(26px,4vh,34px);padding:4px 2px;color:var(--ink);font:760 clamp(1.08rem,4vw,1.28rem)/1.45 var(--font-ui);letter-spacing:-.018em}
#validation-screen .answer-options{display:grid;gap:11px}
#validation-screen .answer-options.is-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#validation-screen .answer-options.is-compact-grid label{min-height:94px;justify-content:center;padding:18px 36px 18px 18px;font-size:clamp(1rem,4vw,1.15rem);font-weight:800;text-align:center}
#validation-screen .answer-options label.is-test-answer{border-color:var(--vq-accent);box-shadow:none}
#validation-screen .answer-options label.is-test-answer::after{content:"TEST ✓";position:absolute;top:7px;right:9px;border-radius:999px;padding:4px 7px;background:var(--vq-accent);color:var(--vq-on-ink);font:850 .55rem/1 var(--font-ui);letter-spacing:.04em}
#validation-screen .question label{position:relative;display:flex;align-items:center;min-height:58px;margin:0;padding:14px 46px 14px 16px;border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--ink);font-weight:var(--vq-weight-medium);line-height:1.35;cursor:pointer;box-shadow:none;transition:opacity .2s ease,transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
#validation-screen .question label:hover{border-color:var(--vq-accent);box-shadow:none}
#validation-screen .question label:focus-within{border-color:var(--vq-accent);outline:3px solid var(--vq-focus);outline-offset:3px}
#validation-screen .question label:active{transform:scale(.992);box-shadow:none}
#validation-screen .question label:has(input:checked){border-color:var(--vq-accent);background:var(--vq-accent-soft);box-shadow:none}
#validation-screen .question label:has(input:checked)::after{content:"✓";position:absolute;right:16px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--vq-accent);color:var(--vq-on-ink);font:850 .8rem/1 var(--font-ui)}
#validation-screen .question label.is-correct-answer{border-color:var(--vq-success)!important;background:var(--vq-success-soft)!important;box-shadow:none!important}
#validation-screen .question label.is-correct-answer::after{content:"✓";position:absolute;right:16px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--vq-success);color:var(--vq-on-ink);font:850 .8rem/1 var(--font-ui)}
#validation-screen .question label.is-wrong-answer{border-color:var(--vq-danger)!important;background:var(--vq-danger-soft)!important;box-shadow:none!important}
#validation-screen .question label.is-wrong-answer:has(input:checked)::after{content:"×";position:absolute;right:16px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--vq-danger);color:var(--vq-on-ink);font:850 .9rem/1 var(--font-ui)}
#validation-screen .question label:has(input:disabled){cursor:default;pointer-events:none}
#validation-screen .question input[type="radio"]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#validation-screen .question label span{min-width:0}
#submit-ai-answer{display:flex;align-items:center;justify-content:center;gap:9px;justify-self:stretch;width:100%;min-height:52px;margin-top:12px;border:var(--vq-border);border-radius:var(--vq-radius-sm)!important;padding:14px 18px!important;background:var(--ink)!important;color:var(--vq-on-ink);font:var(--vq-weight-bold) 1rem/1 var(--font-ui);cursor:pointer}
#submit-ai-answer:disabled{opacity:.62}
.feedback-view{display:grid;gap:16px;padding:2px 0 12px}
.feedback-status{display:flex;align-items:center;gap:9px;width:max-content;color:var(--vq-danger);font:800 .88rem/1 var(--font-ui)}
.feedback-status span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--vq-danger);color:var(--vq-on-ink);font:750 1.15rem/1 var(--font-ui)}
.feedback-status strong{font:inherit}
.feedback-view.is-correct .feedback-status{color:var(--vq-success)}
.feedback-view.is-correct .feedback-status span{background:var(--vq-success)}
.feedback-view h2{margin:0;color:var(--ink);font:750 clamp(1.05rem,3.8vw,1.22rem)/1.4 var(--font-ui);letter-spacing:-.015em}
.selected-response{position:relative;display:grid;gap:5px;padding:14px 48px 14px 16px;border:1px solid var(--vq-line);border-radius:14px;background:var(--vq-surface)}
.selected-response span{color:var(--vq-ink-muted);font:800 .68rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.selected-response strong{color:var(--ink);font:700 .95rem/1.4 var(--font-ui)}
.feedback-view.needs-work .selected-response{border-color:var(--vq-danger);background:var(--vq-danger-soft)}
.feedback-view.needs-work .selected-response::after{content:"×";position:absolute;top:50%;right:15px;display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:var(--vq-danger);color:var(--vq-on-ink);font:750 1rem/1 var(--font-ui);transform:translateY(-50%)}
.feedback-view.is-correct .selected-response{border-color:var(--vq-accent);background:var(--vq-success-soft)}
.feedback-view.is-correct .selected-response::after{content:"✓";position:absolute;top:50%;right:15px;display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:var(--vq-success);color:var(--vq-on-ink);font:800 .75rem/1 var(--font-ui);transform:translateY(-50%)}
.feedback-explanation{margin:0;padding:16px;border-radius:14px;background:var(--vq-accent-soft);color:var(--vq-ink);font:700 .95rem/1.5 var(--font-ui)}
.feedback-view.is-correct .feedback-explanation{background:var(--vq-success-soft);color:var(--vq-success)}
.outcome-finish{display:grid;align-content:center;justify-items:center;gap:10px;min-height:280px;text-align:center}
.outcome-finish>span{display:grid;width:64px;height:64px;place-items:center;border-radius:50%;background:var(--vq-accent);color:var(--vq-on-ink);font:850 1.7rem/1 var(--font-ui);box-shadow:none}
.outcome-finish h2{margin:8px 0 0;color:var(--ink);font:780 1.45rem/1.15 var(--font-ui);letter-spacing:-.025em}
.outcome-finish p{margin:0;color:var(--vq-ink-muted);font:650 .88rem/1.3 var(--font-ui)}
.evaluation-status{margin:10px 0 0;color:var(--vq-danger);font:700 .85rem/1.4 var(--font-ui)}

.topic-screen{min-height:0}
.topic-action{padding-top:clamp(18px,3vh,28px)}
.competency-map{display:grid;align-content:start}
.competency-map-heading{display:flex;align-items:end;justify-content:space-between;gap:16px}
.competency-map-heading div{display:grid;gap:4px}
.competency-map-heading span{color:var(--leaf);font:850 .6rem/1 var(--font-ui);letter-spacing:.12em}
.competency-map-heading h3{margin:0;color:var(--ink);font:850 1.02rem/1.1 var(--font-ui);letter-spacing:-.025em}
.competency-map-heading small{color:var(--muted);font:700 .66rem/1.25 var(--font-ui);text-align:right}
.competency-map-heading small:empty{display:none}
.competency-carousel{margin-top:14px}
.competency-track{display:grid;gap:10px}
.skill-list{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--vq-line)}
.skill-state{min-height:24px}
.skill-list{display:grid;gap:7px;align-content:start}
.competency-empty{display:grid;min-width:100%;min-height:82px;place-items:center;padding:16px;color:var(--muted);font:700 .74rem/1.35 var(--font-ui);text-align:center}
@media (max-height:720px){.topic-action{padding-top:14px}.competency-carousel{margin-top:9px}}

/* Play owns its content layout; the shared app frame owns viewport geometry. */
html.play-page .play-surface{padding:clamp(20px,5vw,36px)!important;overflow:hidden!important}
html.play-page #validation-screen:not([hidden]){display:block;height:100%}
html.play-page .validation-panel{min-height:100%;height:100%}
html.play-page #validation-screen .question{overflow:hidden}
html.play-page .topic-game-hud{min-height:78px;margin-bottom:clamp(18px,3vh,30px);padding-inline:clamp(2px,1vw,8px)}
html.play-page .topic-game-hud strong{font-size:clamp(1rem,2.2vw,1.2rem)}
html.play-page .topic-game-hud .hud-icon{font-size:1em}
html.play-page .question-block.is-topic-cycle{
  --play-question-size:clamp(1.4rem,3.2vh,2.25rem);
  --play-option-size:clamp(1.15rem,2.7vh,1.75rem);
  --play-question-gap:clamp(32px,5.5vh,58px);
  --play-option-gap:clamp(12px,1.8vh,18px);
  --play-option-height:clamp(64px,10vh,96px);
}
html.play-page .question-block.is-topic-cycle.is-short-prompt{--play-question-size:clamp(1.8rem,4.8vh,3rem);--play-question-gap:clamp(38px,6.5vh,70px)}
html.play-page #validation-screen .question-block.is-topic-cycle #question-prompt{
  margin-bottom:var(--play-question-gap);
  padding:clamp(4px,1vh,10px) clamp(2px,1vw,8px);
  font-size:var(--play-question-fit,var(--play-question-size));
  line-height:1.38;
  text-align:center;
}
html.play-page #validation-screen .question-block.is-topic-cycle .answer-options{gap:var(--play-option-gap)}
html.play-page #validation-screen .question-block.is-topic-cycle .answer-options label{
  min-height:var(--play-option-height);
  justify-content:center;
  padding:clamp(15px,2.2vh,22px) clamp(44px,6vw,58px) clamp(15px,2.2vh,22px) clamp(16px,2.5vw,24px);
  font-size:var(--play-option-fit,var(--play-option-size));
  line-height:1.35;
  text-align:center;
}
html.play-page #validation-screen .question-block.is-topic-cycle .answer-options label>span{width:100%;text-align:center}
html.play-page #validation-screen .question-block.is-topic-cycle .answer-options.is-compact-grid label{min-height:clamp(112px,19vh,180px);font-size:var(--play-option-fit,clamp(1.5rem,4.2vh,2.5rem))}
html.play-page .question-block.is-space-compact{--play-question-gap:clamp(24px,3.8vh,36px);--play-option-gap:10px;--play-option-height:58px}
html.play-page #validation-screen .question-block.is-space-compact .answer-options label{padding-block:13px}
html.play-page #validation-screen .question-block.is-space-compact .answer-options.is-compact-grid label{min-height:clamp(96px,15vh,130px)}
html.play-page .question-block.is-space-dense{--play-question-gap:18px;--play-option-gap:8px;--play-option-height:54px}
html.play-page #validation-screen .question-block.is-space-dense #question-prompt{padding-block:2px;line-height:1.3}
html.play-page #validation-screen .question-block.is-space-dense .answer-options label{padding-block:10px;line-height:1.28}
html.play-page #validation-screen .question-block.is-space-dense .answer-options.is-compact-grid label{min-height:82px}

/* Simple Play: one question, one decision, one explanation, one next step. */
html.play-page .play-surface{padding:20px!important;background:transparent}
html.play-page #validation-screen:not([hidden]){height:100%;min-height:0}
html.play-page #validation-screen .validation-panel{display:flex;position:relative;height:100%;min-height:0;box-sizing:border-box;padding:0!important;flex-direction:column}
html.play-page .validation-panel>.back-button{display:none!important}
html.play-page .topic-game-hud{display:none!important}
html.play-page #validation-screen .question{display:block;height:auto;min-height:0;flex:1;padding:0;overflow:auto}
html.play-page .simple-play-skill{margin:4px 0 18px;color:var(--vq-ink-muted);font:700 .72rem/1.3 var(--font-ui)}
html.play-page #validation-screen .question-block.is-simple-play #question-prompt{margin:0 0 18px;padding:0;color:var(--ink);font:760 clamp(1.2rem,4.8vw,1.55rem)/1.4 var(--font-ui);text-align:left}
html.play-page #validation-screen .question-block.is-simple-play .question-media{display:grid;max-height:190px;margin:0 0 16px;place-items:center;overflow:hidden;border-radius:14px}
html.play-page #validation-screen .question-block.is-simple-play .question-media img{display:block;max-width:100%;max-height:190px;object-fit:contain}
html.play-page #validation-screen .question-block.is-simple-play .answer-options,
html.play-page #validation-screen .question-block.is-simple-play .answer-options.is-compact-grid{display:grid;grid-template-columns:1fr;gap:9px}
html.play-page #validation-screen .question-block.is-simple-play .answer-options label,
html.play-page #validation-screen .question-block.is-simple-play .answer-options.is-compact-grid label{min-height:54px;justify-content:flex-start;padding:13px 44px 13px 15px;border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-surface);font:var(--vq-weight-medium) clamp(.92rem,3.6vw,1.05rem)/1.35 var(--font-ui);text-align:left}
html.play-page #validation-screen .question-block.is-simple-play .answer-options label>span{width:100%;text-align:left}
/* A long question on a short screen (#29, student.js fitPlayQuestion): tighter spacing first, then slightly smaller
   text. Answers keep the 44px tap target. */
html.play-page #validation-screen .question-block.is-simple-play.is-fit-spacing #question-prompt{margin-bottom:var(--vq-space-2);line-height:1.3}
html.play-page #validation-screen .question-block.is-simple-play.is-fit-spacing .answer-options{gap:var(--vq-space-1)}
/* Short answers (13, 35, 48, 53 under a tall table) go two by two when space is short. */
html.play-page #validation-screen .question-block.is-simple-play.is-fit-spacing .answer-options.is-compact-grid{grid-template-columns:1fr 1fr}
html.play-page #validation-screen .question-block.is-simple-play.is-fit-spacing .answer-options label{min-height:var(--vq-tap);padding-block:var(--vq-space-2)}
html.play-page #validation-screen .question-block.is-simple-play.is-fit-text #question-prompt{font-size:var(--vq-text-md)}
html.play-page #validation-screen .question-block.is-simple-play.is-fit-text .answer-options label{font-size:var(--vq-text-sm)}
/* Maths stays invisible, its space kept, until MathJax has drawn it: raw markup never shows (#26). If MathJax
   fails to load, the page shows the maths as written (student.js adds .is-math-fallback). */
.vq-math{visibility:hidden}
.vq-math:has(mjx-container),html.is-math-fallback .vq-math{visibility:visible}
html.play-page .simple-play-feedback{display:block;margin:14px 0 0;padding:14px 16px;border:var(--vq-border);border-left:6px solid var(--vq-danger);border-radius:0 var(--vq-radius-sm) var(--vq-radius-sm) 0;background:var(--vq-surface);color:var(--ink)}
html.play-page .simple-play-feedback.is-correct{border-left-color:var(--vq-success)}
html.play-page .simple-play-feedback strong{display:block;font:850 .92rem/1.35 var(--font-ui)}
html.play-page .simple-play-feedback p{margin:5px 0 0;font:650 .83rem/1.5 var(--font-ui)}
html.play-page #submit-ai-answer:not([hidden]){display:inline-flex;width:100%;min-height:var(--vq-button-height);margin:14px 0 0;padding:0 17px!important;border-radius:var(--vq-radius-sm)!important;background:var(--ink)!important;font-size:1rem}
html.play-page .simple-results{display:grid;gap:0;padding:4px 0 20px}
html.play-page .simple-results-score{margin:0 0 28px;color:var(--ink);font:900 clamp(3rem,13vw,4.6rem)/.9 var(--font-ui);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
html.play-page .simple-results-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vq-space-2);margin:0 0 var(--vq-space-5)}
html.play-page .simple-results-stats div{padding:var(--vq-space-3) var(--vq-space-2);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface);text-align:center}
html.play-page .simple-results-stats dt{color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-xs)/1.2 var(--vq-font)}
html.play-page .simple-results-stats dd{margin:var(--vq-space-1) 0 0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-lg)/1.1 var(--vq-font);font-variant-numeric:tabular-nums}
html.play-page .simple-results h2{margin:0 0 12px;color:var(--ink);font:900 1.1rem/1.15 var(--font-ui);letter-spacing:-.03em}
html.play-page .simple-result-changes{display:grid;gap:9px}
html.play-page .simple-result-change{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface)}
html.play-page .simple-result-change>strong{min-width:0;font:820 .83rem/1.3 var(--font-ui)}
html.play-page .simple-result-change>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
html.play-page .simple-result-change b{color:var(--vq-ink-subtle);font:700 .72rem/1 var(--font-ui)}
html.play-page .simple-result-empty{margin:0;padding:16px;border:var(--vq-border-width) dashed var(--vq-ink-subtle);border-radius:var(--vq-radius-md);background:var(--vq-surface);color:var(--vq-ink-muted);font:700 .78rem/1.4 var(--font-ui)}
html.play-page .simple-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
html.play-page .simple-result-actions button{min-height:44px;border:var(--vq-border);border-radius:var(--vq-radius-sm);padding:0 16px;background:var(--vq-surface);color:var(--ink);font:850 .8rem/1 var(--font-ui);cursor:pointer}
html.play-page .simple-result-actions #summary-replay{background:var(--ink);color:var(--vq-on-ink)}
@media(max-width:480px){html.play-page .simple-result-change{grid-template-columns:1fr}html.play-page .simple-result-change>div{justify-content:flex-start}}

@media(max-width:650px){
  .student-surface{padding:20px!important}
  .subjects-section{margin-top:24px}
  .knowledge-status .report-card-copy{padding:15px 17px}
}

@media(max-width:370px){
  .student-surface{padding:16px!important;border-radius:20px}
  .report-card-copy{flex-basis:76%}
}

@media(max-height:520px) and (min-width:521px){
  .student-surface{padding:16px 20px!important;border-radius:18px}
  .identity-row{padding-bottom:12px}
  .subjects-section{margin-top:18px}
}

/*
 * Mobile-first learning feed. The data hierarchy remains unchanged; this
 * layer removes the desktop workspace metaphor and lets the document scroll.
 */
.mobile-learning-app .student-surface{
  padding:0!important;background:transparent;
}
.mobile-learning-app .knowledge-status{margin:0;padding:18px 16px 4px;border-bottom:0}
.mobile-learning-app .subjects-section{margin:0;padding:18px 16px 28px}
.mobile-learning-app .subjects-section>.eyebrow{margin:0 2px 12px}
/* Practice stats sit in the same page margin as the subjects above (#39). */
.mobile-learning-app .practice-stats{margin:0;padding:0 16px 28px}
.mobile-learning-app .practice-stats>.eyebrow{margin:0 2px 12px}
.mobile-learning-app .knowledge-status>.report-card{margin:0;padding:var(--vq-space-3) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface)}
.mobile-learning-app .knowledge-status .report-card-row{flex-wrap:wrap;align-items:center;row-gap:var(--vq-space-2)}
.report-state{flex:0 0 auto}
.mobile-learning-app .knowledge-status .report-card-icon{width:48px;height:48px;flex-basis:48px}
.mobile-learning-app .knowledge-status .has-icon .report-card-copy{padding:0 12px}
.mobile-learning-app .knowledge-status .report-state{margin-right:0}
.mobile-learning-app .knowledge-status .report-card-copy h1,.report-card-copy h2,
.mobile-learning-app .knowledge-status .report-card-copy h3{font-size:1.42rem;letter-spacing:-.04em}
.mobile-learning-app .children-progress{display:grid;gap:10px;margin:0}
.mobile-learning-app .children-progress .report-card{overflow:hidden;border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface);box-shadow:none}
.mobile-learning-app .children-progress .report-card-row{min-height:76px;align-items:center}
.mobile-learning-app .children-progress .report-card-icon{width:42px;height:42px;flex-basis:42px;margin-left:14px}
.mobile-learning-app .children-progress .report-card-copy{padding:14px 10px}
.mobile-learning-app .children-progress .report-card-copy h3{font-size:.95rem}
.mobile-learning-app .children-progress .report-state{margin-right:14px}
.mobile-learning-app #topic-screen{display:block;padding:0}
.mobile-learning-app #topic-screen[hidden]{display:none}
.mobile-learning-app .topic-action{padding:0}
.mobile-learning-app .chapter-overview{padding:28px 16px 8px;border-bottom:0;background:transparent}
.mobile-learning-app .chapter-overview h1{margin:0;color:var(--ink);font:900 clamp(2rem,9vw,3.2rem)/.98 var(--font-ui);letter-spacing:-.055em}
.mobile-learning-app .chapter-overview>p{max-width:600px;margin:10px 0 0;color:var(--muted);font:650 .83rem/1.45 var(--font-ui)}
.mobile-learning-app .chapter-overview-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mobile-learning-app .chapter-overview-actions button{min-height:46px;border:var(--vq-border);border-radius:var(--vq-radius-sm);padding:0 17px;font:var(--vq-weight-bold) .83rem/1 var(--font-ui);cursor:pointer}
.mobile-learning-app .chapter-overview-actions .chapter-practice-button{flex:1 1 100%;max-width:600px;background:var(--ink);color:var(--vq-on-ink);font-size:var(--vq-text-md)}
.mobile-learning-app .practice-time{display:grid;gap:var(--vq-space-3);flex:1 1 100%;max-width:600px}
.mobile-learning-app .practice-time-title{margin:0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1.2 var(--vq-font)}
.mobile-learning-app .practice-time-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vq-space-2)}
.mobile-learning-app .chapter-overview-actions .practice-time-option{background:var(--vq-surface);color:var(--vq-ink)}
.mobile-learning-app .chapter-overview-actions .practice-time-option[aria-pressed="true"]{border-color:var(--vq-accent);background:var(--vq-accent-soft);color:var(--vq-accent)}
.mobile-learning-app .chapter-overview-actions .practice-time-start{background:var(--ink);color:var(--vq-on-ink);font-size:var(--vq-text-md)}
.mobile-learning-app .chapter-practice-done{flex:1 1 100%;margin:0;color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}
.mobile-learning-app .chapter-secondary-action{background:var(--vq-surface);color:var(--ink)}
.mobile-learning-app .chapter-next{padding:20px 16px 8px;border-bottom:0;background:transparent}
.mobile-learning-app .chapter-next h3{margin:0 2px 12px;color:var(--ink);font:900 1.14rem/1.1 var(--font-ui);letter-spacing:-.03em}
.mobile-learning-app .chapter-next-skills{display:grid;gap:9px}
.mobile-learning-app .chapter-next-card{display:grid;width:100%;min-height:68px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border:var(--vq-border);border-radius:var(--vq-radius-md);padding:12px 14px;background:var(--vq-surface);color:var(--ink);text-align:left}
.mobile-learning-app .chapter-next-card>span{display:grid;min-width:0;gap:4px}
.mobile-learning-app .chapter-next-card strong{font:850 .86rem/1.25 var(--font-ui)}
.mobile-learning-app .chapter-next-card small{color:var(--muted);font:650 .67rem/1.2 var(--font-ui)}
.mobile-learning-app .competency-map{display:block}
.mobile-learning-app .competency-map-heading{position:sticky;top:0;z-index:10;align-items:center;padding:var(--vq-space-3) var(--vq-gutter) 0;background:var(--vq-paper)}
.mobile-learning-app .competency-map-heading h3{font-size:1.1rem}
.mobile-learning-app .competency-map-heading small{font-size:.64rem}
.mobile-learning-app .competency-carousel{margin:0;overflow:visible}
.mobile-learning-app .competency-track{display:grid;gap:var(--vq-space-3);padding:0 var(--vq-gutter) var(--vq-space-6)}
.mobile-learning-app .topic-summary-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface)}
.mobile-learning-app .topic-summary-card .topic-summary-copy{grid-column:1/-1;display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:var(--vq-space-3);color:var(--ink)}
.mobile-learning-app .topic-summary-copy>b,.mobile-learning-app .topic-skill-row>b{font:var(--vq-weight-bold) var(--vq-text-sm)/1.2 var(--vq-font);font-variant-numeric:tabular-nums}
.mobile-learning-app .topic-skill-rows{grid-column:1/-1;display:grid;gap:var(--vq-space-3);margin:var(--vq-space-1) 0 0;padding:0;list-style:none}
.mobile-learning-app .topic-skill-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--vq-space-1) var(--vq-space-3);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.3 var(--vq-font)}
.mobile-learning-app .topic-skill-row>span{overflow-wrap:anywhere}
.mobile-learning-app .topic-skill-row>b{color:var(--ink)}
.mobile-learning-app .topic-skill-row>.vq-progress{grid-column:1/-1}
.mobile-learning-app .topic-summary-copy strong{overflow-wrap:anywhere;font:var(--vq-weight-bold) 1rem/1.25 var(--font-ui);letter-spacing:-.02em}
.mobile-learning-app .topic-summary-track{grid-column:1/-1;box-sizing:border-box;height:12px;overflow:hidden;border:var(--vq-border);border-radius:6px;background:var(--vq-paper)}
.mobile-learning-app .topic-summary-track i{display:block;height:100%;background:var(--vq-accent)}

/* Placement of the shared progress bar (global.css) inside student cards. */
.report-card>.vq-progress{margin:0 var(--vq-space-4) var(--vq-space-3)}
.knowledge-status>.report-card>.vq-progress{margin:var(--vq-space-3) 0 var(--vq-space-1)}
.chapter-hero-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--vq-space-2);max-width:600px;margin-top:var(--vq-space-5);color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-xs)/1.2 var(--vq-font);letter-spacing:.08em;text-transform:uppercase}
.chapter-hero-progress>b{color:var(--vq-ink);font-size:var(--vq-text-sm);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.chapter-hero-progress>.vq-progress{grid-column:1/-1}
.chapter-next-card>.vq-progress{grid-column:1/-1}
html.play-page .simple-result-change>.vq-progress{grid-column:1/-1}
html.play-page .simple-play-skill{margin-bottom:var(--vq-space-2)}
html.play-page .simple-play-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--vq-space-1) var(--vq-space-2);margin:0 0 var(--vq-space-5);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.2 var(--vq-font)}
html.play-page .simple-play-progress>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.play-page .simple-play-progress>b{color:var(--vq-ink);font-weight:var(--vq-weight-bold);font-variant-numeric:tabular-nums}
html.play-page .simple-play-progress>.vq-progress{grid-column:1/-1}

/* Install card on the student home (app-shell.js); dismissible, hidden inside the installed app. */
/* Landing call to action: the one thing to do next. */
.next-practice{display:grid;gap:var(--vq-space-2);margin:0 0 var(--vq-space-4);padding:var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface)}
.next-practice[hidden]{display:none}
.next-practice-eyebrow{margin:0;color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xs)/1.2 var(--vq-font);letter-spacing:.14em;text-transform:uppercase}
.next-practice h2{margin:0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-lg)/1.2 var(--vq-font);letter-spacing:var(--vq-tracking-tight)}
.next-practice p:not(.next-practice-eyebrow){margin:0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.35 var(--vq-font)}
.next-practice-action{min-height:var(--vq-button-height);margin-top:var(--vq-space-2);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-ink);color:var(--vq-on-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1 var(--vq-font);cursor:pointer}
.next-practice-action:focus-visible{outline:3px solid var(--vq-focus);outline-offset:2px}
/* Sponsored challenges: the shared next-practice card; the Tests link looks like its button. */
.sponsor-challenges[hidden]{display:none}
.sponsor-challenge-action{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--vq-space-4);text-decoration:none}
/* Challenge <child> (owner, 2026-10-09): the sponsor's card on a subject or chapter page; locked, it is dashed. A
   chapter row she has completed carries "Open to challenge". */
.sponsor-challenge.is-locked{border-style:dashed}
.topic-action>.sponsor-challenges{padding:var(--vq-space-4) var(--vq-space-4) 0}
.report-card-copy .open-to-challenge{display:inline-flex;width:fit-content;margin-top:var(--vq-space-1)}
/* Today's line under the overall card. */
.today-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vq-space-2) var(--vq-space-3);margin:var(--vq-space-3) 0 0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.today-gain{padding:2px var(--vq-space-2);border-radius:var(--vq-radius-sm);background:var(--vq-success-soft);color:var(--vq-success);font-weight:var(--vq-weight-bold)}
.today-focus{flex-basis:100%;color:var(--vq-ink)}
.today-strip.is-deeper{display:none}
/* Practice stats (#39): tokens only. One series in the accent; thin bars with rounded tops and 2px gaps; recessive grid. */
.practice-stats{margin-top:var(--vq-space-6)}
.practice-stats.is-deeper{display:none}
.stats-card{padding:var(--vq-space-4);display:grid;gap:var(--vq-space-4)}
.stats-summary{display:grid;grid-template-columns:1fr 1fr;text-align:center}
.stats-summary span,.stats-summary small{display:block;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.4 var(--vq-font)}
.stats-summary strong{display:block;color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xl)/1.2 var(--vq-font)}
.stats-bars{display:grid;grid-template-columns:repeat(var(--bars),minmax(0,1fr));gap:2px;align-items:end;height:160px;border-bottom:1px solid var(--vq-line);background:linear-gradient(to top,var(--vq-line) 1px,transparent 1px) 0 0/100% 50%}
.stats-bar{position:relative;height:100%;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-end}
.stats-bar-fill{display:block;width:100%;height:var(--h);min-height:0;border-radius:var(--vq-radius-sm) var(--vq-radius-sm) 0 0;background:var(--vq-accent)}
.stats-bar.is-active .stats-bar-fill,.stats-bar:hover .stats-bar-fill{background:var(--vq-ink)}
/* Bar labels in their own row under the bars, so a large phone font never spills out of a bar's button. */
.stats-labels{display:grid;grid-template-columns:repeat(var(--bars),minmax(0,1fr));gap:2px;margin-top:var(--vq-space-1);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.6 var(--vq-font);text-align:center}
.stats-labels span{white-space:nowrap}
/* The period picker wraps into two rows when the phone's font is large (200%: "6 months" no longer fits a quarter). */
#tab-earnings .stats-tabs{display:flex;flex-wrap:wrap}
#tab-earnings .stats-tabs button{flex:1 1 auto;padding:0 var(--vq-space-1)}
.stats-tip{min-height:1.4em;margin:var(--vq-space-2) 0 0;text-align:center;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}


/* Tabs (#46): one panel at a time; Practice is the rest of the page. Tokens only. */
.student-surface[data-tab=history]>:not(#tab-history),.student-surface[data-tab=class]>:not(#tab-class),.student-surface[data-tab=standup]>:not(#tab-standup),.student-surface[data-tab=earnings]>:not(#tab-earnings),.student-surface[data-tab=tests]>:not(#tab-tests){display:none}
/* The family standup (#64): it waits in place of the next practice until held; the panel reuses the tabs' totals and
   rows. Tokens only. */
.student-surface[data-standup=waiting] #next-practice{display:none}
.standup-lead{margin:calc(var(--vq-space-2) * -1) 0 var(--vq-space-5);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.standup-section+.standup-section{margin-top:var(--vq-space-6)}
.standup-section .tab-totals{margin:0}
.standup-text{margin:0;color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-md)/1.45 var(--vq-font)}
.standup-text:empty{display:none}
.standup-section .tab-totals+.standup-text,.standup-text+.standup-text{margin-top:var(--vq-space-2)}
.standup-talk{color:var(--vq-ink-muted);font-size:var(--vq-text-sm)}
#standup-needs button.standup-need{width:100%;margin:0;font:inherit;text-align:left;cursor:pointer}
.standup-part{display:grid;gap:var(--vq-space-3);margin:0}
.standup-part[hidden]{display:none}
.standup-part fieldset{margin:0;padding:0;border:0;min-width:0}
.standup-part legend{margin:0 0 var(--vq-space-2);padding:0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1.3 var(--vq-font)}
.standup-options{display:grid;gap:var(--vq-space-2)}
.standup-options label{display:flex;align-items:center;gap:var(--vq-space-3);min-height:var(--vq-tap);padding:var(--vq-space-2) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-md)/1.3 var(--vq-font);cursor:pointer}
.standup-options input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--vq-ink)}
.standup-options label:has(input:checked){background:var(--vq-surface-tint)}
.standup-secondary{min-height:var(--vq-button-height);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1 var(--vq-font);cursor:pointer}
.standup-secondary:focus-visible,.standup-options label:focus-within{outline:3px solid var(--vq-focus);outline-offset:2px}
.standup-held{width:100%;margin-top:var(--vq-space-3)}
/* The day's trip (#81): the route as stops on a line, then the moments, then Share. */
.trip-route{display:grid;gap:var(--vq-space-3);margin:var(--vq-space-2) 0 0;padding:0 0 0 var(--vq-space-5);border-left:var(--vq-border-width) dashed var(--vq-accent);list-style:none}
.trip-route li{position:relative;display:grid;gap:2px}
.trip-route li::before{content:"";position:absolute;left:calc(var(--vq-space-5) * -1 - var(--vq-space-2) + var(--vq-border-width) * -.5);top:var(--vq-space-1);width:var(--vq-space-3);height:var(--vq-space-3);border:var(--vq-border-width) solid var(--vq-accent);border-radius:var(--vq-radius-pill);background:var(--vq-surface)}
.trip-route strong{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1.3 var(--vq-font)}
.trip-route small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.35 var(--vq-font)}
.trip-moments{display:grid;gap:var(--vq-space-2);margin:var(--vq-space-4) 0 0;padding:0;list-style:none}
.trip-moments li{display:flex;align-items:flex-start;gap:var(--vq-space-3);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-md)/1.4 var(--vq-font)}
.trip-moments svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--vq-accent)}
.trip-share,.trip-challenge{display:flex;align-items:center;justify-content:center;gap:var(--vq-space-2);width:100%;margin-top:var(--vq-space-4)}
.trip-share svg,.trip-challenge svg{width:20px;height:20px}
.trip-status{margin-top:var(--vq-space-2);color:var(--vq-ink-muted);font-size:var(--vq-text-sm)}
.tab-panel{padding:var(--vq-space-4) var(--vq-gutter) var(--vq-space-6)}
.tab-panel[hidden]{display:none}
.tab-panel .report-header{display:flex;align-items:center;min-height:var(--vq-tap)}
.tab-title{margin:var(--vq-space-1) 0 var(--vq-space-4);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-2xl)/1.15 var(--vq-font);letter-spacing:var(--vq-tracking-tight)}
.tab-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vq-space-2);margin:0 0 var(--vq-space-5)}
.tab-totals div{padding:var(--vq-space-3) var(--vq-space-1);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface);text-align:center}
.tab-totals dt{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.3 var(--vq-font)}
.tab-totals dd{margin:0;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-lg)/1.3 var(--vq-font)}
/* Earnings (#96): the balance in three, and a parent's "Record a payment" form. */
.earnings-balance{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.earnings-pay-form button{width:100%}
.earnings-pay-form{display:grid;gap:var(--vq-space-2);margin-top:var(--vq-space-3)}
.earnings-pay-form[hidden]{display:none}
.earnings-pay-form label{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1.3 var(--vq-font)}
.earnings-pay-form input{min-height:var(--vq-button-height);padding:0 var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-lg)/1 var(--vq-font)}
.earnings-pay-form input:focus-visible{outline:3px solid var(--vq-focus);outline-offset:2px}
/* #102: "This is <name>'s own account", the same check box as the family page's (family.css .family-check). */
.earnings-pay-form .earnings-check{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--vq-space-3);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font);cursor:pointer}
.earnings-pay-form .earnings-check input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--vq-ink);appearance:auto;cursor:pointer}#earnings-status:empty{display:none}
/* #98: one-tap UPI pay, the UPI ID it pays under it, and "Change UPI ID". */
.earnings-upi-to{display:block;margin-top:var(--vq-space-1);text-align:center}
.earnings-upi-to[hidden]{display:none}
.earnings-upi-pay{display:grid;place-items:center;margin-top:var(--vq-space-3);padding:0 var(--vq-space-4);text-align:center;text-decoration:none}
.earnings-upi-pay[hidden]{display:none}
.earnings-hint{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.earnings-paid-today{display:flex;align-items:center;gap:var(--vq-space-2);margin-top:var(--vq-space-3);font-weight:var(--vq-weight-bold)}
.earnings-paid-today[hidden]{display:none}
.earnings-paid-today svg{width:20px;height:20px}
.earnings-upi-change{width:100%;margin-top:var(--vq-space-2)}
.earnings-upi-change[hidden]{display:none}
#earnings-status{margin-top:var(--vq-space-3)}
.earnings-hero{display:grid;justify-items:center;gap:var(--vq-space-2);margin:0 0 var(--vq-space-3);padding:var(--vq-space-5) var(--vq-space-4);text-align:center}
.earnings-hero small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.3 var(--vq-font)}
.earnings-hero strong{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-hero-lg)/1.1 var(--vq-font)}
.earnings-hero .vq-chip{margin:0;white-space:normal;text-align:center}
#tab-earnings .practice-stats{margin:0;padding:0}
/* 7 days, 30 days, All time under the hero: three cards, wrapping when the phone's text is large. */
.earnings-periods{grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));margin-bottom:var(--vq-space-6)}
.earnings-hero .earnings-today{color:var(--vq-accent);font-weight:var(--vq-weight-bold)}
/* The balance line (owner, 2026-10-09): headline, one rising accent line over a soft area, a dot at today. */
.earnings-line-headline{margin:0;color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xl)/1.2 var(--vq-font);text-align:center}
.earnings-line{position:relative}
.earnings-credit{color:var(--vq-accent)}
#earnings-credits-heading{margin-top:var(--vq-space-5)}
.class-members-heading{margin:0 0 var(--vq-space-2)}
.history-round,.class-member{display:flex;align-items:center;gap:var(--vq-space-3);min-height:var(--vq-tap);padding:var(--vq-space-3) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface);color:var(--vq-ink)}
.history-round>span:first-child,.class-member>span:nth-child(2){flex:1;display:grid;gap:2px;min-width:0}
.history-round strong,.class-member strong{font:var(--vq-weight-bold) var(--vq-text-md)/1.3 var(--vq-font)}
.history-round small,.class-member small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.3 var(--vq-font)}
.history-round svg{flex:0 0 auto;width:20px;height:20px;color:var(--vq-ink-muted)}
.history-rounds,.class-members{display:grid;gap:var(--vq-space-2);margin:0;padding:0;list-style:none}
.history-score{display:grid;justify-items:end;flex:0 0 auto}
.history-score.has-action{display:flex;align-items:center;gap:var(--vq-space-3)}
.earnings-received-pill{display:inline-flex;align-items:center;gap:var(--vq-space-1);min-height:40px;padding:0 var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-ink);color:var(--vq-on-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font);cursor:pointer}
.earnings-received-pill svg{width:16px;height:16px}
.tab-empty{margin:0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-md)/1.4 var(--vq-font)}
.class-note{margin:0 0 var(--vq-space-4);padding:var(--vq-space-3) var(--vq-space-4);border:var(--vq-border);border-style:dashed;border-radius:var(--vq-radius-md);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.class-summary{display:grid;gap:var(--vq-space-2);margin:0 0 var(--vq-space-5);padding:var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface)}
.class-summary .eyebrow{margin:0}
.class-summary strong{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-xl)/1.2 var(--vq-font)}
.class-summary small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.class-avatar{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:var(--vq-radius-pill);background:var(--vq-ink);color:var(--vq-on-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font)}
/* Admin Students (owner, 2026-10-10): a child opened from /admin/students is strictly read-only (parent-auth.js
   refuses every write too); the controls that would write are not shown. */
.vq-admin-view :is(#tests-create, #sponsor-challenge-subject, [data-add-test], [data-reschedule], [data-delete], [data-start], #earnings-upi-form, #dakshina-section, #love-section, #earnings-received){display:none}