/* The site's design layer (Oct 2026), applied on top of styles.css. Scoped to html.nd. */

.nd-only{display:none!important}
html.nd .nd-only{display:revert!important}

/* ---------- tokens ---------- */
html.nd{
  --r-sm:10px; --r:16px; --r-lg:22px;
  --accent-2:#1B8F7F; --glow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  --elev-1:0 1px 2px rgba(10,30,28,.05), 0 4px 14px rgba(10,30,28,.06);
  --elev-2:0 2px 4px rgba(10,30,28,.06), 0 14px 36px rgba(10,30,28,.12);
  --glass:color-mix(in srgb, var(--surface) 72%, transparent);
  --mesh-1:color-mix(in srgb, var(--accent) 16%, transparent);
  --mesh-2:color-mix(in srgb, #6C8BFF 12%, transparent);
  --mesh-3:color-mix(in srgb, var(--near) 10%, transparent);
}
@media (prefers-color-scheme: dark){ html.nd:not([data-theme="light"]){ --elev-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); --elev-2:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5); --accent-2:#7FD6C8; } }
html.nd[data-theme="dark"]{ --elev-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); --elev-2:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5); --accent-2:#7FD6C8; }

/* ---------- page ---------- */
html.nd body{background:var(--ground)}
html.nd body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; transform:translateZ(0); background:
  radial-gradient(900px 520px at 8% -8%, var(--mesh-1), transparent 60%),
  radial-gradient(760px 480px at 100% 0%, var(--mesh-2), transparent 60%),
  radial-gradient(700px 520px at 50% 110%, var(--mesh-3), transparent 60%)}
html.nd .nd-progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:70; transform-origin:0 50%; transform:scaleX(var(--sp, 0)); background:linear-gradient(90deg, var(--accent), var(--accent-2), #6C8BFF)}

/* sticky glass header */
html.nd .top{position:sticky; top:0; z-index:40; margin:-28px -20px 18px; padding:16px 20px 14px; background:color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius:0 0 var(--r) var(--r)}
html.nd .top h1{background:linear-gradient(120deg, var(--ink) 30%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
html.nd .views{position:relative; isolation:isolate; border-radius:14px; padding:5px; background:color-mix(in srgb, var(--surface-2) 80%, transparent)}
html.nd .views button{position:relative; z-index:1; border-radius:10px; transition:color .2s}
html.nd .views button[aria-current="page"]{background:transparent; box-shadow:none; color:var(--ink)}
html.nd .nav-ind{position:absolute; z-index:0; top:5px; height:calc(100% - 10px); border-radius:10px; background:var(--surface); box-shadow:var(--elev-1); transition:left .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1)}
html.nd .themebtn{border:0; background:transparent; color:var(--ink-2); width:36px; height:36px; border-radius:10px; cursor:pointer; display:grid; place-items:center; position:relative; z-index:1}
html.nd .themebtn:hover{color:var(--ink); background:var(--surface)}

/* hero stats */
html.nd .nd-stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:18px 0 6px}
html.nd .nd-stat{padding:14px 16px; border-radius:var(--r); background:var(--glass); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow:var(--elev-1); background:var(--surface)}
html.nd .nd-stat b{display:block; font:600 1.625rem/1.1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
html.nd .nd-stat span{font:500 0.7188rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
html.nd .nd-stat.acc b{color:var(--accent)}
@media (max-width:640px){ html.nd .nd-stats{grid-template-columns:repeat(2, minmax(0, 1fr))} html.nd .top{margin-inline:-16px; padding-inline:16px} }

/* ---------- surfaces ---------- */
html.nd .card, html.nd .panel, html.nd .chart{border-radius:var(--r-lg); border-color:color-mix(in srgb, var(--line) 75%, transparent); box-shadow:var(--elev-1)}
html.nd .card{padding:28px}
html.nd .panel{top:calc(env(safe-area-inset-top,0px) + 112px)}
html.nd .scenario{font-size:1.2188rem; line-height:1.6}

/* paper tabs with progress */
html.nd .ptab{border-radius:12px; padding:9px 14px 11px; position:relative; overflow:hidden; background:var(--surface); border-color:color-mix(in srgb, var(--line) 80%, transparent)}
html.nd .ptab::after{content:""; position:absolute; left:10px; right:10px; bottom:5px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--accent) calc(var(--p, 0) * 100%), color-mix(in srgb, var(--line) 70%, transparent) 0)}
html.nd .ptab[aria-selected="true"]{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent)}
html.nd .ptab[aria-selected="true"]::after{background:linear-gradient(90deg, var(--accent-ink) calc(var(--p, 0) * 100%), color-mix(in srgb, var(--accent-ink) 30%, transparent) 0)}
html.nd .ptab.new{border-style:solid; background:transparent}
html.nd .ptab.new::after{display:none}

/* question grid */
html.nd .cell{border-radius:10px; height:38px; border-color:transparent; background:color-mix(in srgb, var(--surface-2) 85%, transparent)}
html.nd .cell.lo{border-radius:10px}
html.nd .cell:hover{transform:translateY(-2px); box-shadow:var(--elev-1)}
html.nd .cell.cur{outline:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}

/* options */
html.nd .opt, html.nd .ritem, html.nd .xitem, html.nd .bcard{border-radius:14px; border-color:color-mix(in srgb, var(--line) 80%, transparent); background:var(--surface)}
html.nd .pick:hover, html.nd .ritem:hover, html.nd .bcard:hover:not(:disabled){transform:translateY(-2px); box-shadow:var(--elev-2); border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
html.nd .pick[aria-pressed="true"]{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--elev-1)}
html.nd .pick .letter{transition:background .2s, color .2s, transform .25s cubic-bezier(.2,.8,.2,1)}
html.nd .pick[aria-pressed="true"] .letter{transform:rotate(-6deg) scale(1.06)}
html.nd .ritem::before{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius:10px; box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 30%, transparent)}
html.nd .dragging{transform:rotate(-1.2deg) scale(1.02); box-shadow:0 22px 50px rgba(10,30,28,.28)}
html.nd .letter{border-radius:8px}

/* buttons */
html.nd .btn{border-radius:12px; position:relative; overflow:hidden}
html.nd .btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent)}
html.nd .btn.primary:hover:not(:disabled){box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 42%, transparent); transform:translateY(-1px)}
html.nd :focus-visible{outline:2px solid var(--accent); outline-offset:2px}
html.nd .ripple{position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.18; transform:scale(0); animation:nd-ripple .55s ease-out forwards}
@keyframes nd-ripple{to{transform:scale(1); opacity:0}}

