/* PaperPortal — 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: #596671;
  --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: #5F6A74;
  --bar: #A7BCD2;
  --rail-bg: #12304F;
  --rail-ink: #DAE4ED;
  --rail-dim: #92A8BD;
  --rail-line: #24496F;
  --rail-hover: #1A3D63;
  --diff-add: #DDEFE2;
  --diff-del: #F6E0DD;
  --focus: var(--prussian);
  --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: #94A3AF;
    --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: #8A97A3;
    --bar: #2E4B69;
    --rail-bg: #0A1722;
    --rail-ink: #D2DDE7;
    --rail-dim: #7E94A8;
    --rail-line: #17293A;
    --rail-hover: #12283C;
    --diff-add: #17352A;
    --diff-del: #3D2120;
    --focus: var(--datum);
  }
}

*, *::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: 0.9375rem; /* 15px at the default root size; follows the text size control */
  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(--focus); 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: var(--sheet); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 8%, var(--sheet)); }
.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(--ink-3);
  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(--focus); 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; }
dl.props dd .hint { display: block; margin-top: 0.2rem; }
dl.props dd.pre { white-space: pre-wrap; }
table.cp-siblings tr.current td { background: color-mix(in srgb, var(--datum) 9%, var(--sheet)); }
ul.cp-files { margin-bottom: 0.5rem; }

/* file lists grouped by where the files are attached (checkpoint, record): two alternating backgrounds */
.band-0 { --band-bg: color-mix(in srgb, var(--prussian) 10%, var(--sheet)); }
.band-1 { --band-bg: color-mix(in srgb, var(--datum) 13%, var(--sheet)); }
ul.list > li.band-0, ul.list > li.band-1 { background: var(--band-bg); padding-left: 0.55rem; padding-right: 0.55rem; }
table.data tbody tr.band-0 td, table.data tbody tr.band-1 td { background: var(--band-bg); }
table.data tbody tr.band-0:hover td, table.data tbody tr.band-1:hover td { background: color-mix(in srgb, var(--band) 55%, var(--band-bg)); }
table.data tbody tr.group-start td { border-top: 2px solid var(--rule-2); }
table.task-files a.repeat { color: var(--ink-3); }
.filtered-out { display: none !important; }
h2.group-head { margin-top: 1.8rem; }
details.task-files-group > summary h3 { display: inline; margin: 0; }

/* dashboard checkpoints: the task in small muted type above, the checkpoint in the body type below */
.cp-item .cp-kind { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0 0.25rem; margin-right: 0.2rem; vertical-align: 0.1em; }
.cp-item .cp-of { font-size: 0.8rem; color: var(--ink-2); }
.cp-item .cp-of a { color: var(--ink-2); }
.cp-item a.cp-name { font-weight: 600; }
.cp-item a.cp-name .cp-kind { color: var(--prussian); border-color: color-mix(in srgb, var(--prussian) 45%, transparent); }
.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); }

/* ================================================================== K-Gearbox additions */

/* text size control (site.js keeps the choice per browser); body text follows the root size */
html.fs-m1 { font-size: 93.75%; }
html.fs-p1 { font-size: 112.5%; }
html.fs-p2 { font-size: 125%; }

/* gear mark */
.mark .teeth { stroke-width: 3; stroke-dasharray: 2.4 2.4; }
.mark .teeth.small { stroke-width: 2.4; stroke-dasharray: 1.8 1.6; }
.mark circle { stroke-width: 1.3; }

/* rail: search box, text size, mobile menu button */
.rail-search { padding: 0.8rem 0.9rem 0; }
.rail-search input {
  width: 100%; font: inherit; font-size: 0.875rem; padding: 0.4rem 0.6rem; border-radius: var(--radius);
  border: 1px solid var(--rail-dim); background: var(--rail-hover); color: var(--rail-ink);
}
.rail-search input::placeholder { color: var(--rail-dim); }
.rail-search input:focus-visible { outline: 2px solid var(--datum); outline-offset: 0; }
.who-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.textsize { display: inline-flex; }
.textsize button { border-radius: 0; padding: 0.2rem 0.5rem; }
.textsize button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.textsize button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.textsize button + button { border-left: 0; }
.textsize button[aria-pressed="true"] { background: var(--rail-hover); font-weight: 600; }
.nav-toggle { display: none; }
.main:focus { outline: none; }
kbd { font-family: var(--mono); font-size: 0.8em; padding: 0.05rem 0.35rem; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 3px; background: var(--sheet); }

