/* Assessed Intelligence product UI -- Brand Guidelines (web layer).
 *
 * Light, paper-first (60% paper, 30% brand, 8% grey, 2% accent). Lato only.
 * Square corners everywhere. Radical Red is reserved for critical signals;
 * Turquoise appears only on the dark header. Severity is carried by label
 * and tone (red, Mirage, Rhino tint, grey), never by color alone.
 */
:root {
  --mirage: #0E1426;
  --rhino: #2E3F62;
  --radical-red: #FF4B6F;
  --red-ink: #C8264A;            /* Radical Red darkened for text on white (AA) */
  --turquoise: #00E6E4;
  --desert-storm: #F7F7F7;
  --metric-bg: #F1F2F3;
  --ash: #B9BBBD;
  --iridium: #3D3C3A;
  --thunder: #33292F;
  --white: #FFFFFF;
  --rhino-tint: #E6E9EF;
  --line: rgba(185, 187, 189, 0.5);
  --shadow: 0 10px 30px rgba(14, 20, 38, 0.06);
  --ink: var(--mirage);
  --ink-2: var(--iridium);
  --ink-3: #5F6368;
  --gap: 20px;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; border-radius: 0 !important; }
[hidden] { display: none !important; }
html { background: var(--desert-storm); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--desert-storm); color: var(--ink-2);
  font: 400 15px/1.55 "Lato", "Segoe UI", system-ui, sans-serif; }
a { color: var(--rhino); font-weight: 700; }
a:hover { color: var(--mirage); }
:focus-visible { outline: 2px solid var(--rhino); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 9; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- header */
.top { display: flex; align-items: center; gap: 32px; padding: 0 32px; height: 64px;
  background: var(--mirage); position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* The Assessed Solutions logo: white on transparent, so it sits on Mirage only. */
.brand img { display: block; height: 40px; width: auto; }
.top nav { display: flex; gap: 4px; height: 100%; }
.top nav a { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 100%;
  color: #C9CCD3; font-weight: 700; text-decoration: none; font-size: 14px;
  border-bottom: 3px solid transparent; }
.top nav a:hover { color: var(--white); }
.top nav a.active { color: var(--white); border-bottom-color: var(--turquoise); }
.badge { background: var(--radical-red); color: var(--white); font-size: 11px; font-weight: 900;
  padding: 1px 7px; line-height: 18px; }
.who { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.who button { background: transparent; color: #C9CCD3; border: 1px solid rgba(255,255,255,.3); }
.who button:hover { color: var(--white); border-color: var(--white); }

/* ---------------------------------------------------------------- layout */
main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 36px 32px 48px; flex: 1; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rhino); margin: 0 0 8px; }
h1 { font-size: 30px; font-weight: 900; color: var(--mirage); margin: 0 0 6px; line-height: 1.2; }
h1::after { content: ""; display: block; width: 48px; height: 3px; background: var(--radical-red);
  margin-top: 12px; }
h2 { font-size: 18px; font-weight: 900; color: var(--mirage); margin: 36px 0 12px; }
h3 { font-size: 15px; font-weight: 700; color: var(--mirage); margin: 0 0 6px; }
.lead { color: var(--ink-2); margin: 12px 0 24px; max-width: 760px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.card { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 20px; }
.grid { display: grid; gap: var(--gap); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); align-items: start; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------ metric cards */
.kpi { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--rhino);
  box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; height: 100%; }
.kpi.critical { border-top-color: var(--radical-red); }
.kpi .k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rhino); order: -1; margin-bottom: 6px; }
.kpi .v { font-size: 2.3rem; font-weight: 900; color: var(--mirage); line-height: 1.1; }
.kpi .x { margin-top: 8px; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rhino); background: var(--metric-bg); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.link { cursor: pointer; }
tr.link:hover td, tr.link:focus-within td { background: #FAFBFC; }
td strong { color: var(--mirage); }

/* ------------------------------------------------------------- tags / chips */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; font-size: 12px;
  font-weight: 700; white-space: nowrap; border: 1px solid transparent; line-height: 18px;
  background: var(--metric-bg); color: var(--iridium); margin: 2px 4px 2px 0; }
.tag.critical, .tag.REQUIRED, .tag.rejected, .tag.unsupported, .tag.failed
  { background: #FFF0F3; color: var(--red-ink); border-color: #FFC7D3; }
.tag.critical::before, .tag.REQUIRED::before { content: ""; width: 7px; height: 7px; background: var(--radical-red); }
.tag.high { background: var(--mirage); color: var(--white); }
.tag.medium, .tag.RECOMMENDED, .tag.pending, .tag.partially_supported
  { background: var(--rhino-tint); color: var(--rhino); }
.tag.low, .tag.NOT_REQUIRED { background: var(--metric-bg); color: var(--ink-3); }
.tag.good, .tag.accepted, .tag.supported, .tag.assessed
  { background: var(--white); color: var(--rhino); border-color: var(--rhino); }
.tag.good::before, .tag.accepted::before, .tag.supported::before, .tag.assessed::before { content: "✓"; }

/* ------------------------------------------------------------------ meters */
.meter { height: 8px; background: var(--metric-bg); display: flex; margin: 8px 0 4px;
  border: 1px solid var(--line); }
.meter i { display: block; height: 100%; background: var(--rhino); }
.meter i.collected { background: var(--ash); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px;
  margin-right: 5px; vertical-align: -1px; }
.legend .lv::before { background: var(--rhino); }
.legend .lc::before { background: var(--ash); }
.bars { display: grid; grid-template-columns: 180px 1fr 24px; gap: 8px 12px; align-items: center; }
.bar { height: 10px; background: var(--metric-bg); border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--rhino); }

/* ----------------------------------------------------------------- buttons */
/* The AI Split Button: italic bold label + square icon box. */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px;
  border: 1px solid var(--mirage); background: var(--mirage); color: var(--white); font: inherit;
  font-weight: 700; font-size: 14px; line-height: 1.3; cursor: pointer; text-decoration: none;
  white-space: nowrap; }
.btn .label { display: inline; }
.btn.secondary { background: var(--white); color: var(--rhino); border-color: var(--rhino); }
.btn:hover { background: var(--rhino); border-color: var(--rhino); color: var(--white); }
.btn.secondary:hover { background: var(--rhino-tint); color: var(--mirage); border-color: var(--rhino); }
.btn:disabled { opacity: .5; cursor: default; }
button.plain { font: 700 13px "Lato", sans-serif; padding: 7px 14px; background: var(--white);
  color: var(--mirage); border: 1px solid var(--mirage); cursor: pointer; }
button.plain:hover { background: var(--mirage); color: var(--white); }
button.plain.danger { color: var(--red-ink); border-color: var(--red-ink); }
button.plain.danger:hover { background: var(--red-ink); color: var(--white); }

/* ------------------------------------------------------------------- forms */
input, select, textarea { font: 400 14px "Lato", sans-serif; padding: 9px 11px; width: 100%;
  border: 1px solid var(--ash); background: var(--white); color: var(--mirage); }
input:focus, select:focus, textarea:focus { border-color: var(--rhino); outline: 1px solid var(--rhino); }
textarea { min-height: 84px; resize: vertical; }
label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rhino); margin: 14px 0 6px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.filters label { margin-top: 0; }
.choices { display: flex; gap: 0; flex-wrap: wrap; }
.choices label { margin: 0; display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px;
  border: 1px solid var(--ash); margin-right: -1px; cursor: pointer; text-transform: none;
  letter-spacing: 0; font-size: 14px; font-weight: 700; color: var(--mirage); background: var(--white); }
.choices input { width: auto; accent-color: var(--rhino); }
.choices label:has(input:checked) { background: var(--rhino); color: var(--white); border-color: var(--rhino); }

