/* HCAA ATPL (Greece) — private exam-report board. Reuses tokens, signs,
   .log-style title bars, .choice, .dropdown and .btn from styles.css so
   this page reads as part of the same site. */

/* Greek. Barlow, Barlow Condensed and B612 Mono have no Greek letters, so
   Greek text falls through to Roboto's Greek subsets (self-hosted, SIL OFL —
   see assets/fonts/LICENSE.txt). unicode-range means they only download
   once Greek is actually on screen. */
@font-face { font-family: "Roboto Greek"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/roboto-greek-wght-normal.woff2") format("woff2"); ascent-override: 100%; descent-override: 24.5%; line-gap-override: 0%; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Roboto Condensed Greek"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/roboto-condensed-greek-wght-normal.woff2") format("woff2"); ascent-override: 100%; descent-override: 24.5%; line-gap-override: 0%; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Roboto Mono Greek"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("assets/fonts/roboto-mono-greek-wght-normal.woff2") format("woff2"); ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
:root {
  --font-sans: "Barlow", "Roboto Greek", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sign: "Barlow Condensed", "Roboto Condensed Greek", "Barlow", system-ui, sans-serif;
  --font-mono: "B612 Mono", "Roboto Mono Greek", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --warn: #8a5a00;
  --warn-soft: rgba(191, 135, 0, .12);
  --ok-soft: rgba(31, 138, 76, .1);
}
:root[data-theme="dark"] { --warn: #f5c451; --warn-soft: rgba(245, 196, 81, .12); --ok-soft: rgba(69, 211, 138, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn: #f5c451; --warn-soft: rgba(245, 196, 81, .12); --ok-soft: rgba(69, 211, 138, .12); } }

.hcaa { position: relative; padding: clamp(40px, 6vw, 84px) 0 clamp(72px, 9vw, 120px); }
.hcaa-head { margin-bottom: clamp(32px, 4vw, 52px); }
.hcaa-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lang-switch { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-elev); }
.lang-switch button { min-width: 42px; padding: 6px 9px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s; }
.lang-switch button:hover { color: var(--ink); background: var(--bg-hover); }
.lang-switch button[aria-pressed="true"] { background: var(--brand-navy); color: #fff; box-shadow: inset 0 -2px 0 var(--brand-blue); }
[data-theme="dark"] .lang-switch button[aria-pressed="true"] { background: var(--sign); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-switch button[aria-pressed="true"] { background: var(--sign); box-shadow: none; } }
.hcaa-title { max-width: 780px; margin-bottom: 18px; }
.hcaa-lede { max-width: 40em; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }

/* Small airfield signs, used for the banks */
.sign-mini { font-size: 12px; border-width: 1.5px; letter-spacing: .06em; }
.sign-mini .sign-loc, .sign-mini .sign-dir { padding: 4.5px 7px; }
.sign-mini .sign-loc { box-shadow: inset 0 0 0 1.5px var(--brand-navy), inset 0 0 0 2.5px var(--brand-sky); padding-inline: 8px; }

/* ------------------------------------------------------------ Password gate */
.gate-card { width: min(440px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); box-shadow: var(--shadow-lg); }
.gate-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 22px 12px; background: var(--brand-navy); border-bottom: 3px solid var(--brand-blue); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gate-bar-state { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-sky); font-weight: 400; letter-spacing: .06em; }
.gate-bar-state .icon { width: 15px; height: 15px; }
.gate-body { display: grid; gap: 12px; padding: 24px 26px 26px; }
.gate-title { font-size: 22px; font-weight: 600; line-height: 1.2; }
.gate-note { margin-bottom: 6px; color: var(--ink-2); font-size: 15.5px; }
#gate-form { display: grid; gap: 10px; }
#gate-submit { margin-top: 4px; }
.gate-error { display: flex; align-items: center; gap: 7px; color: var(--danger); font-size: 14.5px; font-weight: 600; }
.gate-error .icon { width: 17px; height: 17px; }

/* Admin sign-in (Google) */
.gate-admin { display: grid; gap: 10px; margin-top: 8px; }
.gate-admin-label { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.gate-admin-label::before, .gate-admin-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { gap: 10px; }
.btn-google .g-logo { flex: none; width: 18px; height: 18px; }
.gate-admin-note { color: var(--ink-3); font-size: 13.5px; text-align: center; }

.admin-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--sign); border-radius: 10px; background: var(--bg-elev); font-size: 14.5px; }
.admin-strip-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.admin-strip-who > span:first-of-type { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.admin-strip-who .icon { flex: none; width: 18px; height: 18px; }
.admin-strip-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.admin-strip .link-button { font-size: 14.5px; }

/* ------------------------------------------------------------ Board */
.board { display: grid; gap: 24px; }
.board-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; border-bottom: 2px solid var(--line-strong); }
.board-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; min-width: 0; }
.board-tab { display: inline-flex; align-items: center; gap: 10px; margin-bottom: -2px; padding: 4px 2px 14px; border: 0; border-bottom: 4px solid transparent; background: none; color: var(--ink-3); font-family: var(--font-sans); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; cursor: pointer; transition: color .15s, border-color .15s; }
.board-tab:hover { color: var(--ink); }
.board-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sign); }
.board-tab:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; border-radius: 6px; }
.board-tab > .icon { width: 20px; height: 20px; }
.board-count { min-width: 30px; padding: 3px 8px 4px; border: 1px solid var(--line-strong); border-radius: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink-2); text-align: center; }
.board-count.is-alert { border-color: var(--danger); background: var(--danger); color: #fff; }
#open-report { flex: none; margin-bottom: 12px; }

.board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -8px; }
.board-filter { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px 3px 3px 12px; border-radius: 999px; background: var(--route-soft); color: var(--route); font-size: 14.5px; font-weight: 600; }
.board-filter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-filter-clear { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.board-filter-clear:hover { background: var(--route-soft); }
.board-filter-clear .icon { width: 14px; height: 14px; stroke-width: 2.4; }

.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 352px; grid-template-areas: "feed aside"; gap: 28px clamp(28px, 4vw, 48px); align-items: start; }
.board-layout.is-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "feed"; }
.board-layout.is-wide .board-aside { display: none; }
.board-view { grid-area: feed; min-width: 0; }
.board-aside { grid-area: aside; position: sticky; top: calc(var(--header-h) + 20px); min-width: 0; }
.view-note { margin-bottom: 16px; color: var(--ink-3); font-size: 14.5px; }

