/* Design system — zinc grayscale, near-black primary, one muted cyan accent for links/focus/active,
   severity colours identical to the PDF, tables as the primary UI, white cards on a tinted page.
   Class names from Phase 0 (.muted .dot .sev .num .filters .actions dl.meta .fields label.check
   .button .primary button.link fieldset .errorlist form.narrow) stay valid. */
:root {
  --bg: #ececef; --surface: #ffffff; --surface-2: #f6f6f8; --surface-3: #ebebee;
  --border: #d6d6dc; --border-strong: #b9b9c2;
  --text: #111114; --text-2: #2a2a30; --muted: #5c5c66; --faint: #8f8f99;
  --primary: #18181b; --primary-hover: #27272a;
  --accent: #0e7490; --accent-hover: #155e75; --accent-tint: #ecfeff; --accent-ring: rgba(14, 116, 144, .25);
  --side-bg: #09090b; --side-bg-2: #18181b; --side-text: #a1a1aa; --side-muted: #52525b; --side-active: #fafafa; --side-mark: #22d3ee; --side-line: rgba(255,255,255,.08); --side-mark-text: #09090b;
  --ok: #3f6212; --ok-tint: #eef4e4; --warn: #b45309; --warn-tint: #fbf1e3; --bad: #8b1a1a; --bad-tint: #f7e6e6;
  --sev-critical: #8b1a1a; --sev-high: #c2410c; --sev-medium: #b45309; --sev-low: #3f6212; --sev-info: #525252;
  --sev-critical-tint: rgba(139, 26, 26, .1); --sev-high-tint: rgba(194, 65, 12, .1); --sev-medium-tint: rgba(180, 83, 9, .1);
  --sev-low-tint: rgba(63, 98, 18, .1); --sev-info-tint: rgba(82, 82, 82, .1);
  --radius: 6px; --radius-sm: 4px; --shadow: 0 1px 2px rgba(9, 9, 11, .04);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --side: 232px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--text); background: var(--bg); }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 16px; }