/* panel score gauge */
html.nd .nd-gauge{display:flex; align-items:center; gap:14px}
html.nd .nd-gauge svg{width:74px; height:74px; transform:rotate(-90deg); flex:none}
html.nd .nd-gauge .bg{stroke:var(--surface-2)}
html.nd .nd-gauge .fg{stroke:url(#nd-grad); stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
html.nd .bar{height:8px; border-radius:6px}
html.nd .bar i{border-radius:6px; background:linear-gradient(90deg, var(--accent), var(--accent-2))}

/* answer reveal: score ring */
html.nd .scoreline{display:flex; align-items:center; gap:12px}
html.nd .nd-ring{width:46px; height:46px; transform:rotate(-90deg)}
html.nd .nd-ring .bg{stroke:var(--surface-2)}
html.nd .nd-ring .fg{stroke-linecap:round; transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
html.nd .compare .ccol{border-radius:14px}
html.nd .takeaway{border-radius:14px; background:linear-gradient(135deg, var(--accent-soft), var(--surface-2))}

/* mock bar */
html.nd .mockbar{border-radius:14px; background:var(--surface); top:calc(env(safe-area-inset-top,0px) + 108px)}

/* guide: scroll reveal */
html.nd .gsec.nd-hide{opacity:0; transform:translateY(16px)}
html.nd .gsec{transition:opacity .5s ease-out, transform .5s cubic-bezier(.2,.8,.2,1)}

/* confetti */
.nd-confetti{position:fixed; inset:0; pointer-events:none; z-index:80}

@media (prefers-reduced-motion: reduce){ html.nd *{animation:none!important; transition:none!important} html.nd .gsec.nd-hide{opacity:1; transform:none} }

/* display fixes for elements that only exist in the new design */
html.nd .nd-stats.nd-only{display:grid!important}
html.nd .themebtn.nd-only{display:grid!important}
html.nd .nd-gauge .nd-only{display:block!important}
html.nd .nd-stats{margin:16px 0 4px}
html.nd .nd-stat{padding:12px 14px}
html.nd .nd-stat b{font-size:1.375rem}
html.nd .nav-ind{transition:left .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1)}
@media (max-width:640px){
  html.nd .top{position:static; margin:-28px -16px 14px; border-radius:0 0 var(--r) var(--r)}
  html.nd .views{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  html.nd .views::-webkit-scrollbar{display:none}
  html.nd .views button{padding:8px 11px; white-space:nowrap}
  html.nd .panel{top:auto}
  html.nd .mockbar{top:calc(env(safe-area-inset-top,0px) + 8px)}
}

/* ---------- smoother drag-to-rank (trial) ---------- */
html.nd .ritem{transition:background-color .2s, border-color .2s, box-shadow .25s, scale .2s cubic-bezier(.2,.8,.2,1)}
html.nd .rlist.sorting .ritem:hover{transform:none; box-shadow:none}
html.nd .chosen{scale:1.01; border-color:var(--accent); box-shadow:var(--elev-1)}
/* the empty slot where the option will land */
html.nd .ghost{opacity:1!important; background:color-mix(in srgb, var(--accent) 9%, transparent)!important; border:2px dashed color-mix(in srgb, var(--accent) 65%, transparent)!important; box-shadow:none!important}
html.nd .ghost > *{opacity:0}
html.nd .ghost::before{opacity:.35}
/* the card under your finger: lifted, slightly tilted (rotate/scale don't fight Sortable's inline transform) */
html.nd .dragging{opacity:1!important; rotate:-1.2deg; scale:1.035; border-color:var(--accent)!important; box-shadow:0 24px 56px rgba(10,30,28,.30), 0 0 0 1px var(--accent)!important; cursor:grabbing; background:var(--surface)!important}
html.nd .dragging::before{content:counter(rk)}
body.is-sorting, body.is-sorting *{cursor:grabbing!important; user-select:none; -webkit-user-select:none}
/* landing highlight */
@keyframes nd-settle{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 12%, var(--surface))}100%{box-shadow:0 0 0 10px transparent; background:var(--surface)}}
html.nd .ritem.settled{animation:nd-settle .7s ease-out}

/* ---------- prominent timed mock + flag (trial) ---------- */
html.nd .nd-mockcta.nd-only{display:flex!important}
html.nd .nd-mockcta{align-items:center; gap:16px; margin:14px 0 4px; padding:18px 20px; border-radius:var(--r-lg); color:var(--accent-ink);
  background:linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 55%, #5B7BEA 130%); box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 35%, transparent); position:relative; overflow:hidden}
html.nd .nd-mockcta::after{content:""; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent)}
html.nd .nd-cta-ico{width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.18)}
html.nd .nd-cta-txt{flex:1; min-width:0; display:grid; gap:2px}
html.nd .nd-cta-txt b{font:600 1.1875rem/1.2 var(--serif)}
html.nd .nd-cta-txt span{font-size:0.8438rem; opacity:.9}
html.nd .nd-cta-btn{background:var(--surface)!important; color:var(--accent)!important; border:0!important; font-weight:600; padding:12px 18px; box-shadow:0 6px 18px rgba(0,0,0,.18)!important; position:relative; z-index:1}
html.nd .nd-cta-btn:hover{transform:translateY(-1px)}
@media (max-width:640px){ html.nd .nd-mockcta{flex-wrap:wrap} html.nd .nd-cta-btn{width:100%} }
html.nd .ptab.mockgo{display:none}  /* the big card replaces the small tab button */

html.nd .nd-statbtn{text-align:left; font:inherit; color:inherit; cursor:pointer}
html.nd .nd-statbtn:hover{border-color:var(--near); transform:translateY(-2px); box-shadow:var(--elev-2)}
html.nd .nd-statbtn b{color:var(--near)}
html.nd .nd-revflag.nd-only{display:inline-flex!important; align-items:center; gap:8px}
html.nd .nd-revflag[hidden]{display:none!important}
html.nd .nd-revflag{background:var(--near-soft); color:var(--near); border-color:transparent; font-weight:600}
html.nd .nd-revflag::after{display:none}
html.nd .nd-revflag small{background:var(--near); color:var(--surface); border-radius:999px; padding:1px 7px; opacity:1}

/* the big flag button in the action bar */
html.nd .act-l{display:flex; gap:10px; flex-wrap:wrap}
.act-l{display:flex; gap:10px; flex-wrap:wrap}
html.nd .flagbig{display:inline-flex; align-items:center; gap:8px; border-color:color-mix(in srgb, var(--near) 45%, var(--line)); color:var(--near); font-weight:600}
html.nd .flagbig:hover:not(:disabled){border-color:var(--near); background:var(--near-soft)}
html.nd .flagbig[aria-pressed="true"]{background:var(--near); color:var(--surface); border-color:var(--near); box-shadow:0 6px 16px color-mix(in srgb, var(--near) 35%, transparent)}
html.nd .flagbig[aria-pressed="true"] svg path{fill:currentColor; fill-opacity:.35}
html.nd .flagbig.waved svg{transform-origin:3px 14px; animation:wave .45s ease-out}
html.nd .flagbtn{font-size:0.7812rem; padding:7px 12px; border-color:color-mix(in srgb, var(--near) 40%, var(--line)); color:var(--near)}
html.nd .cell.flagged::after{border-width:0 14px 14px 0}
html.nd .cell.flagged{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--near) 55%, transparent)}