/* By-subject summary — also the filter */
.summary { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.summary-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 11px; background: var(--brand-navy); border-bottom: 3px solid var(--brand-blue); color: #fff; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; list-style: none; cursor: default; }
.summary-bar::-webkit-details-marker { display: none; }
.summary-bar::marker { content: ""; }
.summary-state { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--brand-sky); font-weight: 400; letter-spacing: .06em; }
.summary-state > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-state .icon { display: none; width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.summary-cols, .sum-row { display: grid; grid-template-columns: minmax(0, 1fr) 50px 54px 54px; align-items: center; gap: 8px; }
.summary-cols { padding: 12px 16px 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.summary-cols span:not(:first-child) { text-align: right; }
.summary-list { padding: 0 6px 6px; }
.sum-row { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14.5px; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.sum-row:hover { background: var(--bg-hover); }
.sum-row[aria-pressed="true"] { background: var(--route-soft); color: var(--route); font-weight: 600; }
.sum-row:focus-visible { outline-offset: -2px; }
.sum-count, .sum-pct { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sum-trend { display: flex; justify-content: flex-end; align-items: center; min-height: 24px; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
.spark { display: block; width: 52px; height: 24px; overflow: visible; }
.spark-line { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { fill: var(--sign); stroke: var(--bg-elev); stroke-width: 2; }
.sum-row[aria-pressed="true"] .spark-line { stroke: var(--route); }
.sum-row[aria-pressed="true"] .spark-dot { stroke: color-mix(in srgb, var(--route) 12%, var(--bg-elev)); }

/* Trend tooltip — values lead, labels follow */
.spark-tip { position: fixed; z-index: 70; min-width: 168px; max-width: 260px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev); box-shadow: var(--shadow-lg); pointer-events: none; }
.spark-tip-title { margin-bottom: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.spark-tip ol { display: grid; gap: 4px; }
.spark-tip li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-2); }
.spark-tip b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.spark-tip small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.spark-tip li:last-child b { color: var(--route); }
.spark-tip-dir { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.sum-row[aria-pressed="true"] .sum-count, .sum-row[aria-pressed="true"] .sum-pct { color: var(--route); }
.sum-row.is-empty { color: var(--ink-3); }
.sum-row.is-empty .sum-count, .sum-row.is-empty .sum-pct { color: var(--ink-3); opacity: .7; }
.sum-all { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sum-all .sum-row { font-weight: 600; }
.summary-note { padding: 11px 16px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; line-height: 1.45; }

/* Feed */
.feed-status { padding: 6px 0; color: var(--ink-2); font-size: 15px; }
.feed-status-error { color: var(--danger); }
.feed-empty { display: grid; justify-items: start; gap: 6px; padding: clamp(24px, 4vw, 36px); border: 1.5px dashed var(--line-strong); border-radius: 16px; color: var(--ink-2); }
.feed-empty-title { color: var(--ink); font-size: 21px; font-weight: 600; }
.feed-empty .btn { margin-top: 10px; }
.reports { display: grid; gap: 16px; }

/* Report card */
.report { container-type: inline-size; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.report.is-new { animation: report-new 2.2s var(--ease-out); }
@keyframes report-new { 0% { box-shadow: 0 0 0 3px var(--route), var(--shadow-sm); transform: translateY(-6px); opacity: 0; } 15% { transform: none; opacity: 1; } 70% { box-shadow: 0 0 0 3px var(--route), var(--shadow-sm); } }
.report-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.report-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-navy); color: #fff; box-shadow: inset 0 0 0 2px var(--brand-navy), inset 0 0 0 3.5px var(--brand-sky); font-family: var(--font-sign); font-size: 16px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.report-avatar.is-anon { background: var(--bg-sunk); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.report-avatar .icon { width: 20px; height: 20px; }
.report-who { flex: 1; min-width: 0; }
.report-name { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.report-delete { flex: none; width: 36px; height: 36px; color: var(--ink-3); }
.report-delete:hover { color: var(--danger); border-color: var(--danger); }
.report-delete .icon { width: 17px; height: 17px; }
.report.is-deleting { opacity: .5; pointer-events: none; }
.report-meta { margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.report-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.badge .icon { width: 14px; height: 14px; }
.badge-pin { border-color: transparent; background: var(--route-soft); color: var(--route); }
.badge-hidden { border-style: dashed; color: var(--ink-3); }
.badge-flag { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
.badge-dup { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.report-actions { display: flex; align-self: flex-start; gap: 6px; }
.report-actions .icon-button { width: 36px; height: 36px; color: var(--ink-3); }
.report-actions .icon-button:hover { color: var(--ink); }
.report-flag-btn[aria-pressed="true"] { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); cursor: default; }
.report-more[aria-expanded="true"] { color: var(--ink); border-color: var(--line-strong); background: var(--bg-sunk); }
.report.is-pinned { border-color: color-mix(in srgb, var(--route) 45%, var(--line)); }
.report.is-hidden { border-style: dashed; background: color-mix(in srgb, var(--bg-elev) 55%, transparent); box-shadow: none; }
.report.is-hidden .report-rows, .report.is-hidden .report-study { opacity: .6; }
.report.is-busy { opacity: .55; pointer-events: none; }

/* Flags on a report (admins) */
.report-flags { display: grid; gap: 10px; padding: 12px 20px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--danger-soft) 60%, transparent); }
.report-flags ul { display: grid; gap: 6px; }
.report-flags li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; color: var(--ink-2); }
.report-flags li b { color: var(--ink); font-weight: 600; }
.report-flags .flag-when { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); }
.report-flags q { flex-basis: 100%; color: var(--ink-2); font-style: italic; }
.report-flags-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-flags-actions .btn { padding: 6px 11px; font-size: 13.5px; }
.report-flags-actions .btn .icon { width: 16px; height: 16px; }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); }

.report-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px; align-items: center; gap: 12px 28px; padding: 16px 20px; transition: opacity .2s, background-color .2s; }
.report-row + .report-row { border-top: 1px solid var(--line); }
.report-row.is-dim { opacity: .4; }
.report-row.is-match { background: color-mix(in srgb, var(--route-soft) 70%, transparent); }
.rr-subject { display: grid; gap: 5px; min-width: 0; }
.rr-name { font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.rr-date { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink-3); }
.rr-date .icon { width: 14px; height: 14px; }
.rr-pct { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 7px 8px; }
.rr-pct-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink); }
.rr-pct-num small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.rr-pct-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rr-meter { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rr-meter > span { display: block; width: var(--pct, 0%); height: 100%; border-radius: inherit; background: var(--sign); }
.rr-banks { display: grid; gap: 6px; justify-items: start; }
.rr-result { display: inline-flex; align-items: center; gap: 5px; justify-self: start; margin-top: 2px; padding: 2px 8px 2px 6px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.rr-result .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.rr-result.is-pass { background: var(--ok-soft); color: var(--ok); }
.rr-result.is-fail { background: var(--danger-soft); color: var(--danger); }
.rr-result small { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.rr-matched { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.rr-matched span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.report-study { display: flex; align-items: baseline; gap: 12px; padding: 13px 20px 15px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-sunk) 55%, transparent); color: var(--ink-2); font-size: 15px; }
.report-study-k { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

@container (max-width: 620px) {
  .report-row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; }
  .rr-subject { grid-column: 1 / -1; }
  .rr-pct { min-width: 130px; }
  .rr-banks { justify-items: end; }
}
@container (max-width: 400px) {
  .report-head { padding: 14px 16px; }
  .report-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .rr-banks { display: flex; flex-wrap: wrap; justify-items: start; }
  .report-study { flex-direction: column; gap: 4px; padding: 12px 16px 14px; }
}

/* ------------------------------------------------------------ New-report panel */
.drawer { position: fixed; inset: 0; width: min(1120px, calc(100vw - 48px)); max-width: none; height: min(920px, calc(100dvh - 48px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 24px 90px rgba(1, 20, 50, .4); overflow: hidden; }
.drawer[open] { display: flex; animation: drawer-in .24s var(--ease-out); }
.drawer.is-closing { animation: drawer-out .18s var(--ease) forwards; }
.drawer::backdrop { background: var(--backdrop); }
@keyframes drawer-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes drawer-out { to { opacity: 0; transform: translateY(12px); } }
.drawer-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 18px; background: var(--brand-navy); border-bottom: 3px solid var(--brand-blue); color: #fff; }
.drawer-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-sky); }
.drawer-title:focus { outline: none; }
.drawer-title { margin-top: 4px; font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: #fff; }
.drawer-head .icon-button { border-color: rgba(255, 255, 255, .25); background: transparent; color: #fff; }
.drawer-head .icon-button:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); }
.drawer-body { display: grid; align-content: start; gap: 32px; padding: 24px; overflow-y: auto; overscroll-behavior: contain; container-type: inline-size; }
.drawer-foot { display: grid; gap: 12px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-elev); }
.drawer-actions { display: flex; justify-content: flex-end; gap: 10px; }
.drawer-result { display: flex; align-items: flex-start; gap: 8px; color: var(--danger); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.drawer-result .icon { width: 17px; height: 17px; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .drawer[open], .drawer.is-closing, .report.is-new, .sc { animation: none; } }

.step { display: grid; gap: 14px; }
.step-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; line-height: 1.2; }
.step-num { padding: 2px 6px 3px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--route); font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1.35; }
.step-title .optional { margin-left: 0; }
.step-hint { margin-top: -6px; color: var(--ink-3); font-size: 14.5px; }

