/* SubsidyLens default Theme — VENDORED from 45Black Trustee Edition v1.1
 * (~/.45black/brand/tokens/tokens.css, 2026-04-17). Vendored, not imported, because the
 * product ships self-contained to firms without the 45Black brand repo.
 *
 * brand.css — TIER 1-2 brand chrome, the white-label surface (ADR-027). A firm re-skins by
 * overriding this file (SUBSIDY_BRAND_CSS, no image rebuild) or by setting subsidy.toml [theme]
 * tokens. The legal furniture (heartbeat / presence / OGL) is NOT here — it lives in legal.css
 * (packaged, loaded last, un-overridable; enforced by the legal-furniture + css-layer tests).
 *
 * Inter is self-hosted (SIL OFL 1.1) from /static/fonts so the artefact renders identically
 * offline and on any firm's deployment — no external font CDN, no FOUT to a system face. The
 * variable font carries every weight 100-900 in one file. Licence: static/fonts/Inter-OFL.txt.
 * The system stack on --font-trustee remains as a fallback if a firm removes the bundled files.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2');
}
/* IBM Plex Mono (SIL OFL 1.1), self-hosted like Inter — used by --sl-mono (e.g. the look-back
 * record rows). Latin subset, regular weight. Licence: static/fonts/IBMPlex-OFL.txt. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
:root {
  /* ===========================================================================
     TIER 1 · 45Black Trustee primitives (vendored subset). Raw brand values; the
     themeable --sl-* tokens reference these. A firm normally overrides TIER 2,
     not these.
     =========================================================================== */
  --color-fiduciary-green:        #1B4D3E;
  --color-fiduciary-green-hover:  #153A2F;
  --color-fiduciary-green-press:  #0E2A22;
  --color-trustee-teal:    #00695C;
  --color-compliance-green:#2E7D32;
  --color-royal-purple:    #6A3A8C;
  --color-advisory-amber:  #B85D00;
  --color-amber-text:      #9A4E00;  /* darkened amber that holds AA as text (4.8:1) */
  --color-alert-red:       #C62828;  /* danger controls (delete/revoke) */
  --color-warm-cotton:     #FAFAF8;
  --color-document-grey:   #F5F5F3;
  --color-border-light:    #E0E0DE;
  --color-border-medium:   #BDBDBB;
  --color-ink-900: #212121;
  --color-ink-800: #424242;
  --color-ink-600: #5E5E5C;          /* brand-deviation: tertiary text, raised from #757575 for AA on small text */
  --color-status-review-bg:#E3F2FD; --color-status-review-text:#1565C0; --color-status-review-border:#90CAF9;

  --font-trustee: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ===========================================================================
     TIER 2 · Themeable SubsidyLens tokens — the white-label surface. A firm
     re-skins by overriding these; for the brand accent it sets primary_colour in
     its theme file, injected as --sl-brand-primary (config.Theme.css_vars). The
     scale below is adopted from the SubsidyLens design system (accent / surface /
     text / status / tag / focus / type / space / radius / shadow).
     =========================================================================== */
  /* Brand accent — Fiduciary Green. --sl-brand-primary is the firm override hook;
     --sl-accent follows it so the accent system tracks a firm's colour. Hover/press
     default to the verified Trustee shades; a firm doing bespoke branding overrides
     this whole file (the white-label seam), not just the one injected token. */
  --sl-brand-primary:   var(--color-fiduciary-green);
  --sl-brand-secondary: var(--color-trustee-teal);
  --sl-accent:          var(--sl-brand-primary);
  --sl-accent-hover:    var(--color-fiduciary-green-hover);
  --sl-accent-press:    var(--color-fiduciary-green-press);
  --sl-accent-tint:     #EAF0EE;  /* 8% green wash — active rows / selected facets */
  --sl-on-accent:       #FFFFFF;

  /* Neutral surfaces — warm-white paper */
  --sl-bg:              var(--color-warm-cotton);
  --sl-surface:         #FFFFFF;
  --sl-surface-alt:     var(--color-document-grey);
  --sl-subtle:          var(--sl-surface-alt);   /* design-system alias for surface-alt */
  --sl-border:          var(--color-border-light);
  --sl-border-strong:   var(--color-border-medium);

  /* Text ramp (all AAA/AA on paper) */
  --sl-text:            var(--color-ink-900);
  --sl-text-2:          var(--color-ink-800);
  --sl-text-3:          var(--color-ink-600);

  --sl-font:           var(--font-trustee);
  --sl-mono:           var(--font-mono);
  --sl-font-sans:      var(--font-trustee);   /* design-system aliases */
  --sl-font-mono:      var(--font-mono);

  /* Semantic status — NEVER colour alone (WCAG 1.4.1); paired with icon + text in
     use. Non-furniture status (facets, tags) may theme; the LOUD sync-stale state
     is legal furniture and lives in TIER 3 (locked) instead. */
  --sl-ok:      var(--color-compliance-green); --sl-ok-bg: #E8F1E9;
  --sl-info:    var(--color-trustee-teal);     --sl-info-bg: #E2EEEC;
  --sl-warn:    var(--color-amber-text);  --sl-warn-fill: var(--color-advisory-amber); --sl-warn-bg: #FBEEDF;
  /* Operational danger (operator console error/degraded) — RED, distinct from the amber --sl-warn.
     Themeable (Tier 2): it is operational state, NOT the locked legal-furniture stale state (Tier 3). */
  --sl-danger:  var(--color-alert-red);   --sl-danger-bg: #FCE8E6; --sl-danger-bd: #F0A8A8; --sl-danger-hover: #9b1c1c;

  /* Register change tags — new vs modified, told apart by glyph + label, not hue. */
  --sl-tag-new: var(--color-fiduciary-green); --sl-tag-new-bg: #EAF0EE;
  --sl-tag-mod: var(--color-royal-purple);    --sl-tag-mod-bg: #F0E9F4;

  /* Focus ring — visible, 3:1+ on paper and on accent, distinct hue from the green. */
  --sl-focus:      #0E4E99;
  --sl-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--sl-focus);
  --sl-link:           var(--sl-accent);
  --sl-link-underline: #9FB7AE;

  /* Type scale — each --sl-t-* is a complete `font:` shorthand. Data voice reads in
     the sans family (product decision, Wills 2026-06); true mono is pinned only on
     verbatim artefacts (authentic-record JSON, content hashes) at point of use. */
  --sl-t-hero:    600 40px/46px var(--sl-font);
  --sl-t-h1:      600 30px/38px var(--sl-font);
  --sl-t-h2:      600 22px/30px var(--sl-font);
  --sl-t-h3:      600 17px/24px var(--sl-font);
  --sl-t-body:    400 16px/26px var(--sl-font);
  --sl-t-body-md: 500 16px/24px var(--sl-font);
  --sl-t-body-sm: 400 14px/21px var(--sl-font);
  --sl-t-caption: 400 13px/18px var(--sl-font);
  --sl-t-overline:600 12px/16px var(--sl-font);
  --sl-overline-tracking: 0.1em;

  /* Space (4px base) */
  --sl-space-1:4px;  --sl-space-2:8px;  --sl-space-3:12px; --sl-space-4:16px;
  --sl-space-5:20px; --sl-space-6:24px; --sl-space-8:32px; --sl-space-10:40px;
  --sl-space-12:48px; --sl-space-16:64px; --sl-space-24:96px;

  /* Layout widths */
  --sl-w-page: 1200px; --sl-w-read: 760px; --sl-gutter: 32px; --sl-header-h: 60px;

  /* Radius — tight, letter-like (a printed document, not a SaaS card stack). */
  --sl-radius-xs: 2px; --sl-radius-sm: 4px; --sl-radius-md: 6px; --sl-radius-pill: 999px;

  /* Elevation — subtle, paper-like. */
  --sl-shadow-1: 0 1px 2px rgba(17,17,17,0.05), 0 1px 1px rgba(17,17,17,0.03);
  --sl-shadow-2: 0 2px 6px rgba(17,17,17,0.06), 0 1px 2px rgba(17,17,17,0.04);
  --sl-shadow-hairline: 0 1px 0 var(--sl-border);

  /* Motion — sparse; colour/state only. */
  --sl-transition: 150ms ease; --sl-transition-fast: 120ms ease;

  /* Back-compat aliases — existing page templates reference these names. Kept while
     screens migrate onto the explicit --sl-* contract, slice by slice. */
  --brand: var(--sl-accent);
  --muted: var(--sl-text-3);
  --line:  var(--sl-border);

  /* TIER 3 (the locked legal tokens + legal furniture) moved to legal.css (ADR-027) — packaged,
     loaded after brand.css so it wins the cascade, and never served from a firm override. */
}

