/* File:          www/assets/css/design-system.css
 * Purpose:       Single source of truth for color, type, and spacing
 *                tokens across the entire site. Every page links this
 *                file; no page defines its own color/type values.
 * Data accessed: None. Static styling only.
 * PII exposure:  None. This file contains no content, only presentation.
 * Auth required: None. Served publicly as a static asset from www/.
 * Write access:  None.
 * Depends on:    Self-hosted font files under ../fonts/ and ../icons/.
 *                No runtime request to any CDN — see the @font-face note.
 * Last reviewed: 2026-08-05
 *
 * ===========================================================================
 * THIS IS THE ONLY FILE IN THE PROJECT THAT MAY CONTAIN A RAW HEX COLOUR OR
 * A FONT-FAMILY NAME (INSTRUCTIONS_PHASE2E.md § 1 and § 5).
 * ===========================================================================
 * Everything else — every page, every inline style, every future stylesheet —
 * references the custom properties below. If you find yourself typing a hex
 * value anywhere else, the token you need is missing here; add it here
 * instead.
 *
 * FONT PROVENANCE. The woff2 files under ../fonts/ and ../icons/ were taken
 * from these packages and are served from this host. Nothing is fetched from
 * fonts.googleapis.com or any icon CDN at runtime, deliberately: a
 * render-blocking third-party request on every page load is both a
 * performance cost and an availability dependency this site should not have.
 * It is also a privacy leak — it would tell Google's CDN which pages of a
 * private case file are being read, and by whom.
 *
 *   npm install @fontsource/source-serif-4@5.3.0 \
 *               @fontsource/ibm-plex-sans@5.3.0 \
 *               @fontsource/ibm-plex-mono@5.3.0 \
 *               @tabler/icons-webfont@3.46.0
 *
 * Only the weights actually used are copied: Source Serif 4 500/600,
 * IBM Plex Sans 400/500, IBM Plex Mono 400/500. The Tabler face is the
 * OUTLINE build; no -filled variant is shipped or referenced anywhere.
 * ===========================================================================
 */

:root {
  /* Palette — literal values, defined once */
  --palette-navy-900: #0E2540;   /* primary surface (nav panel), primary text on white */
  --palette-navy-700: #1A3555;   /* hover/active state on navy surfaces */
  --palette-navy-400: #5D7A9C;   /* secondary text, muted labels */
  --palette-navy-200: #9FB4CE;   /* tertiary text on navy surfaces */
  --palette-navy-100: #E2E9F0;   /* hairline borders, light fills */
  --palette-navy-050: #F5F8FB;   /* subtle panel backgrounds on white */
  --palette-white:    #FFFFFF;
  --palette-gold:     #A6791F;   /* the one accent — confidence/authority signature */
  --palette-gold-soft:#D9BB6E;   /* gold on dark navy surfaces (nav icons/text) */
  --palette-teal:     #0F6B57;   /* "proven" state */
  --palette-red:      #B23A2E;   /* violations, deadlines, danger */
  --palette-red-bg:   #FBEDEB;   /* light red fill for flagged rows */

  /* Semantic aliases — components reference these, never the palette directly */
  --color-surface-page:      var(--palette-white);
  --color-surface-panel:     var(--palette-navy-900);
  --color-surface-panel-hover: var(--palette-navy-700);
  --color-surface-card:      var(--palette-navy-050);
  --color-text-primary:      var(--palette-navy-900);
  --color-text-secondary:    var(--palette-navy-400);
  --color-text-on-panel:     var(--palette-white);
  --color-text-on-panel-muted: var(--palette-navy-200);
  --color-border:             var(--palette-navy-100);
  --color-accent:             var(--palette-gold);
  --color-accent-on-panel:    var(--palette-gold-soft);
  --color-proven:             var(--palette-teal);
  --color-danger:             var(--palette-red);
  --color-danger-bg:          var(--palette-red-bg);

  /* Type roles */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, sans-serif;
  --font-data:    'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing (keep consistent with what the mockups used) */
  --space-xs: 4px; --space-sm: 8px; --space-md: 14px;
  --space-lg: 20px; --space-xl: 32px;
  --radius: 10px;

  /* Layout. Phase 2F § 1 fixes the top bar height and § 2 derives the
   * sidebar height from it (calc(100vh - <topbar height>)). Expressed once,
   * here, because the two must agree exactly or the sidebar overhangs the
   * viewport. This is a dimension, NOT a colour or a font — § 6's condition
   * names those two specifically. Flagged in INSTRUCTIONS_PHASE2F.log § 3. */
  --topbar-height: 60px;
}

