/* Brand tokens carried over from the v1 AAP prototype (design reference). */
:root{
  --green:#3D9B4F;
  --green-deep:#1E5C2E;
  --green-soft:#E6F2E4;
  --bg:#F3F7F1;
  --card:#FFFFFF;
  --ink:#17291C;
  --muted:#5C7263;
  --line:#D6E3D2;
  /* Inset + track surfaces, tokenised so a themed card colour stays coherent. */
  --sunken:#FBFDFA;
  --track:#E2ECDF;
  /* Text/border colours for content sitting directly on --bg rather than on a
     card. Default to the card values; applyBranding() overrides them when the
     admin picks a dark page background, so headings stay readable. */
  --ink-page:var(--ink);
  --muted-page:var(--muted);
  --head-page:var(--green-deep);
  --eyebrow-page:var(--green);
  --line-page:var(--line);
  --amber:#D98E2B;
  --red:#C0504D;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink-page);display:flex;flex-direction:column;min-height:100vh}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.topbar{background:var(--card);border-bottom:3px solid var(--green);padding:.6rem 1rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.wordmark{font-weight:800;font-size:1.2rem;color:var(--green-deep);letter-spacing:.02em}
.appname{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--muted)}
.userchip{margin-left:auto;font-size:.8rem;color:var(--muted);display:flex;gap:.7rem;align-items:center}
.userchip b{color:var(--ink)}
.linkbtn{background:none;border:none;color:var(--green-deep);font-size:.78rem;text-decoration:underline;padding:.2rem}

main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1.1rem 1rem 2.4rem}
/* Everything in the column shares one left and right edge — cards, buttons and
   prose alike — and all of it is fluid below the cap. */
.shell{width:100%;max-width:1080px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;color:var(--eyebrow-page);margin-bottom:.45rem}
.panel .eyebrow{color:var(--green)}
/* A section label belongs to what comes after it, not to what came before,
   so the gap above it is larger than the gap below it. Without this, a label
   like TOTALS sat flush against the panel of the section above. The backlink
   already carries its own bottom margin, so it keeps the tighter spacing. */
.shell > * + .eyebrow{margin-top:1.7rem}
.shell > .backlink + .eyebrow{margin-top:0}
h1{font-size:clamp(1.5rem,4.5vw,2.1rem);line-height:1.1;font-weight:800;color:var(--head-page)}
.sub{color:var(--muted-page);margin:.7rem 0 1.1rem;line-height:1.55}
.muted{color:var(--muted);line-height:1.55}
/* Prose sitting straight on the page background takes the page text colour. Its
   width is deliberately uncapped so it tracks the column instead of ending on an
   edge nothing else shares. */
.shell > .muted{color:var(--muted-page)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.25rem;box-shadow:0 2px 8px rgba(23,41,28,.05)}
.panel,.gamecard,.notice,.stat,.chatbox,.verdict,.recline{color:var(--ink)}
.panel.center{text-align:center}
.panel.signin{display:flex;justify-content:center;padding:2rem 1rem}

/* Card rows. Flex rather than grid so that a last row holding fewer cards than
   the ones above it is CENTRED instead of left-aligned (grid would pin it to the
   first columns). The per-program "cards per row" setting writes data-cols; it
   is an upper bound, and the widths below still step down on smaller screens:
   always 1 up on a phone, at most 2 on a tablet. Absent data-cols (the platform
   home page and admin lists) behaves as 3. */
.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:.9rem}
.modes > *{flex:0 1 100%}
/* :not(:only-child) keeps a list holding a single card at full width instead of
   stranding it at a third of the row with empty space either side. */
@media (min-width:640px){
  .modes:not([data-cols="1"]) > *:not(:only-child){flex:0 1 calc((100% - .8rem) / 2)}
}
@media (min-width:1000px){
  .modes:not([data-cols="1"]):not([data-cols="2"]) > *:not(:only-child){flex:0 1 calc((100% - 1.6rem) / 3)}
}
.mode{text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);border-radius:10px;padding:.85rem 1rem;color:var(--ink);display:grid;gap:.3rem}
.mode .rec{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.1em}
.mode .rec b{color:var(--green);font-weight:700}
.mode h2{font-size:1.12rem;color:var(--green-deep)}
.mode p{color:var(--muted);font-size:.88rem;line-height:1.45}

.notice{border-left:4px solid var(--amber);background:var(--card);border-radius:8px;padding:1rem 1.2rem;margin-top:1rem}
.notice.error{border-left-color:var(--red)}
.notice h2{color:var(--green-deep);font-size:1.05rem;margin-bottom:.4rem}

footer{font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;color:var(--muted);border-top:1px solid var(--line);padding:.6rem .9rem;text-align:center;line-height:1.6;background:var(--card);white-space:pre-line}