h2 { font-size: 14px; font-weight: 600; margin: 28px 0 10px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
h4 { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 10px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.overdue { color: var(--bad); font-weight: 500; }
.mono, code, pre { font-family: var(--mono); font-size: 12px; }
.mono { letter-spacing: .01em; }
code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
small { font-size: 12px; }
::selection { background: light-dark(#b9d8f8, color-mix(in srgb, #b9d8f8 12%, var(--surface))); color: light-dark(#153451, color-mix(in srgb, #153451 65%, white)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- sidebar ---------- */
nav.side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side); display: flex; flex-direction: column;
  background: var(--side-bg); color: var(--side-text); padding: 0 0 12px; overflow-y: auto; font-size: 13px; }
nav.side .brand { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; margin-bottom: 8px; color: var(--side-active); font-weight: 600; font-size: 14px; letter-spacing: -.01em; border-bottom: 1px solid var(--side-line); }
nav.side .brand:hover { text-decoration: none; }
nav.side .mark { width: 24px; height: 24px; border-radius: 5px; background: var(--side-mark); color: var(--side-mark-text); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
nav.side .brand .logo { width: 24px; height: 24px; flex: none; }
nav.side .brand .brand-dot { color: var(--side-mark); }
nav.side .group { margin: 4px 0; padding: 0 8px; }
nav.side .label { display: block; padding: 10px 10px 4px; color: var(--side-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
nav.side .group a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; border-radius: var(--radius-sm); color: var(--side-text); position: relative; }
nav.side .group a i, nav.side .group a svg { width: 16px; height: 16px; flex: none; color: var(--side-muted); }
nav.side .group a:hover { background: var(--side-bg-2); text-decoration: none; color: var(--side-active); }
nav.side .group a.active { background: var(--side-bg-2); color: var(--side-active); font-weight: 500; }
nav.side .group a.active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--side-mark); }
nav.side .group a.active i, nav.side .group a.active svg { color: var(--side-active); }
nav.side .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 12px; }
/* Settings unfolds in place; the account block below never scrolls away. */
nav.side details.settings > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; border-radius: var(--radius-sm); color: var(--side-text); }
nav.side details.settings > summary::-webkit-details-marker { display: none; }
nav.side details.settings > summary::before { content: none; }
nav.side details.settings > summary:hover { background: var(--side-bg-2); color: var(--side-active); }
nav.side details.settings > summary i, nav.side details.settings > summary svg { width: 16px; height: 16px; flex: none; color: var(--side-muted); }
nav.side details.settings > summary .chev { margin-left: auto; transition: transform .15s; }
nav.side details.settings[open] > summary .chev { transform: rotate(180deg); }
nav.side details.settings[open] > summary { color: var(--side-active); }
nav.side details.settings > a { padding: 6px 10px 6px 36px; font-size: 13px; }
.settings-tabs { margin: 0 0 20px; align-items: center; }
.settings-tabs .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-right: 12px; }
nav.side .foot { margin-top: auto; padding: 12px 16px 0; border-top: 1px solid var(--side-line); display: flex; align-items: center; gap: 10px; }
nav.side .foot .who { min-width: 0; flex: 1; line-height: 1.25; }
nav.side .foot details { flex: 1; min-width: 0; }
nav.side .foot details > summary { list-style: none; cursor: pointer; }
nav.side .foot details > summary::-webkit-details-marker { display: none; }
nav.side .foot details > summary::before { content: none; }
nav.side .foot details > .group { margin: 6px 0 0; padding: 0; }
nav.side .foot details > .group form { margin: 0; }
nav.side .foot .who b { display: block; font-weight: 500; color: var(--side-active); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.side .foot .who span { font-size: 12px; color: var(--side-muted); }
nav.side .foot form { margin: 0; }
nav.side .foot button.link { color: var(--side-muted); font-size: 12px; }
nav.side .foot button.link:hover { color: var(--side-active); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--side-bg-2); border: 1px solid var(--side-line); color: var(--side-active); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---------- main ---------- */
main { margin-left: var(--side); padding: 40px 32px 48px; max-width: calc(var(--side) + 1280px); }
body.bare main { margin: 0 auto; max-width: 400px; padding-top: 12vh; }
.crumbs { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.page-head { display: table; width: 100%; margin: 0 0 20px; }
.page-head > * { display: table-cell; vertical-align: top; }
.page-head > .actions, .page-head > form, .page-head > a.btn { display: table-cell; width: 1%; white-space: nowrap; text-align: right; padding-left: 16px; margin: 0; }
.page-head > .actions > *, .page-head > form > * { margin-left: 8px; vertical-align: middle; }
.page-head > form { display: table-cell; }
.page-head > form label.check { display: inline; }
.page-head h1 { margin: 0; }
.page-head h1 .sev-chip, .page-head h1 .chip { vertical-align: middle; margin-right: 8px; position: relative; top: -2px; }
.page-head .sub { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.page-head .actions, .page-head .btns { margin: 0; }
.page-head > .actions h1 { margin: 0; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.actions h1 { margin: 0 auto 0 0; }
.actions select, .actions input:not([type=checkbox]) { width: auto; min-width: 140px; height: 32px; font-size: 13px; }
.actions .sep { color: var(--border-strong); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input:not([type=checkbox]):not([type=radio]), .toolbar select, .filters.inline input, .filters.inline select { width: auto; min-width: 140px; height: 32px; font-size: 13px; }
.toolbar label.check span { color: var(--muted); font-size: 13px; }

/* link filters → segmented pills */
.filters { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.filters a { padding: 4px 10px; border-radius: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.filters a:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
.filters a.active { background: var(--primary); color: #fff; }
.filters.inline { gap: 8px; }
.filters.inline button { height: 32px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 20px; }
.tabs a { padding: 8px 12px; color: var(--muted); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--text); border-bottom-color: var(--text); }

.grid-2, .cols { display: flex; gap: 20px; align-items: flex-start; }
.grid-2 > * { flex: 1 1 0; min-width: 0; }
.grid-2.stacked { flex-direction: column; align-items: stretch; }   /* team tab: our side above the client's */
.grid-2.client-first > section:first-child { order: 1; }   /* the portal reads its own side first */
.cols > :first-child { flex: 1 1 0; min-width: 0; }
.cols > :last-child { flex: 0 0 320px; min-width: 0; }
@media (max-width: 1000px) { .grid-2, .cols { flex-direction: column; } .grid-2 > *, .cols > * { flex: 1 1 auto; width: 100%; } }
.stack > * + * { margin-top: 20px; }

/* ---------- cards ---------- */
.card, main > table, main > form > table, .grid-2 > section, .cols > section, .cols > aside {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 20px; }
.card, .grid-2 > section, .cols > section, .cols > aside { padding: 0; }
.card > :not(table):not(:where(.workspace-table-scroll, .client-table-scroll)):not(.gantt):not(.card-head):not(.report-preview) { margin-left: 20px; margin-right: 20px; }
.card > :first-child:not(table):not(:where(.workspace-table-scroll, .client-table-scroll)):not(.gantt):not(.card-head) { margin-top: 16px; }
.card > input[type=hidden]:first-child + :not(table):not(:where(.workspace-table-scroll, .client-table-scroll)):not(.gantt):not(.card-head) { margin-top: 16px; }   /* form.card: csrf token is the real first child */
.card > :last-child:not(table):not(:where(.workspace-table-scroll, .client-table-scroll)):not(.gantt) { margin-bottom: 16px; }
.card > h2, .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important;
  padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.card > h2 + :not(table):not(:where(.workspace-table-scroll, .client-table-scroll)):not(.gantt), .card-head + :not(table):not(:where(.workspace-table-scroll, .client-table-scroll)):not(.gantt) { margin-top: 16px; }
.card-head a, .card > h2 a, .card > h2 .muted { font-size: 12px; font-weight: 500; }
.card > h2 .muted { font-weight: 400; }
.card > p:last-child, .card > form:last-child { margin-bottom: 16px; }
.card .empty { padding: 28px 20px; }
.grid-2 > section > h2, .cols > section > h2, .cols > aside > h2 { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.grid-2 > section > :not(table):not(h2), .cols > section > :not(table):not(h2), .cols > aside > :not(table):not(h2) { margin-left: 20px; margin-right: 20px; }
.grid-2 > section > h2 ~ h2, .cols > section > h2 ~ h2 { border-top: 1px solid var(--border); }
.grid-2 > section > :last-child:not(table), .cols > section > :last-child:not(table), .cols > aside > :last-child:not(table) { margin-bottom: 16px; }
.grid-2 > section > h2 + :not(table), .cols > section > h2 + :not(table), .cols > aside > h2 + :not(table) { margin-top: 14px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
thead th { font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
thead th:first-child { border-top-left-radius: var(--radius); }
thead th:last-child { border-top-right-radius: var(--radius); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tbody th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; background: var(--surface-2); padding-top: 8px; padding-bottom: 8px; }
tbody tr:hover th { background: var(--surface-2); }
td a { color: var(--accent); font-weight: 500; }
td.mono a { font-weight: 400; }
td a:hover { color: var(--accent-hover); text-decoration: underline; }
td.muted a { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.empty, .empty { color: var(--muted); text-align: center; padding: 28px 20px; font-size: 13px; }
table.compact th, table.compact td { padding: 6px 12px; }
table + h2, table + .actions, table + p { margin-top: 20px; }
td form, th form { display: inline; }
td .chip, td .sev-chip { vertical-align: middle; }

/* ---------- chips, dots, severity ---------- */
.dot, .sev { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; }
.sev-4, .sev-critical { background: var(--sev-critical); } .sev-3, .sev-high { background: var(--sev-high); }
.sev-2, .sev-medium { background: var(--sev-medium); } .sev-1, .sev-low { background: var(--sev-low); } .sev-0, .sev-info { background: var(--sev-info); }
.chip { display: inline-block; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 20px;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.chip .dot { margin: 0 6px 0 0; width: 7px; height: 7px; vertical-align: 1px; }
.chip.ok { background: var(--ok-tint); color: var(--ok); } .chip.warn { background: var(--warn-tint); color: var(--warn); } .chip.bad { background: var(--bad-tint); color: var(--bad); }
.chip.accent { background: var(--accent-tint); color: var(--accent); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list .chip { margin: 0; }
.sev-chip { display: inline-block; height: 22px; padding: 0 8px 0 7px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 22px; vertical-align: middle; }
.sev-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: currentColor; margin-right: 6px; vertical-align: 0; }
.sev-chip.sev-4 { background: var(--sev-critical-tint); color: light-dark(var(--sev-critical), color-mix(in srgb, var(--sev-critical) 55%, white)); }
.sev-chip.sev-3 { background: var(--sev-high-tint); color: light-dark(var(--sev-high), color-mix(in srgb, var(--sev-high) 55%, white)); }
.sev-chip.sev-2 { background: var(--sev-medium-tint); color: light-dark(var(--sev-medium), color-mix(in srgb, var(--sev-medium) 55%, white)); }
.sev-chip.sev-1 { background: var(--sev-low-tint); color: light-dark(var(--sev-low), color-mix(in srgb, var(--sev-low) 55%, white)); }
.sev-chip.sev-0 { background: var(--sev-info-tint); color: light-dark(var(--sev-info), color-mix(in srgb, var(--sev-info) 55%, white)); }
h1 .sev-chip { height: 24px; line-height: 24px; font-size: 12px; }
h1 .sev { width: 12px; height: 12px; margin-right: 10px; vertical-align: 0; }

/* status chips: --c is the status colour; tint is derived so any colour from Settings works */
.chip.status { --c: #71717a; background: color-mix(in srgb, var(--c) 11%, light-dark(white, var(--surface))); color: light-dark(color-mix(in srgb, var(--c) 78%, black), color-mix(in srgb, var(--c) 55%, white));
  border-color: color-mix(in srgb, var(--c) 28%, light-dark(white, var(--border))); padding-left: 7px; }
.chip.status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
label.status select, .quick label.status select, form.status select { border-left: 3px solid var(--c); padding-left: 8px; }
.quick select[name=state] { padding-left: 8px; }

/* ---------- KPIs ---------- */
.kpis { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; }
.kpis > div { flex: 1 1 140px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.kpis b, .kpis strong { display: block; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpis span { color: var(--muted); font-size: 12px; font-weight: 500; }
.kpis small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.kpis small .sev { width: 8px; height: 8px; margin-right: 4px; }
.kpis small .sev + * { margin-right: 8px; }
.kpis .trend { font-size: 12px; color: var(--muted); }

/* ---------- charts, progress ---------- */
.chart { margin: 12px 0; }
.chart svg { max-width: 100%; height: auto; display: block; }
.progress { display: flex; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 120px; }
.progress > i, .progress > div { display: block; height: 100%; background: var(--accent); }
.progress .ok { background: var(--sev-low); } .progress .bad { background: var(--sev-critical); } .progress .na { background: var(--faint); }

/* ---------- messages ---------- */
.msg, .messages li { list-style: none; padding: 10px 14px; margin: 0 0 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  background: var(--accent-tint); color: var(--accent); border: 1px solid transparent; }
.messages { padding: 0; margin: 0; }
.msg.success, .messages li.success { background: var(--ok-tint); color: var(--ok); }
.msg.error, .messages li.error { background: var(--bad-tint); color: var(--bad); }
.msg.warning, .messages li.warning { background: var(--warn-tint); color: var(--warn); }

/* ---------- buttons ---------- */
button, .button, .btn { font: inherit; font-size: 13px; font-weight: 500; color: var(--text); height: 32px; padding: 0 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; display: inline-block; white-space: nowrap; vertical-align: middle;
  box-shadow: var(--shadow); text-decoration: none; line-height: 30px; transition: background .12s, border-color .12s; }
button:hover, .button:hover, .btn:hover { background: var(--surface-2); border-color: light-dark(#c3c7cf, var(--border-strong)); text-decoration: none; color: var(--text); }
.primary, button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.primary:hover, button.primary:hover, .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn.danger, button.danger { color: var(--bad); }
.btn.danger:hover, button.danger:hover { background: var(--bad-tint); border-color: var(--bad); }
.btn.ghost, button.ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--text-2); }
.btn.ghost:hover, button.ghost:hover { background: var(--surface-3); }
.btn[aria-disabled=true] { opacity: .4; pointer-events: none; }
.btn i, .btn svg, button i, button svg { color: currentColor; }
.btn-sm, button.btn-sm, .btn.btn-sm { height: 28px; line-height: 26px; padding: 0 10px; font-size: 12px; }
button.link { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-weight: 500; font-size: inherit; display: inline; }
button.link:hover { text-decoration: underline; background: none; }
button.link.danger { color: var(--bad); }
.btn i, .btn svg, button i, button svg { width: 14px; height: 14px; vertical-align: -3px; margin-right: 4px; }

/* ---------- forms ---------- */
input, select, textarea { font: inherit; color: inherit; }
input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=hidden]), select, textarea {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px;
  transition: border-color .12s, box-shadow .12s; }
select { padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; -webkit-appearance: none; appearance: none; }
select[multiple] { height: auto; background-image: none; padding: 6px; }
textarea { height: auto; min-height: 120px; padding: 8px 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
input[type=color] { height: 36px; width: 56px; padding: 2px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
input[type=file] { font-size: 13px; }
input::placeholder { color: var(--faint); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
label > span { font-size: 12px; font-weight: 500; color: var(--text-2); }
label > small { font-size: 12px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; }
.fields > label.switch { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.fields > label.switch > span { order: 1; } .fields > label.switch > i { order: 0; } .fields > label.switch > small, .fields > label.switch > .errorlist { order: 2; flex-basis: 100%; }
label.inline { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
label.check > span { order: 2; color: var(--text); font-weight: 400; font-size: 13px; }
.fields { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.fields > * { flex: 1 1 calc(50% - 10px); min-width: 0; }
.fields > label:has(textarea), .fields > .full, .fields > .cvss, .fields > p { flex-basis: 100%; }
/* Supplier name only matters for a scoped portal role (RoleSelect marks those); hide it otherwise. */
form:not(:has(option[data-scoped]:checked)) label:has([name="supplier"]) { display: none; }
form.narrow { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
form.narrow > * { min-width: 0; }
form.narrow > input[type=hidden] { display: none; }
form.narrow .fields > * { flex-basis: 100%; }
form.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.inline input:not([type=checkbox]), form.inline select { width: auto; height: 32px; }
dl.meta dd form.inline { display: flex; flex-wrap: nowrap; width: 100%; }
dl.meta dd form.inline select { flex: 1 1 0; min-width: 0; }
form.inline button { height: 32px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 14px 16px; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 12px 16px; }
fieldset > label { flex: 1 1 calc(33.33% - 11px); min-width: 0; }
fieldset > label:has(textarea), fieldset label[class~=check] { flex-basis: 100%; }
fieldset > input[type=hidden] { display: none; }
fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.errorlist { color: var(--bad); margin: 0; padding: 0; list-style: none; font-size: 12px; }
form > .actions:last-child { margin-bottom: 0; }
form.card .actions, .card form .actions { padding-top: 16px; border-top: 1px solid var(--border); }
td input:not([type=checkbox]), td select { height: 30px; font-size: 12.5px; }

/* CVSS calculator */
.cvss { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; }
.cvss-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.cvss-row > span { width: 150px; flex: none; font-size: 12px; font-weight: 500; color: var(--text-2); }
.cvss-row button { height: 26px; padding: 0 10px; font-size: 12px; box-shadow: none; }
.cvss-row button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cvss p { margin: 8px 0 0; font-size: 12px; }
.cvss details { margin-top: 6px; }
.cvss summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.cvss strong { font-size: 16px; color: var(--text); }

/* ---------- meta lists, details, misc ---------- */
dl.meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0 0 16px; font-size: 13px; }
dl.meta dt { color: var(--muted); font-size: 12px; font-weight: 500; padding-top: 1px; }
dl.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.meta dd .chip { margin: 0 2px 4px 0; }   /* wrapped chips (norms, labels) get their own line height */
dl.meta.grid { grid-template-columns: max-content 1fr max-content 1fr; }
details summary { cursor: pointer; font-weight: 500; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--faint); font-size: 11px; }
details[open] summary::before { content: "▾"; }
details > :not(summary) { margin-top: 10px; }
.hint { font-size: 12px; color: var(--muted); }
.legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.legend i { display: inline-block; width: 18px; height: 8px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.legend i.bar { background: light-dark(#d4d4d8, var(--surface-3)); } .legend i.test { background: var(--accent); } .legend i.due { width: 3px; height: 12px; background: var(--sev-high); vertical-align: -2px; }
.comment { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.comment .avatar { margin-top: 2px; }
.comment .bubble { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); border-left-width: 3px; background: var(--surface); }
.comment .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.comment .who b { color: var(--text); font-weight: 600; font-size: 13px; }
.comment .who .chip i, .comment .who .chip svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; }
.comment.internal .bubble { border-left-color: var(--warn); background: var(--warn-tint); }
.comment.internal .avatar { background: var(--warn); border-color: var(--warn); }
.comment.client .bubble { border-left-color: var(--accent); background: var(--accent-tint); }
.comment.client .avatar { background: var(--accent); border-color: var(--accent); }
.comment.team .bubble { border-left-color: var(--border-strong); }
.chip.warn { border-color: color-mix(in srgb, var(--warn) 30%, light-dark(white, var(--border))); } .chip.ok { border-color: color-mix(in srgb, var(--ok) 30%, light-dark(white, var(--border))); } .chip.accent { border-color: color-mix(in srgb, var(--accent) 30%, light-dark(white, var(--border))); }
.evidence { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.evidence figure { margin: 0; max-width: 320px; }
.evidence img { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); display: block; }
.evidence figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ---------- prose (rendered Markdown) ---------- */
.prose { max-width: 76ch; line-height: 1.65; font-size: 14px; color: var(--text-2); }
.prose p { margin: 0 0 12px; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3 { color: var(--text); margin: 18px 0 8px; }
.prose h1 { font-size: 16px; } .prose h2 { font-size: 14px; } .prose h3 { font-size: 13px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; }
.prose li { margin: 2px 0; }
.prose pre { margin: 0 0 12px; }
.prose img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.prose table { font-size: 13px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.prose th, .prose td { padding: 6px 10px; }
.prose blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--border-strong); color: var(--muted); }
.report-preview { padding: 16px 20px; border-top: 1px solid var(--border); }
.report-preview:first-child { border-top: 0; }
.report-preview h2 { margin: 0 0 10px; font-size: 14px; }
.report-preview .prose, .report-preview > :not(h2) { max-width: 80ch; color: var(--text-2); }
.report-preview table { font-size: 12.5px; }
.tokens { margin-top: 20px; } .picker .tokens { margin-top: 0; }
.tokens table { margin-top: 10px; font-size: 12.5px; }

/* ---------- gantt ---------- */
.gantt { font-size: 13px; }
.gantt .row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--border); min-height: 40px; align-items: center; }
.gantt .row:last-child { border-bottom: 0; }
.gantt .row > div:first-child { padding: 8px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt .row > div:first-child a { font-weight: 500; color: var(--text); }
.gantt .lane { position: relative; height: 40px; background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / 16)); }
.gantt .head { background: var(--surface-2); min-height: 34px; }
.gantt .head .lane { height: auto; display: grid; grid-template-columns: repeat(16, 1fr); background: none; }
.gantt .head .lane span { color: var(--muted); font-size: 11px; font-weight: 500; padding: 9px 4px; overflow: hidden; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.gantt .head > div:first-child { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.gantt .bar { position: absolute; top: 13px; height: 14px; background: light-dark(#d4d4d8, var(--surface-3)); border-radius: 4px; }
.gantt .test { position: absolute; top: 16px; height: 8px; background: var(--accent); border-radius: 3px; }
.gantt .due { position: absolute; top: 9px; width: 3px; height: 22px; background: var(--sev-high); border-radius: 2px; }
.gantt .today { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); opacity: .5; }
.gantt .empty { grid-column: 1 / -1; }

/* ---------- login ---------- */
body.bare { background: var(--bg); }
.login { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(16, 24, 40, .05); padding: 28px; }
.login .mark { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; margin: 0 auto 12px; align-self: center; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--side-mark); font-weight: 700; }
.login h1 { text-align: center; margin: 0 0 4px; }
.login .sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.login button { width: 100%; text-align: center; height: 36px; line-height: 34px; }

/* ---------- inline edit: quiet selects that save on change ---------- */
.quick select, .quick input:not([type=checkbox]) { border-color: transparent; background-color: transparent; box-shadow: none; padding-left: 6px; margin-left: -6px; cursor: pointer; }
.quick select:hover, .quick input:not([type=checkbox]):hover { border-color: var(--border-strong); background-color: var(--surface); }
.quick select:focus, .quick input:not([type=checkbox]):focus { border-color: var(--accent); background-color: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); cursor: auto; }
dl.meta form.quick { display: contents; }
td .toolbar { margin: 0; }
dl.meta .quick select { height: 30px; width: 100%; font-size: 13px; }
dl.meta dd .score { font-size: 16px; font-variant-numeric: tabular-nums; }
.htmx-request { opacity: .55; transition: opacity .15s; }
tr.htmx-settling td, tr.htmx-added td { background: var(--ok-tint); }
tbody td { transition: background .7s; }
.toolbar.quick label.check > span { order: 0; color: var(--muted); font-size: 13px; }

/* ---------- dropdown menu (native details) ---------- */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::before { content: none; }
details.menu > summary i, details.menu > summary svg { margin: 0 0 0 2px; }
details.menu > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; margin: 0; padding: 6px; text-align: left; white-space: normal;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(9, 9, 11, .1), var(--shadow);
  display: flex; flex-direction: column; gap: 2px; }
details.menu > div > a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 13px; font-weight: 500; }
details.menu > div > a:hover { background: var(--surface-3); text-decoration: none; }
details.menu > div > a i, details.menu > div > a svg { width: 15px; height: 15px; color: var(--muted); }
details.menu > div > form { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-width: 300px; }
details.menu > div > form + form { border-top: 1px solid var(--border); }
details.menu > div > form label { width: 100%; }
details.menu > div > form select { width: 100%; height: 32px; }
details.menu > div > form button { align-self: flex-end; }

/* ---------- sticky form bar ---------- */
.form-bar { position: sticky; bottom: 0; z-index: 10; margin: 0 -8px; padding: 12px 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--border); }
.card details > summary { padding: 14px 20px; margin: 0 -20px; font-size: 14px; font-weight: 600; border-bottom: 1px solid transparent; }
.card details[open] > summary { border-bottom-color: var(--border); margin-bottom: 16px; }
.card details > summary .muted { font-weight: 400; font-size: 12px; margin-left: 6px; }
.card > details:first-child > summary { margin-top: -16px; }
.card > details:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- finding page: sub-header, sections, side meta ---------- */
.subhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -6px 0 16px; }
.subhead .title { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.subhead .title h2 { margin: 0; font-size: 16px; font-weight: 600; }
.subhead .back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; padding-right: 10px; border-right: 1px solid var(--border-strong); }
.subhead .back i, .subhead .back svg { width: 14px; height: 14px; }
.subhead .back:hover { color: var(--text); text-decoration: none; }
.subhead .sep { color: var(--border-strong); }
.subhead .actions { margin: 0; }
.card.sections > section { padding: 18px 20px; margin: 0 !important; border-bottom: 1px solid var(--border); }
.card.sections > section:last-child { border-bottom: 0; }
.card.sections > section > h2 { display: flex; align-items: center; gap: 10px; margin: -18px -20px 16px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--border); font-size: 14px; background: var(--surface-2); }
.card.sections > section:first-child > h2 { border-radius: var(--radius) var(--radius) 0 0; }
.card.sections > section > h2 > .btn { margin-left: auto; }
.card.sections > section > h2 > .muted { font-weight: 400; font-size: 12px; }
dl.meta.wide { grid-template-columns: 200px minmax(0, 1fr); gap: 12px 24px; margin: 0; }
dl.meta dd.person { display: flex; align-items: center; gap: 8px; }
dl.meta.roomy { row-gap: 14px; }   /* engagement card on the overview */
dl.meta.wide dt { font-weight: 500; font-size: 12.5px; color: var(--muted); }
dl.meta.wide dd { color: var(--text); }
dl.meta.wide dd .prose { font-size: 13.5px; }
dl.meta.wide dd .score { font-size: 15px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.notset { color: var(--faint); font-style: italic; font-family: var(--font); font-size: 13px; }
.rate { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin: 0 8px 2px 0; }
.rate > i { display: block; height: 100%; background: var(--primary); }
/* impact / likelihood slider: a bar with a dot; 0 = not set */
.rate-field { display: flex; align-items: center; gap: 12px; }
.rate-field output { font-size: 13px; color: var(--muted); min-width: 52px; font-variant-numeric: tabular-nums; }
input[type=range].rate-in, input[type=range].editing { -webkit-appearance: none; appearance: none; width: 100%; max-width: 240px; height: 8px; margin: 8px 0; padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(to right, var(--primary) 0 calc(var(--pct, 0) * 1%), var(--surface-3) calc(var(--pct, 0) * 1%) 100%); box-shadow: none; cursor: pointer; }
input[type=range].rate-in::-webkit-slider-thumb, input[type=range].editing::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: var(--shadow); }
input[type=range].rate-in::-moz-range-thumb, input[type=range].editing::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
.instance { padding: 14px 0; border-top: 1px dashed var(--border); }
.instance:first-of-type { border-top: 0; padding-top: 0; }
.instance h3 { margin: 0 0 10px; font-size: 13px; }
aside#details { background: none; border: 0; box-shadow: none; }
aside#details > * { margin-left: 0 !important; margin-right: 0 !important; }
.side-meta { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 20px; font-size: 13px; }
.side-meta > * { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.side-meta > .chiprow { align-items: flex-start; }   /* a chip keeps its own width instead of stretching */
.side-meta > * > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.side-meta b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.side-meta select { height: 30px; font-size: 13px; }
.side-meta .switch { flex-direction: column; align-items: flex-start; }
.switch input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { display: inline-block; width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- double-click editing ---------- */
[x-cloak] { display: none !important; }
[data-edit] { cursor: text; border-radius: var(--radius-sm); margin: -2px -6px; padding: 2px 6px; transition: background .12s; position: relative; }
[data-edit]:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-edit].saving { opacity: .5; }
[data-edit] .editing { width: 100%; }
[data-edit] textarea.editing { min-height: 0; }
h2[data-edit] { cursor: text; }
.subhead .title h2[data-edit] .editing { font: inherit; height: 32px; min-width: 420px; }

/* ---------- instances + evidence viewer ---------- */
.instance { padding: 0; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.instance:first-of-type { padding-top: 0; }
.instance > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border-radius: var(--radius); cursor: pointer; font-weight: 500; }
.instance > summary::before, .instance[open] > summary::before { content: none; }
.instance > summary::marker, .instance > summary::-webkit-details-marker { content: ""; display: none; }
.instance > summary { list-style: none; }
.instance[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.instance > summary .caret { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; flex: none; }
.instance[open] > summary .caret { transform: rotate(90deg); }
.instance > summary h3 { margin: 0; font-size: 13px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instance > summary form { margin-left: auto; }
.instance > summary > .btn + form { margin-left: 0; }
.instance > summary label.switch { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.instance > summary label.switch > span { font-size: 12px; color: var(--muted); }   /* Edit sits next to Remove */
.instance > :not(summary) { margin-top: 0; }
.instance-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; }
.instance-head h3 { margin: 0; font-size: 13px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instance-head form { margin-left: auto; }
.instance > dl.meta.wide { padding: 14px 14px 4px; grid-template-columns: 150px minmax(0, 1fr); }
.chip.mono { font-family: var(--mono); font-size: 11.5px; }
.ev { border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.ev-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 8px 10px 0; border-bottom: 1px solid var(--border); }
.ev-tabs button { height: 30px; line-height: 28px; padding: 0 10px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: none; box-shadow: none; color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: -1px; }
.ev-tabs button i, .ev-tabs button svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.ev-tabs button:hover { color: var(--text); background: var(--surface-3); }
.ev-tabs button.active { color: var(--text); background: var(--surface); border-color: var(--border); border-bottom: 1px solid var(--surface); }
.ev-tabs button.add { margin-left: auto; color: var(--accent); }
.ev figure { margin: 0; padding: 14px; }
.ev figure img { display: block; max-width: 100%; max-height: 640px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0f0f10; }
.ev figure a.file { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; }
.ev figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }

/* ---------- modal ---------- */
dialog.modal { width: min(920px, calc(100vw - 48px)); max-height: 88vh; margin: 6vh auto auto; padding: 0;   /* anchored to the top: switching to a short tab must not re-centre the header */ border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(9, 9, 11, .25); }
dialog.modal::backdrop { background: rgba(9, 9, 11, .45); backdrop-filter: blur(2px); }
dialog.modal > form { display: flex; flex-direction: column; max-height: 88vh; }
dialog.modal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
dialog.modal header h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 10px; }
dialog.modal header .btn i, dialog.modal header .btn svg { margin: 0; }
dialog.modal .tabs { margin: 0; padding: 0 20px; background: var(--surface-2); }
dialog.modal .body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
/* A token picker at the bottom of a modal must open over the footer, not be clipped by the scroll area. */
dialog.modal .body:has(.picker .menu:not([hidden])) { min-height: 300px; overflow: visible; }
dialog.modal .picker:has(.menu:not([hidden])) { z-index: 2; }
dialog.modal footer { position: relative; z-index: 1; }
dialog.modal .body .fields > *, dialog.modal .body fieldset > label { flex-basis: 100%; }   /* one field per line in popups */
dialog.modal .body fieldset { background: var(--surface-2); }
dialog.modal .instance.edit { margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--radius); }
dialog.modal .instance.edit > summary .chip { margin-left: auto; }
.instance.edit > fieldset > label { flex-basis: 100%; }   /* one field per line */
.instance.edit > fieldset > .btn { margin-left: auto; }
.instance.edit .files { list-style: none; margin: 0; padding: 0; flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.instance.edit .files li { display: flex; align-items: center; gap: 8px; }
.instance.edit .files li svg { width: 14px; height: 14px; color: var(--muted); }
.instance.edit .files li a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instance.edit > fieldset > label.switch { flex-direction: row; align-items: center; gap: 8px; }
dialog.modal .instance.edit > fieldset { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
dialog.modal footer { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); justify-content: flex-end; background: var(--surface-2); }

/* ---------- workflow (assessment overview) ---------- */
.cols > .flow-card { flex: 0 0 30%; }
.cols > .flow-card + aside { flex: 1 1 0; }
.flow-card { display: flex; flex-direction: column; }
.flow-card > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.flow-card > h2 > .chip.status { margin-left: auto; }
.flow-card > h2 > .chev { height: 22px; width: 22px; padding: 0; border: 0; background: none; color: var(--muted); line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.flow-card > h2 > .chev:hover { color: var(--text); background: var(--surface-3); }
.flow-card > h2 > .chev i, .flow-card > h2 > .chev svg { margin: 0; transition: transform .15s; }
.flow-card.show-details > h2 > .chev i, .flow-card.show-details > h2 > .chev svg { transform: rotate(180deg); }

.chip.status.as-btn { height: 22px; border: 1px solid color-mix(in srgb, var(--c) 28%, light-dark(white, var(--border))); cursor: pointer; font-weight: 500; }
.chip.status.as-btn:hover { background: color-mix(in srgb, var(--c) 20%, light-dark(white, var(--surface))); }
.chip.status.as-btn[disabled] { cursor: default; opacity: 1; box-shadow: inset 0 0 0 1px var(--c); }

/* Steps are joined by a solid vertical flow line, with a small clear gap around each checkbox. */
.flow-card > ul.flow { list-style: none; margin: 6px 0; padding: 0; }
ul.flow > li { position: relative; }
ul.flow > li::before, ul.flow > li::after { content: ""; position: absolute; left: 27px; width: 1px; background: var(--border-strong); }
/* The 15px checkbox is centred 18px into the row. The two line segments leave a 4px gap around it,
   including when an expanded row has extra detail beneath the checkbox. */
ul.flow > li::before { top: 0; bottom: calc(100% - 6px); }
ul.flow > li::after { top: 30px; bottom: 0; }
ul.flow > li:first-child::before, ul.flow > li:last-child::after { display: none; }
ul.flow form, ul.flow .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 20px; margin: 0; }
ul.flow .t { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; gap: 12px; cursor: pointer; font-size: 13.5px; }
/* Native checkbox controls do not consistently paint their box-shadow. This small surface-coloured halo makes
   the connector's clearance around every checkbox explicit. */
ul.flow .t::before { content: ""; position: absolute; z-index: 0; left: -4px; top: 50%; width: 23px; height: 23px;
  transform: translateY(-50%); border-radius: 50%; background: var(--surface); pointer-events: none; }
ul.flow .t input { position: relative; width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer;
  z-index: 1; accent-color: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
ul.flow .t > span { position: relative; z-index: 1; }
ul.flow li.state-done .t, ul.flow li.state-skipped .t { color: var(--muted); text-decoration: line-through; }
ul.flow li.state-skipped .t { color: var(--faint); cursor: default; }
ul.flow li.state-skipped .t input { cursor: not-allowed; opacity: .45; }

/* state: a chip that is really a select, so clicking it opens the four states */
ul.flow span.st { display: inline-flex; align-items: center; border: 1px solid var(--border); }   /* read-only twin of the select (portal) */
ul.flow select.st, ul.flow span.st { flex: none; width: auto; height: 22px; padding: 0 8px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 500; background-color: var(--surface-3); background-image: none;
  border-color: var(--border); color: var(--muted); text-align: center; }
ul.flow select.st:hover { border-color: var(--border-strong); }
ul.flow li.state-doing .st { background-color: var(--accent-tint); border-color: var(--accent-ring); color: var(--accent); }
ul.flow li.state-done .st { background-color: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 25%, light-dark(white, var(--border))); color: var(--ok); }
ul.flow li.state-skipped .st { color: var(--faint); }

ul.flow details.menu { flex: none; }
ul.flow details.menu > summary { width: 26px; padding: 0; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }   /* fixed width: the row must not shift while the icon is redrawn */
ul.flow details.menu > div { min-width: 190px; }
ul.flow details.menu .danger { color: var(--bad); }
ul.flow li.htmx-settling form { background: var(--accent-tint); }

/* detail line: the sentence and the assignee, both hidden until the header chevron is toggled */
.flow-card .detail { display: none; flex-basis: 100%; align-items: center; gap: 10px; margin: -2px 0 4px 27px; }
.flow-card.show-details .detail { display: flex; }
.flow-card .detail .d { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 12.5px; }
.flow-card .detail .d p { margin: 0; }
.flow-card .detail select.plain { flex: none; width: auto; max-width: 45%; height: 24px; text-overflow: ellipsis;
  border-color: transparent; background-color: transparent; color: var(--muted); font-size: 12.5px; padding: 0 20px 0 6px; }
.flow-card .detail select.plain:hover, .flow-card .detail select.plain:focus {
  border-color: var(--border-strong); background-color: var(--surface); color: var(--text); }
.flow-card .pad { margin: 16px 20px; }

section.flow-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius); }
.flow-card > footer form { margin: 0; }

.cols > aside > h4 { margin: 14px 20px 6px; }
p.people { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 20px 14px; }

dialog.modal.pick { width: min(620px, calc(100vw - 48px)); }
dialog.modal.pick .body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
dialog.modal.pick .phase { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; text-align: left;
  padding: 10px 14px; background: none; border: 1px solid transparent; border-radius: var(--radius); }
dialog.modal.pick .phase > .chip.status { flex: none; min-width: 116px; }
dialog.modal.pick .phase .d { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
dialog.modal.pick .phase:hover { background: var(--surface-2); border-color: var(--border); }
dialog.modal.pick .phase.done { opacity: .5; }
dialog.modal.pick .phase[disabled] { opacity: 1; cursor: default; background: var(--surface-2); border-color: var(--border-strong); }

/* ---------- credentials: dots by default, eye to reveal ---------- */
.secret { display: flex; align-items: flex-start; gap: 8px; }
.secret pre { margin: 0; flex: 1 1 auto; min-width: 0; letter-spacing: .1em; }
.secret pre[x-cloak], .secret pre:not([aria-hidden]) { letter-spacing: 0; }
label.secret-field.masked textarea { -webkit-text-security: disc; text-security: disc; }
label.secret-field > span button.link { font-size: 11px; margin-left: 6px; }
.checks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.checks > span { font-size: 12px; font-weight: 500; color: var(--text-2); }
.checks > div { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.checks > div > div label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }

/* ---------- scope tab: vertical section nav + one pane ---------- */
.card.panes { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 320px; }
.pane-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius) 0 0 var(--radius); margin: 0 !important; }
.pane-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.25; }
.pane-nav a i, .pane-nav a svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.pane-nav a small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.pane-nav a:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
.pane-nav a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(9, 9, 11, .06), inset 0 0 0 1px var(--border); }
.pane-nav a.active i, .pane-nav a.active svg { color: var(--accent); }
.card.panes > section { padding: 18px 24px 24px; margin: 0 !important; min-width: 0; }
.card.panes > section > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--border); font-size: 15px; }
.card.panes > section > h2 .chip { font-weight: 500; }
.card.panes > section > h2 .chip:first-of-type { margin-left: 6px; }
.card.panes > section > h2 > .btn { margin-left: auto; }
.card.panes > section > table { margin: 0 -24px -24px; width: calc(100% + 48px); }
.card.panes > section > table th:first-child, .card.panes > section > table td:first-child { padding-left: 24px; }
.card.panes > section > table th:last-child, .card.panes > section > table td:last-child { padding-right: 24px; }
.prose.lead { font-size: 14.5px; color: var(--text); margin-bottom: 18px; max-width: 80ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 28px; margin: 0 0 18px; }
.fact { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--text); }
.fact > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fact.full { grid-column: 1 / -1; margin-top: 16px; }
.fact .prose { font-size: 13.5px; }
.fact .secret pre { font-size: 12px; padding: 8px 12px; }
@media (max-width: 900px) { .card.panes { grid-template-columns: 1fr; } .pane-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; } .pane-nav a small { display: none; } }

/* ---------- token picker (replaces <select multiple>) ---------- */
.picker { position: relative; }
.picker select { display: none; }
.picker .tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: text; }
.picker .tokens:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.picker .tokens input { flex: 1 1 120px; min-width: 120px; width: auto; height: 26px; border: 0; box-shadow: none; padding: 0 4px; background: none; }
.picker .tokens input:focus { box-shadow: none; }
.picker .chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px 2px 0; padding-right: 4px; background: var(--accent-tint); color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 30%, light-dark(white, var(--border))); }
.picker .chip button { height: 16px; width: 16px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: inherit; font-size: 14px; line-height: 16px; }
.picker .chip button:hover { background: color-mix(in srgb, var(--accent) 18%, light-dark(white, var(--surface))); }
.picker .menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(9, 9, 11, .12); }
.picker .menu li { padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.picker .menu li.hi { background: var(--surface-3); }

/* ---------- select-assets popup ---------- */
.pick-list { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); max-height: 52vh; overflow-y: auto; }
.pick-list li { border-bottom: 1px solid var(--border); }
.pick-list li:last-child { border-bottom: 0; }
.pick-list label.check { padding: 10px 12px; gap: 12px; cursor: pointer; }
.pick-list label.check:hover { background: var(--surface-2); }
.pick-list label.check > span { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick-list input:disabled + span { opacity: .6; }
.pick-list .empty { padding: 20px; }
.toolbar .picker, .actions .picker, form.inline .picker { min-width: 220px; }
.toolbar .picker .tokens, .actions .picker .tokens, form.inline .picker .tokens { min-height: 32px; padding: 2px 8px; box-sizing: border-box; }
.toolbar .picker .tokens input, .actions .picker .tokens input, form.inline .picker .tokens input { height: 26px; min-width: 120px; }
.picker.single .tokens input { min-width: 80px; }
details.menu .picker .menu { position: static; box-shadow: none; border-top: 0; }
.grow, .toolbar .grow { flex: 1 1 auto; }

/* checklist tab: every checklist inline, one pane each; pick boxes feed the bulk status bar */
.card.panes > section > h2 .progress { width: 140px; min-width: 0; margin-left: 8px; }
.bulk { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--text-2); font-weight: 500;
  padding: 4px 4px 4px 10px; border-radius: var(--radius-sm); background: var(--accent-tint); }
.bulk button.link { font-size: 12px; }
table.tasks th.pick, table.tasks td.pick { width: 30px; padding-right: 0; }
table.tasks td.pick input, table.tasks th.pick input { margin: 0; vertical-align: -2px; }
table.tasks tr.group th { background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); padding-top: 8px; padding-bottom: 8px; }
table.tasks tr.group th .hint { text-transform: none; letter-spacing: 0; margin-left: 6px; font-weight: 400; }
table.tasks tr.selected td { background: var(--accent-tint); }
table.tasks td { vertical-align: top; }
table.tasks details > summary { padding: 0; margin: 0; font-size: inherit; font-weight: 500; border: 0; }
table.tasks details > :not(summary) { margin: 10px 0 0 14px; max-width: 720px; }
table.tasks select.st, .bulk select.st { width: auto; height: 24px; padding: 0 20px 0 8px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500;
  background-color: var(--surface-3); border-color: var(--border); color: var(--muted); }
