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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body, var(--font-display));
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
  transition: background 0.25s ease, color 0.25s ease;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--atmosphere);
  pointer-events: none;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  opacity: 0.55;
  pointer-events: none;
}

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

.top {
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 1rem;
  background: var(--top-bg, transparent);
  border-top: var(--masthead-height, 0) solid var(--masthead, transparent);
  border-bottom: 1px solid var(--top-line, var(--line));
  animation: rise 0.7s ease-out both;
  position: relative;
  /* Above .app-shell: expanded header content (social manager, tooltips)
     otherwise spills under the pane grid, which silently eats clicks */
  z-index: 10;
}

.theme-picker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--top-muted, var(--muted));
}

.theme-picker label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-picker select {
  font: inherit;
  color: var(--top-field-ink, var(--ink));
  background: var(--top-field-bg, var(--input-bg));
  border: 1px solid var(--top-line, var(--line));
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.theme-picker select option {
  color: var(--ink);
  background: var(--panel);
}

.theme-picker select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.refine-panel {
  margin-top: 0.65rem;
}

.refine-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--top-muted, var(--muted));
  user-select: none;
}

.refine-summary::-webkit-details-marker {
  display: none;
}

.refine-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--top-muted, var(--muted));
}

.refine-panel[open] > .refine-summary::before {
  transform: rotate(90deg);
}

.refine-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--top-ink, var(--ink));
}

.refine-state {
  color: var(--top-muted, var(--muted));
}

.refine-body {
  margin-top: 0.45rem;
}

/* The Refine disclosure works on every layout (mockup: clean masthead). */
.refine-panel {
  margin-top: 0.55rem;
}

.brand,
.product {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: var(--brand-weight, 700);
  letter-spacing: var(--brand-tracking, -0.03em);
  text-transform: var(--brand-transform, none);
  line-height: 1.05;
  color: var(--top-ink, var(--ink));
  text-shadow: var(--brand-glow);
}

.tagline {
  margin: 0.55rem 0 0;
  max-width: 36rem;
  color: var(--top-muted, var(--muted));
  font-family: var(--font-body, var(--font-display));
  font-size: 0.98rem;
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  max-width: 40rem;
}

.search-bar input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--top-line, var(--line));
  border-radius: var(--radius);
  background: var(--top-field-bg, var(--input-bg));
  font: inherit;
  color: var(--top-field-ink, var(--ink));
}

.search-bar input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.search-bar button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.65rem 1rem;
  background: var(--top-btn-bg, var(--accent));
  color: var(--top-btn-fg, var(--btn-fg));
}

.search-bar button.hunt-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.search-bar button.hunt-submit .hunt-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.search-bar button:hover {
  filter: brightness(1.08);
}

.search-bar .ghost {
  background: transparent;
  color: var(--top-ink, var(--ink));
  border-color: var(--top-line, var(--line));
}

.hunt-usecases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
  max-width: 40rem;
}

/* Core Four topic pills — Courier uppercase squares; active pill inverts (mockup). */
.hunt-usecase {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--top-line, var(--line));
  padding: 0.34rem 0.75rem;
  background: transparent;
  color: var(--top-muted, var(--muted));
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.hunt-usecase:hover,
.hunt-usecase:focus-visible {
  color: var(--top-ink, var(--ink));
  border-color: var(--top-ink, var(--ink));
  outline: none;
}

.hunt-usecase.active {
  color: var(--top-bg, var(--paper));
  border-color: var(--top-ink, var(--ink));
  background: var(--top-ink, var(--ink));
}

.stream-filters.stream-filters-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.45rem 0.85rem;
  margin-top: 0.55rem;
  max-width: 40rem;
  opacity: 0.92;
}

.stream-filters-secondary .pill {
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  border-color: var(--top-line, var(--line));
  color: var(--top-muted, var(--muted));
}

.stream-filters-secondary .pill.active {
  background: var(--top-pill-active-bg, var(--accent-soft));
  border-color: var(--top-pill-active-border, var(--accent));
  color: var(--top-pill-active-fg, var(--accent));
}

.stream-filters-secondary .source-filter-row select {
  min-width: 9rem;
  max-width: 16rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.8rem;
  color: var(--top-field-ink, var(--ink));
  background: var(--top-field-bg, var(--input-bg));
  border-color: var(--top-line, var(--line));
}

.stream-filters-secondary .source-filter-row select option {
  color: var(--ink);
  background: var(--panel);
}

.stream-filters-secondary .filter-label {
  color: var(--top-muted, var(--muted));
}

.top .status {
  color: var(--top-muted, var(--muted));
}

.stream-only-filters.pill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: 0.75rem;
  max-width: 56rem;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pill-divider {
  width: 1px;
  height: 1.15rem;
  background: var(--line);
  flex: 0 0 auto;
}

.pill {
  font: inherit;
  cursor: pointer;
  padding: 0.28rem 0.7rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}

.pill:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.pill.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.filter-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.25rem;
}

/* Labeled filter groups: label above its pill row, optional hint below */
.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.filter-group .filter-label {
  margin-right: 0;
  color: var(--top-muted, var(--muted));
}

.filter-group-hint {
  margin: 0;
  max-width: 26rem;
}

.hunt-usecases-block {
  margin-top: 0.55rem;
}

.hunt-usecases-block .filter-label {
  color: var(--top-muted, var(--muted));
}

.hunt-usecases-block .hunt-usecases {
  margin-top: 0.35rem;
}

.usecase-hint {
  margin: 0.35rem 0 0;
  max-width: 40rem;
}

.status {
  margin: 0.45rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--top-muted, var(--muted));
  opacity: 0.85;
}

.view-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 1rem 0 0.35rem;
}

