/* VawtPortal — drawing-office palette: Prussian-blue ink on drafting film, survey-yellow datum line.
   No inline styles anywhere (CSP style-src 'self'); all colour comes from the tokens below. */

:root {
  color-scheme: light dark;
  --paper: #EDF0EC;
  --sheet: #FAFBF9;
  --ink: #16202A;
  --ink-2: #485764;
  --ink-3: #6B7984;
  --rule: #D2D9D4;
  --rule-2: #AFBAB4;
  --band: #E2E7E3;
  --prussian: #1B3F66;
  --prussian-2: #2B5A8B;
  --on-prussian: #FFFFFF;
  --link: #1C5995;
  --datum: #E2A400;
  --ok: #2D7247;
  --review: #965F00;
  --bad: #B0251C;
  --draft: #55626D;
  --obsolete: #87929A;
  --bar: #A7BCD2;
  --rail-bg: #12304F;
  --rail-ink: #DAE4ED;
  --rail-dim: #92A8BD;
  --rail-line: #24496F;
  --rail-hover: #1A3D63;
  --diff-add: #DDEFE2;
  --diff-del: #F6E0DD;
  --radius: 3px;
  --font: "IBM Plex Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "D2Coding", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0D141B;
    --sheet: #131D26;
    --ink: #DCE4EA;
    --ink-2: #A2B0BB;
    --ink-3: #7E8D99;
    --rule: #23303B;
    --rule-2: #354452;
    --band: #19252F;
    --prussian: #8CB7E5;
    --prussian-2: #A8CAEF;
    --on-prussian: #0D141B;
    --link: #8EC0F1;
    --datum: #F1C12F;
    --ok: #6BBF8B;
    --review: #E3A649;
    --bad: #EF847A;
    --draft: #99A6B1;
    --obsolete: #6A7782;
    --bar: #2E4B69;
    --rail-bg: #0A1722;
    --rail-ink: #D2DDE7;
    --rail-dim: #7E94A8;
    --rail-line: #17293A;
    --rail-hover: #12283C;
    --diff-add: #17352A;
    --diff-del: #3D2120;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--datum); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.3; margin: 0; font-weight: 600; }
h1 { font-size: 1.625rem; letter-spacing: -0.01em; }
h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
p { margin: 0 0 0.75rem; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
small, .small { font-size: 0.8125rem; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--datum); color: #000; padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ frame */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.rail {
  background: var(--rail-bg);
  color: var(--rail-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.1rem 0 1rem;
}
.brand { display: flex; gap: 0.7rem; align-items: center; padding: 0 1.1rem 1.1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--rail-line); }
.brand .mark { width: 34px; height: 34px; flex: none; }
.mark line, .mark path, .mark circle { stroke: currentColor; stroke-linecap: round; fill: none; }
.mark line { stroke-width: 1.3; }
.mark .blade { stroke-width: 2.8; }
.mark .orbit { stroke-width: 0.8; stroke-dasharray: 1.5 2; opacity: 0.55; }
.mark .hub { fill: var(--datum); stroke: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 1.05rem; letter-spacing: 0.04em; }
.brand-text span { font-size: 0.75rem; color: var(--rail-dim); }
.rail nav { flex: 1; overflow-y: auto; padding: 0.9rem 0.6rem; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li a {
  display: block;
  padding: 0.42rem 0.6rem 0.42rem 0.75rem;
  color: var(--rail-ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
}
.rail li a:hover { background: var(--rail-hover); }
.rail li a[aria-current="page"] { border-left-color: var(--datum); background: var(--rail-hover); font-weight: 600; }
.nav-label { margin: 1.1rem 0 0.3rem 0.75rem; font-size: 0.75rem; color: var(--rail-dim); }
.who { padding: 0.9rem 1.1rem 0; border-top: 1px solid var(--rail-line); font-size: 0.8125rem; }
.who a { color: var(--rail-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.who a:hover { text-decoration: underline; }
.who .role { display: block; color: var(--rail-dim); margin: 0.1rem 0 0.5rem; }
.who form { margin: 0; }
.who button { background: none; border: 1px solid var(--rail-line); color: var(--rail-ink); font: inherit; padding: 0.25rem 0.7rem; border-radius: var(--radius); cursor: pointer; }
.who button:hover { background: var(--rail-hover); }

.main { padding: 1.6rem 2.2rem 4rem; max-width: 1280px; width: 100%; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); align-content: start; } /* on short pages the spare height stays below the page, not in the nav bar */
  .rail { position: static; height: auto; padding: 0.6rem 0 0; }
  .brand { padding: 0 1rem 0.6rem; border: 0; }
  .rail nav { padding: 0 0.5rem; overflow-x: auto; overflow-y: hidden; }
  .rail nav ul { display: flex; gap: 0.15rem; white-space: nowrap; }
  .rail li a { border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 0.45rem 0.65rem; }
  .rail li a[aria-current="page"] { border-bottom-color: var(--datum); }
  .nav-label { display: none; }
  .who { display: flex; gap: 0.8rem; align-items: center; padding: 0.5rem 1rem; }
  .who .role { margin: 0; }
  .main { padding: 1.1rem 1rem 3rem; }
}

/* ------------------------------------------------------------------ page heading */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.65rem;
  margin-bottom: 1.25rem;
}
.page-head .lede { margin: 0.3rem 0 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 70ch; }
.page-head .ident { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-2); display: block; margin-bottom: 0.15rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ------------------------------------------------------------------ controls */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--prussian); border-color: var(--prussian); color: var(--on-prussian); }
.btn.primary:hover { background: var(--prussian-2); }
.btn.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn.small { font-size: 0.8125rem; padding: 0.2rem 0.6rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.inline-form { display: inline; margin: 0; }

.form { display: grid; gap: 1rem; max-width: 760px; }
.form.wide { max-width: none; }
.field > label, .field > .label { display: block; font-weight: 500; font-size: 0.875rem; margin-bottom: 0.3rem; }
.field .hint { margin: 0.3rem 0 0; }
.hint { font-size: 0.8125rem; color: var(--ink-3); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="number"],
input[type="search"], input[type="url"], input[type="file"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
}
input[type="file"] { padding: 0.35rem; }
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--datum); outline-offset: 0; border-color: var(--ink-3); }
input[aria-invalid="true"], .input-validation-error { border-color: var(--bad); }
.field-validation-error, .err { color: var(--bad); font-size: 0.8125rem; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { margin-top: 0.3rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
fieldset { border: 1px solid var(--rule); border-radius: 4px; padding: 0.8rem 1rem 1rem; margin: 0; }
legend { font-weight: 600; font-size: 0.875rem; padding: 0 0.3rem; }
.code-input { font-family: var(--mono); font-size: 1.25rem; letter-spacing: 0.25em; max-width: 12rem; text-align: center; }

.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 1rem; }
.filters .field { min-width: 150px; }
.filters .field.grow { flex: 1 1 240px; }

.alert { padding: 0.65rem 0.9rem; border-left: 4px solid var(--ink-3); background: var(--sheet); margin: 0 0 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.alert.ok { border-left-color: var(--ok); }
.alert.error { border-left-color: var(--bad); }
.alert.warn { border-left-color: var(--datum); }
.alert ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }

/* ------------------------------------------------------------------ tables, stamps */
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
table.data th {
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: var(--band);
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
table.data td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--band) 45%, transparent); }
table.data td.id { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }
table.data .late { color: var(--bad); font-weight: 600; }
.empty { color: var(--ink-3); padding: 1.2rem 0.2rem; margin: 0; }
.table-wrap .empty { padding: 1.2rem 0.9rem; }