/* -------------------------------------------------------------- page parts */
.question { border-top: 1px solid var(--line); padding: 18px 0; }
.question:first-child { border-top: 0; padding-top: 4px; }
.question .meta { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.jump a { font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); background: var(--white);
  text-decoration: none; color: var(--rhino); }
.claims { padding-left: 0; list-style: none; margin: 0; }
.claims li { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--rhino);
  padding: 10px 12px; margin-bottom: 8px; }
.claims li.bad { border-left-color: var(--radical-red); }
details.help { background: var(--white); border: 1px solid var(--line); padding: 12px 16px; margin: 12px 0; }
details.help summary { cursor: pointer; font-weight: 700; color: var(--rhino); }
dl.defs { display: grid; grid-template-columns: 220px 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 14px; }
dl.defs dt { font-weight: 700; color: var(--mirage); }
dl.defs dd { margin: 0; }
.empty { padding: 36px 24px; text-align: center; color: var(--ink-3); }
.empty .btn { margin-top: 16px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.type { text-align: left; padding: 16px; background: var(--white); border: 1px solid var(--line);
  cursor: pointer; font: inherit; color: var(--ink-2); }
.type strong { display: block; color: var(--mirage); margin-bottom: 4px; }
.type:hover, .type.on { border-color: var(--rhino); box-shadow: inset 0 3px 0 var(--rhino); }
.type[disabled] { cursor: default; opacity: .6; box-shadow: none; }
pre.policy { background: var(--metric-bg); border: 1px solid var(--line); padding: 12px; font: 12px var(--mono);
  max-height: 220px; overflow: auto; white-space: pre; }
.signin-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); max-width: 980px;
  margin: 48px auto 0; box-shadow: var(--shadow); }
.signin-hero { background: var(--mirage); padding: 40px; display: flex; align-items: flex-end; }
.signin-hero .motto { font-size: clamp(34px, 5vw, 56px); }
.signin-wrap .signin { margin: 0; box-shadow: none; }
/* The sign-in screen carries the motto as its hero. The footer carries it on
   every page, so on that one screen it appeared twice, a few hundred pixels
   apart -- and a line repeated is a line that stops landing. */
body:has(.signin-wrap) .foot .motto { display: none; }

@media (max-width: 760px) { .signin-wrap { grid-template-columns: 1fr; margin-top: 16px; }
  .signin-hero { padding: 28px; } }
.signin { max-width: 460px; margin: 48px auto 0; }
.signin h1::after { margin-bottom: 4px; }

/* ------------------------------------------------------------------ footer */
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 32px; font-size: 12px; background: var(--mirage); color: #C9CCD3; }
.foot .muted { color: #9AA0AA; }
/* The Assessed Solutions motto: Lato, stacked, Title Case, Radical Red period. */
.motto { margin: 0; font-weight: 400; line-height: 1.15; color: var(--white); }
.motto span { display: block; }
.motto .dot { display: inline; color: var(--radical-red); }
.foot { align-items: flex-end; }
.foot .motto { font-size: 15px; }

#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: 560px;
  background: var(--mirage); color: var(--white); padding: 12px 18px; border-left: 4px solid var(--turquoise);
  box-shadow: 0 10px 30px rgba(14, 20, 38, .2); font-size: 14px; z-index: 10; }
#toast.error { border-left-color: var(--radical-red); }

@media (max-width: 860px) {
  .top { padding: 0 16px; gap: 12px; height: auto; flex-wrap: wrap; }
  .top nav { height: 48px; overflow-x: auto; }
  main { padding: 24px 16px 40px; }
  .split, .filters { grid-template-columns: 1fr; }
  .bars { grid-template-columns: 120px 1fr 24px; }
  dl.defs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ evidence automation */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.step { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--rhino);
  padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.step h3 { margin: 0; }
.step .eyebrow { margin: 0; }
.step p.small { margin: 0 0 6px; color: var(--ink-2); flex: 1; }
.step .btn { align-self: flex-start; }
.step .btn { max-width: 100%; }
.step .btn { white-space: normal; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.chips button { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; cursor: pointer;
  background: var(--white); color: var(--rhino); border: 1px solid var(--line); }
.chips button:hover { border-color: var(--rhino); }
.chips button.on { background: var(--rhino); color: var(--white); border-color: var(--rhino); }
.tag.informational { background: var(--metric-bg); color: var(--ink-3); }

/* ------------------------------------------------------ finding occurrences */
details.occ { margin-top: 10px; }
details.occ summary { cursor: pointer; color: var(--rhino); font-size: 13px; }
details.occ .table-wrap { margin-top: 8px; }
td.ctx { word-break: break-all; color: var(--ink-2); }

/* ------------------------------------------------------------------- admin */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin: 8px 0 24px; }
.tabs a { padding: 10px 16px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 14px;
  border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--rhino); }
.tabs a.on { color: var(--mirage); border-bottom-color: var(--rhino); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 14px; color: var(--ink-2); margin-top: 10px; }
label.check input { width: auto; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lib-card { text-align: left; font: inherit; cursor: pointer; background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--rhino); padding: 16px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.lib-card strong { color: var(--mirage); font-size: 16px; }
.lib-card .eyebrow { margin: 0; }
.lib-card .provides { display: flex; flex-wrap: wrap; }
.lib-card .mode { margin-top: auto; color: var(--rhino); font-weight: 700; }
.lib-card:hover { box-shadow: var(--shadow); border-color: var(--rhino); }
.lib-card.planned { cursor: default; opacity: .6; border-top-color: var(--ash); box-shadow: none; }
.setup { margin-top: 20px; max-width: 820px; }
.setup .steps-list ol { padding-left: 20px; }
.setup .pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; }
.secret-card { border-left: 4px solid var(--rhino); margin-top: 16px; }
pre.secret { font-size: 14px; word-break: break-all; white-space: pre-wrap; }
form.accept { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------------------------ source map */
.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.repo-card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.repo-head { background: var(--mirage); color: var(--white); padding: 12px 16px; display: grid;
  grid-template-columns: 1fr auto; column-gap: 12px; }
.repo-kind { grid-column: 1; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--turquoise); }
.repo-name { grid-column: 1; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.repo-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; color: #C9CCD3; }
.repo-systems { list-style: none; margin: 0; padding: 8px 16px 12px 28px; position: relative; }
.repo-systems::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 26px;
  border-left: 1px solid var(--ash); }
.repo-systems li { position: relative; padding: 6px 0; }
.repo-systems li::before { content: ""; position: absolute; left: -12px; top: 22px; width: 10px;
  border-top: 1px solid var(--ash); }
.repo-systems a { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; text-decoration: none;
  color: var(--ink); padding: 6px 10px; border-left: 3px solid var(--line); }
