/* self-hosted fonts (was Google Fonts CDN — see practices.html) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/IBMPlexSans-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SpaceGrotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/SpaceGrotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/SpaceGrotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SpaceGrotesk-700.woff2') format('woff2');}

/* =================================================================
   PROPORTIONAL DATA — "THE INSTRUMENT" design system
   Cool porcelain ground · ink-navy · raspberry-plum signal.
   Space Grotesk (display) · IBM Plex Sans (body) · IBM Plex Mono (data).
   Grades on the Continuum scale (A→D ordered, calm→concern).
   ================================================================= */

/* ---------- tokens ---------- */
:root{
  /* cool instrument neutrals */
  --ink:#161e27; --ink-2:#36424e; --slate:#586673; --muted:#8a96a2;
  --line:#d2d8de; --line-2:#e1e6ea;
  --paper:#e8ebee; --surface:#ffffff; --surface-2:#f1f3f6;

  /* humane raspberry-plum accent (kept clear of all grade hues) */
  --accent:#a82d6e; --accent-deep:#7d1d50; --accent-bright:#c64d8c;
  --accent-soft:#f6e6ef; --accent-line:#ecccdd;

  /* Grade band palette — the FUNCTIONAL mapping, blessed site-wide (audit A-03).
     Color tracks the TRACKING axis, not grade rank: A restrained green ·
     B tracks-anyway gold (warm = heavy tracking despite effort) · C minimal
     slate (cool/neutral) · D unrestrained red. Deliberately diverges from a
     simple calm→concern ordinal ramp; matches the GRADE hexes emitted into
     data.js by web/build_pd.py — keep the two in sync. Was previously an
     anonymous inline override in dashboard.html, which left other pages on a
     different palette. */
  --gA:#0e7c6b; --gA-s:#e0efeb; --gA-ink:#0a5a4d;
  --gB:#c2922f; --gB-s:#f6eed5; --gB-ink:#876310;
  --gC:#6b8aa0; --gC-s:#e8edf2; --gC-ink:#3e5668;
  --gD:#c1504a; --gD-s:#f8e6e3; --gD-ink:#8e302b;

  /* type roles (names kept for back-compat; values are the new faces) */
  --serif:"Space Grotesk","Segoe UI",sans-serif;     /* display */
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  /* rhythm — Fibonacci spacing (each ≈ φ of the last) */
  --s1:4px; --s2:8px; --s3:13px; --s4:21px; --s5:34px; --s6:55px; --s7:89px;
  --mx:clamp(22px,5vw,76px);     /* page gutter */
  --maxw:1240px;
  --radius:11px;

  --shadow-sm:0 1px 2px rgba(22,30,39,.05),0 2px 8px rgba(22,30,39,.05);
  --shadow:0 4px 14px rgba(22,30,39,.07),0 18px 44px rgba(22,30,39,.09);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* faint coordinate field — a measurement surface */
  background-image:
    linear-gradient(to right, rgba(22,30,39,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,30,39,.025) 1px, transparent 1px);
  background-size:56px 56px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; }
p{ margin:0; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--mx); }
.section{ padding-block:clamp(34px,4.5vw,62px); }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:500; display:flex; width:max-content; max-width:100%;
  align-items:center; gap:9px; margin-bottom:22px;
}
.center .eyebrow, .eyebrow.is-center{ margin-inline:auto; }
/* the signature tick — a small coordinate cross */
.eyebrow::before{
  content:""; width:15px; height:15px; flex:none; background-repeat:no-repeat; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='58' y1='10' x2='58' y2='90' stroke='%237d1d50' stroke-width='9'/%3E%3Cline x1='10' y1='62' x2='90' y2='62' stroke='%237d1d50' stroke-width='9'/%3E%3Ccircle cx='72' cy='38' r='13' fill='%237d1d50'/%3E%3C/svg%3E");
}
.eyebrow.on-dark{ color:var(--accent-bright); }
.eyebrow.on-dark::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='58' y1='10' x2='58' y2='90' stroke='%23c64d8c' stroke-width='9'/%3E%3Cline x1='10' y1='62' x2='90' y2='62' stroke='%23c64d8c' stroke-width='9'/%3E%3Ccircle cx='72' cy='38' r='13' fill='%23c64d8c'/%3E%3C/svg%3E"); }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.muted{ color:var(--slate); }
.center{ text-align:center; }

