/* between-reports — product identity v2.
 * Specimen and rationale: deliverables/brand/brand-v2.html
 *
 * Near-monochrome cool neutrals, one violet accent, four triage colors. Color always
 * means something: violet marks what is interactive, the triage hues mark what is
 * urgent, and nothing else is colored. Violet 600 measures 2.83:1 on ink, so dark
 * grounds use violet 400 for anything carrying text.
 *
 * Fonts are local copies so the app needs no network: Inter Tight (display), Inter
 * (body, tabular figures), JetBrains Mono (labels, datelines).
 */
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter Var"; src: url("fonts/Inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  /* ---- Neutrals ---- */
  --ink: #0B0C0F;
  --ink-900: #121418;
  --ink-800: #191C22;
  --ink-700: #252A32;
  --slate-500: #5A616E;
  --slate-400: #9AA1AE;
  --slate-200: #D8DCE3;
  --line: #E6E8EC;
  --surface: #F6F7F9;
  --white: #FFFFFF;

  /* ---- Violet: the one accent ---- */
  --v-950: #1E1040;
  --v-600: #6B2FD9;
  --v-500: #8551F0;
  --v-400: #A585F7;
  --v-100: #EDE6FE;

  /* ---- Triage. Light pairs clear 4.5:1; dark pairs clear 8:1. ---- */
  --red: #C2261A;   --red-bg: #FDECEA;   --red-d: #FF9A8C;  --red-dbg: #2A1512;
  --grn: #0F7A54;   --grn-bg: #E6F6EF;   --grn-d: #5FD9A6;  --grn-dbg: #0D2620;
  --blu: #2563A8;   --blu-bg: #EAF1FA;   --blu-d: #8FBDF0;  --blu-dbg: #12202F;
  --amb: #8A5A00;   --amb-bg: #FDF3DF;   --amb-d: #E8B75C;  --amb-dbg: #2A1F07;

  /* ---- Type ---- */
  --disp: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Shape. Nothing is fully rounded; a pill pulls this back toward consulting. ---- */
  --radius-panel: 14px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-chip: 5px;
  --radius-bar: 999px;
  --shadow-lift: 0 1px 2px rgba(11, 12, 15, .04), 0 8px 24px -12px rgba(11, 12, 15, .12);
  --focus: 0 0 0 2px var(--white), 0 0 0 4px var(--v-600);
  --ease: cubic-bezier(.2, .6, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -.006em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 600;
  margin: 0 0 .4em;
}
h1 { font-size: 34px; letter-spacing: -.035em; line-height: 1.08; }
h2 { font-size: 22px; letter-spacing: -.028em; line-height: 1.15; }
h3 { font-size: 16px; letter-spacing: -.015em; }

