:root {
  --bg: #fff;
  --fg: #1a1a1a;
  --muted: #666;
  --line: #e3e3e3;
  --line-strong: #c8c8c8;
  --accent: #1a4f8b;
  --accent-bg: #eaf2fb;
  --warn: #b34a00;
  --row-hover: #f4f7fb;
  --code-bg: #f6f6f4;
  /* Lifecycle palette — must match LIFECYCLE_COLOR in assets/state.js. Both
     CSS rules (text-color pills, lifeline svg) and JS-rendered map points read
     from this single source. */
  --lc-persistent:       #3a7553;
  --lc-late-emerging:    #955d2e;
  --lc-early-decaying:   #7a4caf;
  --lc-transitional:     #3f78a8;
  --lc-mixed-ambiguous:  #6e6e6e;
  --lc-unknown:          #6e6e6e;
  /* Shared page-width budget so the header bar's content edges align with the page content
     edges across every view. `--page-w-wide` is kept as an alias of `--page-w` so the map
     and token-map views — which used to claim extra horizontal room — share the same edges
     as the text views. */
  --page-w: 1100px;
  --page-w-wide: var(--page-w);
  --page-pad-x: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
/* `overflow-x: clip` keeps fixed-position drawers (dc-drawer) from contributing
   to body scroll-width when transformed offscreen, without breaking sticky
   position the way `overflow-x: hidden` would. */
html, body { overflow-x: clip; }
/* Reserve scrollbar gutter so the page doesn't shift sideways when navigating
   between a short view (welcome — fits in viewport, no scrollbar) and a tall
   one (table, promotes results — scrollbar appears). Modern browsers reserve
   the gutter without always painting the scrollbar; older browsers ignore the
   property and fall back to the previous behavior. */
html { scrollbar-gutter: stable; }
body { font-size: 13px; line-height: 1.4; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: "SF Mono", Menlo, Consolas, monospace; }

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  position: fixed;
  left: 8px; top: 8px;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 7px 14px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Focus visibility — single source for keyboard focus rings on every
   interactive element (button, anchor, table headers, rows acting as buttons,
   chips, etc.). UA's dotted outline replaced with a high-contrast accent
   ring. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Tighter offset on dense list items where the 2px outset would clip neighbors. */
.row:focus-visible,
.thead .th:focus-visible,
.cmp-cand:focus-visible,
.fp-relation-row:focus-visible,
.cluster-card:focus-visible {
  outline-offset: -2px;
}

/* Shared utility classes — additive only; existing component classes still
   own their own padding/borders. Use .panel for the flat tool/control surface
   that should NOT visually compete with item cards. */
.panel-flat {
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
}
/* Generic touch-target sizing for ×-style chip clear buttons on mobile. */
.touch-target {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

header.bar {
  border-bottom: 1px solid var(--line-strong);
  background: #fafafa;
  position: sticky; top: 0; z-index: 5;
}
header.bar { position: sticky; }
header.bar .bar-inner { position: relative; }

/* Selected-feature pill — compact chip sitting at the right edge of the nav
   row. When no feature is selected the chip is `.hidden` and absent from the
   layout. `role=status` + `aria-live=polite` live on the element directly so
   keyboard / screen-reader users hear the selection change. */
.selected-feature-pill {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  font-size: 12px;
  font-weight: 400;
  padding: 3px 4px 3px 10px;
  border: 1px solid rgba(180, 130, 40, 0.28);
  background: rgba(255, 230, 180, 0.4);
  color: var(--fg);
  border-radius: 999px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.selected-feature-pill.hidden { display: none; }
.selected-feature-pill .sfp-icon { font-size: 10px; color: #b07d2a; }
.selected-feature-pill .sfp-id {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--fg);
}
.selected-feature-pill .sfp-meta { color: var(--muted); }
.selected-feature-pill a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.selected-feature-pill a:hover { text-decoration: underline; }
.selected-feature-pill .sfp-clear {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.selected-feature-pill .sfp-clear:hover { color: var(--warn); background: rgba(0,0,0,0.04); }
/* Airy, two-row header. Row 1 = brand + about + model-toggle + meta-chip + help.
   Row 2 = section nav with optional selected-feature pill at the right edge.
   Row 3 (when present) = compact breadcrumb. Padding on bar-inner is the
   generous-vertical chrome that gives the header band a clear identity; data
   zones below stay tight. Width budget matches --page-w so the bar edges line
   up with text-view content edges. */
header.bar .bar-inner {
  max-width: calc(var(--page-w) + 2 * var(--page-pad-x));
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* On the map and token-map views the canvas budget is `--page-w-wide`, so widen
   the header to match — otherwise the map content would extend past the bar's
   right edge and the page would feel uncentered. JS stamps body[data-view] in
   handleHashChange's show() helper. */
body[data-view="map"] header.bar .bar-inner,
body[data-view="tokenmap"] header.bar .bar-inner {
  max-width: calc(var(--page-w-wide) + 2 * var(--page-pad-x));
}
header.bar .title-block {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
}
header.bar h1 {
  /* Short product title — paper title moved to the about popover. */
  font-size: 17px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  white-space: nowrap;
  line-height: 1.2;
}
header.bar .brand { display: inline-flex; align-items: baseline; color: inherit; min-width: 0; transition: opacity 0.12s; }
header.bar .brand:hover { text-decoration: none; opacity: 0.7; }
header.bar .brand:hover h1 { color: var(--fg); }
header.bar .bar-about-btn {
  font: inherit;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.4;
}
header.bar .bar-about-btn:hover,
header.bar .bar-about-btn[aria-expanded="true"] {
  background: var(--accent-bg);
  color: var(--accent);
}
header.bar .title-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}
header.bar .bar-tools { display: inline-flex; align-items: center; gap: 8px; }
header.bar .meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
header.bar .meta-chip {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 6px;
  line-height: 1.4;
}
header.bar .meta-chip:empty { display: none; }
header.bar .meta-numeric { font-variant-numeric: tabular-nums; }

/* Paper-title popover */
.bar-about-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  z-index: 12;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 12px 36px 10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.bar-about-popover.hidden { display: none; }
.bar-paper-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}
.bar-about-meta { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.bar-about-close {
  position: absolute;
  top: 6px; right: 6px;
  font: inherit; font-size: 18px; line-height: 1;
  padding: 0 6px;
  background: transparent; border: 0; cursor: pointer; color: var(--muted);
}
.bar-about-close:hover { color: var(--fg); }

/* Breadcrumb — compact strip below the section nav on routes that have one.
   Negative top margin reels it back toward the nav row so it reads as a tight
   sub-strip of the header band rather than another full row of chrome. Smaller
   font + muted color keep it ignorable until you look for it. */
header.bar .crumb {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 0;
  padding: 0;
  margin-top: -6px;
  line-height: 1.3;
}
header.bar .crumb.crumb-empty { display: none; margin-top: 0; }
.crumb-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.crumb-link:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.crumb-sep { color: var(--line-strong); font-size: 11px; }
.crumb-cur {
  color: var(--fg);
  font-weight: 500;
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header.bar .bar-nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
header.bar nav.bar-nav {
  display: flex;
  align-items: center;
  border-top: 0;
  padding: 0;
  margin-top: 0;
  min-width: 0;
  flex: 1 1 auto;
  /* Horizontal scroll fallback on narrow viewports — preserves all links rather
     than dropping any. Scrollbar hidden via webkit; native scroll on touch. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
header.bar nav.bar-nav::-webkit-scrollbar { display: none; }
/* Mobile-only right-edge overflow cue: a fade-to-header-bg plus a chevron
   glyph hint that more nav links exist off-screen. Hidden by default; only
   shown when the nav is likely to overflow. Pure CSS — no JS. */
header.bar .bar-nav-wrap::after {
  content: '\203A';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 40px;
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(250,250,250,0), rgba(250,250,250,1) 60%);
}
@media (max-width: 660px) {
  header.bar .bar-nav-wrap::after { display: flex; }
}
header.bar .navlinks { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
header.bar .navlink {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--muted);
  border: 0;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}
header.bar .navlink:hover { background: rgba(0, 0, 0, 0.04); color: var(--fg); text-decoration: none; }
header.bar .navlink.active {
  background: rgba(26, 79, 139, 0.08);
  color: var(--accent);
  font-weight: 600;
}
header.bar .navlink.active:hover { background: rgba(26, 79, 139, 0.12); color: var(--accent); }
header.bar .navlink.nav-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;
}
header.bar .navlink.nav-disabled:hover {
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}

/* Segmented model toggle — one unified rounded chip; the three atlases are
   "these three are a related set." Outer border is the only frame; inner
   hairlines on right edges separate buttons. Active button fills with accent. */
.model-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.model-toggle .mt-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 13px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  min-height: 30px;
  transition: background 0.12s, color 0.12s;
}
.model-toggle .mt-btn:last-child { border-right: 0; }
.model-toggle .mt-btn:hover { background: rgba(0, 0, 0, 0.04); }
.model-toggle .mt-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.model-toggle .mt-btn[aria-pressed="true"]:hover { background: var(--accent); color: #fff; }
.model-toggle .mt-btn-coming-soon,
.model-toggle .mt-btn-coming-soon:hover {
  color: var(--muted);
  background: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.025),
    rgba(0, 0, 0, 0.025) 6px,
    transparent 6px,
    transparent 12px
  );
  cursor: not-allowed;
}
.model-toggle .mt-soon-tag {
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--muted);
  vertical-align: 1px;
}

/* Help / shortcuts trigger button — ghost circular */
.help-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  height: 30px;
  width: 30px;
  min-width: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.help-btn:hover { background: var(--accent-bg); color: var(--accent); }

/* Shortcuts dialog */
.shortcuts-dialog { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.shortcuts-dialog.hidden { display: none !important; }
.shortcuts-backdrop { position: absolute; inset: 0; background: rgba(20, 25, 30, 0.45); }
.shortcuts-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
  padding: 18px 22px 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.shortcuts-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.shortcuts-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.shortcuts-close {
  font: inherit; font-size: 22px; line-height: 1;
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  padding: 0 4px;
}
.shortcuts-close:hover { color: var(--fg); }
.shortcuts-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0;
  font-size: 13px;
}
.shortcuts-list dt { color: var(--fg); }
.shortcuts-list dt.grp {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.shortcuts-list dt.grp + dd { display: none; }
.shortcuts-list dd { margin: 0; color: var(--muted); }
.shortcuts-list kbd {
  display: inline-block;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #fafafa;
  color: var(--fg);
  line-height: 1.4;
  min-width: 14px;
  text-align: center;
}
.shortcuts-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }

main { padding: 12px 16px 32px; }

/* Shared page-hero — used by gallery and table to match welcome/tour weight */
.page-hero {
  max-width: var(--page-w);
  margin: 0 auto 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: 22px; margin: 0 0 8px; font-weight: 600; letter-spacing: -0.005em; }
.page-hero .lede { font-size: 14px; line-height: 1.6; color: var(--fg); margin: 0 0 8px; max-width: 70ch; }
.page-hero .lede:last-child { margin-bottom: 0; }
.page-hero .lede b { font-weight: 600; }
.page-hero .lede-sub { font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 72ch; margin: 0; }

/* About-this-atlas disclosure (lives inside the table page-hero now) */
.about-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafafa;
}
.about-panel > summary {
  cursor: pointer;
  user-select: none;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  list-style: none;
}
.about-panel > summary::-webkit-details-marker { display: none; }
.about-panel > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.12s;
}
.about-panel[open] > summary::before { transform: rotate(90deg); }
.about-panel > summary:hover { color: var(--accent); }
.about-panel[open] > summary { border-bottom: 1px solid var(--line); color: var(--fg); }
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 4px 24px;
  padding: 12px 14px 14px;
}
.about-grid h4 { margin: 6px 0 2px; font-size: 12px; color: var(--fg); }
.about-grid p { margin: 0 0 4px; font-size: 12px; line-height: 1.5; color: #333; max-width: 56ch; }
.about-grid code { font-family: "SF Mono", Menlo, Consolas, monospace; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 0 3px; font-size: 11.5px; }
.about-grid sub { font-size: 9px; }

/* Lifecycle legend chips */
.lc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
}
/* When the legend lives inside the table toolbar, pin it to the top of the
   viewport so users always see the color → lifecycle mapping for the row
   stripes that just replaced the lifecycle text column. */
.table-toolbar .lc-legend {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fafafa;
  padding: 4px 0;
}
.lc-legend::before {
  content: 'lifecycle:';
  color: var(--muted);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.lc-chip {
  font: inherit;
  padding: 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: var(--muted);
}
.lc-chip:hover { background: var(--accent-bg); border-color: var(--accent); }
.lc-chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--fg); font-weight: 600; }
.lc-chip.lc-persistent { color: var(--lc-persistent); }
.lc-chip.lc-late-emerging { color: var(--lc-late-emerging); }
.lc-chip.lc-early-decaying { color: var(--lc-early-decaying); }
.lc-chip.lc-transitional { color: var(--lc-transitional); }
.lc-chip.lc-mixed-ambiguous { color: var(--lc-mixed-ambiguous); }
.lc-chip.lc-clear { color: var(--muted); font-style: italic; }
/* Redundant non-color signal: short glyph next to every lifecycle name. Using
   pseudo-elements so existing markup that just contains the lifecycle string
   inherits the icon automatically. Glyphs are direction/lifecycle metaphors:
   ━ persistent (constant), ↗ late-emerging (rising), ↘ early-decaying (falling),
   ▲ transitional (peak), ◌ mixed/ambiguous (uncertain). */
.lc-chip.lc-persistent .lc-name::before,
.lifecycle.lc-persistent::before { content: '━ '; font-weight: 700; }
.lc-chip.lc-late-emerging .lc-name::before,
.lifecycle.lc-late-emerging::before { content: '↗ '; font-weight: 700; }
.lc-chip.lc-early-decaying .lc-name::before,
.lifecycle.lc-early-decaying::before { content: '↘ '; font-weight: 700; }
.lc-chip.lc-transitional .lc-name::before,
.lifecycle.lc-transitional::before { content: '▲ '; font-weight: 700; }
.lc-chip.lc-mixed-ambiguous .lc-name::before,
.lifecycle.lc-mixed-ambiguous::before { content: '◌ '; font-weight: 700; }

/* Active-filter chip row (shows what's currently filtering the table) */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
}
.active-filters::before {
  content: 'filtering by:';
  color: var(--muted);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.filt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--fg);
}
.filt-chip .k { color: var(--muted); }
.filt-chip .v { font-family: "SF Mono", Menlo, Consolas, monospace; }
.filt-chip .x {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  border-radius: 50%;
}
.filt-chip .x:hover { color: var(--warn); }
@media (pointer: coarse), (max-width: 720px) {
  .filt-chip .x { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
}
.filt-clear-all {
  font: inherit;
  font-size: 11px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  margin-left: 4px;
}
.filt-clear-all:hover { color: var(--accent); }

/* Copy-link button */
.copy-link-btn {
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  margin-left: 8px;
  color: var(--accent);
}
.copy-link-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.copy-link-btn.copied {
  background: #e7f4ea;
  border-color: #1a8b4a;
  color: #1a8b4a;
}

/* Table controls — light panel grouping toolbar + active filters + filters */
.table-controls {
  max-width: var(--page-w);
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafafa;
  padding: 10px 12px 12px;
}
.table-controls .table-toolbar { margin-bottom: 0; }
.table-controls .active-filters { margin: 8px 0 0; }

.f-hide-common-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 0 6px 0 0;
  border-right: 1px solid var(--line);
  margin-right: 2px;
  cursor: pointer;
  user-select: none;
}
.f-hide-common-toolbar input { margin: 0; }