/* ---- game HUD + board (ported from the v1 prototype) ---- */
.hud{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted-page);margin:1rem 0 .7rem}
.hud .score{color:var(--ink-page);font-size:.95rem}
.hud .streak{color:var(--amber)}
.hud .exceptions{margin-left:auto;color:var(--red);letter-spacing:.2em}
/* Navigation controls are buttons, not text: a visible edge, a real hit area
   (36px min) and an obvious hover, so they read as pressable on touch too. */
.backlink{background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--green-deep);font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;padding:.4rem .75rem;display:inline-flex;align-items:center;gap:.35rem;min-height:36px;transition:background .12s,border-color .12s}
.backlink{margin-bottom:.9rem}
.hud .backlink{margin-bottom:0}
.backlink:hover{background:var(--green-soft);border-color:var(--green)}
.backlink.quit{color:var(--red)}
.backlink.quit:hover{background:#F8E9E8;border-color:var(--red)}
.pausebtn{background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--green-deep);font-weight:700;font-size:.75rem;padding:.35rem .7rem}
.pausebtn:hover{background:var(--green-soft)}

.progress{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.progress .pl{font-family:var(--mono);font-size:.68rem;color:var(--muted-page);letter-spacing:.1em;white-space:nowrap}
.pbar{flex:1;height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .3s}

.recline{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;background:var(--green-soft);border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;padding:.45rem .9rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;row-gap:.45rem}
/* The action group sits at the right edge and wraps as one unit, so the two
   chips never end up on separate ragged lines on a narrow phone. */
.recline-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:.5rem}
.recline span{padding:0 .5rem 0 0;margin-right:.1rem;border-right:1px solid var(--line)}
.recline span:last-of-type{border-right:none}
/* Pill action buttons used inside card headers and next to questions. */
.chipbtn{background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--green-deep);font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:0;padding:.3rem .75rem;display:inline-flex;align-items:center;gap:.3rem;line-height:1.25;min-height:30px;transition:background .12s,border-color .12s}
.chipbtn:hover{background:var(--green-soft);border-color:var(--green)}
.chipbtn.on{background:var(--green-soft);border-color:var(--green)}
.recline span:first-child{padding-left:0;color:var(--green-deep);font-weight:700}
.recline span:last-child{border-right:none}
.recline b{color:var(--green-deep);font-weight:700}

.gamecard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:0 0 10px 10px;padding:1.4rem 1.4rem 1.6rem;box-shadow:0 2px 8px rgba(23,41,28,.05)}
.qtext{font-size:1.15rem;line-height:1.5;font-weight:600;margin-bottom:1.2rem}
.answers{display:grid;gap:.6rem}
.ans{text-align:left;background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:.8rem .95rem;color:var(--ink);font-size:.95rem;line-height:1.4;display:flex;gap:.7rem;align-items:baseline;transition:border-color .12s,background .12s}
.ans:hover:not(:disabled){border-color:var(--green);background:var(--green-soft)}
.ans:disabled{cursor:default}
.ans .key{font-family:var(--mono);font-size:.72rem;color:var(--green);flex:0 0 auto;font-weight:700}
.ans.correct{border-color:var(--green);background:var(--green-soft)}
.ans.wrong{border-color:var(--red);background:#F8E9E8}
.ans.dim{opacity:.5}

.window{margin:1.1rem 0 .2rem}
.window .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--muted);margin-bottom:.3rem;display:flex;justify-content:space-between}
.window .lbl .t{color:var(--amber);font-weight:700}
.bar{height:6px;background:var(--track);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:3px;transition:width 1s linear}
.bar.hot i{background:var(--red)}

.verdict{margin-top:1.1rem;border-radius:8px;padding:.9rem 1rem;font-size:.92rem;line-height:1.55;border:1px solid var(--line);background:var(--sunken)}
.verdict .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;display:block;margin-bottom:.35rem;font-weight:700}
.verdict.ok{border-left:4px solid var(--green)}
.verdict.ok .tag{color:var(--green)}
.verdict.bad{border-left:4px solid var(--red)}
.verdict.bad .tag{color:var(--red)}
.verdict .src{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.05em}