table.tasks select.st:hover { border-color: var(--border-strong); }
table.tasks tr.st-passed select.st { background-color: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 25%, light-dark(white, var(--border))); color: var(--ok); }
table.tasks tr.st-failed select.st { background-color: var(--bad-tint); border-color: color-mix(in srgb, var(--bad) 25%, light-dark(white, var(--border))); color: var(--bad); }
table.tasks tr.st-na select.st { color: var(--faint); }
table.tasks tr.st-na summary { color: var(--muted); text-decoration: line-through; }
table.tasks select.plain { width: auto; max-width: 11em; }

/* report tab: version bar + the section editor (sections | document | tokens) */
.card.rhead { display: flex; align-items: center; gap: 12px; padding: 12px 20px; margin-bottom: 12px; }
.rhead .vsel { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.card.rhead > * { margin: 0 !important; }
.card.rhead > details.menu { margin-right: 12px !important; }
.rhead summary.btn { display: inline-flex; align-items: center; gap: 6px; }
.rhead .vsel > span { font-size: 12px; color: var(--muted); }
.rhead .vsel select { height: 32px; width: auto; font-family: var(--mono); font-size: 12.5px; }
.rhead form { margin: 0; }
.rhead .muted { font-size: 12.5px; }
details.menu > form.gen { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; margin: 0; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(9, 9, 11, .12); display: grid; gap: 10px; text-align: left; }
details.menu > form.gen label { margin: 0; }
details.menu > form.gen label > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.card:has(> form.report) { padding: 0; }
form.report { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 60vh; }
form.report.with-toks { grid-template-columns: 240px minmax(0, 1fr) 300px; }
form.report > .pane { min-width: 0; }
form.report > .pane + .pane { border-left: 1px solid var(--border); }
form.report > aside.pane { background: var(--surface-2); }
form.report .phead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
form.report .phead .link { font-size: 11px; text-transform: none; letter-spacing: 0; }
form.report > .pane-nav { padding-top: 0; }
form.report > .pane-nav > .phead { padding: 12px 8px 6px; }
form.report > .pane-nav a { cursor: pointer; }
form.report > .pane-nav a small { color: var(--warn); }
form.report > .pane-nav .pbody.add { padding: 12px 4px 0; border-top: 1px solid var(--border); margin-top: 8px; }
form.report .pbody { padding: 10px 14px; }
form.report .pbody.add { display: grid; gap: 6px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
form.report .pbody.add input, form.report .pbody.add select { height: 30px; font-size: 12.5px; }
form.report .doc-head { display: flex; align-items: center; gap: 8px; padding: 18px 24px 0; }
form.report .doc-head h1, form.report .doc-head input#id_title { flex: 1 1 auto; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
form.report .doc-head input#id_title { border-color: transparent; background: transparent; box-shadow: none; padding-left: 6px; margin-left: -6px; height: 40px; }
form.report .doc-head input#id_title:hover { border-color: var(--border-strong); }
form.report .doc-head input#id_title:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
details.menu > div.settings { width: 260px; padding: 12px; display: grid; gap: 10px; }
details.menu > div.settings label { margin: 0; font-size: 12.5px; }
details.menu > div.settings label > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
details.menu > div.settings input[type=number] { height: 30px; }
form.report .views { display: flex; align-items: center; gap: 4px; padding: 10px 24px 0; border-bottom: 1px solid var(--border); }
form.report .views a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; color: var(--muted); }
form.report .views a svg { width: 14px; height: 14px; }
form.report .views a:hover { color: var(--text); text-decoration: none; }
form.report .views a.active { color: var(--accent); border-bottom-color: var(--accent); }
form.report .views .chip { margin-bottom: 6px; }
form.report textarea#content { display: none; }
form.report .ed { padding: 0 24px; }
form.report .preview { padding: 18px 24px 24px; }
form.report .savebar { display: flex; gap: 10px; align-items: center; padding: 10px 24px; border-top: 1px solid var(--border); font-size: 12px; }
form.report .empty.pbody { padding: 40px; }
.toks { padding: 0 10px 14px; max-height: 72vh; overflow: auto; }
.toks > input[type=search] { width: 100%; height: 30px; font-size: 12.5px; margin-bottom: 8px; }
.toks details { margin-bottom: 4px; }
.toks summary { font-size: 12px; font-weight: 600; padding: 4px; cursor: pointer; }
.tok { padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.tok:hover { background: var(--surface-3); }
.tok b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--accent); }
.tok .ex { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok .pf { margin-top: 6px; display: grid; gap: 6px; }
.tok .pf input, .tok .pf select { height: 26px; font-size: 12px; }
/* Toast UI: inherit the app's type and colours, tokens as chips */
.toastui-editor-defaultUI { border: 0 !important; border-radius: 0; font-family: inherit; }
.toastui-editor-defaultUI .toastui-editor-toolbar { border-bottom: 1px solid var(--border); }
.toastui-editor-defaultUI .toastui-editor-defaultUI-toolbar { background: transparent; border: 0; padding: 6px 0; height: auto; flex-wrap: wrap; }
.toastui-editor-defaultUI .toastui-editor-toolbar-icons { border: 0; background-color: transparent; }
.toastui-editor-defaultUI .toastui-editor-toolbar-icons:hover { background-color: var(--surface-3); }
.toastui-editor-defaultUI .toastui-editor-toolbar-group { border-color: var(--border); }
.toastui-editor-defaultUI .toastui-editor-mode-switch { background: transparent; border-top: 1px solid var(--border); }
.toastui-editor-contents { font-family: inherit; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.toastui-editor-contents p, .toastui-editor-contents ul, .toastui-editor-contents ol { color: var(--text); }
.toastui-editor-contents h1, .toastui-editor-contents h2, .toastui-editor-contents h3 { border: 0; color: var(--text); }
.toastui-editor-md-container .toastui-editor, .toastui-editor-md-container .toastui-editor-md-preview { font-family: var(--mono); font-size: 13px; }
.toastui-editor-ww-container .toastui-editor-contents { padding: 18px 0; }
.tok-btn { height: 32px; padding: 0 10px; margin: 0; vertical-align: top; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--text-2); box-shadow: none; cursor: pointer; white-space: nowrap; }
.tok-btn code { color: var(--accent); font-size: 11px; }
.tok-btn:hover { border-color: var(--border-strong); color: var(--text); }
.tok-chip, .toastui-editor-contents .tok-chip { padding: 0 5px; border-radius: 4px; background: var(--accent-tint); color: var(--accent); font-family: var(--mono); font-size: 12px; line-height: 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, light-dark(white, var(--border))); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tok-chip.val, .toastui-editor-contents .tok-chip.val { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; background: var(--accent-tint); border: 0; border-bottom: 1px dotted var(--accent); border-radius: 2px; padding: 0 2px; cursor: help; }
@media (max-width: 1100px) { form.report, form.report.with-toks { grid-template-columns: 1fr; } form.report > .pane + .pane { border-left: 0; border-top: 1px solid var(--border); } }

/* formset tables: the DELETE flag is driven by the Remove button, never shown */
label.del { display: none; }
td.color input { width: 44px; padding: 2px; }
td.code input, td.order input { width: 100%; min-width: 70px; }
.tok-chip .x { display: none; border: 0; background: transparent; box-shadow: none; padding: 0 0 0 4px; margin: 0; height: auto; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; vertical-align: 0; }
.tok-chip:hover .x { display: inline; }
.tok-chip .x:hover { color: var(--bad); }

/* findings toolbar: filters left, search right */
.toolbar input.search { min-width: 240px; }
.toolbar .grow + input.search { margin-left: 0; }

/* filtering and selecting should ease in, not snap */
.bulk-slot { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .2s ease, opacity .2s ease; }
.bulk-slot.open { grid-template-rows: 1fr; opacity: 1; }
.bulk-slot > div { overflow: hidden; min-height: 0; }
.bulk-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 16px; }
.bulk-bar > .toolbar { margin: 0; }
#tbl tbody.htmx-swapping { opacity: .35; transition: opacity .1s; }