@media (prefers-reduced-motion: reduce) {
  :root { --sl-transition: 0ms; --sl-transition-fast: 0ms; }
}

/* Shared base chrome (Trustee, light-first). Page templates add their own styles in {% block head %}. */
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  font: var(--sl-t-body);
  background: var(--sl-bg);
  color: var(--sl-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.sl-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* Visible keyboard focus everywhere — distinct blue ring, never removed (WCAG 2.4.7). */
:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; border-radius: var(--sl-radius-xs); }

/* Visually-hidden but screen-reader-available (e.g. table <caption>, skip links). */
.sl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks) — off-screen until focused, then pinned top-left. */
.sl-skip-link {
  position: absolute; left: var(--sl-space-2); top: -48px; z-index: 100;
  background: var(--sl-accent); color: var(--sl-on-accent); text-decoration: none;
  padding: 8px 14px; border-radius: var(--sl-radius-xs); font: var(--sl-t-body-sm); font-weight: 600;
  transition: top var(--sl-transition);
}
.sl-skip-link:focus { top: var(--sl-space-2); }
/* The skip target is a non-interactive landmark; don't ring the whole page when focus lands there. */
#main:focus { outline: none; }

/* ---- Header (sticky) ---------------------------------------------------------- */
.sl-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--sl-surface); border-bottom: 1px solid var(--sl-border);
}
.sl-header .sl-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-3) var(--sl-space-6); min-height: var(--sl-header-h); padding-top: var(--sl-space-2); padding-bottom: var(--sl-space-2); }
.sl-wordmark {
  font: var(--sl-t-h3); font-weight: 600; color: var(--sl-accent);
  letter-spacing: -0.01em; text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; gap: var(--sl-space-2);
}
.sl-logo { display: block; max-height: 32px; max-width: 220px; }
.sl-wordmark .lens { color: var(--sl-brand-secondary); }
.sl-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sl-space-2) var(--sl-space-4); font: var(--sl-t-body-sm); font-weight: 500; }
.sl-nav a {
  color: var(--sl-text-2); text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: color var(--sl-transition), border-color var(--sl-transition);
}
.sl-nav a:hover { color: var(--sl-accent); }
.sl-nav a[aria-current="page"] { color: var(--sl-accent); border-bottom-color: var(--sl-accent); }
.sl-nav__sep { width: 1px; height: 20px; background: var(--sl-border); }
/* Signed-in identity chip + signed-out call-to-action */
.sl-account { display: inline-flex; align-items: center; gap: var(--sl-space-2); color: var(--sl-text-2); }
.sl-avatar {
  width: 26px; height: 26px; border-radius: var(--sl-radius-pill);
  background: var(--sl-accent-tint); color: var(--sl-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--sl-t-caption); font-weight: 600;
}
.sl-nav__cta {
  background: var(--sl-accent); color: var(--sl-on-accent); text-decoration: none;
  padding: 6px 12px; border-radius: var(--sl-radius-xs); font-weight: 600; white-space: nowrap;
  border-bottom: none; transition: background var(--sl-transition);
}
.sl-nav__cta:hover { background: var(--sl-accent-hover); color: var(--sl-on-accent); }
/* The CTA also matches `.sl-nav a` (specificity 0,0,1,1), which outranks `.sl-nav__cta`
   (0,0,1,0) and would otherwise force the CTA text to --sl-text-2 (dark) over the green fill —
   a ~1.04:1 contrast fail (WCAG AA needs 4.5:1). Match the anchor+class specificity so the
   on-accent (white) foreground wins. Fixing the token alone cannot: the token is already correct. */
