/* ═══════════════════════════════════════════════════════════════
   INTO THE PAST — MCRO Temporal Architecture Explorer
   Sans throughout. Dark mode only. Site palette inherited.
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* Surfaces */
  --bg:           #0c0c12;
  --bg-surface:   #161622;
  --bg-hover:     #1c1c2a;
  --bg-elev:      #1f1f30;
  --bg-panel:     #12121c;

  /* Borders */
  --border:       rgba(58,134,186,0.55);
  --border-dim:   #1e1e2e;
  --border-hair:  #e1d9eb1f;

  /* Text */
  --text:         #e1d9eb;
  --text-bright:  #f0f0f0;
  --text-mute:    #e1d9eb99;
  --text-dim:     #e1d9eb66;
  --text-muted:   #707070;

  /* Semantic encoding */
  --blue:         #3a86ba;    /* MN institutional / procedural */
  --gold:         #ffb732;    /* CR competency axis */
  --salmon:       #ff5545;    /* MH treatment axis */
  --teal:         #2de0b6;    /* rare positive / focus outline */
  --purple:       #a77bdb;    /* secondary accent */

  /* Search window tint */
  --sw-fill:      rgba(58, 134, 186, 0.12);
  --sw-stroke:    rgba(58, 134, 186, 0.55);
  --sw-fill-lite: rgba(58, 134, 186, 0.06);

  /* Typography */
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', 'Consolas', 'SF Mono', monospace;

  /* Sizing */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sharp: 0 1px 0 rgba(0,0,0,0.3);
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at center top, rgba(58,134,186,0.18), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 600px;
  background-position: top center;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; transition: color 120ms; }
a:hover { color: var(--text-bright); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(225, 217, 235, 0.07);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text);
}

button { font-family: inherit; }

/* ── Site bar ─────────────────────────────────────────────── */
.site-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: rgba(17, 17, 25, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.bar-brand {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--salmon); letter-spacing: 5px; text-transform: uppercase;
}
.bar-brand:hover { color: #ff7766; }
.bar-sep { color: var(--text-muted); font-size: 16px; }
.bar-section {
  font-family: var(--mono); font-size: 12px;
  color: var(--text); letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 500;
}
.bar-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.bar-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--text-mute); text-transform: uppercase; font-weight: 500;
}
.bar-link:hover { color: var(--salmon); }

/* ── Masthead — hidden by default to keep the chart at the top of the
   viewport. The page stats it once showed are also rendered below the
   chart title (#viz-stats) and in the mast-lede-style footer text,
   so no information is lost. If you want to surface it again on a
   specific view, set display: block on body. ───────────────────── */
.masthead { display: none; }
.masthead {
  position: relative;
  padding: 68px 28px 58px;
  border-bottom: 2px solid var(--border-hair);
  text-align: center;
}
.mast-inner {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #4eecc8;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 8px 22px;
  border: 1px solid rgba(78,236,200,0.45);
  border-radius: 4px;
  background: var(--bg);
  margin-bottom: 24px;
}
.masthead h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.08; letter-spacing: -0.03em;
  color: var(--text-bright);
  margin: 0 auto 20px;
  max-width: none;
}
.mast-lede {
  font-size: 17px; line-height: 1.75; color: var(--text);
  max-width: 720px; margin: 0 auto 12px;
}
.mast-lede .n {
  color: #4eecc8; font-weight: 700; white-space: nowrap;
}
.mast-subline {
  font-size: 14px; color: var(--text-mute); max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}
.mast-subline strong { color: var(--text); font-weight: 600; }
.mast-subline .n { color: var(--text); font-weight: 600; }

/* ── Controls ─────────────────────────────────────────────── */
.controls {
  padding: 10px 28px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-hair);
  position: sticky; top: 49px; z-index: 50;
  /* The site-nav uses a 0.25s transform transition to slide itself up
     and down on scroll. The .controls ride along with the same animation
     so they always sit flush against the bottom of the nav instead of
     flipping `top` instantly (which caused the controls to briefly
     disappear behind the nav during rapid scroll reversals). */
  transition: transform 0.25s ease;
  will-change: transform;
}
/* When the nav hides itself on scroll (`sn-hidden` on <body>), shift the
   controls up by the nav's height so they stay stuck to its bottom edge.
   Once both transitions finish, the chart has the full viewport top. */
body.sn-hidden .controls { transform: translateY(-49px); }

.ctrl-grid { max-width: 1720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ctrl-row {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
}
.ctrl-row--scope { gap: 8px 20px; row-gap: 8px; }
.ctrl-row--chips { gap: 6px 20px; row-gap: 6px; }
.ctrl-row--tools { gap: 12px 24px; align-items: flex-start; }
.ctrl-row--quickviews { align-items: center; }

.ctrl-group { display: flex; align-items: center; gap: 8px; }
.ctrl-group--right { margin-left: auto; }
.ctrl-group--search { flex: 1 1 220px; max-width: 320px; }
.ctrl-group--density { gap: 6px; }
.ctrl-group--checkboxes { gap: 10px; margin-left: auto; }
.ctrl-group--daterange {
  /* Was width:100% — date range now shares its row with quick views. Give
     it a flex-basis so it gets decent space but can shrink as needed. */
  flex: 1 1 420px;
  min-width: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ctrl-group--quickviews {
  flex: 1 1 520px;
  min-width: 320px;
  align-items: center;
  gap: 10px;
}
.ctrl-group--quickviews .qv-chips { flex: 1 1 auto; }

.ctrl-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--text-mute); text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.ctrl-hint {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-muted); text-transform: none; letter-spacing: 0;
  margin-left: 4px;
}

/* Segmented control */
.segmented {
  display: inline-flex; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px; gap: 2px;
}
.seg {
  appearance: none; background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--text-mute);
  padding: 6px 14px; border-radius: 3px;
  transition: background 140ms, color 140ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.seg:hover { color: var(--text); background: var(--bg-hover); }