.view-tab {
  padding: 0.45rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

.view-tab.active {
  color: var(--fg);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.stream-only-filters {
  margin-top: 0.35rem;
}

.workbench,
/* ── Layout: document flow + sticky rails (Dossier) ─────────────────────────
   The page scrolls naturally; the ITM INDEX and EVIDENCE BOARD rails stick to
   the top of the viewport (mockup: grid 250px | 1fr | 300px, align-items:start).
   No fixed shell height, no internal pane scrollbars. */
.app-shell {
  animation: rise 0.85s ease-out 0.08s both;
}

.pane-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  align-items: start;
}

.pane {
  min-width: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.pane:last-child {
  border-right: 0;
}

/* Left rail = TRENDING + ITM INDEX stacked in one grid column. */
.left-rail {
  display: none;
  min-width: 0;
}

.left-rail .pane {
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.pane-settings {
  display: none;
}

/* Side rails stick while the case stream scrolls. Their own overflow appears
   only when a rail is taller than the viewport. */
/* 1024px catches iPad landscape (Air 1180, Pro 11" 1194, base ~1080) and
   12.9" Pro portrait — below the old 1200 they all lost the side rail. */
@media (min-width: 1024px) {
  .pane-grid {
    grid-template-columns: 250px minmax(0, 1fr) 300px;
  }

  .left-rail {
    display: block;
  }

  .left-rail,
  .pane-workbench {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  nav#mobile-tabs {
    display: none;
  }
}

/* Below the wide breakpoint the panels tab takes over the grid. */
@media (max-width: 1023px) {
  .app-shell[data-pane="matrix"] .pane-grid {
    grid-template-columns: 1fr;
  }

  .app-shell[data-pane="matrix"] .left-rail {
    display: block;
  }

  .app-shell[data-pane="matrix"] .pane-articles,
  .app-shell[data-pane="matrix"] .pane-workbench {
    display: none;
  }
}

/* WORKBENCH and SETTINGS nav tabs take over the grid full-width on every
   layout (design handoff). */
.app-shell[data-pane="workbench"] .pane-grid,
.app-shell[data-pane="settings"] .pane-grid,
.app-shell[data-pane="evidence"] .pane-grid {
  grid-template-columns: 1fr;
}

.app-shell[data-pane="workbench"] .left-rail,
.app-shell[data-pane="workbench"] .pane-articles,
.app-shell[data-pane="workbench"] .pane-settings,
.app-shell[data-pane="settings"] .left-rail,
.app-shell[data-pane="settings"] .pane-articles,
.app-shell[data-pane="settings"] .pane-workbench,
.app-shell[data-pane="evidence"] .left-rail,
.app-shell[data-pane="evidence"] .pane-articles,
.app-shell[data-pane="evidence"] .pane-workbench,
.app-shell[data-pane="evidence"] .pane-settings {
  display: none !important;
}

.app-shell[data-pane="workbench"] .pane-workbench {
  display: block;
  position: static;
  max-height: none;
  overflow: visible;
}

.app-shell[data-pane="settings"] .pane-settings {
  display: block;
}

/* EVIDENCE takeover page: hidden everywhere except its own pane state. */
.pane-evidence-page {
  display: none;
}

.app-shell[data-pane="evidence"] .pane-evidence-page {
  display: block;
}

/* Color law (holds in every theme): --accent = court-proven / corroborated,
   --signal = observed/alleged volume. The legend carries the words. */
.evp-sub,
.evp-note {
  font-size: 0.72rem;
  color: var(--muted);
  max-width: 68ch;
}
.evp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0.7rem 0 0.5rem;
  font-variant-numeric: tabular-nums;
}
.evp-stats b {
  display: block;
  font-size: 1.05rem;
}
.evp-stats span span {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.evp-stats .evp-adj b {
  color: var(--accent);
}
.evp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.3rem 0 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.evp-legend i {
  display: inline-block;
  width: 15px;
  height: 8px;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.evp-lg-all {
  background: color-mix(in srgb, var(--signal) 55%, transparent);
}
.evp-lg-adj {
  background: var(--accent);
}
.evp-lg-corr {
  background: transparent;
  border: 1px solid var(--accent);
}
.evp-corr {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  margin-bottom: 0.9rem;
  font-size: 0.76rem;
}
.evp-corr b {
  color: var(--accent);
}
.evp-corr-meter {
  flex: 1 1 180px;
  height: 8px;
  min-width: 140px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  display: flex;
}
.evp-corr-meter i {
  background: var(--accent);
}
.evp-section-head {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 0.45rem;
}
.evp-axis-head {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.evp-who {
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  margin-bottom: 0.9rem;
}
.evp-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.evp-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.2rem;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
}
@media (max-width: 860px) {
  .evp-who-grid,
  .evp-cols {
    grid-template-columns: 1fr;
  }
}
.evp-scroll {
  overflow-x: auto;
}
.evp-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.evp-table th {
  text-align: left;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0.2rem 0.5rem 0.3rem 0;
}
.evp-table td {
  padding: 0.26rem 0.5rem 0.26rem 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.evp-table td.num,
.evp-table th.num {
  text-align: right;
}
.evp-theme-row td {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}
.evp-theme-row b {
  letter-spacing: 0.12em;
}
.evp-tech-id {
  color: var(--signal);
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, var(--signal) 55%, transparent);
  white-space: nowrap;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  padding: 0;
}
/* Spelled-out technique cell: name reads first, ITM code trails small + dim. */
.evp-tech-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.evp-tech-title {
  color: var(--signal);
  font-weight: 700;
  border-bottom: 1px dotted color-mix(in srgb, var(--signal) 55%, transparent);
}
.evp-tech-code {
  color: var(--muted);
  font-size: 0.62rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.evp-adjn {
  color: var(--accent);
}
.evp-row {
  margin-bottom: 0.55rem;
}
.evp-row-top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.74rem;
}
.evp-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evp-row-count {
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.evp-bar {
  display: block;
  height: 8px;
  margin-top: 0.22rem;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.evp-bar-all {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--signal) 55%, transparent);
}
.evp-bar-adj {
  display: block;
  height: 100%;
  background: var(--accent);
}
.evp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.8rem;
}
.evp-chip {
  font-size: 0.62rem;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.evp-findings {
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  margin-bottom: 0.9rem;
}
.evp-finding {
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.7rem;
}
.evp-finding-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.evp-finding-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
.evp-finding-tag {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.05rem 0.35rem;
  align-self: center;
}
/* The number carries the finding — big, scannable, the point in one glance. */
.evp-finding-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.2rem 0 0.5rem;
}
.evp-finding-stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.01em;
}
.evp-finding-stat-label {
  font-size: 0.76rem;
  color: var(--ink);
  max-width: 46ch;
}
.evp-finding-takeaway {
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 68ch;
  margin: 0 0 0.55rem;
}
.evp-finding-actions {
  margin: 0 0 0.55rem;
  padding-left: 1.05rem;
  font-size: 0.76rem;
}
.evp-finding-actions li {
  margin-bottom: 0.2rem;
}
.evp-finding-method {
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--muted);
  max-width: 72ch;
  margin: 0;
}
.evp-more-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.ttp-corpus-foot {
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 0.3rem 0.55rem;
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0.45rem 0 0;
}
.ttp-corpus-foot b {
  color: var(--accent);
  letter-spacing: 0.08em;
}

.evp-limits {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 0.7rem;
}
.evp-limits p {
  font-size: 0.7rem;
  color: var(--muted);
  max-width: 90ch;
}
.evp-limits b {
  color: var(--ink);
}

/* Full-width workbench gets its explainer; in the stream side rail it stays
   out of the way. */
.wb-intro {
  display: none;
}

.app-shell[data-pane="workbench"] .wb-intro {
  display: block;
}

/* PANELS-row hides: hidden panels release their space to the neighbors. */
.app-shell.hide-core .pane-trending,
.app-shell.hide-itm .pane-matrix,
.app-shell.hide-evidence .pane-evidence,
.app-shell.hide-stream .pane-articles,
.app-shell.hide-wb:not([data-pane="workbench"]) .pane-workbench {
  display: none !important;
}

/* EVIDENCE LEDGER pane (left rail, under ITM INDEX) */
.ledger-explainer,
.ledger-summary {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted, #8a8f98);
  margin: 0 0 0.5rem;
}
.ledger-key {
  display: block;
  font-size: 0.6rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}
.ledger-section-head {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--muted, #8a8f98);
  margin: 0.7rem 0 0.35rem;
}
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.14rem 0;
  font-size: 0.72rem;
}
.ledger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-bar {
  display: inline-block;
  height: 6px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.ledger-bar {
  display: inline-flex;
}
.ledger-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #d24a43);
}
.ledger-bar-inferred {
  opacity: 0.35;
}
.ledger-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted, #8a8f98);
  font-size: 0.68rem;
}
.ledger-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.ledger-chip {
  font-size: 0.64rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 999px;
  color: var(--muted, #8a8f98);
}

@media (min-width: 1024px) {
  .app-shell.hide-core.hide-itm.hide-evidence:not([data-pane="workbench"]):not(
      [data-pane="settings"]
    )
    .pane-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .app-shell.hide-core.hide-itm.hide-evidence .left-rail {
    display: none;
  }

  .app-shell.hide-stream:not([data-pane="workbench"]):not([data-pane="settings"])
    .pane-grid {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .app-shell.hide-wb:not([data-pane="workbench"]):not([data-pane="settings"])
    .pane-grid {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .app-shell.hide-core.hide-itm.hide-stream .pane-grid,
  .app-shell.hide-core.hide-itm.hide-wb:not([data-pane="workbench"]):not([data-pane="settings"])
    .pane-grid,
  .app-shell.hide-stream.hide-wb:not([data-pane="workbench"]):not([data-pane="settings"])
    .pane-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Collapsed panel/section = header bar only. */
.pane.collapsed > :not(.pane-head),
.settings-section.collapsed > :not(.settings-head) {
  display: none !important;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}

.pane-head h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pane-head-main {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
}

.pane-head-main h2 {
  color: var(--ink);
}

.pane-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.pane-body {
  /* Document-flow layout: panes grow with content; the page scrolls, not the pane. */
  padding: 0.75rem 1rem 1rem;
}

.pane-body.panel {
  border-left: 0;
  background: transparent;
  backdrop-filter: none;
}

.pane-matrix .pane-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.65rem;
}

.matrix-latest-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

.mobile-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: sticky;
  top: 0;
  z-index: 40;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
  padding: 0.25rem 0.45rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.mobile-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.35rem;
  cursor: pointer;
  touch-action: manipulation;
}

.mobile-tab.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.filter-context {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 2px solid var(--accent);
}

.hunt-map {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.65rem 0.65rem;
  border-bottom: 1px solid var(--line);
}

.hunt-map-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hunt-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hunt-map-list .chip {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius);
}

.hunt-map-list .chip:hover,
.hunt-map-list .chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.hunt-map-list .chip .hunt-map-count {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.65rem;
}

.hunt-map-empty {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.source-filter-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  flex-wrap: wrap;
  margin-left: auto;
}

.source-filter-row select {
  min-width: 12rem;
  max-width: 22rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.matrix-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.matrix-mode-tabs {
  display: flex;
  gap: 0.3rem;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.matrix-mode-tab {
  padding: 0.35rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

.matrix-mode-tab.active {
  color: var(--fg);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.matrix-control-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.matrix-control-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
}

.matrix-control-btn:hover,
.matrix-control-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.matrix-board-head h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.matrix-search-wrap {
  flex: 1 1 16rem;
  max-width: 28rem;
}

.matrix-search-wrap input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Center-canvas matrix: theme columns as a responsive grid (collapses to one
   column on phones without extra media queries). The page scrolls naturally. */
.matrix-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.matrix-col {
  min-width: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--side-bg) 80%, transparent);
  padding: 0;
}

.matrix-col-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}

.matrix-col-summary::-webkit-details-marker {
  display: none;
}

.matrix-col-summary::before {
  content: "▾";
  margin-right: 0.35rem;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.matrix-col:not([open]) > .matrix-col-summary::before {
  transform: rotate(-90deg);
}

.matrix-col-count {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 0.85;
}

.matrix-col .matrix-tech-list {
  padding: 0 0.45rem 0.65rem;
}

.matrix-col h3 {
  margin: 0 0 0.55rem;
  padding: 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.matrix-tech-list,
.matrix-sub-list,
.matrix-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.matrix-article-list {
  gap: 0.45rem;
}

.matrix-articles-group {
  margin-top: 0.35rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.matrix-tech-row {
  display: flex;
  gap: 0.2rem;
  align-items: stretch;
}

.matrix-expand,
.matrix-expand-spacer {
  flex: 0 0 1.35rem;
  width: 1.35rem;
}

.matrix-expand {
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1;
}

.matrix-tech-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  padding: 0.4rem 0.45rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  min-width: 0;
}

.matrix-tech-btn.matrix-tech-zero {
  opacity: 0.55;
}

.matrix-tech-btn:hover,
.matrix-tech-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.hunt-map-count-zero {
  opacity: 0.65;
}

.matrix-tech-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.matrix-tech-title {
  font-size: 0.78rem;
  line-height: 1.25;
  word-break: break-word;
}

.matrix-tech-sub {
  margin-left: 0.35rem;
  border-left: 2px solid var(--line);
  padding-left: 0.55rem;
}

.matrix-sub-list {
  margin: 0.2rem 0 0.35rem 1.35rem;
}

/* Observed-only ITM INDEX rail ------------------------------------------- */
.itm-rail {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.itm-rail-theme {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, var(--fg));
}

.itm-rail-theme:first-child {
  margin-top: 0.1rem;
}

.itm-rail-leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 55%, transparent);
  transform: translateY(-3px);
}

.itm-rail-count {
  font-weight: 400;
  color: var(--muted);
}

.itm-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.itm-rail-btn {
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.32rem 0.4rem;
  width: 100%;
}

.itm-rail-btn .matrix-tech-id {
  color: var(--accent);
  font-size: 0.66rem;
  flex: 0 0 auto;
}

.itm-rail-btn .matrix-tech-title {
  font-size: 0.84rem;
}

/* Techniques observed in the SELECTED case get an evidence tick. */
.itm-rail-btn.case-hit {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.itm-rail-empty {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Case-filter head: shown while the rail is collapsed to the selected case. */
.itm-rail-filter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.itm-rail-filter button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.2rem 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.itm-rail-filter button:hover,
.itm-rail-filter button:focus-visible {
  border-bottom-color: var(--accent);
}

.itm-rail-browse {
  margin-top: 0.9rem;
  align-self: flex-start;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.2rem 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}

.itm-rail-browse:hover,
.itm-rail-browse:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Center-canvas matrix view chrome --------------------------------------- */
.matrix-view-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.matrix-view-head h3 {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink, var(--fg));
}

.matrix-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

#matrix-panel .matrix-control-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.4rem;
}

.matrix-col-empty {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.35rem;
}

/* Novel-technique candidates (matrix "Novel candidates" tab) */
.matrix-empty {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 1rem;
}

.candidate-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin: 0.4rem 0;
  background: var(--surface, transparent);
}

