/*
Keel QAPI's design system. One token set, one place, every page reads it --
not a component library, a small enough set of primitives that consistency
is the path of least resistance rather than something enforced by review.

Reference standard: Stripe's dashboard, Linear, Vercel. Restrained, generous
whitespace, one accent color, strong typographic hierarchy, quiet tables.
The anti-pattern is dense clinical software (PointClickCare and similar) --
this product is the calm one in the room.

Palette is derived from the actual logo (app/static/brand/), not the other
way around -- navy #0B2A5B and teal #18A7A8 are the two real brand colors;
everything else here is built to work WITH them, never invented separately.

Every text/background pairing below has a computed WCAG contrast ratio, not
an eyeballed one -- see the comment on each token and the design-system
work order's own report for the full list. Two real findings drove
decisions here, not just preferences:
  - --brand-teal fails contrast as text on white/canvas (2.94:1, under even
    the 3:1 large-text floor) -- it is genuinely accent-only, confirmed by
    the math, not just by style guide instruction. Links and interactive
    text use --brand-navy instead (14.03:1); teal's one real job is the
    sidebar's active-nav accent against navy, where it passes at 4.77:1.
  - --muted only clears 4.31:1 on bare --canvas (fails 4.5 for body text,
    passes only the 3:1 large-text floor) -- so --muted text always sits on
    --surface (a white card/table/tile), never floating directly on the
    canvas page background.

Light by default: this app produces printed documents and is used by
people on clinical software that assumes light interfaces. See CLAUDE.md
for why an unstyled dark-mode rendering caused a real readability bug once
already -- dark mode, if it ever exists, is an opt-in, not the default.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Color: derived from the logo ------------------------------------ */
  --brand-navy: #0B2A5B;   /* primary brand -- sidebar, primary buttons, links, headings-on-brand */
  --brand-teal: #18A7A8;   /* accent ONLY -- 2.94:1 on white, fails AA as text; sidebar active-accent only (4.77:1 on navy) */
  --brand-teal-deep: #117879; /* darkened teal for the rare filled-teal surface (5.25:1 white text on it) */

  --ink: #0F1B2D;    /* headings -- 17.28:1 on --surface, 16.37:1 on --canvas */
  --body: #3A4759;   /* body text -- 9.44:1 on --surface, 8.94:1 on --canvas */
  --muted: #6B7787;  /* secondary text, table headers, timestamps -- 4.55:1 on --surface (always place on --surface, not bare --canvas: only 4.31:1 there) */

  --border: #E2E6EB; /* hairlines */
  --surface: #FFFFFF; /* cards, table backgrounds, the sidebar's own logo/nav no -- surfaces in general */
  --canvas: #F7F9FA;  /* page background */

  --danger: #B42318;   /* overdue -- 6.57:1 on --surface */
  --danger-bg: #F9EDED;   /* 8% danger-into-white tint -- 5.76:1 for --danger text on it */
  --danger-border: #E3C4C0;

  --warning: #B45309;  /* needs attention -- 5.02:1 on --surface */
  --warning-bg: #F9F1EB;  /* 8% warning-into-white tint -- 4.51:1 for --warning text on it */
  --warning-border: #E5CDB3;

  --success: #0E7C6B;  /* on track -- 5.10:1 on --surface */
  --success-bg: #ECF5F3;  /* 8% success-into-white tint -- 4.58:1 for --success text on it */
  --success-border: #BFDCD5;

  /* Informational (neutral) tone -- built from the brand navy, not a
     disconnected fourth hue, for banners/badges that aren't a status.
     Navy text on this tint: 12.06:1. */
  --info-bg: #EBEEF2;
  --info-border: #C7D0DC;

  /* Sidebar-only: --muted itself fails AA on navy at body-text sizes
     (3.08:1) -- this is white at ~68% opacity composited on navy,
     computed at 6.9:1, used for inactive nav labels. Active nav labels use
     solid white (14.03:1). */
  --nav-inactive: rgba(255, 255, 255, 0.68);

  /* --- Type -------------------------------------------------------------- */
  --font-heading: "Fraunces", Georgia, serif;       /* headings and display only */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* all interface text */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;   /* IDs, citations, record numbers ONLY -- never column headers */

  /* Scale: 12/14/16/20/24/32/40px. Nothing outside this list. */
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-40: 2.5rem;

  --weight-body: 400;
  --weight-emphasis: 500;
  --weight-heading: 600;

  /* --- Spacing: 4px base. Nothing outside this list. --------------------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* --- Radius / shadow ---------------------------------------------------- */
  --radius-control: 6px;  /* buttons, inputs, badges */
  --radius-card: 8px;     /* cards, tiles, panels */
  --shadow-card: 0 1px 2px rgba(15, 27, 45, 0.04), 0 4px 12px rgba(15, 27, 45, 0.06); /* the one shadow -- raised cards only, never tables/buttons/rows */
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  background: var(--canvas);
  color: var(--body);
  margin: 0;
  line-height: 1.55;
  font-size: 16px; /* legibility over density -- nurses and administrators, sometimes on a tablet */
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-32); }
h2 { font-size: var(--text-20); }
h3 { font-size: var(--text-16); }