@media (max-width: 860px) {
  .rail { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .brand { grid-column: 1; }
  .nav-toggle {
    display: inline-block; grid-column: 2; grid-row: 1; margin-right: 1rem; font: inherit; font-size: 0.875rem;
    background: none; color: var(--rail-ink); border: 1px solid var(--rail-line); border-radius: var(--radius); padding: 0.3rem 0.8rem;
  }
  .rail-search { grid-column: 1 / -1; padding: 0 1rem 0.5rem; }
  .rail nav, .who { grid-column: 1 / -1; }
  /* the menu opens as a list instead of one long scrolling row: six modules do not fit a phone width */
  .rail nav { display: none; padding: 0 0.5rem 0.5rem; overflow: visible; }
  .rail.open nav { display: block; }
  .rail nav ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); white-space: normal; }
  .rail .nav-label { display: block; margin: 0.6rem 0 0.1rem 0.6rem; }
  .who { flex-wrap: wrap; }
}

/* breadcrumb and library table */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; color: var(--ink-3); margin-right: 0.4rem; }
.crumbs a[aria-current="page"] { font-weight: 600; color: var(--ink); text-decoration: none; }
table.files a.folder { font-weight: 600; }
table.files a.folder::before { content: "▸ "; color: var(--ink-3); }
.ftype { font-size: 0.75rem; padding: 0 0.35rem; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); }
ul.links { margin: 0; }
ul.links li { overflow-wrap: anywhere; }

/* forms */
fieldset.plain { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; min-width: 0; }
fieldset.plain:disabled input, fieldset.plain:disabled select, fieldset.plain:disabled textarea { background: var(--band); color: var(--ink); opacity: 1; }
details.add { margin: 0.6rem 0 1.4rem; border: 1px dashed var(--rule-2); border-radius: 4px; padding: 0.5rem 0.9rem; }
details.add summary { cursor: pointer; font-weight: 500; color: var(--link); }
details.add[open] summary { margin-bottom: 0.8rem; }
table.grid-input input { width: 6.5rem; padding: 0.25rem 0.4rem; text-align: right; }
.attachments h2 { margin-top: 0; }
.detail aside .attachments h2 { font-size: 0.9375rem; }

/* status stamps of the new modules */
.os-Planned { color: var(--draft); }
.os-InProgress { color: var(--prussian); }
.os-Achieved { color: var(--ok); }
.os-Dropped { color: var(--obsolete); text-decoration: line-through; }
.es-InUse { color: var(--ok); }
.es-Standby { color: var(--draft); }
.es-Ordered { color: var(--prussian); border-style: dashed; }
.es-Repair, .es-Calibrating { color: var(--review); }
.es-Disposed { color: var(--obsolete); text-decoration: line-through; }
.xs-Requested { color: var(--review); border-style: dashed; }
.xs-Paid { color: var(--prussian); }
.xs-Settled { color: var(--ok); }
.xs-Cancelled { color: var(--obsolete); text-decoration: line-through; }
.review { color: var(--review); }
td.done a { color: var(--ok); font-weight: 600; }
.facts .now dt { color: var(--ink); font-weight: 600; }
.facts dd small { font-size: 0.8em; color: var(--ink-2); font-weight: 500; }

/* access levels (group matrix) */
.lvl { display: inline-block; font-size: 0.75rem; padding: 0 0.45rem; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; }
.lvl-Write { color: var(--ok); font-weight: 600; }
.lvl-Read { color: var(--prussian); }
.lvl-None { color: var(--ink-3); border-style: dotted; }
table.matrix td { text-align: center; }
table.matrix tr.current th, table.matrix tr.current td { background: color-mix(in srgb, var(--datum) 9%, var(--sheet)); }

/* search results */
.toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.4rem 0 0.6rem; font-size: 0.875rem; }
ul.quick .meta { white-space: normal; text-align: right; }