.sl-nav a.sl-nav__cta,
.sl-nav a.sl-nav__cta:hover { color: var(--sl-on-accent); }

/* Heartbeat banner / presence-only notice / OGL-footer legal furniture moved to legal.css
   (ADR-027) — the locked TIER 3 that base.html links AFTER this file so it wins the cascade. */

/* Register rows (Home, Recent changes, Diff list). The old feed-table/tag/rec selectors stay as
   aliases while the templates move onto the explicit sl-* Theme contract. */
.sl-register-table,
.feed-table { border-collapse: collapse; width: 100%; margin-top: 1rem; font-size: .88rem; }
.sl-register-table th,
.sl-register-table td,
.feed-table th,
.feed-table td {
  text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.sl-register-table th,
.feed-table th {
  font: var(--sl-t-overline); letter-spacing: var(--sl-overline-tracking);
  text-transform: uppercase; color: var(--sl-text-3);
}
.sl-change-row:hover { background: var(--sl-accent-tint); }
.sl-change-row--empty td { color: var(--sl-text-3); font-style: italic; }
.sl-change-row__detected { white-space: nowrap; color: var(--sl-text-2); }
.sl-change-tag,
.tag {
  display: inline-flex; align-items: center; gap: 4px; font: var(--sl-t-caption); font-weight: 600;
  line-height: 1.3; padding: 2px 9px; border-radius: var(--sl-radius-pill); text-transform: capitalize;
}
/* New vs modified are told apart by GLYPH + label, not hue alone (WCAG 1.4.1 / CVD-safe). */
.sl-change-tag--new,
.new { background: var(--sl-tag-new-bg); color: var(--sl-tag-new); }
.sl-change-tag--new::before,
.new::before { content: "+"; font-weight: 700; }
.sl-change-tag--modified,
.modified { background: var(--sl-tag-mod-bg); color: var(--sl-tag-mod); }
.sl-change-tag--modified::before,
.modified::before { content: "\25C6"; font-size: .72em; }
.sl-change-tag--unknown { background: var(--sl-subtle); color: var(--sl-text-3); }
.sl-record-ref,
.rec { font-family: var(--sl-mono); font-size: .78rem; color: var(--sl-text-3); }
.sl-record-ref__kind { color: var(--sl-text-3); }
.sl-record-title a,
.sl-record-ref a { font-weight: 500; }
.sl-search-result-row:hover { background: var(--sl-accent-tint); }
.sl-search-result-row--empty td { color: var(--sl-text-3); font-style: italic; }
.sl-lookback-row:hover { background: var(--sl-accent-tint); }
.sl-lookback-row--empty td { color: var(--sl-text-3); font-style: italic; }
.sl-money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Record detail (design port). Two columns: authentic record + provenance (main) and the
   indicative review window (sidebar). All classes live here (white-label contract: record.html
   is a surface template — test_theme_contract). The "exactly as held" claim is pinned to the
   collapsible authentic-record block; key fields are explicitly derived. */
.sl-breadcrumb { font: var(--sl-t-caption); color: var(--sl-text-3); margin: var(--sl-space-5) 0 var(--sl-space-3); }
.sl-breadcrumb a { color: var(--sl-text-3); }
.sl-breadcrumb a:hover { color: var(--sl-accent); }

.sl-record-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: var(--sl-space-8); align-items: start; }
@media (max-width: 820px) { .sl-record-grid { grid-template-columns: 1fr; } }