p.subtitle, .subtitle {
  color: var(--muted);
  margin-top: 0;
  font-size: var(--text-14);
}

a { color: var(--brand-navy); text-decoration: none; font-weight: var(--weight-emphasis); }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

code, .mono, .cite, .as-of, .detail {
  font-family: var(--font-mono);
}

/* --- Page container: the only scrolling region's content wrapper -------- */

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-32) var(--space-64);
}
.page.narrow { max-width: 640px; }

/* --- App shell -----------------------------------------------------------
   CSS Grid: the sidebar spans both grid rows (a real, full-height nav rail
   that never scrolls with content -- verified live by an unchanged bounding
   box before/after scrolling and on a page with almost no content), the
   top bar occupies only the top-right cell, and .app-content is the one
   grid cell whose height is bounded by the grid (1fr inside 100vh) and
   therefore the only thing that scrolls. */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
}
.app-sidebar {
  grid-area: sidebar;
  background: var(--brand-navy);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.app-sidebar-logo {
  flex: 0 0 auto;
  padding: var(--space-24) var(--space-24) var(--space-16);
  display: flex;
  text-decoration: none;
}
.app-sidebar-logo img, .app-sidebar-logo svg { height: 34px; width: auto; display: block; }

.app-nav { display: flex; flex-direction: column; padding-top: var(--space-8); }
.app-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  color: var(--nav-inactive);
  font-weight: var(--weight-emphasis);
  font-size: var(--text-14);
  border-left: 3px solid transparent;
}
.app-nav a:hover { color: #FFFFFF; text-decoration: none; background: rgba(255, 255, 255, 0.06); }
.app-nav a.active {
  border-left-color: var(--brand-teal);
  background: rgba(255, 255, 255, 0.09);
  color: #FFFFFF;
  font-weight: var(--weight-heading);
}

.app-topbar {
  grid-area: topbar;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--space-24);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.app-topbar-agency {
  font-size: var(--text-14);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-content { grid-area: content; overflow-y: auto; padding-top: var(--space-32); }
.app-synthetic-banner { margin: 0 var(--space-32) var(--space-16); }

@media (max-width: 720px) {
  .app-shell { grid-template-columns: 64px 1fr; }
  .app-sidebar-logo { justify-content: center; padding: var(--space-16) var(--space-8); }
  .app-sidebar-logo img, .app-sidebar-logo svg { height: 22px; }
  .app-nav a { padding: var(--space-12) var(--space-8); font-size: 0; justify-content: center; }
  .app-nav a::first-letter { font-size: var(--text-16); }
  .app-topbar-agency { display: none; }
}

/* --- Account menu: a proper dropdown, no native disclosure triangle ----- */

.account-menu { position: relative; }
.account-menu summary {
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-emphasis);
  font-size: var(--text-14);
  color: var(--ink);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  display: flex; align-items: center; gap: var(--space-8);
}
.account-menu summary::marker { content: ""; display: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin-top: -4px;
}
.account-menu[open] summary { background: var(--canvas); border-color: var(--border); }
.account-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + var(--space-8));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  min-width: 180px;
  padding: var(--space-4);
  z-index: 20;
}
.account-menu-dropdown a, .account-menu-dropdown form { display: block; margin: 0; }
.account-menu-dropdown a {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-control);
  font-weight: var(--weight-emphasis);
  font-size: var(--text-14);
  color: var(--ink);
}
.account-menu-dropdown a:hover { background: var(--canvas); text-decoration: none; }
.account-menu-logout {
  width: 100%; text-align: left; background: none; border: none; color: var(--ink);
  font-family: inherit; font-size: var(--text-14); font-weight: var(--weight-emphasis);
  padding: var(--space-8) var(--space-12);
  margin: 0; min-height: auto; border-radius: var(--radius-control); cursor: pointer;
}
.account-menu-logout:hover { background: var(--canvas); }