/* Virtualized table */
.table-wrap {
  max-width: var(--page-w);
  margin: 0 auto;
  border: 1px solid var(--line);
  position: relative;
}
.thead {
  display: grid;
  grid-template-columns: var(--cols);
  border-bottom: 1px solid var(--line-strong);
  background: #f7f7f3;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: #4a4a4a;
  text-transform: lowercase;
  /* Sticky within the scrollable viewport: stays pinned at top during vertical scroll,
     scrolls horizontally with the rows so column alignment is always preserved. */
  position: sticky;
  top: 0;
  z-index: 2;
  /* Soft drop shadow gives a clear visual cue that the header is floating over scrolled
     content (more visible than a 1px hairline once rows pass under it). */
  box-shadow: 0 1px 0 var(--line-strong), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
  /* Match natural width of the column grid even when it exceeds the viewport, so the
     viewport's horizontal scroll moves rows and header together. */
  width: max-content;
  min-width: 100%;
}
.thead .th {
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.08s linear;
}
.thead .th.th-num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.thead .th:hover { background: var(--accent-bg); color: var(--accent); }
.thead .th.is-sorted {
  background: var(--accent-bg);
  color: var(--accent);
}
.thead .th .arrow {
  color: var(--muted);
  font-size: 9px;
  min-width: 8px;
  display: inline-block;
}
.thead .th.is-sorted .arrow { color: var(--accent); font-weight: 700; }

.viewport {
  position: relative;
  height: 70vh;
  overflow: auto;
}
.rows {
  position: relative;
  /* height set by JS to (N rows × ROW_H) so the viewport scrollbar reflects total list size.
     Width is implicit — abs-positioned child rows size themselves by their grid template. The
     sticky .thead is the in-flow element that drives the viewport's horizontal scrollWidth. */
}
.row {
  display: grid;
  grid-template-columns: var(--cols);
  height: 26px; line-height: 26px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: background 0.05s linear;
  background: #fff;
}
.row.is-even { background: #fcfcfa; }
.row:hover { background: rgba(26, 79, 139, 0.04); }
.row .cell {
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
/* No per-cell vertical dividers; sorted column gets a subtle tinted column band. */
.row .cell.is-sorted { background: rgba(26, 79, 139, 0.03); }
.row:hover .cell.is-sorted { background: rgba(26, 79, 139, 0.07); }
.cell.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 12px; }
.cell.tok { font-family: "SF Mono", Menlo, Consolas, monospace; background: transparent; }
.row.is-even .cell.tok { background: transparent; }
.cell.lifecycle { font-size: 11px; }

/* Lifecycle stripe: 5px-wide left-edge color bar per row, painted as a ::before
   on the sticky id column so it stays pinned to the viewport's left edge during
   horizontal scroll. Replaces the lifecycle text column in the default view;
   users still see the category on the row's `title` hover, in the hover preview
   card, and on the feature page header. */
.row .cell.is-sticky-l0::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--lc-unknown);
  z-index: 2;
  pointer-events: none;
}
.row.row-lc-persistent      .cell.is-sticky-l0::before { background: var(--lc-persistent); }
.row.row-lc-late-emerging   .cell.is-sticky-l0::before { background: var(--lc-late-emerging); }
.row.row-lc-early-decaying  .cell.is-sticky-l0::before { background: var(--lc-early-decaying); }
.row.row-lc-transitional    .cell.is-sticky-l0::before { background: var(--lc-transitional); }
.row.row-lc-mixed-ambiguous .cell.is-sticky-l0::before { background: var(--lc-mixed-ambiguous); }
.row.row-lc-unknown         .cell.is-sticky-l0::before { background: var(--lc-unknown); }
/* Match in the thead so the stripe column reads visually as a column slot, not
   a one-off row decoration. */
.thead .th:first-child { padding-left: 12px; }
.row .cell.is-sticky-l0 { padding-left: 12px; }

/* In-cell horizontal bar. Filled to --bar width; sits at the bottom edge so the cell text
   stays the primary readable element. */
.cell.has-bar::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 2px;
  background: rgba(26, 79, 139, 0.12);
  border-radius: 2px;
}
.cell.has-bar::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 1px;
  width: calc((100% - 8px) * var(--bar, 0));
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.55;
}
.row:hover .cell.has-bar::after { opacity: 0.85; }

/* Sign-tinted background for the growth-@1k delta column. JS only sets the
   inline --mag for cells above an absolute threshold (|growth| >= 0.02), so
   small noise stays unhighlighted and only the meaningful gainers/losers tint. */
.cell.delta.pos { background: linear-gradient(90deg, transparent, rgba(40, 160, 80, calc(var(--mag, 0) * 0.28))); }
.cell.delta.neg { background: linear-gradient(90deg, transparent, rgba(180, 60, 60, calc(var(--mag, 0) * 0.28))); }
.lc-persistent { color: var(--lc-persistent); font-weight: 600; }
.lc-late-emerging { color: var(--lc-late-emerging); font-weight: 600; }
.lc-early-decaying { color: var(--lc-early-decaying); font-weight: 600; }
.lc-transitional { color: var(--lc-transitional); font-weight: 600; }
.lc-mixed-ambiguous { color: var(--lc-mixed-ambiguous); }
.lc-unknown { color: var(--lc-unknown); }