.sl-record-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-3); margin-bottom: var(--sl-space-2); }
.sl-id-badge {
  font: var(--sl-t-caption); font-weight: 600; letter-spacing: 0.02em;
  background: var(--sl-subtle); border: 1px solid var(--sl-border); color: var(--sl-text-2);
  padding: 2px 8px; border-radius: var(--sl-radius-xs);
}
.sl-status { display: inline-flex; align-items: center; gap: 6px; font: var(--sl-t-caption); color: var(--sl-text-2); }
.sl-status__dot { width: 7px; height: 7px; border-radius: var(--sl-radius-pill); background: var(--sl-ok); }
.sl-record-detail h1 { font: var(--sl-t-h1); color: var(--sl-text); margin: 0 0 var(--sl-space-3); }
.sl-record-detail h2 { font: var(--sl-t-h3); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-2); }

.sl-record-summary { display: grid; grid-template-columns: max-content 1fr; gap: var(--sl-space-2) var(--sl-space-5); margin: var(--sl-space-2) 0 0; }
.sl-record-summary dt { font: var(--sl-t-body-sm); font-weight: 600; color: var(--sl-text-2); }
.sl-record-summary dd { font: var(--sl-t-body-sm); color: var(--sl-text); margin: 0; }
.sl-derived-note { font: var(--sl-t-caption); color: var(--sl-text-3); margin: var(--sl-space-2) 0 0; }

.sl-actions { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); margin: var(--sl-space-5) 0 0; }
.sl-action {
  font: var(--sl-t-body-sm); font-weight: 500; text-decoration: none; cursor: pointer;
  background: var(--sl-surface); border: 1px solid var(--sl-border-strong); color: var(--sl-text);
  padding: 7px 12px; border-radius: var(--sl-radius-xs);
}
.sl-action:hover { border-color: var(--sl-accent); color: var(--sl-accent); }
.sl-action--primary { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent); }
.sl-action--primary:hover { background: var(--sl-accent-hover); color: var(--sl-on-accent); }

/* Authentic record — the legal record. Collapsible, one tap; the verbatim JSON pins mono. */
.sl-authentic { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface); margin-top: var(--sl-space-3); }
.sl-authentic > summary { cursor: pointer; padding: var(--sl-space-3) var(--sl-space-4); font: var(--sl-t-body-md); color: var(--sl-text); list-style: none; }
.sl-authentic > summary::-webkit-details-marker { display: none; }
.sl-authentic > summary::after { content: "\203A"; float: right; transition: transform var(--sl-transition); }
.sl-authentic[open] > summary::after { transform: rotate(90deg); }
.sl-authentic__note { font: var(--sl-t-caption); color: var(--sl-text-3); padding: 0 var(--sl-space-4); margin: 0 0 var(--sl-space-2); }
.sl-record-raw {
  background: var(--sl-subtle); border-top: 1px solid var(--sl-border); border-radius: 0 0 var(--sl-radius-md) var(--sl-radius-md);
  padding: var(--sl-space-4); overflow: auto; font-family: var(--sl-font-mono); font-size: 13px; line-height: 1.6; margin: 0;
}

/* Curated diff (#169) — same <dl> grid as sl-record-summary, its own class so it can carry an
   arrow-styled dd without affecting the summary fields. */
.sl-curated-diff { display: grid; grid-template-columns: max-content 1fr; gap: var(--sl-space-2) var(--sl-space-5); margin: var(--sl-space-2) 0 0; }
.sl-curated-diff dt { font: var(--sl-t-body-sm); font-weight: 600; color: var(--sl-text-2); }
.sl-curated-diff dd { font: var(--sl-t-body-sm); color: var(--sl-text); margin: 0; }

