/* =====================================================================
 * SI Appearance layer — shared.
 * Attribute-driven theming. Sites map their OWN variables to the --ap-*
 * contract in the per-site sections at the bottom. Never edit a site's
 * own stylesheet for theming; add/extend its map section here.
 *
 * Attributes set on <html> by appearance.js (always all six):
 *   data-theme="light|dark"        (resolved; "system" resolves in JS)
 *   data-accent="gold|teal|plum|forest"
 *   data-text="s|m|l|xl"
 *   data-font="default|dyslexic"
 *   data-contrast="standard|high"
 *   data-motion="full|reduced"
 * ===================================================================== */

/* ---- accent values (light defaults) ---- */
:root {
  --ap-accent: #b98a2f;
  --ap-accent-soft: #f4ead2;
  --ap-accent-ink: #ffffff;
}
html[data-accent="teal"]   { --ap-accent: #2c7a7b; --ap-accent-soft: #ddefef; }
html[data-accent="plum"]   { --ap-accent: #7c4a6e; --ap-accent-soft: #f3e6ef; }
html[data-accent="forest"] { --ap-accent: #3f6b4f; --ap-accent-soft: #e4efe7; }

/* ---- dark mode base ---- */
html[data-theme="dark"] {
  --ap-bg: #10151f;
  --ap-card: #1a2233;
  --ap-ink: #e9ecf4;
  --ap-muted: #9aa5bc;
  --ap-line: #2a3449;
  --ap-head: #eef1f7;
  /* accent stays readable on dark */
  --ap-accent: #d4a94e; --ap-accent-soft: #2b2413;
}
html[data-theme="dark"][data-accent="teal"]   { --ap-accent: #4aa8a9; --ap-accent-soft: #14302f; }
html[data-theme="dark"][data-accent="plum"]   { --ap-accent: #b07fa0; --ap-accent-soft: #2c1e28; }
html[data-theme="dark"][data-accent="forest"] { --ap-accent: #6fa287; --ap-accent-soft: #16281d; }

/* ---- text size (m = site default, untouched) ---- */
html[data-text="s"] body  { font-size: 15px; }
html[data-text="l"] body  { font-size: 19px; }
html[data-text="xl"] body { font-size: 21.5px; }

/* ---- dyslexia-friendly reading font (loaded on demand by appearance.js) ---- */
html[data-font="dyslexic"] body {
  font-family: "Atkinson Hyperlegible", Verdana, Geneva, sans-serif;
  letter-spacing: 0.01em;
  word-spacing: 0.04em;
}

/* ---- high contrast ---- */
html[data-contrast="high"] { --ap-ink: #000000; --ap-muted: #2b2b2b; }
html[data-theme="dark"][data-contrast="high"] {
  --ap-ink: #ffffff; --ap-muted: #d5d5d5; --ap-line: #5a5a5a;
}

/* ---- reduced motion ---- */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* =====================================================================
 * Appearance panel (modal). Injected by appearance.js.
 * ===================================================================== */
.si-ap-backdrop {
  position: fixed; inset: 0; background: rgba(10, 14, 22, 0.55);
  z-index: 9990; display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.si-ap-panel {
  background: var(--ap-card, #fff); color: var(--ap-ink, #1c2b4a);
  border: 1px solid var(--ap-line, #e2e0d8); border-radius: 14px;
  max-width: 440px; width: 100%; max-height: 84vh; overflow-y: auto;
  padding: 20px 20px 16px; box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.si-ap-panel h3 { margin: 0 0 4px; font-size: 17px; }
.si-ap-panel .si-ap-sub { margin: 0 0 14px; font-size: 13px; color: var(--ap-muted, #5b6472); }
.si-ap-row { margin-bottom: 14px; }
.si-ap-row > span { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ap-muted, #5b6472); }
.si-ap-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.si-ap-seg button {
  font: inherit; font-size: 13.5px; padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--ap-line, #e2e0d8); background: transparent;
  color: var(--ap-ink, #1c2b4a); cursor: pointer;
}
.si-ap-seg button[aria-pressed="true"] {
  border-color: var(--ap-accent, #b98a2f);
  background: var(--ap-accent-soft, #f4ead2);
  font-weight: 700;
}
.si-ap-swatches { display: flex; gap: 10px; }
.si-ap-sw {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; padding: 0;
}
.si-ap-sw[aria-pressed="true"] { border-color: var(--ap-ink, #1c2b4a); }
.si-ap-close {
  float: right; font: inherit; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ap-muted, #5b6472); padding: 4px;
}
.si-ap-note { font-size: 12.5px; color: var(--ap-muted, #5b6472); margin: 4px 0 0; }

/* =====================================================================
 * PER-SITE VARIABLE MAPS — each site maps its own variables to --ap-*.
 * Add a new section per site/port. Light-mode values must be identical
 * to the site's own :root (verified by the port's before/after check).
 * ===================================================================== */

/* ---- silcme (SI LCME hub) ---- */
html { --gold: var(--ap-accent); --gold-light: var(--ap-accent-soft); }
html[data-theme="dark"] {
  --paper: var(--ap-bg, #10151f);
  --card: var(--ap-card, #1a2233);
  --ink: var(--ap-ink, #e9ecf4);
  --muted: var(--ap-muted, #9aa5bc);
  --line: var(--ap-line, #2a3449);
  --head: var(--ap-head, #eef1f7);
}

/* ---- silawschool (SI Law School portal) ---- */
/* Restore brand gold (undo the silcme section's --gold mapping above):
   this site's gold is #c39a3b, not #b98a2f. Light mode stays pixel-identical.
   Burgundy is the primary dark brand color (header/hero/footer via
   --burgundy/--burgundy-dark in style.css); gold remains the accent. */
html { --gold: #c39a3b; --gold-light: #f5ecd4; --head: #571824; }
/* Accent: the "gold" slot keeps brand gold; other accents re-theme it. */
html[data-accent="teal"]   { --gold: #2c7a7b; --gold-light: #ddefef; --gold-hover: #2a7c7d; }
html[data-accent="plum"]   { --gold: #7c4a6e; --gold-light: #f3e6ef; --gold-hover: #8f5c80; }
html[data-accent="forest"] { --gold: #3f6b4f; --gold-light: #e4efe7; --gold-hover: #4d7d5e; }
html[data-theme="dark"] {
  --paper: #10151f; --card: #1a2233; --ink: #e9ecf4; --muted: #9aa5bc;
  --line: #2a3449; --head: #eef1f7;
  --gold: #d4a94e; --gold-light: #2b2413; --gold-hover: #e0bc60;
  --tag-bg: #232d42; --zebra: #161d2c;
  --read-border: #4a3f22; --read-ink: #d4b96a;
  --faq-hover: #232d42; --std-hover: #1c2438; --mark: #5a4a1a;
  --tab-bg: #232d42;
  --info-bg: #16283a; --info-ink: #dbe4f0;
  --note-bg: #16283a; --note-ink: #a9c8e8; --note-border: #2a4a6b;
  --input-border: #2a3449; --or-text: #9aa5bc; --or-line: #2a3449;
  --progress-track: #232d42;
  --ube-green: #4aa873; --ube-bg: #14301f; --ube-ink: #7cc79a;
  --nextgen-purple: #9a86e0; --nextgen-bg: #221d3a; --nextgen-ink: #b3a5e8;
}
html[data-theme="dark"][data-accent="teal"]   { --gold: #4aa8a9; --gold-light: #14302f; --gold-hover: #63b8b8; }
html[data-theme="dark"][data-accent="plum"]   { --gold: #b07fa0; --gold-light: #2c1e28; --gold-hover: #c092b3; }
html[data-theme="dark"][data-accent="forest"] { --gold: #6fa287; --gold-light: #16281d; --gold-hover: #84b396; }

/* Button-visibility audit (2026-10-02): the teal/plum/forest accent golds are
 * mid-tones where burgundy-dark text fails, so gold buttons, nav CTAs, the
 * brand mark, and modal gold buttons switch to white text on those accents. */
html[data-accent="teal"] .btn-gold, html[data-accent="teal"] .btn-gold-nav,
html[data-accent="teal"] .brand-mark,
html[data-accent="teal"] .si-auth-modal .btn-gold { color: #fff; }
html[data-accent="plum"] .btn-gold, html[data-accent="plum"] .btn-gold-nav,
html[data-accent="plum"] .brand-mark,
html[data-accent="plum"] .si-auth-modal .btn-gold { color: #fff; }
html[data-accent="forest"] .btn-gold, html[data-accent="forest"] .btn-gold-nav,
html[data-accent="forest"] .brand-mark,
html[data-accent="forest"] .si-auth-modal .btn-gold { color: #fff; }
/* Dark + plum: base gold is a touch too dark for burgundy-dark text, so gold
 * buttons use the lighter hover shade as their base. */
html[data-theme="dark"][data-accent="plum"] .btn-gold,
html[data-theme="dark"][data-accent="plum"] .btn-gold-nav,
html[data-theme="dark"][data-accent="plum"] .si-auth-modal .btn-gold {
  background: #c092b3; color: var(--burgundy-dark);
}
html[data-theme="dark"][data-accent="plum"] .btn-gold:hover,
html[data-theme="dark"][data-accent="plum"] .btn-gold-nav:hover { background: #d4a9c4; }
/* Upgrade label: burgundy text is unreadable on the dark gold-light tint. */
html[data-theme="dark"] .si-upgrade-label { color: #e8c98a; }

/* 2026-10-02: .hl-audience.alt now goes dark (#1a2233) in dark mode via the
   page inline styles, so the base light .btn-outline is correct there — the
   old dark-button backstop is removed. */

/* =====================================================================
 * 2026-10-02: gap-build pages dark-mode backstop (coordinator audit).
 * The 13 new pages shipped inline <style> blocks with hardcoded
 * light-mode colors (#fff card backgrounds, var(--burgundy)/var(--burgundy-dark)
 * heading text) and no html[data-theme="dark"] overrides — the same
 * pattern as the f3a138ae hotfix. (2026-10-03: --navy/--navy-dark are legacy
 * fallbacks, no longer referenced by any page; kept only so old cached
 * HTML does not break.) Card surfaces map to var(--card) (#1a2233 in dark);
 * navy-dark text maps to var(--head) (#eef1f7 in dark).
 * dean-tracker.html is intentionally always-dark (dd- "pro" treatment)
 * and needs no overrides; only its bare `a` rules get :not(.btn).
 * ===================================================================== */
html[data-theme="dark"] .db-track-btn,
html[data-theme="dark"] .db-settings,
html[data-theme="dark"] .db-field select,
html[data-theme="dark"] .db-chip,
html[data-theme="dark"] .db-card,
html[data-theme="dark"] .db-setup-block,
html[data-theme="dark"] .db-radio-card,
html[data-theme="dark"] .db-caption,
html[data-theme="dark"] .db-transcript,
html[data-theme="dark"] .db-rate-btn,
html[data-theme="dark"] .db-metric,
html[data-theme="dark"] .db-busy-card { background: var(--card); }
html[data-theme="dark"] .db-field select,
html[data-theme="dark"] #db-answer { color: var(--ink); }
html[data-theme="dark"] #db-answer { background: var(--card); }
html[data-theme="dark"] .db-track-btn strong,
html[data-theme="dark"] .db-radio-text strong,
html[data-theme="dark"] .db-rubric-row h4,
html[data-theme="dark"] .db-guided-auth h4,
html[data-theme="dark"] .db-rate-row h4,
html[data-theme="dark"] .db-msg-who,
html[data-theme="dark"] .db-status,
html[data-theme="dark"] .db-faq dt { color: var(--head); }
html[data-theme="dark"] .db-badge,
html[data-theme="dark"] .db-chip-on,
html[data-theme="dark"] .db-rate-btn.db-rate-on,
html[data-theme="dark"] .db-clock,
html[data-theme="dark"] #db-toast { background: var(--line); }
html[data-theme="dark"] .db-pill { background: var(--tag-bg); color: var(--head); border-color: var(--line); }
html[data-theme="dark"] .db-note,
html[data-theme="dark"] .db-guided-auth { border-color: var(--read-border); }
html[data-theme="dark"] .db-msg-you .db-msg-who { color: #7cc79a; }
html[data-theme="dark"] .db-error { color: #ff9d94; }
/* presidents-briefing (pb-) */
html[data-theme="dark"] .pb-num,
html[data-theme="dark"] .pb-q,
html[data-theme="dark"] .pb-card { background: var(--card); }
html[data-theme="dark"] .pb-num .n { background: var(--line); }
html[data-theme="dark"] .pb-num .fillin { background: var(--gold-light); border-color: var(--read-border); color: #e8c98a; }
html[data-theme="dark"] .pb-flag { background: #2b1d1d; }
html[data-theme="dark"] .pb-flag strong { color: #f2a3a3; }
html[data-theme="dark"] .pb-btn { background: var(--card); color: var(--head); border-color: var(--line); }
html[data-theme="dark"] .pb-btn:hover { background: var(--line); color: #fff; }
/* admissions suite inline sections use style="background:var(--card)" (edited in place) */
/* 1L hub (yl-) — hero/cta sections are intentionally always-dark */
html[data-theme="dark"] .yl-card,
html[data-theme="dark"] .yl-steps li { background: var(--card); }
html[data-theme="dark"] .yl-card h3,
html[data-theme="dark"] .yl-steps h3 { color: var(--head); }
html[data-theme="dark"] .yl-steps li::before,
html[data-theme="dark"] .yl-compare th { background: var(--line); }
html[data-theme="dark"] .yl-compare td:first-child { background: var(--zebra); color: var(--head); }
html[data-theme="dark"] .yl-note { background: var(--gold-light); color: #e8c98a; }
html[data-theme="dark"] .yl-note strong { color: #f0d9a0; }
/* case-brief (cb-) */
html[data-theme="dark"] .cb-steps li,
html[data-theme="dark"] .cb-template,
html[data-theme="dark"] .cb-field .cb-lines { background: var(--card); }
html[data-theme="dark"] .cb-template { border-color: var(--line); }
html[data-theme="dark"] .cb-steps h3,
html[data-theme="dark"] .cb-template h3,
html[data-theme="dark"] .cb-field label { color: var(--head); }
html[data-theme="dark"] .cb-steps .cb-tip { background: var(--card); }
/* irac primer (irac-) */
html[data-theme="dark"] .irac-letter,
html[data-theme="dark"] .irac-example,
html[data-theme="dark"] .irac-example .ie-facts { background: var(--card); }
html[data-theme="dark"] .irac-letter h3,
html[data-theme="dark"] .irac-example h3 { color: var(--head); }
html[data-theme="dark"] .irac-letter .il-badge,
html[data-theme="dark"] .irac-part .ip-label { background: var(--line); }
html[data-theme="dark"] .irac-mistakes li { background: #2b1d1d; }
html[data-theme="dark"] .irac-mistakes strong { color: #f2a3a3; }
/* cases to know (ck-) */
html[data-theme="dark"] .ck-case { background: var(--card); }
html[data-theme="dark"] .ck-subject > h2,
html[data-theme="dark"] .ck-case h3,
html[data-theme="dark"] .ck-row .ck-label { color: var(--head); }
html[data-theme="dark"] .ck-why { background: var(--gold-light); color: #e8c98a; }
html[data-theme="dark"] .ck-why strong { color: #f0d9a0; }
html[data-theme="dark"] .ck-nav a:not(.btn) { background: var(--card); color: var(--head); }
/* 0L schedule (zs-) */
html[data-theme="dark"] .zs-builder,
html[data-theme="dark"] .zs-week { background: var(--card); }
html[data-theme="dark"] .zs-field label,
html[data-theme="dark"] .zs-working,
html[data-theme="dark"] .zs-week h3 { color: var(--head); }
html[data-theme="dark"] .zs-field input,
html[data-theme="dark"] .zs-field select { background: var(--card); color: var(--ink); }
/* foundations practice (fp-) */
html[data-theme="dark"] .fp-setup,
html[data-theme="dark"] .fp-qcard,
html[data-theme="dark"] .fp-done,
html[data-theme="dark"] .fp-opt,
html[data-theme="dark"] .fp-review li { background: var(--card); }
html[data-theme="dark"] .fp-pill,
html[data-theme="dark"] .fp-select { background: var(--card); }
html[data-theme="dark"] .fp-group > label,
html[data-theme="dark"] .fp-group-label,
html[data-theme="dark"] .fp-pill,
html[data-theme="dark"] .fp-working,
html[data-theme="dark"] .fp-done h3 { color: var(--head); }
html[data-theme="dark"] .fp-score { color: var(--head); }
html[data-theme="dark"] .fp-chip,
html[data-theme="dark"] .fp-letter { background: var(--line); color: var(--head); }
html[data-theme="dark"] .fp-opt.fp-correct { background: var(--ube-bg); border-color: var(--ube-green); }
html[data-theme="dark"] .fp-vright { color: #7cc79a; }
html[data-theme="dark"] .fp-opt.fp-wrong { background: #2b1d1d; }
html[data-theme="dark"] .fp-vwrong { color: #f2a3a3; }