:root{
  --font-sans:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --maxw:1240px;
}

/* MO-001: universal motion-reduce reset (engine-ui-spec.md §3.6) */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}}
:root{
  --bp-mobile-max: 767.98px;   /* phone breakpoint upper bound; tablet starts at 768 */
  --bp-tablet-max: 1023.98px;  /* iPad-portrait band; landscape starts at 1024 */
}
/* NOTE: CSS custom properties are NOT consumable inside @media expressions.
   The vars above are documentation anchors only — engine-ui-spec.md v2.0 §3.6 */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body-font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,h4,h5{font-family:var(--head-font);line-height:1.2;color:var(--ink)}
a{color:var(--brand-2);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%}

/* utility bar */
.util{background:var(--util-bg);color:var(--util-ink);font-size:12px;border-bottom:1px solid var(--util-line)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:10px}
.util .badges span{margin-right:14px;opacity:.85}
@media(max-width:680px){.util .badges{display:none}}

/* prominent theme switcher */
.themebar{display:flex;align-items:center;gap:8px}
.themebar .lbl{font-size:11px;letter-spacing:.12em;opacity:.7;text-transform:uppercase}
.themebar .opts{display:flex;gap:0;border:1px solid var(--util-line);border-radius:30px;overflow:hidden}
.themebar button{font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;border:0;background:transparent;
  color:var(--util-ink);padding:5px 14px;transition:.2s}
.themebar button.on{background:var(--brand);color:#fff}
[data-theme="terminal"] .themebar button.on{color:#04110d}

/* header */
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{font-family:var(--head-font);font-weight:800;font-size:20px;color:var(--ink);white-space:nowrap}
.logo b{color:var(--brand)} .logo small{display:block;font-size:10px;letter-spacing:.18em;color:var(--ink-soft);
  font-family:var(--font-sans);font-weight:600}
nav.main{display:flex;gap:3px;flex:1;flex-wrap:wrap}
nav.main a{padding:8px 11px;border-radius:var(--radius);font-size:14px;color:var(--ink-soft);font-weight:600;transition:.15s}
nav.main a:hover,nav.main a.active{background:var(--surface-2);color:var(--brand)}
.btn{display:inline-block;padding:9px 16px;border-radius:var(--radius);font-weight:700;font-size:14px;cursor:pointer;
  border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-2)}
[data-theme="terminal"] .btn-primary{color:#04110d}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn-ghost:hover{background:var(--surface-2)}
/* btn-primary-mobile: desktop hidden; mobile-only block declared in @media(max-width:767.98px) */
a.btn-primary-mobile{display:none}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);padding:54px 0 46px}
.hero h1{color:var(--hero-ink);font-size:42px;max-width:760px}
.hero p{max-width:660px;margin:16px 0 24px;font-size:17px;opacity:.92}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .cta .btn-primary{background:var(--hero-btn-bg);color:var(--hero-btn-ink)}
.hero .cta .btn-ghost{border-color:var(--hero-ghost-line);color:var(--hero-ink)}
/* .trust retired UX-2026-07-07 — replaced by .hero-stat-strip */