/* --- Forms: generous tap targets, one focus color ------------------------ */

label {
  display: block;
  margin-top: var(--space-16);
  font-weight: var(--weight-heading);
  font-size: var(--text-14);
  color: var(--ink);
}
.hint, legend .hint {
  display: block;
  font-family: var(--font-body); /* legend is set in Fraunces; without this a nested .hint inherits it too */
  font-weight: var(--weight-body);
  color: var(--muted);
  font-size: var(--text-12);
  margin-top: var(--space-4);
}

input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-16);
  padding: var(--space-12);
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  min-height: 2.75rem;
}
textarea { min-height: 5rem; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-navy); }

fieldset {
  margin-top: var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-16) var(--space-24);
}
legend {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-16);
  padding: 0 var(--space-8);
  color: var(--ink);
}

.row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
@media (max-width: 520px) { .row-pair { grid-template-columns: 1fr; } }

/* Two fieldsets side by side at the standard page width, instead of one
   long single column with wide gutters either side -- see .page above. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: start; }
.form-grid > .full-width { grid-column: 1 / -1; }
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }

.custom-field-group {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-16) var(--space-16);
  border-left: 3px solid var(--warning);
  background: var(--warning-bg);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* --- Buttons: one primary, one secondary outline, one quiet text style -- */