.seg.active {
  background: var(--bg-elev); color: var(--text-bright);
  box-shadow: inset 0 0 0 1px var(--border-hair);
}
.segmented--small .seg { padding: 5px 10px; font-size: 15px; }
.seg-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.5px;
  padding: 1px 6px; background: var(--bg-hover); border-radius: 2px;
}
.seg.active .seg-n { color: var(--teal); background: rgba(45, 224, 182, 0.08); }

/* Text input */
.text-input {
  appearance: none; width: 100%;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px;
  font-family: var(--sans); font-size: 13px; color: var(--text);
  transition: border-color 140ms, box-shadow 140ms;
}
.text-input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 224, 182, 0.12);
}
.text-input::placeholder { color: var(--text-muted); }

/* Select */
.select {
  appearance: none; background: var(--bg-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23e1d9eb99' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") right 10px center/10px no-repeat;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 28px 7px 10px;
  font-family: var(--sans); font-size: 13px; color: var(--text);
  cursor: pointer;
  transition: border-color 140ms;
}
.select:hover { border-color: var(--border-hair); }
.select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(45, 224, 182, 0.12); }
.select option { background: var(--bg-panel); color: var(--text); }

/* Checkbox */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
  width: 16px; height: 16px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms, border-color 140ms;
  flex-shrink: 0; position: relative;
}
.check input:checked + .check-box { background: var(--teal); border-color: var(--teal); }
.check input:checked + .check-box::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px);
}
.check input:focus-visible + .check-box { box-shadow: 0 0 0 3px rgba(45, 224, 182, 0.18); }
.check-lbl { font-size: 13px; color: var(--text-mute); }

/* Chips (multi-select toggle) */
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid #2a2a3c;
  padding: 5px 11px; border-radius: 999px;
  transition: background 140ms, color 140ms, border-color 140ms;
  display: inline-flex; align-items: center; gap: 7px;
}
.chip:hover { color: var(--text); background: var(--bg-hover); }
.chip.active {
  color: var(--text-bright); background: var(--bg-elev);
  border-color: var(--border-hair);
}
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--blue));
  display: inline-block;
}
.chip:not(.active) .chip-dot { opacity: 0.4; }

/* Quick views */
.qv-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.qv {
  appearance: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--text-mute);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 6px 11px; border-radius: var(--radius);
  transition: all 140ms;
  display: inline-flex; align-items: center; gap: 7px;
}
.qv:hover { color: var(--text-bright); border-color: var(--teal); background: var(--bg-hover); }
.qv.active {
  color: var(--text-bright); background: rgba(45, 224, 182, 0.08);
  border-color: var(--teal);
}
.qv-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--gold); background: rgba(255, 183, 50, 0.1);
  padding: 1px 6px; border-radius: 2px; letter-spacing: 0.5px;
}
.qv-reset { margin-left: 4px; color: var(--text-muted); }
.qv-reset:hover { color: var(--salmon); border-color: var(--salmon); }

/* Share + collapse buttons */
.btn-share, .btn-collapse {
  appearance: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--text-mute);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 7px 14px; border-radius: var(--radius);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 140ms;
}
.btn-share:hover, .btn-collapse:hover { color: var(--text-bright); border-color: var(--teal); }
.btn-share.copied { color: var(--teal); border-color: var(--teal); background: rgba(45, 224, 182, 0.08); }
.btn-icon { font-size: 14px; }

/* Collapse chevron rotates */
.btn-collapse-chev {
  font-size: 11px;
  transition: transform 180ms;
  display: inline-block;
}
.btn-collapse-label[data-when="closed"] { display: none; }

/* ── Panel modes: open / collapsed / hidden ──────────────── */
/* open (default) — full controls visible, no changes needed */

/* collapsed — only the scope row is visible, every other row hides */
body[data-panel-mode="collapsed"] .btn-collapse-chev { transform: rotate(180deg); }
body[data-panel-mode="collapsed"] .btn-collapse-label[data-when="open"]   { display: none; }
body[data-panel-mode="collapsed"] .btn-collapse-label[data-when="closed"] { display: inline; }
body[data-panel-mode="collapsed"] .controls .ctrl-row:not(.ctrl-row--scope) { display: none; }
body[data-panel-mode="collapsed"] .controls .adv-panel { display: none; }
body[data-panel-mode="collapsed"] .controls .active-crumbs { display: none; }
body[data-panel-mode="collapsed"] .controls { padding-bottom: 14px; }

/* hidden — entire controls strip + masthead disappear, tiny reopen button
   floats in the upper-left. Maximum chart real-estate. */
body[data-panel-mode="hidden"] .controls { display: none; }
body[data-panel-mode="hidden"] .masthead { display: none; }
body[data-panel-mode="hidden"] .primary   { padding-top: 18px; }
body[data-panel-mode="hidden"] { --chart-vh-subtract: 64px; }

/* Small slide-off arrow button shown only when collapsed */
.btn-hide-all {
  display: none;
  appearance: none; cursor: pointer;
  font-family: var(--sans); font-size: 18px; line-height: 1;
  color: var(--text-mute);
  background: var(--bg-panel); border: 1px solid var(--border);
  width: 30px; height: 30px; border-radius: var(--radius);
  padding: 0;
  transition: all 140ms;
}
.btn-hide-all:hover { color: var(--text-bright); border-color: var(--teal); background: var(--bg-hover); }
body[data-panel-mode="collapsed"] .btn-hide-all { display: inline-flex; align-items: center; justify-content: center; }

/* Floating reopen button — only visible when hidden */
.panel-reopen {
  position: fixed;
  top: 58px; left: 14px;
  z-index: 70;
  display: none;
  appearance: none; cursor: pointer;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-hair);
  width: 40px; height: 40px; border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: all 140ms;
  align-items: center; justify-content: center;
}
.panel-reopen:hover { color: var(--text-bright); border-color: var(--teal); background: var(--bg-hover); }
.panel-reopen-icon { font-size: 18px; line-height: 1; }
body[data-panel-mode="hidden"] .panel-reopen { display: inline-flex; }