/* Per-record version-history page — one bordered block per change_event, echoing sl-record-chain's
   left-accent treatment so a history page reads as a family member of the record page. */
.sl-history-event { border: 1px solid var(--sl-border); border-left: 3px solid var(--sl-brand-secondary); border-radius: 0 var(--sl-radius-md) var(--sl-radius-md) 0; background: var(--sl-surface); padding: var(--sl-space-4); margin-top: var(--sl-space-3); }
.sl-history-event h2 { font: var(--sl-t-body-md); color: var(--sl-text); margin: 0 0 var(--sl-space-2); }

/* Chain of custody & provenance */
.sl-record-chain { border: 1px solid var(--sl-border); border-left: 3px solid var(--sl-brand-secondary); border-radius: 0 var(--sl-radius-md) var(--sl-radius-md) 0; background: var(--sl-surface); padding: var(--sl-space-4); margin-top: var(--sl-space-3); }
.sl-record-chain dt { font: var(--sl-t-caption); font-weight: 600; color: var(--sl-text-2); margin-top: var(--sl-space-3); }
.sl-record-chain dt:first-child { margin-top: 0; }
.sl-record-chain dd { font: var(--sl-t-body-sm); color: var(--sl-text); margin: 2px 0 0; }
.sl-record-chain code { font-family: var(--sl-font-mono); font-size: 12px; background: var(--sl-subtle); padding: 1px 5px; border-radius: var(--sl-radius-xs); word-break: break-all; }
.sl-record-provenance__hash { white-space: normal; word-break: break-all; }

/* Sidebar — review window (indicative). Balanced hierarchy: date visible, caveat co-prominent. */
.sl-review { border: 1px solid var(--sl-warn-bg); background: var(--sl-warn-bg); border-radius: var(--sl-radius-md); padding: var(--sl-space-4); }
.sl-review h2 { font: var(--sl-t-overline); letter-spacing: var(--sl-overline-tracking); text-transform: uppercase; color: var(--sl-warn); margin: 0 0 var(--sl-space-2); }
.sl-review__value { font: var(--sl-t-h3); color: var(--sl-text); margin: 0; }
.sl-review__label { font: var(--sl-t-caption); color: var(--sl-text-2); margin: 2px 0 var(--sl-space-3); }
.sl-review__caveat { font: var(--sl-t-body-sm); color: var(--sl-text-2); margin: 0; }

/* Server-rendered admin/member chrome. These classes are the Theme interface for tables, forms
   and action controls shared by the tenant/admin/member pages. */
.sl-admin h1,
.sl-member h1 { font: var(--sl-t-h1); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-3); }
.sl-admin h2,
.sl-member h2 { font: var(--sl-t-h3); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-2); }
.sl-lede { color: var(--sl-text-2); max-width: 680px; }
.sl-caveat {
  font-size: .78rem; color: var(--sl-text-3); font-style: italic; margin: .6rem 0 1rem;
}
.sl-muted { color: var(--sl-text-3); font-size: .8rem; }
.sl-meta { margin-top: 1.5rem; color: var(--sl-text-3); font-size: .78rem; }

.sl-table { border-collapse: collapse; width: 100%; margin-top: .6rem; font-size: .88rem; }
.sl-table th,
.sl-table td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.sl-table th { color: var(--sl-brand-primary); }
.sl-rec { font-family: var(--sl-mono); font-size: .78rem; color: var(--sl-text-3); }
.sl-code { background: var(--sl-surface-alt); padding: .05rem .3rem; border-radius: 4px; font-size: .82rem; }
.sl-alert-row:hover { background: var(--sl-accent-tint); }
.sl-alert-row--empty td { color: var(--sl-text-3); font-style: italic; }

.sl-form { max-width: 42rem; margin-top: .8rem; }
.sl-form--inline { max-width: none; margin-top: .4rem; }
.sl-form__field,
.sl-field { margin: .8rem 0; }
.sl-form__field label,
.sl-field label {
  display: block; color: var(--sl-brand-primary); font-size: .85rem; margin-bottom: .3rem;
}
.sl-form__field input,
.sl-form__field select,
.sl-field input,
.sl-field select {
  width: 100%; max-width: 32rem; padding: .5rem; border: 1px solid var(--line);
  border-radius: 4px; background: var(--sl-surface); color: var(--sl-text);
}
.sl-form__field small,
.sl-field small { display: block; margin-top: .25rem; color: var(--sl-text-3); font-size: .78rem; }