/* calendar */
.month-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.6rem; }
.month-title { margin: 0 0.6rem; font-size: 1.25rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); background: var(--sheet); margin-bottom: 1rem; }
.cal-head { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); padding: 0.3rem 0.4rem; background: var(--band); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cal-day { min-height: 6.2rem; padding: 0.25rem 0.3rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cal-day.other { background: var(--paper); }
.cal-day.weekend .cal-no { color: var(--bad); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--datum); }
.cal-no { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ev { display: block; font-size: 0.72rem; line-height: 1.3; padding: 0.05rem 0.3rem; border-radius: 2px; border-left: 3px solid var(--rule-2); background: var(--band); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .ev, .agenda .ev { display: inline-block; font-size: 0.75rem; }
a.ev:hover { text-decoration: underline; }
.ev.k-ms { border-left-color: var(--datum); }
.ev.k-task { border-left-color: var(--prussian); }
.ev.k-cal { border-left-color: var(--review); }
.ev.k-out { border-left-color: var(--ok); }
.ev.k-exp { border-left-color: var(--draft); }
.ev.late { color: var(--bad); font-weight: 600; }
.agenda li.today { background: color-mix(in srgb, var(--datum) 10%, transparent); }
@media (max-width: 700px) { .cal { display: none; } }

@media print {
  .rail, .skip, .actions, .filters, details.add, .nav-toggle, form[data-confirm] { display: none !important; }
  .app { display: block; }
  .main { padding: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }
  .table-wrap { overflow: visible; border: 0; }
}

/* keep short controls and key columns readable in narrow panes */
.btn.small { white-space: nowrap; }
td.wide { min-width: 14rem; }
table.data td.num, table.data th.num { white-space: nowrap; overflow-wrap: normal; }

/* task checkpoints: table on the edit page, dots in the gantt, calendar entries */
table.data .center { text-align: center; }
table.checkpoints input[type="text"] { width: 100%; text-align: left; }
table.checkpoints input[type="date"] { width: 10.5rem; text-align: left; }
table.checkpoints th.center, table.checkpoints td.center { width: 1%; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; }
table.checkpoints input[type="checkbox"] { width: auto; padding: 0; }
.gt-task .cp { fill: var(--datum); stroke: var(--ink); stroke-width: 1; }
.gt-task .cp.done { fill: var(--ok); }
.gt-task .cp.late { fill: var(--bad); }
.legend .key.cp { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--datum); border-color: var(--ink); }
.ev.k-chk { border-left-color: var(--datum); background: color-mix(in srgb, var(--datum) 16%, var(--band)); }
.cp-next { white-space: normal; }

/* narrow screens: form grids may not grow wider than the column they sit in */
.form { grid-template-columns: minmax(0, 1fr); }
.row { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.form > *, .row > *, fieldset.plain > * { min-width: 0; }
.att-list > li > span { min-width: 0; }
.att-list form { flex: none; }
.att-add { margin-top: 1rem; display: grid; gap: 1rem; }
@media (max-width: 1050px) { .detail { grid-template-columns: minmax(0, 1fr); } }
/* screen-reader-only labels are absolutely positioned: keep them inside the scrolling table box */
.table-wrap { position: relative; }
section.attachments { margin-top: 1.8rem; }
table.checkpoints textarea { width: 100%; min-width: 12rem; min-height: 2.6rem; resize: vertical; }

/* folding sections, resizable columns, research numbers */
/* group boxes (D-35): every page section is a <details class="fold"> box with a header bar that opens and closes it */
details.fold { margin-top: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); padding: 0 1rem 0.9rem; min-width: 0; }
details.fold:not([open]) { padding-bottom: 0; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem;
  margin: 0 -1rem; padding: 0.6rem 1rem; border-radius: var(--radius); }
details.fold[open] > summary { border-bottom: 1px solid var(--rule); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0.8rem; }
details.fold > summary:hover { background: var(--band); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B8"; color: var(--ink-3); font-size: 0.9rem; transition: transform 0.15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
details.fold > summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
details.fold > section > :first-child, details.fold > summary + * { margin-top: 0; }
details.fold > section > :last-child { margin-bottom: 0; }
/* a box inside a box: lighter */
details.fold details.fold:not(.ref) { background: transparent; margin-top: 0.8rem; }
@media (max-width: 600px) {
  details.fold { padding: 0 0.7rem 0.7rem; }
  details.fold > summary { margin: 0 -0.7rem; padding: 0.55rem 0.7rem; }
}
/* page toolbar added by site.js when a page has two or more boxes */
.fold-all { display: flex; justify-content: flex-end; gap: 0.4rem; margin: 0.6rem 0 0.3rem; }
/* small inline folds keep the plain look: reference lists, folds in table cells */
details.fold.ref, table details.fold { border: 0; background: transparent; padding: 0; }
details.fold.ref > summary, table details.fold > summary { margin: 0; padding: 0; border: 0; }
details.fold.ref > summary:hover, table details.fold > summary:hover { background: transparent; }
details.fold.ref { margin-top: 0.6rem; }
details.fold.ref > summary { font-size: 0.875rem; color: var(--link); }
details.fold.ref .table-wrap { margin-top: 0.4rem; max-height: 22rem; overflow: auto; }
.table-tools { margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) { details.fold > summary::before { transition: none; } }

/* the task title gets most of the room; after a resize the browser widths are the user's */
table.data th.c-task { min-width: 22rem; width: 34%; }
table.data th.c-title { min-width: 16rem; }
table.data th.c-no { width: 6rem; }
table.data th.c-date { width: 7.5rem; }
table.data th.c-state { width: 5rem; }
table.data.sized { table-layout: fixed; min-width: 0; }
table.data.sized th { min-width: 0; white-space: normal; }
table.data.sized td { overflow-wrap: anywhere; }
table.data th { position: relative; }
.col-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 1; touch-action: none; }
.col-grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 1px; background: var(--rule-2); }
.col-grip:hover::after, .col-grip:focus-visible::after { background: var(--link); width: 3px; left: 3px; }
.col-grip:focus-visible { outline: none; }
table.data tr.done td { color: var(--ink-3); }
td.pre { white-space: pre-wrap; }
table.research textarea, table.research input[type="text"], table.research select { width: 100%; }
table.research textarea { min-height: 2.6rem; resize: vertical; }
.req-check { margin: 0.35rem 0 0; font-size: 0.875rem; }
.req-check li { padding: 0.1rem 0; }
.req-check li.ok::before { content: "\2713  "; color: var(--ok); font-weight: 700; }
.req-check li.bad { color: var(--bad); font-weight: 600; }
.req-check li.bad::before { content: "!  "; }
table.research-ref tr.picked td { background: color-mix(in srgb, var(--ok) 14%, transparent); }