/* Advanced panels */
.adv-panel {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.adv-sum {
  list-style: none; cursor: pointer; user-select: none;
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  transition: background 140ms;
}
.adv-sum::-webkit-details-marker { display: none; }
.adv-sum::before {
  content: '▸'; color: var(--text-muted); font-size: 10px; width: 12px;
  transition: transform 140ms;
}
.adv-panel[open] .adv-sum::before { transform: rotate(90deg); }
.adv-sum:hover { background: var(--bg-hover); }
.adv-sum-lbl {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--text); text-transform: uppercase; letter-spacing: 1.5px;
}
.adv-sum-hint { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
.adv-body {
  padding: 10px 16px 14px; border-top: 1px solid var(--border-dim);
  display: flex; flex-direction: column; gap: 14px;
}

/* Category panel layout */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px 18px;
}
.cat-group-title {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c, var(--text)); margin-bottom: 6px;
}
.cat-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 3px 4px; border-radius: 3px;
  font-size: 13px; color: var(--text-mute);
  transition: background 140ms, color 140ms;
}
.cat-item:hover { color: var(--text); background: var(--bg-hover); }
.cat-item.active { color: var(--text-bright); }
.cat-item.inactive { color: var(--text-dim); }
.cat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--text-muted)); flex-shrink: 0;
}
.cat-code {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-muted); min-width: 52px;
}
.cat-n {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-muted); margin-left: auto;
}
.cat-actions {
  display: flex; gap: 8px; margin-bottom: 4px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-dim);
}
.cat-btn {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-mute); background: transparent;
  border: 1px solid var(--border); cursor: pointer;
  padding: 4px 10px; border-radius: 3px; transition: all 140ms;
}
.cat-btn:hover { color: var(--text); border-color: var(--text-mute); }
.cat-launch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius);
  background: rgba(58, 134, 186, 0.1);
  border: 1px solid var(--blue);
  color: var(--text-bright); font-size: 12px; font-weight: 500;
  text-decoration: none; transition: background 140ms;
  margin-top: 8px;
}
.cat-launch:hover { background: rgba(58, 134, 186, 0.2); color: var(--text-bright); }
.cat-launch-arrow { color: var(--blue); }

/* Case-set panel */
.cs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}
.cs-item {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 6px; border-radius: 3px;
  font-size: 13px; color: var(--text-mute);
  transition: background 140ms, color 140ms;
}
.cs-item:hover { background: var(--bg-hover); color: var(--text); }
.cs-item .check-box { width: 14px; height: 14px; }
.cs-n { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-left: auto; }
.cs-name {
  font-family: var(--mono); font-size: 12px;
  color: var(--text-mute);
}
.cs-item.active .cs-name { color: var(--text); }

/* Active crumbs */
.active-crumbs {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px;
}
.active-crumbs:empty { display: none; }
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  padding: 3px 5px 3px 8px;
  background: rgba(45, 224, 182, 0.1); color: var(--teal);
  border: 1px solid rgba(45, 224, 182, 0.3);
  border-radius: 3px;
}
.crumb-x {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--teal); font-size: 14px; line-height: 1;
  padding: 0 4px; border-radius: 2px; opacity: 0.7;
}
.crumb-x:hover { opacity: 1; background: rgba(45, 224, 182, 0.15); }

/* Date range (custom dual slider) */
.date-range {
  position: relative; height: 32px; width: 100%;
}
.dr-track {
  position: absolute; top: 14px; height: 4px; left: 0; right: 0;
  background: var(--bg-panel); border-radius: 2px;
  border: 1px solid var(--border);
}
.dr-range {
  position: absolute; top: 14px; height: 4px;
  background: var(--teal); border-radius: 2px;
  pointer-events: none;
}
.dr-thumb {
  position: absolute; top: 7px; width: 18px; height: 18px; margin-left: -9px;
  background: var(--text-bright); border-radius: 50%;
  cursor: ew-resize; box-shadow: 0 0 0 1px var(--teal), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 140ms, box-shadow 140ms;
  z-index: 2;
}
.dr-thumb:hover, .dr-thumb.dragging { transform: scale(1.15); box-shadow: 0 0 0 2px var(--teal), 0 3px 8px rgba(0,0,0,0.5); }
.dr-axis {
  position: absolute; bottom: 0; left: 0; right: 0; height: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--text-muted);
  pointer-events: none;
}
.dr-tick { position: absolute; transform: translateX(-50%); }

/* ── Primary chart ───────────────────────────────────────── */
.primary {
  padding: 32px 28px 16px; max-width: none;
}
.primary-head { max-width: 1720px; margin: 0 auto 18px; }
.viz-h2 {
  font-family: var(--sans); font-size: 24px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text-bright); margin-bottom: 6px;
}
.viz-h2-sub {
  font-size: 14px; color: var(--text-mute); margin-bottom: 10px;
  max-width: 80ch;
}
.lg-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--text)); vertical-align: middle; margin: 0 2px 2px 4px;
}
.lg-dot--teal { outline: 1px solid var(--teal); outline-offset: 1px; background: transparent; }
.viz-h2-stats {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  padding: 14px 16px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-top: 14px;
}
.viz-h2-stats:empty { display: none; }
.vs-item { display: flex; flex-direction: column; gap: 2px; }
.vs-n {
  font-family: var(--mono); font-size: 20px; font-weight: 600;
  color: var(--text-bright); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vs-lbl {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: 1.5px; text-transform: uppercase;
}

.chart-wrap {
  /* No max-width cap — the chart fills whatever the .primary container
     gives it (full viewport width minus 28px side-padding). Users on
     ultrawide monitors get a chart that spans the whole width by default.
     A custom pixel override, set via the Viewer Size panel, applies an
     inline width:Npx here. */
  margin: 0 auto;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  position: relative;
}
.chart-axis {
  height: 30px; position: relative; border-bottom: 1px solid var(--border-dim);
  background: var(--bg-panel);
}
.chart-axis--bottom { border-bottom: none; border-top: 1px solid var(--border-dim); }
.chart-axis .tick {
  position: absolute; top: 6px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.5px;
}
.chart-axis .tick-line {
  position: absolute; top: 24px; width: 1px; height: 6px;
  background: var(--border);
}
.chart-axis--bottom .tick { top: 10px; }
.chart-axis--bottom .tick-line { top: 0; }
.chart-axis .sw-label {
  position: absolute; top: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--blue);
  letter-spacing: 0.5px; transform: translateX(-50%);
  text-transform: uppercase; font-weight: 600;
}
/* --chart-vh controls the viewport's available height. Defaults to
   viewport minus the site-bar + full controls + masthead. Shrinks the
   subtrahend when the control panel is collapsed, and can be overridden
   inline (custom pixel height) or via the seed-vs-full scope. */