.stamp {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 0.45rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.st-Draft { color: var(--draft); }
.st-Review { color: var(--review); }
.st-Approved { color: var(--ok); }
.st-Obsolete { color: var(--obsolete); text-decoration: line-through; }
.ts-NotStarted { color: var(--draft); }
.ts-InProgress { color: var(--prussian); }
.ts-Done { color: var(--ok); }
.ts-OnHold { color: var(--review); }
.stamp.ext { color: var(--prussian); border-style: dashed; }

.tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.tag { font-size: 0.75rem; padding: 0 0.4rem; background: var(--band); border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
.tag.req { font-family: var(--mono); background: transparent; border: 1px solid var(--rule-2); }

meter { width: 5.5rem; height: 0.55rem; vertical-align: middle; }

/* ------------------------------------------------------------------ dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6rem 2rem; }
.dash section > h2:first-child { margin-top: 0; }
.dash section > h2 { margin-top: 1.8rem; }
.dash section + section { margin-top: 0; }
@media (max-width: 1050px) { .dash { grid-template-columns: 1fr; } }
.gate-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; padding: 0.9rem 0 1rem; }
.gate-line .count { font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--prussian); font-variant-numeric: tabular-nums; }
.gate-line .count small { font-size: 1rem; font-weight: 500; color: var(--ink-2); margin-left: 0.2rem; }
.gate-line .what { font-size: 1.05rem; font-weight: 600; }
.gate-line .criteria { flex-basis: 100%; color: var(--ink-2); margin: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); margin: 0 0 1.4rem; overflow: hidden; }
/* every cell has a left rule; the one at the start of each row is pushed under the clipped edge */
.facts > div { padding: 0.6rem 0.9rem 0.65rem 0.9rem; border-left: 1px solid var(--rule); margin-left: -1px; }
.facts > div:first-child { padding-left: 0; }
.facts dt { font-size: 0.8125rem; color: var(--ink-2); }
.facts dd { margin: 0; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts dd a { color: inherit; text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
.facts .warn dd { color: var(--bad); }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.list > li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: 0.7rem; align-items: baseline; justify-content: space-between; }
ul.list > li:last-child { border-bottom: 0; }
ul.list .meta { color: var(--ink-3); font-size: 0.8125rem; white-space: nowrap; }

/* ------------------------------------------------------------------ charts (server SVG) */
.chart-frame { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 0.4rem 0.4rem 0.2rem; overflow-x: auto; margin-bottom: 0.6rem; }
.chart-frame svg { min-width: 760px; }
.chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart .tick { font-size: 12px; fill: var(--ink-3); }
.chart .grid { stroke: var(--rule-2); stroke-width: 1; }
.chart .grid.minor { stroke: var(--rule); stroke-dasharray: 2 4; }
.rm-phase .bar { fill: var(--bar); stroke: var(--prussian); stroke-width: 1.2; }
.rm-phase.current .bar { stroke-width: 2.2; }
.rm-phase.tentative .bar { stroke-dasharray: 6 3; fill-opacity: 0.55; }
.rm-phase .fill { fill: var(--prussian); }
.rm-phase .lbl { font-size: 13px; font-weight: 600; fill: var(--ink); }
.rm-gate path { fill: var(--sheet); stroke: var(--prussian); stroke-width: 1.8; }
.rm-gate.tentative path { stroke-dasharray: 3 2; }
.rm-gate.st-Passed path { fill: var(--ok); stroke: var(--ok); }
.rm-gate.st-OnHold path { fill: var(--review); stroke: var(--review); }
.rm-gate .gl { stroke: var(--prussian); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; }
.rm-gate text { font-size: 12px; font-weight: 600; text-anchor: middle; fill: var(--prussian); }
.today line { stroke: var(--datum); stroke-width: 2; }
.today text { font-size: 12px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; }
.gt-group rect { fill: var(--band); }
.gt-group text { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.gt-task .tl { font-size: 12.5px; fill: var(--ink); }
.gt-task .to { font-size: 11.5px; fill: var(--ink-3); text-anchor: end; }
.gt-task .bar { fill: var(--bar); }
.gt-task .fill { fill: var(--prussian); }
.gt-task.st-Done .bar, .gt-task.st-Done .fill { fill: var(--ok); }
.gt-task.st-OnHold .bar { fill: var(--review); fill-opacity: 0.45; }
.gt-task.late .bar { stroke: var(--bad); stroke-width: 1.6; }
.gt-task.late .tl { fill: var(--bad); font-weight: 600; }
.gt-task .ms { fill: var(--prussian); stroke: var(--sheet); stroke-width: 1; }
.gt-task.st-Done .ms { fill: var(--ok); }
a.gt-task:hover .tl { text-decoration: underline; }
a.gt-task:focus { outline: none; }
a.gt-task:focus-visible .tl { fill: var(--link); text-decoration: underline; }
a.gt-task:focus-visible .bar { stroke: var(--datum); stroke-width: 2.5; }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.8125rem; color: var(--ink-2); margin: 0.2rem 0 1rem; }
.legend .key { display: inline-block; width: 1.6rem; height: 0.65rem; vertical-align: middle; margin-right: 0.35rem; border: 1.2px solid var(--prussian); background: var(--bar); border-radius: 1px; }
.legend .key.tentative { border-style: dashed; opacity: 0.8; }
.legend .key.today { width: 0; border: 0; border-left: 2px solid var(--datum); height: 0.95rem; }
.legend .key.gate { width: 0.7rem; height: 0.7rem; transform: rotate(45deg); background: var(--sheet); border-width: 1.6px; }
.legend .key.late { border-color: var(--bad); }

/* ------------------------------------------------------------------ item detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem 2rem; align-items: start; }
@media (max-width: 1050px) { .detail { grid-template-columns: 1fr; } }
dl.props { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
dl.props dt { color: var(--ink-2); }
dl.props dd { margin: 0; }
.side-block { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 0.9rem 1rem 1rem; }
.side-block + .side-block { margin-top: 1rem; }
.side-block h2 { margin: 0 0 0.6rem; font-size: 0.9375rem; }

/* the revision table borrows the revision block of a drawing sheet */
table.revblock { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); background: var(--sheet); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
table.revblock th, table.revblock td { border: 1px solid var(--rule-2); padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; }
table.revblock th { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); background: var(--band); white-space: nowrap; }
table.revblock td.rev { font-family: var(--mono); font-weight: 600; font-size: 0.95rem; text-align: center; width: 3.5rem; }
table.revblock tr.current td { background: color-mix(in srgb, var(--datum) 9%, var(--sheet)); }
table.revblock .file { font-weight: 500; }
table.revblock .hash { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }

.preview { margin-top: 1.5rem; }
.preview iframe { width: 100%; height: 78vh; border: 1px solid var(--rule); background: #fff; }
.preview img { max-width: 100%; height: auto; border: 1px solid var(--rule); background: #fff; }
.preview pre.text { background: var(--sheet); border: 1px solid var(--rule); padding: 0.8rem 1rem; overflow: auto; max-height: 70vh; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; white-space: pre; }

/* review comments: a supplier's comment carries a Prussian margin rule, resolved ones are greyed */
.comments { margin-top: 1.8rem; }
.comments h2 .count { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); margin-left: 0.6rem; }
ol.comment-list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); }
ol.comment-list > li { padding: 0.7rem 0.3rem; border-bottom: 1px solid var(--rule); }
.comment.from-ext { border-left: 3px solid var(--prussian); padding-left: 0.8rem; }
.comment.resolved .comment-text { color: var(--ink-3); }
.comment-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.65rem; align-items: baseline; font-size: 0.8125rem; }
.comment-text { margin: 0.35rem 0 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.stamp.aud { color: var(--draft); border-style: dotted; }
.comment-form { margin-top: 0.4rem; }

/* markdown */
.md { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 1.4rem 1.8rem 1.6rem; line-height: 1.7; }
.md > :first-child { margin-top: 0; }
.md h1 { font-size: 1.45rem; margin: 0 0 1rem; }
.md h2 { font-size: 1.2rem; margin: 2rem 0 0.7rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); }
.md h3 { font-size: 1.02rem; margin: 1.5rem 0 0.5rem; }
.md p, .md li { max-width: 78ch; }
.md table { border-collapse: collapse; margin: 0.8rem 0 1.2rem; font-size: 0.875rem; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--rule-2); padding: 0.35rem 0.6rem; vertical-align: top; }
.md th { background: var(--band); text-align: left; }
.md pre { background: var(--band); padding: 0.8rem 1rem; overflow-x: auto; border-radius: var(--radius); font-size: 0.8125rem; }
.md code { background: var(--band); padding: 0.05rem 0.3rem; border-radius: 2px; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0.8rem 0; padding: 0.2rem 1rem; border-left: 3px solid var(--rule-2); color: var(--ink-2); }
.md img { max-width: 100%; }

