/* Reference before substitution: coding portal. One stylesheet, no external resources. */
:root {
  --bg: #f3f4f1; --surface: #ffffff; --surface-2: #f8f9f7; --sunk: #eef0ec;
  --ink: #18202c; --ink-2: #374151; --muted: #5d6877; --faint: #8a94a1;
  --line: #e1e4de; --line-2: #cfd5cc;
  --accent: #1d5c58; --accent-2: #174a47; --accent-soft: #e3efed; --accent-line: #a9cbc6;
  --ok: #24663f; --ok-soft: #e5f2e9; --warn: #855600; --warn-soft: #fbf0d9; --bad: #a12a21; --bad-soft: #fbe8e5;
  --info: #284d84; --info-soft: #e7eef9; --mark: #ffe58a; --mark-cur: #ffb648;
  --radius: 10px; --radius-s: 7px; --shadow: 0 1px 2px rgba(24, 32, 44, .05), 0 2px 8px rgba(24, 32, 44, .04);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bar-h: 56px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 650; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 .8em; }
code, kbd { font-family: var(--mono); font-size: .86em; }
kbd { border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; background: var(--surface); color: var(--ink-2); }
:focus-visible { outline: 3px solid #2f7f79; outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 650; color: var(--accent); margin-bottom: .35em; }
.lede { font-size: 1.02rem; color: var(--ink-2); max-width: 62ch; }

/* -- top bar -- */
.demo-band { background: #2b2f6b; color: #fff; text-align: center; font-size: .82rem; height: 28px; line-height: 28px; padding: 0 12px; letter-spacing: .01em; overflow: hidden; }
.bar { height: var(--bar-h); display: flex; align-items: center; gap: 24px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 680; font-size: .98rem; letter-spacing: -.005em; }
.brand-sub { font-size: .74rem; color: var(--muted); }
.mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent) 0 50%, #7fb3ac 50% 100%); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; inset: 7px 7px 7px 7px; border-radius: 2px; background: #fff; opacity: .92; }
.mark.big { width: 40px; height: 40px; border-radius: 10px; }
.mark.big::after { inset: 11px; }
.topnav { display: flex; gap: 4px; }
.topnav a { padding: 6px 11px; border-radius: 7px; color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: .92rem; }
.topnav a:hover { background: var(--sunk); color: var(--ink); }
.topnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-2); }
.bar-end { margin-left: auto; }
.signout { display: flex; align-items: center; gap: 12px; margin: 0; }
.who { color: var(--muted); font-size: .9rem; }