/* ---------------------------------------------------------------------------
 * Self-hosted faces. font-display: swap so text is readable immediately
 * rather than invisible while a face loads.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'tabler-icons'; font-style: normal; font-weight: 400;
  font-display: block;
  src: url('../icons/tabler-icons.woff2') format('woff2');
}

/* Icon base + the subset actually used. Subsetted deliberately rather than
 * shipping the full ~5,800-rule sheet: it keeps this file readable, and it
 * makes it impossible for a -filled class to creep in unnoticed. */
.ti {
  font-family: 'tabler-icons' !important;
  font-weight: 400; font-style: normal; font-variant: normal;
  line-height: 1; letter-spacing: 0; text-transform: none;
  display: inline-block; vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased; speak: none;
}
.ti-home:before { content: "\eac1"; }
.ti-layout-dashboard:before { content: "\f02c"; }
.ti-users:before { content: "\ebf2"; }
.ti-folder:before { content: "\eaad"; }
.ti-file-text:before { content: "\eaa2"; }
.ti-scale:before { content: "\ebc2"; }
.ti-books:before { content: "\eff2"; }
.ti-gavel:before { content: "\ef90"; }
.ti-settings:before { content: "\eb20"; }
.ti-alarm:before { content: "\ea04"; }
.ti-calendar-event:before { content: "\ea52"; }
.ti-flag:before { content: "\eaa6"; }
.ti-paperclip:before { content: "\eb02"; }
.ti-logout:before { content: "\eba8"; }
.ti-chevron-right:before { content: "\ea61"; }
.ti-plus:before { content: "\eb0b"; }
.ti-alert-triangle:before { content: "\ea06"; }
.ti-circle-check:before { content: "\ea67"; }
.ti-clock:before { content: "\ea70"; }
.ti-building-bank:before { content: "\ebe2"; }
.ti-link:before { content: "\eade"; }
.ti-id-badge-2:before { content: "\f076"; }

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* Phase 2G § 1 — the document never scrolls. The only scrolling surface on
 * the whole site is .page-content. Everything else is structurally placed by
 * the shell grid and cannot move. */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; }
h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: var(--space-xl) 0 var(--space-md); }
h3 {
  font-family: var(--font-body); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-secondary); margin-bottom: var(--space-sm);
}
h4 { font-size: 1rem; }
p { margin: 0 0 var(--space-md); }
a { color: var(--color-accent); }
a:hover, a:focus { color: var(--palette-navy-700); }

.mono { font-family: var(--font-data); }
.serif { font-family: var(--font-display); }
.muted { color: var(--color-text-secondary); }
.small { font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
 * Public pages — single column, no app shell. § 3 is explicit that these must
 * not imply a login state that does not exist.
 * ------------------------------------------------------------------------ */

.page { max-width: 48rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg) 4rem; }
.page-wide { max-width: 54rem; }

.masthead {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
}
.masthead .rule {
  width: 48px; height: 3px; background: var(--color-accent);
  margin-bottom: var(--space-md);
}
.masthead .tagline {
  color: var(--color-text-secondary); font-size: 0.95rem; margin: var(--space-xs) 0 0;
}

.navlist { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.navlist a {
  display: block; padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-text-primary); text-decoration: none;
}
.navlist a:hover, .navlist a:focus { border-color: var(--color-accent); }
.navlist strong { display: block; font-family: var(--font-display); }
.navlist span { color: var(--color-text-secondary); font-size: 0.88rem; }

.notice {
  padding: var(--space-md) var(--space-lg);
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  color: var(--color-text-secondary); font-size: 0.9rem;
}