/* code items: git repositories */
.repo-cell .repo { display: block; overflow-wrap: anywhere; }
td.repo-url { overflow-wrap: anywhere; }
code.copyable { user-select: all; overflow-wrap: anywhere; }
section.repos { margin-top: 1.4rem; }

/* dashboard: compact top band, three first-screen lists, folds below */
.dash-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 1.4rem; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); margin: 0 0 1.1rem; }
.dash-top .gate-line { flex: 1 1 22rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; padding: 0.45rem 0; margin: 0; }
.dash-top .gate-line .count { font-size: 1.6rem; }
.dash-top .gate-line .what { font-size: 0.95rem; }
.dash-top .gate-line .criteria { flex-basis: auto; font-size: 0.8125rem; }
.facts.compact { flex: 2 1 30rem; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); border: 0; margin: 0; }
.facts.compact > div { padding: 0.4rem 0.7rem; }
.facts.compact > div:first-child { padding-left: 0.7rem; }
.facts.compact dt { font-size: 0.75rem; line-height: 1.3; }
.facts.compact dt small { color: var(--ink-3); }
.facts.compact dd { font-size: 1.1rem; }
.dash-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.8rem 1rem; align-items: start; }
.dash-main > details.fold { margin-top: 0; }
.dash-main > section > h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.dash-main ul.list > li { padding: 0.35rem 0; font-size: 0.875rem; }
.dash-main .empty { padding: 0.6rem 0.1rem; }
.dash-main .more, .dash-folds .more { margin: 0.3rem 0 0; font-size: 0.8125rem; }
.dash-folds { margin-top: 0.6rem; }
.dash-folds { display: grid; gap: 0.6rem; }
.dash-folds details.fold { margin-top: 0; }
.dash-folds details.fold > summary h2 { font-size: 1rem; margin: 0; }
.dash-folds details.fold[open] > summary { margin-bottom: 0.5rem; }
.dash-folds h3 { font-size: 0.9375rem; margin: 0.9rem 0 0.2rem; }
@media (max-width: 700px) { .dash-top .gate-line .criteria { display: none; } }