:root {
  --chart-vh-subtract: 140px;
  --chart-vh: calc(100vh - var(--chart-vh-subtract));
}
body[data-panel-mode="collapsed"] { --chart-vh-subtract: 88px; }

.chart-viewport {
  position: relative; width: 100%;
  overflow-y: auto; overflow-x: hidden;
  max-height: var(--chart-vh);
  min-height: 340px;
}
.chart-viewport.scope-seed { overflow-y: hidden; max-height: none; }
.chart-viewport.scope-full { max-height: var(--chart-vh); }

.chart-viewport #chart-canvas {
  display: block; width: 100%; height: auto;
}
.chart-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.chart-legend-row {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  padding: 10px 18px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-dim);
  font-family: var(--mono); font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.5px;
}
.lg-item { display: inline-flex; align-items: center; gap: 8px; }
.lg-box { display: inline-block; width: 22px; height: 10px; border-radius: 2px; }
.lg-box--sw { background: var(--sw-fill); outline: 1px solid var(--sw-stroke); }
.lg-perf { margin-left: auto; color: var(--text-muted); }
.lg-perf.warn { color: var(--gold); }

/* Chart tooltip */
.chart-tip {
  position: fixed; z-index: 40; pointer-events: none; opacity: 0;
  max-width: 320px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  font-size: 13px; color: var(--text);
  transition: opacity 120ms;
}
.chart-tip.visible { opacity: 1; }
.tt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tt-row--id { gap: 10px; margin-bottom: 4px; }
.tt-cid {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 1px 5px; background: var(--bg-hover); color: var(--text);
  border-radius: 2px; letter-spacing: 0.5px;
}
.tt-name { font-weight: 600; color: var(--text-bright); font-size: 14px; }
.tt-row--span {
  font-family: var(--mono); font-size: 12px; color: var(--text-mute);
  margin-bottom: 4px;
}
.tt-sep { color: var(--text-muted); }
.tt-span-yrs { color: var(--text); }
.tt-row--funnel {
  gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--text-mute);
  padding-top: 6px; border-top: 1px solid var(--border-dim); margin-top: 4px;
}
.tt-funnel-lbl { letter-spacing: 0.5px; }
.tt-funnel { display: inline-flex; gap: 4px; }
.tt-f {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); opacity: 0.5;
}
.tt-f--inc { background: var(--gold); }
.tt-f--ord_c { background: var(--salmon); }
.tt-f--ord_n { background: var(--salmon); outline: 1px solid var(--salmon); outline-offset: 1px; }
.tt-f--ord_e { background: var(--salmon); outline: 2px solid var(--salmon); outline-offset: 2px; }
.tt-f:not(.on) { opacity: 0.2; background: var(--border); outline: none; }
.tt-escalation-lbl { color: var(--text); font-weight: 500; }
.tt-row--sets {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  margin-top: 4px; gap: 4px;
}

/* ── Secondary charts ────────────────────────────────────── */
.secondary {
  padding: 16px 28px 32px;
  border-bottom: 1px solid var(--border-hair);
}
.sec-grid {
  max-width: 1720px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.sec-chart {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px 20px;
}
.sec-h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--text-bright); margin-bottom: 4px; letter-spacing: -0.005em;
}
.sec-sub {
  font-size: 12px; color: var(--text-mute); margin-bottom: 14px;
  line-height: 1.45;
}
.sec-body { min-height: 160px; position: relative; }

/* Bar rows */
.bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; cursor: pointer;
  border-radius: 3px; transition: background 140ms;
}
.bar-row:hover { background: var(--bg-hover); }
.bar-row.filtered { background: rgba(45, 224, 182, 0.08); }
.bar-label {
  width: 92px; font-family: var(--mono); font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.5px; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}
.bar-row.filtered .bar-label { color: var(--teal); }
.bar-track {
  flex: 1; height: 18px; position: relative;
  background: var(--bg-hover); border-radius: 2px; overflow: hidden;
}
.bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--c, var(--blue));
  transition: width 240ms cubic-bezier(.4,0,.2,1);
}
.bar-row.zero .bar-fill {
  background: transparent; outline: 1px dashed var(--border-hair);
  outline-offset: -1px;
}
.bar-n {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text); min-width: 46px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-row.zero .bar-n { color: var(--text-muted); }
.bar-annot {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.5px; margin-left: 8px;
  font-style: italic;
}