.sl-btn {
  display: inline-block; background: var(--sl-brand-primary); color: var(--sl-on-accent); border: 0;
  border-radius: 4px; padding: .5rem .8rem; cursor: pointer; text-decoration: none;
  font: inherit;
}
.sl-btn:hover { background: var(--sl-brand-secondary); }
.sl-btn--danger { background: var(--color-alert-red); }
.sl-btn--danger:hover { background: var(--sl-danger-hover); }
.sl-btn--sm { padding: 6px 10px; font-size: .78rem; }  /* >=24px target (WCAG 2.5.8) */
.sl-notice {
  border: 1px solid var(--color-status-review-border); background: var(--color-status-review-bg);
  color: var(--color-status-review-text); padding: .5rem .7rem; border-radius: 6px;
}
.sl-pager { margin-top: 1rem; font-size: .85rem; display: flex; gap: var(--sl-space-2); }
.sl-pager a { display: inline-block; padding: 6px 10px; }  /* >=24px target (WCAG 2.5.8) */
.sl-deadline { white-space: nowrap; }
.sl-deadline-note {
  display: block; font-size: .72rem; color: var(--sl-text-3); font-style: italic;
}

/* ===========================================================================
   Page styles — consolidated from the per-template {% block head %} <style>
   blocks so ALL brand-chrome styling lives in brand.css (ADR-023/ADR-027 white-label: a firm
   re-skins by overriding this file; legal furniture is in legal.css). Where a page selector also exists as a
   shared global (.sl-btn, .sl-caveat) it is page-scoped here (.sl-search …) so
   the move cannot leak onto admin/member/look-back pages.
   (The pre-SubsidyLens .sl-search* / .sl-search-form grid block was removed — its
   stale display:grid was forcing the search form's controls into garbled columns.)
   =========================================================================== */

/* ---- Home (home.html) --------------------------------------------------------- */
.sl-home-hero { padding: var(--sl-space-10) 0 var(--sl-space-6); }
.sl-home-hero__overline {
  font: var(--sl-t-overline); letter-spacing: var(--sl-overline-tracking);
  text-transform: uppercase; color: var(--sl-text-3); margin: 0 0 var(--sl-space-3);
}
.sl-home-hero h1 {
  font: var(--sl-t-hero); color: var(--sl-text); margin: 0 0 var(--sl-space-4);
  max-width: 16ch; letter-spacing: -0.01em;
}
.sl-home-hero__lede { font: var(--sl-t-body); color: var(--sl-text-2); max-width: var(--sl-w-read); margin: 0 0 var(--sl-space-6); }
.sl-home-search { display: flex; gap: var(--sl-space-2); max-width: var(--sl-w-read); }
.sl-home-search input {
  flex: 1; min-width: 0; padding: 13px 16px; font: var(--sl-t-body);
  border: 1px solid var(--sl-border-strong); border-radius: var(--sl-radius-xs); background: var(--sl-surface);
}
.sl-home-search button {
  background: var(--sl-accent); color: var(--sl-on-accent); border: 0; border-radius: var(--sl-radius-xs);
  padding: 0 var(--sl-space-5); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sl-home-search button:hover { background: var(--sl-accent-hover); }
.sl-home-meta { font: var(--sl-t-body-sm); color: var(--sl-text-3); margin: var(--sl-space-4) 0 0; max-width: var(--sl-w-read); }
.sl-home-meta a { color: var(--sl-accent); }
/* Register counts band — presence-only + monitor-relative (see home.html / public_record.count*). */
.sl-home-stats { font: var(--sl-t-body); color: var(--sl-text-2); margin: var(--sl-space-4) 0 var(--sl-space-8); max-width: var(--sl-w-read); }
.sl-home-stats strong { color: var(--sl-text); font-variant-numeric: tabular-nums; }
.sl-home-stats__note { display: block; font: var(--sl-t-body-sm); color: var(--sl-text-3); margin-top: var(--sl-space-2); }

.sl-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sl-space-4); margin: var(--sl-space-8) 0; }
.sl-card {
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md);
  padding: var(--sl-space-5); background: var(--sl-surface); box-shadow: var(--sl-shadow-1);
}
.sl-card h2 { font: var(--sl-t-h3); color: var(--sl-text); margin: 0 0 var(--sl-space-2); }
.sl-card p { font: var(--sl-t-body-sm); color: var(--sl-text-2); margin: 0 0 var(--sl-space-3); }
.sl-card p:last-child { margin-bottom: 0; }
.sl-card .sl-cta {
  display: inline-block; background: var(--sl-accent); color: var(--sl-on-accent); text-decoration: none;
  padding: 8px 14px; border-radius: var(--sl-radius-xs); font-weight: 600;
}
.sl-card .sl-cta:hover { background: var(--sl-accent-hover); }

/* Pricing tiers (map #91 placeholders) + the sample-record watermark (map #94). The banner is
   deliberately LOUD — a fictional record must never read as a register capture. */