/* messages (의견) */
.who-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.who a.msg-link { font-size: 0.8125rem; font-weight: 500; color: var(--rail-ink); white-space: nowrap; }
.msg-count { display: inline-block; font-variant-numeric: tabular-nums; padding: 0 0.35rem; border: 1px solid var(--rail-line); border-radius: 2px; color: var(--rail-dim); }
.msg-count.waiting { color: var(--rail-ink); border-color: currentColor; font-weight: 600; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; border-bottom: 1px solid var(--rule-2); margin: 0 0 0.9rem; }
nav.tabs a { padding: 0.35rem 0; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--prussian); }
table.messages tr.unread td { font-weight: 600; }
.stamp.msg-wait { color: var(--review); }
.stamp.msg-read { color: var(--ink-3); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 1rem 0; padding: 0.9rem 1rem; border-left: 3px solid var(--rule-2); background: var(--band); max-width: 52rem; }

/* link to the research output (gearbox.kierwind.kr) at the top of every page */
.site-banner { margin: 0 0 0.9rem; }
.site-banner a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; padding: 0.45rem 0.9rem; background: var(--rail-bg); color: var(--rail-ink);
  border-left: 4px solid var(--rail-dim); border-radius: var(--radius); text-decoration: none; font-size: 0.875rem; }
.site-banner a:hover b { text-decoration: underline; }
.site-banner .url { color: var(--rail-dim); }

/* message conversations */
ol.thread { list-style: none; margin: 0.6rem 0 0; padding: 0; max-width: 52rem; }
ol.thread > li { padding: 0.7rem 0 0.4rem; border-top: 1px solid var(--rule); }
ol.thread > li.reply { margin-left: 1.4rem; padding-left: 0.9rem; border-left: 2px solid var(--rule-2); border-top: 0; }
ol.thread .msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0; }
ol.thread .msg-text { margin: 0.5rem 0; }
ol.thread section.attachments { margin-top: 0.4rem; }
ol.thread section.attachments h2 { font-size: 0.875rem; }
.reply-form { max-width: 52rem; margin-top: 1rem; border-top: 1px solid var(--rule-2); padding-top: 0.8rem; }
@media (max-width: 700px) { ol.thread > li.reply { margin-left: 0.4rem; } }

/* attachments: edit and replace a file; task files */
.att-tools { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; justify-content: flex-end; }
details.att-edit > summary { cursor: pointer; font-size: 0.8125rem; color: var(--link); padding: 0.15rem 0; }
details.att-edit[open] { flex-basis: 100%; }
details.att-edit form { margin: 0.4rem 0; padding: 0.5rem 0.7rem; background: var(--band); border-radius: var(--radius); max-width: 26rem; }
details.att-edit .field { margin-bottom: 0.4rem; }
.tag.cp-tag { margin-left: 0.3rem; }
.tag.admin-only { margin-left: 0.3rem; border: 1px solid var(--rule-2); }
details.task-files-group { border-top: 1px solid var(--rule); padding-top: 0.4rem; }
details.task-files-group > summary h2 { font-size: 1.05rem; }
details.task-files-group section.attachments h2 { font-size: 0.95rem; }

/* budget: ERP budget list */
.project-no { display: inline-block; font-family: var(--mono); font-size: 0.8125rem; padding: 0 0.4rem; border: 1px solid var(--rule-2); border-radius: 2px; margin-right: 0.3rem; color: var(--ink); }
ul.erp-used { margin: 0 0 0.6rem; font-size: 0.875rem; }
ul.erp-used li { padding: 0.15rem 0; }
table.erp-rows tr.cat th, table.erp-rows tr.cat td { font-weight: 600; }
table.erp-rows tr.total th, table.erp-rows tr.total td { font-weight: 700; border-bottom: 2px solid var(--rule-2); }
section.erp-upload { margin-top: 1.6rem; padding-top: 0.4rem; border-top: 1px solid var(--rule-2); }
details.fold > section.erp-upload { margin-top: 0; padding-top: 0; border-top: 0; }
form.note-form { display: flex; gap: 0.3rem; align-items: center; }
form.note-form input { min-width: 10rem; padding: 0.25rem 0.4rem; }