.display{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.025em; }
.lede{ font-size:clamp(18px,2.1vw,21px); line-height:1.55; color:var(--ink-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; letter-spacing:.005em;
  padding:13px 22px; border-radius:10px; border:1.5px solid transparent;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s;
  white-space:nowrap;
}
.btn .ico{ transition:transform .2s ease; }
.btn:hover .ico{ transform:translateX(3px); }
.btn-primary{ background:var(--accent-deep); color:#fff; box-shadow:0 2px 10px rgba(125,29,80,.26); }
.btn-primary:hover{ background:var(--accent); transform:translateY(-1px); box-shadow:0 6px 18px rgba(125,29,80,.32); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#000; transform:translateY(-1px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }

.textlink{ color:var(--accent-deep); font-weight:600; border-bottom:1.5px solid var(--accent-line); padding-bottom:1px; transition:border-color .16s; display:inline-flex; gap:6px; align-items:center; }
.textlink:hover{ border-color:var(--accent); }

/* ---------- mark / logo : THE COORDINATE (off-centre crosshair + plotted point) ---------- */
.mark{ width:26px; height:26px; flex:none; display:block; color:var(--ink); overflow:visible; }
.mark-ax{ stroke:var(--muted); }
.mark-dot{ fill:var(--accent); }
.wordmark{ display:inline-flex; align-items:center; gap:11px; font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.1) blur(8px);
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:14px var(--mx); display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .15s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--accent-deep); }
.nav-links a.btn-primary{ color:#fff; }
.nav-links a.btn-primary:hover{ color:#fff; }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--accent); }
.nav-cta{ margin-left:6px; }
.nav-burger{ display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:9px; padding:8px 10px; }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.nav-burger span+span{ margin-top:4px; }

@media (max-width:860px){
  .nav-links{ position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--surface); border-bottom:1px solid var(--line); padding:14px var(--mx) 22px; transform:translateY(-130%); transition:transform .28s ease; box-shadow:var(--shadow); }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ font-size:17px; padding:10px 0; width:100%; border-bottom:1px solid var(--line-2); }
  .nav-links a.active::after{ display:none; }
  .nav-cta{ margin:8px 0 0; }
  .nav-burger{ display:block; }
}

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:#c4ccd3; }
.footer a{ color:#c4ccd3; }
.footer-in{ max-width:var(--maxw); margin:0 auto; padding:64px var(--mx) 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer .wordmark{ color:#fff; }
.footer .mark{ color:#fff; }
.footer .mark-ax{ stroke:#69757f; }
.footer .mark-dot{ fill:var(--accent-bright); }
.footer .creed{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:#8b95a0; margin-top:16px; }
.footer h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#7c8690; margin:0 0 14px; font-weight:500; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.footer ul a:hover{ color:#fff; }
.footer-base{ border-top:1px solid #2c3540; }
.footer-base-in{ max-width:var(--maxw); margin:0 auto; padding:20px var(--mx); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:12.5px; color:#7c8690; }
@media (max-width:760px){ .footer-in{ grid-template-columns:1fr 1fr; gap:32px; } .footer .brandcol{ grid-column:1 / -1; } }

/* ---------- grade badge ---------- */
.gbadge{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600;
  color:#fff; border-radius:6px; }
.gbadge.A{ background:var(--gA); }
.gbadge.B{ background:var(--gB); color:#3a2a06; } /* gold needs a dark glyph for AA */
.gbadge.C{ background:var(--gC); color:#1e2b36; } /* white on gC ≈ 3.0:1 — deep ink for AA */
.gbadge.D{ background:var(--gD); color:#fbe9e7; } /* white on gD ≈ 3.9:1 — pale tint for AA */

/* ---------- pill / tag ---------- */
.tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:500; color:var(--slate); border:1px solid var(--line); border-radius:30px; padding:5px 12px; background:var(--surface); white-space:nowrap; }
.tag.accent{ color:var(--accent-deep); border-color:var(--accent-line); background:var(--accent-soft); }

/* ---------- reveal (no hidden resting state — safe in throttled iframes) ---------- */
.reveal{ }

/* ---------- disclaimer ---------- */
.disclaimer{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.55; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:15px 18px; }
.disclaimer .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:7px; }
.disclaimer b{ color:var(--accent-deep); }

/* ---------- data states (B-06): loading / ready / empty-crawl / error ----------
   The dashboard root (.js-dashboard) carries data-pd-state; HTML defaults to
   "loading" so the skeleton paints before JS runs. boot() moves it to ready /
   empty-crawl / error. Pages without the attribute render normally. */
@keyframes pdShimmer{ 0%{ background-position:-420px 0; } 100%{ background-position:420px 0; } }
@keyframes pdPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.82); } }
.pd-skel{ background:linear-gradient(90deg,var(--surface-2) 0px,#eef1f4 160px,var(--surface-2) 320px);
  background-size:680px 100%; border-radius:7px; animation:pdShimmer 1.25s linear infinite; }
.pd-pulse{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;
  animation:pdPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .pd-skel, .pd-pulse{ animation:none; } }
.js-dashboard > .pd-skeleton, .js-dashboard > .pd-error, .js-dashboard > .pd-empty-crawl{ display:none; }
.js-dashboard[data-pd-state="loading"] > *,
.js-dashboard[data-pd-state="error"] > *,
.js-dashboard[data-pd-state="empty-crawl"] > *{ display:none; }
.js-dashboard[data-pd-state="loading"] > .pd-skeleton{ display:block; }
.js-dashboard[data-pd-state="error"] > .pd-error{ display:block; }
.js-dashboard[data-pd-state="empty-crawl"] > .pd-empty-crawl{ display:block; }

/* =================================================================
   DATA-VIZ COMPONENTS (matrix, grade cards, vendors, detail, table)
   ================================================================= */
/* matrix svg */
svg.matrix-svg{ width:100%; height:auto; display:block; }
.mx-thresh{ font-family:var(--mono); font-size:9.5px; fill:#9aa6b1; letter-spacing:.06em; }
.mx-qlab{ font-family:var(--serif); font-size:12px; font-weight:600; }
/* axis label: mono-uppercase TITLE + arrow cue (the instrument idiom) */
.mx-axtitle{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em; fill:var(--ink-2); }
.mx-bub{ transition:fill-opacity .15s, stroke-width .15s; }
.mx-bub:hover{ fill-opacity:.82 !important; stroke-width:2.2; }
.mx-tip{ position:fixed; z-index:200; display:none; pointer-events:none; background:var(--ink); color:#fff;
  border-radius:10px; padding:11px 13px; box-shadow:var(--shadow); min-width:170px; font-size:13px; }
/* header: letter chip + name, grade label as sibling text (C-06) */
.mx-tip-h{ display:flex; align-items:center; gap:9px; }
.mx-tip-h b{ font-family:var(--serif); font-size:16px; font-weight:600; }
.mx-tip-h .gbadge{ width:22px; height:22px; font-size:12px; flex:none; }
.mx-tip-lab{ font-family:var(--mono); font-size:11px; color:#c4ccd3; margin-left:auto; padding-left:6px; }
.mx-tip-r{ font-size:12px; color:#c4ccd3; margin-top:3px; }
.mx-tip-g{ display:grid; grid-template-columns:auto auto; gap:2px 12px; margin-top:9px; padding-top:9px; border-top:1px solid #2c3540; font-size:12px; }
.mx-tip-g span{ color:#9aa6b1; } .mx-tip-g b{ font-family:var(--mono); justify-self:end; }

/* generic definition tooltip + hover affordance */
.pd-tip{ position:fixed; z-index:300; display:none; pointer-events:none; background:var(--ink); color:#fff;
  border-radius:10px; padding:11px 13px; box-shadow:var(--shadow); max-width:268px; font-size:13px; line-height:1.45; }
.pd-tip b{ display:block; font-family:var(--serif); font-size:15px; font-weight:600; margin-bottom:4px; }
.pd-tip span{ display:block; color:#c4ccd3; }
.has-tip{ cursor:help; border-bottom:1px dotted var(--muted); }
[data-tip-grade]{ cursor:help; }
th[data-tip-term]{ cursor:help; }
.tip-q::after{ content:"?"; display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px;
  margin-left:5px; border-radius:50%; background:var(--line); color:var(--slate); font-family:var(--sans);
  font-size:9px; font-weight:700; vertical-align:middle; cursor:help; }

/* grade cards */
.gcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  border-top:3px solid var(--gc); box-shadow:var(--shadow-sm); }
.gcard-top{ display:flex; align-items:baseline; justify-content:space-between; }
.gcard-letter{ font-family:var(--serif); font-size:38px; font-weight:600; color:var(--gc-ink, var(--gc)); line-height:1; }
.gcard-count{ font-family:var(--mono); font-size:24px; font-weight:600; color:var(--ink); }
.gcard-label{ font-weight:600; font-size:15px; margin-top:10px; }
.gcard-desc{ font-size:13px; color:var(--slate); margin-top:6px; line-height:1.45; }
/* quality gauge — a second, colour-independent channel (A full → D low) */
.gcard-gauge{ height:5px; border-radius:4px; background:var(--line-2); overflow:hidden; margin-top:14px; }
.gcard-gauge i{ display:block; height:100%; border-radius:4px; background:var(--gc); }

/* grade distribution bar */
.gbar{ display:flex; height:46px; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.gbar-seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; min-width:30px; line-height:1.1; }
.gbar-seg span{ font-family:var(--mono); font-weight:600; font-size:14px; }
.gbar-seg i{ font-style:normal; font-size:11px; opacity:.85; }

/* vendor ranking */
.vrow{ display:grid; grid-template-columns:30px 1fr minmax(120px,2fr) 46px; gap:14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2); }
.vrank{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.vname{ font-weight:500; font-size:14.5px; } .vname em{ display:block; font-style:normal; font-size:11.5px; color:var(--slate); font-family:var(--mono); letter-spacing:.02em; margin-top:1px; }
.vbar-track{ background:var(--line-2); border-radius:6px; height:14px; overflow:hidden; }
.vbar{ height:100%; border-radius:6px; }
.vpct{ font-family:var(--mono); font-size:13px; text-align:right; color:var(--ink-2); }
.vlegend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; font-size:12px; color:var(--slate); }
.vlegend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; }

/* detail panel */
.detail{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm); align-self:start; position:sticky; top:88px; }
.dt-empty{ text-align:center; color:var(--slate); padding:30px 6px; }
.dt-empty-ico{ width:46px; height:46px; margin:0 auto 16px; border-radius:50%; border:2px dashed var(--accent-line);
  background:radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%); }
.dt-empty p{ font-size:14px; line-height:1.55; max-width:240px; margin:0 auto; }
.dt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dt-name{ font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.1; }
.dt-vert{ font-family:var(--mono); font-size:12px; color:var(--slate); margin-top:3px; letter-spacing:.03em; }
.dt-badge{ width:40px; height:40px; font-size:19px; flex:none; }
.dt-grade{ font-size:13.5px; color:var(--slate); line-height:1.5; margin:14px 0 18px; }
.dt-scores{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.dt-score{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.dt-score span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); cursor:help; }
.dt-score b{ display:inline-block; font-family:var(--serif); font-size:30px; font-weight:600; color:var(--ink); margin-top:4px; line-height:1; }
.dt-score i{ font-style:normal; color:var(--muted); font-size:13px; margin-left:5px; }
/* position meter: fill = the site's place on the axis; plum tick = the grade threshold
   (px/py are threshold-normalized to 50 in build_pd.py) */
.dt-meter{ position:relative; height:5px; border-radius:3px; background:var(--line-2); margin-top:10px; }
.dt-meter i{ position:absolute; top:0; bottom:0; left:0; background:var(--slate); opacity:.6; border-radius:3px; }
.dt-meter u{ position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:var(--accent); border-radius:1px; }
/* rubric groups: coverage header + bar, present-only chips, absent behind an expander */
.dt-grp{ padding:13px 0; border-bottom:1px solid var(--line-2); }
.dt-grp-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:var(--mono); }
.dt-grp-h span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); cursor:help; }
.dt-grp-h b{ font-size:12.5px; color:var(--ink); font-weight:600; }
.dt-cbar{ height:4px; border-radius:2px; background:var(--line-2); margin:8px 0 10px; overflow:hidden; }
.dt-cbar i{ display:block; height:100%; background:var(--accent); border-radius:2px; }
.dt-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dt-chip{ font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); cursor:help; }
.dt-chip.off{ background:transparent; border-style:dashed; color:var(--muted); }
.dt-absent{ display:none; }
.dt-grp.open .dt-absent{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.dt-exp{ font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:7px; background:none; border:1px dashed var(--line); color:var(--slate); cursor:pointer; }
.dt-exp:hover{ color:var(--accent-deep); border-color:var(--accent-line); }
/* tracking share rows (interim hr/sr — family breakdown lands with C-16/B-01) */
.dt-trow{ display:grid; grid-template-columns:minmax(0,auto) auto 1fr auto; align-items:center; gap:10px; font-size:13px; margin-top:9px; }
.dt-trow span{ color:var(--slate); cursor:help; white-space:nowrap; }
.dt-trow b{ font-family:var(--mono); font-weight:600; }
.dt-tbar{ height:4px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.dt-tbar i{ display:block; height:100%; background:var(--accent); border-radius:2px; }
.dt-trow em{ font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--slate); min-width:34px; text-align:right; }
.dt-cc{ font-family:var(--mono); font-size:11px; color:var(--accent-deep); margin:10px 0 0; cursor:help; }
/* context line: tier · CMP · AI — deliberately muted (A-08/C-15) */
.dt-ctx{ font-size:12.5px; color:var(--slate); margin-top:14px; line-height:1.6; }
.dt-ctx .subk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:help; }
.dt-foot{ font-size:11.5px; color:var(--muted); font-style:italic; margin-top:14px; }
/* sensitive-family tint on the tracking-by-family bars (B-01) */
.dt-tbar.sens i{ background:var(--accent-deep); }

/* ---------- B-01 vendor evidence: "Who's tracking you" ---------- */
.dt-vr{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.dt-vr-k{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-deep); }
.dt-vr-claim{ font-size:13px; line-height:1.55; color:var(--ink-2); margin:9px 0 13px; text-wrap:pretty; }
.dt-vr-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.dt-vr-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 11px; }
.dt-vr-stat span{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); margin-bottom:5px; }
.dt-vr-stat b{ font-family:var(--serif); font-size:24px; font-weight:600; line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:4px; }
.dt-vr-stat b.plum{ color:var(--accent-deep); }
.dt-vr-stat b em{ font-style:normal; font-family:var(--mono); font-size:10px; font-weight:400; color:var(--muted); }
.dt-vr-kk{ font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); margin:0 0 8px; }
.dt-vr-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.dt-vr-chip{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px; line-height:1; border-radius:6px; padding:5px 9px; white-space:nowrap; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); }
.dt-vr-chip.flag{ color:var(--accent-deep); background:var(--accent-soft); border-color:var(--accent-line); }
.dt-vr-chip b{ font-weight:600; margin-left:3px; }
.dt-vr-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:13px; }
.dt-vr-row{ display:flex; gap:10px; align-items:flex-start; }
.dt-vr-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:5px; background:var(--line); }
.dt-vr-dot.on{ background:var(--accent); }
.dt-vr-body{ flex:1; min-width:0; }
.dt-vr-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dt-vr-top b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.dt-vr-dom{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.dt-vr-cat{ font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--slate); }
.dt-vr-n{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--slate); }
.dt-vr-mk{ display:flex; gap:6px; flex-wrap:wrap; margin:5px 0 3px; }
.dt-vr-desc{ font-size:12px; line-height:1.45; color:var(--ink-2); }
.dt-vr-benign{ font-size:12px; line-height:1.5; color:var(--slate); margin:0 0 12px; }
.dt-vr-seeall{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px 13px; cursor:pointer; width:100%; transition:border-color .12s, color .12s; }
.dt-vr-seeall:hover{ border-color:var(--accent-line); color:var(--accent-deep); }
/* markers — cross-context = plum (the one "pay attention"); cloaked = dashed grey */
.dt-mk{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:5px; }
.dt-mk.cross{ background:var(--accent-soft); color:var(--accent-deep); border:1px solid var(--accent-line); }
.dt-mk.cloak{ background:var(--surface-2); color:var(--slate); border:1px dashed var(--line); }