a { color: var(--v-600); text-decoration: none; }
a:hover { color: var(--v-500); }
a:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: 3px; }
td a { color: var(--ink); }
td a:hover { color: var(--v-600); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Shell ---- */
.topbar {
  background: var(--ink);
  color: var(--white);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.topbar a { color: var(--slate-400); font-size: 13.5px; letter-spacing: -.008em; }
.topbar .right { display: inline-flex; gap: 20px; }
.topbar a:hover { color: var(--white); }
.topbar a:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--v-400); border-radius: 3px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.03em;
  color: var(--white);
  font-family: var(--disp);
}
.brand img { width: 20px; height: 20px; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 32px; }
.muted { color: var(--slate-500); font-size: 14px; }
.right { margin-left: auto; }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  margin-bottom: 20px;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.card:hover { border-color: var(--slate-200); box-shadow: var(--shadow-lift); }
.card.quiet { background: var(--surface); border-color: transparent; }
.card.quiet:hover { box-shadow: none; border-color: transparent; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat { padding: 16px 18px; background: var(--surface); border-radius: var(--radius-control); }
.stat .n {
  font-family: var(--disp);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.15;
}
.stat .l { font-size: 13px; color: var(--slate-500); }

/* ---- Controls ---- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--v-600);
  color: var(--white);
  padding: 9px 17px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.008em;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: #5A25BC; color: var(--white); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 0; box-shadow: var(--focus); }
.btn.secondary { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--surface); color: var(--ink); border-color: var(--slate-200); }
.btn.go { background: var(--ink); color: var(--white); }
.btn.go:hover { background: var(--ink-800); color: var(--white); }
/* A selected filter is a state, not the page's primary action. */
.btn.seg-on { background: var(--v-100); color: var(--v-600); border: 1px solid var(--v-400); }
.btn.seg-on:hover { background: var(--v-100); color: var(--v-600); border-color: var(--v-600); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

input[type=text], input[type=search], input[type=url], input[type=number], input[type=password], select {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
}
input:focus, select:focus { outline: 0; box-shadow: var(--focus); border-color: var(--v-600); }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-400);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:hover td { background: var(--surface); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ---- Badges ---- */
.badge {
  display: inline-block;
  border-radius: var(--radius-chip);
  padding: 2.5px 8px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
/* A badge is a state, so it takes a triage color, never violet. */
.badge.ok, .badge.good { background: var(--grn-bg); color: var(--grn); }
.badge.warn, .badge.need { background: var(--amb-bg); color: var(--amb); }
.badge.alert { background: var(--red-bg); color: var(--red); }
.badge.info { background: var(--blu-bg); color: var(--blu); }
.badge.off { background: var(--surface); color: var(--slate-500); }

/* ---- Job progress ---- */
.job { background: var(--surface); border-radius: var(--radius-control); padding: 14px 16px; }
.bar { height: 8px; background: var(--white); border-radius: var(--radius-bar); overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; background: var(--v-600); transition: width 320ms var(--ease); }
.job .msg { font-size: 13px; color: var(--slate-500); font-variant-numeric: tabular-nums; }

/* ---- Gate notice ---- */
.gate {
  border-left: 3px solid var(--amb);
  background: var(--amb-bg);
  padding: 14px 18px;
  border-radius: var(--radius-control);
  margin-bottom: 20px;
  font-size: 14px;
}
.gate strong { color: var(--amb); }

/* ---- Roster row ---- */
.site-cell a { font-size: 13px; }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline; }
.row-actions .btn { padding: 5px 12px; font-size: 13px; }
.saved-tag {
  display: inline-block; margin-right: 6px; font-size: 12px; font-weight: 600;
  color: var(--v-600); animation: fade-out 2.4s var(--ease) 1.6s forwards;
}
tr.flash td { animation: row-flash 2.4s var(--ease); }
@keyframes row-flash { from { background: var(--v-100); } to { background: transparent; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---- Edit modal ---- */
dialog#modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border: 0;
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 64px -12px rgba(11, 12, 15, .34);
  padding: 22px 26px;
}
dialog#modal::backdrop { background: rgba(11, 12, 15, .45); }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }
.modal-x {
  margin-left: auto; border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--slate-500); cursor: pointer; padding: 0 4px;
}
.modal-x:hover { color: var(--ink); }
.edit-form fieldset {
  border: 0; padding: 0; margin: 0 0 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 14px;
}
.edit-form legend {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-400); margin-bottom: 8px;
}
.edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.edit-form label.wide { grid-column: 1 / -1; }
.edit-form input, .edit-form select { width: 100%; font-weight: 400; }
.edit-form input[type=url] {
  border: 1px solid var(--line); border-radius: var(--radius-control);
  padding: 9px 12px; font-family: var(--body); font-size: 15px;
}
.edit-form .hint { font-size: 12px; font-weight: 400; color: var(--slate-500); }
.edit-form .htmx-indicator { display: none; }
.edit-form.htmx-request .htmx-indicator { display: inline; }
.note { border-radius: var(--radius-control); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.note ul { margin: 6px 0 0; padding-left: 18px; }
.note.ok { background: var(--v-100); color: var(--v-600); }
.note.err { background: var(--red-bg); color: var(--red); }

/* ---- Foundation page ---- */
.url-input { min-width: min(360px, 100%); }
.card.danger { border-color: #F0C4BF; }
.btn.danger { background: var(--red); color: var(--white); }
.btn.danger:hover { background: #9C1E14; color: var(--white); }

/* ---- Unit finder ---- */
.finder { background: var(--surface); border-radius: var(--radius-control); padding: 14px 16px; margin: 0 0 18px; }
.finder h3 { margin: 0 0 4px; font-size: 15px; }
.finder .units { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.finder .unit { display: inline-flex; align-items: center; gap: 6px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-control); padding: 3px 4px 3px 12px; font-size: 13px; }
.finder .unit .btn { padding: 3px 10px; font-size: 12px; }
.finder details { margin-top: 8px; font-size: 13px; }
.finder blockquote { margin: 8px 0; padding: 8px 12px; background: var(--white); border-radius: var(--radius-control); }
.finder blockquote a { font-weight: 600; }
.edit-form label.check > span:first-child { display: flex; align-items: center; gap: 8px; }
.edit-form label.check input[type=checkbox] { width: auto; margin: 0; }
.finder .htmx-indicator { display: none; }
.finder .htmx-request.htmx-indicator, .finder .htmx-request .htmx-indicator { display: inline; }

/* ---- Train (working view) ---- */
.tabs { margin: 14px 0 16px; }
.train-stats { margin-bottom: 18px; }
.train-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-control); padding: 14px 16px; margin-bottom: 12px; }
.train-card.done { background: var(--surface); }
@media (max-width: 820px) { .train-card { grid-template-columns: 1fr; } }
.train-card p { margin: 0 0 6px; }
.train-headline { font-family: var(--disp); font-size: 17px; font-weight: 500; letter-spacing: -.022em; line-height: 1.3; }
.train-snippet { font-size: 13px; }
.train-guess { font-size: 13px; }
.conf { font-size: 12px; font-weight: 500; color: var(--slate-500); }
.conf.low { color: var(--amb); }
.train-form fieldset.seg { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.train-form legend { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 4px; width: 100%; }
.seg label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; border: 1px solid var(--line);
  border-radius: var(--radius-control); padding: 3px 11px; cursor: pointer; }
.seg label:has(input:checked) { background: var(--v-100); border-color: var(--v-600); }
.seg label.flag-red:has(input:checked) { background: var(--red-bg); border-color: var(--red); }
.seg input { margin: 0; }
.train-check { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.train-field { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.train-field input, .train-field select { font-weight: 400; font-size: 14px; padding: 6px 10px; }
.cat-edit { border-bottom: 1px solid var(--surface); padding: 10px 0; }
.cat-edit summary { cursor: pointer; display: flex; gap: 9px; align-items: center; }
.cat-edit.inactive summary { opacity: .55; }
.cat-form { margin-top: 12px; }
.cat-form textarea { width: 100%; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 8px 10px; }
.cat-form input[type=number] { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 9px 12px; }
.edit-form label.check > span:first-child { display: flex; align-items: center; gap: 8px; }

/* ==== Command center (/f/{slug}/dashboard) ====
 * Everything scoped under .cc / .cc-* so the rest of the app is untouched. Sized for
 * a projector at 1440-1920px. It uses the same two faces as the rest of the app.
 */
.wrap:has(> .cc) { max-width: 1760px; padding: 28px 44px 64px; }
.demo-banner {
  background: var(--amb-bg); color: var(--amb); text-align: center;
  font-size: 13px; padding: 5px 16px; letter-spacing: 0;
}
.cc-open, a.btn.go.cc-open {
  margin-left: 12px; padding: 4px 11px; font-size: 12.5px; font-weight: 500;
  background: var(--white); color: var(--v-600); border: 1px solid var(--line);
}
.cc-open:hover, a.btn.go.cc-open:hover { background: var(--v-100); color: var(--v-600); border-color: var(--v-400); }

.cc {
  --cc-red: var(--red); --cc-green: var(--grn); --cc-line: var(--line); --cc-muted: var(--slate-500); --cc-ink: var(--ink); --cc-soft: var(--surface);
  font-family: var(--body);
  font-size: 16px; line-height: 1.5; color: var(--cc-ink); max-width: 1080px; margin: 0 auto;
}
.cc h1, .cc h2, .cc-lede, .cc-drawer h2 { font-family: var(--disp); letter-spacing: -.028em; }
.cc a, .cc-drawer a { color: inherit; text-decoration: none; }
.cc-n { color: var(--cc-muted); font-weight: 400; margin-left: 4px; }
.cc-none { color: var(--cc-muted); margin: 0; font-size: 15px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }

/* ---- Header and the opening sentence ---- */
.cc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 20px; }
.cc-head h1 { font-size: 22px; line-height: 1.2; margin: 0; color: var(--ink); font-weight: 600; }
.cc-seg { display: inline-flex; background: var(--cc-soft); border-radius: var(--radius-control); padding: 3px; }
.cc-seg a { padding: 5px 13px; border-radius: var(--radius-control); font-size: 14px; color: var(--cc-muted); white-space: nowrap; }
.cc-seg a:hover { color: var(--cc-ink); }
.cc-seg a[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11,12,15,.10); }

.cc-lede { font-size: 29px; line-height: 1.38; font-weight: 400; max-width: 34em; margin: 0 0 52px; }
.cc-lede a { color: var(--v-600); text-decoration: underline; text-decoration-color: rgba(107, 47, 217, .45); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cc-lede a:hover { text-decoration-color: var(--v-500); }
.cc-lede a.cc-alert { color: var(--cc-red); text-decoration-color: rgba(194, 38, 26, .4); }

/* ---- Sections: a small title, then label | list rows ---- */
.cc-section { margin-bottom: 44px; }
.cc-h { font-size: 18px; font-weight: 600; letter-spacing: -.022em; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cc-h-note { font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--cc-muted); }
.cc-grp { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 24px; padding: 10px 0; border-bottom: 1px solid var(--cc-line); }
.cc-grp-wide { grid-template-columns: minmax(0, 1fr); }
.cc-grp-l { font-size: 14px; font-weight: 400; color: var(--cc-muted); margin: 0; padding-top: 3px; }
.cc-grp.urgent .cc-grp-l { color: var(--cc-red); }

/* ---- Rows ---- */
.cc-ul { list-style: none; margin: 0; padding: 0; }
.cc-ul.collapsed > .extra { display: none; }
.cc-s { position: relative; padding: 3px 0 3px 14px; line-height: 1.45; }
.cc-s::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--slate-200); }
.cc-s.red::before { background: var(--cc-red); }
.cc-s.green::before { background: var(--cc-green); }
.cc-t { color: var(--cc-ink); }
a.cc-t:hover { color: var(--v-600); text-decoration: underline; text-decoration-color: var(--v-500); text-underline-offset: 3px; }
.cc-topic { padding-top: 7px; padding-bottom: 7px; }
.cc-topic + .cc-topic { border-top: 1px solid var(--cc-line); }
.cc-topic .cc-t { font-weight: 600; }
.cc-topic::before { top: 1.05em; }
.cc-why { color: var(--cc-muted); }
.cc-m { color: var(--cc-muted); font-size: 14px; margin-left: 6px; }
.cc-m.cc-block { display: block; margin-left: 0; }
.cc-name { font: inherit; color: var(--v-600); background: none; border: 0; padding: 0; cursor: pointer; }
.cc-name:hover { text-decoration: underline; text-decoration-color: var(--v-500); text-underline-offset: 3px; }
.cc-plus { cursor: help; }
.cc-credit { color: var(--amb); }
.cc-inline { display: inline; }
.cc-inline > summary { display: inline; cursor: pointer; color: var(--v-600); list-style: none; }
.cc-inline > summary::-webkit-details-marker { display: none; }
.cc-inline > summary::after { content: " ▸"; font-size: .8em; }
.cc-inline[open] > summary::after { content: " ▾"; }
.cc-inline > ul, .cc-also ul { display: block; list-style: none; margin: 4px 0 6px; padding: 0 0 0 12px; border-left: 1px solid var(--cc-line); font-size: 14px; }
.cc-inline li, .cc-also li { margin: 4px 0; }
.cc-inline li a { color: var(--cc-ink); }
.cc-inline li a:hover { color: var(--v-600); text-decoration: underline; }
.cc-inline li span { color: var(--cc-muted); }
.cc-more button { font: inherit; font-size: 14px; color: var(--v-600); background: none; border: 0; padding: 2px 0 0 14px; cursor: pointer; }
.cc-also { display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding-top: 3px; }
.cc-also > details > summary { cursor: pointer; color: var(--v-600); width: fit-content; list-style: none; }
.cc-also > details > summary::-webkit-details-marker { display: none; }
.cc-also > details > summary::after { content: " ▸"; font-size: .8em; }
.cc-also > details[open] > summary::after { content: " ▾"; }
.cc-also .cc-s { font-size: 15px; }
.cc-grp-wide.cc-also { padding: 10px 0; }
.cc-name:focus-visible, .cc-view:focus-visible, .cc-more button:focus-visible, .cc a:focus-visible, .cc summary:focus-visible, .cc-drawer a:focus-visible, .cc-drawer summary:focus-visible {
  outline: 0; box-shadow: var(--focus); border-radius: 4px;
}

/* ---- Grantee table ---- */
.cc-table-wrap { overflow-x: auto; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cc-table th, .cc-table td { padding: 6px 8px; border-bottom: 1px solid var(--cc-line); text-align: left; text-transform: none; letter-spacing: 0; background: none; position: static; font-family: inherit; white-space: nowrap; }
.cc-table thead th { font-size: 13px; font-weight: 400; color: var(--cc-muted); border-bottom: 1px solid var(--cc-line); }
.cc-table tbody th { font-size: 15px; font-weight: 400; color: var(--cc-ink); white-space: normal; }
.cc-table .num { text-align: right; font-variant-numeric: tabular-nums; width: 1%; padding-left: 24px; }
.cc-table td.dim { color: var(--cc-muted); }
.cc-table td.alert { color: var(--cc-red); }
.cc-table tr.quiet th, .cc-table tr.quiet td { color: var(--cc-muted); }
.cc-table td.act { width: 1%; text-align: right; padding-left: 20px; }
.cc-table tbody tr:hover { background: var(--cc-soft); }
.cc-view { font: inherit; font-size: 14px; color: var(--v-600); background: none; border: 0; padding: 0; cursor: pointer; }
.cc-view::after { content: " →"; }
.cc-view:hover { text-decoration: underline; text-underline-offset: 3px; }

.cc-foot { color: var(--cc-muted); font-size: 13px; margin: 0; }

/* ---- Grantee panel ---- */
.cc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); background: #fff; z-index: 40;
  box-shadow: -12px 0 40px -8px rgba(11,12,15,.22); padding: 32px 32px 40px; overflow-y: auto;
  transform: translateX(105%); transition: transform .25s var(--ease);
  font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink);
  --cc-red: var(--red); --cc-green: var(--grn); --cc-line: var(--line); --cc-muted: var(--slate-500); --cc-ink: var(--ink);
}
.cc-drawer.open { transform: none; }
.cc-drawer h2 { font-size: 22px; color: var(--ink); margin: 0 0 4px; line-height: 1.2; font-weight: 600; }
.cc-dmeta { color: var(--cc-muted); font-size: 14px; margin: 0; }
.cc-dmeta a { color: var(--v-600); }
.cc-dh { font-size: 14px; font-weight: 400; color: var(--cc-muted); margin: 24px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--cc-line); }
.cc-drawer-x { position: absolute; top: 14px; right: 16px; border: 0; background: none; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; color: var(--cc-muted); }
.cc-drawer-x:hover { background: var(--surface); color: var(--ink); }
.cc-scrim { position: fixed; inset: 0; background: rgba(11,12,15,.32); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); z-index: 30; }
.cc-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 820px) {
  .wrap:has(> .cc) { padding: 20px 16px 48px; }
  .cc-lede { font-size: 22px; margin-bottom: 36px; }
  .cc-grp { grid-template-columns: minmax(0, 1fr); }
  .cc-grp-l { padding: 0 0 4px; }
  .cc-table .num:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cc-drawer, .cc-scrim { transition: none; }
}