/* file search */
p.group-counts { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 0 0 1rem; font-size: 0.8125rem; }
p.group-counts a { padding: 0.15rem 0.5rem; border: 1px solid var(--rule-2); border-radius: var(--radius); text-decoration: none; color: var(--ink-2); white-space: nowrap; }
p.group-counts a[aria-current="page"] { color: var(--ink); border-color: var(--prussian); font-weight: 600; }

/* task form: files */
ul.task-form-files { margin: 0 0 0.6rem; }
ul.task-form-files > li { align-items: center; }

/* calendar: done; screen rotation */
.ev.done, .ev.k-chk.done { background: var(--rule); color: var(--ink-3); border-left-color: var(--ink-3); text-decoration: line-through; font-weight: 400; }
.agenda .done > a { color: var(--ink-3); text-decoration: line-through; }
.rotate-toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; color: var(--rail-ink); }

/* paged lists; form folds */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0.4rem 0 1rem; font-size: 0.9rem; }
.pager select { width: auto; }
.pager-info { color: var(--ink-3); }
details.form-fold > fieldset { margin-top: 0.4rem; min-width: 0; }

/* research notes */
.note-body h3 { font-size: 1rem; margin: 1.1rem 0 0.35rem; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 52rem; line-height: 1.6; }
details.note-version { margin: 0.5rem 0; padding: 0.4rem 0.8rem; border-left: 3px solid var(--rule-2); }
details.note-version > summary { cursor: pointer; font-size: 0.9rem; }
.note-toc { margin: 0 0 1.5rem; padding-left: 1.4rem; }
article.note-report { border-top: 1px solid var(--rule-2); padding-top: 0.6rem; margin-top: 1.4rem; }
@media print {
  [data-print], .note-toc { display: none !important; }
  article.note-report { break-inside: auto; }
  article.note-report + article.note-report { break-before: page; }
  .note-text { max-width: none; }
}

/* research-note draft import (D-23): a date input per row, the draft text folded under its title */
table.note-import input[type="date"] { width: 10.5rem; }
table.note-import details.fold { margin-top: 0; }
table.note-import p.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.4rem 0; max-width: 52rem; }
ul.field-errors { color: var(--bad); margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; }

/* accessibility (D-28): focus ring in the dark menu column, larger table checkboxes, focusable scroll areas */
.rail :focus-visible, .rail-search input:focus-visible { outline-color: var(--datum); }
table.data input[type="checkbox"], table.data input[type="radio"], table.checkpoints input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
.table-wrap:focus-visible, .chart-frame:focus-visible { outline-offset: -2px; }
.fold-links { margin: 0.2rem 0 0.4rem; }
.cp-actions { margin: 0.6rem 0 0.2rem; gap: 0.5rem; flex-wrap: wrap; }
.cp-note-form textarea { width: 100%; max-width: 40rem; }
.cp-note-form .actions { margin-top: 0.4rem; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.cp-note-form .hint { margin: 0; }
.cp-filter-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; }
section.attachments#cp-file-list { margin-top: 0.4rem; }
#cp-file-list + .more { margin-top: 1rem; }