.repo-systems a:hover { background: var(--desert-storm); }
.repo-systems .sev-critical a { border-left-color: var(--radical-red); }
.repo-systems .sev-high a { border-left-color: var(--mirage); }
.repo-systems .sev-medium a { border-left-color: var(--rhino); }
.repo-systems .sev-low a { border-left-color: var(--ash); }
.sys-name { font-weight: 700; font-size: 14px; }
.sys-meta { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.sys-score { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 900; font-size: 16px;
  color: var(--rhino); }
.tabs .count { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; background: var(--rhino-tint);
  color: var(--rhino); }

/* ------------------------------------------------------------------ radar */
.radar-split { grid-template-columns: minmax(340px, 460px) 1fr; align-items: start; }
svg.radar { width: 100%; height: auto; display: block; font-family: Lato, system-ui, sans-serif; }
svg.radar .grid-ring { fill: none; stroke: #D9DCE1; stroke-width: 1; }
svg.radar .axis { stroke: #D9DCE1; stroke-width: 1; }
svg.radar .ring-label { fill: var(--ink-3); font-size: 10px; }
svg.radar .axis-label { fill: var(--mirage); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
svg.radar .series { stroke-width: 2; stroke-linejoin: round; }
svg.radar .series.s1 { fill: #3F5BA9; fill-opacity: .18; stroke: #3F5BA9; }
svg.radar .series.s2 { fill: none; stroke: #00A3A0; }
svg.radar .dot { stroke: #FFFFFF; stroke-width: 2; }
svg.radar .dot.s1 { fill: #3F5BA9; }
svg.radar .dot.s2 { fill: #00A3A0; }
svg.radar .dot:hover, svg.radar .dot:focus { r: 7; outline: none; }
.radar-legend .key { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 13px; }
.radar-legend .key::before { content: ""; width: 22px; height: 0; border-top: 3px solid; }
.radar-legend .key.s1::before { border-color: #3F5BA9; }
.radar-legend .key.s2::before { border-color: #00A3A0; border-top-style: dashed; }
@media (max-width: 1100px) {
  /* A grid track sized `1fr` still refuses to shrink below its content's
     min-content width, so the domain table pushed the whole page sideways
     instead of scrolling inside its own wrapper. minmax(0, 1fr) plus
     min-width: 0 on the children is what actually lets it. */
  .radar-split { grid-template-columns: minmax(0, 1fr); }
  .radar-split > * { min-width: 0; }
  .radar-split .card { max-width: 100%; }
  .radar-split svg { max-width: 100%; height: auto; }
}

/* --------------------------------------------------------------- oversight */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.doc-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--rhino); padding: 20px; }
.doc-card h2 { margin: 0; font-size: 20px; }
dl.defs.compact { margin: 10px 0 0; }
.approve-card { max-width: 820px; margin: 10px 0 18px; border-left: 4px solid var(--radical-red); }
.approve-card.ok { border-left-color: var(--rhino); }
.doc-table { overflow-x: auto; }
.doc-table table { min-width: 1100px; font-size: 13px; }
.doc-table th.editable { color: var(--rhino); }
.doc-table .fill-me { color: var(--rhino); font-style: italic; }
.doc-table .edited { text-decoration: underline dotted var(--rhino); text-underline-offset: 3px; }
a.link-card { display: block; text-decoration: none; color: var(--ink-2); font-weight: 400; }
a.link-card:hover { box-shadow: var(--shadow); color: var(--ink-2); }
a.link-card > span { color: var(--rhino); font-weight: 700; }
h2.flush { margin: 0 0 4px; }

/* sortable tables with a column chooser */
.table-tools { align-items: center; margin: 18px 0 8px; }
.table-tools .hint { margin: 0; }
.grid table th { padding: 0; }
.grid th button.sort { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px;
  cursor: pointer; font: inherit; font-weight: 700; white-space: nowrap; }
.grid th button.sort:hover { color: var(--rhino); }
.grid th button.sort:focus-visible { outline: 2px solid var(--rhino); outline-offset: -2px; }
.grid th button.sort::after { content: "\2195"; margin-left: 6px; color: var(--ash); font-weight: 400; }
.grid th button.sort.on.asc::after { content: "\2191"; color: var(--rhino); }
.grid th button.sort.on.desc::after { content: "\2193"; color: var(--rhino); }
.grid td.clip { max-width: 320px; }
.grid td:first-child { min-width: 220px; }
.grid .late { color: var(--red-ink); font-weight: 700; }
.grid .score { white-space: nowrap; font-weight: 700; color: var(--mirage); }
details.col-chooser { position: relative; }
details.col-chooser summary { cursor: pointer; list-style: none; font: 700 13px "Lato", sans-serif; padding: 7px 14px;
  background: var(--white); border: 1px solid var(--line); color: var(--mirage); }
details.col-chooser summary::-webkit-details-marker { display: none; }
details.col-chooser[open] summary { border-color: var(--rhino); }
details.col-chooser .col-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 14px 12px; }
details.col-chooser .col-list label.check { margin-top: 6px; }
details.col-chooser .col-list button { margin-top: 10px; }

/* modal dialogs */
dialog.modal { border: 1px solid var(--line); border-top: 4px solid var(--rhino); padding: 0; width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: hidden auto; background: var(--white); color: var(--ink-2); box-shadow: 0 24px 60px rgba(14, 20, 38, 0.25); }
dialog.modal.wide { width: min(1240px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(14, 20, 38, 0.45); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 10px;
  position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--line); z-index: 1; }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-head .close { font-size: 20px; line-height: 1; padding: 4px 10px; }
.modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding: 16px 22px 22px; }
@media (max-width: 1180px) { .modal-body { grid-template-columns: minmax(0, 1fr); } }
.risk-form .field { margin-bottom: 12px; }
.risk-form .field p { margin: 4px 0 0; }
.risk-form span.label, .grid-score span.label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }
.risk-form fieldset { border: 1px solid var(--line); padding: 10px 14px 4px; margin: 0 0 12px; }
.risk-form legend { font-weight: 700; color: var(--mirage); padding: 0 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
.modal-body.solo { grid-template-columns: 1fr; }
.modal-body h3.flush, .modal-body p.flush { margin: 0 0 4px; }
/* What is known about one piece of evidence: label above value, wrapping to
   as many columns as the dialog has room for. */
.kvs { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 12px 0 14px;
  padding: 12px 14px; background: var(--desert-storm); border: 1px solid var(--line); }
.kv { min-width: 120px; }
.kv .eyebrow { display: block; margin-bottom: 2px; }
/* What the collector read, as it read it. It is a fragment of a source
   system, so it scrolls in place rather than pushing the page around. */
pre.payload { margin: 0; padding: 12px 14px; background: var(--mirage); color: #E8EAF0;
  font: 12px/1.5 var(--mono); max-height: 420px;
  overflow: auto; white-space: pre-wrap; word-break: break-word; }
.grid-score { display: grid; grid-template-columns: 90px 90px 90px 1fr; gap: 6px 10px; align-items: center; }
.grid-score select { width: 100%; }
.grid-score .score, .grid-score .muted { white-space: nowrap; }
.grid-score span.label { margin: 0; }
.modal-actions { margin-top: 14px; }
.history h3 { margin: 0 0 8px; font-size: 15px; }
ol.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rhino-tint); }
ol.timeline li { padding: 0 0 12px 12px; position: relative; }
ol.timeline li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; background: var(--rhino); }
ol.timeline .was { text-decoration: line-through; color: var(--ink-3); }
ol.timeline .note { margin: 4px 0 0; padding: 6px 8px; background: var(--desert-storm); }
.who .me { display: inline-flex; flex-direction: column; align-items: flex-end; margin-right: 12px; line-height: 1.2; }
.who .me strong { color: var(--white); font-size: 13px; }
.who .me span { color: var(--ash); font-size: 11px; }

/* ------------------------------------------------------ questionnaire rows */
.answer-fields { display: grid; grid-template-columns: 1.2fr 1.2fr 180px; gap: 0 14px; margin-top: 6px; }
@media (max-width: 760px) { .answer-fields { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- sign-in */
.error-text { color: var(--red-ink); margin: 10px 0 0; min-height: 1em; }
button.linkish { background: none; border: 0; padding: 0; font: 700 14px "Lato", sans-serif; color: var(--rhino);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.linkish:hover { color: var(--mirage); }
.dev-signin { background: var(--desert-storm); border: 1px dashed var(--rhino); padding: 14px 16px; margin: 12px 0 18px; }
.dev-signin .hint { margin: 6px 0 4px; }

/* ------------------------------------------------------ framework alignment */
.align-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0 14px; }
.align-card { all: unset; box-sizing: border-box; cursor: pointer; background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--ash); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.align-card:hover { box-shadow: var(--shadow); }
.align-card:focus-visible { outline: 2px solid var(--rhino); outline-offset: 2px; }
.align-card.on { border-top-color: var(--rhino); box-shadow: var(--shadow); }
.align-card .k { font-size: 13px; font-weight: 700; color: var(--mirage); }
.align-card .v { font-size: 1.9rem; font-weight: 900; color: var(--mirage); line-height: 1.1; }
.align-card .x { font-size: 12px; color: var(--ink-3); }
/* ARISE leads: the framework every system is actually assessed against. */
.align-card.primary { border-top-color: var(--radical-red); }
.align-card.primary.on { border-top-color: var(--radical-red); }
.align-card .k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.align-card .k .tag { font-size: 10px; }
.align-detail h3.flush { margin: 0 0 2px; }
.align-detail .table-wrap { margin-top: 8px; }

/* --------------------------------------------------------- custom criteria */
.seg { display: inline-flex; border: 1px solid var(--line); margin: 4px 0 12px; flex-wrap: wrap; }
.seg button { font: 700 13px "Lato", sans-serif; padding: 7px 14px; background: var(--white); color: var(--ink-2);
  border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--rhino); color: var(--white); }
.rx-palette { display: grid; gap: 8px; margin: 8px 0 10px; }
.rx-group { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: start; }
.rx-group .label { padding-top: 6px; }
.rx-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-token { font: 400 12px "Lato", sans-serif; padding: 4px 8px; background: var(--desert-storm); border: 1px solid var(--line);
  color: var(--mirage); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rx-token:hover { border-color: var(--rhino); background: var(--white); }
.rx-token code { font-family: var(--mono); font-size: 11px; color: var(--rhino); }
.rx-explain { margin: 6px 0 0; padding-left: 20px; color: var(--ink-2); }
.rx-preview { background: var(--desert-storm); border: 1px solid var(--line); padding: 10px; max-height: 220px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; margin: 6px 0 10px; font-size: 12.5px; min-height: 2.5em; }
.rx-preview mark { background: #FFE08A; color: var(--mirage); padding: 0 1px; }
.rx-matches { margin: 6px 0 0; padding-left: 18px; }
.rx-matches code { font-family: var(--mono); font-size: 12px; }
#cr-pattern { font-family: var(--mono); }

/* ---------------------------------------------------- portfolio comparison */
.compare table { font-size: 13px; }
.compare th.dim { text-align: center; width: 38px; }
.compare td.heat { text-align: center; font-family: var(--mono); font-weight: 700; width: 38px; padding: 8px 4px; }
.compare td.heat.na { color: var(--ash); }
.compare tr.avg td { border-top: 2px solid var(--rhino); background: var(--desert-storm); }
.compare td.avg-cell { color: var(--mirage); font-weight: 700; }
.expo { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.expo-bar { flex: 1; height: 6px; background: var(--rhino-tint); position: relative; }
.expo-bar i { position: absolute; inset: 0 auto 0 0; background: var(--rhino); }
.heat-legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; }
.heat-legend i { width: 22px; height: 12px; display: inline-block; border: 1px solid var(--line); }
.heat-legend .muted { margin-left: 12px; }
.outliers { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--radical-red); }
.outliers h3 { margin: 0 0 6px; font-size: 14px; }
.outliers ul { margin: 0; padding-left: 18px; font-size: 13px; }
.side-by-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.side-card h3 { margin: 0; font-size: 16px; }
.kpis.mini { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 10px 0; }
.kpis.mini .kpi { padding: 10px 12px; }
.kpis.mini .kpi .v { font-size: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ---------------------------------------------------- continuous monitoring */
.card.monitor { margin: 8px 0 24px; }
.card.monitor h2 .tag { vertical-align: middle; margin-left: 6px; }
.expired-note { margin-top: 8px; }
.expired-note ul { margin: 4px 0 0; padding-left: 18px; }
details.clauses { margin-top: 14px; }
details.clauses > summary { cursor: pointer; font-weight: 700; color: var(--rhino); }

/* --------------------------------------------------------------- model card */
.mc-section { margin: 14px 0; }
.mc-section h3 { margin: 0 0 2px; }
.mc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.mc-field { border-top: 1px solid var(--line); padding-top: 8px; }
.mc-field.need { border-top: 2px solid var(--radical-red); }
.mc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-head .mc-edit { margin-left: auto; padding: 3px 10px; }
.mc-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.mc-text { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }
.kpi select { margin: 6px 0; }
.mc-doc header { border-bottom: 3px solid var(--rhino); margin-bottom: 12px; }
.mc-doc h1 { margin: 0; font-size: 24px; }
.mc-doc h2 { font-size: 17px; margin: 18px 0 2px; }
.mc-dl { display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px; margin: 8px 0 0; }
.mc-dl dt { font-weight: 700; color: var(--mirage); font-size: 13px; }
.mc-dl dd { margin: 0; }
.mc-dl .req { color: var(--red-ink); font-weight: 400; font-size: 11px; }
@media (max-width: 640px) { .mc-dl { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- impact map */
.im-wrap { position: relative; padding: 12px; }
.im-chart { width: 100%; height: auto; display: block; font-family: "Lato", "Segoe UI", sans-serif; }
.im-q { fill: var(--white); }
.im-q-fix_first { fill: #FFF5F7; }
.im-q-major { fill: #F4F6FA; }
.im-qlabel { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-3); }
.im-q-fix_first + .im-qlabel { fill: var(--red-ink); }
.im-grid { stroke: #E6E8EB; stroke-width: 1; }
.im-mid { stroke: var(--ash); stroke-width: 1.5; stroke-dasharray: 4 4; }
.im-tick { font-size: 11px; fill: var(--ink-3); }
.im-axis { font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.im-dot { cursor: pointer; outline: none; }
.im-hit { fill: transparent; }
.im-mark { fill: var(--rhino); stroke: var(--white); stroke-width: 2; }
.im-mark.hot { fill: var(--red-ink); }
.im-dot:hover .im-mark, .im-dot:focus .im-mark { stroke: var(--mirage); stroke-width: 3; }
.im-dot:focus-visible .im-hit { stroke: var(--rhino); stroke-width: 2; }
.im-count { font-size: 10px; font-weight: 700; fill: var(--white); pointer-events: none; }
.im-label { font-size: 12px; fill: var(--mirage); }
.im-tip { position: absolute; z-index: 5; max-width: 300px; background: var(--mirage); color: var(--white); padding: 10px 12px;
  box-shadow: var(--shadow); font-size: 13px; pointer-events: none; }
.im-tip .small { color: #C9CCD3; margin-top: 2px; }
.im-tip-item + .im-tip-item { border-top: 1px solid rgba(255,255,255,.2); margin-top: 6px; padding-top: 6px; }
dl.dim-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-size: 12px; }
dl.dim-key dt { font-family: var(--mono); font-weight: 700; color: var(--rhino); }
dl.dim-key dd { margin: 0 6px 0 0; color: var(--ink-2); }
dialog.modal.wide .grid table { font-size: 13px; }
dialog.modal .grid td.clip { min-width: 280px; }

/* ---------------------------------------------------- model card document */
.mcd-host { padding: 0 0 18px; }
.mcd { background: var(--desert-storm); }
.mcd-cover { background: var(--mirage); color: var(--white); padding: 26px 28px 22px; border-bottom: 4px solid var(--radical-red); }
.mcd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #9FB0D6; margin: 0 0 6px; }
.mcd-cover h1 { color: var(--white); font-size: 30px; font-weight: 900; margin: 0; line-height: 1.1; }
.mcd-cover h1::after { display: none; }
.mcd-sub { color: #C9CCD3; margin: 6px 0 0; font-size: 13px; }
.mcd-purpose { color: #E7E9EE; margin: 12px 0 0; max-width: 700px; }
.mcd-status { display: inline-block; margin-top: 14px; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.mcd-status.pub { background: var(--white); color: var(--mirage); }
.mcd-status.draft { border: 1px solid rgba(255,255,255,.5); color: var(--white); }
.mcd-glance { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border: 1px solid var(--line); margin: 0 16px; position: relative; top: -1px; }
.mcd-glance > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.mcd-glance > div:last-child { border-right: 0; }
.mcd-glance .k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mcd-glance .v { font-size: 20px; font-weight: 900; color: var(--mirage); margin-top: 2px; }
.mcd-glance .v.small { font-size: 14px; font-weight: 700; }
.mcd-glance .warn { color: var(--red-ink); }
.mcd-glance ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; }
.mcd-bar { height: 5px; background: var(--rhino-tint); margin-top: 6px; position: relative; }
.mcd-bar i { position: absolute; inset: 0 auto 0 0; background: var(--rhino); }
.mcd-profile { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--white); border: 1px solid var(--line); border-top: 0; margin: 0 16px; padding: 10px 14px; }
.mcd-profile .k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.mcd-profile .dim { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 10px; font-weight: 700; }
.mcd-profile .dim b { font-size: 14px; }
.mcd-profile .fp { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.mcd-changes { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--rhino); margin: 14px 16px 0; padding: 10px 14px; font-size: 13.5px; }
.mcd-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px 16px 0; }
.mcd-toc { position: sticky; top: 70px; align-self: start; font-size: 12.5px; }
.mcd-toc h3 { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.mcd-toc ol { list-style: none; margin: 0; padding: 0; }
.mcd-toc li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.mcd-toc a { color: var(--mirage); text-decoration: none; }
.mcd-toc .n { color: var(--red-ink); font-family: var(--mono); margin-right: 6px; }
.mcd-toc .c { color: var(--ink-3); white-space: nowrap; }
.mcd-sec, .mcd-points, .mcd-hist { background: var(--white); border: 1px solid var(--line); margin-bottom: 14px; }
.mcd-sec .sh { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.mcd-sec .sh .n { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--red-ink); line-height: 1.2; }
.mcd-sec .sh h2 { margin: 0; font-size: 16px; }
.mcd-sec .sh p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.mcd-sec .sh .c { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.mcd-row { display: grid; grid-template-columns: 180px 1fr 76px; gap: 12px; padding: 9px 18px; border-bottom: 1px solid #F0F1F3; font-size: 13px; }
.mcd-row:last-child { border-bottom: 0; }
.mcd-row.gap { background: #FFF8F9; }
.mcd-row .k { font-weight: 700; color: var(--ink-2); }
.mcd-row .v p { margin: 0; white-space: pre-wrap; }
.mcd-row .v ul { margin: 0; padding-left: 16px; }
.mcd-row .s { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: right; color: var(--ink-3); }
.mcd-row .s.manual { color: var(--rhino); }
.mcd .nd { color: var(--ink-3); font-style: italic; }
.mcd .req { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 10px; font-weight: 700; color: var(--red-ink); border: 1px solid #FFC7D3; }
.mcd-points { border-left: 4px solid var(--radical-red); padding: 12px 18px; }
.mcd-points h2, .mcd-hist h2 { margin: 0 0 6px; font-size: 15px; }
.mcd-points ul { margin: 0; padding-left: 18px; font-size: 13px; }
.mcd-hist { padding: 12px 18px; }
.mcd-prov { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }
@media (max-width: 760px) { .mcd-glance { grid-template-columns: 1fr 1fr; } .mcd-layout { grid-template-columns: 1fr; }
  .mcd-toc { position: static; } .mcd-row { grid-template-columns: 1fr; } .mcd-row .s { text-align: left; } }
details.mcq > summary { cursor: pointer; font-weight: 700; color: var(--rhino); }
details.mcq .question textarea { margin-top: 8px; }

tr.off td { opacity: .55; }
tr.off td:first-child strong { text-decoration: line-through; }
.rule-filters { flex: 1 1 560px; }
.rule-filters select, .rule-filters input { margin: 0; }

/* ------------------------------------------------------ why and guidance */
.why h3 { font-size: 15px; margin: 18px 0 6px; }
.why h4 { margin: 0 0 4px; font-size: 14px; }
.why-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.why-step { border-left: 3px solid var(--rhino); padding: 2px 0 2px 12px; margin: 10px 0; }
.why-step p { margin: 3px 0 0; font-size: 13.5px; }
.why-control { background: var(--desert-storm); border: 1px solid var(--line); padding: 12px 14px; margin: 10px 0; }
.why-control p { margin: 4px 0; }
.why-req { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 13px;
  border-top: 1px solid var(--line); padding: 6px 0; }
.why-list { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }
.why-list li { margin: 3px 0; }

/* ------------------------------------------------- capability stage ladder */
.ladder { display: flex; gap: 3px; min-width: 132px; }
.rung { width: 18px; height: 12px; background: var(--metric-bg); border: 1px solid var(--line);
  display: inline-block; }
.rung.on { background: var(--rhino); border-color: var(--rhino); }
.rung.now { background: var(--radical-red); border-color: var(--radical-red); }

/* ------------------------------------------------------------- manifest */
.mf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
  margin-top: 10px; }
.mf-section { background: var(--white); border: 1px solid var(--line); padding: 12px 14px; }
.mf-section h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); }
.mf-section .why-list { margin: 0; }

/* --------------------------------------------------- evidence freshness */
.fresh { display: grid; gap: 6px; margin: 10px 0 4px; }
.fresh-row { display: grid; grid-template-columns: 150px 1fr 42px; align-items: center; gap: 10px; }
.fresh-row .k { font-size: 13px; color: var(--ink-2); }
.fresh-row .v { font-size: 13px; font-weight: 700; text-align: right; }
.fresh-row .bar { background: var(--metric-bg); height: 12px; border: 1px solid var(--line); }
.fresh-row .bar i { display: block; height: 100%; background: var(--rhino); }
.fresh-row .bar i.critical { background: var(--radical-red); }
.fresh-row .bar i.medium { background: var(--ash); }
.fresh-row .bar i.good { background: var(--rhino); opacity: 0.55; }

/* A secondary act, set apart from the card's main buttons rather than
   buried in a sentence: reason on the left, the act on the right. */
.aside-action { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 16px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.aside-action p.flush { margin: 0; }
.aside-action > div { flex: 1 1 260px; }

/* ------------------------------------------------ portfolio fingerprints */
/* Ten narrow columns with wrapped headings, rather than ten sideways ones:
   the same table in less width, and no heading that runs out of room. */
.heatmap { table-layout: fixed; }
.heatmap th.heat-sys { min-width: 200px; }
/* Sentence case and no tracking: uppercase with .12em costs about a third of
   the width, which is the difference between "Irreversibility" fitting and
   breaking after "IRREVERSI". */
.heatmap th.heat-h { width: 88px; padding: 8px 5px; font-size: 11px; line-height: 1.3;
  letter-spacing: 0; text-transform: none; text-align: center; vertical-align: bottom;
  white-space: normal; overflow-wrap: break-word; }
.heatmap td.heat { padding: 3px; text-align: center; }
.heat-cell { display: block; min-width: 30px; padding: 6px 0; font-size: 12px; font-weight: 700;
  color: var(--white); background: var(--rhino); }
.heat-cell.v0 { background: var(--metric-bg); color: var(--ink-3); }
.heat-cell.v1 { background: #cfd6e4; color: var(--mirage); }
.heat-cell.v2 { background: #9aa8c4; color: var(--mirage); }
.heat-cell.v3 { background: #6b7da4; }
.heat-cell.v4 { background: var(--rhino); }
.heat-cell.v5 { background: var(--radical-red); }
.heat-cell.vx { background: repeating-linear-gradient(45deg, var(--metric-bg),
  var(--metric-bg) 3px, var(--white) 3px, var(--white) 6px); }
/* The scale and the sentence that gives it units, side by side. */
.heat-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin-top: 12px; }
.heat-scale { display: flex; align-items: center; gap: 4px; }
.heat-scale .heat-cell { min-width: 26px; padding: 4px 0; }
.heat-key .hint { margin: 0; flex: 1 1 320px; }

/* ------------------------------------------------------------- ARISE wheel */
/* A framework is a tree, and a tree has a shape: which domains are hollow,
   whether gaps cluster or spread. Colour is one hue stepped light to dark, so
   it reads as a quantity; the legend names every step, because nothing here
   is identified by colour alone. */
.wheel-wrap { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 8px 0 4px; }
.wheel { width: 100%; max-width: 760px; height: auto; display: block; }
.wedge { stroke: var(--white); stroke-width: 1; transition: opacity .12s ease; }
.wedge.dim { opacity: .18; }
.wedge.leaf { cursor: pointer; }
.wedge.leaf:hover, .wedge.leaf:focus { stroke: var(--mirage); stroke-width: 2; outline: none; }
.wlabel { font-weight: 600; pointer-events: none; }
.wlabel.wdomain { font-weight: 900; letter-spacing: .1em; fill: var(--white); }
.wlabel.dim { opacity: .2; }
.wheel-hub { fill: var(--white); stroke: var(--line); }
.wheel-name { font-weight: 900; font-style: italic; fill: var(--rhino); }
.wheel-sub { font-weight: 700; letter-spacing: .18em; fill: var(--ink-3); }
.wheel-tip { position: absolute; z-index: 5; max-width: 270px; padding: 7px 10px;
  background: var(--mirage); color: var(--white); font-size: 12px; line-height: 1.45;
  pointer-events: none; }
.wheel-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  font-size: 12px; color: var(--ink-2); }
.wkey { display: inline-flex; align-items: center; gap: 7px; }
.wkey i { width: 12px; height: 12px; border: 1px solid var(--line); display: inline-block; }
@media (max-width: 620px) { .wheel { max-width: 100%; } }
/* Out of scope is an outline, not a shade of covered. */
.wedge.out { stroke: #C6CBD6; stroke-dasharray: 3 2; }
.wkey.wscale { gap: 10px; }
.wkey.wscale b { font-weight: 700; color: var(--mirage); }
.wstep { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.wkey i.wout { background: var(--white); border: 1px dashed var(--ash); }

/* Where you are in the wheel, and the way back out. */
.wheel-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  align-self: flex-start; font-size: 12px; }
.wheel-crumb button[disabled] { color: var(--mirage); font-weight: 700; opacity: 1;
  cursor: default; }
.hub.up { cursor: pointer; }
.hub.up:hover .wheel-hub, .hub.up:focus .wheel-hub { stroke: var(--rhino); stroke-width: 2; }
.hub.up:focus { outline: none; }
.wheel-here { font-weight: 900; fill: var(--mirage); }
/* The shade scale: one domain's hue, none through all. */
.wramp { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--ink-3); }
.wramp i { width: 20px; height: 12px; border: 1px solid var(--line); display: inline-block; }
.wkey.wdomains { gap: 6px 12px; flex-wrap: wrap; }

/* ------------------------------------------------- compliance over time */
/* A photograph of a score answers a different question from whether it is
   still true next month. */
.sparks { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 12px; }
.sparks > div { flex: 1 1 240px; min-width: 0; }
.spark { width: 100%; height: 44px; display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--rhino); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.spark-line.down { stroke: var(--radical-red); }
.spark-dot { fill: var(--white); stroke: var(--rhino); stroke-width: 2; }
.move { font-size: 12px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.move.better { color: var(--rhino); }
.move.worse { color: var(--red-ink); }
.runway { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.runway-band { flex: 1 1 150px; padding: 12px 14px; background: var(--white);
  border: 1px solid var(--line); border-top: 4px solid var(--ash); }
.runway-band.critical { border-top-color: var(--radical-red); }
.runway-band.medium { border-top-color: var(--rhino); }
.runway-band .n { font-size: 26px; font-weight: 900; color: var(--mirage); line-height: 1.1; }
.runway-band .l { font-size: 12px; font-weight: 700; color: var(--rhino); margin-bottom: 2px; }

/* How worn the evidence is: a share of its own life, not a count of days. */
.fresh-card { margin-top: 12px; }
.fresh-v { margin: 0; font-size: 30px; font-weight: 900; color: var(--mirage); line-height: 1.1; }
.fresh-band { display: inline-block; margin-left: 10px; padding: 2px 9px; font-size: 12px;
  font-weight: 700; vertical-align: middle; border: 1px solid transparent; }
.fresh-band.fresh { background: var(--white); color: var(--rhino); border-color: var(--rhino); }
.fresh-band.ageing { background: var(--rhino-tint); color: var(--rhino); }
.fresh-band.stale { background: #FFF0F3; color: var(--red-ink); border-color: #FFC7D3; }
.fresh-band.unknown { background: var(--metric-bg); color: var(--ink-3); }
.fresh-card .meter { margin: 12px 0 10px; }

/* Scope: two named choices, not a box about one of them. */
.scope-field { margin-top: 14px; }
.scope-toggle { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.scope-opt { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start; text-align: left; padding: 10px 14px; background: var(--white);
  border: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--ink-2); }
.scope-opt.on { border-color: var(--rhino); border-left: 4px solid var(--rhino);
  background: var(--rhino-tint); color: var(--mirage); }
.scope-opt:focus-visible { outline: 2px solid var(--rhino); outline-offset: 2px; }
/* The systems it covers: add and remove, rather than a column to scan. */
.scope-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.scope-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  background: var(--white); border: 1px solid var(--line); cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-2); }
.scope-chip .mark { font-weight: 700; color: var(--ink-3); }
.scope-chip.on { background: var(--rhino); border-color: var(--rhino); color: var(--white); }
.scope-chip.on .mark { color: var(--white); }
.scope-chip:focus-visible { outline: 2px solid var(--rhino); outline-offset: 2px; }

/* ---------------------------------------------------------------- data map
   Columns, not a force-directed graph: data moves left to right and a reader
   should not have to untangle a hairball to see it. A node only ever names one
   thing, so the chip is the whole control -- click it for the files it was
   drawn from. */
.dm-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 14px; align-items: start; margin: 18px 0 24px; overflow-x: auto; padding-bottom: 6px; }
.dm-col { min-width: 0; }
.dm-head { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #5B6478; margin: 0 0 8px; }
.dm-stack { display: flex; flex-direction: column; gap: 6px; }
.dm-stack.row { flex-direction: row; flex-wrap: wrap; }
.dm-node { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer; padding: 9px 11px; border-radius: 0;
  background: #fff; border: 1px solid rgba(185,187,189,.6); border-left: 3px solid #2E3F62;
  font: inherit; font-size: 13px; color: #0E1426; }
.dm-stack.row .dm-node { width: auto; }
.dm-node:hover { background: #F7F7F7; }
.dm-node:focus-visible { outline: 2px solid #FF4B6F; outline-offset: 1px; }
.dm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-count { flex: none; font-size: 11px; font-weight: 700; color: #5B6478; }
/* A model somebody else runs is where data leaves, so it is the one thing on
   the map that is coloured as a warning rather than as a category. */
.dm-node.k-model_hosted { border-left-color: #FF4B6F; }
.dm-node.k-model_local { border-left-color: #00A3A1; }
.dm-node.k-data_class { border-left-color: #33292F; }
.dm-node.k-system { border-left-color: #0E1426; background: #0E1426; color: #fff; font-weight: 700; }
.dm-node.k-system .dm-count { color: #B9BBBD; }
/* Declared but never seen in the code: a capability, not evidence of use. */
.dm-node.declared { border-style: dashed; color: #5B6478; }
.dm-classes { margin: 6px 0 22px; }
.dm-exposure { border: 1px solid rgba(185,187,189,.6); border-top: 3px solid #FF4B6F;
  padding: 16px 18px; margin-top: 8px; }
.dm-files, .dm-links { margin: 6px 0 16px; padding-left: 18px; }
.dm-files li, .dm-links li { margin-bottom: 4px; font-size: 13px; }

/* ------------------------------------------------------- data map · matrix
   The flow answers "what is connected to this system". The matrix answers
   "what touches what", which is the question somebody browsing has. An empty
   cell means the two were not seen in the same file -- never that it does not
   happen -- so empty is drawn as absence, not as a zero. */
/* A segmented control, not a row of small words. The first version was a pair
   of underlined labels below a paragraph, and it read as a caption: people
   looking straight at the Matrix view did not find it. A switch has to look
   like something you press. */
.tabs.sub { display: inline-flex; gap: 0; margin: 18px 0 14px;
  border: 1px solid rgba(46,63,98,.35); background: #fff; }
.tabs.sub button { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 22px; border: 0; background: none; color: #2E3F62; letter-spacing: .02em; }
.tabs.sub button + button { border-left: 1px solid rgba(46,63,98,.35); }
.tabs.sub button.on { background: #0E1426; color: #fff; }
.tabs.sub button:hover:not(.on) { background: #F1F2F3; color: #0E1426; }
.tabs.sub button:focus-visible { outline: 2px solid #FF4B6F; outline-offset: -2px; }
.dm-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin: 4px 0 14px; font-size: 13px; }
.dm-controls label { display: inline-flex; align-items: center; gap: 6px; color: #5B6478;
  white-space: nowrap; }
/* The one long label. Left to wrap it broke into three lines beside a
   checkbox and stopped reading as a sentence. */
.dm-check { white-space: normal; max-width: 320px; line-height: 1.35; }
.dm-controls select, .dm-controls input[type="search"] { font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid rgba(185,187,189,.8); border-radius: 0; background: #fff; }
.dm-controls input[type="search"] { min-width: 190px; }
.dm-check { cursor: pointer; }

.dm-matrix-wrap { overflow: auto; max-height: 70vh; border: 1px solid rgba(185,187,189,.5); }
/* Fixed layout, or the band headings set the column width. "MODEL CALLED
   ELSEWHERE" spanning three columns stretched each of them to 100px, so 49
   columns holding one dot each ran to 4,900px of horizontal scroll. The dot is
   the content; the heading is a label for it.
   width:auto with the fixed layout, because the global table rule is width:100%
   and fixed layout obeys it -- which squeezed all 49 columns into the viewport
   at 11px each and removed the horizontal scroll the matrix depends on. */
table.dm-matrix { table-layout: fixed; border-collapse: separate;
  border-spacing: 0; font-size: 13px;
  /* Room for the last column's label, which runs up and to the right past the
     end of its own column. Without it the rightmost heading -- the one a reader
     scrolls all the way over to find -- is the one cut off. */
  padding-right: 150px; }
/* No grid. Every cell had a border, so 49 columns of mostly single dots read as
   a wall of boxes and the dot -- the only thing that carries meaning -- competed
   with its own container. A rule between rows is enough to track along one, and
   the hover highlight does the rest. The header carries no rule at all, because
   a label on the diagonal runs over its neighbours and a border would cut it. */
table.dm-matrix th, table.dm-matrix td { border: 0; }
table.dm-matrix tbody tr + tr > * { border-top: 1px solid rgba(185,187,189,.30); }
/* A band naming each group of columns. Fourteen unlabelled vertical headers is
   a wall; the same fourteen under "Comes from" and "Goes to" is a sentence. */
.dm-bands th { position: sticky; top: 0; z-index: 200; background: #0E1426; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 10px; text-align: left; white-space: nowrap; }
.dm-band + .dm-band { border-left: 1px solid rgba(255,255,255,.25); }
.dm-band.k-model_hosted { background: #7A1330; }
.dm-band.k-model_local { background: #0E4F4E; }
.dm-band.k-trained_on { background: #3C2C52; }
.dm-band.k-tested_on { background: #5A4212; }
.dm-corner-band { position: sticky; left: 0; top: 0; z-index: 220; background: #0E1426; }

/* Column headings on the diagonal rather than on their side. Vertical labels
   read a character at a time and were cut at whatever fitted in 118px -- which
   is how "data/live_rom_late" and three identical "http://localhost:80" columns
   got onto the page. At 45 degrees a label needs about 0.7 of its length in
   height instead of all of it, so the same header space holds half as much
   again, and it reads as a word.
   The label is zero-width so it cannot widen its column: it is anchored at the
   bottom-left of the cell and runs up and to the right, over its neighbours. */
.dm-vhead { height: 140px; vertical-align: bottom; padding: 0; background: #F7F7F7;
  position: sticky; top: 30px; text-align: left; }
/* z-index is set per column in app.js, descending, so a label that runs right
   over its neighbour is not painted over by that neighbour's background. The
   bands, the corner and the row headers all sit above the whole range. */
/* Positioned absolutely inside the sticky header cell, so the label is out of
   flow entirely: it cannot widen its column and its own box cannot clip it.
   The first attempt set width:0 on an inline-block and relied on overflow --
   but button.plain gives it a border and 14px of padding, so the box drew at
   30px around text that needed 64px, which is what cut every heading short. */
.dm-vlabel { position: absolute; bottom: 6px; left: 50%; white-space: nowrap;
  transform-origin: 0 100%; transform: rotate(-45deg); line-height: 1;
  font: inherit; font-size: 12px; text-align: left; color: #0E1426; cursor: pointer; }

/* The three buttons inside the matrix are hit targets, not controls.
   button.plain gives each of them a 1px border, a white fill and 7px 14px of
   padding, which put a box around every rotated heading, every row label and
   every single dot -- and that, not the cell borders, is what made the grid
   read as a wall of boxes. Removing the borders from the cells alone left the
   boxes exactly where they were. */
.dm-matrix .dm-vlabel,
.dm-matrix .dm-rhead button,
.dm-matrix .dm-mark { border: 0; background: transparent; padding: 0;
  font-weight: 400; letter-spacing: 0; text-transform: none; }
.dm-matrix .dm-mark { padding: 9px 0; width: 100%; }
.dm-matrix .dm-rhead button { padding: 8px 0; }
.dm-matrix .dm-vlabel:hover,
.dm-matrix .dm-rhead button:hover { background: transparent; color: #FF4B6F; }
.dm-matrix .dm-mark:hover { background: #EEF0F4; color: inherit; }
.dm-vlabel:hover { color: #FF4B6F; }
.dm-vhead.k-model_hosted { box-shadow: inset 0 -3px 0 #FF4B6F; }
.dm-vhead.k-model_local { box-shadow: inset 0 -3px 0 #00A3A1; }
.dm-vhead.k-trained_on { box-shadow: inset 0 -3px 0 #7A5C9E; }
.dm-vhead.k-tested_on { box-shadow: inset 0 -3px 0 #C08A2E; }
.dm-corner { position: sticky; left: 0; top: 30px; z-index: 210; background: #F7F7F7;
  padding: 10px 12px; text-align: left; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #5B6478; vertical-align: bottom; }

/* Said once, beside the marks it explains. */
.dm-legend { margin: 10px 0 0; font-size: 12px; color: #5B6478; line-height: 1.5;
  max-width: 76ch; }
.dm-key { color: #2E3F62; font-weight: 700; }
.dm-key.leaving { color: #FF4B6F; }
.dm-rhead { position: sticky; left: 0; z-index: 150; background: #fff; text-align: left;
  font-weight: 400; padding: 0 12px; max-width: 320px; }
.dm-rhead button, .dm-rhead .mono { display: block; padding: 8px 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px;
  color: #0E1426; }
.dm-rhead button { cursor: pointer; text-align: left; }
.dm-cell { width: 34px; min-width: 34px; text-align: center; padding: 0; background: #fff; }
/* dm-matrix-col, not dm-col: that class already exists in this file for
   something else, and a silent collision is a bad way to size a table. */
col.dm-matrix-col-head { width: 230px; }
col.dm-matrix-col { width: 34px; }
.dm-band { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-cell.empty { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #FAFAFB 5px, #FAFAFB 10px); }
.dm-mark { width: 100%; padding: 9px 0; cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 700; color: #2E3F62; }
.dm-cell.leaving .dm-mark { color: #FF4B6F; }
.dm-mark:hover { background: #EEF0F4; }
/* Cross-highlight: with this many columns a reader loses the row they are on. */
table.dm-matrix tr.hot .dm-rhead, table.dm-matrix tr.hot .dm-cell { background-color: #F2F4F8; }
table.dm-matrix td.hot, table.dm-matrix th.hot { background-color: #EAEDF3; }
/* A file path is shown as it is written. The global th rule uppercases headings,
   which is right for a column name and wrong for "src/agent.py" -- on anything
   but Windows those are two different files. */
.dm-rhead, .dm-rhead .mono, .dm-rhead button { text-transform: none; letter-spacing: 0;
  font-weight: 400; }
.dm-vlabel { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dm-node.k-trained_on { border-left-color: #7A5C9E; }
.dm-node.k-tested_on { border-left-color: #C08A2E; }
.dm-vhead.k-trained_on { box-shadow: inset 0 -3px 0 #7A5C9E; }
.dm-vhead.k-tested_on { box-shadow: inset 0 -3px 0 #C08A2E; }

/* ------------------------------------------- admin · mapper confidence
   A slider with the measurement beside it. Where nothing has been measured the
   row says so, because a threshold nobody has measured is a dial that connects
   to nothing and the reader should know which kind they are dragging. */
.conf-list { display: flex; flex-direction: column; gap: 4px; }
.conf-row { border: 1px solid rgba(185,187,189,.5); border-left: 3px solid #2E3F62;
  padding: 14px 16px; background: #fff; }
.conf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.conf-rec { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #5B6478; white-space: nowrap; }
.conf-slider { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
.conf-range { flex: 1; accent-color: #2E3F62; height: 22px; }
.conf-value { min-width: 58px; text-align: right; font-weight: 700; font-size: 14px;
  color: #0E1426; font-variant-numeric: tabular-nums; }
.flush { margin-top: 0; }

/* ------------------------------------------------------ portfolio · governance
   The library, what it obliges, and what is wrong with it. No coverage figure:
   the mapping behind one measured about a third correct, and a governance
   report that is confidently wrong is worse than not having one. */
.gov-quote { margin: 6px 0 4px; padding: 8px 12px; border-left: 3px solid #B9BBBD;
  background: #F7F7F7; font-size: 13px; color: #33292F; }
td.sev-high { color: #FF4B6F; font-weight: 700; }
td.sev-medium { color: #C08A2E; font-weight: 700; }
td.sev-low { color: #5B6478; }

/* ------------------------------------ evidence requirements · search and sort
   A system carries hundreds of rows. The chips answer "what do I do next";
   they do not answer "where is the row about access reviews", and paging
   twenty-five at a time to find one is not an answer either. */
.req-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-bottom: 10px; }
.req-tools .chips { margin: 0; }
.req-search { font: inherit; font-size: 13px; padding: 8px 11px; min-width: 260px;
  border: 1px solid rgba(185,187,189,.8); border-radius: 0; background: #fff; }
.req-search:focus-visible { outline: 2px solid #FF4B6F; outline-offset: -1px; }
/* The header stays a header: same size and weight, with the control it now is
   made visible by the arrow rather than by restyling the word. */
.req-sort { font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; cursor: pointer; padding: 0; background: none;
  border: 0; display: inline-flex; align-items: center; gap: 5px; }
.req-sort:hover { color: #FF4B6F; }
.req-sort.on { color: #0E1426; }
.req-arrow { font-size: 11px; opacity: .45; }
.req-sort.on .req-arrow { opacity: 1; color: #FF4B6F; }

/* ------------------------------------------- every evidence requirement table
   Fixed layout, so a long sentence widens its own wrapping rather than the
   column, and the last column cannot be pushed off the right edge. The seventh
   column ("Control requirement") is gone: it said "the control as a whole" on
   about half the rows. */
.req-table { table-layout: fixed; }
.req-table th, .req-table td { padding: 10px 12px; overflow-wrap: anywhere; }
.req-table th:nth-child(1), .req-table td:nth-child(1) { width: 15%; }
.req-table th:nth-child(2), .req-table td:nth-child(2) { width: 34%; }
.req-table th:nth-child(3), .req-table td:nth-child(3) { width: 12%; }
.req-table th:nth-child(4), .req-table td:nth-child(4) { width: 14%; }
.req-table th:nth-child(5), .req-table td:nth-child(5) { width: 11%; }
.req-table th:nth-child(6), .req-table td:nth-child(6) { width: 14%; }
.req-more { margin-top: 6px; white-space: nowrap; }
/* The guidance, once asked for. Spans every column, so the prose gets the full
   width instead of a fourteenth of it. */
.req-detail td { background: var(--metric-bg); border-top: 0; }
.req-detail .row { flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------ propose a system
   Five columns where the wide ones carry prose. Fixed layout for the same
   reason the evidence table needs it: a long sentence should widen its own
   wrapping and not its column. */
.propose-table { table-layout: fixed; }
.propose-table th, .propose-table td { padding: 10px 12px; overflow-wrap: anywhere; }
.propose-table th:nth-child(1), .propose-table td:nth-child(1) { width: 10%; }
.propose-table th:nth-child(2), .propose-table td:nth-child(2) { width: 16%; }
.propose-table th:nth-child(3), .propose-table td:nth-child(3) { width: 38%; }
.propose-table th:nth-child(4), .propose-table td:nth-child(4) { width: 16%; }
.propose-table th:nth-child(5), .propose-table td:nth-child(5) { width: 20%; }
.propose-table details { margin-top: 6px; }
.propose-table summary { cursor: pointer; color: var(--rhino); }
.propose-table ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------------------------------------------------- beta access request */
/* The disclaimer that governs who is approved. Stated before the fields, not
   under them: it is the condition of approval, not small print. */
.notice {
  background: var(--metric-bg);
  border-left: 4px solid var(--radical-red);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  margin: 14px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--iridium);
}

/* The terms themselves: scrollable so the form stays usable, but never
   collapsed behind a link -- somebody is about to agree to this. */
.terms {
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--iridium);
}
.terms section { margin-bottom: 14px; }
.terms section:last-of-type { margin-bottom: 6px; }
.terms strong { display: block; color: var(--mirage); margin-bottom: 3px; }
.terms p { margin: 0; }

.checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Form labels on this page are uppercase with wide tracking, which is right
     for a field name and wrong for a sentence somebody is about to agree to:
     set in caps it reads as decoration and stops being read at all. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin: 16px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--iridium);
  cursor: pointer;
}
.checkline input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: auto; }

/* ------------------------------------------------------------ trial banner */
.trial-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--mirage);
  color: var(--white);
  padding: 9px 20px;
  font-size: 13px;
}
.trial-bar strong { font-weight: 700; }
.trial-bar .days { color: var(--turquoise); font-weight: 700; }
/* The last day reads in the alarm colour, because by then it is one. */
.trial-bar.ending .days { color: var(--radical-red); }