/* ============================================================================
   dataprotection-jid.css — DP Jurisdiction-page design system (dataprotection.gi)
   ----------------------------------------------------------------------------
   FORKED from asym-intel/financial-integrity:site/assets/sentinel-jid.css
   (blob 2806198d14f15d999776dec7969be4509c5db6c8, 1278 lines, fetched live
   this session via `gh api repos/asym-intel/financial-integrity/contents/
   site/assets/sentinel-jid.css`).

   Per BRIEF-EXEC-2026-08-05-DP-FE §1 source #3 ("do not clone sentinel-jid.css
   unchanged" — v1 brief §10): this fork strips FIM-specific selectors and
   copy and re-points every colour reference at var(--jid-*) / var(--color-*)
   tokens already defined in dataprotection-tokens.css. Token NAMES are
   identical across consumers by design (v5 contract), so this fork needed
   ZERO new CSS custom properties — only trimming and copy changes.

   WHAT WAS STRIPPED (vs. the 1278-line source):
   - The entire ".fim-*" site-chrome block (util bar / header / footer,
     ~115 lines) — DP uses the fleet-shared fe-commons/chrome.css (.ai-*
     namespace) instead of a consumer-forked chrome block. See site/assets/
     chrome.css (vendored verbatim from asym-intel-commons:fe-commons/).
   - ".sentinel-strip" (FIM cross-monitor callout, FIM-branded copy).
   - The domain_tracker trajectory/status pill vocabulary tied to FIM's
     "dm-judgment"/"traj-*"/"st-*" tracker fields (DP has no domain_tracker
     of that shape yet — the module taxonomy here is DP's own 10-module grammar,
     see GDPRI-DOCTRINE.md §"10-module × 57-sub-module grammar (v2.0)",
     asym-intel-internal blob d254a13907cc65087b9f7d553d9ce1ff7db48d40).
   - AML/CFT-specific card copy and the fim-mockup-parity domain prose|cards
     dual-view machinery tied to FIM's specific renderer DOM (build_jurisdiction_
     page_fim_v2.py) — DP has no renderer yet, so this fork keeps only the
     STATIC shell/card primitives a hand-authored honest-empty template needs.

   WHAT WAS KEPT (structure only, token-driven, zero new palette):
   shell/layout/sidenav grid, viewbar, .sect rhythm, .hero + .kpis strip,
   .role-cards, .rh-cards (regulatory horizon), .reg-block, .src-list /
   .gap-list, .evidence-zone / .claim, .next-steps, .modgrid / .modcell
   (module coverage grid — repurposed here for DP's 10 parent modules),
   .null-cycle (honest-empty idiom), .sr-only / .skip (a11y), responsive +
   print rules.

   TOKEN CONTRACT: every colour is var(--color-*) / var(--jid-*) / var(--sev-*)
   from dataprotection-tokens.css. No :root block. No hardcoded hex.
   ========================================================================== */

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

/* ============================================================================
   LAYOUT — shell wrapper + two-column grid (sidenav | content)
   ========================================================================== */
.shell{
  display:block;
  max-width:1400px;
  margin-inline:auto;
}
.layout{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  align-items:start;
}
.contentcol{ min-width:0; }

#sidenav{
  position:sticky;
  top:61px;
  align-self:start;
  max-height:calc(100dvh - 61px);
  overflow-y:auto;
  padding:var(--space-6) var(--space-4);
  border-right:1px solid var(--line);
  font-family:var(--font-body);
}
#sidenav .navlead{
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--faint);
  margin:var(--space-4) 0 var(--space-2);
}
#sidenav .navlead:first-child{ margin-top:0; }
#sidenav a{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-sm);
  line-height:1.35;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  color:var(--muted);
  text-decoration:none;
  transition:var(--transition-interactive, background .15s, color .15s);
}
#sidenav a:hover,
#sidenav a.active,
#sidenav a[aria-current="true"]{
  background:var(--color-surface-dynamic);
  color:var(--ink);
}
#sidenav .dot{
  width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0;
  background:var(--muted);
}
#sidenav .dot.confirmed{ background:var(--jid-confirmed); }
#sidenav .dot.assessed{ background:var(--jid-assessed); }
#sidenav .dot.emerging{ background:var(--jid-emerging); }
#sidenav .dot.sentinel{ background:var(--jid-sentinel); }