/* library management (D-30) */
details.lib-manage .lib-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem 1.6rem; }
details.lib-manage .lib-forms .form { align-content: start; gap: 0.6rem; }
.lib-file-manage .form { gap: 0.5rem; }
.lib-file-manage .form + .form { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.lib-file-manage input[type="text"] { width: 100%; }

/* fingerprint sign-in (D-31) */
.passkey-login { margin-top: 1.2rem; }
.passkey-login .or { display: flex; align-items: center; gap: 0.8rem; color: var(--ink-3); font-size: 0.9rem; margin: 0 0 1rem; }
.passkey-login .or::before, .passkey-login .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.passkey-login .passkey-btn { width: 100%; min-height: 2.9rem; }
.passkey-login .alert { margin-top: 0.8rem; }
.passkey-login .hint { margin-top: 0.7rem; }
ul.passkeys li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
ul.passkeys li .meta { flex: 1 1 14rem; }
/* 내 구글 캘린더 (D-38): imported events are the viewer's own, drawn with a dashed mark */
.ev.k-gcal { border-left-style: dashed; border-left-color: var(--ink-3); background: transparent; }
ul.gcal-feeds > li { flex-wrap: wrap; align-items: flex-start; }
ul.gcal-feeds > li > div:first-child { flex: 1 1 18rem; min-width: 0; }
.gcal-url { overflow-wrap: anywhere; }
.gcal-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
details.gcal-edit { flex: 1 1 100%; margin: 0.2rem 0 0; }

/* checkpoint file QR codes (D-34) */
ul.qr-list { display: grid; gap: 1rem; margin: 0.6rem 0 1rem; }
.qr-card { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
.qr-card.inactive .qr-img { opacity: 0.35; }
.qr-img svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.qr-title { margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
.tag.qr-login { border: 1px solid var(--rule-2); }
.tag.qr-public { background: var(--review); color: var(--paper); }
.tag.qr-off { background: var(--bad); color: var(--paper); }
.qr-url { overflow-wrap: anywhere; font-size: 0.8125rem; }
.qr-actions { gap: 0.4rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.qr-edit, .qr-new { margin-top: 0.6rem; }
.qr-edit > summary, .qr-new > summary { cursor: pointer; color: var(--link); font-weight: 600; }
.qr-new > summary { font-size: 1rem; }
.qr-form { margin-top: 0.6rem; max-width: 46rem; }
fieldset.qr-choice { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.8rem; display: grid; gap: 0.4rem; min-width: 0; }
fieldset.qr-choice legend { font-weight: 600; padding: 0 0.3rem; }
ul.qr-files { display: grid; gap: 0.2rem; margin: 0.2rem 0 0 1.6rem; }
ul.share-files li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; }
ul.share-files .share-dl { font-weight: 600; }
@media (max-width: 600px) {
  .qr-card { grid-template-columns: minmax(0, 1fr); }
  .qr-img { max-width: 14rem; }
}
@media print {
  .qr-actions, .qr-edit, .qr-new { display: none; }
  .qr-card { break-inside: avoid; }
}

/* references (D-37) */
td.ref-opens { min-width: 9rem; }
table.refs td:nth-child(2) { min-width: 8rem; overflow-wrap: anywhere; }
table.refs td:nth-child(3) { min-width: 14rem; }
table.refs td:nth-child(5) { min-width: 7rem; }
td.ref-opens > div + div { margin-top: 0.25rem; }
a.ref-open { font-weight: 600; }
.refs-detail { margin: 0.6rem 0; }
.refs-search .actions { margin-top: 0.6rem; }
/* D-40: the owner's marks on Google events */
.ev.hid { opacity: 0.55; border-left-style: dotted; }
.ev.memo::after { content: " ✎"; color: var(--ink-3); }
/* D-42: busy days show their total and the marks of events not drawn */
.cal-count { float: right; font-size: 0.7rem; color: var(--ink-3); }
.cal-more { font-size: 0.72rem; color: var(--ink-2); text-decoration: none; line-height: 1.25; }
.cal-more:hover { text-decoration: underline; }
.cal-more .m-done { color: var(--ok); }
.agenda li[id] { scroll-margin-top: 4rem; }

/* ------------------------------------------------------------------ papers (main page cards) */
.head-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; }
ul.paper-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); align-items: start; }
.paper-card { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent); scroll-margin-top: 1rem; }
.paper-card:target { outline: 2px solid var(--datum); outline-offset: 2px; }
/* upper half: the paper itself */
a.paper-face { display: grid; gap: 0.35rem; padding: 0.9rem 0.9rem 1rem; color: inherit; text-decoration: none; }
a.paper-face:hover .paper-title, a.paper-face:focus-visible .paper-title { color: var(--link); text-decoration: underline; }
.paper-snap { display: block; aspect-ratio: 210 / 150; overflow: hidden; border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; }
.paper-snap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.paper-snap-empty { display: grid; place-items: center; height: 100%; font-family: var(--mono); font-size: 1.6rem;
  color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--band) 0 10px, var(--sheet) 10px 20px); }