.candidate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.3rem;
}

.candidate-label {
  font-weight: 600;
  font-size: 0.85rem;
}

.candidate-strength {
  display: inline-block;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--muted);
}

.candidate-strength-strong {
  border-color: #2f8f5b;
  color: #2f8f5b;
}

.candidate-strength-weak {
  opacity: 0.7;
}

.candidate-flag {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #c2842a;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
}

.candidate-behavior {
  font-size: 0.82rem;
  margin: 0.2rem 0;
}

.candidate-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin: 0.2rem 0;
}

.candidate-cases {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

.candidate-cases li {
  margin: 0.15rem 0;
}

.candidate-claim-chip {
  display: inline-block;
  padding: 0 0.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--muted);
  vertical-align: middle;
}

.matrix-article-btn {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
}

.matrix-article-btn strong {
  font-size: 0.88rem;
  font-weight: 560;
}

.matrix-article-btn span {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.stream,
.panel {
  padding: 1.25rem clamp(0.85rem, 2vw, 1.5rem);
}

.panel {
  border-left: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(8px);
}

.stream-head h2,
.panel h2 {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stream-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.stream-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stream-refresh {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Case-file card (Dossier) ────────────────────────────────────────────────
   A card = file tab (above) + body (.article-item, top of the box) + footer
   (.case-footer, bottom of the box). Body and footer share the side borders and
   background so they read as one card; the tab sits attached to the top-left. */
.article-row {
  position: relative;
  margin-bottom: 1.1rem;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  box-shadow: 0 1px 3px rgba(33, 29, 22, 0.12);
}

.article-row:last-child {
  margin-bottom: 0.25rem;
}

/* 1. File tab — "<KIND> <case-no>", attached above the card body */
.case-tab {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.22rem 0.75rem 0.16rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Design handoff: not solid ink — soft accent tab with a hairline border.
     content-box keeps the added border from ellipsis-truncating the label. */
  box-sizing: content-box;
  background: var(--accent-soft, var(--panel));
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom: 0;
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Hunt-term chips (dashed) + inverted ITM id chip */
.case-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.term-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.term-chip:hover,
.term-chip:focus-visible {
  color: var(--accent);
  border-color: var(--ink);
  background: var(--hover);
}

.itm-id-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.itm-id-chip:hover,
.itm-id-chip:focus-visible {
  filter: brightness(1.3);
}

/* Footer action row — text buttons, right-aligned */
.case-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 1.1rem 0.65rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.case-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.article-board-btn,
.article-open-btn,
.article-expand-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.article-board-btn:hover,
.article-open-btn:hover,
.article-expand-btn:hover,
.article-board-btn:focus-visible,
.article-open-btn:focus-visible,
.article-expand-btn:focus-visible {
  color: var(--accent);
}

.article-board-btn.on-board {
  color: var(--accent);
  font-weight: 600;
}

.article-row.expanded .article-expand-btn {
  color: var(--accent);
}

/* Expanded read state: lift the note's line clamp + reveal the source pointer */
.article-row.expanded .article-item .snip {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-line;
  max-width: 68ch; /* readable measure for the full read view */
  line-height: 1.65;
}

/* Case-record fact strip inside the note: only useful at reading size. */
.note-facts {
  display: none;
}

.article-row.expanded .note-facts {
  display: grid;
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border);
}

/* Sibling of .article-item (not a child — it holds a link). Continues the card
   box (panel bg + side borders, no margin) so body → read-tail → footer read as
   one card; a dashed rule separates it from the note above. */
.case-read-tail {
  display: none;
  margin: 0;
  padding: 0.5rem 1.1rem 0.55rem;
  background: var(--panel);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.case-read-tail a {
  color: var(--accent);
  text-decoration: none;
}

.article-row.expanded .case-read-tail {
  display: block;
}

.case-read-tail .filing-load-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}

/* On-demand court-document body; sibling of .case-read-tail inside the card. */
.filing-text {
  display: none;
  margin: 0;
  padding: 0.7rem 1.1rem;
  background: var(--panel);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 26rem;
  overflow-y: auto;
  max-width: 72ch;
}

.article-row.expanded .filing-text {
  display: block;
}

.article-row.expanded .filing-text[hidden] {
  display: none;
}

@media (max-width: 960px) {
  .hunt-usecase::after {
    display: none;
  }

  /* Larger tap targets for the footer actions on touch */
  .article-board-btn,
  .article-open-btn,
  .article-expand-btn {
    padding: 0.3rem 0.2rem;
    font-size: 0.72rem;
  }
}

.article-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  display: block;
  padding: 0.7rem 1.1rem 0.8rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 0 var(--radius) 0 0;
  background: var(--panel);
  color: inherit;
  font: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
  transition: background 0.2s ease;
}

.article-item:hover {
  background: color-mix(in srgb, var(--panel) 94%, var(--ink));
}

.article-item.active {
  background: var(--signal-soft);
}

.article-item h3 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.28;
  font-weight: var(--headline-weight, 600);
  letter-spacing: var(--headline-tracking, -0.01em);
  text-transform: var(--headline-transform, none);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Meta row: SOURCE / FILED / SIG (truncates) + in-flow classification stamp */
.article-item .row-meta {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.case-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-stamp {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.08rem 0.45rem;
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: 0.85;
  white-space: nowrap;
  color: var(--muted);
}

/* LLM-adjudicated non-case: muted, dashed — visually "filed as background". */
.case-stamp.context {
  color: var(--muted);
  border-style: dashed;
}

.article-row.context-row .article-item {
  opacity: 0.75;
}

.context-toggle-row {
  list-style: none;
  padding: 0.6rem 0;
  text-align: center;
}

.context-toggle {
  background: none;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  border-radius: var(--radius, 2px);
}

.context-toggle:hover {
  color: var(--ink);
  border-color: var(--muted);
}

.case-stamp.insider-type-malicious {
  color: #a8352a;
}

.case-stamp.insider-type-negligent {
  color: #8a6a1f;
}

.case-stamp.insider-type-unintentional {
  color: #3f5e7a;
}

/* The stamp only renders when insider_type is set (production). Its fixed
   classification hues read on the light dossier/cnn-lite paper but go muddy on
   the dark backup themes — lift to legible tints and drop the opacity there. */
[data-theme="midnight"] .case-stamp,
[data-theme="phosphor"] .case-stamp {
  opacity: 1;
}

[data-theme="midnight"] .case-stamp.insider-type-malicious,
[data-theme="phosphor"] .case-stamp.insider-type-malicious {
  color: #e07a70;
}

[data-theme="midnight"] .case-stamp.insider-type-negligent,
[data-theme="phosphor"] .case-stamp.insider-type-negligent {
  color: #d9ad4e;
}

[data-theme="midnight"] .case-stamp.insider-type-unintentional,
[data-theme="phosphor"] .case-stamp.insider-type-unintentional {
  color: #8fb3d9;
}

/* ANALYST NOTE block */
.analyst-note {
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: var(--hover);
  border-left: 3px solid var(--ink);
}

.analyst-note-label {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-item .snip {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Multi-paragraph notes: flat while clamped, breathing room when expanded. */
.snip .snip-para {
  margin: 0;
}

.article-row.expanded .snip .snip-para + .snip-para {
  margin-top: 0.55rem;
}

.cluster-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.cluster-source {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--side-bg);
  color: var(--muted);
  cursor: pointer;
}

.cluster-source:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cluster-source.active {
  background: var(--signal-soft);
  border-color: var(--signal);
  color: var(--signal);
}

.kw-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
  max-width: 100%;
}

.chip {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.chip.signal {
  background: var(--signal-soft);
  color: var(--signal);
}

.panel-empty {
  color: var(--muted);
  font-size: 0.95rem;
}

.panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--headline-weight, 600);
  letter-spacing: var(--headline-tracking, -0.02em);
  text-transform: var(--headline-transform, none);
}

.panel-meta {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.panel-summary {
  margin: 0.85rem 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin: 0.55rem 0 0;
}

.workbench-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.workbench-header .panel-actions {
  margin-top: 0.55rem;
}

.extraction-board {
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.extraction-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.extraction-board-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.board-coach {
  margin: 0 0 0.55rem;
}

.board-count {
  color: var(--muted);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.board-empty {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
}

.board-empty[hidden] {
  display: none !important;
}

.board-empty .kw-hint {
  margin: 0;
}

.board-example-btn {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--accent);
  background: var(--accent-soft, transparent);
  color: var(--accent);
  border-radius: var(--radius, 2px);
  cursor: pointer;
}

.board-example-btn:hover,
.board-example-btn:focus-visible {
  background: var(--accent);
  color: var(--btn-fg, var(--paper));
  outline: none;
}

.board-example-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.board-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 10rem;
  overflow: auto;
}

.board-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, var(--ink) 4%);
}

.board-item-main {
  min-width: 0;
  flex: 1;
}

.board-item-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 560;
  line-height: 1.3;
}

