/* VETTORIX app pages (/exam /board /docs /proof) — "Evaluation Console" layer on top of base.css tokens.
   Restyle only: class names and structure are the ones the APP pages and their JS already emit. Owned by LANDING (v2). */
.page { padding: 40px 0 8px; }
.page > .wrap { display: grid; gap: 26px; }
.page-head { display: grid; gap: 12px; padding-bottom: 6px; }
.page-head h1 { font: 640 clamp(32px, 4.2vw, 58px)/1 var(--display); font-stretch: 118%; letter-spacing: -.03em; margin: 0; max-width: 22ch; text-wrap: balance; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 70ch; font-size: 15.5px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); margin: 0; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 3px var(--ice-soft), 0 0 8px var(--ice); }
h2.sec { font: 640 22px/1.15 var(--display); font-stretch: 115%; letter-spacing: -.02em; margin: 0 0 12px; }
h3.sub { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; margin: 20px 0 8px; text-transform: uppercase; color: var(--muted); }
.card { padding: 20px 22px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }

/* forms */
label.f { display: grid; gap: 7px; font-size: 12px; color: var(--ink-2); }
label.f > span { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
textarea, input[type=text] {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font: 500 13px/1.55 var(--mono);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea::placeholder, input::placeholder { color: var(--muted); opacity: .8; }
textarea { resize: vertical; min-height: 120px; }
textarea:focus, input:focus { border-color: var(--ice); outline: 0; box-shadow: 0 0 0 3px var(--ice-soft); }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); }
.tabs button { padding: 7px 12px; border: 0; border-radius: 1px; background: transparent; cursor: pointer; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--bg-4); color: var(--ice); box-shadow: inset 0 0 0 1px var(--line-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-3); cursor: pointer; font: 500 11.5px/1.35 var(--mono); text-align: left; color: var(--ink-2); }
.chip:hover { border-color: var(--line-3); color: var(--ink); background: var(--bg-4); }
.chip[aria-pressed="true"] { border-color: var(--ice-line); background: var(--ice-soft); color: var(--ink); }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; background: var(--bg); transition: border-color .15s, background-color .15s; }
.radio:hover { border-color: var(--line-3); }
.radio input { accent-color: var(--ice); margin-top: 3px; }
.radio:has(input:checked) { border-color: var(--ice-line); background: var(--ice-soft); }
.radio small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.note { font-size: 12.5px; color: var(--muted); }
.note b { color: var(--ink-2); font-weight: 600; }
.err { color: var(--amber-ink); font: 500 12px/1.5 var(--mono); margin: 0; }
.warnbox { border: 1px solid var(--amber-line); border-left: 2px solid var(--amber); background: var(--amber-soft); padding: 11px 14px; border-radius: var(--radius); font-size: 13px; color: var(--ink); }
.okbox { border: 1px solid var(--ice-line); border-left: 2px solid var(--ice); background: var(--ice-soft); padding: 11px 14px; border-radius: var(--radius); font-size: 13px; }
details > summary { cursor: pointer; color: var(--ink-2); }
details > summary:hover { color: var(--ice); }

/* result sheet (exam/result.js) */
.result .score { font: 500 clamp(44px, 5vw, 64px)/.95 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ice); text-shadow: 0 0 28px rgba(108, 213, 255, .3); position: relative; display: inline-block; padding: 0; }
.result.fail .score { color: var(--amber); text-shadow: 0 0 28px rgba(255, 174, 61, .22); }
.result .score svg { display: none; }   /* v1 pencil ring: not part of this look */
.verdict { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius); font: 600 10.5px/1 var(--mono); letter-spacing: .16em; border: 1px solid; }
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.verdict.pass { color: var(--ice); border-color: var(--ice-line); background: var(--ice-soft); }
.verdict.pass::before { box-shadow: 0 0 8px var(--ice); }
.verdict.fail { color: var(--amber-ink); border-color: var(--amber-line); background: var(--amber-soft); }
ul.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); font: 500 12px/1.4 var(--mono); }
ul.checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
ul.checks li:nth-child(odd) { border-right: 1px solid var(--line); }
ul.checks li:nth-last-child(-n + 2) { border-bottom: 0; }
ul.checks .y { color: var(--ice); } ul.checks .n { color: var(--amber-ink); }
@media (max-width: 600px) { ul.checks { grid-template-columns: minmax(0, 1fr); } ul.checks li:nth-child(odd) { border-right: 0; } ul.checks li:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
.curve { width: 100%; height: 200px; display: block; background: linear-gradient(180deg, rgba(108, 213, 255, .04), transparent 40%); border: 1px solid var(--line); }
.curve .axis { stroke: var(--line-3); stroke-width: 1; }
.curve .lim { stroke: var(--ice); stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 2 3; }
.curve .lim:nth-of-type(3) { stroke: var(--amber); }
.curve .ln { fill: none; stroke: var(--ice); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(108, 213, 255, .6)); vector-effect: non-scaling-stroke; }
.result.fail .curve .ln { stroke: var(--amber); filter: none; }
.curve .dot { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.curve text { font: 500 10px var(--mono); fill: var(--muted); }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.t { border-collapse: collapse; width: 100%; font: 500 12px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
table.t th { text-align: left; font: 500 9.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 11px 12px 9px; border-bottom: 1px solid var(--line-2); white-space: nowrap; background: var(--bg-3); }
table.t td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.t td:first-child { color: var(--ink); }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t tr:hover td { background: var(--bg-3); }
table.t a { color: var(--ink-2); }
table.t a:hover { color: var(--ice); }
.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); }
.tag.pass { color: var(--ice); border-color: var(--ice-line); background: var(--ice-soft); } .tag.warn { color: var(--amber-ink); border-color: var(--amber-line); background: var(--amber-soft); }
code, .code { font-family: var(--mono); }
pre.code { margin: 0; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line-2); border-left: 2px solid var(--ice-line); border-radius: var(--radius); overflow-x: auto; font: 500 12px/1.65 var(--mono); white-space: pre; color: var(--ink-2); }
code.i { background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); padding: 1px 5px; border-radius: 2px; font-size: .92em; }
.copy { float: right; }