button, .button {
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: var(--text-16);
  padding: var(--space-12) var(--space-24);
  margin-top: var(--space-24);
  border: 1px solid var(--brand-navy);
  border-radius: var(--radius-control);
  background: var(--brand-navy);
  color: #FFFFFF;
  cursor: pointer;
  min-height: 2.75rem;
  display: inline-block;
  text-decoration: none;
  line-height: 1.3;
}
button:hover, .button:hover { background: #082047; border-color: #082047; text-decoration: none; }
button.secondary, .button.secondary {
  background: var(--surface);
  color: var(--brand-navy);
  border: 1px solid var(--border);
}
button.secondary:hover, .button.secondary:hover { background: var(--canvas); border-color: var(--brand-navy); }
button.quiet, .button.quiet {
  background: none; border: none; color: var(--brand-navy);
  padding: var(--space-8) var(--space-12); margin-top: var(--space-16); min-height: auto;
  font-weight: var(--weight-emphasis);
}
button.quiet:hover, .button.quiet:hover { text-decoration: underline; background: none; }

/* --- Banners / alerts: one shape, three status tones + one neutral ----- */

.banner, .errors, .synthetic-banner, .agency-banner, .gap-box, .clean, .warnings, .info-banner, .filter-banner {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  margin-bottom: var(--space-24);
  font-size: var(--text-14);
}
.errors, .error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.errors ul { margin: var(--space-8) 0 0; padding-left: var(--space-24); }

/* The demo banner: quiet, informative, never shouting -- a thin muted bar,
   not a bold warning block. */
.synthetic-banner {
  background: var(--canvas); border-color: var(--border); color: var(--muted);
  font-weight: var(--weight-body); font-size: var(--text-12);
  padding: var(--space-8) var(--space-16);
}
.warnings { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.warnings h2 { color: var(--warning); font-size: var(--text-16); }
.warnings .why { display: block; color: var(--muted); font-size: var(--text-12); font-style: italic; font-weight: var(--weight-body); }
.agency-banner, .gap-box, .info-banner, .filter-banner { background: var(--info-bg); border-color: var(--info-border); color: var(--ink); }
.filter-banner { display: flex; justify-content: space-between; align-items: center; }
.filter-banner a { color: var(--brand-navy); font-weight: var(--weight-heading); }
.clean { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }

/* --- Cards --------------------------------------------------------------- */

.card, .summary-tile, .display-box, details.add-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}
.card { margin-bottom: var(--space-24); box-shadow: var(--shadow-card); }
.card.stalled { border-color: var(--warning); }
.card.stalled-improving { border-color: var(--info-border); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-8); }
.card-head h2 { margin: 0; font-size: var(--text-20); }

a.summary-tile { display: block; text-decoration: none; color: inherit; transition: border-color 0.1s; }
a.summary-tile:hover { border-color: var(--brand-navy); }
a.summary-tile:hover .label { color: var(--brand-navy); text-decoration: underline; }
.summary-row { display: flex; gap: var(--space-16); margin-bottom: var(--space-24); }
.summary-tile { box-shadow: var(--shadow-card); }
.summary-tile .num { font-family: var(--font-heading); font-size: var(--text-32); font-weight: var(--weight-heading); display: block; color: var(--ink); }
.summary-tile .label { font-size: var(--text-14); font-weight: var(--weight-emphasis); color: var(--muted); display: block; margin-bottom: var(--space-4); }
.summary-tile.stalled { border-color: var(--warning-border); background: var(--warning-bg); }
.summary-tile.stalled .num, .summary-tile.stalled .label { color: var(--warning); }
.summary-tile.stalled:hover { border-color: var(--warning); }
/* Overdue is the tile that matters -- visual priority over the other two:
   filled with the full saturated danger color, not just its tint, and
   given more weight so it reads first. */