.board-item-meta {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.board-item-remove {
  flex-shrink: 0;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: 0.2rem 0.4rem;
}

.board-item-remove:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.ttp-report {
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.ttp-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ttp-list li {
  font-size: 0.84rem;
  line-height: 1.35;
  padding: 0.4rem 0.5rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 6%);
}

.ttp-list .ttp-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  margin-right: 0.35rem;
}

/* Report v2: analyst summary + per-technique case-evidence sections. */
.ttp-summary {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 68ch;
}

.ttp-technique-sections {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

.ttp-technique {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 6%);
  padding: 0.5rem 0.65rem 0.55rem;
}

.ttp-technique-head {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
}

.ttp-technique-head .ttp-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  margin-right: 0.35rem;
}

.ttp-case-title {
  margin: 0.55rem 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.ttp-case-title a {
  color: inherit;
}

.ttp-case-bullets {
  margin: 0;
  padding-left: 1.1rem;
}

.ttp-case-bullets li {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.15rem 0;
}

/* Deep report: tradecraft prose, typed observables, and detect & hunt. */
.ttp-tradecraft-summary,
.ttp-case-tradecraft {
  margin: 0.3rem 0 0.15rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.ttp-case-tradecraft {
  color: var(--muted);
}

.ttp-subhead {
  margin: 0.7rem 0 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.ttp-observable-artifact {
  margin: 0.35rem 0 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.ttp-channel-chip {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  vertical-align: middle;
}

/* "inferred" marker: a defender's inference, not a source-stated trace. */
.ttp-inferred-chip {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-style: italic;
  color: var(--muted);
  vertical-align: middle;
}

/* Legal-posture badge — allegations must read distinctly from findings.
   Charge-stage postures skew caution; proven ones read as settled. */
.ttp-posture-badge {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  vertical-align: middle;
}

.ttp-posture-indictment,
.ttp-posture-complaint,
.ttp-posture-civil_suit {
  border-color: #c2842a;
  color: #c2842a;
}

.ttp-posture-plea,
.ttp-posture-conviction,
.ttp-posture-sentencing,
.ttp-posture-settlement {
  border-color: #2f8f5b;
  color: #2f8f5b;
}

.ttp-control-chips {
  margin: 0.2rem 0 0.35rem;
  line-height: 1.9;
}

.ttp-control-chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  text-decoration: none;
}

.ttp-control-chip:hover {
  border-color: var(--accent);
}

.board-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  background: var(--accent);
  color: #fff;
}

.kw-group-primary h4 {
  color: var(--accent);
}

.panel-open {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.88rem;
  margin-right: 0.15rem;
}

.copy-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 0.42rem 0.7rem;
  background: transparent;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.copy-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.copy-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.copy-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-fg);
}