/* grids/cards */
.grid{display:grid;gap:16px}
.g6,.g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g6,.g3,.g4,.g2{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g6,.g3,.g4,.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card h3{font-size:16px;margin-bottom:6px} .card p{font-size:13.5px;color:var(--ink-soft)}
.card .dom{font-size:11px;letter-spacing:.12em;color:var(--accent);font-family:var(--font-mono);font-weight:700}
.sec{margin:42px 0 16px} .sec h2{font-size:26px} .sec .sub{color:var(--ink-soft);font-size:14px;margin-top:4px}

/* badges */
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  font-family:var(--font-mono);letter-spacing:.04em;white-space:nowrap}
.sev-critical{background:var(--crit);color:#fff} .sev-high{background:var(--high);color:#fff}
.sev-elevated{background:var(--elev);color:#fff} .sev-monitored{background:var(--mon);color:#fff}
.conf{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.tier{background:transparent;color:var(--brand-2);border:1px solid var(--brand-2)}
.aiunv{background:transparent;border:1px dashed var(--accent);color:var(--accent)}

/* dashboard */
.dash{display:grid;grid-template-columns:210px 1fr 230px;gap:16px}
@media(max-width:1023.98px){.dash{grid-template-columns:1fr}}
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.rail h4{font-size:11px;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:10px;font-family:var(--font-sans)}
.dnav a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:var(--radius);
  font-size:13px;cursor:pointer;color:var(--ink-soft);font-weight:600}
.dnav a:hover,.dnav a.active{background:var(--surface-2);color:var(--brand)}
.dnav .dot{width:9px;height:9px;border-radius:50%}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.panel .phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.panel .phead h3{font-size:18px}
table.risk{width:100%;border-collapse:collapse;font-size:13px}
table.risk th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  padding:8px;border-bottom:2px solid var(--line);font-family:var(--font-sans)}
table.risk td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.risk tr:hover td{background:var(--surface-2)}
table.risk .ent{font-weight:700;color:var(--ink)}
.chg.up{color:var(--crit);font-weight:700}.chg.dn{color:var(--mon);font-weight:700}
.heat{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.heat .cell{aspect-ratio:1.4;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:7px;
  color:#fff;font-size:10.5px;font-weight:700;font-family:var(--font-mono);cursor:pointer;transition:.15s}
.heat .cell:hover{transform:scale(1.04)} .heat .cell small{font-size:8.5px;opacity:.8;font-weight:400}
.alertitem{padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.alertitem:last-child{border:0} .alertitem .t{font-weight:700;display:block;color:var(--ink)}

/* pricing */
.price{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.price{grid-template-columns:1fr 1fr}}@media(max-width:560px){.price{grid-template-columns:1fr}}
.ptier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative}
.ptier.feat{border-color:var(--brand);box-shadow:0 8px 30px rgba(0,0,0,.10)}
.ptier .tag{position:absolute;top:-11px;left:22px;background:var(--brand);color:#fff;font-size:10px;padding:3px 10px;
  border-radius:20px;font-weight:700;letter-spacing:.06em}
[data-theme="terminal"] .ptier .tag{color:#04110d}
.ptier h3{font-size:18px} .ptier .amt{font-size:30px;font-weight:800;font-family:var(--head-font);margin:8px 0 2px}
.ptier .amt small{font-size:13px;color:var(--ink-soft);font-weight:400}
.ptier .found{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:12px}
.ptier ul{list-style:none;font-size:13px;color:var(--ink-soft)}
.ptier li{padding:6px 0 6px 20px;position:relative} .ptier li:before{content:"\203A";position:absolute;left:4px;color:var(--brand-2);font-weight:700}

/* prose */
.prose{max-width:820px} .prose p{margin:12px 0;color:var(--ink-soft)}
.prose ul.moddef{margin:10px 0 4px;padding-left:20px}
.prose ul.moddef li{margin:9px 0;color:var(--ink-soft);font-size:14px;line-height:1.5}
.prose ul.moddef li b{color:var(--ink)}
.callout{background:var(--surface-2);border-left:3px solid var(--accent);padding:14px 16px;border-radius:6px;font-size:13.5px;margin:18px 0}
.matrix{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.matrix th,.matrix td{border:1px solid var(--line);padding:10px;text-align:left}
.matrix th{background:var(--surface-2);font-family:var(--font-sans);font-size:12px}
input,select{padding:11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}

/* disclaimer/footer */
.disc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;
  font-size:12px;color:var(--ink-soft);margin-top:30px}
footer.site{background:var(--util-bg);color:var(--util-ink);margin-top:50px;padding:34px 0;font-size:13px;border-top:1px solid var(--util-line)}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
@media(max-width:767.98px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site a{color:var(--util-ink);opacity:.85;display:block;padding:3px 0}
footer.site h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;opacity:.7}
.foot-note{opacity:.6;font-size:11px;margin-top:22px;border-top:1px solid var(--util-line);padding-top:14px}

/* ── Per-JID News Rail (BRIEF-2026-06-20-WPM-PER-JID-NEWS-FEED §5) ──────────
   Right-rail dated updates for jurisdiction pages.
   Mirror of AIC .sector-dossier pattern; adapted for WPM per-jurisdiction.
   ALL layout in CSS — NO inline styles on news rail elements (inline-layout
   guard discipline, §5). Additive to existing base.css — no existing rules
   modified.
───────────────────────────────────────────────────────────────────────────── */

/* Jurisdiction page 3-column layout wrapper */
.jid-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .jid-layout {
    grid-template-columns: 1fr;
  }
}

/* Right rail container */
.jid-news-rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.jid-news-rail__title {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Individual feed item */
.jid-news__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.jid-news__item:last-child {
  border-bottom: 0;
}
.jid-news__item--archived {
  opacity: .8;
}

/* Item metadata row: date + badges */
.jid-news__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
  align-items: center;
}

.jid-news__date {
  font-size: 10.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Module tag badge (W1a..W13) */
.jid-news__module-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  background: var(--surface-2);
  color: var(--brand-2);
  border: 1px solid var(--brand-2);
  white-space: nowrap;
}

/* Kind badge */
.jid-news__kind-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.jid-news__kind-tag--standing {
  color: var(--accent);
  border-color: var(--accent);
}

/* JID tag (aggregate page only) */
.jid-news__jid-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
}
[data-theme="terminal"] .jid-news__jid-tag {
  color: #04110d;
}

/* Headline */
.jid-news__headline {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
}
.jid-news__headline a {
  color: var(--brand-2);
  text-decoration: none;
}
.jid-news__headline a:hover {
  text-decoration: underline;
}

/* Detail line (instrument name) */
.jid-news__detail {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 3px 0 0;
  font-style: italic;
}

/* Non-URL source attribution (shown as plain text when source isn't a link) */
.jid-news__source {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 2px 0 0;
}

/* Empty state */
.jid-news__empty {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 8px 0;
}

/* Archive section heading */
.jid-news__archive-section {
  margin-top: 10px;
  border-top: 2px dashed var(--line);
  padding-top: 10px;
}
.jid-news__archive-heading {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  margin-bottom: 8px;
}

/* Archive link */
.jid-news__archive-link {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--brand-2);
  text-decoration: none;
  font-weight: 600;
}
.jid-news__archive-link:hover {
  text-decoration: underline;
}

/* Jurisdiction page header meta strip */
.jid-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 20px;
  align-items: center;
}
.jid-page-meta .badge {
  font-size: 11px;
}