/* Subject picker */
.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-elev); color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.pick .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.pick .i-on { display: none; }
.pick:hover { border-color: var(--ink-3); color: var(--ink); }
.pick[aria-pressed="true"] { border-color: var(--sign); background: var(--sign); color: #fff; box-shadow: 0 2px 0 var(--sign-edge); }
.pick[aria-pressed="true"] .i-on { display: block; }
.pick[aria-pressed="true"] .i-off { display: none; }
.picker.is-invalid .pick:not([aria-pressed="true"]) { border-color: var(--danger); }

/* Subject cards in the form */
.subject-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.subject-cards:empty { display: none; }
.sc { container-type: inline-size; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); box-shadow: var(--shadow-sm); animation: sc-in .25s var(--ease-out); }
@keyframes sc-in { from { opacity: 0; transform: translateY(-6px); } }
.sc-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.sc-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.sc-remove { width: 32px; height: 32px; border-color: transparent; background: transparent; color: var(--ink-3); }
.sc-remove:hover { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.sc-remove .icon { width: 16px; height: 16px; }
.sc-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 16px; padding: 16px; }
.sc-body fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sc-body legend { padding: 0; }
.sc-banks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sc-banks > legend { margin-bottom: 10px; }
.bank-pick { display: grid; gap: 7px; justify-items: start; min-width: 0; }
.bank-pick .dropdown { width: 100%; }
.sc.is-invalid { border-color: var(--danger); }