.sitefoot {
  margin-top: 3rem; padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary); font-size: 0.82rem;
}

/* ---------------------------------------------------------------------------
 * Chrome — top bar (every page) and sidebar (authenticated pages only).
 *
 * Phase 2F § 0: these two must read as ONE continuous navy frame, not as two
 * separately-styled pieces stacked on each other. So: identical background
 * token, sidebar flush to the viewport's left edge and to the underside of
 * the top bar, and no rounded corner on any edge that touches either.
 * ------------------------------------------------------------------------ */

.topbar {
  /* Phase 2G: NOT sticky. The shell grid gives it a fixed row of exactly
   * --topbar-height, so it cannot move at all — there is no scroll position
   * for it to respond to. height: 100% fills that row, which keeps the token
   * and the rendered height identical by construction (§ 2). */
  height: 100%;
  background: var(--color-surface-panel);
  color: var(--color-text-on-panel);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-lg);
}
.topbar-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--color-text-on-panel); text-decoration: none;
  display: flex; align-items: center; gap: var(--space-sm);
}
.topbar-brand .rule { width: 22px; height: 3px; background: var(--color-accent-on-panel); }
.topbar-brand:hover, .topbar-brand:focus { color: var(--color-text-on-panel); }

.topbar-account { position: relative; display: flex; align-items: center; gap: var(--space-sm); }

/* Logged out: one gold-accented control. */
.topbar-login {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md); border-radius: 6px;
  border: 1px solid var(--color-accent-on-panel);
  color: var(--color-accent-on-panel); text-decoration: none; font-size: 0.9rem;
}
.topbar-login:hover, .topbar-login:focus {
  background: var(--color-accent-on-panel); color: var(--color-surface-panel);
}

/* Logged in: a profile chip that opens the only account menu on the site. */
.topbar-chip {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md); border-radius: 6px;
  background: none; border: 1px solid transparent;
  color: var(--color-text-on-panel); font-size: 0.9rem; font-family: var(--font-body);
}
.topbar-chip:hover, .topbar-chip:focus { background: var(--color-surface-panel-hover); }
.topbar-chip .ti { color: var(--color-accent-on-panel); }

.topbar-menu {
  position: absolute; right: 0; top: calc(100% + var(--space-xs));
  min-width: 11rem; background: var(--color-surface-page);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-xs) 0; display: none; z-index: 30;
}
.topbar-menu.open { display: block; }
.topbar-menu a, .topbar-menu button {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%;
  padding: var(--space-sm) var(--space-md); background: none; border: none;
  color: var(--color-text-primary); text-decoration: none;
  font-size: 0.9rem; font-family: var(--font-body); text-align: left;
}
.topbar-menu a:hover, .topbar-menu button:hover,
.topbar-menu a:focus, .topbar-menu button:focus {
  background: var(--color-surface-card); color: var(--color-text-primary);
}
.topbar-menu .ti { color: var(--color-text-secondary); }

/* Phase 2G § 1 — fixed-height shell. Every page uses it; authenticated pages
 * add .has-sidebar for the second column. Nothing here is sticky: the grid
 * places the chrome and it stays placed. */
.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
}
.app-shell.has-sidebar {
  grid-template-columns: var(--sidebar-width, 240px) 1fr;
}
.app-shell.has-sidebar #topbar-shell {
  grid-column: 1 / -1; /* the top bar spans the sidebar and the content pane */
}
#topbar-shell { min-height: 0; }
#nav-shell {
  overflow-y: auto;  /* only if the situations list itself is long */
  height: 100%;
  min-height: 0;     /* without this a grid item refuses to shrink and scroll */
}