.summary-tile.overdue {
  border-color: var(--danger); background: var(--danger);
  box-shadow: 0 2px 8px rgba(180, 35, 24, 0.18);
}
.summary-tile.overdue .num, .summary-tile.overdue .label { color: #FFFFFF; }
.summary-tile.overdue:hover { border-color: #8f1c13; }

.display-box { font-size: var(--text-14); margin: var(--space-8) 0; }

/* --- Dashboard: "Worth a look" observations ------------------------------ */

.next-steps-list { margin: 0; padding-left: var(--space-16); }
.next-steps-list li { margin-bottom: var(--space-8); font-size: var(--text-14); }
.next-steps-list li:last-child { margin-bottom: 0; }
.next-steps-list a { white-space: nowrap; }

/* --- What's due -------------------------------------------------------- */

.whats-due-list { display: flex; flex-direction: column; gap: var(--space-16); }
.whats-due-card .card-head { margin-bottom: var(--space-8); }
.whats-due-date { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--ink); }
.whats-due-status { margin: 0 0 var(--space-8); }
.whats-due-source { font-size: var(--text-12); color: var(--muted); display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }

/* --- Measurement plan: plain questions, not a bare regulatory table ------- */

.measurement-plan-questions {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  margin: var(--space-8) 0;
}
.measurement-plan-field { padding: var(--space-16) var(--space-24); }
.measurement-plan-field + .measurement-plan-field { border-top: 1px solid var(--border); }
.measurement-plan-question {
  font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: var(--text-16); color: var(--ink);
  display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap;
}
.measurement-plan-answer { font-size: var(--text-16); color: var(--ink); margin-top: var(--space-4); }
.measurement-plan-answer.empty { color: var(--muted); font-style: italic; }
.measurement-plan-example {
  font-family: var(--font-body); font-weight: var(--weight-body);
  color: var(--muted); font-size: var(--text-12); margin-top: var(--space-4);
}

details.add-form { margin-bottom: var(--space-24); box-shadow: none; }
details.add-form summary { cursor: pointer; color: var(--brand-navy); font-weight: var(--weight-heading); font-family: var(--font-body); }
details.add-form[open] summary { margin-bottom: var(--space-16); }

/* --- Badges: small, tinted, never a saturated fill; color + word + shape - */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-12);
  font-weight: var(--weight-heading);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-control);
  margin-right: var(--space-8);
  font-family: var(--font-body);
}
.program-badge { background: var(--info-bg); color: var(--ink); }
.status-badge { background: var(--info-bg); color: var(--ink); }
.ok-badge { background: var(--success-bg); color: var(--success); }
.stall-badge { background: var(--warning-bg); color: var(--warning); }
.custom-topic-badge, .custom-trigger-badge { background: var(--info-bg); color: var(--ink); }
.status-on_track { background: var(--success-bg); color: var(--success); }
.status-needs_update { background: var(--warning-bg); color: var(--warning); }
.status-stalled { background: var(--danger-bg); color: var(--danger); }
.status-stalled-improving { background: var(--info-bg); color: var(--ink); }