.copy-btn-primary:hover {
  filter: brightness(1.08);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-fg);
}

.copy-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.kw-group h4 {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.kw-hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Structured case record (ingest LLM extraction) — dossier-style fact rows */
.case-record-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.82rem;
}

.case-record-list dt {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  align-self: baseline;
  white-space: nowrap;
}

.case-record-list dd {
  margin: 0;
  color: var(--ink);
}

/* Styled hover tooltips: any element with data-tip. CSS-only; keep the DOM
   copy in captions / sr-only twins for screen readers and touch. */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translate(-50%, 2px);
  width: max-content;
  max-width: min(16rem, 70vw);
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font: 400 0.72rem / 1.45 var(--font-mono);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
  pointer-events: none;
  opacity: 0;
  z-index: 30;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

[data-tip][data-tip-pos="bottom"]::after,
[data-tip][data-tip-pos="bottom-start"]::after,
[data-tip][data-tip-pos="bottom-end"]::after {
  bottom: auto;
  top: calc(100% + 0.4rem);
  transform: translate(-50%, -2px);
}

[data-tip][data-tip-pos="bottom-start"]::after {
  left: 0;
  transform: translateY(-2px);
}

[data-tip][data-tip-pos="bottom-end"]::after {
  left: auto;
  right: 0;
  transform: translateY(-2px);
}

/* Chips, filter pills, and group labels sit at the left viewport edge — align
   their tips to the element start so they can't overhang the viewport */
.hunt-usecase[data-tip]::after,
.filter-group .pill[data-tip]::after,
.filter-label[data-tip]::after {
  left: 0;
  transform: translateY(2px);
}

/* Group labels that explain their controls on hover */
.filter-label[data-tip] {
  display: inline-block;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .hunt-usecase[data-tip]:hover::after,
  .filter-group .pill[data-tip]:hover::after,
  .filter-label[data-tip]:hover::after {
    transform: translateY(0);
  }
}

.hunt-usecase[data-tip]:focus-visible::after,
.filter-group .pill[data-tip]:focus-visible::after,
.filter-label[data-tip]:focus-visible::after {
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  /* Raise the hovered element itself: reduced-opacity (disabled) siblings
     form their own stacking contexts, so the tip's z-index alone can't win */
  [data-tip]:hover {
    z-index: 60;
  }
  [data-tip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.3s;
  }
  [data-tip][data-tip-pos="bottom-start"]:hover::after,
  [data-tip][data-tip-pos="bottom-end"]:hover::after {
    transform: translateY(0);
  }
}

[data-tip]:focus-visible {
  z-index: 60;
}

[data-tip]:focus-visible::after,
.info-tip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

[data-tip][data-tip-pos="bottom-start"]:focus-visible::after,
[data-tip][data-tip-pos="bottom-end"]:focus-visible::after,
.info-tip[data-tip-pos="bottom-end"]:focus::after {
  transform: translateY(0);
}