.nav {
  background: var(--color-surface-panel);
  color: var(--color-text-on-panel);
  padding: var(--space-lg) 0;
  display: flex; flex-direction: column; gap: var(--space-lg);
  /* 2F § 2 — full-height flush chrome, not a bounded card: no border, no
   * radius, flush to the viewport edge, directly under the top bar.
   * 2G: no longer sticky. #nav-shell is the grid item that owns the height
   * and the scroll; this fills it. */
  min-height: 100%;
  border: none; border-radius: 0;
}
.nav-brand { padding: 0 var(--space-lg); }
.nav-brand .rule { width: 32px; height: 3px; background: var(--color-accent-on-panel); margin-bottom: var(--space-sm); }
.nav-brand a {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--color-text-on-panel); text-decoration: none; display: block;
}
.nav-section { display: flex; flex-direction: column; }
.nav-section > h3 {
  padding: 0 var(--space-lg); margin-bottom: var(--space-xs);
  color: var(--color-text-on-panel-muted);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-on-panel); text-decoration: none;
  font-size: 0.92rem; border-left: 2px solid transparent;
}
.nav-item .ti { color: var(--color-accent-on-panel); font-size: 1.05rem; }
.nav-item:hover, .nav-item:focus {
  background: var(--color-surface-panel-hover); color: var(--color-text-on-panel);
}
/* § 4 (2E) — active state: gold left-border 2px + panel-hover background */
.nav-item.active {
  background: var(--color-surface-panel-hover);
  border-left-color: var(--color-accent-on-panel);
}
.nav-item.sub { padding-left: calc(var(--space-lg) + var(--space-md)); font-size: 0.88rem; }
.nav-situations { display: flex; flex-direction: column; }

/* 2I § 1 — a situation is a row of two controls: a chevron that expands its
 * cases, and the name itself, which navigates to the integrated view. They
 * are separate targets on purpose: expanding the tree and opening the
 * situation are different intentions and should not be the same click. */