/* drawing viewer */
.viewer { border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); font-size: 0.8125rem; }
.viewer-bar .grow { flex: 1; }
.viewer-bar button[aria-pressed="true"] { background: var(--prussian); border-color: var(--prussian); color: var(--on-prussian); }
.viewer canvas { display: block; width: 100%; height: 560px; touch-action: none; cursor: grab; }
.viewer canvas.dragging { cursor: grabbing; }
.viewer details { padding: 0.4rem 0.7rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; }
.viewer details summary { cursor: pointer; color: var(--ink-2); }
.viewer details .checks { margin-top: 0.4rem; }
.swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-top: 0.3rem; border: 1px solid var(--rule-2); }
.viewer .status { padding: 0.4rem 0.7rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-3); }

/* code browser */
.crumbs { font-family: var(--mono); font-size: 0.875rem; margin-bottom: 0.8rem; }
ol.code { margin: 0; padding: 0.6rem 0 0.8rem 4.2rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.55; overflow-x: auto; color: var(--ink); }
ol.code li { white-space: pre; padding-right: 1rem; }
ol.code li::marker { color: var(--ink-3); font-size: 0.75rem; }
.tree td.dir a { font-weight: 600; }

/* release comparison: added lines on a green wash, deleted on red, each also marked +/- for print and colour blindness */
.df-A { color: var(--ok); }
.df-D { color: var(--bad); }
.df-M { color: var(--review); }
.df-S { color: var(--draft); }
table.diff { width: auto; min-width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; }
table.diff td { padding: 0 0.6rem; vertical-align: top; }
table.diff td.ln { width: 1%; white-space: nowrap; text-align: right; color: var(--ink-3); border-right: 1px solid var(--rule); user-select: none; font-size: 0.75rem; }
table.diff td.code { white-space: pre; }
table.diff tr.add td.code { background: var(--diff-add); }
table.diff tr.del td.code { background: var(--diff-del); }
table.diff tr.hunk td { background: var(--band); color: var(--ink-2); padding-top: 0.15rem; padding-bottom: 0.15rem; }
table.diff tbody + tbody tr.hunk td { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------------ sign-in */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.auth-card { width: 100%; max-width: 440px; background: var(--sheet); border: 1.5px solid var(--ink); }
.auth-card .body { padding: 1.6rem 1.6rem 1.4rem; }
.auth-card h1 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.auth-card .lede { color: var(--ink-2); margin-bottom: 1.2rem; }
.auth-card .form { gap: 0.9rem; }
.auth-card .btn.primary { width: 100%; justify-content: center; padding: 0.6rem; font-size: 0.9375rem; }
.titleblock { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); font-size: 0.8125rem; }
.titleblock th, .titleblock td { border: 1px solid var(--rule-2); padding: 0.35rem 0.6rem; text-align: left; }
.titleblock tr > :first-child { border-left: 0; }
.titleblock tr > :last-child { border-right: 0; }
.titleblock tr:last-child > * { border-bottom: 0; }
.titleblock th { width: 6.5rem; font-weight: 500; color: var(--ink-3); font-size: 0.75rem; }
.titleblock .mark { width: 26px; height: 26px; color: var(--prussian); vertical-align: middle; margin-right: 0.4rem; }
.wide-card { max-width: 640px; }
.qr { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 0.3rem 0 1rem; }
.qr svg { width: 176px; height: 176px; background: #fff; padding: 8px; border: 1px solid var(--rule-2); }
.qr svg rect { fill: #000; }
.secret { font-family: var(--mono); font-size: 0.9rem; word-break: break-all; background: var(--band); padding: 0.3rem 0.5rem; border-radius: 2px; }
.codes { columns: 2; font-family: var(--mono); font-size: 1rem; background: var(--band); padding: 0.8rem 1rem; margin: 0.5rem 0 1rem; list-style: none; }
.codes li { padding: 0.15rem 0; }
.steps { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 1rem; }
.steps span[aria-current="step"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--datum); }
.onetime { border: 1.5px dashed var(--datum); padding: 0.8rem 1rem; margin: 0.6rem 0 1rem; background: var(--sheet); }
.onetime .secret { font-size: 1.05rem; }

@media print {
  .rail, .actions, .filters, .no-print { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* progress meters in the brand colour */
meter { appearance: none; background: var(--band); border: 1px solid var(--rule-2); border-radius: 2px; }
meter::-webkit-meter-bar { background: var(--band); border: 0; border-radius: 2px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--prussian); }
meter::-moz-meter-bar { background: var(--prussian); }