/* Stacked bar (case-type mix) */
.stack-bar { display: flex; height: 32px; border-radius: 3px; overflow: hidden; }
.stack-seg {
  position: relative; cursor: pointer;
  transition: filter 140ms;
}
.stack-seg:hover { filter: brightness(1.15); }
.stack-seg.filtered { outline: 1px solid var(--teal); outline-offset: -1px; }
.stack-legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.stack-lg-item { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-mute); }
.stack-lg-item.filtered { color: var(--teal); }
.stack-lg-box { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.stack-lg-n { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 600; }
.stack-lg-pct { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-left: 2px; }

.sec-note {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  font-family: var(--mono); letter-spacing: 0.2px;
}
.sec-note strong { color: var(--text-mute); font-weight: 500; }

/* ── Footer ──────────────────────────────────────────────── */
.page-footer { padding: 22px 28px 24px; background: var(--bg-surface); }
.footer-inner {
  max-width: 1720px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 48px;
}
.fn-line {
  font-size: 14px; color: var(--text-mute); line-height: 1.6;
  margin: 0;
}
.fn-line strong { color: var(--text); font-weight: 600; }
.fn-link { color: var(--blue); }
.fn-link:hover { color: var(--text-bright); }

@media (max-width: 920px) {
  .footer-inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Detail panel ────────────────────────────────────────── */
.detail-panel {
  /* Start below the sticky site-bar (49 px tall). Keeps the X button
     + ESC hint clear of the site-bar header. */
  position: fixed; top: 49px; right: 0; bottom: 0; width: 440px;
  background: var(--bg-surface); border-left: 1px solid var(--border);
  z-index: 60;
  transform: translateX(100%); transition: transform 220ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}
.detail-panel[aria-hidden='false'] { transform: translateX(0); }

.dp-head {
  padding: 30px 20px 18px;
  display: flex; gap: 12px; align-items: flex-start;
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-panel);
}
.dp-head-inner { flex: 1; min-width: 0; }
.dp-tag { margin-bottom: 4px; }
.dp-cluster-id {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text); padding: 2px 8px;
  background: var(--bg-hover); border-radius: 2px;
}
.dp-cluster-name {
  font-family: var(--sans); font-size: 22px; font-weight: 600;
  color: var(--text-bright); line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  word-break: break-word;
}
.dp-meta {
  font-family: var(--mono); font-size: 12px; color: var(--text-mute);
  line-height: 1.45;
}
.dp-close-wrap {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-top: 2px;
}
.dp-close {
  appearance: none; background: transparent; border: none;
  color: var(--text-mute); cursor: pointer;
  font-size: 28px; line-height: 1; padding: 2px 10px;
  border-radius: 3px; transition: color 140ms, background 140ms;
}
.dp-close:hover { color: var(--text); background: var(--bg-hover); }
.dp-close-hint {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase; font-weight: 500;
  line-height: 1;
}

.dp-body { flex: 1; overflow-y: auto; padding: 16px 20px 28px; }
.dp-sect { margin-bottom: 20px; }
.dp-sect-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  font-weight: 600; margin-bottom: 10px;
}

.dp-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 3px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.5px;
  background: rgba(225, 217, 235, 0.06);
  color: var(--text-mute);
}
.dp-badge.b-cr-inc { color: var(--gold); background: rgba(255, 183, 50, 0.1); }
.dp-badge.b-mh-c { color: var(--salmon); background: rgba(255, 85, 69, 0.1); }
.dp-badge.b-mh-n { color: var(--salmon); background: rgba(255, 85, 69, 0.15); }
.dp-badge.b-mh-e { color: var(--salmon); background: rgba(255, 85, 69, 0.2); font-weight: 600; }
.dp-badge.b-rcv { color: var(--teal); background: rgba(45, 224, 182, 0.1); }
.dp-badge.b-recommit, .dp-badge.b-discrev, .dp-badge.b-fn { color: var(--text); }

.dp-filings-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--radius);
  background: rgba(58, 134, 186, 0.1);
  border: 1px solid var(--blue);
  color: var(--text-bright); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background 140ms;
  gap: 10px;
}
.dp-filings-btn:hover { background: rgba(58, 134, 186, 0.2); color: var(--text-bright); }
.dp-filings-note {
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px dashed var(--border);
  font-size: 12px; color: var(--text-mute); line-height: 1.5;
}
.dp-filings-note strong { color: var(--text); }

.dp-mini-timeline {
  position: relative; height: 14px; background: var(--bg-panel);
  border-radius: 2px; border: 1px solid var(--border);
  margin-bottom: 8px; overflow: hidden;
}
.dp-mini-dot {
  position: absolute; top: 5px; width: 3px; height: 3px;
  background: var(--c, var(--text-mute)); border-radius: 50%;
}
.dp-mini-sw {
  position: absolute; top: 0; height: 100%;
  background: var(--sw-fill); border-left: 1px solid var(--sw-stroke);
  border-right: 1px solid var(--sw-stroke);
}
.dp-mini-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  margin-bottom: 14px;
}

.dp-cases { display: flex; flex-direction: column; gap: 2px; }
.dp-case {
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--border-dim);
  transition: border-color 140ms, background 140ms;
  cursor: pointer;
}
.dp-case:hover { border-color: var(--border); background: var(--bg-hover); }
.dp-case.expanded { border-color: var(--teal); }
.dp-case-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dp-case-id {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text-bright);
}
.dp-case-id:hover { color: var(--teal); }
.dp-case-type {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 2px;
  background: rgba(225, 217, 235, 0.08);
  color: var(--text-mute); letter-spacing: 0.5px;
}
.dp-case-type.t-cr { background: rgba(255, 183, 50, 0.12); color: var(--gold); }
.dp-case-type.t-mh { background: rgba(255, 85, 69, 0.12); color: var(--salmon); }
.dp-case-type.t-gc { background: rgba(58, 134, 186, 0.12); color: var(--blue); }
.dp-case-status {
  font-family: var(--mono); font-size: 11px;
  padding: 1px 6px; border-radius: 2px;
  color: var(--text-muted); letter-spacing: 0.5px;
  border: 1px solid var(--border);
}
.dp-case-status.s-open { color: var(--salmon); border-color: rgba(255, 85, 69, 0.3); }
.dp-case-dates {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
}
.dp-case-n {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  font-weight: 600; margin-left: 4px;
}
.dp-case-launch {
  font-family: var(--mono); font-size: 14px; color: var(--blue);
  margin-left: 8px;
}
.dp-case-expand { margin-top: 8px; display: none; }
.dp-case.expanded .dp-case-expand { display: block; }
.dp-mini-case {
  position: relative; height: 12px; background: var(--bg);
  border-radius: 2px; margin-top: 4px; overflow: hidden;
}