.nav-situation { display: flex; align-items: stretch; }
.nav-situation .nav-item { flex: 1 1 auto; padding-left: var(--space-xs); min-width: 0; }
.nav-situation .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-toggle {
  flex: 0 0 auto; width: calc(var(--space-lg) + var(--space-md));
  background: none; border: none; border-left: 2px solid transparent;
  color: var(--color-accent-on-panel); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.nav-toggle:hover, .nav-toggle:focus { background: var(--color-surface-panel-hover); }
.nav-toggle .ti { font-size: 0.95rem; transition: transform 120ms ease; }
.nav-toggle[aria-expanded="true"] .ti { transform: rotate(90deg); }
.nav-situation.active .nav-toggle { border-left-color: var(--color-accent-on-panel);
                                    background: var(--color-surface-panel-hover); }

/* The case sub-links, one level deeper than a situation. */
.nav-cases { display: none; flex-direction: column; }
.nav-cases.open { display: flex; }
.nav-item.case {
  padding-left: calc(var(--space-lg) + var(--space-xl));
  font-size: 0.84rem; color: var(--color-text-on-panel-muted);
}
.nav-item.case:hover, .nav-item.case:focus { color: var(--color-text-on-panel); }
.nav-item.case.active { color: var(--color-text-on-panel); }
.nav-item.case .track { color: var(--color-accent-on-panel); text-transform: capitalize; }
.nav-empty {
  padding: var(--space-xs) var(--space-lg);
  color: var(--color-text-on-panel-muted); font-size: 0.84rem; font-style: italic;
}

/* 2H § 1 — SCROLLING AND CENTRING ARE NOW TWO DIFFERENT ELEMENTS.
 *
 * .scroll-pane is the grid item and the scroll container. It spans the full
 * width of its grid cell, so the scrollbar the browser draws inside it lands
 * at the true window edge (or, on an authenticated page, at the right edge of
 * the column beside the sidebar) rather than 1040px in from it.
 *
 * Through 2G these two jobs were on one element, which put the scrollbar on
 * the inside edge of the centred column with whitespace to its right.
 *
 * min-height: 0 is load-bearing and moves here with the grid-item role: a
 * grid item defaults to min-height: auto, which refuses to shrink below its
 * content and would push the shell taller than the viewport instead of
 * scrolling inside it. */
.scroll-pane {
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  background: var(--color-surface-page);
}

/* 2F § 3 — the centred content column. On an authenticated page this centres
 * within the space to the RIGHT of the sidebar, because .scroll-pane is the
 * grid's second column. On a public page there is no sidebar, so it centres
 * on the full viewport. Same rule, both cases.
 *
 * 2H: no overflow and no height here any more — this element only sets width
 * and centring. It is NOT a scroll container. */
.page-content {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.main-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-md); margin-bottom: var(--space-lg);
}
.crumb { font-size: 0.85rem; margin: 0 0 var(--space-xs); }
.crumb a { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------------------
 * Components
 * ------------------------------------------------------------------------ */

/* § 4 — case info card: gold left-border 3px, serif caption, mono for data */
.infocard {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface-card);
  padding: var(--space-lg);
}
.infocard dl {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.infocard dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.infocard dd { margin: 2px 0 0; }
.infocard dd.mono { font-family: var(--font-data); font-size: 0.94rem; }
.infocard .caption { font-family: var(--font-display); font-size: 1.05rem; }
.rep {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
}
@media (max-width: 36rem) { .rep { grid-template-columns: 1fr; } }
.rep .who { font-family: var(--font-display); }
.rep .none { color: var(--color-text-secondary); font-style: italic; font-size: 0.9rem; }

/* § 4 — summary cards */
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-md); }
@media (max-width: 42rem) { .summary { grid-template-columns: 1fr; } }
.sumcard {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
}
.sumcard-head {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.sumcard-head .ti { color: var(--color-accent); font-size: 1.1rem; }
.sumcard-head span {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.sumcard .figure { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.sumcard .figure.urgent { color: var(--color-danger); }
.sumcard ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; font-size: 0.9rem; }
.sumcard ul li { margin-bottom: var(--space-xs); }
.sumcard .when { font-family: var(--font-data); font-size: 0.88rem; color: var(--color-text-secondary); }

/* Statutory basis — never a bare date, anywhere */
.basis {
  font-size: 0.84rem; border-left: 2px solid var(--color-accent);
  padding-left: var(--space-sm); margin: var(--space-sm) 0 0;
}
.basis .lbl {
  display: block; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-secondary);
}
.uncited { color: var(--color-danger); font-size: 0.84rem; margin: var(--space-sm) 0 0; }

/* § 4 — timeline: navy connecting line, gold milestone dots, red flagged rows */
.tl { list-style: none; margin: 0; padding: 0; }
.tl > li {
  border-left: 2px solid var(--color-border);
  padding: 0 0 var(--space-lg) var(--space-lg);
  position: relative;
}
.tl > li.ms { border-left-color: var(--palette-navy-900); }
.tl > li.ms::before {
  content: ''; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-accent);
}
.tl > li.flagged::before { background: var(--color-danger); }
.tl > li.proven::before { background: var(--color-proven); }
.tl > li.marker {
  border-left-style: dashed; border-left-color: var(--color-accent);
  color: var(--color-accent); font-size: 0.86rem; font-style: italic;
}
.tl .when { font-family: var(--font-data); font-size: 0.86rem; color: var(--color-text-secondary); }
.tl .title { font-family: var(--font-display); font-size: 1.02rem; }

table.detail { width: 100%; border-collapse: collapse; font-size: 0.87rem; margin-top: var(--space-xs); }
table.detail th {
  text-align: left; font-weight: 500; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
table.detail td {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  vertical-align: top; border-bottom: 1px solid var(--color-border);
}
table.detail td.d { font-family: var(--font-data); white-space: nowrap; color: var(--color-text-secondary); }
/* red-tinted row for an event alleging a specific order provision */
table.detail tr.flagged td { background: var(--color-danger-bg); }

.flag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--color-danger); color: var(--color-danger);
  border-radius: 3px; padding: 0 var(--space-xs); margin-right: var(--space-xs);
}
.proven-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--color-proven); color: var(--color-proven);
  border-radius: 3px; padding: 0 var(--space-xs);
}

.badge {
  display: inline-block; font-size: 0.66rem; letter-spacing: 0.05em;
  text-transform: uppercase; border: 1px solid var(--color-border);
  border-radius: 3px; padding: 1px var(--space-xs); margin-left: var(--space-xs);
  color: var(--color-text-secondary); vertical-align: middle;
  font-family: var(--font-body);
}
.badge.accent { border-color: var(--color-accent); color: var(--color-accent); }