/* News aggregate page — full-width feed list (news.html) */
.jid-news-aggregate {
  max-width: 820px;
}
.jid-news-aggregate .jid-news__item {
  padding: 14px 0;
}
.jid-news-aggregate .jid-news__headline {
  font-size: 14px;
}

/* ── WPM JID right-column redesign — data-honest colour devices ───────────────
   BRIEF-2026-06-28-WPM-JID-RIGHTCOL-REDESIGN (R5).
   ALL colour from real fields only: confidence tier (--conf, set inline) +
   fixed W-code category token (--cat-accent, set inline). NO RAG/trajectory
   scalar. Additive — these selectors are either new classes (.mod-id,
   .conf-chip) or attribute-qualified (higher specificity than the skin's bare
   .sec-tier/.card), so they layer cleanly over the skin template without
   modifying any existing rule.
───────────────────────────────────────────────────────────────────────────── */

/* Module section: category accent as a left-border cue (keeps skin border-top) */
.sec-tier[data-cat] {
  border-left: 3px solid var(--cat-accent, var(--line));
  padding-left: 16px;
}

/* Mono module-id chip (W-code), tinted to the category token */
.mod-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--cat-accent, var(--ink-soft));
  border: 1px solid var(--cat-accent, var(--line));
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* Confidence chip — colour from the literal confidence tier (--conf inline) */
.conf-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: 20px;
  color: var(--conf, var(--ink-soft));
  border: 1px solid var(--conf, var(--line));
  background: transparent;
  white-space: nowrap;
}