/* Percentage slider */
.pct { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.pct input[type="range"] { --val: 50%; flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pct input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sign) var(--val), var(--bg-sunk) var(--val)); box-shadow: inset 0 0 0 1px var(--line); }
.pct input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sign) var(--val), var(--bg-sunk) var(--val)); box-shadow: inset 0 0 0 1px var(--line); }
.pct input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; border: 2px solid var(--sign); border-radius: 50%; background: #fff; box-shadow: 0 2px 0 var(--sign-edge); -webkit-appearance: none; appearance: none; transition: transform .15s; }
.pct input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--sign); border-radius: 50%; background: #fff; box-shadow: 0 2px 0 var(--sign-edge); }
.pct input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.pct input[type="range"]:focus-visible { outline: 2px solid var(--route); outline-offset: 4px; border-radius: 6px; }
.pct.is-unset input[type="range"]::-webkit-slider-runnable-track { background: var(--bg-sunk); }
.pct.is-unset input[type="range"]::-moz-range-track { background: var(--bg-sunk); }
.pct.is-unset input[type="range"]::-webkit-slider-thumb { border-color: var(--ink-3); box-shadow: none; }
.pct.is-unset input[type="range"]::-moz-range-thumb { border-color: var(--ink-3); box-shadow: none; }
.pct-out { flex: none; min-width: 66px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--ink); }
.pct.is-unset .pct-out { color: var(--ink-3); font-weight: 400; }
.pct.is-invalid .pct-out { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.pct-scale { position: relative; height: 14px; margin: -6px 78px 0 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 14px; color: var(--ink-3); }
.pct-scale span { position: absolute; top: 0; left: calc(11px + (100% - 22px) * var(--at)); transform: translateX(-50%); }

#hcaa-submit .icon-busy { display: none; }
#hcaa-submit.is-busy .icon-idle { display: none; }
#hcaa-submit.is-busy .icon-busy { display: inline-block; }

@container (max-width: 500px) {
  .sc-body { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 380px) {
  .sc-banks { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Sessions */
.sessions { display: grid; gap: 18px; }
.session { container-type: inline-size; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.session-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.session-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--route); }
.session-title { margin-top: 3px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.session-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.st { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.st th, .st td { padding: 10px 12px; line-height: 1.3; text-align: left; vertical-align: middle; }
.st thead th { padding-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.st th:first-child, .st td:first-child { padding-left: 20px; }
.st th:last-child, .st td:last-child { padding-right: 20px; }
.st tbody tr + tr > * { border-top: 1px solid var(--line); }
.st .num { text-align: right; font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.st thead .num { font-size: 10.5px; }
.st-subject { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.st-subject:hover { color: var(--route); text-decoration-color: currentColor; }
.st-pct { display: grid; grid-template-columns: 40px 64px; align-items: center; justify-content: end; gap: 8px; }
.st-pct b { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.st-pct .rr-meter { grid-column: auto; }
.st-muted { color: var(--ink-3); }
.st-dates { color: var(--ink-2); font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.session-foot { display: flex; justify-content: flex-end; padding: 12px 20px 14px; border-top: 1px solid var(--line); }
.session-foot .link-button { font-size: 14.5px; }
@container (max-width: 640px) {
  .st thead { display: none; }
  .st, .st tbody, .st tr, .st td, .st th { display: block; }
  .st tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 20px; }
  .st tbody tr + tr > * { border-top: 0; }
  .st tbody tr + tr { border-top: 1px solid var(--line); }
  .st th, .st td, .st th:first-child, .st td:first-child, .st th:last-child, .st td:last-child { padding: 0; }
  .st tbody th { grid-column: 1 / -1; }
  .st td { display: grid; gap: 3px; text-align: left; }
  .st td.num { text-align: left; }
  .st td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .st-pct { justify-content: start; }
  .st-pct b { text-align: left; }
}

/* ------------------------------------------------------------ Admin view */
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px clamp(28px, 4vw, 48px); align-items: start; }
.adm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.adm-title { font-size: 20px; font-weight: 600; line-height: 1.2; }
.adm-stats { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.adm-side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 20px); }
.adm-card { display: grid; gap: 10px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.adm-card-title { font-size: 17px; font-weight: 600; line-height: 1.25; }
.adm-card-text { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.adm-card .btn { justify-self: start; }
.adm-log { display: grid; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; margin: 2px -8px 0; padding: 0 8px; }
.adm-log li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.adm-log li:first-child { border-top: 0; }
.adm-log b { color: var(--ink); font-weight: 600; }
.adm-log .log-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); overflow-wrap: anywhere; }
.adm-log .log-delete b { color: var(--danger); }

/* Admin access list */
.adm-access { display: grid; margin: 0 -8px; }
.adm-access li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.adm-access li + li { border-top: 1px solid var(--line); border-radius: 0; }
.adm-access-who { display: grid; flex: 1; min-width: 0; gap: 2px; }
.adm-access-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.adm-access-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); overflow-wrap: anywhere; }
.adm-access-tag { flex: none; padding: 2px 7px 3px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.adm-access .icon-button { flex: none; width: 32px; height: 32px; color: var(--ink-3); }
.adm-access .icon-button:hover { color: var(--danger); border-color: var(--danger); }
.adm-access .icon-button .icon { width: 16px; height: 16px; }
.adm-access-form { display: flex; gap: 8px; }
.adm-access-form .input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; font-size: 15px; }
.adm-access-form .btn { flex: none; }

/* ------------------------------------------------------------ Action menu (admins) */
.menu { position: fixed; z-index: 80; min-width: 230px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); box-shadow: var(--shadow-lg); animation: dropdown-in .16s var(--ease-out); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.menu-item .icon { width: 18px; height: 18px; color: var(--ink-3); }
.menu-item:hover, .menu-item:focus-visible { background: var(--route-soft); outline: none; }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .icon { color: currentColor; }
.menu-sep { height: 1px; margin: 5px 6px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }

/* ------------------------------------------------------------ Flag dialog */
.modal { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal[open] { display: flex; animation: modal-in .22s var(--ease-out); }
.modal::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; max-height: inherit; }
.modal-body { display: grid; gap: 16px; padding: 20px 24px 22px; overflow-y: auto; }
.modal-note { color: var(--ink-2); font-size: 15px; }
.modal-about { padding: 9px 12px; border-left: 3px solid var(--line-strong); background: var(--bg-elev); color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.modal-about:empty { display: none; }
.modal .drawer-foot { padding-bottom: 14px; }
.reasons { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.reasons > legend { margin-bottom: 8px; padding: 0; }
.reason { position: relative; display: flex; }
.reason input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.reason > span { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev); color: var(--ink); font-size: 15px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.reason > span::before { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid var(--ink-3); border-radius: 50%; box-sizing: border-box; transition: border-color .15s, border-width .15s; }
.reason:hover > span { border-color: var(--ink-3); }
.reason input:checked + span { border-color: var(--sign); background: var(--route-soft); }
.reason input:checked + span::before { border-color: var(--sign); border-width: 5px; }
.reason input:focus-visible + span { outline: 2px solid var(--route); outline-offset: 2px; }
.reasons.is-invalid .reason > span { border-color: var(--danger); }

/* ------------------------------------------------------------ Form: chips, result + score */
.sc-wide { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 41px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.chip .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--sign); background: var(--sign); color: #fff; box-shadow: 0 2px 0 var(--sign-edge); }
.chip-pass[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); }
.chip-fail[aria-pressed="true"] { border-color: var(--danger); background: var(--danger); }
[data-theme="dark"] .chip-pass[aria-pressed="true"], [data-theme="dark"] .chip-fail[aria-pressed="true"] { color: #06132a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-pass[aria-pressed="true"], :root:not([data-theme="light"]) .chip-fail[aria-pressed="true"] { color: #06132a; } }
.chip:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }
.sc-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.score { display: inline-flex; align-items: center; gap: 10px; }
.score-label { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.score-box { position: relative; display: inline-flex; }
.score-input { width: 84px; min-height: 40px; padding: 8px 28px 8px 12px; font-family: var(--font-mono); font-size: 16px; text-align: right; }
.score-unit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); color: var(--ink-3); pointer-events: none; }
.drawer-result.is-warn { color: var(--warn); }

/* ------------------------------------------------------------ Text centred in its box
   See the note in styles.css: text-box trims each label to cap height so
   flex centring centres the letters on every platform. Heights below match
   the padding-based sizes browsers without text-box keep. */
@supports (text-box: trim-both cap alphabetic) {
  .pick > span, .board-tab > span, .menu-item > span, .reason > span > span, .badge > span,
  .rr-result > span, .rr-result > small, .lang-switch button > span, .report-avatar > span,
  .admin-strip-who > span:not(.admin-strip-email), .sum-name, .sum-count, .sum-pct,
  .board-count, .step-num, .pct-out, .adm-access-tag { text-box: trim-both cap alphabetic; }
  .sign-mini .sign-loc, .sign-mini .sign-dir { min-height: 21px; padding-block: 0; }
  .pick { min-height: 35px; padding-block: 6px; }
  .menu-item { min-height: 43px; padding-block: 8px; }
  .reason > span { min-height: 43px; padding-block: 8px; }
  .badge { min-height: 23px; padding-block: 2px; }
  .rr-result { min-height: 22px; padding-block: 2px; }
  .lang-switch button { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding-block: 0; }
  .board-count, .step-num, .pct-out, .adm-access-tag { display: inline-block; }
  .board-count { padding: 7px 8px; }
  .step-num { padding: 6px; }
  .pct-out { padding: 12px 10px; }
  .adm-access-tag { padding: 5px 7px; }
  .admin-strip { min-height: 44px; }
  .sum-row { min-height: 36px; }
  .report-flags-actions .btn { min-height: 34px; padding-block: 5px; }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 960px) {
  .board-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "feed"; }
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; }
  .board-aside { position: static; }
  .summary-bar { cursor: pointer; }
  .summary-state .icon { display: block; }
  .summary[open] .summary-state .icon { transform: rotate(180deg); }
}
@media (max-width: 560px) {
  .drawer { border-left: 0; }
  .drawer-head { padding: 16px 16px 14px; }
  .drawer-title { font-size: 22px; }
  .drawer-body { padding: 20px 16px; gap: 28px; }
  .drawer-foot { padding-inline: 16px; }
  .drawer-actions .btn { flex: 1; }
  .board-bar { flex-wrap: wrap; }
  .board-tabs { gap: 4px 16px; }
  .board-tab { gap: 8px; padding-bottom: 12px; font-size: 19px; }
  .board-count { min-width: 26px; padding: 3px 6px 2px; font-size: 12px; }
  /* Admin tab: shield + count only; the label stays for screen readers. */
  #tab-admin > span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #tab-admin { gap: 6px; }
  #open-report { order: -1; margin-left: auto; }
  .hcaa-head-top .section-sign { margin-bottom: 20px; }
}

/* Shared entry keeps a multi-subject sitting quick to report. */
.batch-settings { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-sunk); }
.batch-settings legend { padding: 0 6px; }
.batch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.batch-grid select { width: 100%; }
.batch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.batch-actions .btn { white-space: normal; }
.sc-details { min-width: 0; }
.sc-details summary { color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.sc-details-body { display: grid; gap: 16px; padding-top: 16px; }
.rr-result.is-unknown { background: var(--bg-sunk); color: var(--ink-3); }
@media (max-width: 960px) {
  .subject-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .batch-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 600px) {
  .drawer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
}

/* Three pages: identity, subject selection, then one editable row per subject. */
.wizard-page[hidden], #wizard-back[hidden], #wizard-next[hidden], #hcaa-submit[hidden] { display: none; }
.wizard-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.wizard-progress li { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; }
.wizard-progress li > span:first-child { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-mono); }
.wizard-progress [aria-current="step"] { color: var(--route); font-weight: 600; }
.wizard-progress [aria-current="step"] > span:first-child { background: var(--route); border-color: var(--route); color: #fff; }
.wizard-progress .is-complete { color: var(--ok); }
.wizard-page > .step-title:focus { outline: none; }
#report-drawer #drawer-cancel { margin-right: auto; }
#report-drawer .subject-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#report-drawer .sc { display: grid; grid-template-columns: minmax(160px, 210px) minmax(0, 1fr); container-type: normal; border-radius: 10px; box-shadow: none; }
#report-drawer .sc-head { align-items: start; padding: 18px 12px 18px 16px; border-bottom: 0; border-right: 1px solid var(--line); }
#report-drawer .sc-name { font-size: 15px; padding-top: 5px; }
#report-drawer .sc-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
#report-drawer .sc-body .field { gap: 6px; min-width: 0; }
#report-drawer .sc-body .field-label { font-size: 13px; }
#report-drawer .sc-body .input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 14px; }
@media (max-width: 960px) {
  #report-drawer .sc { grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); }
  #report-drawer .sc-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wizard-progress { gap: 6px; }
  .wizard-progress li { gap: 5px; font-size: 12px; }
  #report-drawer .sc { grid-template-columns: minmax(0, 1fr); }
  #report-drawer .sc-head { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  #report-drawer .sc-body { gap: 12px 10px; padding: 12px; }
  #report-drawer .drawer-actions { flex-wrap: wrap; }
  #report-drawer .drawer-actions .btn { min-width: 0; }
}

#report-drawer .sc-body .dropdown { width: 100%; min-width: 0; }
#report-drawer .sc-body .dropdown-btn { text-align: left; }
#report-drawer .sc-body .dropdown-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#report-drawer .sc-body .dropdown-panel { max-height: 220px; }