.card {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-card); padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}
.card.accent { border-left: 3px solid var(--color-accent); }
.card h4 { margin-bottom: var(--space-xs); }

ul.items { list-style: none; margin: 0; padding: 0; }
ul.items li {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-card);
  padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-sm);
}

.reps { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.reps li {
  border-left: 2px solid var(--color-border);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  margin-bottom: var(--space-xs); font-size: 0.88rem;
}
.reps li.current { border-left-color: var(--color-accent); }

.chips { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips li {
  border: 1px solid var(--color-border); border-radius: 3px;
  padding: 1px var(--space-sm); font-size: 0.86rem;
  background: var(--color-surface-page);
}

/* Forms */
form.block {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-card);
  padding: var(--space-md) var(--space-lg); margin-top: var(--space-sm);
}
details.fold > summary {
  cursor: pointer; font-size: 0.9rem; color: var(--color-accent);
  margin-top: var(--space-sm);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 36rem) { .row { grid-template-columns: 1fr; } }
.field { margin-bottom: var(--space-md); }
label {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: var(--space-xs);
}
input, select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem;
  padding: var(--space-sm); background: var(--color-surface-page);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent);
}
textarea { min-height: 4.5rem; resize: vertical; }
input[type=file] { border: none; padding: var(--space-xs) 0; }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.checks label {
  text-transform: none; letter-spacing: 0; font-size: 0.9rem;
  color: var(--color-text-primary); display: flex; align-items: center; gap: var(--space-xs);
}
.checks input { width: auto; }

button { font-family: var(--font-body); cursor: pointer; }
button.primary {
  padding: var(--space-sm) var(--space-lg); font-size: 0.92rem;
  background: var(--color-surface-panel); color: var(--color-text-on-panel);
  border: none; border-radius: 6px;
}
button.primary:hover, button.primary:focus { background: var(--color-surface-panel-hover); }
button.ghost {
  padding: var(--space-xs) var(--space-md); font-size: 0.9rem;
  background: var(--color-surface-page); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: 6px;
}
button.danger {
  padding: var(--space-xs) var(--space-md); font-size: 0.9rem;
  background: none; color: var(--color-danger);
  border: 1px solid var(--color-danger); border-radius: 6px;
}
button.linkish {
  background: none; border: none; padding: 0; font-size: inherit;
  color: var(--color-accent); text-decoration: underline;
}
a.cta {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg); border-radius: 6px;
  background: var(--color-surface-panel); color: var(--color-text-on-panel);
  text-decoration: none; font-size: 0.92rem;
}
a.cta:hover, a.cta:focus { background: var(--color-surface-panel-hover); color: var(--color-text-on-panel); }

.settings-grid { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: end; }
.settings-grid > div { flex: 1 1 9rem; }

.warn {
  border: 1px solid var(--color-danger); background: var(--color-danger-bg);
  border-radius: var(--radius); padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md); font-size: 0.88rem;
}
.warn strong { display: block; margin-bottom: var(--space-xs); font-family: var(--font-display); }

.hint { font-size: 0.8rem; color: var(--color-text-secondary); margin: var(--space-xs) 0 0; }
.msg { margin: var(--space-sm) 0 0; font-size: 0.86rem; }
.msg.error { color: var(--color-danger); }
.empty {
  padding: var(--space-md) var(--space-lg);
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  color: var(--color-text-secondary); font-size: 0.9rem;
}
.more {
  background: none; border: none; padding: var(--space-xs) 0;
  font-size: 0.84rem; color: var(--color-accent); text-decoration: underline;
}

.orphan {
  border: 1px solid var(--color-danger); border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg); margin-top: var(--space-xl);
}
.assign { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-sm); }
.assign select { width: auto; min-width: 12rem; }