.viewbar{
  display:flex;
  gap:var(--space-4);
  flex-wrap:wrap;
  align-items:center;
  padding:var(--space-4) var(--space-8) var(--space-4);
  border-bottom:1px solid var(--line-soft);
}
.viewbar .printbtn{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);
  cursor:pointer;
  transition:var(--transition-interactive, background .15s, color .15s);
}
.viewbar .printbtn:hover{ background:var(--color-surface-dynamic); color:var(--ink); }

main.wrap{
  padding:var(--space-8) var(--space-12);
  min-width:0;
}

/* ============================================================================
   TYPOGRAPHY & SECTION RHYTHM
   ========================================================================== */
.sect{
  margin-bottom:var(--space-12);
  scroll-margin-top:80px;
}
.sect > h2{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
  color:var(--ink);
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--line-soft);
}
.sect > h3,
.sect h3{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  color:var(--ink);
}
.sect h4{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin:var(--space-4) 0 var(--space-2);
}
.sect p{
  max-width:74ch;
  color:var(--ink);
  text-wrap:pretty;
  margin-bottom:var(--space-3);
}
.sect a{ color:var(--accent); text-decoration:none; }
.sect a:hover{ text-decoration:underline; }

/* ============================================================================
   HERO + KPI STRIP
   ========================================================================== */
.hero{background:linear-gradient(135deg,
    color-mix(in srgb,var(--color-primary) 12%,var(--panel)),var(--panel));
  border:1px solid var(--line);border-radius:14px;
  padding:1.9rem 2rem;margin:1.4rem 0 1.5rem;box-shadow:var(--shadow-sm)}
.hero h1{font:600 2rem/1.1 var(--font-display);letter-spacing:-.01em;margin:.35rem 0 .5rem}
.hero h1 .mono{font-size:1.1rem;color:var(--muted);vertical-align:middle}
.hero-lede{color:var(--color-text);max-width:62ch;margin:0}
.lede{font-family:var(--font-display);font-size:var(--text-lg,1.15rem);
  color:var(--ink);max-width:70ch;margin:.75rem 0 1.2rem;line-height:1.5}
.mono{font-family:var(--font-mono)}
.eyebrow{font:600 .72rem/1 var(--font-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.75rem;margin-top:1.4rem}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.kpi .k{font-size:.75rem;color:var(--muted);order:2}
.kpi .v,.kpi .n{font:600 1.75rem/1 var(--font-display);color:var(--color-primary);order:1}

/* ---- badge / severity grammar (reuses sev-badge cascade from tokens file) - */
.badge,.sev-badge{display:inline-flex;align-items:center;gap:.4em;
  font:700 .68rem/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;
  padding:.32em .6em;border-radius:999px;
  color:var(--jid-sev,var(--color-text));
  background:color-mix(in srgb,var(--jid-sev,var(--line)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--jid-sev,var(--line)) 28%,transparent)}
.sev-badge--high     { --jid-sev: var(--sev-high, var(--color-primary)); }
.sev-badge--elevated { --jid-sev: var(--sev-elevated, var(--color-warning)); }
.sev-badge--monitored{ --jid-sev: var(--sev-monitored, var(--muted)); }
.sev-badge--critical { --jid-sev: var(--sev-critical, var(--color-error)); }

/* ============================================================================
   MODULE COVERAGE GRID — DP's 10 parent modules (.modgrid/.modcell)
   ========================================================================== */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--space-2);margin-bottom:var(--space-4)}
.modcell{display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-md);
  font-size:var(--text-sm,0.9rem)}
.modcell .mname{flex:1;color:var(--ink)}
.modcell .mcode{font-family:var(--font-mono);font-size:var(--text-xs,.75rem);
  color:var(--faint)}