.dp-ext-links {
  display: flex; flex-direction: column; gap: 6px;
}
.dp-ext-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--border-dim);
  color: var(--text-mute); font-size: 12px; font-family: var(--mono);
  letter-spacing: 0.5px; text-decoration: none;
  transition: all 140ms;
}
.dp-ext-link:hover { border-color: var(--teal); color: var(--text); }
.dp-ext-link span.ext-count {
  font-weight: 600; color: var(--text);
}

/* ── Viewer size (#3a) ───────────────────────────────────── */
.size-inputs { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.size-field { display: flex; flex-direction: column; gap: 6px; }
.size-field-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase; font-weight: 500;
}
.size-field-input-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2px 10px 2px 2px;
  transition: border-color 140ms, box-shadow 140ms;
}
.size-field-input-wrap:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(45, 224, 182, 0.12); }
.size-input {
  appearance: none;
  background: transparent; border: none; outline: none;
  padding: 6px 8px; width: 90px;
  font-family: var(--mono); font-size: 13px; color: var(--text);
  text-align: right;
}
.size-input::-webkit-outer-spin-button, .size-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.size-input[type=number] { -moz-appearance: textfield; }
.size-unit { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.size-presets {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-left: 8px;
}
.size-preset-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase; font-weight: 500;
  margin-right: 4px;
}
.size-preset {
  appearance: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--text-mute); background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 5px 9px; border-radius: var(--radius);
  transition: all 140ms;
}
.size-preset:hover { color: var(--text-bright); border-color: var(--teal); background: var(--bg-hover); }
.size-preset[data-reset] { color: var(--text-muted); }
.size-preset[data-reset]:hover { color: var(--salmon); border-color: var(--salmon); }
.size-help {
  width: 100%;
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin-top: 6px;
}
.size-help em { color: var(--text-mute); font-style: normal; font-weight: 500; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .sec-chart:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .masthead { padding: 48px 20px 42px; }
  .controls { padding: 20px 20px 18px; }
  .primary { padding: 24px 20px 12px; }
  .secondary { padding: 14px 20px 28px; }
  .sec-grid { grid-template-columns: 1fr; }
  .sec-chart:nth-child(3) { grid-column: 1; }
  .bar-nav { display: none; }
  .detail-panel { width: 100%; max-width: 100vw; }
  .ctrl-row { gap: 12px 20px; }
  .ctrl-group--right { margin-left: 0; }
  .ctrl-row--scope { flex-wrap: wrap; }
  .masthead h1 { font-size: 40px; }
}

/* ── Accessibility ───────────────────────────────────────── */
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.chip:focus-visible, .qv:focus-visible, .seg:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Loading shimmer */
.loading {
  position: relative;
  background: linear-gradient(90deg, var(--bg-panel) 0%, var(--bg-hover) 50%, var(--bg-panel) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Print */
@media print {
  .site-bar, .controls, .detail-panel, .chart-tip { display: none; }
  body { background: white; color: black; }
}

/* ═══════════════════════════════════════════════════════════════
   Top-bar dropdown triggers (top-left of the control strip)
   Three compact <details> buttons stacked vertically on the very left.
   When one opens, its body drops DOWN as a narrow left-aligned overlay
   positioned absolutely against .controls — the chart below stays
   full-width and most of it remains visible to the right of the dropdown.
   Replaces the old inline <details class="adv-panel"> panels that used
   to cover the entire chart when expanded.
   ═══════════════════════════════════════════════════════════════ */

.ctrl-layout {
  /* No max-width here — the triggers must always sit flush against the
     .controls padding so the dropdown body (anchored at left: 28px of
     .controls) lines up with them on any viewport width. The existing
     max-width cap is re-applied to .ctrl-grid below to keep chip rows
     from stretching across ultrawide monitors. */
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ctrl-layout > .ctrl-grid {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1720px;   /* preserve existing chip-row cap */
  margin: 0;           /* override prior margin: 0 auto */
}

/* Left column: three compact trigger buttons, stacked vertically.
   Fixed width so the three <details> align even when hint text wraps. */
.ctrl-dropdowns {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}

.dd {
  /* Each <details> — the positioning context so we can absolutely-position
     the body relative to the whole .controls section (not the summary). */
}
.dd-sum {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  transition: background 140ms, border-color 140ms, color 140ms;
}
.dd-sum::-webkit-details-marker { display: none; }
.dd-sum:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-bright);
}
.dd[open] > .dd-sum {
  background: var(--bg-hover);
  border-color: var(--teal);
  color: var(--text-bright);
}
.dd-chev {
  display: inline-block;
  width: 10px;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 140ms, color 140ms;
  flex-shrink: 0;
  text-align: center;
}
.dd[open] > .dd-sum .dd-chev { transform: rotate(90deg); color: var(--teal); }
.dd-lbl { font-weight: 600; flex-shrink: 0; }
.dd-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

/* The dropdown body: pops out of flow and positions against .controls
   so it overlays the chart beneath. Because .controls is sticky, it acts
   as the containing block for these absolute children. */
.dd-body {
  position: absolute;
  top: 100%;
  left: 28px;               /* match .controls padding-left */
  width: 360px;
  max-height: 72vh;
  overflow-y: auto;
  z-index: 40;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--teal);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
  display: none;
}
.dd[open] > .dd-body { display: block; }