.paper-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; margin-top: 0.2rem; font-size: 0.8125rem; }
.paper-code { font-family: var(--mono); font-weight: 600; color: var(--prussian); }
.paper-journal { color: var(--ink-2); }
.paper-title { font-weight: 600; line-height: 1.35; }
.paper-stat { color: var(--ink-2); }
/* lower half: memos, set apart by a datum line and a darker band */
.paper-memos { border-top: 3px solid var(--datum); background: var(--band); padding: 0.7rem 0.9rem 0.9rem; display: grid; gap: 0.5rem; }
.memo-head { margin: 0; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ink-2); }
.memo-empty { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
ul.memo-list, ul.memo-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.memo { background: var(--sheet); border: 1px solid var(--rule); border-left: 3px solid var(--rule-2); border-radius: 4px; padding: 0.45rem 0.6rem; }
.memo.pinned { border-left-color: var(--datum); }
.memo-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.45; }
.paper-memos .memo-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.memo-meta { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--ink-3); }
form.memo-quick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; align-items: end; }
form.memo-quick textarea { min-height: 2.6rem; resize: vertical; font-size: 0.8125rem; }

/* ------------------------------------------------------------------ paper page */
section.block { margin: 1.6rem 0; }
section.block > h2 { border-bottom: 2px solid var(--rule); padding-bottom: 0.3rem; scroll-margin-top: 1rem; }
table.docs td.actions { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-start; }
details.versions { margin-top: 0.3rem; font-size: 0.8125rem; }
details.versions ol { margin: 0.3rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.15rem; }
details.upload { display: inline-block; }
details.upload > summary { list-style: none; cursor: pointer; }
details.upload > summary::-webkit-details-marker { display: none; }
details.upload[open] { display: block; width: 100%; }
.form.compact { gap: 0.4rem; margin-top: 0.4rem; max-width: 30rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0.5rem; }
.tabs a { padding: 0.3rem 0.8rem; border: 1px solid var(--rule-2); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 0.875rem; }
.tabs a[aria-selected="true"] { background: var(--prussian); border-color: var(--prussian); color: var(--on-prussian); }
iframe.doc-frame { display: block; width: 100%; height: 80vh; min-height: 30rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
ol.refs { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.35rem; }
ol.refs > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.2rem 0.5rem; padding: 0.45rem 0.6rem;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; scroll-margin-top: 1rem; }
.ref-no { font-family: var(--mono); color: var(--prussian); }
.ref-text { overflow-wrap: anywhere; font-size: 0.875rem; }
.ref-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.3rem; }
form.memo-new { max-width: 48rem; margin-bottom: 0.8rem; }
.memo-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
/* blind review table */
.review-sum { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.6rem; }
.chip { padding: 0.15rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule-2); font-size: 0.8125rem; text-decoration: none; color: var(--ink-2); background: var(--sheet); }
.chip.on { background: var(--prussian); border-color: var(--prussian); color: var(--on-prussian); }
.chip.st-new { border-left: 4px solid var(--bad); }
.chip.st-prog { border-left: 4px solid var(--review); }
.chip.st-done { border-left: 4px solid var(--ok); }
table.reviews td { vertical-align: top; }
table.reviews tr { scroll-margin-top: 1rem; }
table.reviews tr > td:first-child { min-width: 9rem; border-left: 4px solid transparent; }
table.reviews tr.st-new > td:first-child { border-left-color: var(--bad); }
table.reviews tr.st-prog > td:first-child { border-left-color: var(--review); }
table.reviews tr.st-done > td:first-child { border-left-color: var(--ok); }
table.reviews tr:target > td { background: color-mix(in srgb, var(--datum) 14%, var(--sheet)); }
table.reviews td:nth-child(2), table.reviews td:nth-child(3) { min-width: 16rem; }
table.reviews td.reply { min-width: 18rem; }
.cell-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.45; max-height: 18rem; overflow-y: auto; }
td.reply textarea { width: 100%; min-height: 5rem; font-size: 0.875rem; }
.reply-row { display: flex; gap: 0.4rem; align-items: center; }
@media (max-width: 600px) {
  ul.paper-grid { grid-template-columns: minmax(0, 1fr); }
  iframe.doc-frame { height: 70vh; }
}
@media print {
  .paper-memos form, .memo-tools, details.upload, td.reply form .reply-row { display: none; }
}