/* --- Documentation completeness ------------------------------------------ */
.completeness-row { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-8) 0; }
.completeness-bar {
  flex: 1 1 auto;
  height: var(--space-8);
  background: var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.completeness-bar-fill { height: 100%; background: var(--brand-navy); }
.completeness-count { font-size: var(--text-12); color: var(--muted); white-space: nowrap; font-family: var(--font-mono); }

.draft-row {
  display: grid; grid-template-columns: 1fr 200px auto; align-items: center; gap: var(--space-16);
  padding: var(--space-12) 0; border-top: 1px solid var(--border);
}
.draft-row:first-of-type { border-top: none; }
.draft-row-name { font-weight: var(--weight-heading); }
.draft-row-resume { margin: 0; white-space: nowrap; }
@media (max-width: 720px) { .draft-row { grid-template-columns: 1fr; } }
.missing-sections { margin: var(--space-4) 0 var(--space-8); }
.missing-section-item { font-size: var(--text-12); color: var(--muted); margin-bottom: var(--space-8); }
.missing-section-item:last-child { margin-bottom: 0; }
.missing-sections strong { color: var(--ink); font-weight: var(--weight-heading); }
.data-age { font-size: var(--text-12); color: var(--muted); }
.data-age.stale { color: var(--warning); font-weight: var(--weight-heading); }
.effort-low, .tier-low { background: var(--success-bg); color: var(--success); }
.effort-medium, .tier-medium { background: var(--warning-bg); color: var(--warning); }
.effort-high, .tier-high { background: var(--danger-bg); color: var(--danger); }
.score { font-family: var(--font-heading); font-size: var(--text-24); font-weight: var(--weight-heading); color: var(--ink); }
.score-max { font-size: var(--text-12); color: var(--muted); font-weight: var(--weight-body); }
.not-applicable { color: var(--muted); font-style: italic; }
.placeholder { color: var(--warning); }

.sec-num, .rank {
  display: inline-block;
  background: var(--brand-navy);
  color: #FFFFFF;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  text-align: center;
  line-height: 1.6rem;
  font-size: var(--text-12);
  margin-right: var(--space-8);
  font-family: var(--font-mono);
}
.rank { font-weight: var(--weight-heading); }

/* --- Stall flags / escalation -------------------------------------------- */

.flag {
  border-left: 3px solid var(--warning);
  background: var(--warning-bg);
  padding: var(--space-8) var(--space-16);
  margin-top: var(--space-8);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.flag .detail { font-size: var(--text-14); }
.flag .escalation { font-size: var(--text-12); margin-top: var(--space-4); font-weight: var(--weight-heading); }
.escalation.owner_reminder { color: var(--warning); }
.escalation.qapi_coordinator { color: var(--warning); }
.escalation.governing_body_agenda { color: var(--danger); }
.no-flags { color: var(--success); font-size: var(--text-14); margin-top: var(--space-8); }

/* --- Citations / data ----------------------------------------------------- */

.gap-box {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-card);
  padding: var(--space-16);
  margin: var(--space-16) 0;
  font-size: var(--text-14);
}
.reasoning {
  font-style: italic;
  color: var(--ink);
  border-left: 3px solid var(--brand-navy);
  padding-left: var(--space-16);
  margin: var(--space-16) 0;
}
.cite {
  font-size: var(--text-12);
  color: var(--muted);
}

/* --- Status board (dashboard headline) -----------------------------------
   Progressive disclosure: one status, one headline reason, everything else
   behind a "+N more" link. One fact, one place -- the target-date column
   shows only the date/relative time, the status column shows only the
   badge + a single headline reason, never a third restatement. */
.status-board { margin-top: var(--space-16); }
.status-board-row.tier-overdue td:first-child { border-left: 3px solid var(--danger); }
.status-board-row.tier-needs_attention td:first-child { border-left: 3px solid var(--warning); }
.status-board-row.tier-on_track td:first-child { border-left: 3px solid var(--success); }
.status-headline-reason { font-size: var(--text-12); color: var(--muted); margin-top: var(--space-4); }
.status-more-link { display: inline-block; font-size: var(--text-12); margin-top: var(--space-4); font-weight: var(--weight-emphasis); }
.quiet-warning { color: var(--warning); font-style: italic; }

/* --- Tables: quiet, no vertical borders, one hairline per row ------------- */

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: var(--space-8);
  font-size: var(--text-14);
  background: var(--surface);
}
th, td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: var(--space-16);
  text-align: left;
  vertical-align: middle;
}
th {
  font-family: var(--font-body);
  font-size: var(--text-12);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
td.num, th.num { text-align: right; }
tbody tr { cursor: default; }
tbody tr:hover { background: var(--canvas); }
.status-board-row, tr[onclick] { cursor: pointer; }
.status-board-row td a, tr[onclick] td a { color: var(--ink); font-weight: var(--weight-heading); }

.empty, .not-applicable { color: var(--muted); font-style: italic; }
.note, .coordinator-note { font-size: var(--text-14); color: var(--muted); }
.escalation-explainer { font-size: var(--text-14); color: var(--ink); line-height: 1.5; }
.escalation-explainer p { margin: 0 0 var(--space-12); }
.escalation-explainer li { margin-bottom: var(--space-8); }
.as-of { font-size: var(--text-12); color: var(--muted); }
.back { display: inline-block; margin-top: var(--space-24); }

/* --- Empty states: never a blank region ------------------------------------ */
.empty-state {
  padding: var(--space-48) var(--space-24);
  text-align: center;
  color: var(--muted);
  font-size: var(--text-14);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
}
.empty-state a, .empty-state .button { margin-top: var(--space-16); }

/* --- Auth pages: centered card, product name up top ----------------------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32) var(--space-16);
  background: var(--canvas);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-32);
}
.auth-wordmark { margin-bottom: var(--space-24); text-align: center; }
.auth-wordmark img, .auth-wordmark svg { height: 38px; }
.auth-card h1 { font-size: var(--text-24); margin-bottom: var(--space-4); }
.auth-card p.note, .auth-card p.subtitle { margin-top: 0; }
.auth-card button { width: 100%; }

/* --- Quiet actions menu: same disclosure-free dropdown as .account-menu -
   reused verbatim for "Change owner" / "Update status" on the PIP page, so
   neither shows a raw browser <details> triangle. -------------------------- */

.quiet-actions-row { display: flex; gap: var(--space-8); flex-wrap: wrap; margin: var(--space-8) 0 var(--space-24); }
.quiet-actions-row .account-menu-dropdown {
  min-width: 320px; padding: var(--space-16);
  left: 0; right: auto; /* these buttons sit near the left edge, unlike the topbar's -- open rightward, not off into the sidebar */
}
.quiet-actions-row .account-menu-dropdown form { margin: 0; }

/* --- Guided PIP flow: progress rail + one section at a time --------------- */

.pip-flow { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-32); align-items: start; }
@media (max-width: 860px) { .pip-flow { grid-template-columns: 1fr; } }