/* Claim card: category accent on the left border (replaces RAG r/a/g border) */
.card[data-cat] {
  border-left: 3px solid var(--cat-accent, var(--line));
}

/* ===========================================================================
   BRIEF-2026-06-28-WPM-JID-RIGHTCOL-PARTB (G1/G2 + KPI tiles, surface tiers).
   Forward-deadline calendar: deadline strip, W7 timeline, KPI tile row.
   COLOUR-HONEST: every accent here derives ONLY from --cat-accent (category
   W-code, set inline by the renderer) or --conf (confidence tier). Stage is a
   text sub-label, never a colour key. NO traffic-light / risk-grade scalar.
   Additive: all selectors are new classes that layer over the skin template.
   =========================================================================== */

/* Forward-deadline KPI tile — reuses the .kpi look; the forward-deadline tile
   needs no special colour (an honest count, not a grade). Surface-tier helper
   for dense prose breaks. */
.kpi.kpi-deadline { /* same chrome as .kpi; hook for future emphasis only */ }
.surface-2 { background: var(--surface-2, var(--surface)); }
.surface-3 { background: var(--surface-3, var(--surface-2, var(--surface))); }

/* G1 — forward-deadline strip: responsive card grid. Each .dlcard also carries
   .card so it inherits the card chrome + the .card[data-cat] left accent. */
.dl-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 2px;
}
.dlcard {
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
/* Stage = TEXT sub-label / kicker ONLY. Deliberately neutral ink — NEVER a
   colour key. The card's only colour cue is --cat-accent (category). */
.dl-stage {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink-2));
}
.dl-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cat-accent, var(--ink));
}
.dl-title {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink, #111);
}

/* G2 — W7 timeline: rows with a mono accent date and a single category-accent
   left border. NO .evt.esc traffic-light variants exist (forbidden). */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 14px 0 2px;
  border-left: 2px solid var(--line);
  padding-left: 0;
}
.timeline .evt {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--cat-accent, var(--line));
  margin-left: -2px;
}
.timeline .evt + .evt { border-top: 1px solid var(--line); }
.timeline .evt .dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cat-accent, var(--ink));
}
.tl-title {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink, #111);
}
.tl-stage {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink-2));
}

/* R4 hero single-view: when the hero rendered flat (data-single-view="1"),
   there is no .tabs strip — nothing to style; the lone pane sits flush. */
.hero[data-single-view="1"] .tabpane { display: block; }

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD VIEW-LENSES (2026-06-29) — three operator-choosable views over the
   SAME report blob. Switcher = lens.js (mirrors theme.js): data-lens attr on
   <html> + localStorage('wpm-lens'); default 'triage' (operator-chosen).
   Visibility is pure CSS: only the active lens's .lensview-<id> shows.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Lens switcher control (mirrors .themebar exactly) ───────────────────── */
.lensbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lensbar .lbl{font-size:11px;letter-spacing:.12em;opacity:.7;text-transform:uppercase}
.lensbar .opts{display:flex;gap:0;border:1px solid var(--util-line,var(--line));border-radius:30px;overflow:hidden}
.lensbar button{font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;border:0;background:transparent;
  color:var(--ink-soft);padding:7px 14px;transition:.15s}