/* ============================================================================
   REGULATORY HORIZON — .rh-cards (horizontal scroll strip of .rh-card)
   ========================================================================== */
.rh-cards{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  padding-bottom:var(--space-3);
  scroll-snap-type:x mandatory;
}
.rh-card{
  flex:0 0 clamp(240px, 40%, 300px);
  scroll-snap-align:start;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  border-top:3px solid var(--rh-c, var(--accent));
  padding:var(--space-4);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.rh-card.inforce,   .rh-card[data-stage="inforce"]{   --rh-c:var(--jid-inforce); }
.rh-card.soon,      .rh-card[data-stage="soon"]{      --rh-c:var(--jid-soon); }
.rh-card.horizon,   .rh-card[data-stage="horizon"]{   --rh-c:var(--jid-horizon); }
.rh-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); }
.rh-stage{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; color:var(--rh-c, var(--accent)); }
.rh-date{ font-family:var(--font-display); font-size:var(--text-sm);
  font-variant-numeric:tabular-nums; color:var(--muted); }
.rh-title{ font-family:var(--font-display); font-size:var(--text-lg); line-height:1.2; color:var(--ink); }
.rh-what{ font-size:var(--text-sm); color:var(--muted); }
.rh-what b{ color:var(--ink); font-weight:600; }
.rh-foot{ margin-top:auto; padding-top:var(--space-2); }
.rh-src{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--accent); }

/* honest-empty idiom — an empty cycle reads as MEASURED, not missing */
.rh-empty{padding:var(--space-4);border:1px dashed var(--line);
  border-radius:var(--radius-md);background:var(--bg);
  font-size:var(--text-sm,0.9rem);color:var(--muted);max-width:74ch}
.rh-prov-foot{margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.04em;color:var(--faint,var(--muted))}

/* ============================================================================
   ROLE ACTIONS — .role-cards grid of .role-card
   ========================================================================== */
.role-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--space-4);
}
.role-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  border-top:3px solid var(--rc-c, var(--accent));
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.role-card[data-role="board"]{ --rc-c:var(--jid-confirmed); }
.role-card[data-role="dpo"]{   --rc-c:var(--jid-assessed); }
.role-card[data-role="legal"]{ --rc-c:var(--jid-sentinel); }
.role-card[data-role="engineering"]{ --rc-c:var(--jid-emerging); }
.rc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); }
.rc-role{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; color:var(--rc-c, var(--accent)); }
.rc-prio{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint);
  border:1px solid var(--line); border-radius:var(--radius-full); padding:1px var(--space-2); }
.rc-headline{ font-family:var(--font-display); font-size:var(--text-base); font-weight:600;
  line-height:1.25; color:var(--ink); }
.rc-means{ font-size:var(--text-sm); color:var(--muted); }
.rc-means b{ color:var(--ink); font-weight:600; }
.rc-claims{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint);
  border-top:1px dashed var(--line); padding-top:var(--space-2); margin-top:auto; }

/* ============================================================================
   REGISTERS — .reg-block (h3.reg-h + ul.reg-list + span.reg-date)
   ========================================================================== */
.reg-block{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-6);
  margin-bottom:var(--space-4);
}
.reg-h{ font-family:var(--font-display); font-size:var(--text-lg); color:var(--ink);
  margin-bottom:var(--space-3); display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; }
.reg-list{ list-style:none; padding:0; margin:0; }
.reg-list li{ font-size:var(--text-sm); color:var(--ink); padding:var(--space-2) 0;
  border-bottom:1px solid var(--line-soft); display:flex; gap:var(--space-3); align-items:baseline; }
.reg-list li:last-child{ border-bottom:none; }
.reg-date{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ============================================================================
   SOURCES + COVERAGE — ol.src-list / ul.gap-list
   ========================================================================== */
.src-list{ margin:0; padding-left:var(--space-6); font-size:var(--text-sm); color:var(--ink); }
.src-list li{ padding:var(--space-1) 0; }
.src-list a{ color:var(--accent); word-break:break-word; }
.gap-list{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-3); }
.gap-list li{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-3); font-size:var(--text-sm); color:var(--muted); }
.gap-list li b{ color:var(--ink); font-weight:600; }