.pip-rail {
  position: sticky; top: var(--space-32);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--space-8); box-shadow: var(--shadow-card);
}
.pip-rail-item {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-control);
  font-size: var(--text-14); font-weight: var(--weight-emphasis);
  color: var(--body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.pip-rail-item:hover { background: var(--canvas); text-decoration: none; }
.pip-rail-item.active { background: var(--info-bg); border-color: var(--info-border); color: var(--ink); font-weight: var(--weight-heading); }
.pip-rail-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
}
.pip-rail-item[data-status="done"] .pip-rail-dot { background: var(--success); border-color: var(--success); }
.pip-rail-item[data-status="in_progress"] .pip-rail-dot { background: var(--warning); border-color: var(--warning); }
.pip-rail-item[data-status="not_started"] .pip-rail-dot { background: var(--surface); border-color: var(--border); }
.pip-rail-item.review-item { margin-top: var(--space-8); border-top: 1px solid var(--border); border-radius: 0; padding-top: var(--space-16); }

.pip-section-panel { min-width: 0; }
.pip-section-panel[hidden] { display: none; }
.pip-section-continue { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-12); margin-top: var(--space-16); }
.pip-section-continue .button.quiet { margin-top: 0; }

/* Item 3: every readiness item links straight back to its own section. */
.readiness-item-link { display: inline-block; margin-left: var(--space-8); font-size: var(--text-12); }

/* --- AI assistance: "Improve this" / "Check this section" ----------------- */

.ai-assist { margin-top: var(--space-8); }
.ai-assist-actions { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.ai-assist-actions .button.quiet { margin-top: 0; }
.ai-assist-status { font-size: var(--text-12); color: var(--muted); }
.ai-assist-panel {
  margin-top: var(--space-8); padding: var(--space-16);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.ai-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
@media (max-width: 720px) { .ai-diff { grid-template-columns: 1fr; } }
.ai-diff-col { background: var(--canvas); border-radius: var(--radius-control); padding: var(--space-12); }
.ai-diff-col h4 { margin: 0 0 var(--space-8); font-size: var(--text-12); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ai-diff-col p { margin: 0; font-size: var(--text-14); white-space: pre-wrap; }
.ai-diff-col[data-role="suggestion"] { border-left: 3px solid var(--brand-teal-deep); }
.ai-phi-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-control); padding: var(--space-12) var(--space-16); color: var(--warning); }
.ai-phi-warning ul { margin: var(--space-8) 0; }
.ai-phi-warning .note { color: var(--body); }
.ai-assist-error { background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-control); padding: var(--space-12) var(--space-16); color: var(--danger); font-size: var(--text-14); }
.ai-observations { font-size: var(--text-14); line-height: 1.5; }
.section-check-findings { margin: 0; padding-left: var(--space-24); font-size: var(--text-14); }
.section-check-findings li { margin-bottom: var(--space-12); }
.section-check-findings li:last-child { margin-bottom: 0; }
.section-check-suggestion { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-12); font-style: italic; }