.lensbar button:hover{color:var(--ink)}
.lensbar button.on{background:var(--brand);color:#fff}
[data-theme="terminal"] .lensbar button.on{color:#04110d}

/* ── Lens visibility — only the active lens shows ─────────────────────────── */
.lensview{display:none}
html[data-lens="triage"] .lensview-triage{display:block}
html[data-lens="map"]    .lensview-map{display:block}
html[data-lens="matrix"] .lensview-matrix{display:block}
/* Fail-safe: if no data-lens set at all, show triage */
html:not([data-lens]) .lensview-triage{display:block}

/* ════════ LENS A · TRIAGE (default) — "what moved this cycle" ════════════ */
.cyclestrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:680px){.cyclestrip{grid-template-columns:repeat(2,1fr)}}
.cyclestat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.cyclestat .num{font-size:30px;font-weight:800;line-height:1;font-family:var(--font-mono,var(--font-sans));letter-spacing:-.01em}
.cyclestat .lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.cyclestat.crit .num{color:var(--crit)}
.cyclestat.up .num{color:var(--high)}
.cyclestat.dn .num{color:var(--mon)}

.feedfilter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.feedfilter .ff-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px}
.feedfilter button{font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  padding:5px 11px;border-radius:30px;transition:.15s}
.feedfilter button:hover{color:var(--ink);border-color:var(--brand)}
.feedfilter button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-theme="terminal"] .feedfilter button.on{color:#04110d}

table.feed{width:100%;border-collapse:collapse;font-size:13px}
table.feed th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  padding:8px;border-bottom:2px solid var(--line);font-family:var(--font-sans);cursor:pointer;user-select:none;white-space:nowrap}
table.feed th:hover{color:var(--brand)}
table.feed th .arr{opacity:.5;font-size:9px;margin-left:3px}
table.feed td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.feed tr:hover td{background:var(--surface-2)}
table.feed .ent{font-weight:700;color:var(--ink)}
.domchip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  padding:2px 7px;border-radius:20px;background:var(--surface-2);color:var(--ink-soft);
  border:1px solid var(--line);white-space:nowrap}
.feed .chg-up{color:var(--crit);font-weight:700}
.feed .chg-dn{color:var(--mon);font-weight:700}
.feed .chg-stable{color:var(--ink-soft)}
.feedempty{padding:24px 8px;text-align:center;color:var(--ink-soft);font-size:13px}