.next{margin-top:1.1rem;width:100%;background:var(--green);border:none;border-radius:8px;color:#fff;font-weight:700;font-size:.95rem;padding:.8rem}
.next:hover{background:#349044}
.next.ghost{background:transparent;border:1px solid var(--line);color:var(--green-deep)}
.next.ghost:hover{background:var(--green-soft)}
.next.gold{background:var(--amber)}
.next.gold:hover{background:#c57f24}
.row2{display:flex;gap:.7rem;flex-wrap:wrap}
.row2 .next{flex:1;min-width:170px}

.pauseveil{position:absolute;inset:0;border-radius:0 0 10px 10px;background:rgba(243,247,241,.97);background:color-mix(in srgb,var(--card) 97%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:5;text-align:center;padding:1rem}
.pauseveil h3{color:var(--green-deep)}
.pauseveil p{color:var(--muted);font-size:.85rem;max-width:36ch}

/* ---- results + dashboard ---- */
.stamp{font-family:var(--mono);letter-spacing:.22em;font-size:.78rem;display:inline-block;border:2px solid var(--green);color:var(--green-deep);border-radius:6px;padding:.4rem .9rem;margin-bottom:1rem;background:var(--card)}
.stamp.rejected{border-color:var(--red);color:var(--red)}
.bigscore{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:800;color:var(--head-page)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin:.45rem 0 1.4rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.8rem .9rem}
.stat .v{font-size:1.3rem;font-weight:800;color:var(--green-deep)}
.stat .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;color:var(--muted);margin-top:.2rem}
.topicrows{display:grid;gap:.45rem;margin-bottom:1.6rem}
.trow{display:flex;align-items:center;gap:.8rem;font-size:.85rem}
/* Flexible, not pinned: at 320px a fixed 200px label left no room for the bar. */
.trow .tn{flex:1 1 150px;min-width:0;max-width:220px;color:var(--ink-page)}
.trow .tb{flex:2 1 100px;height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.trow .tb i{display:block;height:100%;background:var(--green)}
.trow .tv{font-family:var(--mono);font-size:.7rem;color:var(--muted-page);flex:0 0 70px;text-align:right}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;margin-top:1.2rem}
.topics .mode{padding:.85rem .95rem}
.mode.clickable{cursor:pointer}
.mode.clickable:hover{transform:translateX(4px);box-shadow:0 3px 10px rgba(23,41,28,.08);transition:transform .15s, box-shadow .15s}

/* ---- certificate ---- */
.cert{background:#fff;border:10px double var(--green-deep);border-radius:6px;padding:2.2rem 2rem;text-align:center;color:var(--ink)}
.cert .cw{font-weight:800;font-size:1.4rem;color:var(--green-deep);margin-bottom:1rem}
.cert .ctitle{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--muted);margin-bottom:.4rem}
.cert h2{font-size:1.7rem;color:var(--green-deep);margin-bottom:1.2rem}
.cert .cname{font-size:2rem;font-weight:800;border-bottom:2px solid var(--green);display:inline-block;padding:0 1.4rem .3rem;margin-bottom:.4rem}
.cert .cbody{font-size:.95rem;line-height:1.7;max-width:46ch;margin:0 auto 1.2rem}
.cert .cstats{font-family:var(--mono);font-size:.8rem;color:var(--green-deep);letter-spacing:.08em;margin-bottom:1.4rem}
.cert .cfoot{display:flex;justify-content:space-between;gap:1rem;font-size:.72rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.9rem;text-align:left}
.cert .cfoot .sig{font-family:var(--mono);letter-spacing:.05em}
.certnote{font-size:.74rem;color:var(--muted-page);margin-top:.9rem;line-height:1.5;text-align:center}

@media (max-width:560px){.trow .tn{flex-basis:110px;font-size:.78rem}.cert{padding:1.4rem 1rem}.cert .cname{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  body{background:#fff}
  .topbar,footer,.no-print{display:none!important}
  main{padding:0}.shell{max-width:100%}
  .cert{border-color:#1E5C2E}
}

/* ---- wide layout for admin & reporting screens ---- */
.shell.wide{max-width:1280px}
.panel{overflow-x:auto}
.shell h1 + .eyebrow, .shell h1 + .panel, .shell h1 + .statgrid{margin-top:1.2rem}
.panel table td, .panel table th{white-space:nowrap}
.panel table td:first-child{white-space:normal}

/* ---- admin tabs ---- */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.2rem;border-bottom:2px solid var(--line-page);padding-bottom:0}
.tabs .tab{background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted-page);font-weight:700;font-size:.9rem;padding:.5rem .9rem;margin-bottom:-2px}
.tabs .tab:hover{color:var(--head-page)}
.tabs .tab.active{color:var(--head-page);border-bottom-color:var(--eyebrow-page)}
.panel h2{color:var(--green-deep);font-size:1.05rem;margin-bottom:.6rem}

/* ---- AI tutor chat (ported from the v1 prototype) ---- */
/* dvh tracks the mobile browser toolbar sliding in/out; vh is the fallback. */
.chatbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.8rem;min-height:240px;max-height:55vh;max-height:55dvh;overflow-y:auto;margin-bottom:.8rem}
.msg{max-width:85%;padding:.7rem .9rem;border-radius:10px;font-size:.92rem;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.msg .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted);margin-bottom:.3rem}
.msg.ai{background:var(--green-soft);border:1px solid var(--line);align-self:flex-start}
.msg.me{background:#EEF3EC;border:1px solid var(--line);align-self:flex-end}
.msg.errmsg{background:#F8E9E8;border:1px solid var(--red);align-self:flex-start;color:#7a2f2d}
.msg.thinking{color:var(--muted);font-style:italic}
.chatrow{display:flex;gap:.6rem;align-items:stretch}
.chatrow textarea{flex:1;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;font-family:var(--sans);background:var(--sunken);color:var(--ink);resize:vertical}
.allowance{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--amber);font-weight:700}