/* Inside the narrow dropdown body, force the category grid into a single
   column instead of the wide auto-fill grid it uses by default. */
.dd-body .cat-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}
.dd-body .cat-item { padding: 2px 4px; font-size: 12px; }
.dd-body .cat-code { min-width: 44px; font-size: 10.5px; }
.dd-body .cat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.dd-body .cat-n { font-size: 10.5px; }
.dd-body .cat-group-title { font-size: 10.5px; }
.dd-body .cat-actions { flex-wrap: wrap; gap: 6px; }
.dd-body .cat-actions .cat-btn { font-size: 11px; padding: 4px 10px; }

.dd-body .cs-grid {
  grid-template-columns: 1fr !important;
  gap: 2px;
}
.dd-body .cs-item { padding: 4px 6px; font-size: 12px; }

.dd-body .size-inputs {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.dd-body .size-presets { flex-wrap: wrap; margin-left: 0; }
.dd-body .size-help { font-size: 12px; }

/* Close any open dropdown when the user hits the fully-hide control
   (the existing panel-mode state machine sets this on <body>). */
body[data-panel-mode="hidden"] .ctrl-dropdowns { display: none; }

/* When the control strip is in "collapsed" mode, keep the dropdowns
   available — they're the most-used filters and should remain accessible
   even when the chip rows are hidden. */
body[data-panel-mode="collapsed"] .ctrl-dropdowns { display: flex; }

/* ── RESPONSIVE: narrow viewports — triggers wrap above the grid so
   they don't squeeze the chip rows too tight. */
@media (max-width: 980px) {
  .ctrl-layout { flex-direction: column; gap: 12px; }
  .ctrl-dropdowns {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .ctrl-dropdowns > .dd { flex: 1 1 180px; }
  .dd-body { width: calc(100% - 40px); max-height: 60vh; }
}

/* ═══════════════════════════════════════════════════════════════
   Cases-view mode — pinned-case pool
   ═══════════════════════════════════════════════════════════════ */

/* Clear-pins button in the top control bar — hidden by default, shown
   only when state.pinnedCases.size > 0 via .visible class from JS. */
.btn-pins-clear {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--salmon);
  background: transparent;
  border: 1px solid rgba(255,85,69,0.45);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
  margin-left: 6px;
}
.btn-pins-clear:hover {
  background: rgba(255,85,69,0.08);
  border-color: var(--salmon);
  color: #ff7766;
}
.btn-pins-clear.visible { display: inline-flex; }
.btn-pins-clear .btn-icon { font-size: 10px; }

/* When the viewmode toggle's "Cases" segment shows a count, style the
   count badge inside like a chip count — matches .seg-n spacing. */
#viewmode-cases .seg-n {
  font-family: var(--mono);
  font-size: 10px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(45,224,182,0.12);
  color: var(--teal);
  font-weight: 600;
}
.seg.viewmode-seg.active#viewmode-cases .seg-n {
  background: rgba(45,224,182,0.22);
  color: #7ef1d4;
}

/* ── Detail-panel pin UI ─────────────────────────────────────── */

/* Header badge: "0/4 pinned" next to the "Cases in this cluster" title */
.dp-pin-count {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  vertical-align: 2px;
  text-transform: none;
}
.dp-pin-count.has {
  color: var(--teal);
  background: rgba(45,224,182,0.1);
  border-color: rgba(45,224,182,0.35);
}

/* Action row above the case list — "Pin all / Pin CR / Pin MH / Clear" */
.dp-pin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.dp-pin-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-hover);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.dp-pin-btn:hover {
  background: var(--bg-elev);
  color: var(--teal);
  border-color: rgba(45,224,182,0.35);
}
.dp-pin-btn--clear {
  margin-left: auto;
  color: var(--salmon);
  border-color: rgba(255,85,69,0.25);
}
.dp-pin-btn--clear:hover {
  background: rgba(255,85,69,0.08);
  color: #ff7766;
  border-color: rgba(255,85,69,0.5);
}

/* Per-row pin button at the start of each .dp-case */
.dp-pin {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-right: 6px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms;
  opacity: 0.55;
}
.dp-pin:hover {
  opacity: 1;
  background: rgba(45,224,182,0.08);
  border-color: rgba(45,224,182,0.35);
}
.dp-pin[aria-pressed="true"] {
  opacity: 1;
  background: rgba(45,224,182,0.15);
  border-color: var(--teal);
}
.dp-pin-icon {
  font-size: 12px;
  line-height: 1;
  filter: grayscale(1) brightness(1.3);
}
.dp-pin[aria-pressed="true"] .dp-pin-icon { filter: none; }

/* Whole case row indicator when pinned — subtle teal left-border bar */
.dp-case.pinned {
  border-left: 3px solid var(--teal);
  padding-left: 5px;
  background: rgba(45,224,182,0.04);
}

/* ── Data-load states ────────────────────────────────────────────
   The viewer needs three JSON files (summary, index, events CR/MH/GC).
   On the production CDN the events bundle alone is ~6 MB, so a cold
   edge miss can leave the chart empty for several seconds. These
   states give the user something to look at for each phase.

   body[data-load-phase]:
     - "loading-summary"  = everything still in flight, chart is blank
     - "loading-index"    = summary done, waiting on case index
     - "loading-events"   = lanes rendered, events still fetching
     - "ready"            = all data resolved
     - "events-error"     = scoped, lanes are up, events failed
     - "fatal-error"      = summary or index failed; chart-wrap replaced
   ─────────────────────────────────────────────────────────────── */
.chart-wrap { position: relative; }

/* Overlay: shown while the data fetches are in flight. Removed when the
   first render has actually drawn the swim lanes. */
.chart-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(12,12,18,0.0) 0%,
      rgba(58,134,186,0.10) 50%,
      rgba(12,12,18,0.0) 100%);
  background-size: 220% 100%;
  animation: chartShimmer 1.4s linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 4;
}
body[data-load-phase="loading-summary"] .chart-wrap::after,
body[data-load-phase="loading-index"]   .chart-wrap::after { opacity: 1; }

