/* GEIST SANS */
  /* Bundled Geist Sans 1.7.2 (OFL, see /static/fonts/OFL.txt). Same files as the
     assembly-gym design system, verified by SHA-256. */
  @font-face {
    font-family: "Geist Sans";
    src: url("/static/fonts/geist-sans-1.7.2.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
  }
  @font-face {
    font-family: "Geist Sans";
    src: url("/static/fonts/geist-sans-1.7.2-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: block;
  }

  /* THEME VARIABLES */
  /* Palette mapped from the assembly-gym design system: ink/paper/card/line plus
     good/warning/bad reserved for data meaning. Ink is the only accent. */
  :root {
    color-scheme: light;
    --ink: #0d0d0d;
    --paper: #f7f7f8;
    --line: #e7e7e7;
    --accent-secondary: #707070;
    --accent-soft: #ededed;
    --good: #16845b;
    --warning: #a15c00;
    --bad: #c8324c;
    --highlight: #f7e7bb;
    --on-strong-color: #ffffff;

    --bg: var(--paper);
    --surface: #ffffff;
    --card: #ffffff;
    --card-hover: var(--accent-soft);
    --border: var(--line);
    --border-light: #efefef;
    --text: var(--ink);
    --text-secondary: #6b6b6b;
    --muted: #8a8a8a;
    /* The two tones of static/icons/entities.svg besides ink; both follow the theme. */
    --entity-icon-muted: var(--muted);
    --entity-icon-cut: var(--card);
    --accent: var(--ink);
    --accent-light: #3d3d3d;
    --accent-dim: rgba(13, 13, 13, 0.06);
    --accent-glow: rgba(13, 13, 13, 0.14);
    --white: var(--on-strong-color);
    --gray-50: #f7f7f8;
    --gray-100: #ededed;
    --gray-200: #e7e7e7;
    --gray-300: #d3d6db;
    --gray-400: #8a8a8a;
    --gray-500: #6b6b6b;
    --gray-600: #4d4d4d;
    --gray-700: #333333;
    --gray-800: #1f1f1f;
    --gray-900: #0d0d0d;
    --success: var(--good);
    --danger: var(--bad);
    --info: #6b6b6b;
    --shadow-sm: 0 1px 3px rgba(40, 30, 20, 0.06);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 18px 45px rgba(13, 13, 13, 0.18);
    --header-bg: rgba(247, 247, 248, 0.85);
    --map-empty: #ededed;
    --map-stroke: #d8d8d8;
    --chart-grid: rgba(13, 13, 13, 0.06);
    --tooltip-bg: #ffffff;
    --tooltip-border: #e7e7e7;
    --tooltip-text: #0d0d0d;
    --tooltip-muted: #6b6b6b;
    --select-option-bg: #ffffff;
    --select-option-color: #0d0d0d;
    --badge-other-bg: #f7f7f8;
    --badge-other-color: #6b6b6b;
    /* Semantic status (mirrors TRAIL.status in JS) */
    --status-good: var(--good);
    --status-warn: var(--warning);
    --status-bad: var(--bad);
    --status-neutral: #6b6b6b;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --ink: #f4f4f4;
    --paper: #171717;
    --line: #383838;
    --accent-secondary: #b4b4b4;
    --accent-soft: #343434;
    --good: #5dc59a;
    --warning: #e9ad5b;
    --bad: #f07a8d;
    --highlight: #4a4029;
    --on-strong-color: #0d0d0d;

    --surface: #242424;
    --card: #242424;
    --border-light: #2f2f2f;
    --text-secondary: #b4b4b4;
    --muted: #9a9a9a;
    --accent-light: #d0d0d0;
    --accent-dim: rgba(244, 244, 244, 0.10);
    --accent-glow: rgba(244, 244, 244, 0.18);
    --gray-50: #171717;
    --gray-100: #242424;
    --gray-200: #383838;
    --gray-300: #4a4a4a;
    --gray-400: #9a9a9a;
    --gray-500: #b4b4b4;
    --gray-600: #cfcfcf;
    --gray-700: #e0e0e0;
    --gray-800: #efefef;
    --gray-900: #f4f4f4;
    --info: #b4b4b4;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55);
    --header-bg: rgba(23, 23, 23, 0.85);
    --map-empty: #343434;
    --map-stroke: #4a4a4a;
    --chart-grid: rgba(244, 244, 244, 0.08);
    --tooltip-bg: #242424;
    --tooltip-border: #383838;
    --tooltip-text: #f4f4f4;
    --tooltip-muted: #b4b4b4;
    --select-option-bg: #242424;
    --select-option-color: #f4f4f4;
    --badge-other-bg: #2b2b2b;
    --badge-other-color: #b4b4b4;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Geist Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 140ms ease, color 140ms ease;
  }

  ::selection { color: var(--text); background: var(--accent-soft); }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  [tabindex="0"]:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  /* NAVIGATION RAIL */
  .nav-rail {
    position: fixed;
    z-index: 20;
    top: 16px;
    bottom: 16px;
    left: 16px;
    display: flex;
    width: 200px;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    padding: 18px 10px 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px 4px;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.04em;
    color: var(--text);
    text-decoration: none;
  }
  .nav-brand svg { width: 28px; height: 28px; color: var(--ink); }
  .nav-brand em { font-style: normal; color: var(--muted); }
  .nav-group { display: grid; gap: 4px; }
  .nav-group > span {
    padding: 0 10px 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .tab {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, color 140ms ease;
  }
  .tab:not(.active):hover { background: var(--accent-soft); }
  .tab.active { color: var(--on-strong-color); background: var(--ink); }
  .tab.active::after { content: "\2192"; }

  .nav-rail-footer { display: grid; gap: 6px; margin-top: auto; }
  .nav-user { padding: 0 10px; color: var(--muted); font-size: 11px; }
  .nav-action {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--card);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease;
  }
  .nav-action:hover { background: var(--accent-soft); }

  .nav-toggle {
    position: fixed;
    z-index: 21;
    top: 50%;
    left: 194px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0 0 2px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    list-style: none;
    cursor: pointer;
  }
  .nav-toggle::-webkit-details-marker { display: none; }
  .nav-toggle::before {
    position: absolute;
    z-index: -1;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    content: "";
  }
  .nav-toggle::after { content: "\2039"; }
  .nav-shell:not([open]) > .nav-toggle::after { content: "\203A"; }
  .nav-shell:not([open]) > .nav-rail { display: none; }
  body:has(.nav-shell:not([open])) { padding-left: 0; }
  body { padding-left: 216px; }

  /* Below this width the rail becomes a horizontal block above the page. */
  @media (max-width: 1280px) {
    body { padding-left: 0; }
    .nav-rail {
      position: static;
      display: flex;
      width: auto;
      flex-direction: column;
      gap: 14px;
      overflow: visible;
      margin: 16px 16px 0;
      padding: 12px;
    }
    .nav-group { display: flex; flex-wrap: wrap; gap: 6px; }
    .nav-group > span { flex: 1 0 100%; padding-bottom: 0; }
    .tab { flex: 0 1 auto; }
    .tab.active::after { margin-left: 6px; }
    .nav-toggle { position: absolute; top: 22px; right: 22px; left: auto; transform: none; }
    .nav-rail-footer { grid-auto-flow: column; justify-content: start; gap: 10px; margin-top: 0; }
    .nav-action { width: auto; }
  }
  @media (max-width: 700px) {
    .nav-rail { margin: 12px 12px 0; }
    .masthead { padding: 20px 16px 0; }
    .page { padding: 16px 16px 48px; }
  }

  /* MASTHEAD */
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    width: min(1320px, 100%);
    margin: auto;
    padding: 34px 24px 0;
  }
  .masthead > * { grid-column: 1; }
  .masthead-title {
    margin: 0;
    font-size: clamp(27px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .masthead-intro {
    max-width: 70ch;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
  }
  .masthead-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
  }
  .dot {
    width: 7px;
    height: 7px;
    background: var(--good);
    border-radius: 50%;
    animation: pulse 2.5s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

  /* PAGE VIEWERS: the faces beside the page title, components/page-viewers.js. Their room
     is kept from the first paint, so nothing moves when they arrive. */
  .page-viewers { position: relative; grid-column: 2; grid-row: 1; align-self: start; display: flex; align-items: center; justify-content: flex-end; min-width: 160px; min-height: 42px; margin-top: 1px; --face-ring: var(--bg); }
  @media (max-width: 700px) {
    .masthead-title, .masthead-intro { grid-column: 1 / -1; }
    .page-viewers { grid-row: 3; align-self: stretch; margin-top: 10px; }
  }
  .viewer-stack { display: flex; align-items: center; padding: 4px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; animation: viewer-in 180ms ease-out; }
  .viewer-stack[hidden] { display: none; }
  .viewer-stack > * + * { margin-left: -5px; }
  /* Each face covers the one after it, so the first faces, the ones viewing now, show whole. */
  .viewer-stack > :nth-child(1) { z-index: 4; }
  .viewer-stack > :nth-child(2) { z-index: 3; }
  .viewer-stack > :nth-child(3) { z-index: 2; }
  .viewer-stack > :nth-child(4) { z-index: 1; }
  .viewer-face, .viewer-more { position: relative; display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px var(--face-ring); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
  .viewer-face { background: oklch(0.52 0.105 var(--face-hue)); color: var(--on-strong-color); }
  [data-theme="dark"] .viewer-face { background: oklch(0.8 0.085 var(--face-hue)); }
  .viewer-more { background: var(--accent-soft); color: var(--text); font-size: 11px; }
  .viewer-face.viewing-now::after { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--face-ring); content: ""; }
  .viewer-tip { position: absolute; top: calc(100% + 10px); right: -6px; z-index: 50; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: 280px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-md); color: var(--text-secondary); font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; pointer-events: none; }
  .viewer-tip strong { color: var(--text); font-size: 12px; }
  @media (hover: hover) {
    .viewer-stack .viewer-face { transition: transform 140ms ease; }
    .viewer-stack .viewer-face:hover { z-index: 5; transform: translateY(-2px); }
    .viewer-stack .viewer-face:hover .viewer-tip { opacity: 1; visibility: visible; transform: none; }
  }
  .page-viewers.open .viewer-tip { display: none; }
  .viewer-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: min(340px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); animation: viewer-in 140ms ease-out; --face-ring: var(--card); }
  .viewer-panel:focus { outline: none; }
  .viewer-panel-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border-light); }
  .viewer-panel-head strong { color: var(--text); font-size: 14px; font-weight: 700; }
  .viewer-panel-head span { color: var(--muted); font-size: 12px; }
  /* Half of a seventh row shows, so the list reads as one that scrolls. */
  .viewer-list { max-height: 364px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
  .viewer-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
  .viewer-row:hover { background: var(--accent-soft); --face-ring: var(--accent-soft); }
  .viewer-row .viewer-face { width: 30px; height: 30px; font-size: 11px; }
  .viewer-row-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .viewer-name { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; }
  .viewer-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-you { flex: none; padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .viewer-seen { color: var(--muted); font-size: 12px; }
  .viewer-now { color: var(--good); font-weight: 600; }
  .viewer-visits { flex: none; color: var(--muted); font-size: 12px; }
  @keyframes viewer-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .viewer-stack, .viewer-panel { animation: none; } .viewer-tip, .viewer-stack .viewer-face { transition: none; } }

  /* CONTENT */
  .page { display: none; width: min(1320px, 100%); margin: auto; padding: 20px 24px 72px; }
  .page.active { display: block; }

  /* SECTION HEADERS */
  .section-label {
    margin: 22px 0 16px;
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .section-head {
    margin-top: 12px;
    margin-bottom: 16px;
  }
  .section-head .section-label {
    margin: 0 0 6px;
  }
  .section-copy {
    max-width: 70ch;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
  }

  /* KPI ROW */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 22px;
  }
  @media (max-width: 900px) {
    .kpi-row { grid-template-columns: repeat(3, 1fr); }
  }
  .kpi {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column-reverse;
    justify-content: flex-end;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }
  .kpi .label {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .kpi .num {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  .kpi .num.purple,
  .kpi .num.green { color: var(--good); }

  /* OVERVIEW STAT GROUPS: the headline numbers, grouped by topic. */
  .stat-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 22px; }
  @media (max-width: 1100px) { .stat-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 700px) { .stat-groups { grid-template-columns: minmax(0, 1fr); } }
  /* An entity page has two or four groups, drawn two to a row so none is left alone. */
  @media (min-width: 701px) { #intel-scorecard:not(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat-group { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
  .stat-group-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
  .stat-group-copy { margin: 6px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
  .stat-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .stat .num { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
  .stat .label { margin-top: 2px; color: var(--muted); font-size: 12px; }
  .stat-group-note { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
  .stat .num.green { color: var(--good); }
  .stat .num.red { color: var(--bad); }
  .stat .num small { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }

  /* A solid badge beside a title, holding one line icon from the sprite in dashboard.html. */
  .icon-sprite { display: none; }
  .entity-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
  .entity .entity-icon { margin-right: 0.35em; }
  .section-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 8px; background: var(--ink); color: var(--on-strong-color); vertical-align: middle; }
  .stat-group-title .section-icon { margin-right: 0; }
  .section-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* A page's titled section: the Model Lab's and the Data Ops tab's. */
  .page-section { margin-bottom: 28px; }

  /* CARDS */
  .card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }
  .card h3 {
    margin-bottom: 16px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .card canvas { max-height: 340px; }

  .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  .row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  .row-2 > *, .row-3 > * { min-width: 0; }
  @media (max-width: 1200px) {
    .row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 800px) {
    .row-2, .row-3 { grid-template-columns: minmax(0, 1fr); }
  }

  /* ATTRITION CHART */

  /* Landscape Comparison Cards */
  .landscape-grid { margin-bottom: 20px; }
  .landscape-card {
    padding: 20px;
  }
  .landscape-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    min-height: 58px;
  }
  .landscape-card-copy {
    flex: 1 1 280px;
    min-width: 0;
  }
  .landscape-card h3 {
    margin-bottom: 4px;
  }
  .landscape-card-meta {
    min-height: 16px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
  }
  .landscape-card-stats {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-shrink: 0;
    margin-left: auto;
  }
  .landscape-card-stat {
    text-align: right;
    min-width: 72px;
  }
  .landscape-card-stat-label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .landscape-card-stat-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .landscape-card-stat-value.accent {
    color: var(--accent);
  }
  .landscape-chart {
    height: 430px;
  }
  .landscape-chart canvas {
    max-height: none;
  }
  @media (max-width: 900px) {
    .landscape-card-head {
      min-height: 0;
    }
    .landscape-card-stats {
      width: 100%;
      justify-content: flex-start;
      margin-left: 0;
    }
    .landscape-card-stat {
      text-align: left;
    }
  }

  /* Database Profile */
  .db-profile-card {
    padding: 22px;
  }
  .db-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .db-profile-copy {
    flex: 1 1 320px;
    min-width: 0;
  }
  .db-profile-copy h3 {
    margin-bottom: 4px;
  }
  .db-profile-meta {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .db-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, auto));
    gap: 16px;
    align-items: start;
  }
  .db-profile-stat {
    text-align: right;
  }
  .db-profile-stat-label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .db-profile-stat-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
  }
  .db-treemap { position: relative; height: 420px; margin-bottom: 18px; }
  .db-domain { position: absolute; overflow: hidden; padding: 3px 2px 0; color: var(--text-secondary); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
  .db-domain strong { color: var(--text); }
  .db-tile { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; overflow: hidden; border-radius: 3px; color: var(--text); font-size: 11px; transition: opacity 120ms ease; }
  .db-tile-labelled { padding: 8px 9px; border-radius: 6px; }
  .db-tile:hover { opacity: 0.82; }
  .db-tile strong, .db-tile span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .db-tile strong { font-size: 12px; }
  .db-tile span { opacity: 0.75; font-variant-numeric: tabular-nums; }
  .db-tile-on-ink { color: var(--card); }
  .db-profile-details {
    border-top: 1px solid var(--border-light);
    padding-top: 14px;
  }
  .db-profile-details summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    user-select: none;
    list-style: none;
  }
  .db-profile-details summary::-webkit-details-marker {
    display: none;
  }
  .db-profile-details summary::before {
    content: '+';
    display: inline-block;
    width: 12px;
    margin-right: 6px;
    color: var(--accent);
  }
  .db-profile-details[open] summary::before {
    content: '-';
  }
  #db-table-detail { margin-top: 14px; }
  @media (max-width: 900px) {
    .db-profile-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
    }
    .db-profile-stat {
      text-align: left;
    }
  }

  /* RANKING LIST */
  .rank-list { display: flex; flex-direction: column; gap: 0; }
  .rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
  }
  .rank-item.rank-item-top .rank-name {
    font-weight: 650;
  }
  .rank-item:last-child { border-bottom: none; }
  .rank-bar-wrap { flex: 1; display: flex; align-items: center; gap: 10px; }
  .rank-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.6s ease;
    min-width: 4px;
  }
  .rank-name {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 500;
  }
  .rank-name-link {
    display: block;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .rank-name-link:hover {
    color: var(--accent);
  }
  .rank-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 50px;
    text-align: right;
  }
  .rank-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
    flex-shrink: 0;
  }

  /* RISING STARS: a stacked bar a row, the grey part being what the trend expected. */
  .rising-item { padding: 6px 0; border-bottom: 1px solid var(--border-light); }
  .rising-item:last-child { border-bottom: none; }
  .rising-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 3px; font-size: 13px; }
  .rising-name { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: break-word; }
  .rising-name:hover { color: var(--accent); }
  .rising-lift { margin-left: auto; color: var(--good); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rising-bar-row { display: flex; align-items: center; gap: 10px; }
  .rising-track { flex: 1; min-width: 0; }
  .rising-bar-recent { display: block; height: 8px; min-width: 3px; border-radius: 3px; background: var(--ink); overflow: hidden; }
  .rising-bar-expected { display: block; height: 100%; background: var(--muted); opacity: 0.55; }
  .rising-count { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rising-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--muted); font-size: 12px; }
  .rising-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .rising-legend i { width: 22px; height: 8px; border-radius: 3px; }

  /* ENTITY INTEL: the readouts ahead, the status key and the trial timeline. */
  .card > .section-copy { margin: -4px 0 12px; font-size: 12px; }
  .readout-list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12px; }
  .readout-list li { display: grid; grid-template-columns: 96px auto 1fr; gap: 10px; align-items: baseline; }
  .readout-date { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
  .readout-list a { color: var(--text); font-weight: 600; }
  .readout-meta { color: var(--muted); }
  .status-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
  .status-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .status-legend i { width: 18px; height: 5px; border-radius: 3px; }
  .status-legend i.readout-key { width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; }
  .tl { --tl-label: 176px; --tl-gap: 12px; --tl-row: 11px; --tl-axis: 22px; position: relative; }
  .tl-row, .tl-lane { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); column-gap: var(--tl-gap); align-items: start; }
  .tl-years { position: relative; height: var(--tl-axis); }
  .tl-years span { position: absolute; bottom: 5px; padding-left: 4px; color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
  .tl-years .tl-today-label { top: 6px; bottom: auto; padding: 0; transform: translateX(-50%); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
  .tl-grid { position: absolute; top: var(--tl-axis); bottom: var(--tl-axis); left: calc(var(--tl-label) + var(--tl-gap)); right: 0; pointer-events: none; }
  .tl-year, .tl-today { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
  .tl-today { width: 1.5px; background: var(--ink); }
  .tl-tools { margin-bottom: 2px; }
  .tl-all { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text-secondary); font: inherit; font-size: 11px; cursor: pointer; }
  .tl-all:hover { border-color: var(--text); color: var(--text); }
  .tl-lane { position: relative; margin: 6px 0; }
  /* Above the year lines, which cross the lane names when a phone stacks them over their trials. */
  .tl-lane-head { z-index: 1; justify-self: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 0 6px 0 0; border: 0; background: var(--card); color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
  .tl-lane-head::before { content: '▾'; width: 10px; color: var(--text-secondary); }
  .tl-lane-head[aria-expanded="false"]::before { content: '▸'; }
  /* A folded lane opens from a click anywhere on it, its thin lines included. */
  .tl-lane-head[aria-expanded="false"]::after { content: ''; position: absolute; inset: 0; z-index: 1; }
  .tl-lane-head:hover .tl-lane-name { text-decoration: underline; }
  .tl-lane-name { color: var(--text); font-size: 12px; font-weight: 700; }
  .tl-lane-counts { display: flex; flex-wrap: wrap; gap: 2px 8px; width: 100%; padding-left: 16px; font-variant-numeric: tabular-nums; }
  .tl-lane-counts span { display: inline-flex; align-items: center; gap: 3px; }
  .tl-lane-counts i { width: 10px; height: 4px; border-radius: 2px; }
  .tl-lane-counts .tl-readout-key { width: 7px; height: 7px; box-sizing: border-box; border: 1.5px solid var(--ink); border-radius: 50%; }
  .tl-plot { position: relative; height: calc(var(--rows) * var(--tl-row) + 8px); border-radius: 6px; background: color-mix(in srgb, var(--ink) 3%, transparent); transition: height 160ms ease; }
  .tl-bar { position: absolute; top: calc(7px + var(--row) * var(--tl-row)); height: 5px; min-width: 5px; border-radius: 3px; background: var(--status); transition: top 160ms ease; }
  .tl-bar:hover { box-shadow: 0 0 0 1.5px var(--status); }
  .tl-ahead::after { content: ''; position: absolute; top: 50%; right: -4px; width: 9px; height: 9px; margin-top: -4.5px; box-sizing: border-box; border: 2px solid var(--status); border-radius: 50%; background: var(--card); }
  [aria-expanded="false"] + .tl-plot { align-self: stretch; height: auto; min-height: 18px; }
  [aria-expanded="false"] + .tl-plot .tl-bar { top: calc(50% - 1px); height: 2px; background: color-mix(in srgb, var(--status) 55%, transparent); }
  [aria-expanded="false"] + .tl-plot .tl-ahead::after { width: 7px; height: 7px; margin-top: -3.5px; border-width: 1.5px; }
  @media (max-width: 700px) {
    .tl { --tl-label: 0px; --tl-gap: 0px; }
    .tl-row, .tl-lane { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  }
  @media (prefers-reduced-motion: reduce) { .tl-plot, .tl-bar { transition: none; } }

  /* NETWORK: shapes in ink, labels that stay readable over the links. */
  .graph-label { paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
  .graph-legend-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; color: var(--text-secondary); }
  .graph-legend-item span { display: grid; line-height: 1.25; }
  .graph-legend-item small { color: var(--muted); font-size: 10px; }
  .graph-legend-toggle { cursor: pointer; }
  .graph-legend-toggle:hover { background: var(--accent-dim); }
  .graph-legend-glyph { flex: none; width: 16px; height: 16px; }
  .graph-legend-icon { flex: none; display: inline-flex; width: 18px; font-size: 16px; }
  .graph-icon {
    pointer-events: none;
    color: var(--on-strong-color);
    --entity-icon-muted: color-mix(in srgb, var(--on-strong-color) 60%, transparent);
  }
  /* On a phone the corner boxes would cover the layout buttons and the graph. */
  @media (max-width: 700px) {
    #graph-legend { top: auto !important; bottom: 12px; right: 12px; }
    #graph-meta { display: none !important; }
    #graph-layout-bar { flex-wrap: wrap; }
    #graph-stats { flex-wrap: wrap; margin-left: 0 !important; }
  }
  .graph-phase-chip { display: inline-block; margin-left: 4px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 9px; font-weight: 700; }

  /* MODEL LAB */
  /* A Model Lab section's own model, outcome and metric chips, above its charts. */
  .section-chips { display: flex; flex-direction: column; gap: 8px; }
  .toggle-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .toggle-chips-label { min-width: 64px; color: var(--muted); font-size: 12px; }
  .toggle-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; cursor: pointer; }
  .toggle-chip:has(input:checked) { border-color: var(--text); color: var(--text); }
  .toggle-chip input { margin: 0; accent-color: var(--ink); }
  .toggle-chip-swatch { width: 10px; height: 10px; border-radius: 3px; }
  .ml-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  @media (max-width: 800px) { .ml-pair { grid-template-columns: minmax(0, 1fr); } }

  /* COMPLETION RADAR */
  .radar-card { padding: 16px; }
  .radar-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .radar-head h4 { margin: 0; font-size: 13px; color: var(--muted); }
  .radar-coverage { font-size: 11px; color: var(--muted); }
  .radar-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; font-size: 11px; color: var(--muted); }
  .radar-coverage { margin: 2px 0 6px; }
  .radar { position: relative; }
  .radar svg { display: block; width: 100%; height: auto; overflow: visible; }
  .radar-grid { stroke: var(--border-light); stroke-width: 1; }
  .radar-lane { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
  .radar-year { stroke: var(--border); stroke-width: 1; }
  .radar-axis { fill: var(--muted); font-size: 10px; font-weight: 600; }
  .radar-year-label { fill: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
  .radar-today { stroke: var(--ink); stroke-width: 1.5; }
  .radar-today-label { fill: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
  .radar-today-pulse { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: radar-pulse 1.8s ease-out infinite; }
  @keyframes radar-pulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
  @media (prefers-reduced-motion: reduce) { .radar-today-pulse { animation: none; } }
  /* See-through, so a dot behind another still shows; its colour is the drug's P(approval). */
  .radar-dot { fill-opacity: 0.55; stroke-width: 1; cursor: pointer; transition: fill-opacity 120ms ease; }
  .radar-dot-unscored { fill-opacity: 0.2; stroke-dasharray: 2 2; }
  .radar a:hover .radar-dot { fill-opacity: 1; stroke-width: 1.5; }
  .radar-later { fill: var(--text-secondary); font-size: 11px; font-weight: 700; }
  .radar-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; max-width: 320px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-md); color: var(--text-secondary); font-size: 11px; pointer-events: none; }
  .radar-tip strong { color: var(--text); font-size: 12px; }
  .radar-tip[hidden] { display: none; }

  /* TABLES */
  table { width: 100%; border-collapse: collapse; }
  th {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 11px 14px;
    border-bottom: 2px solid var(--border);
    background: var(--card);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
  }
  td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: filter 140ms ease;
  }
  tbody tr:hover td { background: var(--accent-soft); filter: contrast(0.98); }
  a.nct,
  .intel-entity-link {
    color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  a.nct:hover,
  .intel-entity-link:hover { color: var(--text); text-decoration-thickness: 2px; }

  .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .badge.other { background: var(--badge-other-bg); color: var(--badge-other-color); }

  /* SEARCH */
  .search-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
  .search-input {
    flex: 1;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--paper);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 140ms ease;
  }
  .search-input:focus { border-color: var(--text); }
  .search-input::placeholder { color: var(--muted); }
  select.search-input {
    flex: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b6b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
  }
  select.search-input option { background: var(--select-option-bg); color: var(--select-option-color); }
  .btn {
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--ink);
    border-radius: 9px;
    background: var(--ink);
    color: var(--on-strong-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 140ms ease;
  }
  .btn:hover { filter: contrast(0.82); }
  .btn-ghost {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease;
  }
  .btn-ghost:hover { background: var(--accent-soft); }

  /* TRAIL TABLE: the one table template, trail-table.js */
  .tt-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .tt-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .tt-active-filters { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .tt-chip { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--accent-soft); color: var(--text); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
  .tt-chip:hover { border-color: var(--text); }
  .tt-chip-clear { background: var(--card); color: var(--muted); }
  .tt-no-filters { font-size: 12px; color: var(--muted); }
  .filter-list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .filter-list-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .filter-list .tt-active-filters { flex: 1 1 240px; }
  .tt-export, .tt-layout-reset { margin-left: auto; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--text); cursor: pointer; transition: background-color 140ms ease; font-family: inherit; white-space: nowrap; }
  .tt-export:hover, .tt-layout-reset:hover { background: var(--accent-soft); }
  .tt-layout-reset:not([hidden]) + .tt-export { margin-left: 0; }
  .tt-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-size: 11px; color: var(--muted); }
  .tt-legend-scale { display: grid; grid-template-columns: 1fr 1fr; width: 150px; font-size: 9px; font-weight: 700; }
  .tt-legend-scale span:nth-child(2) { text-align: right; }
  .tt-legend-scale i { grid-column: 1 / -1; height: 8px; margin-top: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--bad), var(--warning), var(--good)); }
  .tt-legend-blank { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; }
  .tt-legend-blank i { width: 12px; height: 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--card); }
  .tt-scroll { overflow: auto; max-height: 640px; }
  .tt-th { vertical-align: bottom; white-space: nowrap; }
  /* Moving and resizing a column, by mouse, finger or pen (trail-table.js). */
  .tt-grip { display: inline-block; margin-right: 4px; color: var(--muted); font-size: 11px; line-height: 1; vertical-align: bottom; cursor: grab; touch-action: none; user-select: none; }
  /* Inside its own header: every header is a sticky layer, and the next one covers what spills over. */
  .tt-resize { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 10px; cursor: col-resize; touch-action: none; }
  .tt-resize::after { content: ""; position: absolute; top: 22%; bottom: 22%; right: 0; width: 2px; border-radius: 2px; background: var(--border); transition: background-color 120ms ease; }
  .tt-resize:hover::after, .tt-resizing .tt-resize::after { background: var(--accent); }
  .tt-moving { opacity: 0.45; }
  .tt-moving .tt-grip { cursor: grabbing; }
  .tt-drop-marker { position: fixed; z-index: 60; width: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); pointer-events: none; }
  @media (hover: hover) {
    .tt-grip { opacity: 0; transition: opacity 120ms ease; }
    .tt-th:hover .tt-grip { opacity: 1; }
  }
  @media (pointer: coarse) {
    .tt-grip { padding: 6px 6px 6px 0; font-size: 13px; }
    .tt-resize { width: 16px; }
  }
  .tt-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; cursor: pointer; }
  .tt-sort:hover .tt-label { color: var(--text); }
  .tt-label { display: block; }
  .tt-unit { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .tt-th[aria-sort="ascending"] .tt-label::after { content: " \25B2"; color: var(--accent); }
  .tt-th[aria-sort="descending"] .tt-label::after { content: " \25BC"; color: var(--accent); }
  .tt-heading { display: inline-block; }
  .tt-filter-toggle { margin-left: 4px; padding: 0 4px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--muted); font-size: 10px; cursor: pointer; vertical-align: top; }
  .tt-filter-toggle:hover { border-color: var(--border); color: var(--text); }
  .tt-filter-toggle.active { background: var(--ink); color: var(--on-strong-color); }
  /* Where a pointer can hover, a column shows its filter button only when asked. */
  @media (hover: hover) {
    .tt-filter-toggle { opacity: 0; transition: opacity 120ms ease; }
    .tt-th:hover .tt-filter-toggle, .tt-filter-toggle:focus-visible, .tt-filter-toggle.active { opacity: 1; }
  }
  .tt-right { text-align: right; }
  .tt-table th { padding: 8px 12px; }
  .tt-table td { padding: 7px 12px; vertical-align: top; white-space: nowrap; }
  .tt-value { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
  .tt-heat { padding: 0 8px; border-radius: 999px; background: var(--cell-heat); color: var(--text); }
  .tt-table td small { display: block; max-width: 240px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; color: var(--muted); }
  .tt-table td.tt-index, .tt-table th.tt-index { width: 1%; padding-right: 8px; color: var(--muted); font-size: 11px; text-align: right; }
  .tt-table tr.tt-clickable { cursor: pointer; }
  .tt-table td.tt-empty { padding: 24px; text-align: center; color: var(--muted); }
  .tt-table td.tt-wrap { min-width: 240px; white-space: normal; }
  .tt-table td.tt-wrap .tt-value, .tt-table td.tt-wrap small { max-width: 560px; }
  .tt-clip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .tt-source, .tt-source summary { display: inline; cursor: pointer; }
  /* The row numbers and the frozen columns stay in view while the table scrolls
     sideways. Their background is opaque, so the cells scrolling under them
     do not show through. */
  .tt-index, .tt-frozen { position: sticky; z-index: 2; background: var(--card); }
  .tt-table tbody tr:hover td.tt-index, .tt-table tbody tr:hover td.tt-frozen { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
  th.tt-index, th.tt-frozen { z-index: 3; }
  .tt-index { left: 0; }
  .tt-frozen-1 { left: var(--tt-index-width, 0); }
  .tt-frozen-2 { left: calc(var(--tt-index-width, 0px) + var(--tt-frozen-1-width, 0px)); }
  /* A shadow on a table cell is not drawn when borders collapse, so the edge is
     shaded inside the last frozen cell. */
  .tt-frozen-last { --tt-edge: linear-gradient(270deg, color-mix(in srgb, var(--text) 10%, transparent), transparent 7px); background: var(--tt-edge), var(--card); }
  .tt-table tbody tr:hover td.tt-frozen-last { background: var(--tt-edge), linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
  @media (max-width: 600px) {
    .tt-index, .tt-frozen { left: auto; }
  }
  .tt-pages { display: flex; justify-content: flex-end; gap: 6px; padding-top: 12px; }
  .tt-pages[hidden] { display: none; }
  /* The filter under a column header. */
  .tt-popover { position: absolute; z-index: 50; width: 240px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-md); font-size: 12px; }
  .tt-popover-title { margin-bottom: 8px; font-weight: 700; color: var(--text); }
  .tt-filter { display: flex; flex-direction: column; gap: 8px; }
  .tt-filter input[type="text"], .tt-filter input[type="number"], .tt-filter input[type="date"] { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); color: var(--text); font: inherit; }
  .tt-filter label { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
  .tt-filter-actions { display: flex; gap: 6px; }
  .tt-filter-actions .btn-ghost, .tt-popover-clear { min-height: 0; padding: 4px 8px; font-size: 11px; }
  .tt-popover-clear { margin-top: 10px; }
  .tt-filter-values { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
  .tt-filter-values label { padding: 3px 4px; border-radius: 5px; cursor: pointer; }
  .tt-filter-values label span { flex: 1; }
  .tt-filter-values label small { color: var(--muted); }
  .tt-filter-values label:hover { background: var(--accent-soft); }
  .tt-filter-values input { accent-color: var(--ink); }
  .tt-filter-error { color: var(--danger); }

  .tf-toggle-group { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .tf-toggle { padding: 7px 12px; border: none; background: var(--card); color: var(--text); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
  .tf-toggle:not(:last-child) { border-right: 1px solid var(--border); }
  .tf-toggle.active { background: var(--ink); color: var(--on-strong-color); }
  .tf-toggle:hover:not(.active) { background: var(--accent-soft); }

  /* SPONSOR INTEL */
  .sponsor-result { display: none; }
  .sponsor-result.visible { display: block; }
  .sponsor-hero {
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .sponsor-hero h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); }
  .sponsor-hero .sub { font-size: 14px; color: var(--muted); }

  .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
  }

  /* Mobile dashboard containment
   * Several legacy dashboard sections use inline grid styles. Keep the audit
   * viewport honest by collapsing those grids on small screens and by allowing
   * dense table content to scroll inside its wrapper instead of widening the
   * whole document.
   */
  @media (max-width: 800px) {
    .page {
      width: 100%;
      max-width: 100%;
      padding: 16px 10px;
      overflow-x: clip;
    }
    .page > div[style*="display:grid"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .kpi-row {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .card, .kpi, .kpi-card {
      min-width: 0;
      max-width: 100%;
    }
  }

  @media (max-width: 480px) {
    .kpi-row {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .kpi,
    .kpi-card,
    .card {
      padding: 16px;
      border-radius: 12px;
    }
  }

  /* Chart.js global overrides */
  .chart-container { position: relative; height: 340px; }

  /* Data Sources coverage layout */
  .ds-coverage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
  }
  .ds-coverage-main { min-width: 0; }
  .ds-coverage-svg-wrap { overflow-x: auto; }
  .ds-coverage-caption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
  }
  .ds-coverage-side {
    display: grid;
    gap: 12px;
    align-content: start;
  }
  .ds-coverage-detail {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: left;
  }
  .ds-coverage-registry-grid {
    display: grid;
    gap: 10px;
  }
  .ds-coverage-note {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
  }
  @media (max-width: 1180px) {
    .ds-coverage-layout { grid-template-columns: 1fr; }
    .ds-coverage-registry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 800px) {
    .ds-coverage-registry-grid { grid-template-columns: 1fr; }
  }

  /* CRITERIA KPI (reuse kpi-row grid): a number, what it is out of, and a meter of that share */
  .criteria-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
  .kpi-card {
    --kpi-color: var(--accent);
    position: relative;
    overflow: hidden;
    padding: 18px 20px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--kpi-color) 14%, transparent), transparent 60%), var(--card);
    box-shadow: var(--shadow-sm);
    transition: transform 160ms ease, border-color 160ms ease;
  }
  .kpi-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kpi-color) 45%, var(--border)); }
  .kpi-inclusion { --kpi-color: var(--success); }
  .kpi-exclusion { --kpi-color: var(--danger); }
  .kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .kpi-value { margin: 6px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--text); font-variant-numeric: tabular-nums; }
  .kpi-note { min-height: 16px; font-size: 12px; color: var(--muted); }
  .kpi-meter { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--kpi-color) 14%, transparent); }
  .kpi-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--kpi-color); transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  @media (max-width: 900px) {
    .criteria-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 480px) {
    .criteria-kpis { gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 22px; }
  }

  /* RANKED BARS: components/badges.js horizontalBarList */
  .bar-list { display: flex; flex-direction: column; gap: 2px; }
  .bar-list-row { display: grid; grid-template-columns: var(--bar-label-width) minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; }
  .bar-list-badges .bar-list-row { grid-template-columns: var(--bar-label-width) 76px minmax(0, 1fr) auto; }
  button.bar-list-row { cursor: pointer; transition: background-color 120ms ease; }
  button.bar-list-row:hover { background: var(--accent-soft); }
  button.bar-list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .bar-list-row.active { background: color-mix(in srgb, var(--bar-color) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar-color) 60%, transparent); }
  .bar-list-label { overflow: hidden; font-size: 12px; font-weight: 600; color: var(--text); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .bar-list-badge { justify-self: start; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--bar-color) 16%, transparent); color: var(--bar-color); font-size: 10px; font-weight: 700; white-space: nowrap; }
  .bar-list-track { height: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border) 60%, transparent); }
  .bar-list-track i { display: block; width: var(--bar-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 45%, transparent), var(--bar-color)); transform-origin: left; animation: bar-list-grow 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--bar-index) * 25ms); }
  .bar-list-value { display: flex; flex-direction: column; align-items: flex-end; min-width: 52px; font-size: 11px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
  .bar-list-value small { color: var(--muted); font-size: 10px; }
  .bar-list-note { margin: 12px 6px 0; font-size: 12px; color: var(--muted); }
  @keyframes bar-list-grow { from { transform: scaleX(0); } }
  @media (prefers-reduced-motion: reduce) {
    .bar-list-track i { animation: none; }
    .kpi-meter i, .kpi-card { transition: none; }
  }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
  body.auth-pending { opacity: 1; }
  body.auth-ready { opacity: 1; transition: opacity 0.2s; }

/* TOAST NOTIFICATIONS */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 380px;
  cursor: pointer;
  animation: toast-in 0.25s ease-out;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast-exit {
  animation: toast-out 0.3s ease-in forwards;
}
.toast-error {
  background: color-mix(in srgb, var(--danger) 12%, var(--card));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}
.toast-success {
  background: color-mix(in srgb, var(--success) 12%, var(--card));
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}
.toast-info {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--text);
  border: 1px solid var(--border);
}
.toast-warn {
  background: color-mix(in srgb, var(--status-warn) 12%, var(--card));
  color: var(--status-warn);
  border: 1px solid color-mix(in srgb, var(--status-warn) 20%, transparent);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* REUSABLE COMPONENT CLASSES */

/* Badges */
.badge-ticker {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}
.badge-criterion-type {
  font-weight: 600;
  font-size: 11px;
}

/* Distribution bar (high/med/low segments) */
/* The label, the bar and the legend, side by side while all three fit and
   stacked when they do not. Without the wrap the bar kept its fixed length and
   pushed the row past the edge of its card: at a 400px viewport the rows
   measured 466px, 488px and 585px inside a 346px card. */
.dist-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
/* Two bars over the same rows must be the same length. Sharing the row with a
   legend of whatever length the data produced made one bar 256px and the other
   202px on the same screen, both of them 100% of their own rows. */
.dist-bar-fixed {
  flex: 0 0 auto;
  display: flex;
  width: min(340px, 100%);
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
}
.dist-bar-segment {
  flex: 0 0 auto;
  height: 100%;
  min-width: 2px;
  transition: width 0.3s ease;
}
.dist-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
}
.dist-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
}

/* Coverage cards */

/* Intel entity link */
.intel-entity-link { text-decoration: none; color: inherit; }
.intel-entity-link:hover { color: var(--accent); }

/* The theme toggle names the theme it switches to. */
[data-theme="dark"] .theme-toggle .to-dark,
[data-theme="light"] .theme-toggle .to-light { display: none; }

/* CHANGE PASSWORD */

.password-dialog {
  width: min(360px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--card);
}
.password-dialog::backdrop { background: rgba(0, 0, 0, 0.3); }
.password-dialog h2 { margin: 0 0 16px; font-size: 16px; }
.password-dialog label { display: grid; gap: 4px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.password-dialog input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font: inherit;
  font-size: 14px;
}
.password-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.password-dialog-actions .nav-action { width: auto; }