/* Small circled "?" info button (pane headers) */
.info-tip {
  font: 600 0.72rem / 1 var(--font-mono);
  cursor: help;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  flex: 0 0 auto;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.info-tip:hover,
.info-tip:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.kw-group + .kw-group {
  margin-top: 1rem;
}

.kw-group-muted .chip {
  opacity: 0.85;
}

.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chip-list:empty::after {
  content: "—";
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

button.chip {
  border: 0;
  cursor: pointer;
  font: inherit;
}

button.chip:hover {
  filter: brightness(1.1);
}

button.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

a.itm-chip {
  text-decoration: none;
}

a.itm-chip:hover {
  filter: brightness(1.12);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.site-footer a {
  color: var(--accent);
}

.site-footer p {
  margin: 0;
  max-width: 52rem;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 960px) {
  html,
  body {
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .top {
    flex: 0 0 auto;
    padding: 0.85rem 1rem 0.55rem;
  }

  .brand-block .tagline {
    display: none;
  }

  .product {
    font-size: clamp(1.45rem, 5.5vw, 2rem);
  }

  .refine-panel {
    margin-top: 0.4rem;
  }

  .refine-summary {
    padding: 0.35rem 0;
  }

  .refine-body {
    padding-bottom: 0.25rem;
  }

  .stream-filters.stream-filters-secondary {
    gap: 0.4rem 0.65rem;
    margin-top: 0.35rem;
  }

  .theme-picker select {
    min-height: 2.4rem;
  }

  .product {
    padding-right: 0;
  }

  .stream-only-filters.pill-bar {
    gap: 0.45rem;
    margin-top: 0.55rem;
  }

  .pill {
    padding: 0.55rem 0.8rem;
    font-size: 0.72rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Vetted hunt chips: one scrollable row instead of a wrapping block. */
  .hunt-usecases {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: none;
    padding-bottom: 0.2rem;
    -webkit-overflow-scrolling: touch;
  }

  .hunt-usecase {
    flex: 0 0 auto;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  button.chip,
  .itm-chip-pair .itm-chip-ext {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .matrix-tech-btn,
  .matrix-control-btn,
  .matrix-expand {
    min-height: 2.75rem;
  }

  .mobile-tab {
    min-height: 2.75rem;
  }

  .article-item .snip {
    -webkit-line-clamp: 2;
  }

  /* Board actions stay reachable while the report scrolls underneath. */
  .extraction-board-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel);
    padding-bottom: 0.35rem;
  }

  .source-filter-row {
    margin-left: 0;
    width: 100%;
  }

  .source-filter-row select {
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
  }

  .status {
    margin-top: 0.35rem;
    font-size: 0.68rem;
  }

  .workbench,
  .app-shell {
    min-height: 0;
  }

  .app-shell {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .pane-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .pane {
    border-right: 0;
    display: none;
  }

  .app-shell[data-pane="articles"] .pane-articles,
  .app-shell[data-pane="matrix"] .left-rail .pane,
  .app-shell[data-pane="workbench"] .pane-workbench {
    display: block;
  }

  .app-shell[data-pane="matrix"] .pane-articles,
  .app-shell[data-pane="matrix"] .pane-workbench {
    display: none;
  }

  .mobile-tabs {
    /* already visible on desktop; keep sticky bar on phone */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .mobile-tab {
    padding: 0.7rem 0.35rem;
  }

  .extraction-board-actions,
  .workbench-header .panel-actions,
  .panel-actions {
    gap: 0.45rem;
  }

  .copy-btn {
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .extraction-board-actions .copy-btn {
    flex: 1 1 auto;
  }

  .panel {
    border: 0;
  }

  .site-footer {
    flex: 0 0 auto;
  }

  .tagline {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .search-bar {
    gap: 0.35rem;
  }

  .search-bar input {
    min-width: 0;
    flex: 1 1 auto;
  }

  .pill-divider {
    display: none;
  }

  .copy-actions {
    flex-wrap: wrap;
  }

  /* Narrow phones: the one-line ellipsis meta clips the FILED/age tail behind
     a long source name. Let it wrap instead — nothing is lost. */
  .article-item .row-meta {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }

  .case-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Technique dossier — single-column research view (mobile-first) */
.dossier {
  max-width: 46rem;
}

.dossier-head {
  margin-bottom: 1.1rem;
}

.dossier-back {
  margin-bottom: 0.6rem;
}

.dossier-head h3 {
  margin: 0 0 0.3rem;
  font-size: 1.08rem;
  line-height: 1.3;
}

.dossier-meta {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: capitalize;
}

.dossier-desc {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

.dossier-links {
  margin: 0;
}

.dossier-cases .article-list {
  margin-top: 0.35rem;
}

/* ITM chip pair — in-app dossier button + external matrix link */
.itm-chip-pair {
  display: inline-flex;
  align-items: stretch;
  gap: 0.15rem;
}

button.chip.itm-chip {
  cursor: pointer;
}

.itm-chip-ext {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.4rem;
  text-decoration: none;
}

/* Paste-and-run hunt query blocks */
.query-stacks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.query-stack {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--side-bg) 70%, transparent);
}

/* Tool-agnostic hunt methods inside a dossier pattern card. */
.dossier-method-list {
  list-style: disc;
  margin: 0.2rem 0 0.5rem;
  padding-left: 1.6rem;
}

.dossier-method-list li {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.18rem 0;
}

.query-stack-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
}

.query-stack-lang {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.query-block {
  margin: 0;
  padding: 0.6rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 65%, transparent);
  border-top: 1px solid var(--line);
  white-space: pre;
}

.query-stack-actions {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--line);
}

/* Data provenance chip — live API vs baked demo snapshot */
.status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.status-row .status {
  margin-top: 0.35rem;
}

.data-state {
  margin-top: 0.35rem;
  padding: 0.14rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: nowrap;
}

.data-state-demo {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--signal-soft);
}

/* Filter breadcrumbs — one removable chip per active filter */
.filter-crumbs {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.crumb-x {
  font-size: 0.95em;
  line-height: 1;
  color: var(--muted);
}

.crumb:hover .crumb-x {
  color: var(--accent);
}

/* Keyboard triage — cursor row, dismissed rows, desktop hint */
.kbd-hint {
  display: none;
}

@media (min-width: 1200px) {
  .kbd-hint {
    display: inline;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    color: var(--muted);
    white-space: nowrap;
  }
}

.article-row.cursor .article-item {
  background: var(--hover);
  box-shadow: inset 2px 0 0 var(--accent);
}

.article-row.dismissed .article-item,
.article-row.dismissed .case-tab,
.article-row.dismissed .case-footer {
  opacity: 0.45;
}

/* On .row-meta (the flex container), not .case-meta — .case-meta truncates with
   ellipsis and would clip this cue. As a flex item it is never clipped. */
.article-row.dismissed .row-meta::after {
  content: "· dismissed";
  flex: 0 0 auto;
  color: var(--muted);
}

/* Short viewports (phone landscape): the fixed-header + internal-scroll model
 * squashes the article pane to a sliver. Switch to natural page scroll so the
 * header scrolls away and the active pane gets full height. Guarded to phone
 * widths so short-but-wide desktop windows keep the 3-pane cockpit. */
@media (max-height: 520px) and (max-width: 960px) {
  body {
    min-height: 0;
  }

  .top {
    padding: 0.55rem 1rem 0.4rem;
  }

  .product {
    font-size: 1.15rem;
  }

  .hunt-usecases,
  .intro-panel,
  .panels-row,
  .site-footer {
    display: none;
  }

  .search-bar {
    margin-top: 0.5rem;
  }

  .workbench,
  .app-shell {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .pane-grid {
    grid-template-rows: auto;
  }

  .app-shell[data-pane] .pane-articles,
  .app-shell[data-pane] .pane-matrix,
  .app-shell[data-pane] .pane-workbench {
    height: auto;
    overflow: visible;
  }

  .pane-body {
    overflow: visible;
    min-height: 0;
  }
}

/* Live-API-unreachable state (no demo fallback) */
.stream-empty.api-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Insider-type badges + use-case tags on stream cards */
.insider-type-badge,
.use-case-tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
}

.insider-type-badge.insider-type-malicious {
  border-color: #c0392b;
  color: #c0392b;
}

.insider-type-badge.insider-type-negligent {
  border-color: #b9770e;
  color: #b9770e;
}

.insider-type-badge.insider-type-unintentional {
  border-color: #2471a3;
  color: #2471a3;
}

/* Social sources manager (Refine panel) */
.social-manager {
  min-width: 0;
  font-size: 0.8rem;
}

.social-manager > summary {
  cursor: pointer;
}

.social-manager-group {
  margin: 0.4rem 0;
}

.social-source-list {
  list-style: none;
  margin: 0.2rem 0;
  padding: 0;
  max-height: 12rem;
  overflow-y: auto;
}

.social-source-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
}

.social-source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-source-btn {
  margin-left: auto;
  font-size: 0.68rem;
}

.social-add-row {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.social-add-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* ── Masthead rows: brand + nav + LIVE (row 1), search + Core Four (row 2) ── */
.masthead-row-top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem 1.25rem;
  flex-wrap: wrap;
}

.masthead-row-top .brand-block {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  min-width: 0;
}

.masthead-row-top .product {
  font-size: 1.65rem;
  white-space: nowrap;
}

.masthead-row-top .tagline {
  margin: 0;
  white-space: nowrap;
}

.masthead-nav {
  display: flex;
  gap: 1.15rem;
  margin-left: auto;
  align-items: baseline;
}

.masthead-nav-item {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--top-muted, var(--muted));
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.masthead-nav-item:hover {
  color: var(--top-ink, var(--ink));
}

.masthead-nav-item.active {
  color: var(--top-ink, var(--ink));
  border-bottom-color: var(--accent);
}

.live-status {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.04em;
  color: var(--top-muted, var(--muted));
  white-space: nowrap;
}

.masthead-row-search {
  display: flex;
  align-items: center;
  gap: 0.65rem 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.masthead-row-search .search-bar {
  flex: 1 1 18rem;
  max-width: 33rem;
  margin-top: 0;
}

.masthead-row-search .hunt-usecases-block {
  margin-top: 0;
}

.masthead-row-search .hunt-usecases-block > .filter-label {
  display: none; /* the pills speak for themselves in the masthead row */
}

.masthead-row-search .hunt-usecases {
  margin-top: 0;
}

/* Phones: the sticky mobile tabs drive the pane switch — the masthead nav
   would duplicate them, so it steps back. LIVE keeps the row honest. */
@media (max-width: 960px) {
  .masthead-nav {
    display: none;
  }

  .live-status {
    margin-left: auto;
  }
}

/* ── Rail headings (ITM INDEX / EVIDENCE BOARD) — mockup index-label style ── */
.pane-head {
  border-bottom: 0;
  padding-bottom: 0.35rem;
}

.pane-head h2 {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.45rem;
  flex: 1 1 auto;
}

.itm-index-attribution {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

/* Stream head: Newsreader title (topic name), mono count, red REFRESH text.
   The rail-heading underline above applies only to the side rails' labels. */
.pane-head-main h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
}

.pane-head-main .meta {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.stream-refresh,
.stream-refresh.ghost {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}

.stream-refresh:hover {
  filter: brightness(0.8);
}

/* ── Center report view (hunt report moved out of the rail) ── */
.report-head {
  margin-bottom: 0.75rem;
}

/* ── Evidence board rail: rows, EXTRACT TTPs, secondary text actions ── */
.extraction-board {
  border-bottom: 0;
}

.extraction-board-head h3 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.45rem;
  width: 100%;
}

.board-item {
  border-bottom: 1px dotted var(--line);
}

.board-extract-row {
  margin: 0.9rem 0 0;
}

.board-extract-btn {
  display: block;
  width: 100%;
  padding: 0.65rem;
  background: var(--ink);
  color: var(--btn-fg);
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.board-extract-btn:hover:not(:disabled) {
  filter: brightness(1.35);
}

.board-extract-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.board-secondary-actions {
  margin-top: 0.65rem;
}

.board-secondary-actions .copy-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.board-secondary-actions .copy-btn:hover:not(:disabled) {
  color: var(--accent);
}

.board-secondary-actions .copy-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOSSIER THEME — high-fidelity overrides (default theme).
   The card structure above is theme-agnostic; these tune the exact classified-
   file look from the design handoff. Scoped to [data-theme="dossier"] so the
   cnn-lite / midnight / phosphor backup themes are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Masthead: 2px ink underline; tagline + search in typewriter type */
[data-theme="dossier"] .top {
  border-bottom-width: 2px;
}

[data-theme="dossier"] .tagline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

[data-theme="dossier"] .search-bar input {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

[data-theme="dossier"] .search-bar input::placeholder {
  color: var(--muted);
}

/* Panes sit on the page (kraft) so the cream case cards lift off it */
[data-theme="dossier"] .pane,
[data-theme="dossier"] .pane-matrix {
  background: var(--paper);
}

/* Rail headings in the reused "index label" style (side rails only — the
   center stream title stays Newsreader). */
[data-theme="dossier"] .pane-matrix .pane-head h2,
[data-theme="dossier"] .pane-workbench .pane-head h2 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

/* Case cards: cream body on kraft, Newsreader headline up to the design size */
[data-theme="dossier"] .article-item h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  max-width: 56ch;
}

[data-theme="dossier"] .analyst-note {
  background: #efe9d9;
  border-left-color: #211d16;
}

[data-theme="dossier"] .analyst-note .snip {
  color: #4a4438;
  font-size: 0.94rem;
}

/* Dashed hunt-term chips in the faint kraft tone from the tokens */
[data-theme="dossier"] .term-chip {
  border-color: #a89e87;
  color: #4a4438;
}

[data-theme="dossier"] .term-chip:hover,
[data-theme="dossier"] .term-chip:focus-visible {
  border-color: #211d16;
  background: #efe9d9;
  color: #a8352a;
}

/* View tweaks (design-handoff pack): density / layout / redaction, keyed off
   data-* attributes the inline head script and app.js stamp on <html>.
   The whole site sizes in rem, so density is one root font-size change. */
html[data-density="compact"] {
  font-size: 13.5px;
}

html[data-density="comfy"] {
  font-size: 18px;
}

html[data-layout="stacked"] .pane-grid {
  grid-template-columns: 1fr !important;
}

html[data-layout="stacked"] .pane-matrix,
html[data-layout="stacked"] .pane-workbench {
  position: static !important;
  max-height: none !important;
}

html[data-layout="stacked"] .pane {
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

/* Redaction bars over fact values and analyst notes. */
html[data-redacted="true"] .case-record-list dd,
html[data-redacted="true"] .analyst-note {
  background: var(--ink);
  color: transparent;
  user-select: none;
}

html[data-redacted="true"] .case-record-list dd *,
html[data-redacted="true"] .analyst-note * {
  color: transparent !important;
}

.view-tweaks .redact-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.view-tweaks input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
}

/* Inline SHOW MORE / SHOW LESS bar under the clamped analyst note. Continues
   the card box the same way .case-read-tail does. */
.note-more {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0.3rem 1.1rem 0.4rem;
  background: var(--panel);
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  cursor: pointer;
}

.note-more:hover {
  color: var(--focus);
  background: var(--hover);
}

/* Copy-card button (⧉) — sits with the footer actions; the glyph carries it. */
.article-copy-btn {
  border: 0;
  background: none;
  padding: 0 0.2rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.article-copy-btn:hover {
  color: var(--accent);
}

/* Source-truncation notice inside the analyst note — only meaningful once the
   note is un-clamped, so it stays hidden while the card is collapsed. */
.analyst-note .note-truncated {
  display: none;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.article-row.expanded .analyst-note .note-truncated {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design handoff: onboarding intro, panel chrome, PANELS row, signal slider,
   Settings pane, board ⋯ menu, TRENDING rail.
   ═══════════════════════════════════════════════════════════════════════ */

/* Masthead ? help button */
.masthead-help {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--top-line, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--top-muted, var(--muted));
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.masthead-help:hover {
  color: var(--top-ink, var(--ink));
  border-color: var(--accent);
}

/* Intro panel — minimize-only onboarding under the masthead */
.intro-panel {
  margin: 0.85rem 0 0.35rem;
  border: 1px solid var(--top-line, var(--line));
  background: var(--panel);
}

.intro-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.intro-panel.minimized .intro-head {
  border-bottom: 0;
}

.intro-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.intro-flow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.head-spacer {
  flex: 1 1 auto;
}

.intro-panel.minimized .intro-body {
  display: none;
}

.intro-body {
  padding: 0.9rem 1rem 1rem;
}

.intro-lede {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.intro-lede-text {
  flex: 1 1 26rem;
  min-width: 0;
}

.intro-headline {
  margin: 0 0 0.4rem;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.25;
  color: var(--ink);
}

.intro-copy {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.intro-gotit {
  flex: 0 0 auto;
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--btn-fg, #fff);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.intro-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.intro-step {
  border: 1px solid var(--line);
  padding: 0.6rem 0.75rem;
}

.intro-step p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.intro-step-title {
  font-family: var(--font-mono);
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent) !important;
  margin-bottom: 0.3rem !important;
}

.intro-try {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
}

.intro-try-label,
.intro-try-hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--muted);
}

.intro-try-hint {
  font-weight: 400;
}

/* Panel chrome: collapse (−/+) and hide (✕) buttons */
.panel-collapse,
.panel-hide {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.panel-collapse:hover,
.panel-hide:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* PANELS row */
.panels-row {
  display: flex;
  align-items: center;
  gap: 0.55rem 0.9rem;
  flex-wrap: wrap;
  padding: 0.45rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.panels-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.panel-toggles {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.panel-toggle-box {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  font-size: 0.6rem;
  line-height: 1;
}

.panel-toggle-hidden {
  color: var(--accent);
  border-color: var(--accent);
}

.status-line {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TRENDING rail panel */
.trending-explainer,
.itm-rail-explainer {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.trending-todo,
.settings-todo {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--accent);
}

/* Refine summary note + signal slider */
.refine-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--top-muted, var(--muted));
}

.filter-group-signal {
  max-width: 24rem;
}

.filter-group-signal input[type="range"] {
  display: block;
  width: 100%;
  margin: 0.4rem 0 0.15rem;
  accent-color: var(--accent);
}

.signal-value {
  color: var(--accent);
  font-weight: 700;
}

.signal-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--top-muted, var(--muted));
}

/* Settings pane */
.pane-settings .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0.9rem;
  align-items: start;
}

.settings-section {
  border: 1px solid var(--line);
  background: var(--panel);
}

.settings-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.settings-section.collapsed .settings-head {
  border-bottom: 0;
}

.settings-head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.todo-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

.settings-body {
  padding: 0.75rem 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.settings-check input {
  accent-color: var(--accent);
}

.settings-input {
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  max-width: 20rem;
}

.kbd-ref {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.85rem;
}

.kbd-ref dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
}

.kbd-ref dd {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.settings-add-btn {
  align-self: flex-start;
  padding: 0.45rem 0.85rem;
  border: 1px dashed var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.settings-add-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.source-inventory {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.source-inventory li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}

.source-inv-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.source-inv-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.source-inv-desc {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}

.source-chip {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  color: var(--muted);
}

.source-chip-active {
  color: var(--signal, var(--accent));
  background: var(--signal-soft, transparent);
  border-color: transparent;
}

.pub-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pub-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--accent-soft, transparent);
}

/* Evidence board ⋯ overflow menu */
.extraction-board-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.board-menu-wrap {
  position: relative;
  margin-left: auto;
}

.board-menu-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.board-menu-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.board-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 11rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.board-menu[hidden] {
  display: none;
}

.board-menu-item {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.board-menu-item:last-child {
  border-bottom: 0;
}

.board-menu-item:hover:not(:disabled) {
  background: var(--accent-soft, transparent);
}

.board-menu-item:disabled {
  color: var(--muted);
  opacity: 0.55;
  cursor: not-allowed;
}

/* Full-width workbench explainer */
.wb-intro {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.wb-intro-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  color: var(--ink);
}

.wb-intro-copy {
  margin: 0;
  max-width: 72ch;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Keyboard hints off (Settings ▸ Appearance) */
html[data-kbd-hints="off"] .kbd-hint {
  display: none !important;
}

/* Mid-width masthead: keep the nav on-screen by letting it wrap under the
   brand instead of forcing a horizontal scroll (~900px was a known issue). */
@media (max-width: 1080px) {
  .masthead-row-top .brand-block {
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
  }

  .masthead-nav {
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
  }
}

/* Short viewports (phone landscape): the intro and PANELS chrome yield the
   vertical space — must live after their base rules in the cascade. */
@media (max-height: 520px) and (max-width: 960px) {
  .intro-panel,
  .panels-row {
    display: none;
  }
}

/* Takeover panes (Workbench / Settings) hide the stream-only header chrome. */
body[data-pane="workbench"] .refine-panel,
body[data-pane="workbench"] .panels-row,
body[data-pane="settings"] .refine-panel,
body[data-pane="settings"] .panels-row,
body[data-pane="evidence"] .refine-panel,
body[data-pane="evidence"] .panels-row {
  display: none;
}

.signal-ticks {
  gap: 0.4rem;
}

/* ▲ TRENDING rows — [CHANNEL] tag, signal-colored delta, one-line topic. */
.trending-list {
  display: flex;
  flex-direction: column;
}

.trend-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0;
  border: 0;
  border-bottom: 1px dashed var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-mono);
}

.trend-row:last-child {
  border-bottom: 0;
}

.trend-row:hover .trend-label {
  color: var(--accent);
}

.trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.trend-src {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.trend-count {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text, var(--fg));
  margin-left: auto;
}

.trend-delta {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--signal, var(--accent));
}

.trend-delta.trend-down,
.trend-delta.trend-flat {
  color: var(--muted);
}

.trend-label {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink);
}

.trending-empty {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Redesign shell (2026-08): corpus stats, status band, footer --- */
.ii-corpus {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.ii-statusline {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  gap: 0.9rem;
}
.ii-lanes {
  white-space: pre;
}
.ii-lanes.ii-lanes-ok {
  color: var(--signal);
}
.ii-clock {
  margin-left: auto;
}
.ii-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.4rem;
}
.ii-foot-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.ii-foot-links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ii-foot-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ii-foot-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.ii-foot-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ii-kbd {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}
.ii-foot-theme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.ii-foot-theme select {
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius, 2px);
  font: inherit;
  padding: 0.25rem 0.4rem;
}

/* Short phone-landscape viewports hide chrome (matches .site-footer rule
   above — re-stated because .ii-footer's flex display lands later). */
@media (max-height: 520px) and (max-width: 960px) {
  .ii-footer {
    display: none;
  }
}

/* --- Redesign regrid (2026-08): stream = content + one right rail --- */
@media (min-width: 1024px) {
  .app-shell:not([data-pane="workbench"]):not([data-pane="settings"]):not([data-pane="evidence"]):not([data-pane="about"]) .pane-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .app-shell:not([data-pane="workbench"]):not([data-pane="settings"]):not([data-pane="evidence"]):not([data-pane="about"]) .pane-articles {
    order: 1;
    border-right: 0;
    border-left: 0;
  }
  .app-shell:not([data-pane="workbench"]):not([data-pane="settings"]):not([data-pane="evidence"]):not([data-pane="about"]) .left-rail {
    order: 2;
    border-left: 1px solid var(--line);
  }
  /* The evidence board lives on the WORKBENCH takeover now, not the stream. */
  .app-shell:not([data-pane="workbench"]) .pane-workbench {
    display: none;
  }
}

/* ABOUT takeover pane */
.pane-about-page {
  display: none;
}
.app-shell[data-pane="about"] .pane-about-page {
  display: block;
}
.app-shell[data-pane="about"] .pane-grid {
  grid-template-columns: 1fr;
}
.app-shell[data-pane="about"] .left-rail,
.app-shell[data-pane="about"] .pane-articles,
.app-shell[data-pane="about"] .pane-workbench {
  display: none;
}
.ii-about p {
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 72ch;
}
.ii-about-facts {
  max-width: 80ch;
  margin: 1rem 0 0;
}
.ii-about-facts dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 0.8rem;
}
.ii-about-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* --- Redesign fidelity pass (2026-08-10): match the prototype's chrome --- */

/* Masthead: bigger serif brand, dark active nav pill, subdued LIVE chip. */
.product {
  font-size: 1.9rem;
}
.masthead-nav-item.active {
  background: var(--ink);
  color: var(--btn-fg);
  border-radius: var(--radius, 2px);
}
.live-status {
  font-size: 0.6rem;
  opacity: 0.8;
}

/* Search: one bordered query line, no big SEARCH button. Enter submits. */
.search-bar {
  border: 1px solid var(--line);
  background: var(--input-bg);
  border-radius: var(--radius, 2px);
  padding: 0.55rem 0.75rem;
}
.search-bar:focus-within {
  border-color: var(--focus);
}
.search-bar input {
  border: 0;
  background: none;
  outline: none;
}
.search-bar .hunt-submit {
  display: none;
}

/* Stream rail (redesign): no per-panel window chrome, no TRENDING pane —
   the rail is the techniques tally + the evidence ledger only. */
@media (min-width: 1024px) {
  .app-shell:not([data-pane="workbench"]):not([data-pane="settings"]):not([data-pane="evidence"]):not([data-pane="about"]) .left-rail .pane-trending {
    display: none;
  }
  .left-rail .panel-collapse,
  .left-rail .panel-hide {
    display: none;
  }
}

/* Rail rows: dark id chip, name, thin bar, count — prototype treatment. */
.matrix-tech-id {
  background: var(--ink);
  color: var(--btn-fg);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius, 2px);
  font-weight: 700;
}
.itm-rail-btn:hover .matrix-tech-title {
  color: var(--accent);
}

/* Chips: technique ids dark, operator terms tinted with signal. */
.itm-id-chip {
  background: var(--ink);
  color: var(--btn-fg);
  border-color: var(--ink);
}
.term-chip {
  background: var(--signal-soft);
  border-color: transparent;
  color: var(--ink);
}

/* Fidelity: kill the legacy SEARCH button for real (specificity), and strip
   the stream header's window chrome + inline kbd hint — the prototype keeps
   shortcuts in the footer only. */
.search-bar button.hunt-submit {
  display: none;
}
.pane-articles .pane-head .panel-collapse,
.pane-articles .pane-head .panel-hide,
.pane-articles .pane-head .kbd-hint {
  display: none;
}

/* Wire Light (cnn-lite): pure-black ink makes the solid-ink highlight
   elements read as harsh black boxes on the white page. Use the theme's
   red instead — white-on-red is the wire-service idiom, and softer than
   black-on-white at these sizes. */
[data-theme="cnn-lite"] .masthead-nav-item.active,
[data-theme="cnn-lite"] .matrix-tech-id,
[data-theme="cnn-lite"] .itm-id-chip {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
[data-theme="cnn-lite"] .case-tab {
  background: var(--accent);
  color: #ffffff;
}