/* upload popup drop zone */
label.drop { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: 13px; cursor: pointer; position: relative; text-align: center; }
label.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
label.drop svg { width: 22px; height: 22px; color: var(--muted); }
label.drop:hover, label.drop.over { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
label.drop.picked { border-style: solid; color: var(--text); }
label.drop b { font-weight: 500; }

/* ---- Assessment insights */
.kpis small .sev + span { margin-right: 8px; }
.sevbar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.sevbar > i { display: block; height: 100%; }
ul.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
ul.bars li { display: grid; grid-template-columns: minmax(100px, 150px) 1fr 36px; align-items: center; gap: 12px; }
ul.bars.plain li { grid-template-columns: 1fr 36px 44px; }
ul.bars li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.bars .bar { display: flex; gap: 1px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
ul.bars .bar > i { display: block; height: 100%; }
ul.bars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
ul.bars small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sevbar + ul.bars { margin-top: 14px; }
td.ok-t { color: var(--ok); }
ul.bars .bar .ok { background: var(--sev-low); } ul.bars .bar .bad { background: var(--sev-critical); } ul.bars .bar .na { background: var(--faint); }
ul.bars.cl li { grid-template-columns: minmax(120px, 200px) 1fr 44px; }
ul.bars.cl li > div > small { display: block; margin-top: 6px; text-align: left; }
ul.bars.cl small b { font-weight: 600; }

/* ---- Sortable table headers */
thead th a.sort { color: inherit; text-decoration: none; }
thead th a.sort::after { content: "↕"; margin-left: 5px; opacity: .35; }
thead th a.sort:hover::after { opacity: .7; }
thead th a.sort.asc::after { content: "↑"; opacity: 1; } thead th a.sort.desc::after { content: "↓"; opacity: 1; }
tr.pager td { text-align: center; color: var(--muted); } tr.pager a { margin: 0 12px; }

/* ---- Client page */
.colchart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 16px; }
.colchart > div { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.colchart b { font-size: 11px; font-weight: 600; color: var(--text-2); line-height: 1; }
.colchart i { display: block; width: 100%; max-width: 36px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.colchart span { line-height: 1; }
.grid-2 > section > h2 .grow { flex: 1; }
.fact .sev { width: 8px; height: 8px; margin-right: 5px; }
dialog.modal.wide { width: min(920px, 96vw); }
table.formset td { padding: 4px 6px; } table.formset input, table.formset select { height: 30px; font-size: 13px; }
tr.muted td { color: var(--muted); }
.fact > .chip { align-self: flex-start; }
.row-actions { display: inline-flex; gap: 12px; align-items: center; } .row-actions form { display: inline; margin: 0; }
.toolbar > h2 { margin: 0; font-size: 15px; }
dialog.modal .checks > div { flex-direction: column; gap: 8px; }   /* one permission per line, with its description */

/* Recon asset tree (recon-plan §6.2): nested <details>, no layout engine. */
ul.tree, ul.tree ul { list-style: none; margin: 0; padding-left: 0; }
ul.tree ul { padding-left: 18px; border-left: 1px solid var(--border); margin-left: 6px; }
ul.tree li { padding: 3px 0; }
ul.tree summary { cursor: pointer; }

/* ---------- assessment: counts on tabs, stat tiles, attention list, segments, step bars ---------- */
.tabs a b { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.tabs a b.bad { background: var(--bad-tint); color: var(--bad); }
.page-head .sub b { font-weight: 500; color: var(--text-2); }
.page-head .sub .chip, .page-head .sub .chip.status { vertical-align: middle; }
.kpis small .overdue { color: var(--bad); font-weight: 600; }
.kpis > div.due { border-color: color-mix(in srgb, var(--bad) 30%, light-dark(white, var(--border))); }
.cols.stacked-columns > .stack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cols.stacked-columns > .stack:first-child { flex: 0 0 480px; }
.cols.stacked-columns.wide-first > .stack:first-child { flex: 1 1 0; }   /* scope tab: assignment and assets wide, when/how narrow */
.cols.stacked-columns.wide-first > .stack:last-child { flex: 0 0 360px; }
.cols.stacked-columns ul.flow .t > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cols.stacked-columns > .stack > :not(dialog) { margin: 0; }   /* a dialog keeps margin:auto or it opens top-left */
.cols.stacked-columns > .stack > section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.cols.stacked-columns > .stack > section > h2 { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.cols.stacked-columns > .stack > section > h2 > .muted { font-weight: 400; font-size: 12px; margin-left: auto; }
.cols.stacked-columns > .stack > section.flow-card > h2 > .muted { margin-left: 0; }   /* the n/n count stays next to the title; the status chip takes the right */
.cols.stacked-columns > .stack > section > h2 > .btn { margin-left: auto; }
.cols.stacked-columns > .stack > section > :not(h2):not(ul.flow):not(footer):not(.todo):not(dialog):not(table):not(h4) { margin: 14px 20px; }
.cols.stacked-columns > .stack > section > h4 { margin: 14px 20px 6px; }
.cols.stacked-columns > .stack > section > h4 + ul { margin-top: 0; }
.todo { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
.todo:last-child { border-bottom: 0; }
.todo .ic { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--surface-3); color: var(--muted); }
.todo .ic i, .todo .ic svg { width: 15px; height: 15px; }
.todo .ic.bad { background: var(--bad-tint); color: var(--bad); } .todo .ic.warn { background: var(--warn-tint); color: var(--warn); }
.todo .t { flex: 1 1 auto; min-width: 0; } .todo .t small { display: block; color: var(--muted); font-size: 12px; }
ul.plainlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
ul.plainlist li { display: flex; align-items: center; gap: 10px; } ul.plainlist li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
ul.plainlist li i, ul.plainlist li svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; background: var(--surface-3); border-color: var(--border); color: var(--text-2); }
.avatar svg { width: 13px; height: 13px; }
.person { display: flex; align-items: center; gap: 10px; } .person small { display: block; color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; height: 32px; background: var(--surface); position: relative; }
.seg > * { display: inline-flex; flex-direction: row; align-items: center; gap: 0; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--muted); border-right: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.seg > :last-child { border-right: 0; }
.seg > a:hover, .seg > label:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.seg > .active, .seg > label:has(input:checked) { background: var(--primary); color: #fff; }
.seg b { font-weight: 600; margin-left: 5px; color: var(--faint); } .seg > .active b, .seg > label:has(input:checked) b { color: var(--side-text); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg.result { height: 28px; border-color: var(--border); }
.seg.result > button { font: inherit; font-size: 12px; height: auto; line-height: 26px; padding: 0 9px; border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; background: var(--surface); color: var(--muted); }
.seg.result > button:last-child { border-right: 0; }
.seg.result > button.on { color: #fff; background: var(--faint); }
.seg.result > button.on[value=passed] { background: var(--sev-low); } .seg.result > button.on[value=failed] { background: var(--sev-critical); }
.seg.result.locked { border-color: color-mix(in srgb, var(--bad) 30%, light-dark(white, var(--border))); }
.seg.result.locked > button:not(.on) { color: var(--faint); cursor: not-allowed; background: var(--surface-2); }
table.tasks tr.st-failed td { background: color-mix(in srgb, var(--bad) 4%, light-dark(white, var(--surface))); }
button.chapter { display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
button.chapter i, button.chapter svg { width: 14px; height: 14px; transition: transform .15s; }
.steps { display: flex; gap: 4px; margin-top: 8px; max-width: 140px; } .steps span { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--border); }
.steps span.done { background: var(--faint); } .steps span.now { background: var(--accent); }
.strip { display: flex; height: 8px; border-radius: 2px; overflow: hidden; gap: 1px; max-width: 140px; } .strip i { display: block; height: 100%; }
td .progress { max-width: 140px; min-width: 100px; }
td a.t { color: var(--text); } td a.t:hover { color: var(--accent); }
td .hint.mono { font-size: 11.5px; }
dialog.modal.narrow { width: min(560px, calc(100vw - 48px)); }
.hint.pad { margin: 12px 20px; }

/* finding page */
.fhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fhead h1 { margin: 0; }
.fhead .back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; padding-right: 10px; border-right: 1px solid var(--border-strong); }
.fhead .back i, .fhead .back svg { width: 14px; height: 14px; }
.fhead .back:hover { color: var(--text); text-decoration: none; }
.fhead h1[data-edit] .editing { font: inherit; height: 36px; min-width: 420px; }
.page-head .sub .sev-chip, .page-head .sub .score { vertical-align: middle; }
.page-head .sub .score { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.card.sections > section > p.notset { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.card.sections > section > dl.meta.wide + p.notset { padding-top: 10px; border-top: 1px dashed var(--border); }
.actions label.switch { flex-direction: row; align-items: center; gap: 8px; }
.actions label.switch > span { order: 2; font-size: 13px; font-weight: 400; color: var(--text); }
.instance > dl.meta.wide:empty { display: none; }
.card.sections.detailed > section { padding: 16px 20px 18px; }
.card.sections.detailed > section > h2 { margin: -16px -20px 16px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 24px; margin: 0 0 16px; }
.fgrid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; }
.fgrid > div.wide { grid-column: span 2; }
.fgrid.one { grid-template-columns: 1fr; }   /* evidence: one field per line */
.fgrid.one > div.wide { grid-column: auto; }
.fgrid > div > span:first-child, .block > h3 { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fgrid > div.muted > div { color: var(--muted); }
.block { margin: 0 0 16px; }
.block > h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.block > h3:has(.rating) { display: grid; grid-template-columns: 96px 1fr; align-items: center; }   /* Impact and Likelihood bars start on the same column */
.block > h3 .rating { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.block > h3 .rate { margin: 0; }
.block .prose { font-size: 14px; }
.fgrid:last-child, .block:last-child { margin-bottom: 0; }
.card.sections.detailed > section > .fgrid + p.notset, .card.sections.detailed > section > .block + p.notset { padding-top: 10px; border-top: 1px dashed var(--border); margin-top: 0; }
.card.sections.detailed > section > p.notset:first-of-type:not(.fgrid + p):not(.block + p) { margin: 0; }
.instance .ibody { padding: 14px 14px 4px; }
.instance .ibody .fgrid { gap: 12px 20px; font-size: 13px; }
.card.sections.detailed .comment .bubble { border-left-width: 3px; }
.card.sections.detailed .chip.mono { font-size: 11.5px; }
.side-meta .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.side-meta .dates > div { display: flex; flex-direction: column; gap: 4px; }
.side-meta .dates > div > span { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cols > aside#details { position: sticky; top: 20px; }
/* finding comments: flat list, one neutral avatar style for everyone, a small tag where it matters */
.notes { display: flex; flex-direction: column; margin: 0 0 16px; }
.note { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.note:first-child { border-top: 0; padding-top: 0; }
.note .avatar { margin-top: 1px; }
.note .body { flex: 1 1 auto; min-width: 0; }
.note .who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }
.note .who b { color: var(--text); font-weight: 600; font-size: 13px; }
.note .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.note .tag i, .note .tag svg { width: 11px; height: 11px; }
.note .tag.internal { color: var(--warn); } .note .tag.client { color: var(--accent); } .note .tag.ours { color: var(--muted); }
td.who .tag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; } td.who .tag.client { color: var(--accent); } td.who .tag.ours { color: var(--muted); }
.note.internal { background: var(--warn-tint); border-top: 0; padding: 12px 20px; margin: 4px -20px; }   /* full-bleed band, text stays aligned with the other comments */
.note.internal + .note { border-top: 0; }
.note.internal .avatar { background: var(--warn); border-color: var(--warn); color: #fff; }
.note.internal.client { background: var(--accent-tint); }   /* the client's own internal notes (portal side) */
.note.internal.client .avatar { background: var(--accent); border-color: var(--accent); }
.note.internal.client .tag { color: var(--accent); }
.note .when { margin-left: auto; font-size: 12px; }
.note .prose { font-size: 13.5px; color: var(--text); }
#comment textarea { font-family: var(--font); font-size: 13.5px; min-height: 84px; }
#comment .comment-editor-source { display: none; }
#comment .comment-editor { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); }
#comment .comment-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
#comment .comment-editor-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
#comment .comment-editor-toolbar button { display: grid; place-items: center; width: 29px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
#comment .comment-editor-toolbar button:hover { background: var(--surface-3); color: var(--text); }
#comment .comment-editor-toolbar button i { width: 15px; height: 15px; }
#comment .comment-editor-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--border); }
#comment .comment-editor-surface { min-height: 104px; padding: 12px 14px; outline: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
#comment .comment-editor-surface:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.composer { margin: 10px 0 0; }
.composer .hint { margin-left: -4px; }
/* one ⋯ menu per own comment; other comments reserve the same width so the timestamp never moves */
.comment .who .own { width: 26px; flex: none; }
.note .who details.own > summary, .comment .who details.own > summary { width: 26px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); overflow: visible; }
.note .who details.own > summary:hover, .comment .who details.own > summary:hover { color: var(--text); }
.note .who details.own > summary i, .note .who details.own > summary svg, .comment .who details.own > summary i, .comment .who details.own > summary svg { margin: 0; vertical-align: -3px; }
.note .who details.own > div, .comment .who details.own > div { min-width: 170px; padding: 6px; }
.note .who details.own > div > form, .comment .who details.own > div > form { display: block; padding: 0; min-width: 0; border: 0; }
.note .who details.own button.link, .comment .who details.own button.link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 13px; text-align: left; }
.note .who details.own button.link:hover, .comment .who details.own button.link:hover { background: var(--surface-3); text-decoration: none; }
.note .who details.own button.link.danger, .comment .who details.own button.link.danger { color: var(--bad); }
.note .who details.own button.link i, .note .who details.own button.link svg, .comment .who details.own button.link i, .comment .who details.own button.link svg { width: 14px; height: 14px; margin: 0; color: inherit; }
.note .who .when { margin-left: auto; }
/* comments: own comments get small text actions after the date, shown on hover. No dropdown: nothing to
   overlap the timestamp, nothing that shifts when opened. */
.note .who { align-items: center; }
.note .who .when { margin-left: auto; order: 10; }   /* always last: the timestamp lines up on every comment */
.note .who .own { display: inline-flex; gap: 10px; opacity: 0; transition: opacity .12s; }
.note:hover .who .own, .note .who .own:focus-within { opacity: 1; }
.note .who .own form { display: inline; }
.note .who .own button.link { font-size: 12px; font-weight: 500; color: var(--muted); }
.note .who .own button.link:hover { color: var(--text); text-decoration: none; }
.note .who .own button.link.danger:hover { color: var(--bad); }
ul.reflist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ul.reflist li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
ul.reflist .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ref-row { display: flex; gap: 6px; width: 100%; }
.ref-row input { height: 32px; font-size: 13px; }
.ref-row input:first-child { flex: 0 0 38%; }
.ref-row button { flex: none; width: 32px; padding: 0; }
dialog.modal.leave .body p { margin: 0 0 8px; } dialog.modal.leave .url { word-break: break-all; color: var(--text-2); padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
dialog.modal.leave header .btn { font-size: 18px; line-height: 1; padding: 0 8px; }
.side-meta .person { font-size: 13px; }
/* checklist: stacked foldable cards */
.stack#cl-page { display: flex; flex-direction: column; gap: 16px; }
.stack#cl-page > .card { margin: 0; }
.card.cl > h2 { gap: 10px; justify-content: flex-start; }
.card.cl > h2 > .title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card.cl > h2 > .title small { font-size: 12px; font-weight: 400; }
.card.cl > h2 > .title > .progress { width: 140px; flex: none; }
.card.cl > h2 > .fold { height: 22px; width: 22px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; }
.card.cl > h2 > .fold:hover { color: var(--text); background: var(--surface-3); }
.card.cl > h2 > .fold i, .card.cl > h2 > .fold svg { margin: 0; transition: transform .15s; }
.card.cl.folded > h2 > .fold i, .card.cl.folded > h2 > .fold svg { transform: rotate(-90deg); }
.card.cl.folded > h2 { border-bottom: 0; border-radius: var(--radius); }
.card.cl > h2 form.bulk { display: flex; align-items: center; gap: 8px; margin: 0; }
.card.cl > .body { margin: 0 !important; }
.seg > button { font: inherit; font-size: 13px; font-weight: 500; height: auto; border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; background: var(--surface); color: var(--muted); }
.seg > button:last-child { border-right: 0; }
.seg > button.active { background: var(--primary); color: #fff; }

/* Version changes: word diff painted over the fields */
.diff { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }
.diff ins { background: color-mix(in srgb, var(--ok) 22%, light-dark(white, var(--surface))); color: var(--ok); text-decoration: none; padding: 1px 2px; border-radius: 2px; }
.diff del { background: color-mix(in srgb, var(--bad) 18%, light-dark(white, var(--surface))); color: var(--bad); text-decoration: line-through; padding: 1px 2px; border-radius: 2px; }
.diffing > .diff { padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
#diff-btn.active { background: var(--accent); color: #fff; }
/* scope tab: stacked cards */
#scope-page { display: flex; flex-direction: column; gap: 20px; }
#scope-page > .card { margin: 0; }
#scope-page > .card > h2 > .title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#scope-page > .card > .body { margin: 16px 20px; }
#scope-page > .card > .body > .block:last-child, #scope-page > .card > .body > .fgrid:last-child { margin-bottom: 0; }
#scope-page .prose.lead { font-size: 15px; margin: 0 0 16px; }
#scope-page > .scope-top { display: flex; gap: 20px; align-items: stretch; }
#scope-page > .scope-top > #assignment { flex: 1 1 0; min-width: 0; margin: 0; }
#scope-page > .scope-top > #timing { flex: 0 0 300px; margin: 0; }
#scope-page > .scope-top > #timing > dl.meta { margin: 16px 20px; gap: 10px 20px; }
#scope-page > .scope-top > #timing > dl.meta dd { font-size: 13.5px; }
@media (max-width: 1000px) { #scope-page > .scope-top { flex-direction: column; } #scope-page > .scope-top > #timing { flex-basis: auto; width: 100%; } }
/* profile pictures */
img.avatar { object-fit: cover; padding: 0; display: inline-block; vertical-align: middle; }
.avatar.lg { width: 96px; height: 96px; font-size: 32px; background: var(--surface-3); border-color: var(--border); color: var(--text-2); }
.pic-row { display: flex; align-items: center; gap: 20px; margin: 0 20px 16px; }
.pic-controls { display: flex; gap: 8px; align-items: center; }
.pic-editor { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.crop { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); cursor: grab; touch-action: none; user-select: none; }
.crop:active { cursor: grabbing; }
.crop canvas { display: block; }
.pic-zoom { flex-direction: row; align-items: center; gap: 10px; }
.pic-zoom input[type=range] { width: 200px; height: auto; padding: 0; border: 0; box-shadow: none; }
dialog.modal { margin: auto !important; }   /* a dialog inside a card must not inherit the card's child margins */

/* ---------- assessment files ---------- */
.assessment-files { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 6px #18181b03; }
.assessment-files-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.assessment-files-title, .assessment-files-actions, .assessment-files-sharing, .assessment-file-name { display: flex; align-items: center; }
.assessment-files-title { gap: 11px; }
.assessment-files-icon, .assessment-file-icon { display: grid; place-items: center; flex: none; color: var(--muted); background: var(--surface-3); }
.assessment-files-icon { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; }
.assessment-files-icon svg { width: 17px; height: 17px; }
.assessment-files-title h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; }
.assessment-files-title h2 > span { padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 500; }
.assessment-files-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.assessment-files-actions { gap: 12px; }
.assessment-files-sharing { gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.assessment-files-sharing a { margin-left: 2px; }
.assessment-files-table { overflow-x: auto; padding: 8px; }
.assessment-files-table table { min-width: 700px; margin: 0; }
.assessment-files-table thead th { padding: 9px 12px; border-bottom: 0; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 550; text-transform: uppercase; letter-spacing: .04em; }
.assessment-files-table thead th:first-child { border-radius: 6px 0 0 6px; }
.assessment-files-table thead th:last-child { border-radius: 0 6px 6px 0; }
.assessment-files-table tbody td { padding: 13px 12px; border-color: var(--border); font-size: 12.5px; vertical-align: middle; }
.assessment-files-table tbody tr:last-child td { border-bottom: 0; }
.assessment-file-name { min-width: 180px; gap: 9px; color: var(--text); font-weight: 500; }
.assessment-file-name:hover { color: var(--accent); text-decoration: none; }
.assessment-file-icon { width: 28px; height: 30px; border: 1px solid var(--border); border-radius: 5px; }
.assessment-file-icon svg { width: 14px; height: 14px; }
.assessment-files-table td.empty { padding: 48px 18px; text-align: center; }
.assessment-files-table td.empty > :is(i, svg) { display: block; width: 24px; height: 24px; margin: 0 auto 9px; color: var(--faint); }
.assessment-files-table td.empty strong, .assessment-files-table td.empty span { display: block; }
.assessment-files-table td.empty strong { color: var(--text); font-size: 13px; }
.assessment-files-table td.empty span { margin-top: 4px; color: var(--muted); font-size: 12px; }

dialog.assessment-file-modal { width: min(530px, calc(100vw - 32px)); }
dialog.assessment-file-modal header { align-items: flex-start; }
dialog.assessment-file-modal header h2 { margin: 0; }
dialog.assessment-file-modal header p { margin: 3px 0 0; font-size: 12px; }
dialog.assessment-file-modal label.drop { min-height: 170px; flex-direction: column; gap: 11px; border-color: var(--border-strong); background: var(--surface-2); }
dialog.assessment-file-modal label.drop > span:not(.drop-icon) { display: flex; flex-direction: column; gap: 3px; }
dialog.assessment-file-modal label.drop > span b { font-size: 13px; }
dialog.assessment-file-modal label.drop > span small { color: var(--muted); font-size: 12px; }
dialog.assessment-file-modal .drop-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
dialog.assessment-file-modal label.drop:hover .drop-icon, dialog.assessment-file-modal label.drop.over .drop-icon { color: var(--accent); border-color: var(--accent-ring); }

@media (max-width: 640px) {
  .assessment-files-head { align-items: flex-start; flex-direction: column; padding: 16px; }
  .assessment-files-actions { width: 100%; justify-content: space-between; }
  .assessment-files-sharing { white-space: normal; }
}

/* ---------- assessment activity ---------- */
.assessment-activity { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 6px #18181b03; }
.assessment-activity-head { padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.assessment-activity-title { display: flex; align-items: center; gap: 11px; }
.assessment-activity-title-icon, .assessment-activity-event-icon { display: grid; place-items: center; flex: none; }
.assessment-activity-title-icon { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.assessment-activity-title-icon svg { width: 17px; height: 17px; }
.assessment-activity-title h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; }
.assessment-activity-title h2 > span { padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 500; }
.assessment-activity-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.assessment-activity-list { margin: 0; padding: 8px 20px; list-style: none; }
.assessment-activity-entry { position: relative; display: flex; gap: 12px; padding: 12px 0; }
.assessment-activity-entry:not(:last-child)::before { content: ""; position: absolute; z-index: 0; top: 39px; bottom: -7px; left: 14px; width: 1px; background: var(--border); }
.assessment-activity-event-icon { position: relative; z-index: 1; width: 29px; height: 29px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); }
.assessment-activity-event-icon svg { width: 14px; height: 14px; }
.assessment-activity-entry.verb-created .assessment-activity-event-icon, .assessment-activity-entry.verb-published .assessment-activity-event-icon { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, light-dark(white, var(--border))); background: var(--ok-tint); }
.assessment-activity-entry.verb-deleted .assessment-activity-event-icon { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, light-dark(white, var(--border))); background: var(--bad-tint); }
.assessment-activity-entry.verb-commented .assessment-activity-event-icon { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-tint); }
.assessment-activity-entry-body { min-width: 0; padding: 1px 0; }
.assessment-activity-entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; color: var(--muted); font-size: 12px; }
.assessment-activity-entry-meta .avatar { width: 22px; height: 22px; font-size: 10px; }
.assessment-activity-actor { display: inline-flex; align-items: center; gap: 6px; }
.assessment-activity-entry-meta b { color: var(--text); font-weight: 550; }
.assessment-activity-entry-meta time { font-variant-numeric: tabular-nums; }
.assessment-activity-entry-meta .chip { padding: 2px 6px; font-size: 10px; }
.assessment-activity-entry-body p { margin: 6px 0 0; color: var(--text); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.assessment-activity-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 18px; text-align: center; }
.assessment-activity-empty > :is(i, svg) { width: 24px; height: 24px; margin-bottom: 9px; color: var(--faint); }
.assessment-activity-empty strong { color: var(--text); font-size: 13px; }
.assessment-activity-empty span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.assessment-activity-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 12px; }
.assessment-activity-pagination > :last-child { justify-self: end; }
.assessment-activity-page-link { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: var(--text-2); font-size: 12px; font-weight: 500; }
.assessment-activity-page-link:hover { color: var(--accent); text-decoration: none; }
.assessment-activity-page-link svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .assessment-activity-head { padding: 16px; }
  .assessment-activity-list { padding: 8px 16px; }
  .assessment-activity-entry { gap: 10px; }
}