.sl-price { font: var(--sl-t-h3); color: var(--sl-text); margin: 0 0 var(--sl-space-3); }
.sl-price strong { font-size: 1.6em; font-variant-numeric: tabular-nums; }
.sl-sample-banner {
  border: 2px dashed var(--sl-warn, #b45309); border-radius: var(--sl-radius-md);
  background: var(--sl-warn-bg, #fffbeb); color: var(--sl-text);
  font: var(--sl-t-body); padding: var(--sl-space-4); margin-bottom: var(--sl-space-6);
}

.sl-home-recent { margin-top: var(--sl-space-8); }
.sl-home-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sl-space-4); margin-bottom: var(--sl-space-3); }
.sl-home-recent__head h2 { font: var(--sl-t-h2); color: var(--sl-text); margin: 0; }
.sl-home-recent__head a { font: var(--sl-t-body-sm); color: var(--sl-accent); white-space: nowrap; }

@media (max-width: 640px) { .sl-home-search { flex-direction: column; } .sl-home-search button { padding: 12px; } }

/* ---- Search (search.html) ----------------------------------------------------- */
.sl-search h1 { font: var(--sl-t-h1); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-4); }
.sl-searchbar { display: flex; gap: var(--sl-space-2); }
.sl-searchbar input {
  flex: 1; min-width: 0; padding: 12px 14px; font: var(--sl-t-body);
  border: 1px solid var(--sl-border-strong); border-radius: var(--sl-radius-xs); background: var(--sl-surface);
}
.sl-searchbar button {
  background: var(--sl-accent); color: var(--sl-on-accent); border: 0; border-radius: var(--sl-radius-xs);
  padding: 0 var(--sl-space-5); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sl-searchbar button:hover { background: var(--sl-accent-hover); }
/* Segmented mode toggle (radios, no JS needed) */
.sl-mode { display: inline-flex; border: 1px solid var(--sl-border-strong); border-radius: var(--sl-radius-xs); overflow: hidden; margin: var(--sl-space-3) 0 0; }
.sl-mode label { font: var(--sl-t-body-sm); padding: 6px 12px; cursor: pointer; color: var(--sl-text-2); }
.sl-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sl-mode label:has(input:checked) { background: var(--sl-accent); color: var(--sl-on-accent); }
.sl-mode label:has(input:focus-visible) { outline: 2px solid var(--sl-focus); outline-offset: -2px; }
.sl-mode-help { font: var(--sl-t-caption); color: var(--sl-text-3); margin: var(--sl-space-2) 0 0; }
.sl-mode-help code { font-family: var(--sl-font-mono); background: var(--sl-subtle); padding: 0 4px; border-radius: var(--sl-radius-xs); }
/* Page-scoped: must NOT override the look-back/admin .sl-caveat (italic) global. */
.sl-search .sl-caveat { font: var(--sl-t-body-sm); color: var(--sl-text-3); font-style: normal; margin: var(--sl-space-3) 0; }
.sl-search-form { margin: var(--sl-space-4) 0; }
.sl-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sl-space-3); margin: var(--sl-space-4) 0; padding: var(--sl-space-4); background: var(--sl-subtle); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); }
.sl-search-field label { display: block; font: var(--sl-t-caption); color: var(--sl-text-2); margin-bottom: 4px; }
.sl-search-field input { width: 100%; padding: 8px 10px; font: var(--sl-t-body-sm); border: 1px solid var(--sl-border-strong); border-radius: var(--sl-radius-xs); background: var(--sl-surface); }
.sl-search-submit { margin-top: var(--sl-space-2); }
/* Page-scoped: must NOT override the shared admin/member .sl-btn global. */
.sl-search .sl-btn { background: var(--sl-accent); color: var(--sl-on-accent); border: 0; border-radius: var(--sl-radius-xs); padding: 9px 16px; font-weight: 600; cursor: pointer; }
.sl-search .sl-btn:hover { background: var(--sl-accent-hover); }
.sl-results-meta { font: var(--sl-t-caption); color: var(--sl-text-3); margin: var(--sl-space-4) 0 var(--sl-space-2); }
/* Zero-result state — register-scoped, presence-only (no absence-of-reality claim). */
.sl-zero { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface); padding: var(--sl-space-6); margin-top: var(--sl-space-4); }
.sl-zero h2 { font: var(--sl-t-h3); color: var(--sl-text); margin: 0 0 var(--sl-space-2); }
.sl-zero p { font: var(--sl-t-body-sm); color: var(--sl-text-2); margin: 0 0 var(--sl-space-3); max-width: var(--sl-w-read); }
.sl-zero ul { font: var(--sl-t-body-sm); color: var(--sl-text-2); margin: 0; padding-left: var(--sl-space-5); }
.sl-zero li { margin-bottom: var(--sl-space-2); }

/* ---- List pages (changes.html, diff.html) ------------------------------------- */
.sl-list-title { font: var(--sl-t-h1); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-2); }
.sl-list-lede { font: var(--sl-t-body); color: var(--sl-text-2); max-width: var(--sl-w-read); margin: 0 0 var(--sl-space-5); }