/* ════════ LENS B · MAP — full-width interactive risk map ═════════════════ */
.bigmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-bottom:16px}
.bigmap .cell{aspect-ratio:1.5;border-radius:8px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:10px;cursor:pointer;color:#fff;font-weight:800;font-size:15px;transition:.15s;border:2px solid transparent}
.bigmap .cell small{display:block;font-size:9.5px;opacity:.85;font-weight:600;letter-spacing:.04em;margin-top:2px}
.bigmap .cell:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.bigmap .cell.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.maplegend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;font-size:11px;align-items:center}
.maplegend .li{display:flex;align-items:center;gap:6px;color:var(--ink-soft)}
.maplegend .sw{width:13px;height:13px;border-radius:3px;display:inline-block}
.jidprofile{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.jidprofile .jp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.jidprofile .jp-head h4{font-size:18px;margin:0}
.jidprofile .jp-hint{font-size:12px;color:var(--ink-soft)}
.jidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.jidgrid .jg-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px}
.jidgrid .jg-card .jg-dom{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.jidgrid .jg-card .jg-ent{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4}
.jp-link{font-size:12px;font-weight:700;color:var(--brand);text-decoration:none}
.jp-link:hover{text-decoration:underline}

/* ════════ LENS C · MATRIX — domain × jurisdiction heat-grid ══════════════ */
.matrixwrap{overflow-x:auto}
table.matrix{border-collapse:collapse;font-size:12px;min-width:100%}
table.matrix th,table.matrix td{border:1px solid var(--line);padding:7px 9px;text-align:center}
table.matrix thead th{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  background:var(--surface-2);position:sticky;top:0;white-space:nowrap}
table.matrix tbody th{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap;background:var(--surface)}
table.matrix td.mc{cursor:pointer;font-weight:800;color:#fff;transition:.12s}
table.matrix td.mc:hover{outline:2px solid var(--ink);outline-offset:-2px}
table.matrix td.empty{color:var(--ink-soft);opacity:.35}
.matrixdetail{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;font-size:13px}
.matrixdetail h4{font-size:16px;margin-bottom:10px}
.matrixdetail .md-row{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.matrixdetail .md-row .ent{font-weight:700;color:var(--ink)}
.matrixdetail .md-empty{color:var(--ink-soft)}

/* ── Shared responsive ───────────────────────────────────────────────────── */
@media(max-width:860px){
  .cyclestrip{grid-template-columns:repeat(2,1fr)}
  .bigmap{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}

/* ---- Mobile nav drawer (engine-ui-spec.md §3.6 VP-006) ---- */
.nav-toggle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nav-toggle:focus-visible + .nav-toggle-label{outline:2px solid var(--brand);outline-offset:3px}
.nav-toggle-label{display:none;cursor:pointer;width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  margin-left:auto;padding:10px;border-radius:var(--radius)}
.nav-toggle-label span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .15s,opacity .15s}

@media(max-width:767.98px){
  header.site .wrap{flex-wrap:nowrap;gap:12px}
  .nav-toggle-label{display:flex}
  .btn-primary{display:none}
  nav.main{display:none;position:fixed;top:64px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;
    max-height:calc(100dvh - 64px);overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:49}
  .nav-toggle:checked ~ nav.main{display:flex}
  nav.main a{padding:14px 22px;font-size:16px;border-radius:0;
    border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:0}
  a.btn-primary-mobile{display:block;margin:8px 22px 4px;
    padding:12px 16px;background:var(--brand);color:#fff;
    border-radius:var(--radius);font-weight:700;font-size:15px;text-align:center;
    text-decoration:none}
  .nav-toggle:checked + .nav-toggle-label span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-toggle-label span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle-label span{transition:none}
}


/* ── Hero stat strip + eyebrow (UX-2026-07-07) ──────────────────────────────
   Replaces the static .trust bullet line. Numbers populate from report-latest.json.
   Eyebrow: small-caps mono label above H1. Token vars only (T.10/T.12). */
.hero-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px}
.hero-stat-strip{
  display:flex;margin-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:0;flex-wrap:wrap}
.hss-stat{
  flex:1;min-width:120px;
  padding:16px 20px 14px;
  border-right:1px solid rgba(255,255,255,.1)}
.hss-stat:last-child{border-right:none}
.hss-num{
  font-family:var(--font-mono);font-size:20px;font-weight:700;
  color:#fff;line-height:1;margin-bottom:4px}
.hss-num.hss-alert{color:#f87171}
.hss-lbl{font-size:11px;color:rgba(255,255,255,.55);
  letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono)}
.hss-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px;
  font-family:var(--font-mono)}
@media(max-width:767.98px){
  .hero-stat-strip{margin-top:20px}
  .hss-stat{flex:0 0 50%;border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);padding:12px 16px}
  .hss-stat:last-child{border-bottom:none}
}

/* ── Section divider (UX-2026-07-07) ────────────────────────────────────────
   Lightweight horizontal rule between major home-page content blocks. */
hr.sec-div{border:none;border-top:1px solid var(--line);margin:36px 0 28px;opacity:.6}

/* ── Hero H1 controlled break (UX-2026-07-07) ───────────────────────────────
   Forces break before "regulatory monitor" on medium viewports to avoid
   a widow line break mid-phrase. Hidden on wide + narrow viewports. */
.hero-br{display:none}
@media(max-width:900px) and (min-width:600px){.hero-br{display:block}}

/* ── Exemptions page CSS (extracted from inline style, UX-2026-07-07) ───────
   Moved from exemptions.html inline <style> block; inline-layout guard rule. */
.exemp-matrix{overflow-x:auto;margin:14px 0}
.exemp-matrix table{width:100%;border-collapse:collapse;font-size:12px}
.exemp-matrix th,.exemp-matrix td{padding:7px 10px;border:1px solid var(--border);text-align:center}
.exemp-matrix th{background:var(--surface-2);font-weight:600;font-size:11px}
.exemp-matrix td.jid{text-align:left;font-weight:600;font-family:var(--font-mono)}
.cell-yes{background:var(--mon-bg);color:var(--mon)}
.cell-yes a{color:inherit;text-decoration:none;font-weight:600;border-bottom:1px dotted currentColor}
.cell-no{color:var(--ink-soft)}
.cell-tent{background:var(--elev-bg);color:var(--high);font-style:italic}
/* BRIEF-2026-07-05-WPM-CROSS-JID-FUNNEL-CONTRACT §4.1 Phase 2 E3: inheritance-tinted
   cell variants (additive; base .cell-yes above stays the fallback). */
.cell-yes.cell-observed{background:var(--mon-bg);color:var(--mon)}
.cell-yes.cell-regime_inherited{background:var(--elev-bg);color:var(--high)}
.cell-yes.cell-both{background:var(--mon-bg);color:var(--mon);font-weight:700}
.exemp-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink-soft);margin:8px 0 0}
.exemp-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.exemp-legend .swatch.observed{background:var(--mon-bg);border:1px solid var(--mon)}
.exemp-legend .swatch.regime_inherited{background:var(--elev-bg);border:1px solid var(--high)}
.exemp-legend .swatch.both{background:var(--mon-bg);border:1px solid var(--mon)}
.excard{background:var(--surface-2);border-radius:8px;padding:16px;margin-bottom:12px}
.excard h4{margin:0 0 6px;font-size:14px}
.excard p{font-size:13px;color:var(--ink-soft);margin:0}
.thresh-table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
.thresh-table th,.thresh-table td{padding:7px 10px;border:1px solid var(--border);text-align:left}
.thresh-table th{background:var(--surface-2);font-weight:600}
.reg-table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
.reg-table th,.reg-table td{padding:7px 10px;border:1px solid var(--border);text-align:left}
.reg-table th{background:var(--surface-2);font-weight:600}
/* ── Theme icon button (UX-2026-07-07) ──────────────────────────────────────
   Compact sun/moon toggle in the site header. Token vars only (T.10/T.12). */