/* ============================================================================
   EVIDENCE — section.sec-tier > .evidence-zone > .claim
   ========================================================================== */
.sec-tier{ margin-bottom:var(--space-12); scroll-margin-top:80px; }
.sec-tier > .sect{ margin-bottom:var(--space-4); }
.evidence-zone{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); }
.evidence-zone h4{ margin-top:0; }
.claim{ padding:var(--space-3) var(--space-4); border-left:2px solid var(--color-primary-highlight);
  background:var(--panel2); border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin-top:var(--space-3); font-size:var(--text-sm); }
.claim b{ display:block; color:var(--ink); margin-bottom:var(--space-1); }
.claim .pv{ color:var(--muted); }

.cchip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:var(--text-xs); padding:2px var(--space-2); border-radius:var(--radius-full); }
.cchip.confirmed{ background:var(--jid-confirmed-bg); color:var(--jid-confirmed); }
.cchip.assessed{  background:var(--jid-assessed-bg);  color:var(--jid-assessed); }
.cchip.emerging{  background:var(--jid-emerging-bg);  color:var(--jid-emerging); }
.cchip.sentinel{  background:var(--jid-sentinel-bg);  color:var(--jid-sentinel); }

/* ============================================================================
   NEXT STEPS — nav.next-steps (.next-steps-head + .next-steps-opts > a)
   ========================================================================== */
.next-steps{ margin-bottom:var(--space-12); }
.next-steps-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); }
.next-steps-head .count{ font-family:var(--font-mono); font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.next-steps-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-4); }
.next-step-opt{ display:block; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-4); text-decoration:none !important;
  transition:var(--transition-interactive, border-color .15s, background .15s); }
.next-step-opt:hover{ border-color:var(--accent); background:var(--color-surface-dynamic); }
.nso-title{ font-family:var(--font-display); font-size:var(--text-base); font-weight:600;
  color:var(--ink); margin-bottom:var(--space-1); }
.nso-desc{ font-size:var(--text-sm); color:var(--muted); }

/* ============================================================================
   HONEST-EMPTY IDIOM — .null-cycle (day-one DP has pilot data for 10 JIDs
   only; every other JID's per-JID page must say so plainly, not omit content)
   ========================================================================== */
.null-cycle{padding:var(--space-4);border:1px dashed var(--line);
  border-radius:var(--radius-md);background:var(--bg);
  font-size:var(--text-sm,0.9rem);color:var(--muted)}
.null-cycle strong{color:var(--ink);display:block;margin-bottom:.3rem}

/* ============================================================================
   A11Y UTILITIES — skip-link + screen-reader-only live region
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;padding:var(--space-2,8px) var(--space-3,12px);
  background:var(--panel,#fff);color:var(--accent);border:1px solid var(--line,#ddd);
  border-radius:var(--radius-sm,4px);font:600 var(--text-sm,14px)/1 var(--font-mono,monospace);
  text-decoration:none}
.skip:focus{left:var(--space-2,8px)}

/* ============================================================================
   RESPONSIVE — collapse to single column; hide sidenav on narrow screens
   ========================================================================== */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  #sidenav{ display:none; }
  main.wrap{ padding:var(--space-6) var(--space-4); }
  .viewbar{ padding-left:var(--space-4); padding-right:var(--space-4); }
  .rh-card{ flex-basis:82%; }
}
@media (max-width:640px){ .hero{padding:1.4rem} }

/* ============================================================================
   PRINT — drop chrome, single column, remove card shadows
   ========================================================================== */
@media print{
  #sidenav, .viewbar, .next-steps{ display:none !important; }
  .layout{ grid-template-columns:1fr; }
  main.wrap{ padding:0; }
  .rh-card, .role-card, .reg-block, .evidence-zone{
    box-shadow:none;
    break-inside:avoid;
  }
  .rh-cards{ overflow:visible; flex-wrap:wrap; }
}