/* ---- Sign-in (login.html) ----------------------------------------------------- */
.sl-login h1 { font: var(--sl-t-h1); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-2); }
.sl-login__hint { font: var(--sl-t-body); color: var(--sl-text-2); max-width: var(--sl-w-read); margin: 0 0 var(--sl-space-6); }
.sl-login-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sl-space-4); }
.sl-login-panel { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); padding: var(--sl-space-5); background: var(--sl-surface); box-shadow: var(--sl-shadow-1); }
.sl-login-panel h2 { font: var(--sl-t-h3); color: var(--sl-text); margin: 0 0 var(--sl-space-2); }
.sl-login-panel .hint { font: var(--sl-t-body-sm); color: var(--sl-text-2); margin: 0 0 var(--sl-space-3); }
.sl-login-panel label { display: block; font: var(--sl-t-caption); color: var(--sl-text-2); margin: var(--sl-space-2) 0 4px; }
.sl-login-panel input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: var(--sl-t-body-sm);
  border: 1px solid var(--sl-border-strong); border-radius: var(--sl-radius-xs); background: var(--sl-surface);
}
.sl-login-panel button {
  margin-top: var(--sl-space-4); background: var(--sl-accent); color: var(--sl-on-accent); border: 0;
  border-radius: var(--sl-radius-xs); padding: 10px 16px; font-weight: 600; cursor: pointer;
}
.sl-login-panel button:hover { background: var(--sl-accent-hover); }

/* ---- Operator health console (operator_health.html) --------------------------- */
/* Status is conveyed by TEXT + glyph, never colour alone (WCAG 1.4.1). Tokenised
   (was hardcoded hex): ok = --sl-ok family, error/degraded = --sl-danger (Tier 2),
   NOT the locked legal-furniture stale tier. */
.sl-ops table { border-collapse: collapse; width: 100%; margin: var(--sl-space-3) 0; }
.sl-ops th, .sl-ops td { border: 1px solid var(--sl-border-strong); padding: .45rem .6rem; text-align: left; vertical-align: top; font-size: .85rem; }
.sl-ops thead th { background: var(--sl-subtle); }
.sl-ops-status { font-size: .95rem; padding: .4rem .7rem; border-radius: var(--sl-radius-md); display: inline-block; }
.sl-ops-ok { background: var(--sl-ok-bg); border: 1px solid var(--sl-ok); color: var(--sl-ok); }
.sl-ops-bad { background: var(--sl-danger-bg); border: 1px solid var(--sl-danger-bd); color: var(--sl-danger); }
/* Operator console heading on the design system (was browser-default — ADR-022 §8 redesign). */
.sl-ops h1 { font: var(--sl-t-h1); color: var(--sl-text); margin: var(--sl-space-6) 0 var(--sl-space-3); }

/* ---- Admin surface polish (Slice 3 — flips ADR-022 §8 admin-layout deferral) --- */
/* Capability cards on the firm-admin landing (was a bullet list). */
.sl-admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sl-space-4); margin: var(--sl-space-4) 0 var(--sl-space-6); }
.sl-admin-card { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface); padding: var(--sl-space-5); box-shadow: var(--sl-shadow-1); }
.sl-admin-card h3 { font: var(--sl-t-h3); color: var(--sl-text); margin: 0 0 var(--sl-space-2); }
.sl-admin-card h3 a { color: var(--sl-accent); text-decoration: none; }
.sl-admin-card h3 a:hover { text-decoration: underline; }
.sl-admin-card p { font: var(--sl-t-body-sm); color: var(--sl-text-2); margin: 0; }
/* Definition lists as a tidy two-column grid (admin oversight aggregate stats). */
.sl-defs { display: grid; grid-template-columns: max-content 1fr; gap: var(--sl-space-2) var(--sl-space-5); margin: var(--sl-space-2) 0 var(--sl-space-5); }
.sl-defs dt { font: var(--sl-t-body-sm); font-weight: 600; color: var(--sl-text-2); margin: 0; }
.sl-defs dd { font: var(--sl-t-body-sm); color: var(--sl-text); margin: 0; }

/* ---- Recent-changes view switcher (Latest / Past month / Review window) -------- */
/* Underline-tab look, but it is a <nav> of links, not a tablist (see _changes_tabs.html). */
.sl-views { display: flex; flex-wrap: wrap; gap: var(--sl-space-1); margin: var(--sl-space-5) 0; border-bottom: 1px solid var(--sl-border); }
.sl-views a {
  font: var(--sl-t-body-sm); font-weight: 500; color: var(--sl-text-2); text-decoration: none;
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--sl-transition), border-color var(--sl-transition);
}
.sl-views a:hover { color: var(--sl-accent); }
.sl-views a[aria-current="page"] { color: var(--sl-accent); border-bottom-color: var(--sl-accent); }