/* steps (exam progress) */
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
ol.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
ol.steps li:last-child { border-bottom: 0; }
ol.steps .dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-3); display: grid; place-items: center; font: 600 10px/1 var(--mono); margin-top: 1px; color: var(--muted); }
ol.steps li.done .dot { background: var(--ice); border-color: var(--ice); color: var(--ice-ink); box-shadow: 0 0 10px -2px var(--ice); }
ol.steps li.now .dot { border-color: var(--ice); color: var(--ice); animation: pulse 1.2s ease-in-out infinite; }
ol.steps li.wait { color: var(--muted); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--ice-soft); } }
.steps h4 { margin: 0 0 3px; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.steps p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* stats strip */
.stats { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.stats > div { padding: 14px 18px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 10px; }
.stats > div:last-child { border-right: 0; }
.stats b { display: block; font: 500 28px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ink); }
.stats span { font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* account cards */
.acct { display: grid; gap: 14px; }
.acct dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.acct dl > * { min-width: 0; }
.acct dt { font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 10px; }
.acct dd { margin: 4px 0 0; padding-bottom: 10px; font: 500 12.5px/1.35 var(--mono); word-break: break-all; color: var(--ink); }
.acct .pnl { font: 500 30px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.acct .pnl.up { color: var(--ice); } .acct .pnl.down { color: var(--amber-ink); }

/* docs */
.docs-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: calc(var(--bar-h) + 24px); display: grid; gap: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; max-height: calc(100vh - 110px); overflow: auto; border-left: 1px solid var(--line); }
.toc a { padding: 7px 12px; text-decoration: none; color: var(--muted); border-left: 2px solid transparent; margin-left: -1px; }
.toc a:hover { color: var(--ice); border-left-color: var(--ice); }
.prose { max-width: 80ch; }
.prose section { padding: 8px 0 28px; scroll-margin-top: calc(var(--bar-h) + 16px); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.prose section:last-child { border-bottom: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose li { margin: 4px 0; }
.prose h2 { font: 640 clamp(24px, 2.4vw, 32px)/1.1 var(--display); font-stretch: 115%; letter-spacing: -.02em; margin: 20px 0 12px; color: var(--ink); }
.prose a { color: var(--ice); text-decoration-color: var(--ice-line); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .docs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .toc { position: static; max-height: none; grid-auto-flow: column; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); } .toc a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; } .toc a:hover { border-bottom-color: var(--ice); } .two-col { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq details p { margin: 8px 0 0; }
.sd { font: 500 10.5px var(--mono); color: var(--muted); }
@media (max-width: 900px) { .grid2.has-id #right { order: -1; } }
.grid2 > *, .docs-grid > *, .two-col > *, .stack > *, .page .wrap > * { min-width: 0; }
pre.code, .tbl-wrap { max-width: 100%; }
@media (max-width: 600px) { .page { padding-top: 26px; } .stats b { font-size: 22px; } .stats > div { padding: 12px 14px; } .page-head h1 { font-size: 32px; } .card { padding: 16px; } }
.stack { grid-template-columns: minmax(0, 1fr); } .toc { max-width: 100%; }
code { overflow-wrap: anywhere; } pre.code code { overflow-wrap: normal; }