@keyframes chartShimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* Text label during the first two load phases, centered over the chart
   area so the user knows the viewer is actually doing something.
   Stops as soon as data-summary-ready fires so the lanes are unobstructed. */
.chart-wrap .load-status {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 10px 18px;
  border: 1px solid var(--border);
  background: rgba(12,12,18,0.9);
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
}
body[data-load-phase="loading-summary"] .chart-wrap .load-status,
body[data-load-phase="loading-index"]   .chart-wrap .load-status { display: block; }
body[data-load-phase="loading-summary"] .chart-wrap .load-status::before { content: 'Loading cluster summary…'; }
body[data-load-phase="loading-index"]   .chart-wrap .load-status::before { content: 'Loading case index…'; }

/* Small ticker in the legend row while the events (largest) fetch runs. */
.chart-legend-row .load-tick {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 1px;
}
body[data-load-phase="loading-events"] .chart-legend-row .load-tick { display: inline; }
body[data-load-phase="loading-events"] .chart-legend-row .load-tick::before { content: '◌ Loading events…'; }

/* Scoped events-failed banner rendered by showPartialFailure(). */
.load-error-banner {
  color: var(--salmon) !important;
  font-family: var(--mono);
  font-size: 12px;
}
.load-error-banner .load-retry-btn {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--salmon);
  color: var(--salmon);
  padding: 2px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.load-error-banner .load-retry-btn:hover {
  background: rgba(255,85,69,0.12);
}

/* Fatal error card — replaces the chart scaffold when summary/index fail. */
.load-fatal {
  padding: 48px 40px;
  max-width: 680px;
  margin: 24px auto;
  font-family: var(--mono);
  color: var(--text);
  border: 1px solid var(--salmon);
  border-radius: var(--radius-lg);
  background: rgba(255,85,69,0.04);
}
.load-fatal-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 16px;
}
.load-fatal-msg {
  font-size: 14px;
  color: var(--text-bright);
  margin-bottom: 16px;
  line-height: 1.55;
}
.load-fatal-hint {
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.7;
  margin-bottom: 22px;
}
.load-fatal-hint code {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.load-fatal-retry {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--salmon);
  color: var(--bg);
  border: none;
  padding: 10px 22px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
}
.load-fatal-retry:hover { filter: brightness(1.15); }

/* ── Empty-state overlay ─────────────────────────────────────── */
.cases-empty {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(12,12,18,0.88);
  z-index: 5;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}
.cases-empty.visible { display: flex; }
.cases-empty .ce-inner {
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: 28px 32px;
}
.cases-empty .ce-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.cases-empty .ce-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
}
.cases-empty .ce-body strong { color: var(--text-bright); }
.cases-empty .ce-pin {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-hover);
  font-size: 13px;
  margin: 0 2px;
}

/* ── Presentation scalers (inside the Viewer size dropdown) ─────────────────
   Two range sliders for lane spacing + marker size. Defaults are 1× (no-op)
   so nothing changes until the user drags. Especially useful in Cases mode
   with a handful of pinned lanes when you want a screenshot-friendly render. */
.size-scalers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 8px;
  margin-top: 10px;
  border-top: 1px dashed var(--border-dim);
}
.size-scaler {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.size-scaler-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.size-scaler-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.size-scaler-val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--teal);
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}
.size-scaler-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg-hover);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.size-scaler-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--teal);
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.size-scaler-input::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--teal);
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  cursor: pointer;
}
.size-scaler-input:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(45,224,182,0.18);
}
.size-scaler-reset {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.size-scaler-reset:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border);
}

/* ── Mode-aware primary title & subline — only the matching data-mode
   span is visible at a time. Default (no body attr) shows clusters. */
.viz-title, .viz-sub { display: inline; }
body:not([data-view-mode="cases"]) .viz-title[data-mode="cases"],
body:not([data-view-mode="cases"]) .viz-sub[data-mode="cases"]     { display: none; }
body[data-view-mode="cases"]       .viz-title[data-mode="clusters"],
body[data-view-mode="cases"]       .viz-sub[data-mode="clusters"]  { display: none; }

/* ── Case-lane detail-panel highlight ────────────────────────────
   Flashes the target .dp-case row when arriving via a cases-mode click.
   The `.highlighted` class persists (subtle teal outline) so the user can
   still tell which case they clicked after the pulse animation finishes. */
.dp-case.highlighted {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  background: rgba(45,224,182,0.09);
  animation: dp-pulse 1.2s ease-out;
}
@keyframes dp-pulse {
  0%   { background: rgba(45,224,182,0.32); box-shadow: 0 0 0 4px rgba(45,224,182,0.35); }
  60%  { background: rgba(45,224,182,0.14); box-shadow: 0 0 0 2px rgba(45,224,182,0.15); }
  100% { background: rgba(45,224,182,0.09); box-shadow: 0 0 0 0 rgba(45,224,182,0); }
}

/* ── Case-specific tooltip content ───────────────────────────────
   Reuses the existing .tt-* skeleton styling — these are additions for
   the CR/MH/GC type chip at the tooltip head and the dates + hint rows. */
.tt-cid--cr { background: rgba(255,183,50,0.18); color: var(--gold); border: 1px solid rgba(255,183,50,0.4); padding: 2px 8px; border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.tt-cid--mh { background: rgba(255,85,69,0.18);  color: var(--salmon); border: 1px solid rgba(255,85,69,0.4);  padding: 2px 8px; border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.tt-cid--gc { background: rgba(58,134,186,0.18); color: var(--blue);   border: 1px solid rgba(58,134,186,0.4); padding: 2px 8px; border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.tt-row--dates { margin-top: 2px; }
.tt-dates {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
}
.tt-status {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.tt-row--hint {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-dim);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}