/* ---- Overview: tiles and charts (added 2026-09-14) ----
   Series colors are the triage palette, so a bar and a badge for the same thing match:
   risk = --red, other = --blu, good = --grn. Against white they measure 5.86:1, 6.12:1
   and 5.34:1, past the 3:1 floor for a graphical object, and the three are separate hues
   rather than shades of one. Every chart has a legend and hover labels. */
.cc { --viz-risk: var(--red); --viz-other: var(--blu); --viz-good: var(--grn); --viz-bar: var(--v-600); }
.cc-lede.cc-lede-tight { margin-bottom: 28px; }

.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 18px; }
.cc-kpi {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
  align-items: end; gap: 4px 12px; padding: 14px 16px 13px 20px; overflow: hidden;
  background: #fff; border: 1px solid var(--cc-line); border-radius: var(--radius-card);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.cc-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--slate-200); }
.cc-kpi.risk::before { background: var(--viz-risk); }
.cc-kpi.good::before { background: var(--viz-good); }
.cc-kpi.topic::before { background: var(--viz-other); }
.cc-kpi:hover { border-color: var(--slate-200); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.cc-kpi:focus-visible { outline: 0; box-shadow: var(--focus); }
.cc-kpi-l { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-400); }
.cc-kpi.risk .cc-kpi-l { color: var(--viz-risk); }
.cc-kpi.good .cc-kpi-l { color: var(--viz-good); }
.cc-ico { width: 14px; height: 14px; flex: none; }
.cc-kpi-v { font-family: var(--disp); font-size: 38px; font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.cc-kpi-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--cc-muted); }
.cc-kpi.risk { background: linear-gradient(to right, rgba(194, 38, 26, .05), #fff 60%); }
.cc-spark { width: 96px; height: 26px; overflow: visible; }
.cc-spark polyline { fill: none; stroke: var(--viz-other); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cc-kpi.risk .cc-spark polyline { stroke: var(--viz-risk); }
.cc-kpi.good .cc-spark polyline { stroke: var(--viz-good); }
.cc-meter { width: 96px; height: 7px; border-radius: var(--radius-bar); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; align-self: center; margin-bottom: 6px; }
.cc-meter i { display: block; height: 100%; background: var(--v-600); border-radius: var(--radius-bar); }

.cc-chart { margin: 0; padding: 14px 16px 12px; background: #fff; border: 1px solid var(--cc-line); border-radius: var(--radius-card); }
.cc-chart-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-family: var(--disp); font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; color: var(--cc-ink); margin-bottom: 12px; }
.cc-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 400; color: var(--cc-muted); }
.cc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cc-legend i.risk, .cc-stack i.risk { background: var(--viz-risk); }
.cc-legend i.other, .cc-stack i.other { background: var(--viz-other); }
.cc-legend i.good, .cc-stack i.good { background: var(--viz-good); }

.cc-who { margin: 0 0 44px; }
.cc-dots { list-style: none; margin: 0; padding: 0; columns: 2 400px; column-gap: 40px; }
.cc-dots li { display: grid; grid-template-columns: minmax(0, 240px) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cc-line); break-inside: avoid; }
.cc-dot-name { font: inherit; font-size: 13.5px; text-align: left; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dot-name:hover { color: var(--v-600); text-decoration: underline; text-underline-offset: 3px; }
.cc-dot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
.cc-mark {
  /* Icons carry the tone: triangle = heads-up, circle check = worth sharing (green) or
     policy topic (blue). The legend and each mark's hover label name them. */
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; text-decoration: none; transition: transform 120ms var(--ease);
}
.cc-mark svg { width: 100%; height: 100%; display: block; }
.cc-mark.h, a.cc-mark.h:hover { color: var(--viz-risk); }
.cc-mark.s, a.cc-mark.s:hover { color: var(--viz-good); }
.cc-mark.p, a.cc-mark.p:hover { color: var(--viz-other); }
a.cc-mark:hover, a.cc-mark:focus-visible { transform: translateY(-1px) scale(1.15); outline: 0; z-index: 4; }
.cc-legend .cc-mark { width: 14px; height: 14px; }
.cc-mark[data-tip]:hover::after, .cc-mark[data-tip]:focus-visible::after { transform: translateX(-50%) scale(.87); transform-origin: bottom center; }
.cc-dot-n { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--cc-muted); white-space: nowrap; }

[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 6px 9px; border-radius: var(--radius-control); background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 400; line-height: 1.35; text-align: left; white-space: normal; pointer-events: none;
}