.theme-icon-btn{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--line);border-radius:var(--radius);
  background:transparent;color:var(--ink-soft);cursor:pointer;transition:.15s;
  flex-shrink:0}
.theme-icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.theme-icon-btn .ti-icon{pointer-events:none}
.theme-icon-btn[data-current="institutional"] .ti-moon{display:none}
.theme-icon-btn[data-current="terminal"] .ti-sun{display:none}
@media(max-width:767.98px){.theme-icon-btn{margin-left:auto;margin-right:8px}}

/* ── Hero text CTA link (UX-2026-07-07) ────────────────────────────────────
   "Request demo" demoted from btn-ghost to a subtle inline text link. */
.cta-link{color:var(--ink-soft);text-decoration:underline;font-size:.9rem;
  transition:color .15s}
.cta-link:hover{color:var(--ink)}

/* ── FIM per-JID risk section (WPM C1.3) — additive, presence-gated ─────────
   All values are theme tokens (no hard-coded hex, RUNBOOK §A). Rendered only
   when /data/fim/<iso>.json is present; absent → this block styles nothing. */
.fim-risk{margin-top:22px}
.fim-risk .sbadge{font:700 9.5px/1 var(--font-mono);letter-spacing:.06em;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:3px 8px;color:var(--ink-2);margin-left:8px;vertical-align:middle}
.fim-headline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.fim-headline .fim-score,.fim-headline .fim-dir{font:600 12px/1 var(--font-mono);
  color:var(--ink-2)}
.fim-headline .fim-score b{color:var(--ink)}
.fim-risk .fim-edd{font-size:13px;color:var(--ink-2);margin:4px 0 10px}
.fim-risk .fim-sub{font:700 12px/1 var(--font-mono);letter-spacing:.04em;
  color:var(--ink-2);text-transform:uppercase;margin:14px 0 6px}
.fim-tbl{width:100%;border-collapse:collapse;font-size:13px}
.fim-tbl th,.fim-tbl td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
.fim-tbl th{font:700 11px/1 var(--font-mono);color:var(--ink-2);text-transform:uppercase}
.fim-chips{display:flex;gap:6px;flex-wrap:wrap}
.fim-enf{list-style:none;padding:0;margin:0;font-size:13px}
.fim-enf li{padding:5px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.fim-envelope{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fim-envelope .fim-asof{font:600 11px/1 var(--font-mono);color:var(--ink-2)}
.fim-gap{flex-basis:100%;font-size:12px;color:var(--ink-2);margin:8px 0 0}
.fim-boundary{flex-basis:100%;font-size:11.5px;color:var(--ink-soft);
  font-style:italic;margin:8px 0 0}