/* -- buttons, chips -- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .93rem; line-height: 1; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover { background: var(--surface-2); border-color: #b9c1b6; color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--sunk); }
.btn.small { padding: 7px 12px; font-size: .86rem; }
.btn.tiny { padding: 4px 8px; font-size: .8rem; border-radius: 6px; }
.btn.wide { width: 100%; padding: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.kind { background: var(--accent-soft); color: var(--accent-2); }
.chip.kind.elig { background: #efeaf7; color: #553f86; }
.chip.kind::before { display: none; }

/* -- layout -- */
.page { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }
.page.narrowish { max-width: 820px; }
.narrow { max-width: 560px; margin: 60px auto; }
.centre { text-align: center; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 18px; }
.callout { border-radius: var(--radius-s); padding: 12px 16px; margin: 0 0 16px; border: 1px solid; font-size: .93rem; }
.callout.info { background: var(--info-soft); border-color: #c6d4ec; color: #1f3d6b; }
.callout.ok { background: var(--ok-soft); border-color: #bfdcc9; color: #1d4f32; }
.flash { border-radius: var(--radius-s); padding: 11px 15px; margin-bottom: 16px; font-weight: 550; }
.flash.error { background: var(--bad-soft); color: var(--bad); border: 1px solid #efc3bd; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #bfdcc9; }
.row-end { display: flex; justify-content: flex-end; margin-top: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
progress { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--sunk); overflow: hidden; display: block; }
progress::-webkit-progress-bar { background: var(--sunk); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; transition: width .25s; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.prog { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--muted); }
.prog progress { flex: 1; max-width: 340px; }

/* -- sign-in -- */
.page-auth { background: radial-gradient(1200px 500px at 50% -10%, #e2ece9 0, var(--bg) 60%); }
.page-auth .bar { background: transparent; border-bottom-color: transparent; }
.auth-wrap { min-height: calc(100vh - var(--bar-h) - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.auth { width: 100%; max-width: 410px; padding: 30px 32px 26px; }
.auth-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.auth-title { font-size: 1.3rem; margin: 0; }
.auth-foot { color: var(--muted); font-size: .84rem; margin-top: 6px; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack label { font-weight: 600; font-size: .88rem; margin-top: 8px; }
.stack .btn { margin-top: 16px; }
.hint { color: var(--muted); font-size: .85rem; margin: 14px 0 0; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; width: 100%; transition: border-color .12s, box-shadow .12s; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 92, 88, .16); }
input[readonly], textarea[readonly] { background: var(--surface-2); color: var(--ink-2); }
.otp { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .35em; text-align: center; padding: 12px; }
.steps-mini { display: flex; gap: 8px; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.steps-mini span { padding: 3px 10px; border-radius: 99px; background: var(--sunk); }
.steps-mini .done { background: var(--ok-soft); color: var(--ok); }
.steps-mini .cur { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

/* -- coder home -- */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 30px; }
.hero.slim { display: block; }
.hero h1 { font-size: 1.75rem; }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; }
.stepper li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 9px 12px; border-radius: 9px; }
.stepper .dot { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--sunk); color: var(--muted); border: 2px solid transparent; }
.stepper .st-t { font-weight: 650; }
.stepper .st-s { font-size: .82rem; color: var(--muted); }
.stepper li.done .dot { background: var(--ok-soft); color: var(--ok); }
.stepper li.done .dot { font-size: 0; }
.stepper li.done .dot::after { content: "\2713"; font-size: .95rem; }
.stepper li.current { background: var(--accent-soft); }
.stepper li.current .dot { background: var(--accent); color: #fff; }
.stepper li.closed .dot { background: var(--bad-soft); color: var(--bad); }
.stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.stat { margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-n { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-n .of { font-size: 1rem; color: var(--faint); font-weight: 600; }
.stat-l { color: var(--muted); font-size: .84rem; }
.list { padding: 0; overflow: hidden; }
.list-head { padding: 18px 24px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.list-head p { margin: 0; font-size: .88rem; }
.table-wrap { overflow-x: auto; }
table.tasks { width: 100%; border-collapse: collapse; }
.tasks th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tasks td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tasks tr:last-child td { border-bottom: 0; }
.tasks tr:hover td { background: #fbfcfa; }
.tasks .num { width: 44px; color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 24px; }
.tasks .act { text-align: right; padding-right: 24px; white-space: nowrap; }
.t-title { display: block; font-weight: 600; color: var(--ink); }
.t-meta { display: block; font-size: .84rem; color: var(--muted); }

/* -- paper screen -- */
.page-paper { overflow: hidden; }
.page-paper main { height: calc(100vh - var(--bar-h)); }
.page-paper .demo-band ~ main { height: calc(100vh - var(--bar-h) - 28px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(500px, 0.92fr); height: 100%; }
.reader { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.reader-head { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tabs { display: flex; gap: 2px; background: var(--sunk); border-radius: 8px; padding: 3px; }
.tab { font: inherit; font-size: .86rem; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 5px 13px; border-radius: 6px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.search { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 1 360px; }
.search input { padding: 6px 10px; font-size: .88rem; }
.find-count { font-size: .78rem; color: var(--muted); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.pane-body { flex: 1; overflow: auto; min-height: 0; }
#pane-text { padding: 18px 0 60px; }
.text-note { margin: 0 34px 10px; font-size: .78rem; color: var(--faint); }
.pg { position: relative; margin: 0 22px 16px; padding: 22px 30px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 3px rgba(24,32,44,.05); }
.pg-mark { position: absolute; top: -9px; right: 18px; font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 1px 8px; border-radius: 99px; }
.ptext { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-family: var(--serif); font-size: 15.5px; line-height: 1.65; color: #1d232b; }
.ptext mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.ptext mark.cur { background: var(--mark-cur); box-shadow: 0 0 0 2px var(--mark-cur); }
.ptext ::selection { background: #b7d9d4; }
iframe.pdf { width: 100%; height: 100%; border: 0; display: block; background: #525659; }
.coder { overflow: auto; min-height: 0; background: var(--bg); position: relative; }
.coder form { padding: 18px 20px 0; }
.meta { padding: 18px 20px 16px; }
.meta-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .86rem; }
.meta-top .back { margin-left: auto; font-size: .86rem; }
.p-title { font-size: 1.2rem; margin-bottom: 10px; font-weight: 650; }
.p-meta { display: grid; grid-template-columns: 1.6fr 1.3fr .5fr 1fr; gap: 8px 16px; margin: 0 0 14px; }
.p-meta div { min-width: 0; }
.p-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
.p-meta dd { margin: 0; font-size: .87rem; overflow-wrap: anywhere; }
.error-summary { background: var(--bad-soft); border: 1px solid #efc3bd; border-left: 4px solid var(--bad); border-radius: var(--radius-s); padding: 14px 18px; margin-bottom: 16px; }
.error-summary h2 { font-size: 1rem; color: var(--bad); }
.error-summary ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.error-summary a { color: var(--bad); font-weight: 600; }
.field { padding: 0; margin-bottom: 12px; scroll-margin-top: 14px; overflow: hidden; }
.f-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 10px; }
.f-num { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--sunk); color: var(--muted); display: grid; place-items: center; font-size: .78rem; font-weight: 700; margin-top: 1px; }
.f-titles { flex: 1; min-width: 0; }
.f-titles h3 { margin: 0; font-size: 1rem; }
.f-sub { margin: 1px 0 0; font-size: .78rem; color: var(--muted); }
.f-state { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); margin-top: 8px; }
.field.answered .f-state { background: var(--ok); }
.field.answered .f-num { background: var(--ok-soft); color: var(--ok); }
.field.has-error { border-color: #e8b4ad; }
.field.has-error .f-state { background: var(--bad); }
.f-body { padding: 0 18px 16px 56px; }
.f-errors { margin: 0 0 10px; padding: 8px 12px 8px 28px; background: var(--bad-soft); color: var(--bad); border-radius: 7px; font-size: .87rem; font-weight: 550; }
.na-line { display: none; margin: 0; padding: 0 18px 14px 56px; font-size: .84rem; color: var(--muted); }
.carry-line { display: none; margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-size: .92em; }
.field.carried .carry-line { display: block; }
.field.carried .quote-ev { display: none !important; }
.field.is-na { background: var(--surface-2); box-shadow: none; }
.field.is-na .f-body { display: none; }
.field.is-na .na-line { display: block; }
.field.is-na .f-num { background: transparent; border: 1px dashed var(--line-2); }
.field.is-na h3 { color: var(--muted); font-weight: 600; }
.opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.opt { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--surface); transition: border-color .1s, background .1s; }
.opt:hover { border-color: var(--accent-line); background: #fbfdfc; }
.opt input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.opt:has(input:focus-visible) { outline: 3px solid #2f7f79; outline-offset: 1px; }
.opt.disabled { opacity: .45; cursor: not-allowed; }
.opt-body { display: flex; flex-direction: column; min-width: 0; }
.opt-v { font-weight: 620; font-size: .92rem; }
.opt-r { font-size: .8rem; color: var(--muted); line-height: 1.45; display: none; }
.opt:has(input:checked) .opt-r, .show-rules .opt-r { display: block; }
.ev { margin: 10px 0 0; }
.ev label { display: block; font-size: .84rem; font-weight: 600; margin: 8px 0 4px; }
.ev label .muted { font-weight: 450; }
.ev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ev-head label { margin-bottom: 4px; }
.js .ev[data-show] { display: none; }
.js .ev[data-show].on { display: block; }
textarea.quote { font-family: var(--serif); font-size: .95rem; line-height: 1.5; resize: vertical; }
.qstatus { min-height: 22px; margin-top: 4px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.qchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.qchip.ok { color: var(--ok); }
.qchip.ok::before { background: var(--ok); }
.qchip.bad { color: var(--bad); }
.qchip.bad::before { background: var(--bad); }
.qchip.busy::before { background: var(--warn); }
.tag { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.tag-l { font-size: .84rem; font-weight: 600; flex: 1 1 240px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: inline-block; padding: 5px 14px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .84rem; font-weight: 600; background: var(--surface); }
.pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill input:focus-visible + span { outline: 3px solid #2f7f79; outline-offset: 2px; }
.ev.note textarea { min-height: 38px; }
details.rule { margin-top: 12px; border-top: 1px dashed var(--line-2); padding-top: 8px; }
details.rule summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.rule summary::-webkit-details-marker { display: none; }
details.rule summary::before { content: "\25B8"; font-size: .75rem; transition: transform .15s; }
details.rule[open] summary::before { transform: rotate(90deg); }
.md { font-size: .87rem; color: var(--ink-2); margin-top: 8px; }
.md h3, .md h4, .md h5 { font-size: .92rem; margin: 10px 0 6px; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md-table { overflow-x: auto; margin: 6px 0 10px; }
.md table { border-collapse: collapse; width: 100%; font-size: .83rem; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--surface-2); font-weight: 650; }
.md td:first-child { font-weight: 600; white-space: nowrap; color: var(--ink); }
.md-title { font-weight: 650; margin-top: 10px; }
.ca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.ca-part label { display: block; font-size: .84rem; font-weight: 600; margin: 8px 0 4px; }
.ca-part .hint { margin: 4px 0 0; font-size: .76rem; }
.comp .tag { margin-top: 12px; }
.actionbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; margin: 18px -20px 0; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-top: 1px solid var(--line); z-index: 5; }
.ab-left { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.ab-prog { display: flex; flex-direction: column; gap: 4px; width: 92px; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-prog progress { height: 6px; }
form[data-locked] .fields .opt:not(:has(input:checked)), form[data-locked] .rules-toggle, form[data-locked] .use-sel { display: none; }
form[data-locked] .pill:not(:has(input:checked)) { display: none; }
form[data-locked] .opt:has(input:checked) { box-shadow: none; }
.save-state { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.save-state.dirty { color: var(--warn); }
.kbd-hint { font-size: .74rem; color: var(--faint); }
.ab-right { display: flex; gap: 8px; }
.locked-banner { margin-bottom: 14px; }
form[data-locked] .opt { cursor: default; }
dialog { border: 0; border-radius: 12px; padding: 24px 26px; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20, 26, 34, .45); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* -- training and certification -- */
.intro .prog { margin-top: 10px; }
.t-list { list-style: none; padding: 6px; }
.t-item { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.t-item:hover { background: var(--surface-2); color: var(--ink); }
.t-item .num { color: var(--faint); font-weight: 650; font-variant-numeric: tabular-nums; }
.t-q { font-weight: 550; }
.t-f { font-size: .82rem; color: var(--muted); }
.crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 10px; }
.item-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .86rem; }
blockquote.passage { margin: 0 0 18px; padding: 16px 20px; border-left: 3px solid var(--accent-line); background: var(--surface-2); border-radius: 0 8px 8px 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; color: #1d232b; }
.question { font-size: 1.12rem; margin-bottom: 12px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 650; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.keybox { border-left: 4px solid var(--accent); }
.key-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin: 10px 0 2px; }
.key-v { font-size: 1.15rem; font-weight: 650; color: var(--accent-2); }
.verdict { padding: 10px 14px; border-radius: 8px; font-size: .93rem; }
.verdict.ok { background: var(--ok-soft); color: var(--ok); }
.verdict.bad { background: var(--warn-soft); color: var(--warn); }
.cert-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cert-head h1 { margin-bottom: 4px; }
.cdots { display: grid; grid-template-columns: repeat(10, 28px); gap: 6px; }
.cdot { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: .75rem; font-weight: 650; text-decoration: none; color: var(--muted); background: var(--sunk); border: 1px solid transparent; }
.cdot.ans { background: var(--accent-soft); color: var(--accent-2); }
.cdot.cur { border-color: var(--accent); background: var(--surface); color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-soft); }
ol.review { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
ol.review li { display: flex; }
ol.review a { flex: 1; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .9rem; transition: border-color .1s, background .1s; }
ol.review a:hover { border-color: var(--accent-line); background: #fbfdfc; }
.rv-f { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); }
.rv-a { font-size: .92rem; font-weight: 620; color: var(--ink); }
ol.review li.miss .rv-a { color: var(--warn); font-weight: 550; }
ol.review .num { font-weight: 650; color: var(--faint); }
ol.review .r { font-size: .78rem; font-weight: 600; color: var(--accent); }
ol.review li.miss .r { color: var(--warn); }
.result { border-top: 4px solid var(--info); }
.result.ok { border-top-color: var(--ok); }
.result.warn { border-top-color: var(--warn); }
.result.bad { border-top-color: var(--bad); }
.feedback { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
ul.missed { padding-left: 20px; }

/* -- codebook -- */
.cb-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1160px; }
.cb-toc { position: sticky; top: calc(var(--bar-h) + 16px); padding: 16px 18px; }
.cb-toc ol { padding-left: 18px; margin: 0; font-size: .88rem; }
.cb-toc li { margin: 4px 0; }
.cb { scroll-margin-top: calc(var(--bar-h) + 14px); }
.cb .md { font-size: .92rem; }

/* -- admin -- */
.coder-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.coder-card h2 { margin: 0; }
.cc-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; }
.big { font-size: 1.15rem; font-weight: 650; margin-bottom: 4px; }
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; font-size: .88rem; }
table.mini { border-collapse: collapse; width: 100%; margin-top: 12px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.mini th, .mini td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.mini th:first-child, .mini td:first-child { text-align: left; }
.mini thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

@media (max-width: 1180px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(460px, 1fr); }
  .p-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .page-paper { overflow: auto; }
  .page-paper main { height: auto; }
  .split { display: block; }
  .reader { height: 60vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero, .cc-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cb-page { grid-template-columns: 1fr; }
  .cb-toc { position: static; }
  .topnav { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* -- 0.2.0: remaining-fields note, clerical panel, guide -- */
.rest-note { display: none; padding: 14px 18px; margin-bottom: 12px; background: var(--surface-2); box-shadow: none; border-style: dashed; color: var(--muted); font-size: .9rem; }
.rest-note p { margin: 0; display: none; }
.rest-note[data-state="pending"] .rn-pending, .rest-note[data-state="closed"] .rn-closed { display: block; }
.fields.rest-pending .rest-note, .fields.rest-closed .rest-note { display: block; }
.fields.rest-pending .field.is-na, .fields.rest-closed .field.is-na { display: none; }
.guide { font-size: .88rem; padding: 10px 14px; }
details.clerical { padding: 0; }
details.clerical > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--accent-2); list-style: none; }
details.clerical > summary::-webkit-details-marker { display: none; }
details.clerical > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; font-size: .75rem; transition: transform .15s; }
details.clerical[open] > summary::before { transform: rotate(90deg); }
details.clerical .cl-body { padding: 0 18px 16px; }
details.clerical .opt { grid-template-columns: 20px 1fr; }
.cl-act { display: flex; gap: 6px; margin: 0; }
table.cl td, table.cl th { text-align: left; }
.cl-body .btn { margin-top: 0; }
.cl-body .opts { margin-bottom: 4px; }

/* -- 0.3.0: paper-level certification, guide link, training papers -- */
.ptext mark.locator { background: #d5ebe7; box-shadow: 0 0 0 2px #d5ebe7; border-radius: 2px; color: inherit; }
.ptext mark.locator.pulse { animation: pulse 1.4s ease-out 1; }
@keyframes pulse { 0% { background: var(--mark-cur); box-shadow: 0 0 0 6px var(--mark-cur); } 100% { background: #d5ebe7; box-shadow: 0 0 0 2px #d5ebe7; } }
.guide-link { margin: 8px 0 0; font-size: .84rem; }
.cert-ca, .look { padding: 14px 18px; margin-bottom: 12px; }
.cert-ca h2, .look h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin: 0 0 6px; }
.cert-ca p { margin: 0 0 4px; font-weight: 600; }
.cert-ca p.muted { font-weight: 400; }
.look { border-left: 4px solid var(--accent-line); }
.look-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.look-head h2 { margin: 0; }
blockquote.small-passage { font-size: .95rem; padding: 10px 14px; margin-bottom: 8px; }
.look p { margin: 0 0 10px; }
#cert-form .cdots { grid-template-columns: repeat(20, 22px); gap: 5px; margin: 12px 0 10px; }
#cert-form .cdot { width: 22px; height: 22px; font-size: .7rem; border-radius: 6px; }
#cert-form .cdot.ans { font-size: 0; }
#cert-form .cdot.ans::after { content: "\2713"; font-size: .75rem; }
.cert-phase { margin: 0; }
#cert-form .meta-top .back { text-decoration: none; }
.coder-pad { padding: 18px 20px; }
.tp-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tp { padding: 16px 20px; }
.tp h2 { margin-bottom: 4px; }
.chip.constructed { background: #f3ecdd; color: #6b4e12; }
.chip.constructed::before { display: none; }
.item-top { flex-wrap: wrap; }
.actionbar .btn { white-space: nowrap; }