.group { border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
         border-radius: var(--radius); background: var(--color-surface-card);
         padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
ul.cases { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
ul.cases li { margin-bottom: var(--space-xs); }
ul.cases a {
  display: block; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-page); color: var(--color-text-primary);
  text-decoration: none;
}
ul.cases a:hover, ul.cases a:focus { border-color: var(--color-accent); }
.cause { font-family: var(--font-data); font-size: 0.86rem; color: var(--color-text-secondary); }

.loginwrap {
  display: flex; align-items: center; justify-content: center;
  /* Fills the scroll pane, which the shell has already sized to the
   * remaining viewport. (2F used calc(100vh - topbar); under 2G's grid that
   * would double-count the bar. 2H: the height now comes from .scroll-pane,
   * which is this element's parent.) */
  min-height: 100%;
}
.logincard {
  max-width: 26rem; width: 100%;
  border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent);
  border-radius: var(--radius); background: var(--color-surface-card);
  padding: var(--space-xl) var(--space-lg);
}
.signin {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-md); border-radius: 6px;
  background: var(--color-surface-panel); color: var(--color-text-on-panel);
  text-decoration: none; font-size: 1rem;
}
.signin:hover, .signin:focus { background: var(--color-surface-panel-hover); color: var(--color-text-on-panel); }

/* Secondary metadata line. Used heavily across the app for the small grey
 * text under a heading — provenance, dates, counts. */
.about { color: var(--color-text-secondary); font-size: 0.82rem; }

.party {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-card);
  padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md);
}
.party h4 { margin-bottom: var(--space-xs); }

.status-line { color: var(--color-text-secondary); font-size: 0.9rem; margin: var(--space-lg) 0; }
.toolbar { margin-bottom: var(--space-lg); }
.identity { font-size: 0.85rem; color: var(--color-text-secondary);
            display: flex; align-items: baseline; gap: var(--space-md); }

/* Remaining components used by existing pages. */
fieldset {
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  margin: var(--space-lg) 0 0; padding: var(--space-md) var(--space-lg);
}
legend {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-secondary); padding: 0 var(--space-xs);
}
.childrow {
  display: grid; grid-template-columns: 1fr 11rem 2.4rem;
  gap: var(--space-sm); align-items: end; margin-bottom: var(--space-sm);
}
@media (max-width: 36rem) { .childrow { grid-template-columns: 1fr; } }
button.remove {
  padding: var(--space-sm) 0; background: none; color: var(--color-danger);
  border: 1px solid var(--color-border); border-radius: 6px;
}
.form { border-top: 1px solid var(--color-border); margin-top: var(--space-md); padding-top: var(--space-md); }
.chips li .age { color: var(--color-text-secondary); }
.case-title { font-family: var(--font-display); display: block; }
/* The login error is hidden until sign-in actually fails. Driven by the
 * `hidden` attribute rather than a class, so the default state is correct
 * even before any script runs. */
.warn[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * Landing page (Phase 2F § 4). Layout only — every colour and face below is
 * an existing token; this phase introduced no new palette entry.
 * ------------------------------------------------------------------------ */

.hero { padding: var(--space-xl) 0 var(--space-lg); max-width: 44rem; }
.hero .rule { width: 48px; height: 3px; background: var(--color-accent); margin-bottom: var(--space-lg); }
.hero h1 { font-size: 2.1rem; line-height: 1.25; letter-spacing: -0.015em; }
@media (max-width: 40rem) { .hero h1 { font-size: 1.6rem; } }
.hero .subhead {
  font-size: 1.05rem; color: var(--color-text-secondary);
  margin: var(--space-md) 0 var(--space-lg); max-width: 38rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
a.cta-secondary {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg); border-radius: 6px;
  border: 1px solid var(--color-border); color: var(--color-text-primary);
  text-decoration: none; font-size: 0.92rem;
}
a.cta-secondary:hover, a.cta-secondary:focus {
  border-color: var(--color-accent); color: var(--color-text-primary);
}

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-lg); margin: var(--space-xl) 0;
}
.feature {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface-card);
  padding: var(--space-lg);
}
.feature .ti { color: var(--color-accent); font-size: 1.4rem; }
.feature h3 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--color-text-primary);
  margin: var(--space-sm) 0 var(--space-xs);
}
.feature p { color: var(--color-text-secondary); font-size: 0.92rem; margin: 0; }