/* Feature detail view */
.feature-view { max-width: var(--page-w); margin: 0 auto; }
.feature-header {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 8px; margin-bottom: 12px;
}
.feature-header h2 { margin: 0; font-size: 18px; }
.feature-header .lifecycle { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--accent-bg); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 8px 16px;
  margin-bottom: 16px;
}
.stat { padding: 6px 8px; background: #fafafa; border: 1px solid var(--line); border-radius: 3px; }
.stat[title] { cursor: help; }
.stat[title]:hover { background: var(--accent-bg); border-color: var(--line-strong); }
.stat .k { font-size: 11px; color: var(--muted); }
.stat[title] .k { border-bottom: 1px dotted var(--line-strong); display: inline-block; padding-bottom: 1px; }
.stat .v { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }

.section { margin: 18px 0; }
.section h3 { font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.trajectories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.traj-card { border: 1px solid var(--line); border-radius: 4px; padding: 8px; background: #fff; }
.traj-card .title { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.section h3 .legend { font-size: 10px; font-weight: normal; color: var(--muted); margin-left: 8px; text-transform: none; letter-spacing: 0; }

/* Concept badges */
.concept-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cbadge { display: inline-flex; gap: 4px; align-items: baseline;
  padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fbfaf3; cursor: pointer; font-size: 12px; }
.cbadge:hover { background: var(--accent-bg); border-color: var(--accent); }
.cbadge .hits { color: var(--muted); font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 10px; }

/* Step-1000 delta column color cue */
.row .cell.delta.pos { color: #1a7a3a; }
.row .cell.delta.neg { color: #b03030; }
.row .cell.concept-cell { padding: 0 8px; display: flex; align-items: center; }
/* In-row concept tag: borderless soft tinted chip matching the token-chip
   treatment. Concept badges elsewhere (.cbadge, feature-page) still use their
   own bordered style. */
.row .cell.concept-cell .concept-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(184, 148, 0, 0.10);
  border: 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #5a4a1a;
  line-height: 1.55;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row.is-even .cell.concept-cell .concept-tag { background: rgba(184, 148, 0, 0.13); }
.row:hover .cell.concept-cell .concept-tag { background: rgba(184, 148, 0, 0.18); }
.concept-empty { color: var(--muted); font-size: 11px; }

/* Lifeline column — inline glyph encoding first-active → peak → terminal on log-step axis */
.row .cell.lifeline-cell { padding: 0 6px; display: flex; align-items: center; }
svg.lifeline { display: block; width: 100%; height: 18px; overflow: visible; }
svg.lifeline .ll-axis { stroke: var(--line); stroke-width: 1; }
svg.lifeline .ll-trans { stroke: #b89400; stroke-width: 1; stroke-dasharray: 1.5 1.5; opacity: 0.6; }
svg.lifeline .ll-tick { stroke: var(--muted); stroke-width: 1; }
svg.lifeline .ll-bar { stroke-width: 3; stroke-linecap: round; opacity: 0.65; }
svg.lifeline .ll-peak { stroke: none; }
svg.lifeline .ll-bar.ll-persistent,    svg.lifeline .ll-peak.ll-persistent    { stroke: var(--lc-persistent); fill: var(--lc-persistent); }
svg.lifeline .ll-bar.ll-late-emerging, svg.lifeline .ll-peak.ll-late-emerging { stroke: var(--lc-late-emerging); fill: var(--lc-late-emerging); }
svg.lifeline .ll-bar.ll-early-decaying,svg.lifeline .ll-peak.ll-early-decaying{ stroke: var(--lc-early-decaying); fill: var(--lc-early-decaying); }
svg.lifeline .ll-bar.ll-transitional,  svg.lifeline .ll-peak.ll-transitional  { stroke: var(--lc-transitional); fill: var(--lc-transitional); }
svg.lifeline .ll-bar.ll-mixed-ambiguous,svg.lifeline .ll-peak.ll-mixed-ambiguous{ stroke: var(--lc-mixed-ambiguous); fill: var(--lc-mixed-ambiguous); }
svg.lifeline .ll-bar.ll-unknown,        svg.lifeline .ll-peak.ll-unknown        { stroke: var(--lc-unknown); fill: var(--lc-unknown); }

.tokens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.tokens-card { border: 1px solid var(--line); border-radius: 4px; }
.tokens-card.random-baseline { border-style: dashed; opacity: 0.85; }
.tokens-card.random-baseline .head { background: #fef6e8; color: #8a6d00; font-style: italic; }
.tokens-card .head { padding: 6px 8px; border-bottom: 1px solid var(--line); background: #fafafa; font-size: 11px; color: var(--muted); }
.tokens-card table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tokens-card td { padding: 2px 8px; border-bottom: 1px solid #f0f0f0; }
.tokens-card td.tok { font-family: "SF Mono", Menlo, Consolas, monospace; background: var(--code-bg); white-space: pre; }
.tokens-card td.logit { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.neighbors { display: flex; flex-wrap: wrap; gap: 6px; }
.neighbor { padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; font-size: 12px; }
.neighbor:hover { background: var(--accent-bg); }
.neighbor .sim { color: var(--muted); margin-left: 6px; font-size: 11px; }
.neighbor .top1 { color: var(--muted); margin-left: 6px; font-family: "SF Mono", Menlo, Consolas, monospace; }

.hidden { display: none !important; }
.loading { padding: 18px; color: var(--muted); }

/* Cross-atlas siblings (slim summary) */
.siblings-slim {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.sib-slim-list { display: flex; flex-direction: column; gap: 4px; }
.sib-slim-target-wrap { display: flex; flex-direction: column; gap: 4px; }
.sib-slim-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
}
.sib-slim-row.sib-slim-empty { color: var(--muted); font-style: italic; }
.sib-slim-target {
  font-weight: 600;
  min-width: 90px;
  color: #333;
}
.sib-slim-detail { color: var(--muted); font-variant-numeric: tabular-nums; }
.sib-slim-id {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.sib-slim-id:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sib-slim-concept { font-size: 11px; color: #555; }
.sib-slim-concept.cmatch { color: #1a7a3a; font-weight: 600; }
.sib-slim-mut {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  padding: 0 4px;
  border: 1px solid var(--accent);
  border-radius: 2px;
}
.sib-slim-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.sib-slim-cta:hover { background: #143e6e; border-color: #143e6e; }
.sib-slim-more {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}
.sib-slim-more:hover { border-color: var(--accent); color: var(--accent); }
.sib-slim-more[aria-expanded="true"] {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.sib-slim-expanded {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  margin-left: 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-bg, #f7fbff);
  border-radius: 0 3px 3px 0;
}
.sib-slim-expanded[hidden] { display: none; }
.siblings-empty { padding: 6px 4px; color: var(--muted); font-size: 12px; font-style: italic; }

/* Snippets */
.snip-autoreg {
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: #fbfaf3;
  border-left: 3px solid #b89400;
  font-size: 12px;
  color: #333;
  line-height: 1.5;
  max-width: 760px;
}
.snip-autoreg code { font-family: "SF Mono", Menlo, Consolas, monospace; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 0 3px; font-size: 11px; }
.snip-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.snip-card { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: #fff; }
.snip-head { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.snip-head .snip-score { font-family: "SF Mono", Menlo, Consolas, monospace; }
.snip-text {
  margin: 0;
  white-space: pre-wrap;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  word-break: break-word;
}
.snip-text .snip-peak { outline: 2px solid #b34a00; outline-offset: -1px; }
.snip-empty { padding: 12px; font-size: 12px; color: var(--muted); background: #fafafa; border: 1px dashed var(--line-strong); border-radius: 4px; }
.snip-help { margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.snip-help summary { cursor: pointer; user-select: none; padding: 2px 0; }
.snip-help summary:hover { color: var(--accent); }
.snip-help p { margin: 6px 0; max-width: 760px; line-height: 1.5; }
.snip-help code { font-family: "SF Mono", Menlo, Consolas, monospace; background: var(--code-bg); padding: 0 4px; border-radius: 2px; }

/* Gallery (examples) tab */
.examples-view { max-width: var(--page-w); margin: 0 auto; padding: 8px 4px 32px; }

/* Mode toggle shown at the top of #view-examples (Browse | Play tour) */
.examples-mode-toggle {
  max-width: var(--page-w);
  margin: 12px auto 0;
  padding: 0 4px;
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.examples-mode-toggle {
  display: flex;
  width: max-content;
}
.examples-mode-toggle .emt-btn {
  font: inherit;
  font-size: 12px;
  padding: 6px 14px;
  background: #fff;
  color: var(--muted);
  text-decoration: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.examples-mode-toggle .emt-btn:last-child { border-right: 0; }
.examples-mode-toggle .emt-btn:hover {
  background: var(--accent-bg);
  color: var(--accent);
}
.examples-mode-toggle .emt-btn.is-active {
  background: var(--accent);
  color: #fff;
}
.examples-tour-host { margin-top: 12px; }

.ex-group { margin: 28px 0; scroll-margin-top: 140px; }
.ex-group:first-of-type { margin-top: 6px; }
.ex-group-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.ex-group-num {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.ex-group h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  margin: 0;
}
.ex-note { color: var(--muted); margin: 8px 0 14px; font-size: 12.5px; line-height: 1.55; max-width: 72ch; }

.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.ex-card {
  display: block; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
  min-width: 0;
}
.ex-card:hover {
  border-color: var(--accent); background: #fafcff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(26, 79, 139, 0.08);
  text-decoration: none;
}
.ex-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.ex-cap { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--fg); flex: 1 1 auto; }
.ex-id { font-family: "SF Mono", Menlo, Consolas, monospace; color: var(--muted); font-weight: 500; font-size: 11px; margin-left: auto; flex-shrink: 0; }
.ex-card:hover .ex-id { color: var(--accent); }
.ex-meta { font-size: 11px; color: var(--muted); display: block; margin-bottom: 6px; }
.ex-meta code { font-family: "SF Mono", Menlo, Consolas, monospace; background: var(--code-bg); padding: 0 4px; border-radius: 2px; }
.ex-toks { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; background: var(--code-bg); padding: 5px 7px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-detail { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.ex-why { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.ex-why-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.ex-why-body { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* Gallery — section header now has a third column for the theme tag. */
.ex-group-theme {
  margin-left: auto;
  font-size: 10.5px; font-weight: 500;
  color: var(--muted);
  background: var(--code-bg);
  padding: 1px 7px; border-radius: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Gallery — sticky theme index. Pills jump to a section, dropdowns filter.
   `top` offset clears the page header (bar). z-index sits below the header so the
   bar wins when both reach the top of the viewport at the same time. */
.theme-index {
  position: sticky; top: 64px; z-index: 4;
  background: var(--bg, #fff);
  margin: 14px 0 18px;
  padding: 10px 0 10px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 760px) {
  /* Header wraps to 3 rows on narrow viewports; sticky offset becomes unreliable so just
     scroll with the page. */
  .theme-index { position: static; top: auto; }
}
.theme-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.theme-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 12px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.theme-pill:hover { border-color: var(--accent); background: var(--accent-bg, #f4f8fc); color: var(--accent); }
.theme-pill .tp-count {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--muted);
  background: var(--code-bg);
  padding: 0 5px; border-radius: 8px;
  min-width: 18px; text-align: center;
}
.theme-pill:hover .tp-count { color: var(--accent); }
.theme-pill-dim, .theme-pill[disabled] {
  opacity: 0.4;
  cursor: default;
}
.theme-pill-dim:hover, .theme-pill[disabled]:hover {
  border-color: var(--line-strong, var(--line));
  background: #fff; color: var(--fg);
}

.theme-filters {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  font-size: 12px; color: var(--muted);
}
.theme-filters label { display: flex; align-items: center; gap: 4px; }
.theme-filters select {
  font-size: 12px; padding: 2px 6px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 3px;
  background: #fff;
  color: var(--fg);
}
.ex-f-clear {
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.ex-f-clear:hover { background: var(--accent-bg, #f4f8fc); }
.ex-f-clear-link {
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; text-decoration: underline;
  font-size: inherit;
}
.ex-empty-filter { padding: 12px 0; }

/* Gallery — empty-state redirect cards (used when a model has no curated examples). */
.examples-empty .empty-redirects {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px; margin-top: 18px;
}
.empty-redirect {
  display: block; padding: 16px 18px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.empty-redirect:hover {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--accent-bg, #f4f8fc);
  transform: translateY(-1px);
}
.empty-redirect h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--accent); }
.empty-redirect p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* ----- Initial loading skeleton ----- */
.initial-loading {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 80px 20px; color: var(--muted); font-size: 13px;
}
.il-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: il-spin 0.9s linear infinite;
}
.il-text { line-height: 1.5; }
.il-sub { font-size: 11px; color: var(--muted); }
@keyframes il-spin { to { transform: rotate(360deg); } }

/* ----- Welcome / hero landing ----- */
.welcome-view { max-width: var(--page-w); margin: 0 auto; padding: 8px 4px 32px; }
.welcome-cs-banner {
  margin: 0 0 18px; padding: 10px 14px;
  border: 1px solid #d6a73f; border-radius: 4px;
  background: #fdf6e3; color: #6b4f00;
  font-size: 12.5px; line-height: 1.5;
}
.welcome-cs-banner b { color: #4a3700; }
.welcome-hero { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.welcome-hero h1 { font-size: 24px; margin: 0 0 10px; font-weight: 600; }
.welcome-hero .lede {
  font-size: 14.5px; line-height: 1.6; color: var(--fg); max-width: 70ch;
  margin: 0 0 14px;
}
.welcome-hero .lede b { font-weight: 600; }
.welcome-eyebrow {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px; font-weight: 600;
}
.welcome-title { font-size: 28px; margin: 0 0 2px; font-weight: 700; letter-spacing: -0.01em; }
.welcome-subtitle {
  font-size: 14.5px; color: var(--muted); margin: 0 0 14px;
  font-style: italic;
}
.welcome-cta-row {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-bottom: 18px;
}
.welcome-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent-bg); color: inherit;
  text-decoration: none;
  transition: background 0.12s, transform 0.12s;
}
.welcome-cta-row .welcome-cta { margin-bottom: 0; }
.welcome-cta:hover { background: #d8e6f5; transform: translateY(-1px); text-decoration: none; }
.welcome-cta-secondary {
  border-color: var(--line-strong); background: #fff;
}
.welcome-cta-secondary:hover { background: var(--accent-bg); border-color: var(--accent); }
.welcome-cta-secondary .wcta-icon { color: var(--muted); border-color: var(--line-strong); }
.welcome-cta-secondary:hover .wcta-icon { color: var(--accent); border-color: var(--accent); }
.welcome-cta .wcta-icon {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 50%;
  background: #fff;
}
.welcome-cta .wcta-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.welcome-cta .wcta-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.welcome-cta .wcta-sub {
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
}

.welcome-secondary {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 24px; padding: 4px 0;
  font-size: 13.5px; line-height: 1.7;
}
.welcome-secondary a { color: var(--fg); text-decoration: none; }
.welcome-secondary a:hover { color: var(--accent); }
.welcome-secondary a b { color: var(--accent); margin-right: 4px; }

.welcome-model-hint {
  font-size: 12px; color: var(--muted);
  margin: 0; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.welcome-model-hint b { color: var(--fg); }

.welcome-paper {
  margin-top: 28px; padding: 14px 16px;
  background: #fafafa; border: 1px solid var(--line); border-radius: 4px;
  font-size: 12.5px; line-height: 1.55;
}
.welcome-paper .wp-meta {
  margin: 0 0 4px;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.welcome-paper .wp-title {
  margin: 0 0 8px;
  font-size: 13.5px; color: var(--fg); font-weight: 600; line-height: 1.4;
  max-width: 70ch;
}
.welcome-paper .wp-links { margin: 0; }
.welcome-paper .wp-links a {
  color: var(--accent); text-decoration: none; font-size: 12.5px;
}
.welcome-paper .wp-links a:hover { text-decoration: underline; }

.welcome-paths {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px; margin-bottom: 32px;
}
.welcome-path {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  min-width: 0;
  background: #fff; color: inherit;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.welcome-path:hover {
  text-decoration: none;
  border-color: var(--accent); background: var(--accent-bg);
  transform: translateY(-1px);
}
.welcome-path.primary { border-color: var(--accent); background: var(--accent-bg); }
.welcome-path.primary:hover { background: #d8e6f5; }
.welcome-path.muted { opacity: 0.7; }
.welcome-path .wp-icon {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 50%;
  background: #fff;
}
.welcome-path .wp-body { flex: 1 1 auto; }
.welcome-path .wp-body h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--fg); }
.welcome-path .wp-body p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.welcome-section { margin: 28px 0; }
.welcome-section h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 8px; font-weight: 600;
  display: flex; align-items: baseline; gap: 10px;
}
.welcome-auto-note {
  font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--muted); opacity: 0.85; margin-left: 2px;
}
.welcome-shuffle {
  margin-left: auto;
  font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--muted); text-decoration: none;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
}
.welcome-shuffle:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.welcome-note { font-size: 12px; color: var(--muted); margin: 0 0 12px; max-width: 64ch; }

.welcome-feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 10px;
}
.welcome-feat {
  display: block; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  color: inherit;
  min-width: 0;
}
.welcome-feat:hover { border-color: var(--accent); background: #fafcff; text-decoration: none; }
.welcome-feat .wf-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.welcome-feat .wf-id { font-family: "SF Mono", Menlo, Consolas, monospace; color: var(--accent); font-weight: 600; }
.welcome-feat .wf-cap { font-size: 12px; color: var(--fg); }
.welcome-feat .wf-toks {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; background: var(--code-bg); padding: 4px 6px;
  border-radius: 3px; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.welcome-feat .wf-meta { font-size: 11px; color: var(--muted); }
.welcome-feat .wf-meta .lifecycle { font-size: 10.5px; padding: 1px 6px; border-radius: 8px; background: #fafafa; border: 1px solid var(--line); }
.welcome-feat .wf-lc { display: inline-block; line-height: 1.5; }

.welcome-presets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 8px;
}
.welcome-preset {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: inherit;
}
.welcome-preset:hover { border-color: var(--accent); background: var(--accent-bg); text-decoration: none; }
.welcome-preset .wp-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.welcome-preset .wp-meta {
  font-size: 11px; color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

.welcome-footer {
  margin-top: 32px; padding: 12px 14px;
  background: #fafafa; border: 1px solid var(--line); border-radius: 4px;
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.welcome-footer b { color: var(--fg); }

/* ----- Guided tour banner ----- */
.tour-view { max-width: var(--page-w); margin: 0 auto; }
.tour-banner {
  position: relative;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
}
.tour-exit {
  position: absolute; top: 6px; right: 10px;
  font-size: 18px; line-height: 1;
  color: var(--muted); text-decoration: none;
  padding: 2px 6px; border-radius: 3px;
}
.tour-exit:hover { color: var(--accent); background: rgba(58,110,165,0.08); text-decoration: none; }
.tour-progress {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); font-weight: 600; margin-bottom: 6px;
}
.tour-dots { display: inline-flex; gap: 5px; }
.tour-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #cdd9e8; border: 1px solid var(--accent);
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.tour-dot:hover { transform: scale(1.25); background: #b3c8e0; }
.tour-dot.active { background: var(--accent); }
.tour-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; padding-right: 24px; }
.tour-lesson {
  margin: 0 0 12px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--fg); max-width: 76ch;
}
.tour-nav {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.tour-kbd-hint {
  margin-left: auto; font-size: 10.5px; color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em;
}
.tour-btn {
  font: inherit; font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: #fff; color: var(--fg); cursor: pointer;
  text-decoration: none;
}
.tour-btn:hover { background: var(--accent-bg); border-color: var(--accent); text-decoration: none; }
.tour-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tour-btn.primary:hover { background: #143e6e; }
.tour-btn.disabled { color: var(--muted); border-color: var(--line); background: #fafafa; cursor: default; }

/* Tour flash-highlight: applied to the section the lesson points at after a
   stop renders, fades out within ~1.5s. */
.tour-flash { animation: tour-flash 1.4s ease-out; }
@keyframes tour-flash {
  0%   { box-shadow: 0 0 0 3px rgba(58,110,165,0.35), 0 0 0 6px rgba(58,110,165,0.12); }
  100% { box-shadow: 0 0 0 0 rgba(58,110,165,0); }
}

/* End-of-tour summary card. Sits where the feature page would have. */
.tour-end { display: flex; justify-content: center; padding-top: 32px; }
.tour-summary {
  max-width: 640px;
  padding: 32px 36px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(20, 30, 50, 0.06);
}
.tour-summary .ts-step {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 8px;
}
.tour-summary .ts-title {
  margin: 0 0 12px; font-size: 22px; line-height: 1.3; font-weight: 600;
}
.tour-summary .ts-body {
  margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--fg);
  max-width: 60ch;
}
.tour-summary .ts-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ----- Advanced-stats toggle on feature page ----- */
.stat.advanced { display: none; }
.stats-grid.show-advanced .stat.advanced { display: block; }
.stats-toggle { margin: -8px 0 16px; }
.stats-more-btn {
  font: inherit; font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: #fff; color: var(--muted); cursor: pointer;
}
.stats-more-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* ----- Table toolbar (legend + actions row) ----- */
.table-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 0;
}
.table-toolbar .lc-legend { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.table-actions {
  display: flex; gap: 6px; align-items: center; margin-left: auto;
}
.dl-link {
  font-size: 11px; padding: 4px 10px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: #fff; color: var(--accent);
}
.dl-link:hover { background: var(--accent-bg); border-color: var(--accent); text-decoration: none; }
.copy-link-btn { margin-left: 0; padding: 4px 10px; }

/* Show/hide-technical-columns toggle. Mirrors the .dl-link pill styling so it sits
   comfortably alongside CSV / JSON / copy-link in the table-actions row, but flips to a
   "pressed" look when active. */
.cols-toggle-btn {
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  margin-right: 4px;
}
.cols-toggle-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.cols-toggle-btn.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Tighter table border now that controls are panelled above */
.table-wrap { border-radius: 4px; }

/* ----- Logit-lens heatmap controls (rank-by / top-N) ----- */
.lens-heatmap-wrap { margin: 0; }
.lens-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: end;
  margin: 4px 0 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.lens-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lens-controls select {
  font: inherit;
  font-size: 11.5px;
  padding: 2px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  color: var(--fg);
}
.lens-controls .lens-hint {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  margin-left: auto;
}

/* ----- Logit-lens heatmap (tokens × snapshots) ----- */
.lens-heatmap {
  display: grid;
  gap: 1px;
  margin: 6px 0 4px;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  align-items: stretch;
}
.lens-heatmap .hcorner { background: #fafafa; }
.lens-heatmap .hcol-head {
  background: #fafafa;
  font-size: 10px;
  color: var(--muted);
  padding: 6px 2px 4px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lens-heatmap .hcol-head .step {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: var(--muted);
  font-size: 9.5px;
}
.lens-heatmap .hcol-head.random-baseline { color: #8a6d00; font-style: italic; }
.lens-heatmap .htok {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg);
  padding: 2px 8px;
  font-size: 11.5px;
  white-space: pre;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lens-heatmap .hcell {
  background: #fff;
  min-height: 18px;
}
.lens-heatmap .hcell.empty { background: #fafafa; }
.lens-heatmap .hcell.random-baseline { background: repeating-linear-gradient(45deg, #fef6e8, #fef6e8 2px, #fff 2px, #fff 4px); }
.lens-heatmap .hcell.empty.random-baseline { background: #fff; }
.lens-heatmap-empty { padding: 10px; color: var(--muted); font-style: italic; font-size: 12px; }
.lens-heatmap-legend {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 14px;
  font-size: 10.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.lens-heatmap-legend .scale {
  display: inline-block;
  width: 80px; height: 9px;
  background: linear-gradient(90deg, hsl(214, 70%, 94%), hsl(214, 70%, 38%));
  border: 1px solid var(--line);
  border-radius: 2px;
}
.lens-heatmap-legend .lo, .lens-heatmap-legend .hi { font-family: "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.lens-heatmap-legend .muted { color: var(--muted); margin-left: 4px; }

.lens-snapshot-details { margin: 6px 0 0; }
.lens-snapshot-details > summary {
  cursor: pointer; user-select: none;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 0;
  list-style: none;
}
.lens-snapshot-details > summary::-webkit-details-marker { display: none; }
.lens-snapshot-details > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 5px;
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.12s;
}
.lens-snapshot-details[open] > summary::before { transform: rotate(90deg); }
.lens-snapshot-details[open] > summary { color: var(--accent); }
.lens-snapshot-details > summary:hover { color: var(--accent); }
.lens-snapshot-details .tokens-grid { margin-top: 8px; }

/* ----- Floating tour banner: callouts stay visible while scrolling feature ----- */
.tour-view.tour-floating .tour-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  z-index: 30;
  margin-bottom: 0;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.18), 0 2px 6px rgba(0, 0, 0, 0.05);
  background: #fff;
}

/* ----- Snippets-empty section (always render, even when no data exists) ----- */
.section .snip-empty.snip-no-data {
  font-style: italic;
  background: #fafafa;
}

/* ----- Gallery cards: lifecycle pill + inline lifeline ----- */
.ex-card .ex-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ex-card .ex-lifecycle {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line-strong);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}
.ex-card .ex-lifeline-wrap {
  margin: 4px 0 6px;
  height: 18px;
  background: #fafafa;
  border-radius: 2px;
  padding: 0 4px;
  display: flex;
  align-items: center;
}
.ex-card .ex-lifeline-wrap svg.lifeline { display: block; width: 100%; height: 14px; }

/* ----- Token search (promotes view) ----- */
.promotes-view { max-width: var(--page-w); margin: 0 auto; }
.promotes-search {
  margin: 16px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.promotes-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.promotes-input-label {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 320px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 4px 8px; background: #fff;
}
.promotes-input-label:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.promotes-input-prefix, .promotes-input-suffix {
  font-size: 12px; color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
#promotes-input {
  flex: 1 1 auto; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; padding: 4px 0; color: var(--fg);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.promotes-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.promotes-submit {
  font: inherit; font-size: 12.5px;
  padding: 6px 14px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 4px; cursor: pointer;
}
.promotes-submit:hover { background: #143e6e; }

.promotes-tokens { margin-top: 10px; }
.promotes-tokens .tok-note { font-size: 11.5px; color: var(--muted); }
.tok-chips {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.tok-chip {
  font: inherit; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--fg); cursor: pointer;
}
.tok-chip:hover { border-color: var(--accent); background: var(--accent-bg); }
.tok-chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.tok-chip.selected .tok-count { color: #fff; opacity: 0.85; }
.tok-chip .tok-glyph {
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.tok-chip .tok-count { color: var(--muted); font-size: 11px; }
.tok-ws { color: var(--muted); }
.tok-more {
  font-size: 11.5px; color: var(--muted); padding-left: 4px;
}

.promotes-examples { margin: 14px 0 6px; }
.promotes-examples .examples-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 6px; font-weight: 600;
}
.examples-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 6px;
}
.example-chip {
  font: inherit; text-align: left;
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: inherit; cursor: pointer;
}
.example-chip:hover { border-color: var(--accent); background: #fafcff; }
.example-chip .ex-q {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--accent);
  background: var(--code-bg); padding: 1px 6px; border-radius: 3px;
}
.example-chip .ex-note { font-size: 11.5px; color: var(--muted); }

.promotes-status { margin: 10px 0 4px; }
.promotes-summary { font-size: 13px; color: var(--fg); margin: 0; }
.promotes-summary code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 5px; border-radius: 3px;
}
.promotes-empty { font-size: 13px; color: var(--muted); margin: 0; }
.promotes-empty code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; }

.promotes-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 8px; margin-top: 6px;
}
.promotes-card {
  display: block; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: inherit;
}
.promotes-card:hover { border-color: var(--accent); background: #fafcff; text-decoration: none; }
.promotes-card .pc-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.promotes-card .pc-id {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: var(--accent); font-weight: 600; font-size: 12.5px;
}
.promotes-card .pc-promoted { font-size: 12px; color: var(--fg); }
.promotes-card .pc-promoted code {
  background: var(--code-bg); padding: 1px 4px; border-radius: 3px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.promotes-card .pc-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.promotes-card .pc-meta .lifecycle { font-size: 10.5px; padding: 1px 6px; border-radius: 8px; background: #fafafa; border: 1px solid var(--line); }
.promotes-card .pc-toks {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; background: var(--code-bg); padding: 4px 6px;
  border-radius: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.promotes-more {
  font: inherit; font-size: 12.5px;
  margin: 14px auto 0; display: block;
  padding: 6px 14px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: #fff; color: var(--fg); cursor: pointer;
}
.promotes-more:hover { border-color: var(--accent); background: var(--accent-bg); }

/* ----- Decomposition gallery ----- */
.decompose-view { max-width: var(--page-w); margin: 0 auto; }
.decompose-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 16px; margin-top: 12px;
}
.decomp-card {
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; padding: 14px 16px;
}
.decomp-card .dc-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.decomp-card .dc-head h2 {
  font-size: 14.5px; font-weight: 600; margin: 0;
}
.decomp-anchor {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fafafa;
  font-size: 11.5px; color: var(--muted);
}
.decomp-anchor:hover { border-color: var(--accent); background: var(--accent-bg); text-decoration: none; }
.decomp-anchor .da-id { font-family: "SF Mono", Menlo, Consolas, monospace; color: var(--accent); font-weight: 600; }
.decomp-anchor code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 4px; border-radius: 3px;
}
.decomp-anchor .lifecycle { font-size: 10px; padding: 0 5px; border-radius: 7px; background: #fff; border: 1px solid var(--line); }
.decomp-anchor .da-rank { color: var(--muted); }

.decomp-card .dc-note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; max-width: 78ch; }
.decomp-card .dc-tokens {
  background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 8px; margin-bottom: 8px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.dt-tok {
  display: inline; padding: 1px 1px;
  border-radius: 2px;
}
.dt-tok.dt-last {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  border: 1px solid var(--accent);
  padding: 0 3px;
}

.decomp-card .dc-pred {
  font-size: 12px; margin-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.dt-pred-label { color: var(--muted); margin-right: 4px; }
.dt-pred {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 3px;
  background: #fff;
}
.dt-pred code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--fg);
}
.dt-pred-logit {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; color: var(--muted);
}

.decomp-card .dc-decomp-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin: 6px 0 4px; font-weight: 600;
}
.dc-decomp-formula {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--muted); font-size: 10.5px;
}

.dc-decomp { display: flex; flex-direction: column; gap: 2px; }
.decomp-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 60px 22px minmax(180px, 1fr) auto;
  align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 3px;
  color: inherit;
}
.decomp-row:hover { background: #fafcff; text-decoration: none; }
.dr-bar-cell { position: relative; height: 16px; display: flex; align-items: center; }
.dr-bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 2px;
}
.dr-bar.dr-pos { background: #6fb88a; }
.dr-bar.dr-neg { background: #d68585; }
.dr-alpha {
  position: relative; z-index: 1;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; color: #fff; padding: 0 6px;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0,0,0,0.45);
}
.dr-id {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--accent); font-weight: 600;
  white-space: nowrap;
}
/* Dedicated thin column for the μ̂ flag — stays empty (and reserves no extra
   horizontal space) when the row isn't a common-direction feature, since the
   span is empty. The 22px reservation prevents the flag from ever overlapping
   the tokens column. */
.dr-mu {
  display: flex; align-items: center; justify-content: center;
  min-width: 22px;
}
.dr-toks {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--fg);
  background: var(--code-bg); padding: 1px 6px; border-radius: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-meta {
  font-size: 10.5px; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.dr-meta .lifecycle { font-size: 10px; padding: 0 5px; border-radius: 7px; background: #fff; border: 1px solid var(--line); }

/* Common-direction (μ̂-aligned) feature badge: marks rows whose decoder
   direction is strongly aligned with ±mean(W_U). These dominate top-α for
   any natural prompt — see the "About the μ̂ badge" diagnostic in the page
   hero for the full explanation. */
/* μ̂-flag badge — marks features whose decoder direction is strongly aligned
   with ±mean(W_U) (high-frequency-token absorption). One class for all sites;
   the helper picks compact (icon-only) vs full (icon + signed value) per
   context.

   The badge inherits the surrounding font size, so it stays proportional in
   feature headers and shrinks naturally inside dense list rows. Hover
   reveals the full cos value via the title attribute. */
.mu-badge {
  display: inline-flex; align-items: center;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-weight: 500;
  padding: 0 5px;
  border-radius: 8px;
  background: #fff5e6;
  color: #a8651a;
  border: 1px solid #e6c891;
  white-space: nowrap;
  letter-spacing: 0;
  cursor: help;
  vertical-align: middle;
  line-height: 1.4;
}
.mu-badge:hover { background: #ffe9c9; border-color: #d4ad6e; }
.mu-badge-inline { margin-left: 0; }
.decomp-row.is-common .dr-toks {
  /* Slight desaturation so the eye drifts past common-direction rows when the
     hide toggle is OFF — but they're still inspectable. */
  opacity: 0.78;
}
.decomp-row.is-common .dr-meta { opacity: 0.78; }

/* CSS-driven hide of common-direction rows when the toggle is on. */
#view-decompose[data-hide-common="1"] .decomp-row.is-common { display: none; }
/* Per-card override: re-show common-direction rows in panels where the user
   clicked "show hidden rows". */
#view-decompose[data-hide-common="1"] .dc-decomp[data-show-hidden="1"] .decomp-row.is-common {
  display: grid;
}

/* Per-card hidden-row note — visible only when the global hide is on. */
.dc-hidden-note { display: none; }
#view-decompose[data-hide-common="1"] .dc-hidden-note {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; color: var(--muted);
  padding: 4px 8px; margin: 4px 0;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.dc-hidden-note .dh-counts b { color: var(--fg); font-weight: 600; }
.dh-toggle {
  font: inherit; font-size: 11px;
  background: transparent; border: 0; padding: 0;
  color: var(--accent); cursor: pointer;
  text-decoration: underline;
}
.dh-toggle:hover { color: #155a9a; }

/* Category filter chips + sticky toolbar. */
.dc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  padding: 8px 0; margin: 6px 0;
  border-bottom: 1px solid var(--line);
}
.dc-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-cat-chip {
  font: inherit; font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; cursor: pointer; color: var(--muted);
}
.dc-cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.dc-cat-chip.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.dc-cat-count { opacity: 0.65; font-size: 0.85em; margin-left: 3px; }
.decomp-card.hidden-by-cat { display: none; }

.dc-cat-pill {
  display: inline-block;
  font-size: 10.5px; padding: 1px 7px;
  border-radius: 8px;
  background: var(--code-bg); color: var(--muted);
  border: 1px solid var(--line);
  letter-spacing: 0.02em;
}

/* Headline takeaway, prominent above the per-target row list. */
.dla-takeaway {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 8px 0 6px;
  padding: 8px 12px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--fg);
}
.dla-takeaway-text code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: #fff; color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px; border-radius: 3px;
  font-weight: 600;
}
.dla-takeaway-text b { font-weight: 600; color: var(--fg); }

/* ----- Mode switch (DLA primary, α secondary) ----- */
.dc-mode-switch {
  display: inline-flex; gap: 0;
  margin-left: auto;
  border: 1px solid var(--line-strong); border-radius: 5px;
  background: #fafafa;
  overflow: hidden;
  font-size: 12px;
}
.dc-mode-tab {
  font: inherit; font-size: 12px;
  padding: 3px 10px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.dc-mode-tab:last-child { border-right: 0; }
.dc-mode-tab:hover { color: var(--fg); background: #fff; }
.dc-mode-tab.active {
  background: var(--accent); color: #fff; font-weight: 600;
}
/* Default: hide α body, show DLA body. data-mode="alpha" inverts.
   When DLA is unavailable the card is rendered with data-mode="alpha" anyway,
   so the secondary rules don't matter. */
.decomp-card .dc-mode-alpha { display: none; }
.decomp-card .dc-mode-dla { display: block; }
.decomp-card[data-mode="alpha"] .dc-mode-dla { display: none; }
.decomp-card[data-mode="alpha"] .dc-mode-alpha { display: block; }

/* Predicted-token chips double as DLA target tabs (when hasDla). */
.dt-pred-tab {
  font: inherit;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.dt-pred-tab:hover { border-color: var(--accent); background: var(--accent-bg); }
.dt-pred-tab.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.dt-pred-tab.active code,
.dt-pred-tab.active .dt-pred-logit { color: #fff; }

/* Only the active target's panel is visible. */
.dc-target { display: none; }
.decomp-card[data-target="0"] .dc-target[data-target-idx="0"],
.decomp-card[data-target="1"] .dc-target[data-target-idx="1"],
.decomp-card[data-target="2"] .dc-target[data-target-idx="2"],
.decomp-card[data-target="3"] .dc-target[data-target-idx="3"],
.decomp-card[data-target="4"] .dc-target[data-target-idx="4"] {
  display: block;
}

/* Legacy recon caption + cumulative sparkline (kept for any remaining uses).
   Flat panel inside the decomp-card to avoid the nested-card look. */
.dla-recon-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: #fafafa;
  border-radius: 4px;
}
.dla-recon-caption {
  font-size: 12px; color: var(--fg);
  line-height: 1.5;
}
.dla-recon-caption code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 5px; border-radius: 3px;
  font-size: 11.5px;
}
.dla-recon-caption b { font-weight: 600; }
.dla-recon-delta { color: var(--muted); cursor: help; }
.dla-cum-wrap {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.dla-cum {
  width: 110px; height: 26px;
}
.dla-cum-axis { stroke: var(--line-strong); stroke-width: 0.5; }
.dla-cum-line { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.dla-cum-end { fill: var(--accent); }

/* Heatmap section: top-N features × top-K predicted tokens. */
.dla-heatmap-section {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  background: transparent;
}
.dla-heatmap-section summary {
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
.dla-heatmap-section summary:hover { color: var(--accent); }
.dla-heatmap {
  --label-w: 200px;
  display: grid;
  grid-template-columns: var(--label-w) repeat(var(--n-cols), 1fr);
  gap: 2px;
  padding: 6px 10px 0;
}
.hm-header {
  display: contents;
}
.hm-row-label-empty { /* spacer for alignment */ }
.hm-col-head {
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
  padding-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-col-head code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 4px; border-radius: 2px;
  font-size: 10.5px;
}
.hm-row {
  display: contents;
}
.hm-row-label {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px;
  background: #fafafa;
  border-radius: 3px;
  color: var(--fg);
  overflow: hidden;
}
.hm-row-label:hover { background: var(--accent-bg); text-decoration: none; }
.hm-row.is-common .hm-row-label { background: #fff5e6; }
.hm-row.is-common .hm-row-label::after {
  content: 'μ̂';
  font-size: 9px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: #fff; color: #a8651a;
  border: 1px solid #e6c891; border-radius: 6px;
  padding: 0 3px;
  margin-left: auto;
}
.hm-fid {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--accent); font-weight: 600;
  flex-shrink: 0;
}
.hm-tok {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-cell {
  display: flex; align-items: center; justify-content: center;
  height: 22px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #1a1a1a;
  border-radius: 2px;
  cursor: help;
  white-space: nowrap;
}
.hm-cell-na {
  background: #fafafa;
  color: var(--line-strong);
}
.dla-heatmap-note {
  font-size: 10.5px; color: var(--muted);
  padding: 6px 10px 8px;
  margin: 0;
  line-height: 1.5;
}

.dc-diagnostic {
  margin-top: 12px; padding: 8px 12px;
  background: #fffaf0;
  border-radius: 4px;
  font-size: 12px;
  border-left: 3px solid #e6c891;
}
.dc-diagnostic summary {
  cursor: pointer;
  font-weight: 600; color: #8a4f0a;
  font-size: 12.5px;
}
.dc-diagnostic summary:hover { color: #6a3c08; }
.dc-diagnostic p {
  margin: 8px 0 0;
  color: var(--fg);
  line-height: 1.55;
  max-width: 78ch;
}
.dc-diagnostic code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 4px; border-radius: 2px;
  font-size: 11.5px;
}

.dc-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 12.5px; color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.dc-toggle input { cursor: pointer; }
.dc-toggle:hover { color: var(--accent); }

.sign-pos { color: #3a7553; font-weight: 600; }
.sign-neg { color: #a74545; font-weight: 600; }

.dc-decomp-common-count {
  font-weight: 400;
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0;
  color: #a8651a;
  margin-left: 4px;
}

/* "How to read this" details — collapsed by default to keep the hero short. */
.dc-howto {
  margin-top: 12px; padding: 8px 12px;
  background: #fafafa;
  border-radius: 4px;
  font-size: 12px;
}
.dc-howto summary {
  cursor: pointer;
  font-weight: 600; color: var(--fg);
  font-size: 12.5px;
}
.dc-howto summary:hover { color: var(--accent); }
.dc-howto p {
  margin: 8px 0 0;
  color: var(--fg);
  line-height: 1.55;
  max-width: 78ch;
}
.dc-howto code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 4px; border-radius: 2px;
  font-size: 11.5px;
}

/* ----- Feature preview drawer (decomposition view) ----- */
.dc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 90vw;
  background: #fff;
  border-left: 1px solid var(--line-strong);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
  padding: 14px 18px;
  overflow-y: auto;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  font-size: 13px;
}
.dc-drawer[data-open="1"] { transform: translateX(0); }
.dc-drawer-close {
  position: absolute; top: 8px; right: 10px;
  font-size: 22px; line-height: 1;
  background: transparent; border: 0; padding: 4px 9px;
  color: var(--muted); cursor: pointer;
  border-radius: 3px;
}
.dc-drawer-close:hover { color: var(--fg); background: var(--code-bg); }
.dc-drawer-head { margin-top: 4px; padding-right: 32px; }
.dcd-id-row { display: flex; align-items: center; gap: 8px; }
.dcd-fid {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px; color: var(--accent); font-weight: 700;
}
.dcd-top1 {
  margin-top: 6px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.dcd-top1 code {
  font-family: inherit; font-size: 16px;
  background: var(--code-bg); padding: 4px 10px; border-radius: 3px;
  display: inline-block;
}
.dcd-meta-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0;
}
.dcd-pill {
  font-size: 11px; padding: 2px 8px;
  border-radius: 9px; border: 1px solid var(--line);
  color: var(--muted); background: #fafafa;
}
.dcd-pill-mono {
  background: #eaf5ee; color: #2f6a4a; border-color: #b9d8c2;
}
.dcd-section { margin: 14px 0; }
.dcd-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600; margin: 0 0 5px;
}
.dcd-section p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg); }
.dcd-tokens code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 3px 8px; border-radius: 3px;
  font-size: 12px; word-break: break-word;
  display: inline-block; line-height: 1.6;
}
.dcd-open-feat {
  display: inline-block; margin-top: 14px; padding: 8px 14px;
  background: var(--accent); color: #fff;
  border-radius: 4px; font-size: 12.5px; font-weight: 600;
  text-decoration: none;
}
.dcd-open-feat:hover { background: #155a9a; text-decoration: none; }

/* Cross-view μ̂ flagging: data table, promotes-cards, neighbors. With the
   lifecycle stripe span in front of the cells, target the first `.cell`
   directly (the sticky-l0 id column) instead of `:first-child`. */
.row.is-common .cell.is-sticky-l0::after {
  content: 'μ̂';
  font-size: 9.5px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: #fff5e6; color: #a8651a;
  border: 1px solid #e6c891; border-radius: 7px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.row.is-common { opacity: 0.78; }
.row.is-common:hover { opacity: 1; }

.f-checkbox {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  cursor: pointer;
}
.f-checkbox input { cursor: pointer; }

.promotes-card.is-common { opacity: 0.78; }
.promotes-card.is-common:hover { opacity: 1; }

.neighbor.is-common { opacity: 0.78; }
.neighbor.is-common:hover { opacity: 1; }
.neighbor .mu-badge { margin-left: 4px; }

/* Related-features section: side-by-side decoder-cosine vs token-Jaccard. */
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.related-col-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.related-col-head sub { font-size: 9px; }
.loading-mini {
  font-size: 11.5px; color: var(--muted);
  font-style: italic;
}
@media (max-width: 720px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ----- Feature map (UMAP scatter) ----- */
.map-view { max-width: 100%; }
.map-view .page-hero { max-width: var(--page-w-wide); margin: 0 auto; }
/* Compact "About this map" disclosure — collapsed by default so the canvas
   gets the first viewport. Reuses the .about-panel styling from the table
   view but trimmed for the map context. */
.map-view .map-about {
  max-width: var(--page-w-wide);
  margin: 0 auto 8px;
}
.map-view .map-about > summary {
  padding: 6px 12px;
}
.map-view .map-about-body {
  padding: 12px 14px 14px;
}
.map-view .map-about-body h1 {
  font-size: 18px; margin: 0 0 6px; font-weight: 600;
}
.map-view .map-about-body .lede {
  font-size: 13px; line-height: 1.55; color: var(--fg); margin: 0 0 6px; max-width: 80ch;
}
.map-view .map-about-body .lede-sub {
  font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 80ch; margin: 8px 0 0;
}
.map-view .map-about-body .lede-list {
  font-size: 12.5px; line-height: 1.55; color: var(--fg); max-width: 80ch;
  margin: 0 0 4px; padding-left: 18px;
}
.map-view .map-about-body .lede-list li {
  margin: 0 0 4px;
}
.map-view .map-about-body .lede-list li:last-child { margin-bottom: 0; }
.map-view .map-about-body .lede-list b { font-weight: 600; }
.map-view .map-about-body .lede-list .lede-how {
  color: var(--muted); font-size: 11.5px;
}
.map-view .map-about-body .lede-list code,
.map-view .map-about-body .lede code {
  font-size: 11.5px; padding: 1px 3px;
  background: #f1f3f6; border-radius: 3px;
}
.map-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
  max-width: var(--page-w-wide); margin: 0 auto 6px;
  padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 5px;
  background: #fff;
  font-size: 12.5px;
}
.map-toolbar label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg);
}
.map-toolbar select, .map-toolbar input[type="number"], .map-toolbar input[type="text"] {
  font: inherit; font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong); border-radius: 3px;
}

/* ----- Toolbar groups: Data | Find | Display, separated by thin dividers.
   Each group stacks a control row on top, with inline captions below the
   data group's two dropdowns. ----- */
.map-tg {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.map-tg-row {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.map-toolbar .map-tg-pair {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
}
.map-toolbar .map-tg-pair > select,
.map-toolbar .map-tg-pair > input {
  font-size: 12px;
  max-width: 220px;
}
.map-tg-name {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.map-tg-caps {
  display: flex; flex-direction: column; gap: 1px;
  max-width: 60ch;
  min-height: 1em;
}
.map-tg-cap {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
}
.map-tg-cap:empty { display: none; }
.map-tg-cap-color { color: #8a6a2e; }
.map-tg-sep {
  align-self: stretch;
  width: 1px;
  background: var(--line);
  margin: 2px 0;
}
.map-tg-data { flex: 0 1 auto; min-width: 320px; }
.map-tg-find, .map-tg-display { flex: 0 0 auto; }
.map-checkbox { cursor: pointer; }
.map-btn {
  font: inherit; font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: #fff; cursor: pointer;
}
.map-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.map-stats { color: var(--muted); font-size: 11.5px; margin-left: auto; }
.map-host {
  position: relative;
  max-width: var(--page-w-wide);
  height: calc(100vh - 200px);
  min-height: 520px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f7f8fa;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
}
.map-canvas { display: block; cursor: grab; }
.map-canvas:active { cursor: grabbing; }
.map-tip {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11.5px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 18px rgba(15, 23, 42, 0.10);
  pointer-events: none;
  max-width: 280px;
  z-index: 5;
  transition: opacity 0.06s ease-out;
}
.map-tip.hidden { display: none; }
.map-tip .mt-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.map-tip .mt-id {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600; color: var(--accent);
}
.map-tip .mt-head .lifecycle {
  font-size: 9.5px; padding: 0 5px; border-radius: 7px;
  background: #fff; border: 1px solid var(--line);
}
.map-tip .mt-toks {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--code-bg); padding: 3px 5px; border-radius: 2px;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-tip .mt-mu {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; color: #a8651a; margin-bottom: 3px;
}
.map-tip .mt-meta { font-size: 10.5px; color: var(--muted); }
.map-tip .mt-foot { font-size: 10px; color: var(--muted); margin-top: 3px; font-style: italic; }
.map-legend {
  position: absolute;
  bottom: 10px; left: 10px;
  display: flex; flex-wrap: wrap; gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 10.5px;
  max-width: calc(100% - 24px);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
.ml-item { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); }
.ml-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
}

/* ----- Visual pair (label + range slider) inside map toolbars ----- */
.map-toolbar .map-vis-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.map-toolbar .map-vis-pair input[type="range"] {
  cursor: pointer;
  accent-color: var(--accent);
}

/* ----- Animation toolbar (only visible for the snapshot-animation layout) ----- */
.map-anim-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--page-w-wide);
  margin: 0 auto 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 11.5px;
}
.map-anim-bar.hidden { display: none; }
.map-anim-slider {
  flex: 1 1 auto;
  min-width: 200px;
  accent-color: var(--accent);
  cursor: pointer;
}
.map-anim-label {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: var(--muted);
  white-space: nowrap;
  min-width: 200px;
}
.map-anim-fps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.map-btn-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--accent);
  font-weight: 500;
}
#map-anim-play {
  min-width: 36px;
}

/* ----- Cluster-cards side panel ----- */
.map-flex {
  display: flex;
  gap: 12px;
  max-width: var(--page-w-wide);
  margin: 0 auto;
  align-items: flex-start;
}
.map-flex .map-host {
  flex: 1 1 auto;
  margin: 0;
  max-width: none;
}
/* Right-rail column: stacks an optional pin-panel above the cluster cards
   (feature map) or just holds the pin panel (token map). Total height
   matches .map-host so they bottom-align. */
.map-side {
  flex: 0 0 320px;
  height: calc(100vh - 200px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.map-clusters {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
  min-height: 0;  /* allow flex shrink so pin panel can claim space */
}
/* Pin panel — appears when the user clicks a feature/token. Persistent
   selection that doesn't disappear on hover-out. */
.map-pin-panel {
  flex: 0 0 auto;
  max-height: 50%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
}
.map-pin-panel.hidden { display: none; }
.mpp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line);
}
.mpp-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}
.mpp-close {
  font: inherit; font-size: 16px; line-height: 1;
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); padding: 0 2px;
}
.mpp-close:hover { color: var(--fg); }
.mpp-body {
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.5;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.mpp-body .mpp-row {
  display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 4px;
}
.mpp-body .mpp-k {
  color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  flex: 0 0 80px;
}
.mpp-body .mpp-v {
  flex: 1 1 auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  word-break: break-all;
}
.mpp-body .mpp-id {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600; color: var(--accent);
}
.mpp-body .mpp-toks {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: var(--code-bg);
  padding: 4px 6px;
  border-radius: 3px;
  margin: 4px 0 8px;
  word-break: break-all;
}
.mpp-section-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 10px 0 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.mpp-nn-list {
  list-style: none; padding: 0; margin: 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}
.mpp-nn-list li {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  border-radius: 2px;
}
.mpp-nn-list li:hover { background: var(--accent-bg); }
.mpp-nn-list .nn-tok {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto;
}
.mpp-nn-list .nn-d { color: var(--muted); flex: 0 0 auto; }
.mpp-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.mpp-actions a, .mpp-actions button {
  font: inherit; font-size: 11.5px;
  padding: 4px 9px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: #fff; cursor: pointer;
  color: var(--accent); text-decoration: none;
}
.mpp-actions a:hover, .mpp-actions button:hover {
  border-color: var(--accent); background: var(--accent-bg);
}
.map-clusters-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.map-clusters-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.map-clusters-meta {
  font-size: 10.5px;
  color: var(--muted);
}
.map-clusters-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
}
.cluster-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #fbfbfc;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 11px;
  color: var(--fg);
  transition: background 0.08s ease, border-color 0.08s ease, transform 0.08s ease;
}
.cluster-card:hover {
  background: #f0f5fb;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.cluster-card.is-active {
  background: #e7f0fa;
  border-color: var(--accent);
  border-width: 2px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(26, 79, 139, 0.12);
}
.cluster-card .cc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.cluster-card .cc-swatch {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  flex: 0 0 auto;
}
.cluster-card .cc-id {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 10.5px;
}
.cluster-card .cc-size {
  font-size: 10px; color: var(--muted);
}
.cluster-card .cc-concept {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  font-style: italic;
}
.cluster-card .cc-tokens {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.cluster-card .cc-lc {
  font-size: 10px;
  color: var(--muted);
}
.cluster-card .cc-enr-row {
  font-size: 10.5px;
  margin-bottom: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cluster-card .cc-enr {
  background: #eef6ec;
  border: 1px solid #c2dec0;
  border-radius: 3px;
  padding: 1px 5px;
  color: #2a5b2a;
  white-space: nowrap;
}
.cluster-card .cc-enr.cc-mode-only {
  background: #f5f5f5;
  border-color: var(--line);
  color: var(--muted);
}
.cluster-card .cc-p {
  color: var(--muted);
  font-size: 9.5px;
  margin-left: 2px;
}

/* ----- Monosemanticity (vocabulary kurtosis ratio) ----- */
/* Data table: subtle tint on the kurtosis cell to distinguish monosemantic
   from noise-like at a glance. */
.cell.kurt-mono {
  background: linear-gradient(90deg, rgba(80, 180, 120, 0.10), transparent 60%);
  color: #2e6b48; font-weight: 600;
}
.cell.kurt-noise {
  color: var(--muted); font-style: italic;
}

/* Feature-page header readout — same colour family as the column tint. */
.kurt-badge {
  display: inline-flex; align-items: center;
  font-size: 11.5px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  padding: 1px 7px;
  border-radius: 8px;
  background: #fafafa;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: help;
  white-space: nowrap;
}
.kurt-badge.kurt-mono {
  background: #eaf6ed;
  color: #2e6b48;
  border-color: #b5d8c0;
  font-weight: 600;
}
.kurt-badge.kurt-noise {
  background: #f5f5f5;
  color: #999;
  border-color: var(--line);
  font-style: italic;
}

/* Promotes-card: μ̂ flag sits between #id and the "promotes ___" caption. */
.promotes-card .pc-head .mu-badge { margin-left: 4px; }

@media (max-width: 760px) {
  .decomp-row {
    grid-template-columns: minmax(120px, 180px) 48px 22px 1fr;
    grid-template-rows: auto auto;
  }
  .dr-meta { grid-column: 1 / -1; padding-left: 4px; }
}

/* ----- Mobile responsive ----- */
/* Default: show only the full label; short label is hidden on desktop. */
.nav-label-short { display: none; }

/* Top-of-page banner shown only on narrow viewports until dismissed. */
.mobile-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #fff7da;
  border-bottom: 1px solid #e8d99a;
  color: #6b5500;
  font-size: 12.5px; line-height: 1.45;
}
.mobile-banner.hidden { display: none; }
.mobile-banner .mb-text { flex: 1 1 auto; }
.mobile-banner .mb-close {
  flex: 0 0 auto; cursor: pointer;
  background: transparent; border: none; color: #6b5500;
  font-size: 18px; line-height: 1; padding: 2px 6px;
}
.mobile-banner .mb-close:hover { color: #3d3100; }

@media (max-width: 720px) {
  /* Swap to short labels on the two longest nav items. */
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  body { font-size: 13px; }
  header.bar .bar-inner {
    padding: 12px 16px;
    gap: 10px;
  }
  header.bar .title-block { gap: 10px; flex-wrap: nowrap; }
  header.bar h1 { font-size: 15.5px; white-space: nowrap; }
  /* Drop the stats chip on mobile — viewport too narrow to carry it alongside
     brand + about + model-toggle + help. The about-popover still surfaces it. */
  header.bar .meta-chip { display: none; }
  header.bar .bar-about-btn { padding: 4px 8px; font-size: 10px; }
  /* Ensure model toggle doesn't push past viewport — let it shrink. */
  .model-toggle { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  header.bar nav.bar-nav { padding-top: 0; }
  /* Let the selected-feature pill wrap to its own line below the nav on narrow
     viewports — same .bar-inner block, no separate status strip. */
  header.bar .bar-nav-wrap { flex-wrap: wrap; row-gap: 8px; }
  header.bar .selected-feature-pill { margin-left: 0; flex: 1 1 100%; }
  header.bar .navlinks { gap: 2px; }
  header.bar .navlink { padding: 5px 9px; font-size: 12.5px; border-radius: 5px; }
  .model-toggle .mt-btn { padding: 6px 10px; font-size: 11.5px; min-height: 28px; }
  .help-btn { height: 28px; width: 28px; min-width: 28px; font-size: 12px; }
  main { padding: 10px; }
  .welcome-hero h1 { font-size: 20px; }
  .welcome-hero .lede { font-size: 13.5px; }
  .welcome-paths { grid-template-columns: 1fr; }
  .welcome-feats { grid-template-columns: 1fr; }
  .welcome-presets { grid-template-columns: 1fr; }
  .welcome-cta-row { grid-template-columns: 1fr; }
  .tour-banner { padding: 12px; }
  .tour-title { font-size: 15px; }
  .tour-lesson { font-size: 13px; }
  .tour-nav { gap: 6px; }
  .tour-kbd-hint { display: none; }
  .feature-view { max-width: 100%; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .trajectories { grid-template-columns: 1fr; }
  .tokens-grid { grid-template-columns: 1fr; }
  /* Table is dense by design — let it scroll horizontally on small screens. */
  .table-wrap { max-width: none; overflow-x: auto; }
  .table-controls { max-width: none; }
  .thead, .row { min-width: 980px; }
  .page-hero h1 { font-size: 19px; }
  .page-hero .lede { font-size: 13.5px; }
  .page-hero .lede-sub { font-size: 12px; }
  .table-controls { padding: 8px 10px 10px; }
  .ex-grid { grid-template-columns: 1fr; }
  .ex-group h2 { font-size: 11.5px; }
}

/* =====================================================================
   Data-table workbench: command search, preset recipe, preview drawer,
   bulk actions, top-token chips, sticky id/lifecycle.
   ===================================================================== */

/* Compact-by-default table hero. The "About this table" toggle button replaces
   the always-on details disclosure; explainer body collapses to 0 height. */
#table-hero { position: relative; padding-bottom: 12px; }
#table-hero .hero-toggle {
  position: absolute; top: 0; right: 0;
  font: inherit; font-size: 11px;
  padding: 4px 10px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 3px; cursor: pointer; color: var(--accent);
}
#table-hero .hero-toggle:hover { background: var(--accent-bg); border-color: var(--accent); }
#table-hero.page-hero-compact .hero-body { display: none; }
#table-hero.page-hero-compact { margin: 0 auto 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }

/* Command search row */
.cmd-row {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: stretch;
  margin-bottom: 8px;
}
.cmd-search {
  position: relative; flex: 1 1 360px; min-width: 280px;
  display: flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff;
  padding: 0 8px; transition: border-color 0.1s;
}
.cmd-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.08); }
.cmd-search .cmd-icon { color: var(--muted); margin-right: 6px; font-size: 14px; }
.cmd-search input {
  flex: 1; font: inherit; font-size: 13px; padding: 7px 0;
  border: 0; outline: none; background: transparent; min-width: 0;
}
.cmd-search input::placeholder { color: var(--muted); }
.cmd-clear {
  font: inherit; font-size: 14px; line-height: 1; padding: 0 4px;
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.cmd-clear:hover { color: var(--warn); }
.cmd-help {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px; padding: 5px 10px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 3px;
  font-size: 11.5px; color: var(--muted); z-index: 5;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1);
}
.preset-pick { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.preset-pick-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.preset-pick select {
  font: inherit; padding: 6px 8px;
  border: 1px solid var(--line-strong); border-radius: 3px; background: #fff;
}

/* Preset recipe line: human-readable summary of preset + sort + filters */
.preset-recipe {
  font-size: 11.5px; color: #444; margin: 0 0 8px;
  line-height: 1.7;
}
.preset-recipe .recipe-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600;
}
.preset-recipe .recipe-preset {
  font-weight: 600; color: var(--fg);
  padding: 1px 6px; background: var(--accent-bg); border-radius: 3px;
}
.preset-recipe .recipe-custom { background: #f3f3ef; color: var(--muted); }
.preset-recipe b { font-weight: 600; color: var(--fg); }
.preset-recipe .recipe-count {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted); margin-left: 4px;
}

/* Lifecycle chip count badges */
.lc-chip .lc-name { }
.lc-chip .lc-count {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--muted); font-weight: 400;
  margin-left: 4px;
}
.lc-chip.active .lc-count { color: var(--accent); }

/* Default-on μ̂ filter chip — visually softer than user-applied chips */
.filt-chip-default {
  background: #f6f5ee !important; border-color: #d8d4c0 !important; color: #5a5a4a !important;
}
.filt-chip-default .k { color: #8a7e60; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }
.filt-chip-default .v { font-family: inherit; }
.filt-chip-default .x { color: #b89400; }
.filt-chip-default .x:hover { color: var(--warn); }

/* Top tokens render as plain monospace text in the row, separated by a muted
   interpunct. No chip background or border — the separator alone disambiguates
   tokens, and the cell reads as a single short phrase. */
.cell.tok {
  display: flex; align-items: baseline; gap: 5px; padding: 0 8px;
  overflow: hidden; white-space: nowrap;
}
.row .cell.tok .tok-chip {
  display: inline; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #333;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px;
  flex: 0 0 auto; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis;
}
.row .cell.tok .tok-sep {
  color: var(--muted); opacity: 0.55; font-size: 11.5px; flex: 0 0 auto;
}
.row .cell.tok .tok-chip.tok-more { color: var(--muted); font-size: 10.5px; }

/* Sticky first / second columns inside each row (id, lifecycle).
   Cells use position: sticky relative to the .viewport scroll container — works
   because .row is a CSS grid (cells are in normal flow within the row). */
.row .cell.is-sticky-l0,
.row .cell.is-sticky-l1 {
  position: sticky;
  z-index: 1;
  background: inherit;
  /* Lift above the per-row hover bg by giving cells a solid backdrop */
}
.row .cell.is-sticky-l0 { left: 0; }
/* Width of column 0 (`feat`) is 60px in COLS — keep this in sync if it changes. */
.row .cell.is-sticky-l1 { left: 60px; box-shadow: inset -1px 0 0 var(--line); }
.row.is-even .cell.is-sticky-l0 { background: #fbfbf9; }
.row.is-even .cell.is-sticky-l1 { background: #fbfbf9; }
.row:not(.is-even) .cell.is-sticky-l0 { background: #fff; }
.row:not(.is-even) .cell.is-sticky-l1 { background: #fff; }
.row:hover .cell.is-sticky-l0,
.row:hover .cell.is-sticky-l1 { background: var(--row-hover); }
.row.is-selected .cell.is-sticky-l0,
.row.is-selected .cell.is-sticky-l1 { background: #f1f6fb; }

/* Bulk-selection state */
.row.is-selected { background: #eaf2fa; }
.row.is-selected.is-even { background: #e6eef7; }
.row.is-selected:hover { background: #dde8f3; }

/* App-wide selectedFeature highlight — orange ring keeps it distinct from the
   is-selected bulk-action shade. */
.row.tr-selected,
.promotes-card.tr-selected,
.decomp-feature-link.tr-selected {
  box-shadow: inset 0 0 0 2px #e88c1f;
}
.promotes-card.tr-selected,
.decomp-feature-link.tr-selected {
  background: #fff7e8;
}

/* Bulk-actions bar */
.bulk-bar {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  max-width: var(--page-w); margin: 0 auto 10px;
  padding: 8px 12px; border: 1px solid var(--accent);
  background: var(--accent-bg); border-radius: 4px; font-size: 12px;
}
.bulk-bar .bulk-count {
  font-weight: 600; color: var(--accent); margin-right: 6px;
}
.bulk-bar button {
  font: inherit; font-size: 11.5px;
  padding: 3px 10px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 3px; cursor: pointer; color: var(--fg);
}
.bulk-bar button:hover { background: #fff; border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .cmd-row { flex-direction: column; align-items: stretch; }
  .preset-pick { min-width: 0; }
}

/* ============================================================
   Feature page (.fp-*) — six-section layout: header summary,
   timeline, token evolution, evidence, relations, provenance.
   Re-uses .neighbor / .lifecycle / .traj-card / .lens-* styles
   defined above; adds only the new structural pieces.
   ============================================================ */

.fp-page { max-width: var(--page-w); margin: 0 auto; }

.fp-header { margin: 0 0 12px; }
.fp-id-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.fp-id { margin: 0; font-size: 18px; font-weight: 600; }
.fp-atlas-badge {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: 10px;
  letter-spacing: 0.02em;
}
.fp-atlas-badge.fp-atlas-main { background: #fff; color: var(--fg); }
.fp-id-spacer { flex: 1; }
.fp-copy-btn {
  font: inherit; font-size: 11.5px; cursor: pointer;
  padding: 3px 10px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 3px; color: var(--fg);
}
.fp-copy-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.fp-tldr {
  margin: 10px 0 18px; padding: 8px 12px;
  background: #fafbfd; border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--fg);
  max-width: 80ch;
}
.fp-tldr-label {
  color: var(--muted); font-weight: 600; margin-right: 4px;
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em;
}
.fp-tldr-toks {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--code-bg); padding: 1px 6px; border-radius: 2px;
}
.fp-compare-btn {
  font: inherit; font-size: 11.5px; text-decoration: none;
  padding: 3px 10px; background: #fff; margin-right: 6px;
  border: 1px solid var(--line-strong); border-radius: 3px; color: var(--accent);
}
.fp-compare-btn:hover { background: var(--accent-bg); border-color: var(--accent); }

.fp-meta-strip {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  padding: 6px 0 0; font-size: 11.5px; color: var(--muted);
}
.fp-meta-item { display: inline-flex; align-items: baseline; gap: 4px; }
.fp-meta-item .k { color: var(--muted); }
.fp-meta-item .v { color: var(--fg); font-variant-numeric: tabular-nums; }
.fp-meta-item.fp-tokens-inline { gap: 4px; }
.fp-meta-item.fp-back { margin-left: auto; color: var(--accent); text-decoration: none; }
.fp-meta-item.fp-back:hover { text-decoration: underline; }
.fp-tok-link {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px;
  background: var(--code-bg); padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--line); text-decoration: none; color: var(--fg);
}
.fp-tok-link:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

.fp-section { margin: 14px 0 18px; }
.fp-section h3 {
  font-size: 12px; margin: 0 0 8px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
}

/* Timeline — keep the lifeline svg compact (under ~120px tall total) */
.fp-timeline {
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px;
  background: #fff;
}
.fp-timeline-svg { height: 32px; }
.fp-timeline-svg svg.lifeline { width: 100%; height: 32px; }
.fp-timeline-strip {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
}
.fp-tl-item { display: inline-flex; gap: 4px; align-items: baseline; }
.fp-tl-item .k { color: var(--muted); }
.fp-tl-item .v { color: var(--fg); font-variant-numeric: tabular-nums; }

.fp-advanced-stats { margin-top: 10px; font-size: 12px; color: var(--muted); }
.fp-advanced-stats summary { cursor: pointer; user-select: none; padding: 2px 0; }
.fp-advanced-stats summary:hover { color: var(--accent); }
.fp-advanced-stats[open] summary { color: var(--fg); }
.fp-advanced-stats .trajectories { margin: 8px 0; }
.fp-advanced-stats .stats-grid { margin-top: 8px; }

/* Concept badges sit right above the heatmap controls */
.fp-concepts {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  align-items: baseline; margin: 0 0 8px;
}
.fp-concepts .legend {
  font-size: 10.5px; font-weight: normal; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}

/* Evidence section */
.fp-evidence { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 1080px) {
  .fp-evidence { grid-template-columns: 3fr 2fr; }
}
.fp-evidence-block {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; background: #fff; min-width: 0;
}
.fp-relation-head {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.fp-relation-head .legend {
  font-size: 10.5px; font-weight: normal; text-transform: none;
  letter-spacing: 0; margin-left: 6px; color: var(--muted);
}

.fp-snippets-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; background: #fafafa;
  border-radius: 4px; font-size: 12px; color: var(--muted);
}
.fp-load-snippets {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 16px; background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.fp-load-snippets:hover { background: #154f8b; border-color: #154f8b; }
.fp-load-snippets:disabled { opacity: 0.6; cursor: wait; }
.fp-mobile-warn { display: none; color: #a8651a; font-weight: 600; }
@media (pointer: coarse), (max-width: 720px) {
  .fp-mobile-warn { display: inline; }
  /* Keyboard-shortcuts overlay is useless without a keyboard — hide the
     `?` trigger on touch devices and narrow viewports. */
  .help-btn { display: none; }
  /* Same logic for the inline "← / → / Esc" hint inside the tour banner. */
  .tour-kbd-hint { display: none; }
}
.fp-snippets-mount .snip-meta-line { font-size: 11px; color: var(--muted); margin-bottom: 4px; }

.fp-cap-missing { color: var(--muted); font-style: italic; }

.fp-decomp-list {
  margin: 4px 0 6px; padding-left: 22px; font-size: 12px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.fp-decomp-list li { padding: 1px 0; }
.fp-decomp-list .muted { color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.fp-decomp-more { display: inline-block; font-size: 11.5px; color: var(--accent); margin-top: 4px; text-decoration: none; }
.fp-decomp-more:hover { text-decoration: underline; }

/* Relations grid */
.fp-relations { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .fp-relations { grid-template-columns: 1fr 1fr; }
  .fp-relation-block-wide { grid-column: 1 / -1; }
}
.fp-relation-block {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; background: #fff; min-width: 0;
  overflow-x: auto;
}
.fp-relation-list { gap: 4px; }
.fp-relation-row {
  text-decoration: none; color: inherit;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.fp-relation-row:hover { background: var(--accent-bg); border-color: var(--accent); color: inherit; }
.fp-relation-row.mutual { border-color: var(--accent); }
.fp-mut { color: var(--accent); font-weight: 600; margin-left: 2px; }

/* Provenance */
.fp-provenance { font-size: 12px; color: var(--muted); margin-top: 4px; }
.fp-provenance summary { cursor: pointer; user-select: none; padding: 2px 0; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.fp-provenance summary:hover { color: var(--accent); }
.fp-prov-grid {
  margin-top: 6px; display: grid; gap: 2px 12px;
  grid-template-columns: max-content 1fr;
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px;
  background: #fafafa; font-size: 11.5px;
}
.fp-prov-row { display: contents; }
.fp-prov-row .k { color: var(--muted); }
.fp-prov-row .v { color: var(--fg); }
.fp-prov-row .v code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: transparent; padding: 0; word-break: break-all;
}

/* Mobile: keep the heatmap horizontally scrollable in its own wrap rather
   than letting the page scroll. */
@media (max-width: 720px) {
  .fp-page { padding: 0 4px; }
  .fp-id-row { gap: 6px; }
  .fp-id { font-size: 16px; }
  .fp-meta-strip { gap: 4px 10px; font-size: 11px; }
  .fp-meta-item.fp-back { margin-left: 0; }
  .lens-heatmap-wrap { overflow-x: auto; }
  .fp-relations { grid-template-columns: 1fr; }
  .fp-evidence { grid-template-columns: 1fr; }
  .fp-prov-grid { grid-template-columns: 1fr; }
  .fp-prov-row .k { padding-top: 4px; }
}

/* ---------- Compare view (Phase 5) ---------- */
.cmp-page {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 16px var(--page-pad-x);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmp-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
}
.cmp-source-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  background: #fff;
}
.cmp-source-card .fp-header { margin: 0; }
.cmp-source-actions { margin-top: 8px; font-size: 12.5px; }
.cmp-open-feature {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 4px 10px;
}
.cmp-open-feature:hover { background: var(--accent-bg); }
.cmp-source-search {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-source-search-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cmp-cmd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  padding: 4px 6px;
}
.cmp-cmd-row input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
}
.cmp-cmd-help {
  font-size: 11.5px;
  color: var(--warn);
  margin-top: 2px;
}
.cmp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.cmp-toolbar-spacer { flex: 1; }
.cmp-toolbar-hint { color: var(--muted); font-size: 11.5px; }
.cmp-topn-details summary {
  cursor: pointer;
  user-select: none;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  display: inline-block;
  list-style: none;
}
.cmp-topn-details summary::-webkit-details-marker { display: none; }
.cmp-topn-choices { margin-top: 6px; display: flex; gap: 4px; }
.cmp-topn-btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.cmp-topn-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  align-items: start;
}
.cmp-col {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 10px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-col-loading {
  font-size: 12px;
  color: var(--muted);
}
.cmp-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.cmp-col-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmp-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.cmp-sort-select {
  font-size: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 1px 4px;
  background: #fff;
}
.cmp-col-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-col-empty,
.cmp-col-missing {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 4px;
}
.cmp-col-missing-title { font-weight: 600; color: var(--warn); margin-bottom: 4px; }
.cmp-col-missing-reason { font-size: 11px; margin-bottom: 6px; }
.cmp-col-missing-reason code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); }
.cmp-col-missing-cta { color: var(--accent); }
.cmp-col-foot {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.cmp-cand {
  display: block;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: background 0.1s, border-color 0.1s;
}
.cmp-cand:hover { background: var(--accent-bg); border-color: var(--accent); text-decoration: none; }
.cmp-cand.mutual { border-left: 3px solid var(--accent); }
.cmp-cand-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.cmp-cand-id { font-weight: 600; font-family: "SF Mono", Menlo, Consolas, monospace; }
.cmp-cand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  font-size: 11px;
}
.cmp-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 8px;
  background: #f0f0f0;
  color: #333;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.cmp-chip-cos { background: #e6efff; color: #1a4f8b; }
.cmp-chip-rrank { background: #f1ece2; color: #6a4b18; }
.cmp-chip-mut.on { background: var(--accent); color: #fff; }
.cmp-chip-mut.off { color: var(--muted); }
.cmp-chip-asym { background: #f6e2e2; color: #8a3030; }
.cmp-chip-jacc { background: #ecf3e7; color: #355c1f; }
.cmp-chip-rbo { background: #efe7f2; color: #5a3973; }
.cmp-chip-shared { background: #eef4f2; color: #285d51; }
.cmp-chip-concept.on { background: var(--accent); color: #fff; }
.cmp-chip-concept.off { color: var(--muted); }
.cmp-shared-tokens {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.cmp-shared-tokens code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg);
  padding: 0 4px;
  border-radius: 2px;
}
.cmp-strip {
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.cmp-strip-pair {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.cmp-strip-pair-id {
  font-weight: 600;
  color: var(--fg);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.cmp-strip-stat { font-variant-numeric: tabular-nums; }
.cmp-strip-empty { font-style: italic; }

@media (max-width: 720px) {
  .cmp-source { grid-template-columns: 1fr; }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-page { padding: 0 8px; }
}

/* ---------- Toast ---------- */
.atlas-toast {
  position: fixed;
  top: 64px;
  right: 16px;
  background: #1a1a1a;
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  max-width: 360px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.atlas-toast-on { opacity: 1; transform: translateY(0); }

/* ============================================================
   Polish pass: flex min-width fixes, mobile sizing, siblings cap
   ============================================================ */

/* Issue A — feature map canvas was rendering at 1074px but its flex
   parent (.map-host) collapsed to 2px because .map-side's min-content
   width (cluster card text in .cc-tokens has white-space: nowrap)
   propagated up and overrode flex-basis: 320px via the default
   min-width: auto. Add min-width: 0 to every flex item in the chain
   so flex-basis is honoured. */
.map-flex .map-host { min-width: 0; }
.map-flex .map-side { min-width: 0; }
.map-clusters { min-width: 0; }
.map-clusters-list { min-width: 0; }
.map-clusters-head { min-width: 0; }
.map-clusters-head h3 { min-width: 0; }

/* Issue B — mobile table cmd-search was 400px tall because .cmd-row
   switches to flex-direction: column at 720px while .cmd-search keeps
   flex: 1 1 360px (basis applies to height in column flow). */
@media (max-width: 720px) {
  .cmd-search { flex: 0 0 auto; width: 100%; min-width: 0; }
  .preset-pick { width: 100%; }
}

/* Issue C — on mobile, .map-host and .map-side both had height
   100vh - 200px and stacked into a single column, which doubled the
   page height. Cap the map host and let the side flow naturally. */
@media (max-width: 720px) {
  .map-flex { flex-direction: column; gap: 10px; padding: 0 8px; }
  .map-flex .map-host { width: 100%; height: 60vh; min-height: 360px; max-height: 520px; }
  .map-flex .map-side { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; }
  .map-clusters { max-height: 60vh; }
}

/* Issue E — mobile feature page: chips and meta strip too dense. */
@media (max-width: 720px) {
  .fp-meta-strip { row-gap: 8px; font-size: 12px; line-height: 1.5; }
  .fp-meta-item { line-height: 1.5; }
  .fp-tok-link { padding: 2px 7px; line-height: 1.5; }
  .fp-timeline-strip { row-gap: 8px; line-height: 1.5; }
  .fp-concepts { row-gap: 8px; }
  .fp-concepts .cbadge { line-height: 1.5; }
  .tok-chip { line-height: 1.6; }
  .tok-chips { row-gap: 6px; }
  .fp-section h3 { font-size: 12.5px; }
}

/* ----- Unified Map view: mode-switch + time-toggle + agreement hint ----- */
.map-mode-bar {
  display: flex;
  align-items: center;
  max-width: var(--page-w-wide);
  margin: 0 auto 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}
.map-mode-seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.map-mode-seg .mms-btn {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 14px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.map-mode-seg .mms-btn:last-child { border-right: 0; }
.map-mode-seg .mms-btn:hover { background: var(--accent-bg); color: var(--accent); }
.map-mode-seg .mms-btn.is-active {
  background: var(--accent);
  color: #fff;
}
.map-mode-seg .mms-btn.is-active:hover {
  background: var(--accent);
  color: #fff;
}

.map-time-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.map-time-toggle .mtt-btn {
  font: inherit;
  font-size: 11.5px;
  padding: 3px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.map-time-toggle .mtt-btn:last-child { border-right: 0; }
.map-time-toggle .mtt-btn:hover:not(:disabled) {
  background: var(--accent-bg);
  color: var(--accent);
}
.map-time-toggle .mtt-btn.is-active {
  background: var(--accent);
  color: #fff;
}
.map-time-toggle .mtt-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.map-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 10px;
  max-width: 380px;
}
.map-hint-chip.hidden { display: none; }
.map-hint-chip b { color: var(--accent); }
.map-hint-chip .map-hint-dismiss {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--accent);
  padding: 0 2px;
}
.map-hint-chip .map-hint-dismiss:hover { color: var(--fg); }

/* Mobile: the mode switch lives on its own line above the toolbar; the
   time toggle and color picker stack with the other toolbar items. */
@media (max-width: 600px) {
  .map-mode-bar {
    padding: 6px 8px;
  }
  .map-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .map-toolbar label,
  .map-toolbar .map-time-toggle,
  .map-toolbar .map-hint-chip,
  .map-toolbar button {
    width: 100%;
    justify-content: flex-start;
  }
  .map-time-toggle { width: auto; align-self: flex-start; }
  .map-tg { width: 100%; }
  .map-tg-row { width: 100%; }
  .map-tg-pair { width: 100%; }
  .map-tg-pair > select,
  .map-tg-pair > input { width: 100%; }
  .map-tg-sep { display: none; }
  .map-side {
    display: none;
  }
}

/* ─── readout-status affordances (headline tokens, residue, noise gate) ───── */
.tok-residue {
  color: var(--muted); font-style: italic; font-size: 12px;
}
.tok-snap-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  color: #7a4caf; background: rgba(122, 76, 175, 0.08); border: 1px solid rgba(122, 76, 175, 0.25);
  border-radius: 3px; vertical-align: 1px; white-space: nowrap;
}
.tok-noisy .tok-chip, .tok-noisy .tok-sep { opacity: 0.45; }
.residue-badge {
  display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600;
  color: #6e6e6e; background: #f0f0f0; border: 1px solid #d8d8d8; border-radius: 10px;
}
.fp-tldr-residue, .fp-tldr-noise { border-left-color: #b0b0b0; background: #f6f6f6; }
.fp-section-note {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 90ch;
}
.fp-section-note code { font-size: 11.5px; }
.fp-prov-more { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.bar-about-link { margin: 6px 0 0; font-size: 12px; }

/* ─── About & data page ─────────────────────────────────────────────────── */
.about-view { max-width: var(--page-w); margin: 0 auto; }
.about-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; }
.about-section { margin: 28px 0; }
.about-section h2 { font-size: 17px; margin: 0 0 10px; }
.about-section h3 { font-size: 13.5px; margin: 16px 0 6px; }
.about-section h3 .legend { font-weight: 400; margin-left: 8px; }
.about-section p { max-width: 90ch; line-height: 1.55; }
.about-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.about-table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.about-table th, .about-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.about-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.about-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.about-defs dt { font-weight: 600; margin-top: 12px; }
.about-defs dd { margin: 3px 0 0; line-height: 1.55; max-width: 90ch; }
.about-list { padding-left: 20px; line-height: 1.55; }
.about-list li { margin: 4px 0; }
.about-dl-atlas { margin-bottom: 10px; }
.about-pending { color: var(--muted); font-style: italic; }
.about-paper-title { font-weight: 600; margin: 0 0 4px; }
.about-bib { font-size: 11.5px; background: #fafafa; border: 1px solid var(--line); padding: 10px; overflow-x: auto; }

/* ─── Home gallery + search mode bar ───────────────────────────────────── */
.home-gallery { margin-top: 8px; }
.home-gallery > h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-gallery-lede { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 90ch; }
.home-gallery-note { margin: 0 0 16px; }
.search-mode-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.search-mode-bar .mms-btn { text-decoration: none; }
.search-mode-hint { font-size: 12px; color: var(--muted); }

.ex-more {
  margin: 8px 0 0; padding: 4px 10px; font-size: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; color: var(--accent);
}
.ex-more:hover { background: var(--accent-bg); }

/* Map toolbars: secondary controls hidden until "more controls" */
.map-toolbar:not(.show-more) .map-time-toggle,
.map-toolbar:not(.show-more) .map-vis-pair,
.map-toolbar:not(.show-more) #tokenmap-label-min,
.map-toolbar:not(.show-more) label:has(> #tokenmap-label-min) { display: none; }
.map-toolbar.show-more .map-more-btn { background: var(--accent-bg); color: var(--accent); }
.home-contrast-note { border-left: 3px solid #d6a73f; padding-left: 10px; }

/* Cross-layout agreement is an advanced colouring now; no nudge toward it. */
#map-agreement-hint { display: none !important; }

/* ===== Home and navigation (team pass) ===== */
.home-view .welcome-hero { margin-bottom: 18px; padding-bottom: 16px; }
.home-view .welcome-hero .lede { max-width: 82ch; margin-bottom: 0; }
.home-view .home-contrast-note { margin: 0 0 18px; padding-top: 0; border-top: 0; }
.home-lc { margin: 0 0 22px; }
.home-lc > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 8px; font-weight: 600;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.home-lc-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
}
.home-lc-card {
  display: grid; grid-template-columns: 48px 1fr; gap: 2px 12px; align-items: start; align-content: start;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: inherit; min-width: 0;
}
.home-lc-card:hover { border-color: var(--accent); background: var(--accent-bg); text-decoration: none; }
.home-lc-shape { grid-row: span 2; width: 48px; height: 18px; margin-top: 4px; overflow: visible; }
.home-lc-shape path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.home-lc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-lc-name { font-size: 13px; }
.home-lc-share {
  font-size: 18px; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.home-lc-text { font-size: 12px; color: var(--muted); line-height: 1.45; }
.home-lc-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 100ch; }
.home-entry { margin-bottom: 12px; }
.home-entry .welcome-path.muted { cursor: default; }
.home-entry .welcome-path.muted:hover { transform: none; border-color: var(--line-strong); background: #fff; }
.home-gallery-link { margin: 0 0 8px; font-size: 13.5px; }
.home-gallery-link a { font-weight: 500; }
.home-view .home-gallery-note { margin: 0 0 8px; }
.home-view .welcome-paper { margin-top: 20px; }
.welcome-paper .wp-authors { margin: 0 0 8px; color: var(--fg); }
.bar-about-authors { margin: 0 0 6px; font-size: 12px; color: var(--fg); line-height: 1.45; }
body[data-view="examples"] .theme-index { top: var(--bar-h, 64px); }

/* ===== Feature page (team pass) ===== */
.fp-primary-chart { max-width: 820px; }
.fp-primary-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted); margin-bottom: 4px;
}
.fp-primary-head .v { color: var(--fg); font-variant-numeric: tabular-nums; }
.fp-key-band {
  display: inline-block; width: 12px; height: 9px; align-self: center;
  background: rgba(255, 200, 60, 0.45); border: 1px solid rgba(184, 148, 0, 0.5);
}
.fp-key-peak {
  display: inline-block; width: 0; height: 10px; align-self: center; margin: 0 3px;
  border-left: 1.5px dashed var(--warn);
}
.fp-concepts-k {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.fp-header + .fp-concepts { margin: -4px 0 4px; }
.fp-fold {
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
.fp-fold > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 8px 12px;
}
.fp-fold > summary::-webkit-details-marker { display: none; }
.fp-fold > summary::before {
  content: "▸"; color: var(--muted); font-size: 11px; width: 10px;
}
.fp-fold[open] > summary::before { content: "▾"; }
.fp-fold > summary:hover .fp-fold-title { color: var(--accent); }
.fp-fold[open] > summary { border-bottom: 1px solid var(--line); }
.fp-fold-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600;
}
.fp-fold-hint { font-size: 12px; color: var(--muted); }
.fp-fold-body { padding: 10px 12px 12px; }
.fp-sub {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 8px;
}
.fp-fold-body > .fp-sub:first-child { margin-top: 4px; }
.fp-fold-body .fp-relations-section > .fp-sub,
.fp-fold-body .fp-provenance-section > .fp-sub { margin-top: 18px; }
.lens-init-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.lens-init-toggle input { margin: 0; }
.lens-init-note {
  margin: 2px 0 8px; padding: 6px 10px; max-width: 90ch;
  font-size: 12px; line-height: 1.5; color: var(--fg);
  background: #fef6e8; border-left: 3px solid #d6a73f; border-radius: 0 3px 3px 0;
}
@media (max-width: 720px) {
  .fp-fold > summary { padding: 10px 12px; }
  .fp-fold-body { padding: 8px 10px 10px; }
}

/* ===== Features table, presets and search (team pass) ===== */
/* Lifeline band for the paper's reorganization window (REORG_WINDOW); same
   tint as the feature-page chart band. */
svg.lifeline .ll-window { fill: rgba(255, 200, 60, 0.32); stroke: none; }
.preset-recipe .recipe-count { margin-left: 0; }

/* ===== Tour, gallery content and About (team pass) ===== */
/* About anchors (`?s=<id>`) land below the sticky top bar. */
.about-section, .about-defs dt { scroll-margin-top: 110px; }

/* ===== Highlights page ===== */
.highlights-view .hl-criteria {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid #c9b48e;
  background: #faf6ee;
  font-size: 0.92em;
  line-height: 1.5;
  max-width: 900px;
}

/* ── table, concepts, map (v2) ── */
/* Table: the explainer toggle sits at the end of the search row, and the
   collapsed explainer takes no space above the filter panel. */
#table-hero.page-hero-compact { display: none; }
.cmd-row .hero-toggle {
  align-self: flex-end;
  font: inherit; font-size: 12px; white-space: nowrap;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: #fff; color: var(--accent); cursor: pointer;
}
.cmd-row .hero-toggle:hover { background: var(--accent-bg); border-color: var(--accent); }
/* Rows span the container; the top-tokens track (minmax(…, 1fr)) takes the
   rest. --cols-minw (set with --cols) keeps narrow screens scrolling. */
.thead { width: 100%; min-width: var(--cols-minw, 100%); }
.row { right: 0; min-width: var(--cols-minw, 0); }
.row .cell.is-sticky-l1 { left: 78px; }
/* rho sparkline (falls back to svg.lifeline while rho_traj.bin is missing) */
.row .cell.lifeline-cell { padding: 0 8px; }
svg.rho-spark { display: block; flex: 0 0 auto; overflow: visible; }
svg.rho-spark .rs-band { fill: rgba(255, 200, 60, 0.22); }
svg.rho-spark .rs-half { stroke: #8a8a8a; stroke-width: 0.6; stroke-dasharray: 1 2; opacity: 0.6; }
svg.rho-spark .rs-line { fill: none; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
/* Leading-space marker in the top-tokens cell */
.row .cell.tok .tok-ws { color: var(--muted); opacity: 0.75; font-size: 10px; margin-right: 1px; }
/* Concept labels are readable names now, not list ids */
.row .cell.concept-cell .concept-tag { font-family: inherit; font-size: 11px; }
@media (max-width: 720px) {
  .table-actions { flex-wrap: wrap; margin-left: 0; }
  .table-actions .f-checkbox { white-space: nowrap; }
  .cmd-row .hero-toggle { align-self: flex-start; height: 28px; }
}
/* Map (feature and token): "About this map" starts collapsed; the toolbar is
   one control row with the captions and stats on a second line, so the canvas
   starts in the first screen and fits in it on desktop. */
.map-mode-bar { padding: 2px 0 6px; margin-bottom: 6px; border-bottom: 0; }
.map-view .map-about { margin-bottom: 6px; }
.map-view .map-about > summary { padding: 5px 12px; }
@media (min-width: 601px) {
  .map-toolbar { gap: 6px 14px; align-items: flex-end; padding: 8px 14px; margin-bottom: 8px; }
  .map-toolbar .map-tg-data { display: contents; }
  .map-toolbar .map-tg-row { align-items: flex-end; }
  .map-toolbar .map-tg-sep { align-self: stretch; }
  .map-toolbar .map-checkbox { min-height: 26px; }
  .map-toolbar .map-tg-caps { order: 10; flex: 1 1 360px; max-width: none; min-height: 0; }
  .map-toolbar .map-stats { order: 11; align-self: flex-end; margin-left: auto; white-space: nowrap; }
  .map-host, .map-side { height: calc(100vh - 315px); min-height: 460px; }
}

/* ── nav, home, examples (v2) ── */
/* The feature page title already names the selected feature. */
body[data-view="feature"] .selected-feature-pill { display: none; }

/* Home: intro beside the ρ chart; stacks on narrow screens. */
.home-view .home-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 18px 36px; align-items: start;
}
.home-view .home-hero .lede { max-width: 68ch; }
@media (max-width: 960px) {
  .home-view .home-hero { grid-template-columns: minmax(0, 1fr); }
}
.home-rho { margin: 2px 0 0; min-width: 0; }
.home-rho figcaption { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.rho-chart { width: 100%; }
.rho-chart-empty {
  display: flex; align-items: center; justify-content: center;
  background: #fafafa; border: 1px dashed var(--line); border-radius: 4px;
}
.rho-chart-msg { font-size: 12px; color: var(--muted); padding: 0 16px; text-align: center; }
.rho-chart-svg { display: block; overflow: visible; }
.rho-chart-svg text { font-size: 10px; }
.rho-chart-svg .rc-tick, .rho-chart-svg .rc-axis-lab, .rho-chart-svg .rc-lab-sub { fill: var(--muted); }
.rho-chart-svg .rc-axis-lab { font-size: 11px; }
.rho-chart-svg .rc-window { fill: rgba(255, 200, 60, 0.22); }
.rho-chart-svg .rc-window-lab { fill: #8a6d00; font-size: 9.5px; }
.rho-chart-svg .rc-grid { stroke: var(--line); stroke-width: 1; }
.rho-chart-svg .rc-xtick { stroke: var(--line-strong); stroke-width: 1; }
.rho-chart-svg .rc-band { opacity: 0.14; stroke: none; }
.rho-chart-svg .rc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rho-chart-svg .rc-alive { stroke: #8a8a8a; stroke-width: 1; stroke-dasharray: 4 3; }
.rho-chart-svg .rc-alive-lab {
  fill: #6e6e6e; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.rho-chart-svg .rc-leader { stroke-width: 1; opacity: 0.55; }
.rho-chart-svg .rc-lab-name { font-size: 11px; font-weight: 600; }
.rho-chart-svg .rc-lab-sub { font-size: 11px; }
/* Lifecycle cards: the chart carries the shapes, so the cards drop their glyphs. */
.home-lc-card { grid-template-columns: minmax(0, 1fr); }
.home-other-views { margin: 0 0 8px; font-size: 13px; }
.about-other-views { margin: 10px 0 0; font-size: 12.5px; }
.other-views-k { color: var(--muted); margin-right: 2px; }

/* Examples page: highlights on top, then themes collapsed by default. */
.ex-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0 0; }
.ex-tour-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent-bg); color: var(--accent); font-size: 13px; font-weight: 600;
}
.ex-tour-btn:hover { background: #d8e6f5; text-decoration: none; }
.ex-jump { font-size: 13px; }
.ex-themes { margin: 40px 0 0; scroll-margin-top: calc(var(--bar-h, 64px) + 12px); }
/* Tall enough that #<m>/examples can scroll its heading to the top. */
.ex-themes { min-height: calc(100vh - var(--bar-h, 64px) - 24px); }
.ex-themes-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-strong);
}
.ex-themes-head h2 { font-size: 18px; margin: 0; font-weight: 600; }
.ex-themes-toggle {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--accent);
}
.ex-themes-toggle:hover { background: var(--accent-bg); }
.ex-themes-lede { margin: 10px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 80ch; }
.ex-theme { border-bottom: 1px solid var(--line); }
.ex-theme > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 12px;
  gap: 12px; align-items: baseline; padding: 10px 4px;
}
.ex-theme > summary::-webkit-details-marker { display: none; }
.ex-theme > summary::after { content: "▸"; color: var(--muted); font-size: 11px; }
.ex-theme[open] > summary::after { content: "▾"; }
.ex-theme > summary:hover .ex-theme-title { color: var(--accent); }
.ex-theme-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-theme-title { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.ex-theme-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-theme[open] .ex-theme-preview { display: none; }
.ex-theme-count {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--muted);
  background: var(--code-bg); padding: 1px 7px; border-radius: 10px;
}
.ex-theme-body { padding: 0 4px 18px; }
.ex-theme-body .ex-note { margin-top: 0; }
.ex-theme-above { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }

/* ── feature page (v2) ── */
/* Trajectory charts (utils/svg.js): stretched SVG geometry, HTML text. */
.spark { --sp-gutter: 30px; container-type: inline-size; font-size: 10px; line-height: 1; color: var(--muted); }
.spark .sp-row { position: relative; margin-left: var(--sp-gutter); }
.spark .sp-body { display: grid; grid-template-columns: var(--sp-gutter) minmax(0, 1fr); }
.spark .sp-ylabs { position: relative; height: var(--sp-h); }
.spark .sp-ylabs span {
  position: absolute; right: 5px; transform: translateY(-50%);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spark .sp-plot { position: relative; height: var(--sp-h); }
.spark .sp-plot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .sp-seglabs { height: 13px; }
.spark .sp-seglabs span {
  position: absolute; bottom: 2px; transform: translateX(-50%);
  font-size: 9.5px; letter-spacing: 0.05em; color: #8d8d8d; cursor: help;
}
.spark .sp-xlabs { height: 14px; }
.spark .sp-xlabs span {
  position: absolute; top: 3px; transform: translateX(-50%);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.spark .sp-xlabs span.end { transform: translateX(-100%); }
.spark .sp-cap { margin-top: 2px; text-align: center; font-size: 10px; }
.spark .sp-ref-lab {
  position: absolute; right: 3px; transform: translateY(-115%);
  font-size: 9.5px; color: #6f6f6f; background: rgba(255, 255, 255, 0.85);
  padding: 0 2px; cursor: help;
}
.spark svg line, .spark svg path { vector-effect: non-scaling-stroke; }
.spark svg .sp-axis { stroke: var(--line-strong); stroke-width: 1; }
.spark svg .sp-tick { stroke: var(--line-strong); stroke-width: 1; }
.spark svg .sp-band { fill: rgba(255, 200, 60, 0.2); }
.spark svg .sp-seg { stroke: #dcdcdc; stroke-width: 1; }
.spark svg .sp-ref { stroke: #8f8f8f; stroke-width: 1; stroke-dasharray: 4 3; }
.spark svg .sp-peak { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 2; }
.spark svg .sp-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.spark.sp-primary svg .sp-line { stroke-width: 1.9; }
.spark svg .sp-hit { fill: transparent; }
.spark svg .sp-hit:hover { fill: rgba(26, 79, 139, 0.09); }
@container (max-width: 420px) {
  .spark .sp-xlabs span.minor { display: none; }
}
.fp-primary-head { flex-wrap: wrap; align-items: baseline; margin-bottom: 2px; }
.fp-primary-head > span:first-child { color: var(--fg); }
.fp-primary-raw { font-size: 10.5px; }
.fp-primary-raw .v { color: var(--muted); }
.fp-primary-chart .fp-timeline-strip { margin-top: 8px; }
.traj-card .spark { margin-top: 2px; }
.fp-traj-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin: 0 0 8px; font-size: 11px; color: var(--muted);
}
.fp-traj-legend .fp-key-peak { margin-left: 8px; }

/* Token heatmap: fixed-width columns, left-aligned, scrolls on its own. */
.lens-scroll { max-width: 100%; overflow-x: auto; }
/* Shrink-to-fit grid: columns up to --lens-col wide, narrowing to
   --lens-col-min before the heatmap scrolls; the token column stays put. */
.lens-heatmap { --lens-col: 120px; --lens-col-min: 64px; display: inline-grid; width: auto; vertical-align: top; overflow: visible; }
.lens-heatmap .htok, .lens-heatmap .hcorner { position: sticky; left: 0; z-index: 1; }
.lens-decayed-note .nowrap { white-space: nowrap; }
.lens-heatmap .hcorner {
  font-size: 9.5px; color: var(--muted); text-align: right;
  padding: 0 8px 4px; display: flex; align-items: flex-end; justify-content: flex-end;
}
.lens-heatmap .hcol-head { font-size: 10.5px; color: var(--fg); padding: 6px 4px 4px; white-space: normal; }
.lens-heatmap .hcol-head.final { font-weight: 600; }
.lens-heatmap .htok { min-width: max-content; max-width: 220px; }
.lens-heatmap .htok .tok-ws, .tokens-card td.tok .tok-ws { color: var(--muted); opacity: 0.75; }
.lens-decayed-note {
  margin: 2px 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 90ch;
}
.fp-header .tok-chip .tok-glyph, .fp-tldr-toks .tok-ws { white-space: pre; }
.fp-tldr-toks + .fp-tldr-toks { margin-left: 2px; }
@media (max-width: 560px) {
  .lens-heatmap { --lens-col: 84px; --lens-col-min: 44px; }
  .lens-heatmap .hcol-head { font-size: 9.5px; padding: 5px 2px 3px; }
  .lens-heatmap .htok { max-width: 120px; }
}

/* ── back link to the project page (deployed site only) ── */
header.bar .site-home {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); white-space: nowrap;
  padding: 4px 10px 4px 0; margin-right: 10px;
  border-right: 1px solid var(--line);
}
header.bar .site-home[hidden] { display: none; }
header.bar .site-home:hover { color: var(--fg); text-decoration: none; }
header.bar .site-home-arrow { font-size: 15px; line-height: 1; }
@media (max-width: 720px) {
  header.bar .site-home { padding-right: 8px; margin-right: 8px; }
  header.bar .site-home-label { display: none; }
}