/* calmer timed-mock card (less bright) */
html.nd .nd-mockcta{color:#EAF4F2; background:linear-gradient(120deg, #135F58 0%, #1C4F57 60%, #263F52 100%); box-shadow:0 8px 22px rgba(12,40,38,.18)}
html.nd .nd-mockcta::after{background:radial-gradient(closest-side, rgba(255,255,255,.08), transparent)}
html.nd .nd-cta-ico{background:rgba(255,255,255,.10)}
html.nd .nd-cta-txt span{opacity:.8}
html.nd .nd-cta-btn{box-shadow:0 3px 10px rgba(0,0,0,.14)!important}
@media (prefers-color-scheme: dark){ html.nd:not([data-theme="light"]) .nd-mockcta{background:linear-gradient(120deg, #17393A 0%, #1A3138 60%, #1D2A36 100%); box-shadow:0 8px 22px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06)} }
html.nd[data-theme="dark"] .nd-mockcta{background:linear-gradient(120deg, #17393A 0%, #1A3138 60%, #1D2A36 100%); box-shadow:0 8px 22px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06)}

/* ---------- Sync tip bubble (trial) ---------- */
.nd-tip{position:fixed; z-index:65; width:min(320px, calc(100vw - 24px)); display:flex; gap:10px; align-items:flex-start; padding:14px 12px 16px 16px; border-radius:16px;
  background:var(--surface); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow:0 16px 40px rgba(10,30,28,.20);
  opacity:0; transform:translateY(-8px) scale(.96); transform-origin:var(--arrow, 50%) 0; pointer-events:none; transition:opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1)}
.nd-tip::before{content:""; position:absolute; top:-7px; left:calc(var(--arrow, 50%) - 7px); width:14px; height:14px; transform:rotate(45deg); background:var(--surface);
  border-left:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-top:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius:3px 0 0 0}
.nd-tip.show{opacity:1; transform:none; pointer-events:auto}
.nd-tip.hide{opacity:0; transform:translateY(-6px) scale(.98)}
.nd-tip-body{display:grid; gap:4px; font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}
.nd-tip-body b{font:600 0.9062rem var(--sans); color:var(--ink)}
.nd-tip-body strong{color:var(--accent)}
.nd-tip-x{flex:none; width:28px; height:28px; margin:-4px -2px 0 0; border:0; border-radius:8px; background:transparent; color:var(--ink-3); font-size:1.125rem; line-height:1; cursor:pointer}
.nd-tip-x:hover{background:var(--surface-2); color:var(--ink)}
/* a thin bar that shrinks as the tip counts down */
.nd-tip-bar{position:absolute; left:14px; right:14px; bottom:7px; height:3px; border-radius:3px; background:color-mix(in srgb, var(--accent) 22%, transparent); overflow:hidden}
.nd-tip-bar::after{content:""; position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(1)}
.nd-tip.counting .nd-tip-bar::after{animation:nd-life var(--life, 7000ms) linear forwards}
@keyframes nd-life{to{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){ .nd-tip{transition:opacity .2s} .nd-tip.counting .nd-tip-bar::after{animation:none; transform:scaleX(.5)} }
html.nd .nd-tip.nd-only{display:flex!important}
html.nd .nd-statbtn:disabled{cursor:default}
html.nd .nd-statbtn:disabled:hover{transform:none; box-shadow:var(--elev-1); border-color:color-mix(in srgb, var(--line) 70%, transparent)}
html.nd .nd-statbtn:disabled b{color:var(--ink)}
html.nd .flagbig.nd-only{display:inline-flex!important}
@media (max-width:640px){ html.nd .card{padding:20px 16px} html.nd .scenario{font-size:1.0938rem} html.nd .nd-mockcta{padding:16px} }
@media (max-width:640px){
  html.nd .views{flex-wrap:wrap; overflow:visible; justify-content:center; row-gap:4px}
  html.nd .views button{padding:7px 10px; font-size:0.8438rem}
}
@media (prefers-color-scheme: dark){ html.nd:not([data-theme="light"]) .nd-cta-btn{background:#EAF4F2!important; color:#0F4A45!important} }
html.nd[data-theme="dark"] .nd-cta-btn{background:#EAF4F2!important; color:#0F4A45!important}

/* pressed "Flagged for review" stays readable while hovered */
html.nd .flagbig[aria-pressed="true"]:hover:not(:disabled){background:color-mix(in srgb, var(--near) 85%, #000); border-color:color-mix(in srgb, var(--near) 85%, #000); color:var(--surface)}
html.nd .flagbig[aria-pressed="true"]:active:not(:disabled){background:color-mix(in srgb, var(--near) 75%, #000)}

/* =================== polish pack (trial) =================== */

/* ---------- accent colours ---------- */
html[data-accent="indigo"]{--accent:#4338CA; --accent-2:#6366F1; --accent-soft:#E0E1F7; --accent-ink:#FFFFFF}
html[data-accent="plum"]{--accent:#8A2C6C; --accent-2:#B0468E; --accent-soft:#F3DDEA; --accent-ink:#FFFFFF}
html[data-accent="ocean"]{--accent:#1D5FA8; --accent-2:#2F7FD0; --accent-soft:#DCE8F6; --accent-ink:#FFFFFF}
html[data-accent="slate"]{--accent:#3E4C63; --accent-2:#5B6B85; --accent-soft:#E1E5EC; --accent-ink:#FFFFFF}
@media (prefers-color-scheme: dark){
  html[data-accent="indigo"]:not([data-theme="light"]){--accent:#A5B4FC; --accent-2:#C7D0FF; --accent-soft:#23264A; --accent-ink:#0E1030}
  html[data-accent="plum"]:not([data-theme="light"]){--accent:#E39BCB; --accent-2:#F0BBDD; --accent-soft:#3A1A31; --accent-ink:#2A0B20}
  html[data-accent="ocean"]:not([data-theme="light"]){--accent:#7FB3EE; --accent-2:#A9CDF5; --accent-soft:#142B45; --accent-ink:#06192E}
  html[data-accent="slate"]:not([data-theme="light"]){--accent:#A9B8CC; --accent-2:#C6D1E0; --accent-soft:#222A36; --accent-ink:#10161F}
}
html[data-accent="indigo"][data-theme="dark"]{--accent:#A5B4FC; --accent-2:#C7D0FF; --accent-soft:#23264A; --accent-ink:#0E1030}
html[data-accent="plum"][data-theme="dark"]{--accent:#E39BCB; --accent-2:#F0BBDD; --accent-soft:#3A1A31; --accent-ink:#2A0B20}
html[data-accent="ocean"][data-theme="dark"]{--accent:#7FB3EE; --accent-2:#A9CDF5; --accent-soft:#142B45; --accent-ink:#06192E}
html[data-accent="slate"][data-theme="dark"]{--accent:#A9B8CC; --accent-2:#C6D1E0; --accent-soft:#222A36; --accent-ink:#10161F}
html.nd[data-accent] .nd-mockcta{background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 82%, #0B1418) 0%, color-mix(in srgb, var(--accent) 55%, #1B2733) 60%, #263F52 120%)}
@media (prefers-color-scheme: dark){ html.nd[data-accent]:not([data-theme="light"]) .nd-mockcta{background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 24%, #131A20) 0%, color-mix(in srgb, var(--accent) 14%, #161F27) 60%, #1D2A36 100%)} }
html.nd[data-accent][data-theme="dark"] .nd-mockcta{background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 24%, #131A20) 0%, color-mix(in srgb, var(--accent) 14%, #161F27) 60%, #1D2A36 100%)}
html.nd[data-accent] .nd-cta-btn{color:color-mix(in srgb, var(--accent) 80%, #000)!important}
.swatches{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.swatch{display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:500 0.8438rem var(--sans); cursor:pointer}
.swatch i{width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.swatch i[data-a="teal"]{background:#0E6A62} .swatch i[data-a="indigo"]{background:#4338CA} .swatch i[data-a="plum"]{background:#8A2C6C} .swatch i[data-a="ocean"]{background:#1D5FA8} .swatch i[data-a="slate"]{background:#3E4C63}
.swatch[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}

/* ---------- page transitions ---------- */
@keyframes nd-enter{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
html.nd .nd-enter{animation:nd-enter .32s cubic-bezier(.2,.8,.2,1)}

/* ---------- easier reading ---------- */
html.nd .scenario{max-width:66ch; text-wrap:pretty; letter-spacing:-.003em}
html.nd .otext, html.nd .xwhy{text-wrap:pretty}
html.nd .xwhy{line-height:1.6}
html.nd .instr{max-width:66ch}
html.nd mark.kp{color:inherit; background:transparent; padding:0 .1em; margin:0 -.1em; border-radius:3px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  box-shadow:inset 0 -.62em 0 color-mix(in srgb, var(--near) 34%, transparent);
  animation:nd-mark .6s ease-out both; animation-delay:calc(.25s + var(--n, 0) * .15s)}
@keyframes nd-mark{from{box-shadow:inset 0 0 0 transparent}to{box-shadow:inset 0 -.62em 0 color-mix(in srgb, var(--near) 34%, transparent)}}

/* ---------- ranking comparison lines ---------- */
.rlinks{margin:14px 0 6px; padding:12px 12px 8px; border-radius:14px; background:var(--surface-2); max-width:420px}
.rlinks svg{display:block; width:100%; height:auto; overflow:visible}
.rlinks .rhead{font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; fill:var(--ink-3); text-anchor:middle}
.rlinks .rpos{font:600 12px var(--mono); fill:var(--ink-3); text-anchor:middle}
.rlinks .rl{fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:400; stroke-dashoffset:400; animation:nd-draw .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.15s + var(--i) * .09s); cursor:help}
.rlinks .rl:hover{stroke-width:5}
@keyframes nd-draw{to{stroke-dashoffset:0}}
.rlinks .rl.b4{stroke:var(--good)} .rlinks .rl.b3{stroke:var(--near)} .rlinks .rl.b0{stroke:var(--bad)}
.rlinks .rn circle{fill:var(--surface); stroke-width:2.5}
.rlinks .rn.b4 circle{stroke:var(--good)} .rlinks .rn.b3 circle{stroke:var(--near)} .rlinks .rn.b0 circle{stroke:var(--bad)} .rlinks .rn.key circle{stroke:var(--ink-3)}
.rlinks .rn text{font:600 14px var(--mono); fill:var(--ink); text-anchor:middle}
.rlegend{display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 0; font-size:0.7812rem; color:var(--ink-2)}
.rlegend span{display:inline-flex; align-items:center; gap:6px}
.rlegend i{width:16px; height:3px; border-radius:2px} .rlegend i.b4{background:var(--good)} .rlegend i.b3{background:var(--near)} .rlegend i.b0{background:var(--bad)}

/* ---------- mock results ---------- */
.mhero{display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin:10px 0 6px}
.mring{position:relative; width:132px; height:132px; flex:none}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring .rbg{fill:none; stroke:var(--surface-2)}
.ring .rfg{fill:none; stroke-linecap:round; stroke:var(--accent); animation:nd-ring 1.1s cubic-bezier(.2,.8,.2,1) both}
.ring.good .rfg{stroke:var(--good)} .ring.near .rfg{stroke:var(--near)} .ring.bad .rfg{stroke:var(--bad)}
@keyframes nd-ring{from{stroke-dashoffset:var(--c)}}
.mrc{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.mrc b{font:600 2rem/1 var(--mono); letter-spacing:-.03em}
.mrc span{font:500 0.7812rem var(--mono); color:var(--ink-3); margin-top:4px}
.mside{flex:1; min-width:240px}
.mverdict{font:600 1.125rem/1.35 var(--serif); margin:0 0 12px}
.mtiles{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
.mtiles div{padding:10px 12px; border-radius:12px; background:var(--surface-2); display:grid}
.mtiles span{font:500 0.6875rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.mtiles b{font:600 1.25rem/1.2 var(--mono)} .mtiles small{color:var(--ink-3); font-size:0.75rem}
.mweak{display:grid; gap:8px}
.mwrow{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--line) 80%, transparent); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s}
.mwrow:hover{transform:translateX(3px); border-color:var(--accent); box-shadow:var(--elev-1, none)}
.mwrow .pill{flex:none; min-width:52px; text-align:center}
.mwt{flex:1; min-width:0; display:grid; gap:2px}
.mwt b{font-size:0.875rem} .mwt span{font-size:0.8125rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mwgo{color:var(--accent); font-weight:600}
.mtime svg{display:block; width:100%; height:auto}
.mtime .gl{stroke:var(--line); stroke-width:1}
.mtime .ax{font:500 11px var(--mono); fill:var(--ink-3)}
.mtime .pace{stroke:var(--ink-2); stroke-width:1.5; stroke-dasharray:4 4}
.mtime .hit{fill:transparent}
.mtime .tb{cursor:pointer}
.mtime .tbar{transform-box:fill-box; transform-origin:50% 100%; animation:nd-grow .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--k) * 12ms)}
.mtime .tbar.good{fill:var(--good)} .mtime .tbar.near{fill:var(--near)} .mtime .tbar.bad{fill:var(--bad)}
.mtime .tb:hover .tbar{opacity:.75}
@keyframes nd-grow{from{transform:scaleY(0)}}
.mcols{display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
.mcols .dom a{color:inherit}
@media (max-width:640px){ .mcols{grid-template-columns:1fr} .mtiles b{font-size:1.0625rem} .mring{width:112px; height:112px} .mrc b{font-size:1.625rem} }

/* ---------- activity dashboard ---------- */
.acts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:14px}
.acts > div{padding:12px 14px; border-radius:14px; background:var(--surface-2); display:grid}
.acts b{font:600 1.5rem/1.1 var(--mono)}
.acts span{font:500 0.6875rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.acts .streak.lit{background:linear-gradient(135deg, var(--near-soft), var(--surface-2))}
.acts .streak.lit b{color:var(--near)}
.acal{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:4px 6px; overflow-x:auto; padding-bottom:4px}
.hmonths{grid-column:2; display:grid; grid-template-columns:repeat(20, 1fr); gap:4px; font:500 0.6875rem var(--mono); color:var(--ink-3); min-width:300px}
.hdays{grid-column:1; grid-row:2; display:grid; grid-template-rows:repeat(7, 1fr); gap:4px; font:500 0.6875rem var(--mono); color:var(--ink-3); align-items:center}
.hgrid{grid-column:2; grid-row:2; display:grid; grid-template-columns:repeat(20, 1fr); grid-template-rows:repeat(7, auto); gap:4px; min-width:300px}
.hc{display:block; aspect-ratio:1; border-radius:4px; background:var(--surface-2); min-width:10px; max-height:22px}
.hc.l1{background:color-mix(in srgb, var(--accent) 28%, var(--surface-2))}
.hc.l2{background:color-mix(in srgb, var(--accent) 52%, var(--surface-2))}
.hc.l3{background:color-mix(in srgb, var(--accent) 76%, var(--surface-2))}
.hc.l4{background:var(--accent)}
.hc.out{visibility:hidden}
.hc.today{outline:2px solid var(--ink-2); outline-offset:1px}
.hgrid .hc:hover{outline:2px solid var(--ink); outline-offset:1px}
.hkey{display:flex; align-items:center; gap:4px; justify-content:flex-end; font-size:0.75rem}
.hkey .hc{width:12px; min-width:12px; height:12px}
@media (max-width:640px){ .acts{grid-template-columns:repeat(2, minmax(0, 1fr))} }

/* ---------- hover tooltip ---------- */
.nd-hovertip{position:fixed; z-index:90; pointer-events:none; max-width:260px; padding:7px 10px; border-radius:9px; background:var(--ink); color:var(--surface); font:500 0.7812rem/1.35 var(--sans); box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s}
.nd-hovertip.show{opacity:1; transform:none}


/* ---------- install card ---------- */
html.nd .nd-install.nd-only{display:flex!important}
html.nd .nd-install[hidden]{display:none!important}
.nd-install{align-items:center; gap:14px; margin:18px 0 0; padding:14px 14px 14px 16px; border-radius:var(--r-lg, 18px); background:var(--glass, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow:var(--elev-1, none)}
.nd-install img{border-radius:11px; flex:none}
.nd-install div{flex:1; min-width:0; display:grid; gap:2px; font-size:0.8438rem; color:var(--ink-2)}
.nd-install b{font-size:0.9375rem; color:var(--ink)} .nd-install strong{color:var(--accent)}

/* ---------- focus mode during a timed mock ---------- */
html.nd .nd-focusbar.nd-only{display:flex!important}
html.nd .nd-focusbar[hidden]{display:none!important}
.nd-focusbar{align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:8px 8px 8px 14px; border-radius:12px; background:var(--surface-2); font-size:0.8438rem; color:var(--ink-2)}
.nd-focusbar b{color:var(--ink)}
html.nd-focus .top, html.nd-focus #view-practice > .sub, html.nd-focus .nd-stats, html.nd-focus .nd-mockcta, html.nd-focus .setbar,
html.nd-focus .chart-top .legend, html.nd-focus .foot, html.nd-focus .nd-tabbar, html.nd-focus #panel .note, html.nd-focus #panel .saved,
html.nd-focus #panel [data-act="reset"], html.nd-focus .nd-progress, html.nd-focus .nd-tip{display:none!important}
html.nd-focus .wrap{padding-top:18px}
html.nd-focus .chart{margin-top:0}
html.nd-focus .mockbar{top:calc(env(safe-area-inset-top, 0px) + 8px)}
html.nd-focus .panel{top:calc(env(safe-area-inset-top, 0px) + 72px)}
html.nd-focus body{background:var(--ground)}

/* ---------- mobile tab bar ---------- */
html.nd .nd-tabbar.nd-only, .nd-tabbar{display:none!important}
@media (max-width:640px){
  html.nd body .nd-tabbar.nd-only{display:grid!important}
  .nd-tabbar{position:fixed; z-index:60; left:10px; right:10px; bottom:calc(env(safe-area-inset-bottom, 0px) + 10px); grid-template-columns:repeat(4, 1fr); gap:4px; padding:6px; border-radius:20px;
    background:color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow:0 10px 30px rgba(10,30,28,.18)}
  .nd-tabbar button{display:grid; justify-items:center; gap:2px; padding:7px 4px 6px; border:0; border-radius:14px; background:transparent; color:var(--ink-3); font:600 0.6875rem var(--sans); cursor:pointer; transition:color .2s, background .2s}
  .nd-tabbar button[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
  .nd-tabbar button[aria-current="page"] svg{animation:nd-pop .35s cubic-bezier(.2,1.6,.4,1)}
  html.nd .views [data-v], html.nd .views .nav-ind{display:none!important}
  html.nd .top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:12px}
  html.nd .top .eyebrow{display:none}
  html.nd .top h1{font-size:1.3125rem; margin:0}
  html.nd .views{padding:3px; flex-wrap:nowrap}
  html.nd .wrap{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 96px)}
  .nd-install{flex-wrap:wrap}
}
@keyframes nd-pop{0%{transform:scale(.8)}100%{transform:none}}

@media (prefers-reduced-motion: reduce){
  .rlinks .rl{stroke-dashoffset:0} html.nd mark.kp{animation:none} .ring .rfg{animation:none}
}
.mtime .pacel{font-weight:600; fill:var(--ink); paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
@media (max-width:640px){
  html.nd .top{flex-wrap:nowrap; align-items:center}
  html.nd .top > div{min-width:0}
  html.nd .views{width:auto; flex:none; gap:2px; justify-content:flex-end}
  html.nd .views .syncbtn{flex:none; padding:7px 10px}
  html.nd .views .themebtn{width:34px; height:34px}
}
html.nd.nd-focus body .nd-stats.nd-only, html.nd.nd-focus body .nd-mockcta.nd-only, html.nd.nd-focus body .nd-revflag.nd-only, html.nd.nd-focus body .nd-tabbar.nd-only, html.nd.nd-focus body .nd-install.nd-only, html.nd.nd-focus body .nd-tip.nd-only{display:none!important}

/* scrolling performance: skip layout/paint work for long sections that are off screen */
html.nd #view-results .tscroll{content-visibility:auto; contain-intrinsic-size:auto 320px}
html.nd .nd-progress{will-change:transform}

/* ---------- wide screens: use the room instead of leaving it blank ---------- */
@media (min-width:1360px){
  html.nd .wrap{max-width:1320px; padding-inline:28px}
  html.nd .top{margin-inline:-28px; padding-inline:28px}
  html.nd .layout{grid-template-columns:minmax(0,1fr) 340px; gap:26px}
  html.nd .sub{max-width:80ch}
}
@media (min-width:1640px){
  html.nd .wrap{max-width:1560px; padding-inline:36px}
  html.nd .top{margin-inline:-36px; padding-inline:36px}
  html.nd body{font-size:1rem}
  html.nd .layout{grid-template-columns:minmax(0,1fr) 380px; gap:30px}
  html.nd .card{padding:34px 38px}
  html.nd .scenario{font-size:1.3125rem; max-width:72ch}
  html.nd .otext{font-size:1rem}
  html.nd .cell{height:42px}
  html.nd .nd-stat b{font-size:1.5625rem}
  /* after answering: explanations on the left, your score and the key on the right */
  html.nd #card:has(> .result){display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:34px; grid-auto-flow:row dense; align-items:start}
  html.nd #card:has(> .result) > *{grid-column:1 / -1}
  html.nd #card:has(> .result) > .xcol{grid-column:1}
  html.nd #card:has(> .result) > .result{grid-column:2; margin-top:0; padding-top:0; border-top:0}
  html.nd #card:has(> .result) > .actions{margin-top:22px}
  html.nd #card:has(> .result) .compare{grid-template-columns:1fr}
  html.nd #card:has(> .result) .rlinks{max-width:none}
  html.nd .mcols{gap:0 40px}
}
@media (min-width:2000px){
  html.nd .wrap{max-width:1760px}
  html.nd body{font-size:1.0625rem}
  html.nd .scenario{font-size:1.375rem}
}

/* ---------- pattern guide: full width, with a sticky contents list on wider screens ---------- */
html.nd .gsec{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 120px)}
@media (min-width:1100px){
  html.nd .guide{max-width:none}
  html.nd .gwrap{display:grid; grid-template-columns:240px minmax(0,1fr); gap:0 44px; align-items:start; margin-top:8px}
  html.nd .gside{position:sticky; top:calc(env(safe-area-inset-top,0px) + 118px); flex-direction:column; flex-wrap:nowrap; gap:2px; margin:0; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); overflow-y:auto; padding:4px 6px 4px 0; scrollbar-width:thin}
  html.nd .gside a{background:transparent; border-radius:10px; padding:7px 12px; color:var(--ink-2); border-left:2px solid transparent; border-radius:0 10px 10px 0}
  html.nd .gside a:hover{background:var(--surface-2); color:var(--ink)}
  html.nd .gside a[aria-current="true"]{color:var(--accent); background:var(--accent-soft); border-left-color:var(--accent)}
  html.nd .gbody > .gsec:first-child{margin-top:0; padding-top:0; border-top:0}
  html.nd .gsec p, html.nd .gsec li{max-width:76ch}
}
@media (min-width:1640px){
  html.nd .gwrap{grid-template-columns:270px minmax(0,1fr); gap:0 56px}
  html.nd .gsec p, html.nd .gsec li{font-size:1rem}
}

/* ---------- settings: sections as tiles on wider screens ---------- */
@media (min-width:1100px){
  html.nd #view-settings > .card{display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px; align-items:start}
  html.nd #view-settings > .card > .bh{grid-column:1 / -1; margin-bottom:0}
  html.nd #view-settings .sset{max-width:none; margin:0; padding:20px 22px; border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:16px; background:color-mix(in srgb, var(--surface-2) 45%, var(--surface))}
  html.nd #view-settings .code{width:100%}
}

/* community stats heatmap: clearer labels and legend */
html.nd .stats .hhead span{font:500 0.6875rem var(--mono); color:var(--ink-3); text-align:center}
html.nd .stats .hhead span:last-child{text-align:right; line-height:1.2}
html.nd .stats .hcell{height:34px; border-radius:8px; font-size:0.75rem}
html.nd .stats .hcell.key{outline:2px solid var(--ink); outline-offset:-2px; box-shadow:0 0 0 2px var(--surface) inset}
.hlegend{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; font-size:0.7812rem; color:var(--ink-2)}
.hlegend span{display:inline-flex; align-items:center; gap:4px}
.hlegend .hcell{display:inline-block; width:18px; height:14px; border-radius:4px}
.hlegend span > .hcell:last-of-type{margin-right:4px}

/* ---------- GDC Standards in the guide, and citation links ---------- */
a.cite{color:var(--accent); font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset:2px; border-radius:3px}
a.cite:hover{text-decoration-color:var(--accent); background:var(--accent-soft)}
.stdfind{display:block; margin:12px 0 10px}
.stdfind input{width:100%; max-width:460px; font:0.9375rem var(--sans); padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.stdfind input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
.stdnav{margin:4px 0 8px}
.stdnav a{font-size:0.7812rem}
.stdp{margin-top:20px; scroll-margin-top:calc(env(safe-area-inset-top,0px) + 120px)}
.stdp h4{display:flex; align-items:baseline; gap:10px; font:600 1.0625rem/1.3 var(--serif); color:var(--ink); letter-spacing:0; text-transform:none; margin:0 0 8px}
.stdp h4 .sn{flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font:600 0.8125rem var(--mono)}
.stdlist{display:grid; gap:2px; border-left:2px solid var(--surface-2); padding-left:10px}
.std{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:6px 10px; border-radius:9px; font-size:0.875rem; line-height:1.45; scroll-margin-top:calc(env(safe-area-inset-top,0px) + 140px)}
.std .sn{font:600 0.7812rem/1.6 var(--mono); color:var(--ink-3)}
.std.d2{font-weight:600; margin-top:6px; background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
.std.d2 .sn{color:var(--accent)}
.std.d3{color:var(--ink-2)}
.std.hit, .gdoc.hit{animation:nd-hit 2.4s ease-out}
@keyframes nd-hit{0%,35%{background:color-mix(in srgb, var(--near) 26%, transparent); box-shadow:0 0 0 2px var(--near)}100%{background:transparent; box-shadow:0 0 0 2px transparent}}
.std.d2.hit{animation-name:nd-hit}
.stdsrc{display:inline-block; margin-top:8px; font-size:0.8125rem; color:var(--accent)}
.gdoc{padding:14px 16px; margin-top:12px; border-radius:14px; border:1px solid color-mix(in srgb, var(--line) 75%, transparent); scroll-margin-top:calc(env(safe-area-inset-top,0px) + 120px)}
.gdoc h4{font:600 1rem/1.3 var(--serif); color:var(--ink); letter-spacing:0; text-transform:none; margin:0 0 6px}
.gdoc ul{margin:0}
html.nd .btn.citeback, .citeback{position:fixed; z-index:62; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom,0px) + 22px); box-shadow:0 10px 28px rgba(10,30,28,.28)!important; animation:nd-enter .3s cubic-bezier(.2,.8,.2,1)}
.citeback[hidden]{display:none}
@media (max-width:640px){ html.nd .btn.citeback, .citeback{bottom:calc(env(safe-area-inset-bottom,0px) + 92px)} .std{grid-template-columns:52px 1fr; padding:6px 6px} }

/* =================== bug-check fixes (Oct 2026) =================== */

/* light theme: darker secondary text so small labels pass 4.5:1 (dark theme keeps its own) */
html.nd{--ink-3:#5C6B68}
/* light theme: the gradient's end colour stays dark enough for white text */
html.nd{--accent-2:#167A6D}
html[data-accent="indigo"]{--accent-2:#5451DB}
html[data-accent="ocean"]{--accent-2:#2A6CB5}
html[data-accent="plum"]{--accent-2:#9E3A7E}
html[data-accent="slate"]{--accent-2:#4F5D75}
@media (prefers-color-scheme: dark){ html.nd:not([data-theme="light"]){--accent-2:#7FD6C8} }
html.nd[data-theme="dark"]{--accent-2:#7FD6C8}
@media (prefers-color-scheme: dark){
  html[data-accent="indigo"]:not([data-theme="light"]){--accent-2:#C7D0FF} html[data-accent="plum"]:not([data-theme="light"]){--accent-2:#F0BBDD}
  html[data-accent="ocean"]:not([data-theme="light"]){--accent-2:#A9CDF5} html[data-accent="slate"]:not([data-theme="light"]){--accent-2:#C6D1E0}
}
html[data-accent="indigo"][data-theme="dark"]{--accent-2:#C7D0FF} html[data-accent="plum"][data-theme="dark"]{--accent-2:#F0BBDD}
html[data-accent="ocean"][data-theme="dark"]{--accent-2:#A9CDF5} html[data-accent="slate"][data-theme="dark"]{--accent-2:#C6D1E0}
/* dark theme + a non-teal accent: the mock button keeps dark, readable text */
@media (prefers-color-scheme: dark){ html.nd[data-accent]:not([data-theme="light"]) .nd-cta-btn{color:#10201E!important} }
html.nd[data-accent][data-theme="dark"] .nd-cta-btn{color:#10201E!important}

/* form fields: borders you can see (3:1) */
html.nd input:not([type="checkbox"]):not([type="radio"]), html.nd textarea{border-color:var(--ink-3)}

/* question grid: answered and scored cells also get a stripe, so status isn't shown by tint alone */
html.nd .cell.done{background-image:linear-gradient(to top, var(--accent) 3px, transparent 3px)}
html.nd .cell.good{background-image:linear-gradient(to top, var(--good) 4px, transparent 4px)}
html.nd .cell.near{background-image:linear-gradient(to top, var(--near) 4px, transparent 4px)}
html.nd .cell.bad{background-image:linear-gradient(to top, var(--bad) 4px, transparent 4px)}

/* touch screens: no lifted "hover" left behind after a tap */
@media (hover: none){
  html.nd .cell:hover, html.nd .pick:hover, html.nd .ritem:hover, html.nd .bcard:hover, html.nd .nd-statbtn:hover, html.nd .mwrow:hover, html.nd .btn.primary:hover, html.nd .nd-cta-btn:hover{transform:none}
  html.nd .pick:not([aria-pressed="true"]):hover, html.nd .ritem:hover, html.nd .bcard:hover, html.nd .mwrow:hover{box-shadow:none; border-color:color-mix(in srgb, var(--line) 80%, transparent)}
}

/* the sticky header's real height (measured in design.js) decides where things stick and where jumps land */
html.nd{scroll-padding-top:calc(var(--hdr, 0px) + 16px)}
html.nd .mockbar{top:calc(env(safe-area-inset-top,0px) + var(--hdr, 96px) + 10px)}
html.nd-focus .mockbar{top:calc(env(safe-area-inset-top,0px) + 8px)}
html.nd .gsec, html.nd .stdp, html.nd .gdoc{scroll-margin-top:calc(var(--hdr, 96px) + 20px)}
html.nd .std{scroll-margin-top:calc(var(--hdr, 96px) + 40px)}
@media (min-width:901px){
  html.nd .panel{top:calc(env(safe-area-inset-top,0px) + var(--hdr, 96px) + 14px); max-height:calc(100vh - var(--hdr, 96px) - 28px); max-height:calc(100dvh - var(--hdr, 96px) - 28px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
  html.nd-focus .panel{top:calc(env(safe-area-inset-top,0px) + 72px); max-height:calc(100dvh - 88px)}
}
html.nd .gside{top:calc(env(safe-area-inset-top,0px) + var(--hdr, 96px) + 16px)}
/* landscape phones: don't keep a tall header pinned over a short screen */
@media (max-height:500px){ html.nd .top{position:static} }
@media (max-width:640px){ html.nd{scroll-padding-bottom:96px} }

/* iPhone landscape: keep content clear of the notch */
@supports (padding:max(0px)){
  html.nd .wrap{padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right))}
}

/* mobile tab bar: solid instead of blurred (cheaper to draw while scrolling) */
@media (max-width:640px){ .nd-tabbar{-webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:var(--surface)!important} }


/* the lifted card shows its real position while dragging */
html.nd .dragging[data-pos]::before{content:attr(data-pos)}

/* small phones: roomier ranking text, two-column mock tiles, a capped Sync button */
@media (max-width:400px){
  .ritem{grid-template-columns:28px 24px minmax(0,1fr) auto; gap:6px; padding:9px 8px}
  .ritem::before{width:28px; height:28px; font-size:0.875rem}
  .mvb{width:30px}
}
@media (max-width:360px){ .mtiles{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:640px){ html.nd .syncbtn .slabel{max-width:7em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} }

/* skip link: hidden until focused */
.skiplink{position:fixed; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:10px; border:0; background:var(--accent); color:var(--accent-ink); font:600 0.875rem var(--sans); cursor:pointer; transition:top .15s}
.skiplink:focus{top:12px}

/* "Your answer" rows say where a misplaced option belongs (replaces the line graph) */
.crow .cmove{display:block; margin-top:3px; font:600 0.75rem var(--mono); letter-spacing:.02em}
.crow.b4 .cmove{color:var(--good)} .crow.b3 .cmove, .crow.b2 .cmove{color:var(--near)} .crow.b1 .cmove, .crow.b0 .cmove{color:var(--bad)}
/* one place out is a near miss, not a match: amber, not green */
.crow.b3{background:var(--near-soft)} .crow.b3 .pts, .crow.b3 .pos{color:var(--near)}

/* ---------- "Explain my mistake" (Beta) ---------- */
.xmistake{margin:10px 0 4px; padding:12px 14px; border-radius:14px; border:1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); display:grid; gap:8px}
.xm-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.xm-tag{display:inline-flex; align-items:center; width:auto; margin-left:6px; padding:2px 9px; border-radius:999px; background:var(--near-soft); color:var(--near); font:600 0.6875rem/1.6 var(--mono); letter-spacing:.04em; text-transform:uppercase; vertical-align:middle}
.xm-bar .xm-tag{margin-left:0}
.xm-note{font-size:0.8125rem; color:var(--ink-3)}
.xm-row{display:grid; gap:4px; padding:8px 0; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent)} .xm-row p{margin:0}
.xm-what{display:flex; gap:8px; align-items:flex-start; font-weight:600} .xm-what .letter{flex:none}
.xm-pos{font-size:0.8438rem; color:var(--ink-2)} .xm-pos b{color:var(--ink)}
.xm-pos.higher b:last-child, .xm-pos.in{color:var(--good)} .xm-pos.lower b:last-child, .xm-pos.out{color:var(--bad)}
.xm-src{margin:0; font:500 0.7188rem var(--mono); color:var(--ink-3)} .xm-src.written{color:var(--near)}
.xm-sum{margin:0; font:600 0.9688rem/1.45 var(--serif)}
.xm-notice{margin:0; padding:8px 12px; border-radius:10px; background:var(--near-soft); color:var(--ink); font-size:0.8438rem}
.xm-right{margin:2px 0 0; font-size:0.8438rem; color:var(--good)}
.xm-principle{margin:0; padding:10px 12px; border-radius:10px; background:var(--surface-2); font-size:0.875rem}

/* the page can't be pushed sideways; on touch screens the number/grip area picks a row up at once, and the rest of the row picks it up after a short hold */
html{overflow-x:hidden; overscroll-behavior-x:none}
body{overflow-x:clip}
@media (pointer:coarse){
  .rlist .ritem{position:relative; -webkit-touch-callout:none; touch-action:pan-y}
  .rlist .ritem .grip{touch-action:none; cursor:grab}
  .rlist .ritem .grip::after{content:""; position:absolute; inset:-10px -8px -10px -48px}
}
@media (pointer:coarse) and (max-width:640px){
  .rlist .ritem .grip{display:block; position:absolute; left:0; top:0; bottom:0; width:46px}
  .rlist .ritem .grip svg, .rlist .ritem .grip::after{display:none}
}
@media (pointer:coarse) and (max-width:400px){
  .rlist .ritem .grip{width:40px}
}

/* in a browser tab (Safari's bottom address bar, Chrome's toolbar) the toolbar already covers the home-indicator area, so don't add the safe-area gap on top of it; the installed app keeps it */
@media (display-mode: browser) and (max-width:640px){
  .nd-tabbar{bottom:10px}
  html.nd .wrap{padding-bottom:96px}
  html.nd .btn.citeback, .citeback{bottom:92px}
}

/* ---- from fix-touch.css ---- */
/* Accessibility fixes (Oct 2026): touch targets, non-colour status marks, grouped top-bar actions, quiet Reset.
   Loads after styles.css and design.css, so equal-specificity rules here win. */

/* ---------- top bar: navigation tabs, then a separate "Actions" group ---------- */
.views .vacts{display:flex; align-items:stretch; gap:4px; position:relative; z-index:1; margin-left:4px; padding-left:9px}
.views .vacts::before{content:""; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:var(--line)}
@media (max-width:640px){
  /* the section tabs move to the bottom bar on phones, so no divider is needed */
  .views .vacts{margin-left:0; padding-left:0}
  .views .vacts::before{display:none}
}

/* ---------- question grid: a mark as well as a colour for each status ---------- */
.cell::before{position:absolute; top:3px; left:4px; font:700 9px/1 var(--sans); pointer-events:none}
.cell.done::before{content:"\2022"; font-size:12px; top:1px; color:var(--accent)}   /* • answered */
.cell.good::before{content:"\2713"; color:var(--good)}                               /* ✓ 80%+ */
.cell.near::before{content:"\2248"; color:var(--near)}                               /* ≈ 55–79% */
.cell.bad::before{content:"\2715"; color:var(--bad)}                                 /* ✕ under 55% */
html.nd .cell.flagged::after, .cell.flagged::after{content:"\2691"; top:3px; right:4px; width:auto; height:auto; border:0; border-radius:0; font:9px/1 var(--sans); color:var(--near); pointer-events:none}  /* ⚑ flagged */
.legend i{display:inline-grid; place-items:center; width:14px; height:14px; font:700 9px/1 var(--sans)}
.legend i.lm.done::after{content:"\2022"; font-size:12px; color:var(--accent)}
.legend i.lm.good::after{content:"\2713"; color:var(--good)}
.legend i.lm.near::after{content:"\2248"; color:var(--near)}
.legend i.lm.bad::after{content:"\2715"; color:var(--bad)}
.legend i.lflag{width:14px; height:14px; border:1px solid var(--line); border-radius:3px; background:var(--surface-2)}
.legend i.lflag::after{content:"\2691"; font-weight:400; color:var(--near)}

/* ---------- Reset: a quiet red text button under the grid ---------- */
.resetrow{margin-top:10px; text-align:right}
.resetrow:empty{display:none}
.resetrow .confirm{text-align:left}
.resetlink{display:inline-flex; align-items:center; padding:6px 4px; border:0; border-radius:8px; background:none; color:var(--bad); font:500 0.8125rem var(--sans); cursor:pointer}
.resetlink:hover{text-decoration:underline; text-underline-offset:3px}
html.nd-focus .resetrow{display:none!important}

/* ---------- touch targets on phones and touch screens: 44px where the layout allows ---------- */
@media (pointer:coarse), (max-width:640px){
  html.nd .btn{min-height:44px}
  html.nd .views .syncbtn{min-height:44px}
  html.nd .flagbtn{min-height:44px; padding:0 14px}
  /* keep the 44px hit area, but let the Flag button take no more row height than the 24px chips beside it, so the chips line up */
  html.nd .chips .flagbtn{margin-block:-10px}
  html.nd .ptab{min-height:44px; padding-top:11px; padding-bottom:13px}
  .nd-tip-x{width:44px; height:44px; margin:-12px -8px -8px 0}
  .foot a{display:inline-flex; align-items:center; min-height:44px; padding:0 4px}
  .resetlink{min-height:44px; padding:0 8px}

  /* ranking arrows: real 40x40 buttons, 8px apart */
  .rlist .mv{gap:8px}
  .rlist .mvb{width:40px; height:40px; font-size:1rem; border-radius:10px}

  /* question grid: taller cells; columns grow to fill the row */
  html.nd .cell{height:44px}
  #grid .flat{grid-template-columns:repeat(auto-fill, minmax(44px, 1fr))}
}
/* touch tablets: 16 across would make cells too narrow, so show each arch as two rows of 8 */
@media (pointer:coarse) and (max-width:879px){
  #grid .arch{grid-template-columns:repeat(8, minmax(0, 1fr))}
  #grid .mid{display:none}
}
/* narrow phones: 8 across can't reach 44px wide, so use 4 wider columns */
@media (max-width:459px){
  #grid .arch{grid-template-columns:repeat(4, minmax(0, 1fr))}
}

@media (pointer:coarse){ html.nd .themebtn{width:44px; height:44px} }

/* the Advanced chip shares a row with the 44px Flag button; keep it its natural height */
.chips{align-items:center}

/* ---- from fix-explain.css ---- */
/* "Explain my mistake": hide button, AI caveat and thumbs feedback */
.xm-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.xm-head .xhead{margin:0}
.xm-hide{min-height:44px; min-width:44px; padding:0 12px; border:0; background:none; font:inherit; font-size:0.8125rem; color:var(--ink-3); text-decoration:underline; cursor:pointer}
.xm-hide:hover{color:var(--ink)}
.xm-caveat{margin:0; font-size:0.75rem; color:var(--ink-3)}
.xm-fb{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.xm-fb button{width:44px; height:44px; min-width:44px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); font-size:1.125rem; line-height:1; cursor:pointer}
.xm-fb button:disabled{cursor:default; opacity:.5}
.xm-fb button.chosen:disabled{opacity:1; border-color:var(--accent)}
.xm-thanks{margin:0; font-size:0.8125rem; color:var(--ink-3)}
.xm-hide:focus-visible, .xm-fb button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Results tables on phones: each row becomes a compact card so nothing is cut off or needs sideways scrolling */
@media (max-width:640px){
  .rtable.rt-theme, .rtable.rt-hist{display:block}
  .rtable.rt-theme thead, .rtable.rt-hist thead{display:none}
  .rtable.rt-theme tbody, .rtable.rt-hist tbody{display:block}
  .rtable.rt-theme tr, .rtable.rt-hist tr{display:grid; gap:4px 14px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line)}
  .rtable.rt-theme td, .rtable.rt-hist td{display:block; padding:0; border:0; min-width:0}
  .rtable.rt-theme tr{grid-template-columns:auto auto 1fr}
  .rtable.rt-theme td:nth-child(1){grid-column:1 / -1; font-weight:500}
  .rtable.rt-theme td:nth-child(2)::before{content:"Answered "; color:var(--ink-3)}
  .rtable.rt-theme td:nth-child(4){justify-self:end}
  .rtable.rt-hist tr{grid-template-columns:auto 1fr auto}
  .rtable.rt-hist td:nth-child(1){color:var(--ink-3)}
  .rtable.rt-hist td:nth-child(2){overflow-wrap:anywhere}
  .rtable.rt-hist td:nth-child(3){color:var(--ink-3)}
  .rtable.rt-hist td:nth-child(4){grid-column:1 / -1; font-variant-numeric:tabular-nums}
}
html.nd .nd-revmis{background:var(--bad-soft); color:var(--bad)}
html.nd .nd-revmis small{background:var(--bad)}