/* ---------- B-01 crawler access (AI-training posture) ---------- */
.dt-ca{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.dt-ca-k{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:11px; cursor:help; }
.dt-ca-row{ display:flex; gap:9px; align-items:flex-start; }
.dt-ca-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:5px; }
.dt-ca-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dt-ca-lab{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); min-width:70px; }
.dt-ca-top b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.dt-ca-note{ font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--slate); margin-top:4px; }
.dt-ca-legend{ font-family:var(--mono); font-size:9.5px; color:var(--muted); display:flex; align-items:center; gap:7px; margin-top:11px; }
.dt-ca-legend span{ width:7px; height:7px; border-radius:50%; display:inline-block; }

/* ---------- B-01 see-all drawer ---------- */
.dt-dr[hidden]{ display:none; }
.dt-dr{ position:fixed; inset:0; z-index:400; display:flex; justify-content:flex-end; }
.dt-dr-scrim{ position:absolute; inset:0; background:rgba(22,30,39,.44); }
.dt-dr-panel{ position:relative; width:min(560px,94vw); height:100%; background:var(--surface); box-shadow:var(--shadow); overflow-y:auto; scrollbar-width:thin; display:flex; flex-direction:column; }
.dt-dr-head{ position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--line); padding:20px 26px; display:flex; align-items:flex-start; gap:14px; z-index:1; }
.dt-dr-title{ display:flex; align-items:center; gap:10px; }
.dt-dr-title .gbadge{ width:30px; height:30px; font-size:15px; }
.dt-dr-title b{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; }
.dt-dr-measure{ font-family:var(--mono); font-size:11px; color:var(--slate); margin-top:7px; }
.dt-dr-close{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--slate); background:transparent; border:1px solid var(--line); border-radius:7px; padding:7px 11px; cursor:pointer; flex:none; margin-left:auto; transition:color .12s, border-color .12s; }
.dt-dr-close:hover{ color:var(--ink); border-color:var(--ink-2); }
.dt-dr-body{ padding:8px 26px 40px; }
.dt-dr-grp{ margin-top:22px; }
.dt-dr-grp-h{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.dt-dr-grp-h span{ font-size:14px; font-weight:600; color:var(--ink); }
.dt-dr-grp-h em{ margin-left:auto; font-style:normal; font-family:var(--mono); font-size:11px; color:var(--slate); }
.dt-dr-sens{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); border:1px solid var(--line); border-radius:5px; padding:2px 7px; }
.dt-dr-bar{ height:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.dt-dr-bar i{ display:block; height:100%; background:var(--slate); }
.dt-dr-bar.sens i{ background:var(--accent-deep); }
.dt-dr-grp .dt-vr-row{ padding:12px 0; border-top:1px solid var(--line-2); align-items:flex-start; }

/* table */
/* bounded scroll region (~12 rows) instead of a page-stretcher; header stays pinned */
.tbl-scroll{ overflow:auto; max-height:600px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
table.dtable{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px; }
table.dtable thead th{ text-align:left; background:var(--surface-2); padding:13px 14px; font-weight:600; color:var(--ink-2);
  border-bottom:1.5px solid var(--line); white-space:nowrap; font-size:12.5px; position:sticky; top:0; }
table.dtable th[data-sort]{ cursor:pointer; user-select:none; }
table.dtable th[data-sort]::after{ content:"↕"; color:var(--muted); margin-left:5px; font-size:11px; opacity:0; transition:opacity .13s; }
table.dtable th[data-sort]:hover::after{ opacity:.55; }
table.dtable th.sorted[data-dir="asc"]::after{ content:"↑"; color:var(--accent); opacity:1; }
table.dtable th.sorted[data-dir="desc"]::after{ content:"↓"; color:var(--accent); opacity:1; }
table.dtable tbody td{ padding:12px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
table.dtable tbody tr{ cursor:pointer; transition:background .12s; }
table.dtable tbody tr:hover{ background:var(--surface-2); }
table.dtable tbody tr.sel{ background:var(--accent-soft); }
table.dtable tbody tr.sel td{ border-color:var(--accent-line); }
.t-name{ font-weight:600; } .t-mut{ color:var(--slate); }
.t-yes{ color:var(--accent-deep); font-weight:600; } .t-no{ color:var(--muted); }
.gbadge.sm{ width:22px; height:22px; font-size:12px; }
.t-empty{ text-align:center; color:var(--slate); padding:34px; line-height:1.7; }
.t-empty b{ font-style:normal; color:var(--ink-2); }
.t-clear{ font:inherit; color:var(--accent-deep); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; }
.t-more{ text-align:center; color:var(--slate); padding:16px 12px; font-size:12.5px; background:var(--surface-2); }

/* ===================== TRACKERS TAB (v4) ===================== */
/* Coverage instrument — dark band */
.trk-band{ background:var(--ink); border-radius:var(--radius); padding:clamp(22px,3vw,34px); color:#eef1f4; margin:8px 0 26px; }
.trk-band-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.trk-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-bright); margin:0 0 8px; display:inline-flex; align-items:center; gap:9px; }
.trk-eyebrow .pd-live{ width:7px; height:7px; border-radius:50%; background:var(--accent-bright); display:inline-block; animation:trkpulse 2.4s ease-in-out infinite; }
@keyframes trkpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .trk-eyebrow .pd-live{ animation:none; } }
.trk-band-h{ font-family:var(--serif); font-size:clamp(20px,2.6vw,27px); font-weight:600; letter-spacing:-.01em; margin:0; color:#fff; }
.trk-allbtn{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#c7ccd2; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:8px 13px; cursor:pointer; transition:background .14s,border-color .14s; }
.trk-allbtn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); }
.trk-cov{ display:grid; grid-template-columns:264px 1fr; gap:28px; align-items:start; }
.trk-rail{ display:flex; flex-direction:column; gap:5px; }
.trk-rail-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#8894a2; margin-bottom:4px; }
.trk-co{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:9px 12px; cursor:pointer; transition:background .13s,border-color .13s,opacity .13s; }
.trk-co:hover{ background:rgba(255,255,255,.09); }
.trk-co.active{ background:var(--accent-soft); border-color:var(--accent-line); }
.trk-co.active .trk-co-n{ color:#fff; }
.trk-co.dim{ opacity:.4; }
.trk-co-n{ font-size:13px; font-weight:600; color:#eef1f4; flex:1; }
.trk-co-p{ font-family:var(--mono); font-size:12px; color:var(--accent-bright); }
.trk-cov-main{ min-width:0; }
.trk-stat{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.trk-big{ font-family:var(--serif); font-size:clamp(38px,5vw,48px); font-weight:600; line-height:.9; letter-spacing:-.02em; color:var(--accent-bright); flex:none; }
.trk-big-lab{ font-size:13.5px; line-height:1.45; color:#c7ccd2; max-width:46ch; }
.trk-big-lab b{ color:#fff; font-weight:600; }
/* site field — one dot per real site, fixed position, lit by state (NO jitter).
   Grid with ~sqrt(N) columns (set in JS) so the field reads as a square block. */
.trk-field{ display:grid; gap:3px; max-width:min(100%, 360px); align-content:start; }
.trk-dot{ aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.09); transition:background .18s; }
.trk-dot.pres{ background:rgba(168,45,110,.42); }        /* present — could recognize you */
.trk-dot.cx{ background:var(--accent-bright); box-shadow:0 0 4px rgba(198,77,140,.6); }  /* observed syncing */
.trk-fieldcap{ font-family:var(--mono); font-size:10px; color:#7f8b98; margin-top:12px; line-height:1.5; }
.trk-fieldcap b{ color:#c7ccd2; }
.trk-band-note{ font-family:var(--mono); font-size:11px; line-height:1.6; color:#8894a2; margin:18px 0 0; max-width:100ch; }
.trk-band-note b{ color:#c7ccd2; font-weight:600; }
.trk-band-note em{ color:var(--accent-bright); font-style:normal; }
/* ranked & classified table */
.trk-tbl-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.trk-pivot, .trk-cls{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; }
.trk-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trk-seg{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:7px 13px; border:none; background:transparent; color:var(--slate); border-radius:7px; cursor:pointer; transition:background .14s,color .14s; }
.trk-seg:hover:not(.on){ color:var(--ink-2); }
.trk-seg.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.trk-catsel{ font-family:var(--sans); font-size:14px; border:1.5px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--surface); color:var(--ink); transition:border-color .13s,box-shadow .13s; }
.trk-catsel:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.trk-searchpill{ flex:1 1 240px; }
.trk-tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.trk-tbl{ width:100%; border-collapse:collapse; font-size:14px; min-width:660px; }
.trk-tbl thead th{ position:sticky; top:0; background:var(--surface-2); text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.trk-th[data-k]{ cursor:pointer; user-select:none; }
.trk-th[data-k]:hover{ color:var(--ink-2); }
.trk-th.sorted{ color:var(--accent-deep); }
.trk-th-r{ text-align:right; }
.trk-arrow{ margin-left:5px; color:var(--accent); }
.trk-tbl tbody tr{ border-bottom:1px solid var(--line-2); }
.trk-tbl tbody tr:last-child{ border-bottom:none; }
.trk-tbl tbody tr:hover{ background:var(--surface-2); }
.trk-tbl td{ padding:12px 14px; vertical-align:top; }
.trk-rank{ font-family:var(--mono); font-size:12px; color:var(--muted); width:38px; }
.trk-namecell{ min-width:180px; }
.trk-name{ font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.trk-sub{ font-size:12px; color:var(--slate); margin-top:3px; }
.trk-chip{ font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; border-radius:4px; padding:3px 7px; white-space:nowrap; cursor:help; }
.trk-chip.cross{ color:var(--accent-deep); background:var(--accent-soft); border:1px solid var(--accent-line); }
.trk-chip.op{ color:var(--slate); background:var(--surface-2); border:1px solid var(--line); }
.trk-desc{ color:var(--ink-2); font-size:13px; line-height:1.5; max-width:44ch; }
.trk-reach{ text-align:right; white-space:nowrap; min-width:120px; }
.trk-reach-n{ font-family:var(--mono); font-weight:600; color:var(--ink); }
.trk-bar{ height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin:5px 0 3px; }
.trk-bar i{ display:block; height:100%; border-radius:3px; }
.trk-reach-s{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.trk-cap{ font-size:12.5px; color:var(--slate); margin-top:12px; }
.trk-empty{ text-align:center; color:var(--slate); padding:34px; }
.trk-disc{ margin-top:16px; max-width:760px; }
@media (max-width:860px){
  .trk-cov{ grid-template-columns:1fr; gap:20px; }
  .trk-tbl-head{ flex-direction:column; align-items:stretch; }
  .trk-desc{ display:none; }
}

/* ===== integrated detail card — expandable family roster + dark cross-context ===== */
.dt-fams .dt-fam{ border-top:1px solid var(--line-2); }
.dt-fams .dt-fam:first-of-type{ border-top:none; }
.dt-fam-h{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; padding:8px 0; cursor:pointer; text-align:left; }
.dt-fam-ch{ color:var(--muted); font-size:10px; transition:transform .15s; flex:none; width:10px; }
.dt-fam.open .dt-fam-ch{ transform:rotate(90deg); }
.dt-fam-lab{ font-size:13px; color:var(--ink); flex:none; min-width:120px; }
.dt-fam-bar{ flex:1; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.dt-fam-bar i{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.dt-fam-bar.sens i{ background:var(--accent-deep); }
.dt-fam-n{ font-family:var(--mono); font-size:12px; color:var(--ink-2); flex:none; min-width:34px; text-align:right; }
.dt-fam-vs{ padding:2px 0 8px 19px; display:flex; flex-direction:column; gap:8px; }
.dt-fam-vs[hidden]{ display:none; }   /* the hidden attr must beat flex — families start collapsed */
.dt-fv{ display:flex; gap:9px; }
.dt-fv-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); margin-top:5px; flex:none; }
.dt-fv-dot.on{ background:var(--accent); }
.dt-fv-b{ min-width:0; flex:1; }
.dt-fv-top{ display:flex; align-items:baseline; gap:8px; }
.dt-fv-top b{ font-size:13px; color:var(--ink); }
.dt-fv-cat{ font-family:var(--mono); font-size:10.5px; color:var(--slate); }
.dt-fv-mk{ margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; }
.dt-xc{ background:var(--ink); border-radius:var(--radius); padding:16px 18px; margin:4px 0 14px; color:#eef1f4; }
.dt-xc-k{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:9px; }
.dt-xc-claim{ font-size:13.5px; line-height:1.5; color:#d3d8de; margin:0; }
.dt-xc-claim b{ color:#fff; font-family:var(--serif); font-size:16px; }
.dt-xc-claim.none{ color:#9aa6b1; }
.dt-xc-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.dt-xc-v{ font-family:var(--mono); font-size:11px; color:#eef1f4; background:rgba(198,77,140,.16); border:1px solid rgba(198,77,140,.3); border-radius:6px; padding:4px 9px; }

/* ===================== HYBRID SITES VIEW (reading band · filter shelf · full-width) ===================== */
.rb-sect{ padding:clamp(18px,2.5vw,30px) 0 6px; }
.rb{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,48px); align-items:end; }
.rb-h1{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.4vw,50px); line-height:1.03; letter-spacing:-.025em; margin:14px 0 0; max-width:17ch; }
.rb-sub{ font-size:16.5px; line-height:1.55; color:var(--ink-2); max-width:52ch; margin:16px 0 0; }
.rb-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; }
.rb-live{ font-family:var(--mono); font-size:12.5px; color:var(--slate); display:inline-flex; align-items:center; gap:9px; }
.rb-live i{ width:8px; height:8px; border-radius:50%; background:var(--gA); flex:none; }
.rb-how{ font-family:var(--mono); font-size:12.5px; color:var(--accent-deep); text-decoration:none; border-bottom:1px solid var(--accent-line); }
.rb-how:hover{ color:var(--accent); }
.rb-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rb-card{ text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px 15px; box-shadow:var(--shadow-sm); color:var(--ink); transition:background .14s,border-color .14s; }
.rb-card:hover{ border-color:var(--slate); }
.rb-card.on{ background:var(--accent-soft); border-color:var(--accent-line); }
.rb-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rb-card-lab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; }
.rb-sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.rb-card-pct{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; }
.rb-card-sub{ font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:6px; }
/* filter shelf */
.fs-sect{ padding:0; }
.fshelf{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin:14px 0 20px; overflow:hidden; }
.fshelf-top{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.fs-searchrow{ display:flex; gap:10px; align-items:stretch; }
.fs-search{ flex:1; min-width:200px; display:flex; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--surface-2); transition:border-color .13s,box-shadow .13s; }
.fs-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.fs-search svg{ width:15px; height:15px; color:var(--slate); flex:none; }
.fs-search input{ flex:1; border:none; background:transparent; font-family:var(--sans); font-size:14px; color:var(--ink); outline:none; min-width:0; }
.fs-filters{ display:inline-flex; align-items:center; gap:8px; flex:none; border:1.5px solid var(--line); border-radius:9px; padding:9px 14px; background:var(--surface); color:var(--slate); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; cursor:pointer; transition:border-color .13s,color .13s,background .13s; }
.fs-filters svg{ width:15px; height:15px; flex:none; }
.fs-filters .fs-filters-ch{ width:13px; height:13px; opacity:.7; transition:transform .17s; }
.fs-filters:hover{ color:var(--ink-2); }
.fs-filters.open{ border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-deep); }
.fs-filters.open .fs-filters-ch{ transform:rotate(180deg); }
.fs-metarow{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.fs-gpills{ display:flex; gap:9px; flex-wrap:wrap; }
.fs-count{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--slate); white-space:nowrap; }
.fs-count b{ color:var(--ink); font-size:15px; }
.fshelf-body{ border-top:1px solid var(--line-2); background:var(--surface-2); padding:16px; display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:20px 26px; align-items:start; }
.fshelf-body[hidden]{ display:none; }   /* the hidden attr must beat grid — shelf starts collapsed, opens from the chevron */
.fs-field label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:9px; display:flex; justify-content:space-between; }
.fs-field label b{ color:var(--ink); }
.fs-field select{ font-family:var(--sans); font-size:14px; border:1.5px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--surface); color:var(--ink); width:100%; }
.fshelf-body input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line); margin:9px 0 4px; }
.fshelf-body input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer; }
.fshelf-active{ border-top:1px solid var(--line-2); padding:12px 16px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.fshelf-active[hidden]{ display:none; }   /* the hidden attr must beat flex — the active bar hides when no filters are set */
/* full-width matrix + detail below */
.matrix-full{ width:100%; }
.detail-full{ position:static; top:auto; margin-top:20px; }
@media (max-width:820px){
  .rb{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .fshelf-body{ grid-template-columns:1fr; }
  .fs-count{ margin-left:0; }
}

/* ===================== INTEGRATED DETAIL CARD (faithful to the Phase-2 reference) ===================== */
.dt2{ display:flex; flex-direction:column; }
/* A — identity + score tiles */
.dt2-a{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; padding-bottom:20px; border-bottom:1px solid var(--line-2); }
.dt2-id{ display:flex; align-items:flex-start; gap:14px; }
.dt2-badge{ width:46px; height:46px; font-size:22px; flex:none; border-radius:11px; }
.dt2-name{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.01em; line-height:1.05; }
.dt2-msub{ font-family:var(--mono); font-size:12px; color:var(--slate); margin-top:4px; }
.dt2-desc{ font-size:13px; color:var(--ink-2); margin:9px 0 0; line-height:1.5; max-width:40ch; }
.dt2-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dt2-tile{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent-deep); border-radius:10px; padding:14px 15px; box-shadow:var(--shadow-sm); }
.dt2-tk{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); cursor:help; }
.dt2-tn{ font-family:var(--serif); font-size:30px; font-weight:600; line-height:1; margin-top:6px; }
.dt2-tn i{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--muted); }
.dt2-tm{ position:relative; height:6px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line); margin-top:11px; }
.dt2-tm i{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--ink-2); }
.dt2-tm u{ position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:var(--accent-deep); }
/* B — consent posture 3-up */
.dt2-b{ padding:20px 0; border-bottom:1px solid var(--line-2); }
.dt2-bk{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:14px; }
.dt2-cg{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dt2-gh{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.dt2-gh span{ font-size:13px; font-weight:600; color:var(--ink); cursor:help; }
.dt2-gh em{ font-family:var(--mono); font-size:10.5px; color:var(--slate); font-style:normal; }
.dt2-more{ margin-top:8px; border:none; background:none; padding:0; font-family:var(--mono); font-size:11px; color:var(--slate); cursor:pointer; text-decoration:underline dotted var(--line); text-underline-offset:3px; }
.dt2-more:hover{ color:var(--ink-2); }
.dt2-absent{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.dt2-absent[hidden]{ display:none; }
.dt2-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.dt2-chip{ font-family:var(--mono); font-size:10px; letter-spacing:.03em; padding:4px 9px; border-radius:6px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); }
.dt2-chip.off{ border:1px dashed var(--line); background:transparent; color:var(--muted); text-decoration:line-through; opacity:.65; }
/* tooltip affordance: every glossed element in the card shows the help cursor; chips brighten on hover */
.dt2 [data-tip-term]{ cursor:help; }
.dt2-chip[data-tip-term]:hover{ border-color:var(--accent-line); color:var(--accent-deep); }
.dt2-chip.off[data-tip-term]:hover{ color:var(--slate); border-color:var(--accent-line); }
/* C — family roster + dark cross-context */
.dt2-c{ display:grid; grid-template-columns:1.1fr .9fr; gap:26px; padding:20px 0 4px; }
.dt2-th{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.dt2-th span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); cursor:help; }
.dt2-th em{ font-family:var(--mono); font-size:10.5px; color:var(--slate); font-style:normal; }
.dt2-fams{ display:flex; flex-direction:column; gap:2px; }
.dt2-none{ font-size:13px; color:var(--slate); }
.dt-fam-id{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; margin-left:6px; }
.dt2-xc{ background:var(--ink); border-radius:12px; padding:18px 20px; color:#eef1f4; align-self:start; }
.dt2-xk{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:12px; cursor:help; }
.dt2-xtop{ display:flex; gap:15px; align-items:center; }
.dt2-xfield{ flex:none; display:grid; grid-template-columns:repeat(10, 8px); gap:3px; }
.dt2-xdot{ width:8px; height:8px; border-radius:2px; background:rgba(255,255,255,.1); }
.dt2-xdot.on{ background:var(--accent-bright); }
.dt2-xstat{ flex:1; min-width:0; }
.dt2-xbig{ font-family:var(--serif); font-size:32px; font-weight:600; line-height:.9; letter-spacing:-.02em; color:var(--accent-bright); }
.dt2-xbig.light{ color:#fff; }
.dt2-xlab{ font-size:12px; line-height:1.4; color:#c7ccd2; margin-top:7px; }
.dt2-xrk{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#8894a2; margin:14px 0 8px; }
.dt2-xlist{ display:flex; flex-direction:column; gap:7px; }
.dt2-xrow{ display:flex; align-items:center; gap:9px; }
.dt2-xdotc{ width:7px; height:7px; border-radius:50%; background:var(--accent-bright); flex:none; }
.dt2-xrow b{ font-size:12.5px; font-weight:600; color:#fff; flex:1; min-width:0; }
.dt2-xcat{ font-family:var(--mono); font-size:9.5px; color:#8894a2; }
.dt2-xrow em{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent-bright); font-style:normal; min-width:32px; text-align:right; }
.dt2-xclean{ display:flex; gap:13px; align-items:center; }
.dt2-xclean p{ font-size:12.5px; line-height:1.5; color:#c7ccd2; margin:0; }
/* D — slim crawler footer */
.dt2-foot{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.dt2-fk{ font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.dt2-fp{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:5px 10px; }
.dt2-fp b{ font-weight:600; color:var(--ink); }
.dt2-fdot{ width:7px; height:7px; border-radius:50%; }
.dt2-disc{ margin-top:16px; }
@media (max-width:820px){ .dt2-a, .dt2-cg, .dt2-c{ grid-template-columns:1fr; } }