/*
 * LCARS theme for Chat Archaeologist viewer.
 *
 * Single file. Exported as @chat-arch/viewer/style.css.
 *
 * Typography triad (do not mix jobs):
 *   - Antonio         — chrome, ALL-CAPS labels, KPI values, titles, pills, mode strip
 *   - IBM Plex Sans   — body prose inside cards and messages (≥12px paragraph text)
 *   - JetBrains Mono  — model names, timestamps, code, keyboard hints, project labels, axis ticks
 *
 * Accent discipline (one job each):
 *   - sunflower    → primary: titles, KPI values, strong text
 *   - ice          → data/code: model names, inline code, highlighted keywords
 *   - violet       → thinking blocks, copy-to-MD button
 *   - peach        → cost bars, CLI-Direct badge
 *   - butterscotch → chrome (top bar, mode bar, ALL-CAPS labels)
 *
 * Responsive strategy (mobile-first):
 *   - Base rules target Tier C "mobile" (< 600px): vertical stack, horizontal
 *     pill bar sidebar, no double-elbow chrome. LCARS identity comes from
 *     palette + font + pill shapes.
 *   - @media (min-width: 600px)  upgrades to Tier B "tablet": collapsed
 *     56px icon-strip sidebar, full elbow chrome, wider search input.
 *   - @media (min-width: 900px)  upgrades to Tier A "desktop": full 160px
 *     sidebar with labels, wider top bar, three-column upper panel.
 *
 * Below 320px the consumer renders a dignified fallback banner
 * (.lcars-root--narrow). That is the sole viewport gate now; the legacy
 * "LCARS requires 900px" gate was replaced mid-Phase-5 at user direction.
 *
 * Accessibility note: all functional text uses either `--lcars-text` (#FFCC99)
 * or black (#000) on a source-color chip — both pairs clear 4.5:1 on the
 * #000 frame background. `--lcars-dim` (#665544) is reserved for placeholder
 * em-dashes ("—") and similar inert glyphs.
 */

/* Fonts are loaded by the consumer (e.g. apps/standalone/src/layouts/
   BaseLayout.astro imports @fontsource/antonio etc.), not by this
   stylesheet. The previous @import from fonts.googleapis.com leaked
   the visitor's IP to Google on every page load — incompatible with
   the "runs entirely in your browser · no servers, no telemetry"
   promise the empty state now makes. Keeping font loading at the app
   layer lets each consumer pick weights and source (self-hosted via
   @fontsource, CDN, system stack) without the viewer dictating a
   cross-origin fetch.

   If the font stacks below don't match anything the consumer loaded,
   the generic fallbacks (Oswald/Impact/system-ui/Consolas) keep the
   layout readable while making the missing-font case obvious. */

.lcars-root {
  /* Crisp text on the black LCARS frame. Without these, Windows ClearType
     produces color-fringed subpixel rendering that reads as "fuzzy" on dark
     backgrounds. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* TopBar min-height + matching desktop sidebar elbow height. The
     desktop layout puts the sidebar and the TopBar in the same grid
     row (the LCARS L-corner), so the elbow's height must match the
     TopBar's min-height exactly or the L breaks visually. Sharing
     one variable prevents future drift. */
  --lcars-top-bar-min-height: 44px;

  --lcars-sunflower: #ffcc99;
  /* Pre-composited sunflower × 0.85 over black. Used as a solid background
     color for inactive sidebar items so contrast (10.25:1 vs black text)
     holds regardless of what ever gets rendered behind the item. Replaces
     the earlier `opacity: 0.85` approach, which depended on the item
     sitting on a pure-black surface. */
  --lcars-sunflower-muted: #d9ad82;
  --lcars-butterscotch: #dd9944;
  --lcars-butterscotch-muted: #6a4a20;
  --lcars-ice: #99ccff;
  --lcars-violet: #cc99cc;
  --lcars-peach: #ff9933;
  --lcars-bg: #000000;
  --lcars-bg-1: #07070a; /* card/panel surface */
  --lcars-bg-2: #0d0d12; /* card hover */
  --lcars-text: #ffcc99;
  --lcars-dim: #665544;
  --lcars-divider: rgba(221, 153, 68, 0.18);

  /* Semantic-status tokens. BaseLayout :root also declares these for
     standalone Astro pages (iter-3 Bundle G); duplicated here so the
     viewer component cleanly resolves them whether or not BaseLayout
     is in the cascade above. Values match BaseLayout. */
  --lcars-pass: #88e088;
  --lcars-fail: #f08080;
  --lcars-warn: #ffd680;

  /* Triad font stacks — see the header comment for when to reach for each. */
  --lcars-font-chrome: 'Antonio', 'Oswald', 'Impact', sans-serif;
  --lcars-font-prose: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --lcars-font-mono: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
  /* Back-compat alias — kept so any lingering references resolve cleanly. */
  --lcars-body-font: var(--lcars-font-prose);

  color: var(--lcars-text);
  background: var(--lcars-bg);
  font-family: var(--lcars-font-chrome);
  font-weight: 500;
  letter-spacing: 0.02em;
  /* No forced min-height: 100vh — body + html are already black, so a
     short empty state fits the viewport without needing a tall root.
     Forcing 100vh was combining with tier padding (10/12px) to emit
     4–8px of vestigial scrollbar on the empty state. */
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}

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

@media (min-width: 600px) {
  .lcars-root {
    padding: 10px;
  }
}

@media (min-width: 900px) {
  .lcars-root {
    padding: 12px;
  }
}

/* --- sub-320px fallback banner (extreme edge only) --- */
.lcars-root--narrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.lcars-narrow-banner {
  border: 4px solid var(--lcars-butterscotch);
  border-radius: 20px;
  padding: 20px 24px;
  max-width: 600px;
  text-align: center;
  background: var(--lcars-bg);
}
.lcars-narrow-banner__title {
  color: var(--lcars-sunflower);
  font-size: 18px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.lcars-narrow-banner__body {
  color: var(--lcars-text);
  font-size: 13px;
}

/* --- frame & grid (mobile-first stack) --- */
/* Root is content-sized. We don't force 100vh because html + body
   already paint black, so a short empty state fits the viewport
   without needing a tall root — and forcing 100vh was combining with
   tier padding to produce 4–8px of vestigial scrollbar on the empty
   state (frame's old `calc(100vh - 16px)` assumed 8px padding but
   desktop uses 12px). `box-sizing: border-box` keeps padding accounted
   for if a future consumer DOES set a height. */
.lcars-root {
  box-sizing: border-box;
}

.lcars-frame {
  display: grid;
  grid-template-columns: 1fr;
  /* Tier C: top bar / pill sidebar / content column / optional footer
     trust strip. The footer row is `auto` so it collapses to zero when
     no <TrustStrip variant="footer" /> is present. */
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
}
/* Empty-state frame: keep the TopBar visible (SCAN LOCAL + UPLOAD CLOUD are
   the primary actions out of this state) but collapse the sidebar column so
   the "NO DATA YET" message and upload card get the full viewport width.
   At desktop the populated `.lcars-frame` is `160px 1fr`; --empty overrides
   to a single column so TopBar spans full width and nothing lands in the
   would-be sidebar slot. */
/* Double-class selector for specificity: the base `.lcars-frame` rule
   under @media (min-width: 900px) sets `160px 1fr` and, being defined
   later in the stylesheet, would win at same single-class specificity. */
.lcars-frame.lcars-frame--empty {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
@media (min-width: 900px) {
  .lcars-frame.lcars-frame--empty {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(40px, auto) 1fr;
  }
  .lcars-frame.lcars-frame--empty .lcars-top-bar {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }
}
.lcars-empty-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 16px;
  min-height: 0;
}
.lcars-empty-main > * {
  width: 100%;
  max-width: 640px;
}
.lcars-body {
  display: contents;
}
.lcars-content-column {
  display: grid;
  /* Rows: upper-panel (auto), mid-bar (20px), filter-bar (auto),
     mode-area (1fr). Filter bar hugs the content so the pills'
     scope — "filter what's rendered below" — reads at a glance. */
  grid-template-rows: auto 20px auto 1fr;
  gap: 6px;
  min-height: 0;
}

/* --- first-data "coming online" boot sequence ---
   Fires once per browser when real data first arrives via rescan or
   upload (see ChatArchViewer's `triggerBoot`). Staggers the major
   panels so the viewer reads as powering up in sequence rather than
   snap-rendering, matching the LCARS "systems online" aesthetic.
   Respects prefers-reduced-motion — the trigger in JS skips setting
   the flag at all when motion is reduced. */
@keyframes lcars-boot-online {
  0% {
    opacity: 0;
    transform: translateY(6px);
    filter: brightness(0.6);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1.25);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1);
  }
}
.lcars-root[data-booting='true'] .lcars-top-bar {
  animation: lcars-boot-online 400ms ease-out 0ms both;
}
.lcars-root[data-booting='true'] .lcars-sidebar {
  animation: lcars-boot-online 500ms ease-out 80ms both;
}
.lcars-root[data-booting='true'] .lcars-upper-panel {
  animation: lcars-boot-online 550ms ease-out 240ms both;
}
.lcars-root[data-booting='true'] .lcars-filter-bar {
  animation: lcars-boot-online 500ms ease-out 500ms both;
}
.lcars-root[data-booting='true'] .lcars-mode-area {
  animation: lcars-boot-online 600ms ease-out 700ms both;
}
/* Individual command-mode cards cascade in right after the mode area
   — the staggered `.mode-area__cards > * :nth-child` fan-out is the
   part that most feels "computer booting up". Cap at 20 children
   so a 1000-session corpus doesn't hold the last cards offscreen. */
.lcars-root[data-booting='true'] main[aria-label='command mode'] li {
  animation: lcars-boot-online 420ms ease-out both;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(1) {
  animation-delay: 900ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(2) {
  animation-delay: 950ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(3) {
  animation-delay: 1000ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(4) {
  animation-delay: 1050ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(5) {
  animation-delay: 1100ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(6) {
  animation-delay: 1150ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(7) {
  animation-delay: 1200ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(8) {
  animation-delay: 1250ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(9) {
  animation-delay: 1300ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(10) {
  animation-delay: 1350ms;
}
.lcars-root[data-booting='true'] main[aria-label='command mode'] li:nth-child(n + 11) {
  animation-delay: 1400ms;
}
@media (prefers-reduced-motion: reduce) {
  .lcars-root[data-booting='true'] *,
  .lcars-root[data-booting='true'] *::before,
  .lcars-root[data-booting='true'] *::after {
    animation: none !important;
  }
}

/* --- filter bar ---
   Two compact rows of pills (source + zero-turn, then project)
   rendered directly above the mode-area content. Uses the same bg-1
   surface as the upper panel so the chrome feels continuous while the
   role differs — this one *scopes* what's shown below. */
.lcars-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: var(--lcars-bg-1);
  border: 1px solid var(--lcars-divider);
  border-radius: 8px;
}
.lcars-filter-bar__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/*
 * Small uppercase row prefix ("PROJECTS", "TOPICS") that anchors each
 * pill row so the user can tell at a glance which kind of filter
 * they're looking at. Color-coded to match the pills in that row:
 * butterscotch/ice for projects (matching the dominant pill colors),
 * violet for topics (matching --emergent pills). Width is fixed-ish
 * so pill rows align vertically; if you change one row's font you
 * may want to revisit the min-width to keep alignment crisp.
 */
.lcars-filter-bar__row-label {
  font-size: 10px;
  font-weight: 700;
  /* Tracking raised from 0.12em → 0.14em to clear the LCARS chrome
     carve-out floor (≥9px ALL-CAPS + ≥0.14em tracking, design-system §9). */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  min-width: 70px;
  padding-right: 4px;
  user-select: none;
}
.lcars-filter-bar__pills--topic .lcars-filter-bar__row-label {
  color: var(--lcars-violet);
}

/*
 * Live-streaming treatment on the project pill row. While semantic
 * analysis is mid-run, counts/ranks change several times a second.
 * Without a signal that the row is "not final", users would
 * misread pill positions as stable. A subtle pulsing left-edge
 * accent reads as "activity happening here" without being noisy
 * or stealing attention from the chip's own progress percentage.
 * Reduced-motion users get only the static border color bump so
 * the affordance is still visible.
 */
.lcars-filter-bar__pills--streaming {
  position: relative;
  padding-left: 10px;
  border-left: 2px solid var(--lcars-violet);
  animation: lcars-filter-streaming-pulse 1.6s ease-in-out infinite;
}
@keyframes lcars-filter-streaming-pulse {
  0%, 100% { border-left-color: var(--lcars-violet); }
  50%      { border-left-color: color-mix(in srgb, var(--lcars-violet) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .lcars-filter-bar__pills--streaming {
    animation: none;
  }
}

/* Focus pulse — fired when the ANALYSIS-tab LABELS / TOPICS cards
   navigate the user here. A 2.2s double-flash on the pill row so the
   eye clearly catches it; re-triggers on repeat clicks via the
   `key`-bump pattern in ChatArchViewer.
   Color-matched per row:
     .lcars-filter-bar__pills--project → ice-blue (LABELS accent)
     .lcars-filter-bar__pills--topic   → violet   (TOPICS accent)
*/
.lcars-filter-bar__pills--focused {
  position: relative;
  border-radius: 6px;
  padding: 4px 8px;
  animation: lcars-filter-focus-pulse-ice 2.2s ease-out 1;
}
.lcars-filter-bar__pills--topic.lcars-filter-bar__pills--focused {
  animation: lcars-filter-focus-pulse-violet 2.2s ease-out 1;
}
@keyframes lcars-filter-focus-pulse-ice {
  0%, 50% {
    background: color-mix(in srgb, var(--lcars-ice) 28%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcars-ice) 60%, transparent);
  }
  25%, 75% {
    background: color-mix(in srgb, var(--lcars-ice) 6%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lcars-ice) 20%, transparent);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes lcars-filter-focus-pulse-violet {
  0%, 50% {
    background: color-mix(in srgb, var(--lcars-violet) 28%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcars-violet) 60%, transparent);
  }
  25%, 75% {
    background: color-mix(in srgb, var(--lcars-violet) 6%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lcars-violet) 20%, transparent);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lcars-filter-bar__pills--focused {
    animation: none;
    background: color-mix(in srgb, var(--lcars-ice) 12%, transparent);
  }
  .lcars-filter-bar__pills--topic.lcars-filter-bar__pills--focused {
    background: color-mix(in srgb, var(--lcars-violet) 12%, transparent);
  }
}

@media (min-width: 600px) {
  .lcars-frame {
    grid-template-columns: 1fr;
    /* `minmax(56px, auto)` lets the TopBar's row grow when its inner
       chips wrap to a second line. A fixed `56px` row clipped the
       wrapped content (title + date pill rendered half-visible). */
    grid-template-rows: minmax(56px, auto) 1fr auto;
    gap: 8px;
    /* No forced min-height — frame sizes to content. Populated layouts
       grow naturally from their session grid; empty state stays short
       so no vestigial scrollbar appears on short pages. */
  }
  .lcars-body {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    min-height: 0;
  }
  .lcars-content-column {
    /* Same 4-row stack as mobile: upper-panel / mid-bar / filter-bar /
       mode-area. Mid-bar tightens from 20px to 24px at tablet. */
    grid-template-rows: auto 24px auto 1fr;
    gap: 8px;
  }
}

@media (min-width: 900px) {
  /* Desktop tier uses a flat 2×2 grid on .lcars-frame so the sidebar can
     span both rows as a single continuous butterscotch L-spine, while the
     top-bar occupies only the content column (row 1, col 2). The classic
     LCARS L: vertical arm on the left, horizontal arm to the right of it,
     meeting at a square inner corner; the outer rounded corners live on
     the sidebar itself. */
  .lcars-frame {
    grid-template-columns: 160px 1fr;
    /* `minmax(40px, auto)` — see tablet note. Desktop has more
       chips (location + indexed + earthdate + tier + rescan-chip)
       and is the breakpoint where wrap-clipping was most visible. */
    grid-template-rows: minmax(40px, auto) 1fr auto;
    column-gap: 8px;
    row-gap: 0;
  }
  /* Flatten .lcars-body at desktop so sidebar and content-column become
     direct grid items of .lcars-frame (same pattern as mobile tier). */
  .lcars-body {
    display: contents;
  }
  .lcars-top-bar {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .lcars-sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  .lcars-content-column {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

/* --- top bar --- */
.lcars-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--lcars-bg);
  border-bottom: 3px solid var(--lcars-butterscotch);
  border-radius: 0 16px 16px 0;
}
.lcars-top-bar__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.lcars-top-bar__dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lcars-sunflower);
}
.lcars-top-bar__title {
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--lcars-sunflower);
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  /* 28px flex box matches the source buttons beside it. Antonio's
     line-box has an ~11:1 ascent:descent split, so a centered
     line-box puts the baseline below container center and caps
     appear low. `padding-bottom: 3px` (border-box, height stays 28)
     pulls the line-box up so ink-mid lands on container center —
     matched empirically against canvas ink measurement. */
  display: inline-flex;
  align-items: center;
  height: 28px;
  line-height: 1;
  padding-bottom: 3px;
}
.lcars-top-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.lcars-top-bar__search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--lcars-bg);
  border: 2px solid var(--lcars-butterscotch);
  border-radius: 20px;
  padding: 3px 10px;
  flex: 1 1 100%;
  min-width: 0;
}
.lcars-top-bar__search-label {
  color: var(--lcars-butterscotch);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.lcars-top-bar__search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--lcars-text);
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  width: 100%;
  min-width: 0;
}
.lcars-top-bar__search-input::placeholder {
  color: var(--lcars-dim);
}
.lcars-top-bar__search--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lcars-top-bar__search--disabled .lcars-top-bar__search-input {
  cursor: not-allowed;
}

/* --- top-bar source buttons ---
   Two buttons on the left cluster: Upload Cloud / Update Cloud and
   Scan Local / Update Local. Shared visual language: dark-inset chip
   on the butterscotch top bar, status colors (violet=running,
   ice=ok, peach=error), and a two-line layout when a live caption
   is present (Scan Local's progress stream). */
.lcars-top-bar__source-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  /* At desktop the top-bar is butterscotch; the dark chip + dark text
     reads as a classic LCARS pill. Below 900px the top-bar bg flips to
     black (mobile tier), so the mobile override below inverts the chip
     chrome to stay legible. */
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  color: var(--lcars-bg);
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
  max-width: 360px;
  line-height: 1.1;
  transition:
    background 120ms,
    color 120ms,
    max-width 120ms,
    opacity 120ms;
}
.lcars-top-bar__source-btn:hover,
.lcars-top-bar__source-btn:focus-visible {
  /* Brighten on hover rather than darken — pulling the chip toward
     full-black made the sunflower text harder to read than the
     idle state. Now it lifts to a solid black panel with full
     contrast for the sunflower label. */
  background: var(--lcars-bg);
  color: var(--lcars-sunflower);
  outline: none;
}
/* Mobile / tablet override: the top-bar bg is black below 900px, so the
   desktop chip (dark text on dark chip) reads as invisible. Flip to
   butterscotch-on-dark so SCAN LOCAL and UPLOAD CLOUD stay legible. */
@media (max-width: 899px) {
  .lcars-top-bar__source-btn {
    background: rgba(255, 204, 153, 0.12);
    border-color: var(--lcars-butterscotch);
    color: var(--lcars-butterscotch);
  }
  .lcars-top-bar__source-btn:hover,
  .lcars-top-bar__source-btn:focus-visible {
    background: var(--lcars-butterscotch);
    color: var(--lcars-bg);
  }
}
.lcars-top-bar__source-btn-label {
  white-space: nowrap;
  /* `line-height: 1` + `padding-bottom: 2px` is the same correction
     applied to the title: shifts the Antonio line-box up so caps
     paint on the container's visual center rather than below it. */
  line-height: 1;
  padding-bottom: 2px;
}
/* A source-btn + its InfoPopover live inside a `.source-group` so the
   group is the unit the top-bar flexes over. Info glyph is
   independently clickable without triggering the button action. */
.lcars-top-bar__source-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  position: relative;
}

/* --- info popover ---
   Standalone clickable ⓘ that opens an anchored help panel. Sits
   beside its companion control. Readable at a glance — full bright
   glyph in a small dark circle so users see "there's help here"
   without hover. */
.lcars-info-popover {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.lcars-info-popover__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.2 SC 2.5.8 ("Target Size (Minimum)") asks for 24×24 CSS
     pixels on interactive targets. The privacy/trust copy for the
     UPLOAD CLOUD and SCAN LOCAL buttons lives behind these triggers
     on mobile, so missing the hit target is worse here than on a
     cosmetic chip. Bumped from 20→24; visual dot diameter held the
     same via a slightly smaller glyph so the chrome doesn't get
     bulkier, only the tappable area grows. */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lcars-bg);
  color: var(--lcars-sunflower);
  font-family: var(--lcars-font-chrome);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--lcars-sunflower);
  transition:
    background 100ms,
    color 100ms,
    border-color 100ms;
  /* Matches the source-pill badge correction: Antonio's baseline
     sits low in the line-box, so a centered line-box paints the
     italic `i` below the circle center. `padding-bottom: 1px`
     shifts the line-box up so the ink-mid lands on circle-mid. */
  padding-bottom: 1px;
}
.lcars-info-popover__trigger:hover,
.lcars-info-popover__trigger:focus-visible,
.lcars-info-popover__trigger--open {
  background: var(--lcars-sunflower);
  color: var(--lcars-bg);
  border-color: var(--lcars-sunflower);
  outline: none;
}
/* On the butterscotch top bar, invert to dark-on-butterscotch so
   the chip reads against the bright strip without competing with
   the adjacent source-btn. Hover flips to a filled sunflower chip. */
.lcars-top-bar .lcars-info-popover__trigger {
  background: transparent;
  border-color: var(--lcars-bg);
  color: var(--lcars-bg);
}
.lcars-top-bar .lcars-info-popover__trigger:hover,
.lcars-top-bar .lcars-info-popover__trigger:focus-visible,
.lcars-top-bar .lcars-info-popover__trigger--open {
  background: var(--lcars-bg);
  color: var(--lcars-sunflower);
  border-color: var(--lcars-bg);
}
.lcars-info-popover__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--lcars-bg-1);
  color: var(--lcars-text);
  border: 1px solid var(--lcars-divider);
  border-left: 3px solid var(--lcars-sunflower);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.5;
  z-index: 9999;
  animation: lcars-info-popover-in 140ms ease-out;
}
.lcars-info-popover__panel strong {
  display: block;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lcars-sunflower);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.lcars-info-popover__panel p {
  margin: 0 0 8px;
}
.lcars-info-popover__panel p:last-child {
  margin-bottom: 0;
}
.lcars-info-popover__panel ul {
  margin: 0 0 8px;
  padding-left: 18px;
}
.lcars-info-popover__panel li {
  margin-bottom: 2px;
}
.lcars-info-popover__panel code {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  background: rgba(255, 204, 153, 0.08);
  color: var(--lcars-ice);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 204, 153, 0.1);
}
.lcars-info-popover__panel em {
  font-style: normal;
  color: var(--lcars-ice);
}
@keyframes lcars-info-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Source-btn caption — mixed-case status text from `scanProgress.latest`
   (path strings, "embedding sessions 432/1041", etc.). Was 9.5px /
   opacity 0.85 / no tracking — below the 12px body-prose floor and not
   eligible for the chrome carve-out (mixed case). Bumped to 11.5px
   with mono tabular-nums; opacity replaced by color-mix so the
   composited contrast is auditable. 11.5px is the chrome-microcopy
   floor across the source-pill / KPI families established in iter-7. */
.lcars-top-bar__source-btn-caption {
  font-family: var(--lcars-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 85%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
}
.lcars-top-bar__source-btn--running {
  background: var(--lcars-violet);
  color: var(--lcars-bg);
  cursor: progress;
  height: auto;
  min-height: 28px;
  padding: 4px 12px;
  animation: lcars-source-btn-pulse 1.2s ease-in-out infinite;
}
.lcars-top-bar__source-btn--ok {
  background: var(--lcars-ice);
  color: var(--lcars-bg);
}
.lcars-top-bar__source-btn--error {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
}
/* Web-only / no-backend: button renders but is visibly inert.
   Hover tooltip explains how to enable it (install locally). This is
   a `<div role="button">` (not a native :disabled control), so the
   WCAG opacity exemption does NOT apply — the muted appearance must
   be expressed via explicit color/background mixes so the composited
   contrast is auditable. Earlier `rgba(0,0,0,X)` + `opacity: 0.55`
   stacking produced unpredictable contrast and tripped the iter-14
   "opacity-on-functional-text" check. */
.lcars-top-bar__source-btn--unavailable {
  cursor: help;
  background: color-mix(in srgb, var(--lcars-bg) 55%, transparent);
  border-color: color-mix(in srgb, var(--lcars-bg) 70%, transparent);
  color: color-mix(in srgb, currentColor 55%, var(--lcars-bg-1));
}
.lcars-top-bar__source-btn--unavailable:hover {
  background: color-mix(in srgb, var(--lcars-bg) 65%, transparent);
  color: var(--lcars-bg);
}
.lcars-top-bar__source-btn--unavailable:focus-visible {
  background: color-mix(in srgb, var(--lcars-bg) 65%, transparent);
  color: var(--lcars-bg);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
@keyframes lcars-source-btn-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* --- rescan banner (visible success / error strip) ---
   Fixed-position strip pinned near the top of the viewport. Errors
   stay until dismissed; successes auto-fade (handled in the host).
   Kept visually distinct from the LCARS chrome so nothing reads as
   "normal state" when a rescan just failed. */
.lcars-rescan-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 48px);
  min-width: 320px;
  padding: 10px 14px 10px 14px;
  border-radius: 10px;
  background: var(--lcars-bg-1);
  border: 1px solid var(--lcars-divider);
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lcars-text);
  animation: lcars-rescan-banner-in 160ms ease-out;
}
.lcars-rescan-banner--ok {
  border-left: 4px solid var(--lcars-ice);
}
.lcars-rescan-banner--error {
  border-left: 4px solid var(--lcars-peach);
}
.lcars-rescan-banner--demo {
  border-left: 4px solid var(--lcars-butterscotch);
  /* Demo banner is persistent (not a transient toast), so anchor it at the
     bottom-right instead of overlaying center-top. This keeps the KPI strip
     visible on first load and matches the "non-blocking info" pattern. */
  top: auto;
  left: auto;
  bottom: 12px;
  right: 12px;
  transform: none;
  max-width: 460px;
  animation: lcars-rescan-banner-demo-in 200ms ease-out;
}
.lcars-rescan-banner__link {
  color: var(--lcars-butterscotch);
  text-decoration: underline;
  white-space: nowrap;
}
.lcars-rescan-banner__link:hover,
.lcars-rescan-banner__link:focus-visible {
  color: var(--lcars-sunflower);
  outline: none;
}
@keyframes lcars-rescan-banner-demo-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lcars-rescan-banner__tag {
  flex: 0 0 auto;
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 3px 9px;
  border-radius: 9px;
  background: var(--lcars-bg);
  color: var(--lcars-sunflower);
}
.lcars-rescan-banner--ok .lcars-rescan-banner__tag {
  color: var(--lcars-ice);
}
.lcars-rescan-banner--error .lcars-rescan-banner__tag {
  color: var(--lcars-peach);
}
.lcars-rescan-banner--demo .lcars-rescan-banner__tag {
  color: var(--lcars-butterscotch);
}
.lcars-rescan-banner__message {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  max-height: 5.6em;
  overflow: hidden;
}
.lcars-rescan-banner__dismiss {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--lcars-divider);
  border-radius: 50%;
  color: var(--lcars-butterscotch);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.lcars-rescan-banner__dismiss:hover,
.lcars-rescan-banner__dismiss:focus-visible {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 153, 0.08);
  outline: none;
}
@keyframes lcars-rescan-banner-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (min-width: 600px) {
  .lcars-top-bar {
    /* `min-height` instead of `height` — the inner `__left` cluster has
       `flex-wrap: wrap`, so when its chips can't fit horizontally they
       wrap to a second row. A fixed outer height clips the wrapped row
       (manifests as the title and date pill rendering half-visible).
       `min-height` keeps the empty-bar tall enough to look balanced
       while letting the bar grow if wrap kicks in. */
    min-height: 56px;
    padding: 6px 14px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .lcars-top-bar__title {
    font-size: 18px;
  }
  .lcars-top-bar__search {
    padding: 4px 12px;
    flex: 0 0 auto;
  }
  .lcars-top-bar__search-input {
    font-size: 14px;
    width: 180px;
  }
  .lcars-top-bar__dot {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 900px) {
  /* Desktop tier: the top-bar is the horizontal arm of the LCARS L.
     It sits only above the content column (col 2 of the frame grid) —
     the sidebar owns the L's corner and vertical arm to the left. Square
     left edge butts against the 8px column-gap; right end keeps the
     classic LCARS half-pill cap. */
  .lcars-top-bar {
    /* See min-height note at the tablet breakpoint — same reason
       here: wrap-on-overflow must extend the bar, not clip it. The
       value lives in `--lcars-top-bar-min-height` because the
       sidebar's top elbow must match exactly (see
       `.lcars-sidebar__elbow` below). */
    min-height: var(--lcars-top-bar-min-height);
    padding: 6px 18px;
    background: var(--lcars-butterscotch);
    border-bottom: 0;
    border-radius: 0 22px 22px 0;
    gap: 16px;
  }
  .lcars-top-bar__title {
    font-size: 18px;
    letter-spacing: 0.16em;
    color: var(--lcars-bg);
  }
  .lcars-top-bar__dot {
    width: 12px;
    height: 12px;
    background: var(--lcars-bg);
  }
  .lcars-top-bar__search {
    background: rgba(0, 0, 0, 0.85);
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    border-radius: 18px;
    padding: 4px 12px 4px 14px;
    gap: 8px;
  }
  .lcars-top-bar__search-input {
    width: 240px;
    font-size: 12.5px;
  }
}

/* --- sidebar (desktop: full 160px) --- */
.lcars-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--lcars-bg);
  position: relative;
  min-height: 0;
}
/* Top elbow — canonical design-system shape: butterscotch rectangle
   with ONE rounded outer corner (top-left). Sized per the elbow
   radius tokens — 32px mobile, 36px tablet, 40px desktop — and tall
   enough to read as a chrome cap above the nav. Spec §10 retires the
   matching bottom elbow; v2 frame is left-edge-only. */
.lcars-sidebar__elbow {
  width: 100%;
  height: 32px;
  background: var(--lcars-butterscotch);
  flex-shrink: 0;
}
.lcars-sidebar__elbow--top {
  border-radius: 32px 0 0 0;
}
/* Footer hosts the SOURCE ↗ chip.
 *
 * Layout:
 *   `margin-top: auto` pushes the footer to the bottom of the sidebar
 *   flex column, with the bottom elbow rendering immediately below.
 *   `position: sticky; bottom: 12px` then pins the chip to 12px from
 *   the bottom of the scroll ancestor once the sidebar's bottom edge
 *   would otherwise scroll out of view — so the chip stays visible
 *   in the lower-left of the viewport even when the session list is
 *   5000+ px long.
 *
 * Why sticky rather than fixed:
 *   `position: fixed` anchors to the browser window regardless of
 *   embed context, which would float the chip over unrelated host
 *   UI when the viewer is embedded in a split pane / modal / docs
 *   page / multi-instance wrapper. Sticky uses the nearest scrolling
 *   ancestor — the viewport for the standalone app, the embed
 *   container for host apps — so the chip reads as "bottom-left of
 *   the viewer" in every consumer. (Codex PR review on #14, P2.)
 *
 * When the user scrolls all the way to the session-list bottom, the
 * chip naturally un-sticks at the sidebar's bottom edge, which is
 * fine — the viewer has already been fully explored at that point
 * and the trust signal has done its job.
 *
 * Mobile's horizontal variant renders its own inline footer (see
 * `.lcars-sidebar__footer--horizontal` further down) so the sticky
 * layout only engages at tier B+ width. */
.lcars-sidebar__footer {
  margin-top: auto;
  position: sticky;
  bottom: 12px;
  padding: 10px 8px 8px 10px;
  display: flex;
  justify-content: flex-start;
}
.lcars-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Two-tier IA: BROWSE / INSIGHTS group labels sit above each list of
   mode buttons. Tier C (mobile, horizontal variant) hides them — the
   pill bar has no room for section headings. */
.lcars-sidebar__group {
  display: flex;
  flex-direction: column;
}
.lcars-sidebar__group-label {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--lcars-butterscotch);
  padding: 10px 8px 4px 10px;
  user-select: none;
}
/* Only the first group needs top padding trimmed; the elbow already
   provides separation above. */
.lcars-sidebar__group:first-of-type > .lcars-sidebar__group-label {
  padding-top: 6px;
}
/* Phase 2a: ANALYTICS group is collapsible. The label becomes
   interactive — focusable, with a chevron suffix that flips when
   expanded. The collapsed list hides via display:none so it doesn't
   steal scroll space. */
.lcars-sidebar__group-label--toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}
.lcars-sidebar__group-label--toggle::after {
  content: '▾';
  font-size: 10px;
  margin-left: 6px;
  transition: transform 120ms ease-out;
}
.lcars-sidebar__group--collapsed .lcars-sidebar__group-label--toggle::after {
  transform: rotate(-90deg);
}
.lcars-sidebar__group-label--toggle:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-sidebar__group--collapsed .lcars-sidebar__list {
  display: none;
}
.lcars-sidebar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 8px 4px;
  /* Inactive state uses the pre-composited `--lcars-sunflower-muted`
     (#D9AD82) as a solid background, so black text lands 10.25:1 WCAG
     irrespective of the surface behind the item. Active override below
     swaps to the mode-specific color at full saturation. Previous
     butterscotch × opacity 0.55 treatment failed AA at 3.12:1 (R9 F9.1). */
  background: var(--lcars-sunflower-muted);
  color: var(--lcars-bg);
  border-radius: 0 14px 14px 0;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: background 80ms linear;
}
.lcars-sidebar__item:hover {
  background: var(--mode-color, var(--lcars-sunflower));
}
.lcars-sidebar__item:focus-visible {
  background: var(--mode-color, var(--lcars-sunflower));
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: -2px;
}
.lcars-sidebar__item--active {
  background: var(--mode-color, var(--lcars-sunflower));
  color: var(--lcars-bg);
  /* Active state needs to be visually distinct from hover (both set the
     same mode-color background). Inset left accent bar gives the active
     state a persistent visual cue that survives :hover and a contrast-
     based mode-color check. */
  box-shadow: inset 4px 0 0 var(--lcars-sunflower);
}
.lcars-sidebar__item-short {
  font-family: var(--lcars-font-mono);
  font-weight: 700;
  color: color-mix(in srgb, var(--lcars-bg) 70%, transparent);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.lcars-sidebar__item-label {
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  /* Hidden at Tier B — icon-strip shows only the short badge. */
  display: none;
}

@media (min-width: 600px) {
  .lcars-sidebar__elbow {
    height: 36px;
  }
  .lcars-sidebar__elbow--top {
    border-radius: 36px 0 0 0;
  }
  .lcars-sidebar__item {
    justify-content: center;
    padding: 10px 4px;
  }
  .lcars-sidebar__item-short {
    font-size: 11px;
    color: color-mix(in srgb, var(--lcars-bg) 90%, transparent);
  }
}

@media (min-width: 900px) {
  /* At desktop the sidebar itself is transparent. The top elbow is
     the only persistent chrome on the column; the mode-button tabs
     do the rest. v2 (spec §10) drops the bottom elbow entirely:
     left-edge-only frame. */
  .lcars-sidebar {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .lcars-sidebar__elbow {
    /* Must match `.lcars-top-bar { min-height }` exactly — the elbow
       sits in the same grid row as the TopBar (the L-corner), so any
       drift between the two heights leaves a visible gap or overlap. */
    height: var(--lcars-top-bar-min-height);
  }
  .lcars-sidebar__elbow--top {
    border-radius: var(--lcars-top-bar-min-height) 0 0 0;
  }
  .lcars-sidebar__item {
    gap: 10px;
    padding: 12px 14px 12px 12px;
    border-radius: 0 18px 18px 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    justify-content: flex-start;
  }
  .lcars-sidebar__item-short {
    font-size: 10px;
    color: color-mix(in srgb, var(--lcars-bg) 70%, transparent);
  }
  .lcars-sidebar__item-label {
    display: inline;
  }
}

/* --- sidebar horizontal pill bar (mobile only) --- */
.lcars-sidebar--horizontal {
  background: var(--lcars-bg);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Horizontal footer hosts the SOURCE chip alongside the scrolling
   pill bar. `flex-shrink: 0` keeps the chip visible while the
   pill-bar handles overflow on narrow viewports. */
.lcars-sidebar__footer--horizontal {
  /* Neutralize the vertical-variant's sticky/auto-margin tricks —
     the horizontal pill-bar wants a plain inline chip on the right. */
  position: static;
  margin-top: 0;
  margin-left: auto;
  padding: 0 8px 0 0;
  flex-shrink: 0;
  z-index: auto;
}
.lcars-sidebar__footer--horizontal .lcars-repo-link--chip {
  padding: 6px 10px;
  font-size: 10px;
}
.lcars-sidebar__pill-bar {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  /* `flex: 1 1 0; min-width: 0` keeps the pill-bar scrolling inside
     its allotted space instead of pushing the trailing sidebar footer
     off the edge on narrow mobile viewports. */
  flex: 1 1 0;
  min-width: 0;
}
.lcars-sidebar__pill-bar::-webkit-scrollbar {
  height: 4px;
}
.lcars-sidebar__pill-bar::-webkit-scrollbar-thumb {
  background: var(--lcars-butterscotch);
  border-radius: 2px;
}
.lcars-sidebar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 32px;
  padding: 0 12px;
  /* Inactive pills use a muted butterscotch rather than opacity dimming — the
     horizontal pill bar sits on the bg with no backdrop, and opacity would
     fade the whole chip rather than muting it. */
  background: var(--lcars-butterscotch-muted);
  color: var(--lcars-sunflower);
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  transition:
    background 80ms linear,
    color 80ms linear;
}
.lcars-sidebar__pill:hover {
  background: var(--mode-color, var(--lcars-sunflower));
  color: var(--lcars-bg);
}
.lcars-sidebar__pill:focus-visible {
  background: var(--mode-color, var(--lcars-sunflower));
  color: var(--lcars-bg);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-sidebar__pill--active {
  background: var(--mode-color, var(--lcars-sunflower));
  color: var(--lcars-bg);
  /* Persistent inset accent so active state survives :hover overlap. */
  box-shadow: inset 0 -3px 0 var(--lcars-sunflower);
}
.lcars-sidebar__pill-short {
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* --- upper panel --- */
.lcars-upper-panel {
  background: var(--lcars-bg-1);
  border: 1px solid var(--lcars-divider);
  border-left: 4px solid var(--lcars-butterscotch);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-height: 0;
}
.lcars-upper-panel__stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.lcars-upper-panel__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lcars-upper-panel__stat-label {
  color: var(--lcars-butterscotch);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.lcars-upper-panel__stat-value {
  color: var(--lcars-sunflower);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.lcars-upper-panel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}
.lcars-upper-panel__sparkline-wrap {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 600px) {
  .lcars-upper-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
  }
  .lcars-upper-panel__stats {
    flex-direction: column;
    gap: 4px;
  }
  .lcars-upper-panel__stat-label {
    min-width: 56px;
  }
  .lcars-upper-panel__pills {
    justify-content: flex-end;
  }
  .lcars-upper-panel__sparkline-wrap {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .lcars-upper-panel__stat-value {
    font-size: 18px;
  }
}

@media (min-width: 900px) {
  /* Desktop: stack rows vertically rather than side-by-side. The old
     3-column grid (320 / 1fr / 320) forced 6 source pills to wrap to
     3 rows and 4 KPIs to wrap to 2 rows just to fit their columns —
     burning ~100px of vertical space in the panel. With a single
     column, each row takes its natural one-row height and the panel
     is ~40% shorter at the same density. */
  .lcars-upper-panel {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    padding: 10px 16px;
    gap: 8px;
    /* Reset the tablet-tier `align-items: center` so the stats / tabs /
       body rows each stretch to full panel width. Without this override
       the panel collapses its children to content width and the body
       sits in a narrow center column. */
    align-items: stretch;
    /* Top-bar (row 1, col 2) meets the panel flush — keep the panel's
       top edge unbordered so we don't double-stroke the join. */
    border-top: 0;
    border-radius: 0 0 12px 12px;
  }
  /* Stats row at desktop: stats-start (VISIBLE + RANGE) on the left,
     stats-end (ZIP / UNLOAD) pinned right. The OVERVIEW/ANALYSIS tabs
     live on their own centered row below. `flex-direction: row` is
     explicit because the tablet media query sets column — without
     this override the children stack vertically and `align-items:
     center` centers them horizontally. */
  .lcars-upper-panel__stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 24px;
    row-gap: 8px;
  }
  .lcars-upper-panel__stat {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .lcars-upper-panel__stat-label {
    font-size: 10px;
    min-width: 0;
  }
  .lcars-upper-panel__stat-value {
    font-size: 20px;
  }
  .lcars-upper-panel__tier-slot {
    margin-top: 0;
    margin-left: auto;
  }
  .lcars-upper-panel__pills {
    justify-content: flex-start;
  }
  .lcars-upper-panel__sparkline-wrap {
    grid-column: auto;
    justify-content: flex-start;
  }
}

/* --- source pill ---
   Inactive state gets a subtle 10% tint of the source-color so the pill
   shape reads immediately — previously the transparent background made
   border-only pills blend into the frame at a glance. Active state still
   gets a solid fill for unambiguous selected-state legibility. */
.lcars-source-pill {
  --source-color: var(--lcars-butterscotch);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 4px;
  border-radius: 14px;
  border: 1.5px solid var(--source-color);
  color: var(--source-color);
  background: color-mix(in srgb, var(--source-color) 12%, transparent);
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  user-select: none;
  transition: background 100ms;
}
.lcars-source-pill:hover {
  background: color-mix(in srgb, var(--source-color) 22%, transparent);
}
.lcars-source-pill:focus-visible {
  background: color-mix(in srgb, var(--source-color) 22%, transparent);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-source-pill__label {
  /* Must be nowrap with no overflow/ellipsis — the pill sizes to content.
     Earlier ellipsis treatment clipped "CLI-DESKTOP" on narrow tier-B. */
  white-space: nowrap;
  flex: 0 0 auto;
  /* line-height:1 tightens the label's line-box to the glyph height
     so all-caps Antonio caps optically center against the pill's
     28px chip height (instead of floating slightly below with
     `normal` leading). */
  line-height: 1;
}
.lcars-source-pill__count {
  line-height: 1;
}
.lcars-source-pill--active {
  background: var(--source-color);
  color: var(--lcars-bg);
}
.lcars-source-pill--readonly {
  cursor: default;
}
.lcars-source-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lcars-bg);
  color: var(--source-color);
  font-weight: 700;
  font-size: 10px;
  /* Antonio's font-metric box is asymmetric the other way: the
     font's ascent occupies ~92% of the em-box and descent only 8%,
     so the baseline sits LOW in the line-box. With `align-items:
     center` on a 20px circle the line-box is centered, but caps
     paint from `baseline - cap-height` up to `baseline`, placing
     their visual center well BELOW the circle center. Earlier
     revisions added `padding-top` (pushing caps further down) based
     on line-box math; the fix is the opposite direction. Canvas
     ink-mid measurement (actualBoundingBoxAscent/Descent) with
     `padding-bottom: 1px` lands Antonio caps exactly on circle
     center in a 20px circle. */
  line-height: 1;
  letter-spacing: 0;
  padding-bottom: 1px;
  border: 1px solid var(--source-color);
  flex: 0 0 auto;
}
.lcars-source-pill--active .lcars-source-pill__badge {
  background: var(--lcars-bg);
  color: var(--source-color);
  border-color: var(--lcars-bg);
}
.lcars-source-pill__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, currentColor 85%, transparent);
  border-left: 1px solid currentColor;
  margin-left: 4px;
  padding-left: 8px;
}
.lcars-source-pill--active .lcars-source-pill__count {
  color: currentColor;
}
.lcars-source-pill--all {
  --source-color: var(--lcars-sunflower);
}

/* --- sparkline --- */
.lcars-sparkline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  /* Span the full upper-panel width at desktop — previously capped to
     the bar-geometry max-width so long panels left a gap on the right.
     The SVG scales fluidly, so a full-width stretch reads as the main
     visual instead of a decorative corner chart. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Summary readout: TOTAL / VISIBLE (when filtered) / PEAK / AVG/WK —
   at-a-glance stats above the bar strip. Mirrors the chip-family
   typography (butterscotch labels, sunflower values) so it reads as
   part of the LCARS chrome, not a bolted-on legend. */
.lcars-sparkline__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 4px;
  padding: 0 2px;
}
.lcars-sparkline__readout-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.lcars-sparkline__readout-label {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  font-weight: 700;
}
.lcars-sparkline__readout-value {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.lcars-sparkline__readout-peak-date {
  font-family: var(--lcars-font-mono);
  color: var(--lcars-dim);
  font-weight: 500;
}

/* Source legend — sits at the right end of the readout row when more
   than one source is present in the data. Small swatch + label pairs
   so the user can immediately connect bar colors to sources. */
.lcars-sparkline__legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--lcars-butterscotch);
  font-weight: 700;
}
.lcars-sparkline__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lcars-sparkline__legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Per-source breakdown inside the hover tooltip — appears only for
   multi-source weeks. Small grid of swatch · label · count triples. */
.lcars-sparkline__tooltip-breakdown {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--lcars-divider);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--lcars-font-mono);
  /* Bumped 10.5px → 12px to clear body floor; chrome carve-out doesn't
     apply (mono mixed-case data values, not ALL-CAPS chrome). */
  font-size: 12px;
}
.lcars-sparkline__tooltip-source {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
}
.lcars-sparkline__tooltip-source-label {
  font-family: var(--lcars-font-chrome);
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--lcars-butterscotch);
  font-size: 9px;
}
.lcars-sparkline__tooltip-source-count {
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Chart wrapper anchors the tooltip overlay absolutely to the SVG. */
.lcars-sparkline__chart {
  position: relative;
  width: 100%;
}
.lcars-sparkline svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Per-bar stack. Each `<g>` groups the per-source segments for one
   week. Inline `fill` comes from the component (source palette);
   transitions here handle the hover / dim states. */
.lcars-sparkline__bar {
  transition: opacity 100ms ease-out;
}
.lcars-sparkline__bar-group {
  transition: opacity 100ms ease-out;
}
/* Dim weeks (all segments outside the current filter) drop to 30%
   opacity as a group so the source-color relationship is preserved. */
.lcars-sparkline__bar-group--dim {
  opacity: 0.3;
}
/* Hovered group lifts to full opacity regardless of dim state. */
.lcars-sparkline__bar-group--hover {
  opacity: 1;
}
/* Peak ring — thin sunflower outline surrounding the tallest week's
   full stack, drawn once per bar group so it sits above all segments.
   Pre-hover peak highlight without changing segment colors. */
.lcars-sparkline__peak-ring {
  stroke: var(--lcars-sunflower);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lcars-sparkline__bar-group--hover .lcars-sparkline__peak-ring {
  stroke: var(--lcars-peach);
  stroke-width: 1.5;
}
.lcars-sparkline__baseline {
  stroke: color-mix(in srgb, var(--lcars-butterscotch) 18%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
}
/* Invisible column-tall hit targets so short bars still have a full
   column's worth of mouse-friendly hover area. Pointer-events on,
   visually invisible. */
.lcars-sparkline__hit {
  fill: transparent;
  pointer-events: all;
  cursor: crosshair;
}

/* Floating tooltip — positioned over the hovered bar, pops up from the
   top of the chart so it doesn't overlap the bars themselves. */
.lcars-sparkline__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  min-width: 160px;
  padding: 8px 12px;
  background: var(--lcars-bg);
  border: 1px solid var(--lcars-butterscotch);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 20;
  pointer-events: none;
  animation: lcars-sparkline-tooltip-in 120ms ease-out;
}
@keyframes lcars-sparkline-tooltip-in {
  from {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.lcars-sparkline__tooltip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  color: var(--lcars-sunflower);
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--lcars-divider);
  white-space: nowrap;
}
.lcars-sparkline__tooltip-peak {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--lcars-bg);
  background: var(--lcars-sunflower);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
}
.lcars-sparkline__tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  line-height: 1.4;
}
.lcars-sparkline__tooltip-label {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  font-weight: 700;
}
.lcars-sparkline__tooltip-value {
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lcars-sparkline__tooltip-dim {
  color: var(--lcars-dim);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .lcars-sparkline__tooltip {
    animation: none;
  }
}

/* Axis: at 2+ month boundaries render a positional tick row (month
   labels sit over the first bucket of their month). At <2 fall back
   to the legacy left/right anchor labels so very short corpora still
   get orientation without looking lopsided. */
.lcars-sparkline__axis {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, var(--lcars-butterscotch) 90%, var(--lcars-bg-1));
  letter-spacing: 0.12em;
}
.lcars-sparkline__axis-months {
  position: relative;
  width: 100%;
  height: 14px;
}
.lcars-sparkline__axis-month {
  position: absolute;
  top: 0;
  transform: translateX(0);
  white-space: nowrap;
  font-family: var(--lcars-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--lcars-butterscotch) 78%, var(--lcars-bg-1));
}
.lcars-sparkline--empty {
  font-size: 11px;
  color: var(--lcars-butterscotch);
  letter-spacing: 0.1em;
}

/* --- mid bar --- */
.lcars-mid-bar {
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--lcars-bg);
  gap: 14px;
}
.lcars-mid-bar__label {
  color: var(--lcars-bg);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  line-height: 1;
}
@media (min-width: 900px) {
  .lcars-mid-bar {
    height: 26px;
    padding: 0 16px;
    border-radius: 13px;
  }
  .lcars-mid-bar__label {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}

/* --- mode area --- */
.lcars-mode-area {
  --mode-color: var(--lcars-butterscotch);
  background: var(--lcars-bg);
  border: 1px solid var(--lcars-divider);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  min-height: 0;
}
@media (min-width: 900px) {
  .lcars-mode-area {
    border-radius: 10px;
    padding: 14px;
  }
}
/* Tier C: the double-elbow chrome is gone, so the active-mode cue becomes
   a sunflower-accented top edge with the mode color running through it. */
.lcars-root[data-tier='mobile'] .lcars-mode-area {
  border: 1px solid var(--lcars-dim);
  border-top: 3px solid var(--mode-color, var(--lcars-sunflower));
  box-shadow: 0 -1px 0 var(--lcars-sunflower);
  border-radius: 6px;
  padding: 10px;
}

/* --- command mode --- */
.lcars-command-mode__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 600px) {
  .lcars-command-mode__grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
  }
}
@media (min-width: 900px) {
  .lcars-command-mode__grid {
    /* 400px floor: two cards per row at typical laptop widths, three at
       wide-desktop (>1320px). The 4-col meta grid (TURNS / TOOLS / MODEL
       / COST) reads cleanly at 400–520px; narrower cards start wrapping
       the model mono string. */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
  }
}
.lcars-command-mode__more {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.lcars-command-mode__more-btn {
  background: var(--lcars-bg);
  color: var(--lcars-sunflower);
  border: 2px solid var(--lcars-butterscotch);
  border-radius: 20px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.lcars-command-mode__more-btn:hover {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
}
.lcars-command-mode__more-btn:focus-visible {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}

/* --- session card ---
   Layout contract (the load-bearing readability fix):
     row--top: flex, nowrap. Source-pill (0 0 auto), project label
               (1 1 auto, right-aligned, ellipsis), time (0 0 auto) with a
               thin | divider. Chips (DUP / ZOMBIE) live AFTER the time —
               they're codebase-specific and must not break the flex
               contract. Never use `position: absolute` on the project
               label (prior bug: overlap with the time).
     title:   sunflower 15.5px/700, 2-line clamp.
     preview: IBM Plex 12.5px/400, 3-line clamp. Markdown stripped.
     meta:    4-col <dl> grid, label-above-value. Model in JetBrains Mono
              + ice; other values sunflower tabular-nums. */
.lcars-session-card {
  --source-color: var(--lcars-butterscotch);
  min-height: 104px;
  background: var(--lcars-bg-1);
  border: 1px solid var(--lcars-divider);
  border-left: 3px solid var(--source-color);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 120ms,
    border-color 120ms,
    transform 120ms;
  content-visibility: auto;
  contain-intrinsic-size: 320px 160px;
}
.lcars-session-card:hover {
  /* bg-1 → a sunflower-tinted surface, so hover is obvious and the
     sunflower title + ice model text keep full legibility instead
     of merging into the nearly-identical bg-2 darker variant. */
  background: color-mix(in srgb, var(--lcars-sunflower) 5%, var(--lcars-bg-1));
  border-color: var(--source-color);
  transform: translateY(-1px);
}
.lcars-session-card:focus-visible {
  background: color-mix(in srgb, var(--lcars-sunflower) 5%, var(--lcars-bg-1));
  border-color: var(--source-color);
  transform: translateY(-1px);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-session-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lcars-session-card__row--top {
  flex-wrap: nowrap;
}
.lcars-session-card__row--top > .lcars-source-pill {
  flex: 0 0 auto;
}
/*
 * `--semantic` variant: italicized + marginally lower opacity so users
 * can distinguish semantic-classifier labels (preceded by ~) from
 * string-match labels at a glance. Intentionally subtle — the `~`
 * prefix + title tooltip carry the main signal.
 */
.lcars-session-card__project--semantic {
  font-style: italic;
  /* Inherited color is bumped via the explicit color-mix on the base
     rule; the italic alone is sufficient to distinguish semantic from
     string-match labels. Previous extra `opacity: 0.6` stacked on the
     base opacity 0.7 — net ~0.42, pushing 10px mono text below AA. */
  color: color-mix(in srgb, var(--lcars-ice) 70%, var(--lcars-bg-1));
}
.lcars-session-card__project {
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-ice) 82%, var(--lcars-bg-1));
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  text-align: right;
}
.lcars-session-card__row--top > .lcars-session-card__time {
  flex: 0 0 auto;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--lcars-butterscotch) 90%, var(--lcars-bg-1));
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--lcars-divider);
}
/* When no project label precedes the time, push it fully right and drop
   the divider (the only thing to its left would be the source pill). */
.lcars-session-card__row--top > .lcars-source-pill + .lcars-session-card__time {
  margin-left: auto;
  border-left: none;
  padding-left: 0;
}
.lcars-session-card__chips {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
}
@media (min-width: 900px) {
  .lcars-session-card {
    min-height: 168px;
    padding: 12px 14px;
    contain-intrinsic-size: 520px 168px;
  }
}
.lcars-session-card__title {
  margin: 0;
  color: var(--lcars-sunflower);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcars-session-card__title--fallback {
  /* titleSource: 'fallback' — no real title was recoverable from the source,
     so the card shows a derived stub. Dim butterscotch signals "this is a
     synthetic label, not author-authored content". */
  color: var(--lcars-butterscotch);
  font-style: italic;
  font-weight: 500;
}
.lcars-session-card__preview {
  margin: 0;
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: color-mix(in srgb, var(--lcars-sunflower) 82%, var(--lcars-bg-1));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcars-session-card__preview--empty {
  color: var(--lcars-dim);
  font-style: italic;
}
.lcars-session-card__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 12px;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid var(--lcars-divider);
}
/*
 * Cloud sessions only render TURNS + TOOLS — MODEL and COST are omitted
 * because the claude.ai export doesn't carry that data, and a permanently-
 * empty cell reads as a bug to users. Shrink the grid so the two remaining
 * cells expand naturally rather than sitting in the left half with dead
 * space on the right.
 */
.lcars-session-card[data-source='cloud'] .lcars-session-card__meta {
  grid-template-columns: repeat(2, 1fr);
}
.lcars-session-card__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* dt labels are chrome (all-caps + 0.16em tracking) per §9 carve-out; raised
   from 8.5px → 9.5px to clear the established ≥9px chrome floor.
   Opacity-on-text replaced with explicit color-mix to keep the contrast
   computable. */
.lcars-session-card__meta dt {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: color-mix(in srgb, var(--lcars-butterscotch) 80%, var(--lcars-bg-1));
}
.lcars-session-card__meta dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcars-session-card__meta--model {
  font-family: var(--lcars-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--lcars-ice) !important;
}

/* --- timeline mode --- */
.lcars-timeline-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-timeline-mode__axis {
  display: flex;
  justify-content: space-between;
  color: var(--lcars-ice);
  font-size: 10px;
  letter-spacing: 0.08em;
}
@media (min-width: 900px) {
  .lcars-timeline-mode__axis {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}
.lcars-timeline-mode__lanes {
  position: relative;
  width: 100%;
}
.lcars-timeline-mode__lane {
  --source-color: var(--lcars-butterscotch);
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid var(--source-color);
  border-radius: 6px;
  /* Tier C: lane labels reduce to a 2-char badge tucked in the top-left so
     the plot area still has room for dots. */
  padding-left: 44px;
}
.lcars-timeline-mode__lane-label {
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--source-color);
  /* Truncate labels at narrow tiers rather than wrap. */
  max-width: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 600px) {
  .lcars-timeline-mode__lane {
    padding-left: 70px;
  }
  .lcars-timeline-mode__lane-label {
    left: 8px;
    max-width: 62px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}
@media (min-width: 900px) {
  .lcars-timeline-mode__lane {
    padding-left: 90px;
  }
  .lcars-timeline-mode__lane-label {
    max-width: 80px;
    letter-spacing: 0.08em;
  }
}
.lcars-timeline-mode__lane-track {
  position: relative;
  height: 100%;
  width: calc(100% - 0px);
}

/* --- timeline dot --- */
.lcars-timeline-dot {
  --source-color: var(--lcars-butterscotch);
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--source-color);
  cursor: pointer;
  transform: translate(-50%, 0);
}
.lcars-timeline-dot:hover,
.lcars-timeline-dot:focus-visible {
  box-shadow: 0 0 0 3px var(--source-color);
  outline: none;
}

/* --- detail mode --- */
.lcars-detail-mode {
  --source-color: var(--lcars-butterscotch);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.lcars-detail-mode__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 204, 153, 0.12);
}
.lcars-detail-mode__back {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  padding: 5px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  user-select: none;
  flex: 0 0 auto;
}
.lcars-detail-mode__back:hover {
  background: var(--lcars-sunflower);
}
.lcars-detail-mode__back:focus-visible {
  background: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-detail-mode__title {
  flex: 1 1 100%;
  margin: 0;
  color: var(--lcars-sunflower);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.lcars-detail-mode__time {
  font-family: var(--lcars-font-mono);
  color: var(--lcars-butterscotch);
  font-size: 11px;
}
@media (min-width: 600px) {
  .lcars-detail-mode__title {
    flex: 1 1 auto;
    font-size: 17px;
  }
  .lcars-detail-mode__time {
    font-size: 12px;
  }
}
@media (min-width: 900px) {
  .lcars-detail-mode__title {
    font-size: 18px;
  }
}
/* Metadata: at Tier C render as a vertical key-value list.
   At ≥ 600px restore the responsive grid. */
.lcars-detail-mode__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 10px 14px;
  background: var(--lcars-bg-1);
  border: 1px solid rgba(255, 204, 153, 0.12);
  border-left: 3px solid var(--source-color);
  border-radius: 8px;
}
.lcars-detail-mode__meta > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 10px;
  align-items: baseline;
}
.lcars-detail-mode__meta dt {
  color: var(--lcars-butterscotch);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.8;
}
.lcars-detail-mode__meta dd {
  color: var(--lcars-text);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.lcars-detail-mode__meta--mono {
  font-family: var(--lcars-font-mono);
  letter-spacing: 0 !important;
}
@media (min-width: 600px) {
  .lcars-detail-mode__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    padding: 10px 14px;
  }
  .lcars-detail-mode__meta > div {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 4px;
    padding: 6px 14px;
    border-right: 1px solid var(--lcars-divider);
  }
  .lcars-detail-mode__meta > div:last-child {
    border-right: none;
  }
}
.lcars-detail-mode__body {
  min-height: 0;
  overflow: auto;
}
.lcars-detail-mode__loading {
  color: var(--lcars-butterscotch);
  padding: 16px;
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* --- message list (cloud) ---
   USER messages take sunflower accent on the left; ASSISTANT takes ice.
   The header rule underlines the sender/timestamp with a dashed divider
   to separate the chrome row from the prose body. */
.lcars-message-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lcars-message {
  border: 1px solid rgba(255, 204, 153, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--lcars-bg-1);
}
.lcars-message--human {
  border-left: 3px solid var(--lcars-sunflower);
}
.lcars-message--assistant {
  border-left: 3px solid var(--lcars-ice);
}
.lcars-message__header {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--lcars-divider);
}
.lcars-message--human .lcars-message__sender {
  color: var(--lcars-sunflower);
}
.lcars-message--assistant .lcars-message__sender {
  color: var(--lcars-ice);
}
.lcars-message__sender {
  font-weight: 700;
}
.lcars-message__time {
  font-family: var(--lcars-font-mono);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--lcars-butterscotch) 85%, transparent);
  font-variant-numeric: tabular-nums;
}
.lcars-message__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-message__attachments {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lcars-text);
}
.lcars-message__attach-summary {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  border: 1px solid var(--lcars-butterscotch);
  border-radius: 4px;
  cursor: pointer;
  list-style: none;
}
.lcars-message__attach-summary::-webkit-details-marker {
  display: none;
}
.lcars-message__attach-summary:hover {
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
}
.lcars-message__attach-summary:focus-visible {
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-message__attach-disclosure[open] > .lcars-message__attach-summary::before {
  content: '▾ ';
}
.lcars-message__attach-disclosure:not([open]) > .lcars-message__attach-summary::before {
  content: '▸ ';
}

/* --- content blocks --- */
.lcars-cb {
  font-size: 13px;
  color: var(--lcars-text);
}
.lcars-cb--text {
  /* Prose now flows through per-line elements (<p>, <h4>, <li>). Drop
     the pre-wrap default so the renderer's spacing wins. */
  line-height: 1.6;
}
.lcars-cb--thinking {
  border: 1px dashed var(--lcars-violet);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(204, 153, 204, 0.04);
}
.lcars-cb--thinking summary {
  color: var(--lcars-violet);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.lcars-cb--thinking summary::-webkit-details-marker {
  display: none;
}
.lcars-cb--thinking summary:focus-visible {
  outline: 2px solid var(--lcars-violet);
  outline-offset: 2px;
  border-radius: 2px;
}
.lcars-cb--thinking[open] > summary .lcars-cb--thinking__glyph::before {
  content: '▾ ';
}
.lcars-cb--thinking:not([open]) > summary .lcars-cb--thinking__glyph::before {
  content: '▸ ';
}
.lcars-cb--thinking p {
  margin: 8px 0 0;
  max-width: 75ch;
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--lcars-violet) 90%, transparent);
  line-height: 1.55;
  font-style: italic;
  white-space: pre-wrap;
}
.lcars-cb--tool-use {
  border-left: 2px solid var(--lcars-ice);
  padding-left: 8px;
}
.lcars-cb--tool-result {
  border-left: 2px solid var(--lcars-peach);
  padding-left: 8px;
}
.lcars-cb--tool-result-error {
  /* Non-color secondary cue is the leading ✗ glyph in the label;
     keep the peach rail (consistent with non-error result) so the
     visual semantic stays "this is a tool result" — the error
     glyph + label text differentiate the state. */
}
.lcars-cb--token-budget,
.lcars-cb--unknown {
  color: var(--lcars-butterscotch);
}
.lcars-cb__label {
  color: var(--lcars-butterscotch);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.lcars-cb__pre {
  margin: 0;
  background: #0a0a0a;
  color: var(--lcars-text);
  padding: 6px 8px;
  border-radius: 4px;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.lcars-cb__dim {
  color: var(--lcars-dim);
  font-style: italic;
}

/* --- prose renderer (LCARS refinement) ---
   Section headings in sunflower caps, `▸` bullet glyphs, **bold** as
   sunflower strong, inline backtick code in ice blue, and a short
   keyword highlight list (SQLite / JSON / LCARS / …). */
.lcars-prose {
  font-family: var(--lcars-font-prose);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.6;
  color: rgba(255, 204, 153, 0.92);
}
.lcars-prose__p {
  margin: 0 0 4px;
  text-wrap: pretty;
}
.lcars-prose__sp {
  height: 8px;
}
.lcars-prose__h {
  margin: 14px 0 6px;
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-sunflower);
}
.lcars-prose__list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
}
.lcars-prose__li {
  margin: 0 0 4px 12px;
  list-style: none;
  padding-left: 14px;
  position: relative;
  text-wrap: pretty;
}
.lcars-prose__li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lcars-butterscotch);
  font-size: 10px;
}
.lcars-prose strong {
  color: var(--lcars-sunflower);
  font-weight: 600;
}
.lcars-prose code {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  background: rgba(255, 204, 153, 0.08);
  color: var(--lcars-ice);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 204, 153, 0.1);
}
.lcars-prose__hl {
  color: var(--lcars-ice);
  font-weight: 500;
}

/* --- transcript list (local) --- */
.lcars-transcript-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-transcript-entry {
  border-left: 3px solid var(--lcars-butterscotch);
  padding: 8px 12px 10px;
  background: rgba(255, 204, 153, 0.03);
  border-radius: 0 4px 4px 0;
  transition: background 100ms;
}
.lcars-transcript-entry:hover {
  background: rgba(255, 204, 153, 0.06);
}
.lcars-transcript-entry--user {
  border-left-color: var(--lcars-sunflower);
}
.lcars-transcript-entry--assistant {
  border-left-color: var(--lcars-ice);
}
.lcars-transcript-entry--attachment {
  border-left-color: var(--lcars-peach);
}
.lcars-transcript-entry--ai-title {
  border-left-color: var(--lcars-violet);
}
.lcars-transcript-entry--malformed {
  border-left-color: var(--lcars-fail);
}
.lcars-transcript-entry__header {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.lcars-transcript-entry__type {
  color: var(--lcars-butterscotch);
  font-weight: 700;
  text-transform: uppercase;
}
.lcars-transcript-entry__time {
  color: color-mix(in srgb, var(--lcars-butterscotch) 80%, transparent);
  font-variant-numeric: tabular-nums;
}
.lcars-transcript-entry__err {
  color: var(--lcars-fail);
}
.lcars-transcript-entry__body {
  margin: 4px 0 0;
  color: var(--lcars-text);
  white-space: pre-wrap;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
}
/* <details> expander: reveals the unabridged body when the preview
   is truncated (long text, structured tool_use/tool_result, etc).
   The summary is a subtle chrome label so it doesn't compete with
   the transcript content itself; hover/open state brighten it. */
.lcars-transcript-entry__details {
  margin: 6px 0 0;
}
.lcars-transcript-entry__summary {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-dim);
  border: 1px solid var(--lcars-divider);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition:
    color 100ms,
    border-color 100ms,
    background 100ms;
}
.lcars-transcript-entry__summary::-webkit-details-marker {
  display: none;
}
.lcars-transcript-entry__summary:hover {
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
}
.lcars-transcript-entry__summary:focus-visible {
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-transcript-entry__details[open] > .lcars-transcript-entry__summary {
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.08);
}
.lcars-transcript-entry__details[open] > .lcars-transcript-entry__summary::before {
  content: '▾ ';
}
.lcars-transcript-entry__details:not([open]) > .lcars-transcript-entry__summary::before {
  content: '▸ ';
}
.lcars-transcript-entry__full {
  margin: 6px 0 0;
  padding: 10px 12px;
  color: var(--lcars-text);
  background: var(--lcars-bg-1);
  border-left: 2px solid var(--lcars-divider);
  white-space: pre-wrap;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
}
.lcars-transcript-entry__full:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-transcript-list__empty,
.lcars-message-list__empty {
  color: var(--lcars-dim);
  font-style: italic;
  padding: 12px;
}

/* --- empty / error / missing / coming soon --- */
.lcars-empty-state,
.lcars-error-state,
.lcars-detail-missing,
.lcars-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 8px;
  padding: 24px;
}
.lcars-empty-state__title,
.lcars-error-state__title,
.lcars-detail-missing__title,
.lcars-coming-soon__title {
  margin: 0;
  color: var(--lcars-sunflower);
  font-size: 24px;
  letter-spacing: 0.12em;
}
.lcars-error-state__title {
  color: var(--lcars-peach);
}
.lcars-empty-state__message,
.lcars-error-state__detail,
.lcars-detail-missing__reason,
.lcars-coming-soon__body {
  color: var(--lcars-text);
  font-size: 13px;
  max-width: 520px;
  text-align: center;
}
.lcars-error-state__retry {
  margin-top: 12px;
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  border: none;
  border-radius: 16px;
  padding: 6px 18px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* --- upload panel --- */
.lcars-upload-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}
.lcars-upload-panel--prominent {
  border: 2px solid var(--lcars-sunflower);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--lcars-bg);
  margin-top: 4px;
}
.lcars-upload-panel--compact {
  max-width: none;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  width: auto;
  padding: 0;
}
.lcars-upload-panel__title {
  margin: 0;
  color: var(--lcars-sunflower);
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.lcars-upload-panel__hint {
  margin: 0;
  color: var(--lcars-text);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.9;
}
.lcars-upload-panel__button {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  border: none;
  border-radius: 18px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  align-self: flex-start;
  transition:
    background 80ms linear,
    color 80ms linear;
}
.lcars-upload-panel--compact .lcars-upload-panel__button {
  padding: 4px 12px;
  font-size: 10px;
  letter-spacing: 0.1em;
  border-radius: 14px;
  height: 26px;
  align-self: center;
}
.lcars-upload-panel__button:hover {
  background: var(--lcars-sunflower);
}
.lcars-upload-panel__button:focus-visible {
  background: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-upload-panel__button:disabled {
  background: var(--lcars-butterscotch-muted);
  color: var(--lcars-sunflower);
  cursor: progress;
}
/* Row holding the primary CHOOSE ZIP + optional LOAD DEMO DATA
   button side-by-side. Wraps to a column on narrow viewports so
   buttons stay full-width and tappable. */
.lcars-upload-panel__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Secondary variant — LOAD DEMO DATA. Outlined style so the primary
   CHOOSE ZIP action still reads as the default path. */
.lcars-upload-panel__button--secondary {
  background: transparent;
  color: var(--lcars-violet);
  border: 1.5px solid var(--lcars-violet);
}
.lcars-upload-panel__button--secondary:hover:not(:disabled) {
  background: var(--lcars-violet);
  color: var(--lcars-bg);
}
.lcars-upload-panel__button--secondary:focus-visible:not(:disabled) {
  background: var(--lcars-violet);
  color: var(--lcars-bg);
  outline: 2px solid var(--lcars-violet);
  outline-offset: 2px;
}
/* CHOOSE ZIP demoted to outlined when SCAN LOCAL is the primary
   action (i.e. running locally). Keeps cloud-export branded as
   butterscotch — this is the same palette as the primary, just
   outlined to read as the secondary path. */
.lcars-upload-panel__button--cloud-secondary {
  background: transparent;
  color: var(--lcars-butterscotch);
  border: 1.5px solid var(--lcars-butterscotch);
}
.lcars-upload-panel__button--cloud-secondary:hover:not(:disabled) {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
}
.lcars-upload-panel__button--cloud-secondary:focus-visible:not(:disabled) {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  outline: 2px solid var(--lcars-butterscotch);
  outline-offset: 2px;
}
.lcars-upload-panel__hint--demo {
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg));
  line-height: 1.5;
  margin-top: 2px;
}
/* Status messages are mixed-case prose (e.g. "PARSING final.zip…") in some
   states and ALL-CAPS in others — treat as body class and clear the 12px
   floor across the board. The single live-region container is always
   rendered (text content swapped by state); the container empty-state
   collapses to zero height naturally. */
.lcars-upload-panel__status {
  color: var(--lcars-text);
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  word-break: break-word;
}
.lcars-upload-panel__status:empty {
  display: none;
}
.lcars-upload-panel__status--error {
  color: var(--lcars-peach);
}
.lcars-upload-panel__status--ok {
  color: var(--lcars-sunflower);
}
@media (min-width: 600px) {
  .lcars-upload-panel--prominent {
    padding: 16px 20px;
  }
}

/* --- upload chip + unload (UpperPanel) --- */
.lcars-upper-panel__tier-slot {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
/*
 * Right-floating cluster: holds the small upload chip and the tier
 * indicator together at the end of the stats row. Without this wrapper
 * the long claude.ai filename on the upload chip would push the tier
 * indicator off to a second line on mid-width viewports, and the opaque
 * GUID filename eats horizontal space that VISIBLE/RANGE need.
 */
.lcars-upper-panel__stats-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lcars-upper-panel__upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lcars-sunflower);
  font-size: 10px;
  letter-spacing: 0.08em;
  min-width: 0;
}
.lcars-upper-panel__upload-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lcars-sunflower);
  font-weight: 600;
}
/*
 * Semantic-analyzer chip — state-driven styling. Shares the
 * font-size/letter-spacing of the other stats-row chips so it sits
 * visually flush. The four variants differ only in color + border:
 *
 *   cta         sunflower border, violet text (primary action affordance)
 *   running     violet border, pulsing — "work in progress"
 *   ready       ice border, dim — "done, click to re-run"
 *   error       peach border — "failed, retry"
 *   unavailable fully dimmed, no interaction — "not applicable here"
 */
.lcars-semantic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  background: transparent;
}
.lcars-semantic-chip__label {
  white-space: nowrap;
}
.lcars-semantic-chip--cta {
  color: var(--lcars-violet);
  border-color: var(--lcars-violet);
  background: rgba(204, 153, 204, 0.08);
}
.lcars-semantic-chip--cta:hover {
  background: rgba(204, 153, 204, 0.18);
}
.lcars-semantic-chip--running {
  color: var(--lcars-violet);
  border-color: var(--lcars-violet);
  cursor: progress;
  animation: lcars-semantic-chip-pulse 1.4s ease-in-out infinite;
}
@keyframes lcars-semantic-chip-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.lcars-semantic-chip__spinner {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lcars-violet);
  animation: lcars-semantic-chip-spin 1s linear infinite;
}
@keyframes lcars-semantic-chip-spin {
  from { transform: scale(0.6); opacity: 0.4; }
  50%  { transform: scale(1);   opacity: 1;   }
  to   { transform: scale(0.6); opacity: 0.4; }
}
.lcars-semantic-chip--ready {
  color: var(--lcars-ice);
  border-color: var(--lcars-ice);
  opacity: 0.8;
}
.lcars-semantic-chip--ready:hover {
  opacity: 1;
}
.lcars-semantic-chip--error {
  color: var(--lcars-peach);
  border-color: var(--lcars-peach);
  background: rgba(255, 204, 153, 0.1);
}
/* Stale: analysis ran but the active manifest has more eligible
   sessions than the bundle covers (typical after a second ZIP
   upload). Butterscotch warning palette so it reads as "attention
   needed" without alarming like the error state's peach. */
.lcars-semantic-chip--stale {
  color: var(--lcars-butterscotch);
  border-color: var(--lcars-butterscotch);
  background: rgba(221, 153, 68, 0.12);
}
.lcars-semantic-chip--stale:hover {
  background: color-mix(in srgb, var(--lcars-butterscotch) 22%, transparent);
  color: var(--lcars-sunflower);
}
.lcars-upper-panel__unload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  background: var(--lcars-peach);
  color: var(--lcars-bg);
  border-radius: 11px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
  border: none;
}
.lcars-upper-panel__unload:hover {
  background: var(--lcars-sunflower);
}
.lcars-upper-panel__unload:focus-visible {
  background: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-upper-panel__upload-slot {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

/* --- empty state OR separator --- */
.lcars-empty-state__or {
  color: var(--lcars-butterscotch);
  letter-spacing: 0.2em;
  font-size: 11px;
  margin: 8px 0 4px;
}

/* --- error state with upload fallback --- */
.lcars-error-state__upload {
  display: flex;
  justify-content: center;
  padding: 0 16px 24px;
}

/* --- loading splash --- */
.lcars-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  color: var(--lcars-butterscotch);
  font-size: 16px;
  letter-spacing: 0.15em;
}

/* --- tier indicator (Decision 17, [R-D17]) ---
   Pill sits in TopBar left cluster, right of the CHAT ARCHAEOLOGIST title.
   Two states both at FULL OPACITY (dim is the palette, never the state):
     .lcars-tier-indicator--browser → #665544 (load-bearing)
     .lcars-tier-indicator--local   → #CC99CC (load-bearing)
   The word ANALYSIS in the label copy is load-bearing per [R-D17] + §4.4.1
   of the review — without it the pill reads as chrome. */
.lcars-tier-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border: none;
  /* Full opacity (1.0). Do NOT add opacity: <1.0> here — the plan's
     [R-D17] + review §4.4.1 explicitly reject dimming the state. */
  opacity: 1;
  transition:
    box-shadow 80ms linear,
    filter 80ms linear;
}
.lcars-tier-indicator--browser {
  background: #665544;
  color: var(--lcars-sunflower);
  /* UX finding 7: one-shot pulse on mount in the BROWSER state only.
     Teaches first-time viewers there's something clickable here. Drops
     in `--local` state where the pill has already earned its keep. */
  animation: lcars-tier-indicator-pulse 1.8s ease-out 1;
}
.lcars-tier-indicator--local {
  background: #cc99cc;
  color: var(--lcars-bg);
}
.lcars-tier-indicator:hover,
.lcars-tier-indicator:focus-visible {
  outline: none;
  filter: brightness(1.15);
  box-shadow: 0 0 0 2px var(--lcars-sunflower);
}
@keyframes lcars-tier-indicator-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 204, 153, 0);
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 0 6px rgba(255, 204, 153, 0.55);
    transform: scale(1.04);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 204, 153, 0);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lcars-tier-indicator--browser {
    animation: none;
  }
}
@media (min-width: 600px) {
  .lcars-tier-indicator {
    height: 24px;
    font-size: 13px;
  }
}
@media (min-width: 900px) {
  .lcars-tier-indicator {
    height: 24px;
    font-size: 13px;
  }
  /* At desktop the top-bar's bg is butterscotch; the brown BROWSER pill
     needs a little breathing room against it to remain legible. */
  .lcars-tier-indicator--browser {
    box-shadow: 0 0 0 1px var(--lcars-bg);
  }
}

/* --- tier sheet (Decision 17 / AC15) ---
   Modal dialog rendered inside the viewer's natural stacking context.
   Lists all six Phase-7-reserved files with present/absent icon + date. */
.lcars-tier-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 50;
}
.lcars-tier-sheet {
  background: var(--lcars-bg);
  border: 2px solid var(--lcars-violet);
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 640px;
  width: 100%;
  color: var(--lcars-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.lcars-tier-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lcars-tier-sheet__title {
  margin: 0;
  color: var(--lcars-violet);
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.lcars-tier-sheet__close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lcars-butterscotch);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  user-select: none;
}
.lcars-tier-sheet__close:hover {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 153, 0.1);
}
.lcars-tier-sheet__close:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 153, 0.1);
}
.lcars-tier-sheet__summary {
  margin: 0;
  color: var(--lcars-sunflower);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.lcars-tier-sheet__subhead {
  margin: 8px 0 0;
  color: var(--lcars-butterscotch);
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lcars-tier-sheet__hint {
  margin: 0;
  color: var(--lcars-text);
  font-size: 12px;
  line-height: 1.55;
}
.lcars-tier-sheet__hint code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background: rgba(204, 153, 204, 0.15);
  color: var(--lcars-violet);
  padding: 1px 4px;
  border-radius: 3px;
}
.lcars-tier-sheet__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-tier-sheet__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 35%, transparent);
  border-radius: 6px;
  align-items: baseline;
}
.lcars-tier-sheet__item--present {
  border-color: var(--lcars-violet);
}
.lcars-tier-sheet__icon {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  color: var(--lcars-dim);
  font-weight: 700;
  text-align: center;
  align-self: center;
}
.lcars-tier-sheet__item--present .lcars-tier-sheet__icon {
  color: var(--lcars-violet);
}
.lcars-tier-sheet__filename {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  color: var(--lcars-sunflower);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
}
.lcars-tier-sheet__desc {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  color: var(--lcars-text);
  opacity: 0.9;
  font-size: 12px;
  line-height: 1.4;
}
.lcars-tier-sheet__ts {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  color: var(--lcars-butterscotch);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* --- source attribution micro-label (Decision 18 / [R-D18]) ---
   Default: inherits parent chip hue at 85% opacity so the label stays
   readable on colored / violet-tinted chip backgrounds (UX finding 4 —
   9 px #665544@0.7 on a violet chip measured ~2.9:1 contrast, below
   WCAG AA 4.5:1). Using `currentColor` at a slightly lower weight/opacity
   preserves the "footnote vs primary" hierarchy without introducing
   a color that reads as muddy against saturated parent chips. */
.lcars-attribution {
  /* Use color-mix to lift the alpha into an explicit composited color
     rather than CSS opacity (which stacks unpredictably against any
     ancestor `opacity` on the parent chip). Same visual weight, but the
     contrast is now auditable against the actual surface palette. */
  color: color-mix(in srgb, currentColor 85%, transparent);
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: 400;
  white-space: nowrap;
}

/* ========================================================================
 * Team C additions — Phase 6 browser-tier analytics surfaces.
 *
 * Layered AFTER Team B's primitives. Covers: KPI strip, project pills,
 * zero-turn toggle, session-card chips + project pill, 2s highlight ring
 * keyframe, COST mode layout (stacked bar + 3 tables), CONSTELLATION
 * layout (cluster cards + zombie cards + accordion), DetailMode prev/next
 * + copy button.
 * ==================================================================== */

/* --- KPI strip (Decision 9 / [R-D9]) --- */
.lcars-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
.lcars-kpi {
  flex: 1 1 140px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: var(--lcars-bg-1);
  border: 1px solid var(--lcars-divider);
  border-top: 3px solid var(--lcars-butterscotch);
  border-radius: 8px;
  transition: background 120ms ease-out;
}
/* Phase 3 cut COST drill-in, so KPI tiles render as informational
   `<div>`s without `role="button"`. Gate the cursor + hover affordance
   behind the role attribute so any future interactive caller still
   gets the lift, mirroring `.lcars-chip--narrative-*[role='button']`
   below. */
.lcars-kpi[role='button'] {
  cursor: pointer;
}
.lcars-kpi[role='button']:hover,
.lcars-kpi[role='button']:focus-visible {
  background: color-mix(in srgb, var(--lcars-sunflower) 5%, var(--lcars-bg-1));
  outline: none;
}
.lcars-kpi__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  font-weight: 700;
  opacity: 0.85;
}
.lcars-kpi__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  /* line-height 1 clipped descenders on project names with lowercase
     g / p / y (e.g., "dropKnowledge"). 1.15 keeps the compact KPI
     look while leaving a few pixels for the glyph tail. */
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Coverage caption beneath the KPI value (currently only TOP
   PROJECT uses it). Lives on its own line so it wraps freely
   instead of riding the value span's `text-overflow: ellipsis`
   and getting clipped mid-word. v2-visual-polish #5. */
.lcars-kpi__coverage {
  font-family: var(--lcars-font-prose);
  font-size: 11px;
  color: var(--lcars-text);
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
}

/* --- project pills (Decision 13 / [R-D13]) --- */
.lcars-project-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
}
.lcars-project-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 3px;
  border: 1px solid var(--lcars-ice);
  border-radius: 11px;
  color: var(--lcars-ice);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* line-height 1 was clipping descenders on lowercase labels (g/p/y).
     1.25 gives the tail a few px of room without bulking the pill. */
  line-height: 1.25;
  /* Cap wide emergent labels so a verbose centroid label
     ("Bluefin Mobile multi-log profile UX…") doesn\u2019t blow the pill
     row layout. The label span below handles the ellipsis via
     flex-shrink + min-width:0; the count stays flex-shrink:0 so the
     number is always visible. */
  max-width: 260px;
  min-width: 0;
  cursor: pointer;
  /* Subtle 8% tint of the ice color so the pill shape reads at a glance
     even in the inactive state — transparent-only pills were disappearing
     into the dark frame. Active state still gets a solid fill. */
  background: color-mix(in srgb, var(--lcars-ice) 8%, transparent);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcars-project-pill:hover {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
}
.lcars-project-pill:focus-visible {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-project-pill--active {
  background: var(--lcars-ice);
  color: #000;
  /* Active (clicked) pill expands to show the full label — emergent
     topic labels like `~pattern + library + approach` carry real
     information the user is opting into, so ellipsizing them in the
     one pill they're currently filtered on is a UX regression. The
     inactive pills in the same row keep the 180px cap so the row
     doesn't explode. */
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.lcars-project-pill--active .lcars-project-pill__label {
  overflow: visible;
  text-overflow: clip;
}
.lcars-project-pill--unknown {
  border-color: var(--lcars-butterscotch-muted);
  color: var(--lcars-butterscotch);
  background: color-mix(in srgb, var(--lcars-butterscotch) 8%, transparent);
}
.lcars-project-pill--unknown:hover,
.lcars-project-pill--unknown:focus-visible {
  background: color-mix(in srgb, var(--lcars-butterscotch) 18%, transparent);
}
.lcars-project-pill--unknown.lcars-project-pill--active {
  background: var(--lcars-butterscotch-muted);
  color: var(--lcars-text);
}
/* Disclosure pill that toggles the row's hidden tail in-place. v2-
   visual-polish #4: previously dashed at 0.7 opacity, which read as
   "informational / disabled" rather than "interactive". Now solid
   border with full opacity so the affordance reads unambiguously
   as a clickable disclosure — a 2px sunflower glow on hover/focus
   confirms the click target. The chevron in the label
   (`SHOW N MORE ▾` / `COLLAPSE ▴`) carries the disclosure-state
   semantics for reduced-motion / non-pointer users. */
.lcars-project-pill--rest {
  cursor: pointer;
  border-style: solid;
  opacity: 1;
  background: color-mix(in srgb, var(--lcars-butterscotch) 14%, transparent);
}
.lcars-project-pill--rest:hover {
  background: color-mix(in srgb, var(--lcars-butterscotch) 22%, transparent);
  box-shadow: 0 0 0 2px var(--lcars-sunflower);
}
.lcars-project-pill--rest:focus-visible {
  background: color-mix(in srgb, var(--lcars-butterscotch) 22%, transparent);
  box-shadow: 0 0 0 2px var(--lcars-sunflower);
  outline: 2px solid var(--lcars-butterscotch);
  outline-offset: 2px;
}
.lcars-project-pill--rest[aria-expanded='true'] {
  background: color-mix(in srgb, var(--lcars-butterscotch) 22%, transparent);
}

/*
 * Emergent-topic pills — unsupervised cluster labels (`~term + term`)
 * produced by the discovery pass. Visually distinct from user-defined
 * projects so a glance at the pill bar conveys "these are derived,
 * those are declared": violet border (tying to the streaming-pulse
 * accent), italic text, lighter background. Still clickable as a
 * filter; keeps all `.lcars-project-pill` behavior.
 */
.lcars-project-pill--emergent {
  border-color: var(--lcars-violet);
  color: var(--lcars-violet);
  background: color-mix(in srgb, var(--lcars-violet) 8%, transparent);
  font-style: italic;
}
.lcars-project-pill--emergent:hover,
.lcars-project-pill--emergent:focus-visible {
  background: color-mix(in srgb, var(--lcars-violet) 18%, transparent);
}
.lcars-project-pill--emergent.lcars-project-pill--active {
  background: var(--lcars-violet);
  color: #000;
}
.lcars-project-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.lcars-project-pill__count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  flex-shrink: 0; /* count is always visible — ellipsis the label, not the number */
}

/* --- zero-turn toggle ---
   Lives in the same flex row as the source pills, so it matches their
   visual language (28px, 14px radius, 1.5px border, 11px/700/0.14em)
   AND uses the source-pill badge component for the "Ø" glyph. Setting
   `--source-color: peach` routes the badge/count through the same
   CSS variable path as real source pills, so there's one styling
   contract. Peach is already the accent for anomaly / zero-activity
   markers, so the "empty sessions" framing lands. */
.lcars-zero-turn-toggle {
  --source-color: var(--lcars-peach);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 4px;
  border: 1.5px solid var(--source-color);
  border-radius: 14px;
  color: var(--source-color);
  background: color-mix(in srgb, var(--source-color) 12%, transparent);
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 100ms;
}
.lcars-zero-turn-toggle:hover {
  background: color-mix(in srgb, var(--source-color) 22%, transparent);
}
.lcars-zero-turn-toggle:focus-visible {
  background: color-mix(in srgb, var(--source-color) 22%, transparent);
  outline: 2px solid var(--source-color);
  outline-offset: 2px;
}
.lcars-zero-turn-toggle--active {
  background: var(--source-color);
  color: var(--lcars-bg);
}
.lcars-zero-turn-toggle--active .lcars-source-pill__badge {
  background: var(--lcars-bg);
  color: var(--source-color);
  border-color: var(--lcars-bg);
}

/* --- SessionCard chips (Decision 14 / [R-D14]) ---
   Project label is now a lightweight inline text element sitting in the
   top-row flex chain (see `.lcars-session-card__project` above). Chips
   (DUP / ZOMBIE) are codebase-specific markers — they live after the
   timestamp so the flex contract (pill / project / time) stays intact. */
.lcars-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  /* Tracking raised from 0.06em → 0.14em to satisfy the LCARS chrome
     carve-out (≥9px ALL-CAPS + ≥0.14em tracking, per design-system §9).
     The chip family is UPPERCASE text-content already (DUP / NARR /
     ZOMBIE labels), so all three legs of the carve-out clear. */
  letter-spacing: 0.14em;
  font-weight: 600;
  border: 1px solid currentColor;
}
/* Phase 3 cut the CONSTELLATION drill-in, so DUP / ZOMBIE chips are
   informational `<span>`s when no click handler is supplied. Gate the
   cursor + hover affordance behind `[role='button']` to match the
   NARR pattern below — the `SessionCard.tsx` interactive branch sets
   the role, the inert branch leaves it off and gets no hover lift. */
.lcars-chip[role='button'] {
  cursor: pointer;
}
.lcars-chip--dup {
  color: var(--lcars-violet);
  background: rgba(204, 153, 204, 0.12);
}
.lcars-chip--dup[role='button']:hover {
  background: color-mix(in srgb, var(--lcars-violet) 28%, transparent);
}
.lcars-chip--dup[role='button']:focus-visible {
  background: color-mix(in srgb, var(--lcars-violet) 28%, transparent);
  outline: 2px solid var(--lcars-violet);
  outline-offset: 2px;
}
.lcars-chip--zombie {
  color: var(--lcars-peach);
  background: rgba(255, 153, 51, 0.1);
}
.lcars-chip--zombie[role='button']:hover {
  background: color-mix(in srgb, var(--lcars-peach) 25%, transparent);
}
.lcars-chip--zombie[role='button']:focus-visible {
  background: color-mix(in srgb, var(--lcars-peach) 25%, transparent);
  outline: 2px solid var(--lcars-peach);
  outline-offset: 2px;
}
/* v2 spec §5.3: NARR (narrative-attached) and topic chips. NARR
   borrows the existing sentiment palette (sunflower=positive,
   peach=negative) so the user's color associations carry across
   surfaces. Topic chips are a quieter ice variant — informational,
   not action-y, so no hover transition. */
.lcars-chip--narrative {
  cursor: default;
}
.lcars-chip--narrative-positive {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.14);
}
.lcars-chip--narrative-positive[role='button'] {
  cursor: pointer;
}
.lcars-chip--narrative-positive[role='button']:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 28%, transparent);
}
.lcars-chip--narrative-positive[role='button']:focus-visible {
  background: color-mix(in srgb, var(--lcars-sunflower) 28%, transparent);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-chip--narrative-negative {
  color: var(--lcars-peach);
  background: rgba(255, 153, 51, 0.14);
}
.lcars-chip--narrative-negative[role='button'] {
  cursor: pointer;
}
.lcars-chip--narrative-negative[role='button']:hover {
  background: color-mix(in srgb, var(--lcars-peach) 28%, transparent);
}
.lcars-chip--narrative-negative[role='button']:focus-visible {
  background: color-mix(in srgb, var(--lcars-peach) 28%, transparent);
  outline: 2px solid var(--lcars-peach);
  outline-offset: 2px;
}
.lcars-session-card__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 4px 0 2px;
}
.lcars-chip--topic {
  color: var(--lcars-ice);
  background: rgba(153, 204, 255, 0.10);
  border-color: color-mix(in srgb, var(--lcars-ice) 55%, transparent);
  cursor: default;
  font-size: 9.5px;
  padding: 1px 7px;
}

/* --- Collapsed AUTOMATED-session card (Stage 3 "classify+collapse") ---
   A single card standing in for N near-identical templated runs in one
   project. Distinct from a normal session card: a dashed border-left +
   muted surface so it reads as an aggregate, an AUTOMATED tag chip, and a
   "×N" instance-count badge. The card itself is still role="button" and
   opens the representative member. */
.lcars-session-card--automated {
  border-left-style: dashed;
  background: color-mix(in srgb, var(--lcars-ice) 4%, var(--lcars-bg-1));
}
.lcars-chip--automated {
  color: var(--lcars-ice);
  background: rgba(153, 204, 255, 0.12);
  border-color: color-mix(in srgb, var(--lcars-ice) 55%, transparent);
  cursor: default;
}
.lcars-chip--instance-count {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.14);
  border-color: color-mix(in srgb, var(--lcars-sunflower) 55%, transparent);
  cursor: default;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- *
 * v2 Phase 6 — PROJECTS surface (spec §5.1).                        *
 *                                                                   *
 *   - .lcars-projects-index           full-width scroll-list of     *
 *                                     discovered projects with      *
 *                                     sentiment + counts + last     *
 *                                     activity.                     *
 *   - .lcars-project-detail           single-scroll detail layout   *
 *                                     per spec §5.1: narratives at  *
 *                                     top, sessions below.          *
 *   - .lcars-narrative-card           sentiment-aware narrative     *
 *                                     card with action button (§7). *
 * ---------------------------------------------------------------- */

.lcars-projects-index {
  padding: 14px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lcars-projects-index__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.lcars-projects-index__title {
  font-family: var(--lcars-font-chrome);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lcars-sunflower);
  margin: 0;
}
.lcars-projects-index__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
  cursor: pointer;
}
.lcars-projects-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-projects-index__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 204, 102, 0.04);
  border-left: 3px solid var(--lcars-sunflower);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition:
    background 120ms,
    transform 120ms;
}
.lcars-projects-index__row:hover {
  background: rgba(255, 204, 102, 0.12);
  transform: translateX(2px);
}
.lcars-projects-index__row:focus-visible {
  background: rgba(255, 204, 102, 0.12);
  transform: translateX(2px);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-projects-index__row--unassigned {
  border-left-color: color-mix(in srgb, var(--lcars-text) 30%, transparent);
  background: rgba(255, 255, 255, 0.02);
}
.lcars-projects-index__row-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lcars-projects-index__row-name {
  font-family: var(--lcars-font-chrome);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lcars-text);
}
.lcars-projects-index__row-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-projects-index__sentiment {
  display: inline-flex;
  align-items: center;
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 1px 7px;
  border-radius: 8px;
  border: 1px solid currentColor;
}
.lcars-projects__sentiment--positive {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.12);
}
.lcars-projects__sentiment--negative {
  color: var(--lcars-peach);
  background: rgba(255, 153, 51, 0.12);
}
.lcars-projects__sentiment--mixed {
  color: var(--lcars-violet);
  background: rgba(204, 153, 204, 0.12);
}
.lcars-projects__sentiment--neutral {
  color: color-mix(in srgb, var(--lcars-text) 60%, transparent);
  background: rgba(255, 255, 255, 0.04);
}

.lcars-project-detail {
  padding: 14px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* WCAG 2.4.11 Focus Not Obscured: the sticky __header below this
   * surface can hide focused content as the user tabs through the
   * session grid. scroll-padding-top reserves space so the browser
   * scrolls focused targets out from under the sticky band. */
  scroll-padding-top: 56px;
}
.lcars-project-detail__header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--lcars-bg);
  padding: 6px 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--lcars-divider) 60%, transparent);
  z-index: 4;
}
.lcars-project-detail__back {
  background: transparent;
  color: var(--lcars-ice);
  border: 1px solid var(--lcars-ice);
  border-radius: 6px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  cursor: pointer;
  line-height: 1;
}
.lcars-project-detail__back:hover {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
}
.lcars-project-detail__back:focus-visible {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-project-detail__title {
  font-family: var(--lcars-font-chrome);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lcars-sunflower);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.lcars-project-detail__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lcars-project-detail__section-title {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  margin: 0 0 8px;
  text-transform: uppercase;
}
/* Iter-9 — mid-refactor closure: orphan classNames in ProjectsMode
 * that had no CSS rules. Rendered with UA defaults until now (REGEN
 * button as a system-grey button; skip-hint as plain paragraph;
 * heuristic-cluster as default <details>). */
.lcars-project-detail__regen-narratives {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--lcars-butterscotch);
  background: transparent;
  color: var(--lcars-butterscotch);
  cursor: pointer;
}
.lcars-project-detail__regen-narratives:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lcars-butterscotch) 18%, transparent);
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
}
.lcars-project-detail__regen-narratives:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-project-detail__regen-narratives:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lcars-project-detail__llm-skip-hint {
  margin: 0 0 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
  background: rgba(153, 204, 255, 0.05);
  border-left: 3px solid color-mix(in srgb, var(--lcars-ice) 53%, transparent);
  border-radius: 0 4px 4px 0;
  max-width: 72ch;
}
.lcars-project-detail__heuristic-cluster {
  margin-top: 12px;
}
.lcars-project-detail__heuristic-cluster-summary {
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.lcars-project-detail__heuristic-cluster-summary::-webkit-details-marker {
  display: none;
}
.lcars-project-detail__heuristic-cluster-summary:hover {
  color: var(--lcars-sunflower);
}
.lcars-project-detail__heuristic-cluster-summary:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
  border-radius: 2px;
}
.lcars-project-detail__heuristic-cluster[open] > .lcars-project-detail__heuristic-cluster-summary::before {
  content: '▾ ';
}
.lcars-project-detail__heuristic-cluster:not([open]) > .lcars-project-detail__heuristic-cluster-summary::before {
  content: '▸ ';
}
.lcars-project-detail__narrative-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lcars-project-detail__empty-narratives {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 60%, transparent);
}
.lcars-project-detail__session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}
@media (max-width: 899px) {
  .lcars-project-detail__session-grid {
    grid-template-columns: 1fr;
  }
}

.lcars-narrative-card {
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-narrative-card--positive {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.06);
}
.lcars-narrative-card--negative {
  color: var(--lcars-peach);
  background: rgba(255, 153, 51, 0.06);
}
.lcars-narrative-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lcars-narrative-card__sentiment {
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  border: 1px solid currentColor;
}
.lcars-narrative-card__title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lcars-text);
}
.lcars-narrative-card__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 85%, transparent);
}
.lcars-narrative-card__evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lcars-narrative-card__evidence-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  text-decoration: none;
}
.lcars-narrative-card__evidence-pill:hover {
  background: rgba(0, 0, 0, 0.4);
}
.lcars-narrative-card__evidence-pill:focus-visible {
  background: rgba(0, 0, 0, 0.4);
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-narrative-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.lcars-narrative-card__footer > .lcars-narrative-card__action {
  align-self: flex-end;
}
.lcars-narrative-card__action {
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.lcars-narrative-card__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lcars-narrative-card__action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.lcars-narrative-card__action:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.lcars-narrative-card__status {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.lcars-narrative-card__status--ok {
  color: color-mix(in srgb, var(--lcars-ice) 85%, transparent);
}
.lcars-narrative-card__status--error {
  color: color-mix(in srgb, var(--lcars-peach) 85%, transparent);
}
.lcars-narrative-card__status--running {
  color: color-mix(in srgb, var(--lcars-violet) 85%, transparent);
}

/* Iter-9 — tier badge styling. Mid-refactor: className was referenced
 * in JSX without a CSS rule, so badges rendered as unstyled inline
 * spans. Mirrors the .lcars-narrative-card__sentiment pill shape with
 * per-tier color via [data-tier] attribute selector. */
.lcars-narrative-card__tier {
  display: inline-flex;
  align-items: center;
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 1px 7px;
  border-radius: 8px;
  border: 1px solid currentColor;
  color: color-mix(in srgb, var(--lcars-text) 65%, transparent);
}
.lcars-narrative-card__tier[data-tier='1'] {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.14);
}
.lcars-narrative-card__tier[data-tier='2'] {
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
  background: rgba(255, 204, 153, 0.06);
}
.lcars-narrative-card__tier[data-tier='3'] {
  color: color-mix(in srgb, var(--lcars-text) 55%, transparent);
  background: rgba(255, 204, 153, 0.03);
}

/* Iter-9 — provenance disclosure (LLM-derived narratives). Mid-refactor:
 * the `<details>` + summary + dl markup had zero CSS rules. Mirrors
 * iter-8 F-FV-2 thinking-summary state-glyph pattern plus the iter-7
 * playbook for the dl contents. */
.lcars-narrative-card__provenance {
  margin-top: 6px;
}
.lcars-narrative-card__provenance-summary {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
.lcars-narrative-card__provenance-summary::-webkit-details-marker {
  display: none;
}
.lcars-narrative-card__provenance-summary:hover {
  color: var(--lcars-sunflower);
}
.lcars-narrative-card__provenance-summary:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
  border-radius: 2px;
}
.lcars-narrative-card__provenance[open] > .lcars-narrative-card__provenance-summary::before {
  content: '▾ ';
}
.lcars-narrative-card__provenance:not([open]) > .lcars-narrative-card__provenance-summary::before {
  content: '▸ ';
}
.lcars-narrative-card__provenance-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 4px;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(255, 204, 153, 0.03);
  border-left: 3px solid rgba(255, 204, 153, 0.53);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.5;
}
.lcars-narrative-card__provenance-dl dt {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lcars-butterscotch);
}
.lcars-narrative-card__provenance-dl dd {
  margin: 0;
  color: var(--lcars-text);
  overflow-wrap: anywhere;
}

/* Rev3-E E3 — falsifier-skip override checkbox in the encode-as-
 * pattern flow. Sits in the NarrativeCard footer above the primary
 * action button (positive narratives only). Visually quieter than
 * the action button so the safe default (unchecked) doesn't pull
 * attention away from the encode CTA. */
.lcars-narrative-card__falsifier-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 78%, transparent);
  cursor: pointer;
  user-select: none;
}
.lcars-narrative-card__falsifier-skip input {
  cursor: pointer;
}
.lcars-narrative-card__falsifier-skip input:disabled {
  cursor: not-allowed;
}

/* Rev3-D D4 — narratives section header + show-shelved toggle. The
 * header sits above the narrative list and holds the section title +
 * an optional shelved-count toggle on the right. Toggle is only
 * rendered when there's at least one shelved narrative (see
 * `ProjectsMode.ProjectDetail` for the gating logic). */
.lcars-project-detail__narratives-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.lcars-project-detail__shelved-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 85%, transparent);
  cursor: pointer;
  user-select: none;
}
.lcars-project-detail__shelved-toggle input {
  cursor: pointer;
}

/* Rev3-D D3 — per-narrative audit affordance. Surfaces the
 * Closure-B dismissal counter, the effective re-promotion bar
 * (computed via narrativeSaturation), the SHELVED sentinel (D1
 * cap reached), and the DISMISS button. Visually quieter than the
 * primary action row above so it doesn't compete for attention. */
.lcars-narrative-card__audit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.08em;
  /* Auditable contrast: was opacity:0.85 on this row + opacity:0.7 on
   * the inner __audit-label (effective alpha ~0.6 on ice, ~5:1 — the
   * inline comment claimed AA, but stacked opacities are not auditable
   * without recomputing. Replaced by explicit color-mix per element
   * matching iter-8 Bundle C auditability rationale.) */
  color: color-mix(in srgb, var(--lcars-text) 85%, transparent);
}
.lcars-narrative-card__audit-label {
  font-weight: 700;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--lcars-ice) 60%, transparent);
}
.lcars-narrative-card__audit-counts {
  font-variant-numeric: tabular-nums;
}
.lcars-narrative-card__audit-threshold {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--lcars-text) 85%, transparent);
}
.lcars-narrative-card__audit-shelved {
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lcars-peach);
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 6px;
}
.lcars-narrative-card__audit-dismiss {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--lcars-peach);
  cursor: pointer;
}
.lcars-narrative-card__audit-dismiss:hover {
  background: rgba(255, 153, 102, 0.12);
}
.lcars-narrative-card__audit-dismiss:focus-visible {
  background: rgba(255, 153, 102, 0.12);
  outline: 2px solid var(--lcars-peach);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * v2 Phase 8 — TOPICS surface (spec §5.2). Mirrors the PROJECTS    *
 * surface scaffolding with a topic-flavored ice accent.             *
 * ---------------------------------------------------------------- */

.lcars-topics-index {
  padding: 14px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lcars-topics-index__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.lcars-topics-index__title {
  font-family: var(--lcars-font-chrome);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lcars-ice);
  margin: 0;
}
/* Phase 3 opt-in disable link — small inline button next to the
   TOPICS title that clears the local opt-in flag. Sits at a quieter
   weight than the surrounding LCARS chrome so it reads as a
   secondary affordance, not a primary nav target. */
.lcars-topics-index__disable {
  font-family: var(--lcars-font-prose);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lcars-butterscotch);
  background: transparent;
  border: none;
  padding: 0 6px;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: baseline;
  opacity: 0.75;
}
.lcars-topics-index__disable:hover {
  color: var(--lcars-peach);
  opacity: 1;
  text-decoration: underline;
}
.lcars-topics-index__disable:focus-visible {
  color: var(--lcars-peach);
  opacity: 1;
  text-decoration: underline;
  outline: 2px solid var(--lcars-butterscotch);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Phase 3 opt-in gate — disclosure card shown until the user clicks
   ENABLE TOPICS. Mirrors the LocalAnalyzerEmpty visual weight (dashed
   violet border on a faint violet wash) so the user reads it as
   "feature is here, not yet active". */
.lcars-topics-opt-in {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  margin: 16px;
  border: 1px dashed var(--lcars-violet);
  border-radius: 8px;
  background: rgba(204, 153, 204, 0.04);
  max-width: 640px;
}
.lcars-topics-opt-in__title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  color: var(--lcars-violet);
  font-size: 14px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.lcars-topics-opt-in__body {
  margin: 0;
  font-family: var(--lcars-font-prose);
  color: var(--lcars-text);
  font-size: 13px;
  line-height: 1.5;
}
.lcars-topics-opt-in__cta {
  align-self: flex-start;
  padding: 8px 16px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-bg);
  background: var(--lcars-ice);
  border: none;
  border-radius: 16px;
  cursor: pointer;
}
.lcars-topics-opt-in__cta:hover {
  background: var(--lcars-sunflower);
}
.lcars-topics-opt-in__cta:focus-visible {
  background: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-topics-index__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--lcars-ice);
  border-radius: 14px;
  padding: 3px 10px;
}
.lcars-topics-index__filter:focus-within {
  border-color: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-topics-index__filter-label {
  color: var(--lcars-ice);
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.lcars-topics-index__filter-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--lcars-text);
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  width: 200px;
  min-width: 100px;
}
.lcars-topics-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-topics-index__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(153, 204, 255, 0.04);
  border-left: 3px solid var(--lcars-ice);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition:
    background 120ms,
    transform 120ms;
}
.lcars-topics-index__row:hover {
  background: rgba(153, 204, 255, 0.12);
  transform: translateX(2px);
}
.lcars-topics-index__row:focus-visible {
  background: rgba(153, 204, 255, 0.12);
  transform: translateX(2px);
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-topics-index__row-name {
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lcars-text);
}
.lcars-topics-index__row-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}

/* Iter-10 — mid-refactor closure: orphan className references in
 * TopicsMode TopicDetail had no CSS rules (same HOT-file drift iter-9
 * found in ProjectsMode). */
.lcars-topic-detail__projects,
.lcars-topic-detail__sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-topic-detail__sessions {
  margin-top: 8px;
}

.lcars-topic-detail {
  padding: 14px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* WCAG 2.4.11 Focus Not Obscured: parallel to ProjectDetail iter-9
   * Bundle L — sticky header can obscure focused content as user
   * tabs through session grid below. */
  scroll-padding-top: 56px;
}
.lcars-topic-detail__header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--lcars-bg);
  padding: 6px 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--lcars-divider) 60%, transparent);
  z-index: 4;
}
.lcars-topic-detail__title {
  font-family: var(--lcars-font-chrome);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lcars-ice);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.lcars-topic-detail__project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lcars-chip--cross-project {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.10);
  border: 1px solid var(--lcars-sunflower);
  border-radius: 8px;
  padding: 2px 8px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  cursor: pointer;
}
.lcars-chip--cross-project:hover:not(:disabled) {
  background: rgba(255, 204, 102, 0.22);
}
.lcars-chip--cross-project:focus-visible:not(:disabled) {
  background: rgba(255, 204, 102, 0.22);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-chip--cross-project:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- *
 * v2 Phase 9 — PRACTICE four-lens audit (spec §5.4 / D13).         *
 * ---------------------------------------------------------------- */

.lcars-practice {
  padding: 14px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lcars-practice__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-practice__title {
  font-family: var(--lcars-font-chrome);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lcars-violet);
  margin: 0;
}
.lcars-practice__lead {
  margin: 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
  line-height: 1.45;
}
.lcars-practice__lens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--lcars-violet);
  background: rgba(204, 153, 204, 0.04);
  border-radius: 0 8px 8px 0;
}

/* Rev3-F F9 — curator feed top section. Sits above the four
 * lenses; visually distinct via peach left-border so the user can
 * tell "model-ranked curation" apart from "deterministic lens
 * audit." */
.lcars-curator-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-left: 3px solid var(--lcars-peach);
  background: rgba(255, 153, 102, 0.04);
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}
.lcars-curator-feed__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-curator-feed__title {
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-peach);
  margin: 0;
}
.lcars-curator-feed__lead {
  margin: 0;
  font-size: 12px;
  max-width: 72ch;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
  line-height: 1.5;
}
.lcars-curator-feed__falsifier-inline--verified {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--lcars-ice);
}
.lcars-curator-feed__drift-banner {
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 153, 102, 0.12);
  color: var(--lcars-peach);
  font-size: 12px;
  font-weight: 700;
}
.lcars-curator-feed__loading,
.lcars-curator-feed__empty {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
}
.lcars-curator-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-curator-feed__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px 10px;
  border-radius: 0 4px 4px 0;
  background: rgba(255, 153, 102, 0.03);
  border-left: 3px solid rgba(255, 153, 102, 0.53);
  font-size: 12px;
}
.lcars-curator-feed__row:hover {
  background: rgba(255, 153, 102, 0.06);
}
.lcars-curator-feed__rank {
  font-family: var(--lcars-font-chrome);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lcars-peach);
  font-variant-numeric: tabular-nums;
}
.lcars-curator-feed__kind {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.lcars-curator-feed__kind--narrative {
  color: var(--lcars-violet);
}
.lcars-curator-feed__kind--knowledge-debt {
  color: var(--lcars-ice);
}
.lcars-curator-feed__kind--applied-pattern {
  color: var(--lcars-peach);
}
.lcars-curator-feed__title-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lcars-curator-feed__composite,
.lcars-curator-feed__tie-break {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
.lcars-curator-feed__falsifier {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.lcars-curator-feed__falsifier--verified {
  color: var(--lcars-ice);
}
.lcars-curator-feed__falsifier--skipped-by-user,
.lcars-curator-feed__falsifier--unavailable {
  color: var(--lcars-peach);
}
.lcars-curator-feed__reasoning {
  flex: 1 0 100%;
  margin: 2px 0 0;
  padding: 4px 0 0 10px;
  border-left: 1px solid rgba(255, 153, 102, 0.27);
  font-size: 12px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-practice__lens-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lcars-practice__lens-title {
  font-family: var(--lcars-font-chrome);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-violet);
  margin: 0;
}
.lcars-practice__lens-blurb {
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
}
.lcars-practice__empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-practice__finding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Iter-10 — apply the iter-7 dense-evidence-list playbook + per-severity
 * rail so the eye can scan severity from the row edge instead of the
 * trailing chip on every row. */
.lcars-practice__finding {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 10px;
  background: rgba(204, 153, 204, 0.04);
  border: none;
  border-left: 3px solid rgba(204, 153, 204, 0.53);
  border-radius: 0 4px 4px 0;
  transition: background 120ms;
}
.lcars-practice__finding:hover {
  background: rgba(204, 153, 204, 0.06);
}
.lcars-practice__finding:has(.lcars-practice__severity--info) {
  border-left-color: rgba(153, 204, 255, 0.53);
  background: rgba(153, 204, 255, 0.04);
}
.lcars-practice__finding:has(.lcars-practice__severity--info):hover {
  background: rgba(153, 204, 255, 0.06);
}
.lcars-practice__finding:has(.lcars-practice__severity--warn) {
  border-left-color: rgba(255, 204, 102, 0.53);
  background: rgba(255, 204, 102, 0.04);
}
.lcars-practice__finding:has(.lcars-practice__severity--warn):hover {
  background: rgba(255, 204, 102, 0.06);
}
.lcars-practice__finding:has(.lcars-practice__severity--alert) {
  border-left-color: rgba(255, 153, 51, 0.53);
  background: rgba(255, 153, 51, 0.04);
}
.lcars-practice__finding:has(.lcars-practice__severity--alert):hover {
  background: rgba(255, 153, 51, 0.06);
}
.lcars-practice__finding-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lcars-practice__severity {
  display: inline-flex;
  align-items: center;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid currentColor;
}
.lcars-practice__severity--info {
  color: var(--lcars-ice);
  background: rgba(153, 204, 255, 0.10);
}
.lcars-practice__severity--warn {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.12);
}
.lcars-practice__severity--alert {
  color: var(--lcars-peach);
  background: rgba(255, 153, 51, 0.14);
}
.lcars-practice__finding-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lcars-text);
}
.lcars-practice__finding-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-practice__evidence {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lcars-practice__evidence-pill {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  min-height: 22px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--lcars-violet) 50%, transparent);
  background: rgba(0, 0, 0, 0.35);
  color: var(--lcars-text);
  cursor: pointer;
}
.lcars-practice__evidence-pill:hover {
  background: rgba(204, 153, 204, 0.20);
}
.lcars-practice__evidence-pill:focus-visible {
  background: rgba(204, 153, 204, 0.20);
  outline: 2px solid var(--lcars-violet);
  outline-offset: 2px;
}
.lcars-practice__evidence-pill--static {
  opacity: 1;
  cursor: default;
  opacity: 0.85;
}

/* --- DetailMode prev/next + copy (Decision 11 / 12) --- */
.lcars-detail-mode__nav {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--lcars-sunflower);
  color: var(--lcars-sunflower);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
}
.lcars-detail-mode__nav:hover {
  background: rgba(255, 204, 153, 0.12);
}
.lcars-detail-mode__nav:focus-visible {
  background: rgba(255, 204, 153, 0.12);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-detail-mode__nav--disabled {
  border-color: var(--lcars-dim);
  color: var(--lcars-dim);
  cursor: not-allowed;
  opacity: 0.55;
}
.lcars-detail-mode__copy-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.lcars-detail-mode__copy {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--lcars-violet);
  color: var(--lcars-violet);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
}
.lcars-detail-mode__copy:hover {
  background: rgba(204, 153, 204, 0.15);
}
.lcars-detail-mode__copy:focus-visible {
  background: rgba(204, 153, 204, 0.15);
  outline: 2px solid var(--lcars-violet);
  outline-offset: 2px;
}
.lcars-detail-mode__copy-toast {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.lcars-detail-mode__copy-toast--ok {
  color: var(--lcars-ice);
}
.lcars-detail-mode__copy-toast--err {
  color: var(--lcars-peach);
}

/* --- Prose / data-dense weight bump ---
   Antonio at its default 500 weight reads thin at 11-14 px on dark
   backgrounds. Bumping prose and data-cell selectors to 600 weight
   keeps the LCARS display-face identity while giving the strokes more
   visual density. Uppercase labels at the same sizes stay at their
   existing weights (700) because they're already bold enough.
   Transcript body stays monospace (Courier) — code-shaped content. */
.lcars-kpi__value,
.lcars-kpi__coverage {
  font-weight: 600;
}

/* --- destructive "DELETE ALL" variant of the TopBar source chip ---
   Sits adjacent to SCAN LOCAL / UPLOAD CLOUD in the top-bar's left
   cluster (intentionally — this is what undoes what those two load),
   but uses the peach hazard palette instead of butterscotch so a
   user reaching for UPDATE CLOUD cannot mistake it for another
   ingestion action. The border is solid (the other source chips
   have semi-transparent borders); the background is solid peach;
   the text is dark for contrast. At mobile where the top-bar bg is
   black, the existing mobile-override (peach text on dark) is
   unnecessary for this chip — the solid peach fill reads correctly
   on either background. */
.lcars-top-bar__source-group--destructive {
  /* Add a small margin to separate visually from the source-group
     immediately before it, since color alone may not cue enough at
     narrow widths. */
  margin-left: 4px;
}
.lcars-top-bar__source-btn--destructive {
  background: var(--lcars-peach);
  border-color: var(--lcars-peach);
  color: var(--lcars-bg);
}
.lcars-top-bar__source-btn--destructive:hover,
.lcars-top-bar__source-btn--destructive:focus-visible {
  /* Slightly brighter peach on hover — the default source-btn hover
     flips to a solid black panel with sunflower text, which would
     read as the destructive chip *de-escalating*. Keep the hazard
     palette at commit time. */
  background: #ff9a6a;
  color: var(--lcars-bg);
  box-shadow: 0 0 0 2px rgba(255, 140, 100, 0.4);
}
@media (max-width: 899px) {
  /* Mobile override for the base source-btn inverts chrome to
     butterscotch-on-dark. The destructive chip already has its own
     solid-peach treatment that reads on either background, so pin
     it back to those values here (otherwise the mobile inverted
     rule would beat the desktop destructive rule on specificity). */
  .lcars-top-bar__source-btn--destructive {
    background: var(--lcars-peach);
    border-color: var(--lcars-peach);
    color: var(--lcars-bg);
  }
  .lcars-top-bar__source-btn--destructive:hover,
  .lcars-top-bar__source-btn--destructive:focus-visible {
    background: #ff9a6a;
    color: var(--lcars-bg);
  }
}
/* --- DELETE… dropdown panel ---
   Anchored below the destructive chip in the TopBar's left cluster.
   Reveals a list of the four ingestion sources with live session
   counts so the user can target the wipe. Two-click confirmation:
   first DELETE SELECTED click arms the primary button, second
   click commits. No typed word — the checkbox selection IS the
   deliberate decision. */
.lcars-delete-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lcars-delete-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--lcars-bg);
  color: var(--lcars-text);
  border: 1.5px solid var(--lcars-peach);
  border-radius: 10px;
  padding: 12px 14px 10px;
  font-family: var(--lcars-font-body);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65);
  animation: lcars-delete-dropdown-in 140ms ease-out;
}
@media (max-width: 440px) {
  .lcars-delete-dropdown__panel {
    /* On very narrow viewports, slide the panel to the viewport
       edge instead of anchoring at button's x — otherwise the 340px
       panel would overflow off-screen right. */
    left: auto;
    right: 0;
  }
}
@keyframes lcars-delete-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lcars-delete-dropdown__header {
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 140, 100, 0.25);
}
.lcars-delete-dropdown__title {
  margin: 0 0 3px 0;
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--lcars-peach);
}
.lcars-delete-dropdown__hint {
  margin: 0;
  color: color-mix(in srgb, var(--lcars-text) 85%, var(--lcars-bg));
  font-size: 12px;
  line-height: 1.5;
}
.lcars-delete-dropdown__hint code {
  background: color-mix(in srgb, var(--lcars-sunflower) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 55%, transparent);
  border-radius: 3px;
  padding: 0 4px;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
}
.lcars-delete-dropdown__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lcars-delete-dropdown__row {
  margin: 0;
  padding: 6px 4px;
  border-radius: 4px;
  transition: background 100ms;
}
.lcars-delete-dropdown__row:hover {
  background: rgba(255, 204, 153, 0.04);
}
.lcars-delete-dropdown__label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.lcars-delete-dropdown__checkbox {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--lcars-peach);
  cursor: pointer;
}
.lcars-delete-dropdown__row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lcars-delete-dropdown__row-title {
  font-size: 12.5px;
  color: var(--lcars-sunflower);
  font-weight: 600;
}
.lcars-delete-dropdown__row-sub {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg));
}
.lcars-delete-dropdown__row-count {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg));
  white-space: nowrap;
}
/* The path-explain row is the only place a user learns *which* directories
   the wipe targets — load-bearing on a destructive flow. Previously 10.5px
   mono at opacity 0.45 (~2:1 contrast); raised to body floor + ~5:1. */
.lcars-delete-dropdown__row-explain {
  margin: 3px 0 0 22px;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg));
  word-break: break-all;
}
.lcars-delete-dropdown__selectall {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 204, 153, 0.15);
  display: flex;
  justify-content: flex-end;
}
.lcars-delete-dropdown__selectall-btn {
  background: transparent;
  border: 1px solid rgba(255, 204, 153, 0.35);
  color: var(--lcars-sunflower);
  border-radius: 10px;
  padding: 3px 10px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 100ms,
    border-color 100ms,
    color 100ms;
}
.lcars-delete-dropdown__selectall-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lcars-sunflower) 8%, transparent);
  border-color: var(--lcars-sunflower);
}
.lcars-delete-dropdown__selectall-btn:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--lcars-sunflower) 8%, transparent);
  border-color: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-delete-dropdown__selectall-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lcars-delete-dropdown__armed {
  margin: 10px 0 0 0;
  padding: 8px 10px;
  background: rgba(255, 140, 100, 0.12);
  border: 1px solid var(--lcars-peach);
  border-radius: 6px;
  color: var(--lcars-peach);
  font-size: 12px;
  line-height: 1.4;
}
.lcars-delete-dropdown__armed strong {
  font-weight: 700;
  color: var(--lcars-peach);
}
.lcars-delete-dropdown__error {
  margin: 8px 0 0 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--lcars-peach) 12%, transparent);
  border: 1px solid var(--lcars-peach);
  border-radius: 6px;
  color: var(--lcars-peach);
  font-size: 12px;
  line-height: 1.5;
}
.lcars-delete-dropdown__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 140, 100, 0.2);
}
.lcars-delete-dropdown__cancel,
.lcars-delete-dropdown__primary {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms,
    opacity 120ms;
}
.lcars-delete-dropdown__cancel {
  background: transparent;
  border-color: rgba(255, 204, 153, 0.4);
  color: var(--lcars-sunflower);
}
.lcars-delete-dropdown__cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lcars-sunflower) 10%, transparent);
  border-color: var(--lcars-sunflower);
}
.lcars-delete-dropdown__cancel:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--lcars-sunflower) 10%, transparent);
  border-color: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-delete-dropdown__primary {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
}
.lcars-delete-dropdown__primary:hover:not(:disabled) {
  background: #ff9a6a;
}
.lcars-delete-dropdown__primary:focus-visible:not(:disabled) {
  background: #ff9a6a;
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-delete-dropdown__primary--armed {
  /* Pulse when armed so the user notices the button-label change and
     the "are you sure?" prompt above it. Reduced-motion users get only
     the static escalation below (deeper peach + thicker border) so the
     armed state still reads visually distinct from idle. */
  animation: lcars-delete-armed-pulse 1400ms ease-in-out infinite;
  background: #ff7050;
  border-color: var(--lcars-sunflower);
  border-width: 2px;
}
@keyframes lcars-delete-armed-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 140, 100, 0.6);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 140, 100, 0);
  }
}
.lcars-delete-dropdown__primary:disabled,
.lcars-delete-dropdown__cancel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .lcars-delete-dropdown__primary--armed {
    animation: none;
  }
  .lcars-delete-dropdown__panel {
    animation: none;
  }
}

/* --- Activity log panel --- */
/*
 * Fixed-position drawer on the right edge. Overlays the session grid
 * rather than resizing it — toggling visibility must not reflow the
 * content underneath. The transform-based slide is so a reduced-motion
 * user can keep the instant appearance while everyone else gets a
 * cheap gpu-accelerated animation.
 */
.lcars-activity-log {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--lcars-bg-0, #000);
  border-left: 1px solid var(--lcars-divider, #333);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 50;
  font-family: var(--lcars-font-mono, 'JetBrains Mono', monospace);
  color: var(--lcars-text);
}
.lcars-activity-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--lcars-divider);
  background: color-mix(in srgb, var(--lcars-butterscotch) 8%, transparent);
  flex-shrink: 0;
}
.lcars-activity-log__title {
  font-family: var(--lcars-font-chrome, 'Antonio', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  margin: 0;
}
.lcars-activity-log__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lcars-activity-log__action,
.lcars-activity-log__close {
  background: transparent;
  color: var(--lcars-ice);
  border: 1px solid var(--lcars-ice);
  border-radius: 4px;
  font-family: var(--lcars-font-chrome, 'Antonio', sans-serif);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 7px 10px;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
  line-height: 1;
}
.lcars-activity-log__action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lcars-activity-log__action:hover:not(:disabled),
.lcars-activity-log__close:hover,
.lcars-activity-log__action:focus-visible,
.lcars-activity-log__close:focus-visible {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
}
.lcars-activity-log__action:focus-visible,
.lcars-activity-log__close:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-activity-log__close {
  font-size: 12px;
  padding: 6px 9px;
}
.lcars-activity-log__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 12px;
  font-size: 12px;
  line-height: 1.45;
}
.lcars-activity-log__empty {
  color: var(--lcars-text);
  opacity: 0.7;
  text-align: center;
  margin-top: 40px;
  font-family: var(--lcars-font-prose, 'IBM Plex Sans', sans-serif);
  font-size: 12px;
  line-height: 1.6;
}
.lcars-activity-log__entry {
  display: grid;
  grid-template-columns: 58px 14px 72px 1fr;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lcars-divider) 50%, transparent);
  word-break: break-word;
  align-items: baseline;
}
.lcars-activity-log__time {
  color: var(--lcars-text);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.lcars-activity-log__glyph {
  color: var(--lcars-text);
  text-align: center;
  font-weight: 700;
}
.lcars-activity-log__source {
  font-family: var(--lcars-font-chrome, 'Antonio', sans-serif);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--lcars-butterscotch);
  opacity: 0.85;
}
.lcars-activity-log__message {
  color: var(--lcars-text);
}
.lcars-activity-log__entry--debug .lcars-activity-log__glyph,
.lcars-activity-log__entry--debug .lcars-activity-log__message {
  opacity: 0.75;
}
.lcars-activity-log__entry--info .lcars-activity-log__glyph {
  color: var(--lcars-ice);
}
.lcars-activity-log__entry--warn .lcars-activity-log__glyph,
.lcars-activity-log__entry--warn .lcars-activity-log__message {
  color: var(--lcars-butterscotch);
}
.lcars-activity-log__entry--error .lcars-activity-log__glyph,
.lcars-activity-log__entry--error .lcars-activity-log__message {
  color: var(--lcars-peach);
}

/* Toggle chip in the TopBar. Mirrors the other small chips' sizing
 * so it doesn't disrupt the header's rhythm. `--open` state gets the
 * ice-fill treatment to communicate "showing now". */
.lcars-activity-log-toggle {
  background: transparent;
  color: var(--lcars-butterscotch);
  border: 1px solid var(--lcars-butterscotch);
  border-radius: 4px;
  font-family: var(--lcars-font-chrome, 'Antonio', sans-serif);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1;
  margin-right: 8px;
}
.lcars-activity-log-toggle:hover {
  background: color-mix(in srgb, var(--lcars-butterscotch) 18%, transparent);
}
.lcars-activity-log-toggle--open {
  background: var(--lcars-butterscotch);
  color: #000;
}

/*
 * Edge tab — appears on the right side of the viewport whenever the
 * activity log panel is closed. Slim, vertical-text "ACTIVITY LOG"
 * label, butterscotch like the panel itself for visual cohesion. The
 * point is discoverability: the existing TopBar LOG toggle is small
 * and easy to overlook, so this provides a second always-visible
 * affordance that follows the standard slide-out drawer pattern. When
 * there are entries the user hasn't seen (panel was closed during a
 * run), a small count badge anchors above the label so a busy
 * background run still telegraphs "look here".
 *
 * Position: fixed to the viewport so the tab stays visible regardless
 * of scroll. z-index above the main content but below the panel
 * itself (panel uses higher z-index to overlay this tab when open).
 *
 * Mobile / narrow viewport handling: at < 480px the tab shrinks but
 * stays in place — it's already small enough that it doesn't cost
 * much usable width. Reduced-motion users see no transitions on
 * hover; the color shift alone communicates interactivity.
 */
.lcars-activity-log-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 28px;
  min-height: 140px;
  padding: 12px 4px;
  background: var(--lcars-bg-1);
  color: var(--lcars-butterscotch);
  border: 1px solid var(--lcars-butterscotch);
  border-right: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 140ms ease, color 140ms ease;
}
.lcars-activity-log-tab:hover,
.lcars-activity-log-tab:focus-visible {
  background: var(--lcars-butterscotch);
  color: #000;
  outline: none;
}
.lcars-activity-log-tab__label {
  /* Vertical reading direction so the tab can stay narrow without
   * truncating the label. `writing-mode: vertical-rl` rotates the
   * glyphs themselves; `transform: rotate(180deg)` flips so the text
   * reads bottom-to-top, which is the convention for right-edge
   * vertical labels (left edge would read top-to-bottom). */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  user-select: none;
}
.lcars-activity-log-tab__count {
  font-size: 10px;
  font-weight: 700;
  background: var(--lcars-butterscotch);
  color: #000;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.lcars-activity-log-tab:hover .lcars-activity-log-tab__count,
.lcars-activity-log-tab:focus-visible .lcars-activity-log-tab__count {
  background: #000;
  color: var(--lcars-butterscotch);
}
@media (prefers-reduced-motion: reduce) {
  .lcars-activity-log-tab {
    transition: none;
  }
}

/* ==========================================================================
   Redesign Phase 2: OVERVIEW / ANALYSIS tabs (upper panel)
   ==========================================================================
   The segmented-control tab bar sits on its own dedicated row directly
   above the body it governs — the spatial metaphor is that the tabs
   *are a header for the body below*, not a peer of the VISIBLE/RANGE
   stats row. Centered horizontally so the active tab reads as an anchor
   over the content.
*/
.lcars-upper-panel__stats-start {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
.lcars-upper-panel__tabs {
  display: inline-flex;
  align-items: stretch;
  justify-self: center;
  /* Centered on its own row. Margins auto give us a self-contained
     segmented control that centers under the panel width regardless
     of where the body content falls. */
  margin: 2px auto 0;
  border: 1px solid var(--lcars-divider);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lcars-bg-2);
  height: 26px;
}
.lcars-upper-panel__tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  background: transparent;
  color: var(--lcars-butterscotch);
  border: 0;
  border-right: 1px solid var(--lcars-divider);
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 100ms ease-out, color 100ms ease-out;
}
.lcars-upper-panel__tab:last-child {
  border-right: 0;
}
.lcars-upper-panel__tab:hover {
  background: color-mix(in srgb, var(--lcars-butterscotch) 14%, transparent);
  color: var(--lcars-sunflower);
}
.lcars-upper-panel__tab:focus-visible {
  background: color-mix(in srgb, var(--lcars-butterscotch) 14%, transparent);
  color: var(--lcars-sunflower);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: -2px;
}
.lcars-upper-panel__tab--active {
  background: var(--lcars-butterscotch);
  color: #000;
}
.lcars-upper-panel__tab--active:hover {
  background: var(--lcars-butterscotch);
  color: #000;
}
.lcars-upper-panel__tab-badge {
  font-family: var(--lcars-font-mono);
  font-size: 9px;
  padding: 0 5px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--lcars-bg) 22%, transparent);
  font-weight: 700;
}
.lcars-upper-panel__tab--active .lcars-upper-panel__tab-badge {
  background: #000;
  color: var(--lcars-sunflower);
}
/* Urgency flag: red badge when dupe + zombie counts exceed zero. Survives
   both active and inactive tab states so the signal is never hidden. */
.lcars-upper-panel__tab--flag .lcars-upper-panel__tab-badge {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
}
.lcars-upper-panel__tab--active.lcars-upper-panel__tab--flag .lcars-upper-panel__tab-badge {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
}

.lcars-upper-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  grid-column: 1 / -1;
}
/* ANALYSIS tab body: summary cards up top, then a small footer of
   state chips (semantic analyzer, tier indicator). Cards + chips both
   live inside the tab they describe — the tab becomes the full
   workspace for "what does analysis know right now?". */
.lcars-upper-panel__body--analysis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 4 equal cards on wide screens (RE-ASKED / ZOMBIES / CLASSIFIED / TOPICS).
   On narrower viewports auto-fit keeps cards a readable minimum width
   (~180px) and wraps to 2 or 1 rows as needed. */
.lcars-upper-panel__analysis-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1200px) {
  .lcars-upper-panel__analysis-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .lcars-upper-panel__analysis-cards {
    grid-template-columns: 1fr;
  }
}
.lcars-upper-panel__analysis-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px dashed var(--lcars-divider);
}

/* --- Analysis summary cards (RE-ASKED / ZOMBIES / TOPICS) --- */
.lcars-analysis-card {
  --card-accent: var(--lcars-violet);
  background: var(--lcars-bg-2);
  border: 1px solid var(--lcars-divider);
  border-left: 3px solid var(--card-accent);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.lcars-analysis-card:hover {
  background: color-mix(in srgb, var(--card-accent) 8%, var(--lcars-bg-2));
}
.lcars-analysis-card:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-analysis-card--inert {
  cursor: default;
  opacity: 0.62;
}
.lcars-analysis-card--inert:hover {
  background: var(--lcars-bg-2);
}
.lcars-analysis-card--dup {
  --card-accent: var(--lcars-peach);
}
.lcars-analysis-card--zombie {
  --card-accent: var(--lcars-peach);
}
.lcars-analysis-card--classified {
  /* Ice-blue accent reads as "matched / known good" and keeps the
     four-card palette distinct: peach · red · ice · violet. */
  --card-accent: var(--lcars-ice);
}
.lcars-analysis-card--topic {
  --card-accent: var(--lcars-violet);
}
.lcars-analysis-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lcars-analysis-card__title {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lcars-sunflower);
}
.lcars-analysis-card__count {
  margin-left: auto;
  font-family: var(--lcars-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--card-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lcars-analysis-card__desc {
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-2));
  flex: 1;
}
.lcars-analysis-card__cta {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lcars-butterscotch);
  align-self: flex-start;
}
.lcars-analysis-card:hover .lcars-analysis-card__cta {
  color: var(--lcars-sunflower);
}
.lcars-analysis-card__cta--muted {
  color: var(--lcars-dim);
}

/* --- Analysis launcher hero (ANALYSIS tab primary action) --- */
.lcars-analysis-launcher {
  background: linear-gradient(
    135deg,
    var(--lcars-bg-1),
    color-mix(in srgb, var(--lcars-violet) 10%, var(--lcars-bg-1)) 140%
  );
  border: 1px solid color-mix(in srgb, var(--lcars-violet) 40%, var(--lcars-divider));
  border-left: 4px solid var(--lcars-violet);
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lcars-analysis-launcher__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lcars-analysis-launcher__badge {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.lcars-analysis-launcher__badge--ok {
  background: var(--lcars-ice);
  color: var(--lcars-bg);
}
.lcars-analysis-launcher__badge--warn {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
}
.lcars-analysis-launcher__title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.lcars-analysis-launcher__title {
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lcars-violet);
}
.lcars-analysis-launcher--stale .lcars-analysis-launcher__title {
  color: var(--lcars-butterscotch);
}
.lcars-analysis-launcher--done .lcars-analysis-launcher__title {
  color: var(--lcars-ice);
}
.lcars-analysis-launcher--error .lcars-analysis-launcher__title {
  color: var(--lcars-peach);
}
.lcars-analysis-launcher__subtitle {
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
}
.lcars-analysis-launcher__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.lcars-analysis-launcher__btn {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    color 120ms ease-out,
    border-color 120ms ease-out,
    transform 80ms ease-out;
}
.lcars-analysis-launcher__btn:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-analysis-launcher__btn:active:not(:disabled) {
  transform: translateY(1px);
}
.lcars-analysis-launcher__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lcars-analysis-launcher__btn--primary {
  background: var(--lcars-violet);
  color: var(--lcars-bg);
  border-color: var(--lcars-violet);
}
.lcars-analysis-launcher__btn--primary:hover:not(:disabled) {
  background: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
}
.lcars-analysis-launcher--stale .lcars-analysis-launcher__btn--primary {
  background: var(--lcars-butterscotch);
  border-color: var(--lcars-butterscotch);
}
.lcars-analysis-launcher--stale .lcars-analysis-launcher__btn--primary:hover:not(:disabled) {
  background: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
}
.lcars-analysis-launcher--error .lcars-analysis-launcher__btn--primary {
  background: var(--lcars-peach);
  border-color: var(--lcars-peach);
}
.lcars-analysis-launcher__btn--secondary {
  background: transparent;
  color: var(--lcars-butterscotch);
  border-color: var(--lcars-butterscotch);
}
.lcars-analysis-launcher__btn--secondary:hover:not(:disabled) {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
}
.lcars-analysis-launcher__btn--ghost {
  background: transparent;
  color: var(--lcars-butterscotch);
  border-color: var(--lcars-butterscotch-muted);
}
.lcars-analysis-launcher__btn--ghost:hover:not(:disabled) {
  border-color: var(--lcars-butterscotch);
  color: var(--lcars-sunflower);
}
/* Hero variant — larger primary CTA for the first-time-no-bundle state,
   where the button is the headline action of the tab. */
.lcars-analysis-launcher__btn--hero {
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 14px 32px;
}

/* Running state: progress bar + spinner */
.lcars-analysis-launcher__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--lcars-violet) 30%, transparent);
  border-top-color: var(--lcars-violet);
  border-radius: 50%;
  animation: lcars-analysis-launcher-spin 800ms linear infinite;
}
@keyframes lcars-analysis-launcher-spin {
  to {
    transform: rotate(360deg);
  }
}
.lcars-analysis-launcher__progress {
  height: 6px;
  background: color-mix(in srgb, var(--lcars-violet) 30%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.lcars-analysis-launcher__progress-fill {
  height: 100%;
  background: var(--lcars-violet);
  transition: width 200ms ease-out;
}

/* Armed preview <dl>: label column + detail column. Each row renders
   via a grid-contained wrapper div (subgrid would be cleaner but
   isn't everywhere yet). */
.lcars-analysis-launcher__preview {
  margin: 0;
  padding: 8px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  font-family: var(--lcars-font-prose);
  border-top: 1px dashed var(--lcars-divider);
}
.lcars-analysis-launcher__preview-row {
  display: contents;
}
.lcars-analysis-launcher__preview-k {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--lcars-butterscotch);
  font-weight: 700;
  padding-top: 4px;
  white-space: nowrap;
}
.lcars-analysis-launcher__preview-v {
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lcars-sunflower);
  margin: 0;
  min-width: 0;
}
.lcars-analysis-launcher__preview-v strong {
  font-weight: 600;
  color: var(--lcars-sunflower);
}
.lcars-analysis-launcher__preview-note {
  margin-top: 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-1));
  line-height: 1.5;
}
.lcars-analysis-launcher__preview-mono {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 88%, var(--lcars-bg-1));
}

/* Numbered step list — the "exact analysis steps" requested by the
   user. Native <ol> counter with a LCARS pill style for the number.
   Each step has a title + a detail line beneath so users can scan
   titles for shape and read detail when curious. */
.lcars-analysis-launcher__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lcars-step;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-analysis-launcher__step {
  counter-increment: lcars-step;
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: baseline;
}
.lcars-analysis-launcher__step::before {
  content: counter(lcars-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--lcars-violet) 25%, transparent);
  color: var(--lcars-violet);
  border-radius: 50%;
  font-family: var(--lcars-font-mono);
  font-size: 10px;
  font-weight: 700;
  grid-column: 1;
  align-self: start;
}
.lcars-analysis-launcher__step-title {
  font-weight: 600;
  color: var(--lcars-sunflower);
  font-size: 12.5px;
  display: block;
  line-height: 1.35;
  grid-column: 2;
}
.lcars-analysis-launcher__step-detail {
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-1));
  line-height: 1.5;
  display: block;
  grid-column: 2;
  margin-top: 1px;
}

/* The old `.lcars-analysis-launcher__note` slot is no longer rendered
   in the armed preview (the mode description moved inline under the
   MODE row). Kept as a no-op fallback for any future consumer that
   revives the pattern. */
.lcars-analysis-launcher__note {
  margin: 0;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--lcars-violet) 8%, transparent);
  border-left: 2px solid var(--lcars-violet);
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  line-height: 1.45;
  color: var(--lcars-text);
  opacity: 0.85;
  border-radius: 0 4px 4px 0;
}

/* Variants — stale (warning) and done (completed compact) */
.lcars-analysis-launcher--stale {
  border-color: color-mix(in srgb, var(--lcars-butterscotch) 55%, var(--lcars-divider));
  border-left-color: var(--lcars-butterscotch);
  background: linear-gradient(
    135deg,
    var(--lcars-bg-1),
    color-mix(in srgb, var(--lcars-butterscotch) 10%, var(--lcars-bg-1)) 140%
  );
}
.lcars-analysis-launcher--done {
  border-color: color-mix(in srgb, var(--lcars-ice) 30%, var(--lcars-divider));
  border-left-color: var(--lcars-ice);
  background: var(--lcars-bg-1);
  padding: 10px 14px;
}
.lcars-analysis-launcher--done .lcars-analysis-launcher__title-group {
  gap: 2px;
}
.lcars-analysis-launcher--done .lcars-analysis-launcher__title {
  font-size: 11px;
}
.lcars-analysis-launcher--done .lcars-analysis-launcher__heading {
  flex: 1;
}
.lcars-analysis-launcher--done .lcars-analysis-launcher__actions {
  justify-content: flex-end;
}
.lcars-analysis-launcher--error {
  border-color: color-mix(in srgb, var(--lcars-peach) 45%, var(--lcars-divider));
  border-left-color: var(--lcars-peach);
  background: linear-gradient(
    135deg,
    var(--lcars-bg-1),
    color-mix(in srgb, var(--lcars-peach) 10%, var(--lcars-bg-1)) 140%
  );
}

/* DONE state lays out heading + button on one horizontal line at desktop
   so the compact summary doesn't eat vertical real estate. */
@media (min-width: 900px) {
  .lcars-analysis-launcher--done {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lcars-analysis-launcher__spinner {
    animation: none;
  }
  .lcars-analysis-launcher__progress-fill {
    transition: none;
  }
  .lcars-analysis-launcher__btn {
    transition: none;
  }
}

/* --- KPI flash on filter-settle (redesign Phase 6b) --- */
@keyframes lcars-kpi-filter-flash {
  0% {
    color: var(--lcars-ice);
    text-shadow: 0 0 8px color-mix(in srgb, var(--lcars-ice) 60%, transparent);
  }
  60% {
    color: var(--lcars-ice);
    text-shadow: 0 0 4px color-mix(in srgb, var(--lcars-ice) 30%, transparent);
  }
  100% {
    color: var(--lcars-sunflower);
    text-shadow: none;
  }
}
/* The flash is keyed on `data-flash` + the key prop (which React uses to
   remount the strip, guaranteeing the animation replays on every settle).
   Targeting `.lcars-kpi__value` so only the number flashes, not the
   surrounding chrome. */
.lcars-kpi-strip[data-flash] .lcars-kpi__value {
  animation: lcars-kpi-filter-flash 600ms ease-out 1;
}
/* Don't animate on the very first render (data-flash=0) — the key
   remount handles replays for every subsequent settle. */
.lcars-kpi-strip[data-flash='0'] .lcars-kpi__value {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .lcars-kpi-strip[data-flash] .lcars-kpi__value {
    animation: none;
  }
}

/* ==========================================================================
   Redesign Phase 6a: SORT dropdown in the mid-bar
   ==========================================================================
   Small LCARS-styled native <select> tucked into the right side of the
   mid-bar. Matches the bar's black-on-color aesthetic so it feels part
   of the chrome rather than a bolted-on form element.
*/
.lcars-mid-bar__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #000;
  padding: 0 12px;
}
/* v2 D6a: SESSIONS chrome hosts the GRID / TIMELINE view toggle next
   to the SORT control. Group container right-justifies both inside
   the existing MidBar slot (sort had `margin-left: auto` standalone). */
.lcars-mid-bar__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.lcars-mid-bar__view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  padding: 1px;
}
.lcars-mid-bar__view-btn {
  background: transparent;
  color: #000;
  border: none;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 9px;
  line-height: 1;
}
.lcars-mid-bar__view-btn--active {
  background: #000;
  color: var(--lcars-sunflower);
}
.lcars-mid-bar__view-btn:hover:not(.lcars-mid-bar__view-btn--active),
.lcars-mid-bar__view-btn:focus-visible:not(.lcars-mid-bar__view-btn--active) {
  background: rgba(0, 0, 0, 0.18);
  outline: none;
}
.lcars-mid-bar__sort-label {
  opacity: 0.8;
}
.lcars-mid-bar__sort-select {
  background: #000;
  color: var(--lcars-sunflower);
  border: 1px solid #000;
  border-radius: 10px;
  padding: 2px 6px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.lcars-mid-bar__sort-select:hover,
.lcars-mid-bar__sort-select:focus-visible {
  border-color: var(--lcars-sunflower);
  outline: none;
}

/* --- info popover: link styling ---
   Minimal anchor treatment for links inside info-popover panels.
   Ice blue follows the palette's quantitative/data role; on hover
   the color lifts to sunflower (primary) so the state change reads
   without needing a new underline treatment. Added late on purpose:
   appending here avoids shifting the line numbers cited by the
   design-system spec at design-system/spec.md. */
.lcars-info-popover__panel a {
  color: var(--lcars-ice);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lcars-info-popover__panel a:hover,
.lcars-info-popover__panel a:focus-visible {
  color: var(--lcars-sunflower);
  outline: none;
}

/* --- design-system colophon popover ---
   The leftmost info-popover in the top bar (attached to the
   CHAT ARCHAEOLOGIST title for the Supergraphic Panel link) has
   its anchor flush with the page gutter, so the base popover's
   `right: 0; min-width: 260px` positioning would push the panel off
   the left viewport edge.

   Two-tier fix, keyed to the top-bar's own layout breakpoint at
   900px (where it becomes the LCARS horizontal arm):

   - Narrow layout (default, no media query): detach to viewport-
     fixed coordinates between 8px margins. This is the fallback
     that covers every width from mobile through just-below-desktop.
     Authored *without* a `max-width` gate on purpose — fractional
     DPR (e.g. 1.0000000298 on some Chrome builds) leaves a no-
     match gap between `(max-width: 899px)` and `(min-width: 900px)`
     at integer widths near the boundary, so we avoid that gap by
     making the narrow treatment unconditional and letting the
     desktop rule override it.

   - Desktop (>= 900px): restore absolute, anchored positioning but
     flip the anchor side (`left: 0; right: auto`) so the panel
     opens rightward into the content column rather than leftward
     toward the page edge. */
.lcars-top-bar__title-info .lcars-info-popover__panel {
  position: fixed;
  top: 56px;
  left: 8px;
  right: 8px;
  width: auto;
  max-width: none;
  min-width: 0;
}
@media (min-width: 900px) {
  .lcars-top-bar__title-info .lcars-info-popover__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: auto;
    max-width: 360px;
    min-width: 260px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   RepoLink + TrustStrip (privacy-trust surfaces)

   RepoLink renders in two variants:
     - `chip`   — sidebar footer, subdued LCARS pill
     - `inline` — inside TrustStrip prose, reads as a link

   TrustStrip is the landing-state reassurance bar. Only renders on
   the empty/error states so returning users with data don't see a
   re-pitch they already read. Uses butterscotch (not sunflower) so
   it doesn't compete with the CTAs in the UploadPanel below it.
   ───────────────────────────────────────────────────────────────── */

.lcars-repo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--lcars-butterscotch);
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.lcars-repo-link:hover,
.lcars-repo-link:focus-visible {
  color: var(--lcars-sunflower);
  outline: none;
}
.lcars-repo-link:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-repo-link__glyph {
  font-family: var(--lcars-font-mono);
  font-weight: 700;
  letter-spacing: 0;
}
.lcars-repo-link__label {
  white-space: nowrap;
}
.lcars-repo-link__arrow {
  font-size: 12px;
  line-height: 1;
}

/* Chip variant (sidebar footer) — outlined pill, pressable-looking. */
.lcars-repo-link--chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--lcars-butterscotch-muted);
  background: rgba(221, 153, 68, 0.06);
}
.lcars-repo-link--chip:hover,
.lcars-repo-link--chip:focus-visible {
  border-color: var(--lcars-butterscotch);
  background: rgba(221, 153, 68, 0.14);
}

/* Inline variant (inside TrustStrip) — underline on hover, no chrome. */
.lcars-repo-link--inline {
  padding: 0;
  background: transparent;
  border: none;
}
.lcars-repo-link--inline:hover .lcars-repo-link__label,
.lcars-repo-link--inline:focus-visible .lcars-repo-link__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Trust strip — one-line pledge + body + inline source link, plus
   a small footnote disclosing the HF model-download caveat. */
.lcars-trust-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 4px;
  border-left: 3px solid var(--lcars-butterscotch);
  background: rgba(221, 153, 68, 0.06);
  font-family: var(--lcars-font-prose);
  font-size: 13px;
  line-height: 1.4;
  color: var(--lcars-text);
  transition:
    opacity 140ms ease-out,
    visibility 140ms ease-out;
}
/* When a TopBar info-popover is open, fade the TrustStrip out — the
   popover drops down from the TopBar and would otherwise partially
   occlude the strip. Hiding the strip while the user is reading the
   popover removes the z-stack awkwardness without any React-side
   state coupling. CSS :has() is supported in all evergreen browsers
   (Chrome 105+, Safari 15.4+, Firefox 121+) — well within our
   browser baseline. */
.lcars-frame--empty:has(.lcars-top-bar .lcars-info-popover__trigger--open)
  .lcars-trust-strip {
  opacity: 0;
  visibility: hidden;
}
.lcars-trust-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.lcars-trust-strip__pledge {
  font-family: var(--lcars-font-chrome);
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--lcars-butterscotch);
  white-space: nowrap;
}
.lcars-trust-strip__body {
  flex: 1 1 320px;
  min-width: 0;
}
.lcars-trust-strip__footnote {
  font-size: 12px;
  line-height: 1.5;
  color: var(--lcars-dim);
  padding-left: 0;
}
.lcars-trust-strip__footnote code {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-butterscotch-muted);
}
/* Center + align within the empty-state column to match its other
   children (max-width 640, centered). */
.lcars-empty-main .lcars-trust-strip {
  align-self: center;
  max-width: 640px;
}
/* The "what chat-arch does" pitch on the empty-state landing.
   Sits between the TrustStrip (privacy framing) and the
   "NO DATA YET" ErrorState. Priya complained the landing showed
   chrome and an empty-state error but never said what the product
   does — this is the answer. */
.lcars-empty-pitch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
  padding: 0 8px;
  text-align: center;
}
.lcars-empty-pitch__headline {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--lcars-sunflower);
}
.lcars-empty-pitch__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 85%, var(--lcars-bg));
}
@media (min-width: 600px) {
  .lcars-empty-pitch__headline {
    font-size: 26px;
  }
  .lcars-empty-pitch__sub {
    font-size: 14px;
  }
}

/* Phase 2a footer variant: leaner persistent strip that lives below
   the populated frame so the local-first pledge is visible when
   returning users land on data. Single row, smaller padding, spans
   the full grid; mobile drops it entirely so the pill bar + content
   keep the limited vertical space. */
.lcars-trust-strip--footer {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 6px 16px;
  font-size: 12px;
  border-left: none;
  border-top: 2px solid var(--lcars-butterscotch-muted);
  background: color-mix(in srgb, var(--lcars-butterscotch) 4%, transparent);
  border-radius: 0;
  grid-column: 1 / -1;
}
.lcars-trust-strip--footer .lcars-trust-strip__row {
  flex-wrap: nowrap;
  gap: 14px;
  width: 100%;
}
.lcars-trust-strip--footer .lcars-trust-strip__body {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
/*
  Mobile (< 600px) renders a leaner one-line variant instead of
  hiding the strip entirely. Earlier the strip dropped on mobile so
  the pill bar + content kept the limited vertical space, but that
  removed the local-first reassurance from the surface where it
  matters most (a first-time visitor on their phone). This restyle
  drops the longer body copy + RepoLink wrapper and keeps just the
  pledge + a compact VIEW SOURCE link, costing one row of vertical
  space.
*/
@media (max-width: 600px) {
  .lcars-trust-strip--footer {
    padding: 4px 12px;
    font-size: 11px;
    gap: 4px 10px;
  }
  .lcars-trust-strip--footer .lcars-trust-strip__row {
    gap: 10px;
  }
  /* Hide the prose body — only the pledge + repo link survive on phones. */
  .lcars-trust-strip--footer .lcars-trust-strip__body {
    display: none;
  }
  .lcars-trust-strip--footer .lcars-trust-strip__pledge {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}

/* ---------------------------------------------------------------- *
 * TopBar informational chips                                        *
 *   - .lcars-top-bar__tier-slot wraps the TierIndicator + siblings  *
 *     so they render as a single inline cluster between the title   *
 *     and the EARTHDATE chip.                                       *
 *   - .lcars-top-bar__earthdate is the EARTHDATE chip.              *
 *   - .lcars-top-bar__rescan-chip is the persistent +N delta from   *
 *     the most recent rescan (dismissed via its ✕ button or by      *
 *     starting another scan).                                       *
 * ---------------------------------------------------------------- */

.lcars-top-bar__tier-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.lcars-top-bar__earthdate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  color: var(--lcars-bg);
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  flex: 0 0 auto;
  line-height: 1;
}
.lcars-top-bar__earthdate-value {
  padding-bottom: 2px;
  line-height: 1;
}
.lcars-top-bar__rescan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 12px;
  border-radius: 14px;
  background: var(--lcars-peach);
  color: var(--lcars-bg);
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  flex: 0 0 auto;
  line-height: 1;
}
.lcars-top-bar__rescan-chip-label,
.lcars-top-bar__rescan-chip-value {
  padding-bottom: 2px;
  line-height: 1;
}
.lcars-top-bar__rescan-chip-value {
  font-variant-numeric: tabular-nums;
}
.lcars-top-bar__rescan-chip-dismiss {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: var(--lcars-bg);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lcars-top-bar__rescan-chip-dismiss:hover,
.lcars-top-bar__rescan-chip-dismiss:focus-visible {
  background: rgba(0, 0, 0, 0.5);
  outline: none;
}
@media (max-width: 899px) {
  /* Mirror the source-btn mobile inversion — dark title bar needs
     light-on-dark chips. */
  .lcars-top-bar__earthdate {
    background: rgba(255, 204, 153, 0.12);
    border-color: var(--lcars-butterscotch);
    color: var(--lcars-butterscotch);
  }
}

/* DATA sidebar item — distinct accent (peach) so it visually
   separates from the BROWSE / INSIGHTS surface modes. The
   --mode-color CSS variable is set inline by Sidebar.tsx. */
.lcars-sidebar__group--actions {
  margin-top: 6px;
}
.lcars-sidebar__item--data {
  /* Inherit base item layout; just nudge the accent to make the
     trigger feel action-y rather than nav-y. */
  border-top: 1px solid color-mix(in srgb, var(--lcars-peach) 30%, transparent);
}
.lcars-sidebar__pill--data {
  /* Horizontal-variant pill: same accent system, no extra layout. */
}

/* DATA panel — slide-in sheet anchored to the left edge so it sits
   adjacent to the sidebar trigger that opened it. Width matches the
   ActivityLogPanel for visual consistency. */
.lcars-data-panel__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 49;
}
.lcars-data-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(440px, 100vw);
  height: 100vh;
  background: var(--lcars-bg-0, #000);
  border-right: 1px solid var(--lcars-divider, #333);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 50;
  font-family: var(--lcars-font-prose);
  color: var(--lcars-text);
  overflow-y: auto;
}
.lcars-data-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lcars-divider);
  background: color-mix(in srgb, var(--lcars-peach) 10%, transparent);
  flex-shrink: 0;
}
.lcars-data-panel__title {
  font-family: var(--lcars-font-chrome);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lcars-peach);
  margin: 0;
}
.lcars-data-panel__close {
  background: transparent;
  color: var(--lcars-ice);
  border: 1px solid var(--lcars-ice);
  border-radius: 4px;
  font-family: var(--lcars-font-chrome);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 6px 10px;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
  line-height: 1;
}
.lcars-data-panel__close:hover,
.lcars-data-panel__close:focus-visible {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
}
.lcars-data-panel__close:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-data-panel__lead {
  margin: 12px 14px 4px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-data-panel__section {
  padding: 12px 14px;
  border-top: 1px solid color-mix(in srgb, var(--lcars-divider) 60%, transparent);
}
.lcars-data-panel__section-title {
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--lcars-butterscotch);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.lcars-data-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* DataPanel reuses the existing source-btn / source-group classes so
   button label / status colors stay consistent with the prior TopBar
   placement. The host bg (panel) is dark, so kick the chip palette
   to the same mobile-inversion treatment used below 900px. */
.lcars-data-panel .lcars-top-bar__source-btn {
  background: rgba(255, 204, 153, 0.12);
  border-color: var(--lcars-butterscotch);
  color: var(--lcars-butterscotch);
}
.lcars-data-panel .lcars-top-bar__source-btn:hover,
.lcars-data-panel .lcars-top-bar__source-btn:focus-visible {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
}

/* --- CORRECTIONS surface --- */
.lcars-corrections {
  padding: 14px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lcars-corrections__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-corrections__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lcars-corrections__title {
  font-family: var(--lcars-font-chrome);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lcars-peach);
  margin: 0;
}
.lcars-corrections__time {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
}
.lcars-corrections__lead {
  margin: 0;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
}
.lcars-corrections__empty {
  margin: 0;
  padding: 14px 16px;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid var(--lcars-peach);
  border-radius: 0 8px 8px 0;
}
.lcars-corrections__empty code {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11.5px;
  color: var(--lcars-ice);
}
.lcars-corrections__error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 60%, transparent);
  background: rgba(255, 153, 51, 0.08);
  border-radius: 6px;
  color: var(--lcars-text);
  font-size: 12px;
}
.lcars-corrections__error-output {
  margin: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}
.lcars-corrections__trigger {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-corrections__trigger-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcars-corrections__trigger-status {
  font-size: 13px;
  color: color-mix(in srgb, var(--lcars-text) 90%, transparent);
}
.lcars-corrections__trigger-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lcars-corrections__btn--icon {
  padding: 2px 8px;
  font-size: 14px;
  letter-spacing: 0;
}
.lcars-corrections__armed-reasoning {
  margin: 0;
  max-width: 78ch;
  font-size: 12px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--lcars-text) 90%, transparent);
  font-style: italic;
}
.lcars-corrections__btn {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  color: var(--lcars-text);
}
.lcars-corrections__btn--primary {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
}
.lcars-corrections__btn--primary:hover,
.lcars-corrections__btn--primary:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-corrections__btn--secondary {
  border-color: color-mix(in srgb, var(--lcars-peach) 60%, transparent);
  color: var(--lcars-peach);
}
.lcars-corrections__btn--ghost {
  border-color: color-mix(in srgb, var(--lcars-text) 30%, transparent);
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-corrections__btn--danger {
  border-color: color-mix(in srgb, #ff5a4f 70%, transparent);
  color: #ff8a7a;
  background: rgba(255, 90, 79, 0.08);
}
.lcars-corrections__btn--danger:hover:not(:disabled),
.lcars-corrections__btn--danger:focus-visible:not(:disabled) {
  background: #ff5a4f;
  color: var(--lcars-bg);
  outline: 2px solid #ff8a7a;
  outline-offset: 2px;
}
.lcars-corrections__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- */
/* Phase 2b — "SINCE YOU PATCHED" summary surface                    */
/* Hosted at the top of CorrectionsPanel; collapses to nothing when  */
/* the apply ledger is empty so first-time users see the unchanged   */
/* CoverageMeter above the buckets.                                  */
/* ---------------------------------------------------------------- */
.lcars-applied-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 18px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 204, 153, 0.06),
    rgba(0, 0, 0, 0.20)
  );
  border-left: 4px solid var(--lcars-sunflower);
}
.lcars-applied-summary__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.lcars-applied-summary__headline-when {
  color: var(--lcars-peach);
}
.lcars-applied-summary__headline {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 16px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-sunflower);
}
.lcars-applied-summary__stale {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-peach);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 60%, transparent);
  background: rgba(255, 153, 51, 0.08);
}
/* Actionable variant — same chip, but rendered as a <button> so the */
/* user can fire onRefreshIndex directly instead of hunting for the  */
/* chrome's UPDATE LOCAL control.                                    */
button.lcars-applied-summary__stale--button {
  cursor: pointer;
  font: inherit;
  text-align: left;
}
button.lcars-applied-summary__stale--button:hover {
  background: rgba(255, 153, 51, 0.16);
  border-color: var(--lcars-peach);
}
button.lcars-applied-summary__stale--button:focus-visible {
  background: rgba(255, 153, 51, 0.16);
  border-color: var(--lcars-peach);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-applied-summary__stale-arrow {
  display: inline-block;
  margin-left: 2px;
}
.lcars-applied-summary__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lcars-applied-summary__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 6px;
  border-bottom: 2px solid color-mix(in srgb, var(--lcars-text) 18%, transparent);
}
.lcars-applied-summary__stat--holding {
  border-bottom-color: color-mix(in srgb, var(--lcars-sunflower) 70%, transparent);
}
.lcars-applied-summary__stat--recurring {
  border-bottom-color: color-mix(in srgb, var(--lcars-peach) 70%, transparent);
}
.lcars-applied-summary__stat-value {
  font-family: var(--lcars-font-chrome);
  font-size: 26px;
  font-weight: 700;
  color: var(--lcars-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lcars-applied-summary__stat--recurring .lcars-applied-summary__stat-value {
  color: var(--lcars-peach);
}
.lcars-applied-summary__stat-label {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-applied-summary__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-sunflower);
}
.lcars-applied-summary__toggle:hover {
  background: rgba(255, 204, 153, 0.08);
}
.lcars-applied-summary__toggle:focus-visible {
  background: rgba(255, 204, 153, 0.08);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-applied-summary__chevron {
  font-size: 10px;
}
.lcars-applied-summary__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-applied-summary__row {
  margin: 0;
}
.lcars-applied-summary__row-btn {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr minmax(140px, auto) auto;
  border-left: 3px solid rgba(255, 204, 153, 0.27);
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid color-mix(in srgb, var(--lcars-text) 10%, transparent);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--lcars-font-prose);
  color: var(--lcars-text);
}
.lcars-applied-summary__row-btn:hover {
  background: rgba(255, 204, 153, 0.06);
}
.lcars-applied-summary__row-btn:focus-visible {
  background: rgba(255, 204, 153, 0.06);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-applied-summary__row-when {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lcars-applied-summary__row-rule {
  font-size: 13px;
  color: var(--lcars-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcars-applied-summary__row-target {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  font-size: 10px;
}
.lcars-applied-summary__row-target-kind {
  font-family: var(--lcars-font-chrome);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--lcars-sunflower) 80%, transparent);
}
.lcars-applied-summary__row-target-path {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-applied-summary__row-bucket {
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.lcars-applied-summary__row-bucket--holding {
  color: var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.08);
}
.lcars-applied-summary__row-bucket--recurring {
  color: var(--lcars-peach);
  background: rgba(255, 153, 51, 0.10);
}
.lcars-applied-summary__row-bucket--gone {
  color: color-mix(in srgb, var(--lcars-text) 55%, transparent);
  background: rgba(255, 255, 255, 0.04);
}
/* F-DE-4 — left-rail keyed to bucket so the eye scans urgency
   off the row edge instead of having to read the trailing pill on
   every row. `:has()` shipped baseline-stable in all targets the
   viewer supports (Chrome ≥105, Safari ≥15.4, Firefox ≥121). */
.lcars-applied-summary__row:has(.lcars-applied-summary__row-bucket--holding) .lcars-applied-summary__row-btn {
  border-left-color: color-mix(in srgb, var(--lcars-sunflower) 60%, transparent);
}
.lcars-applied-summary__row:has(.lcars-applied-summary__row-bucket--recurring) .lcars-applied-summary__row-btn {
  border-left-color: var(--lcars-peach);
}
.lcars-applied-summary__row:has(.lcars-applied-summary__row-bucket--gone) .lcars-applied-summary__row-btn {
  border-left-color: color-mix(in srgb, var(--lcars-text) 30%, transparent);
}
@media (max-width: 600px) {
  .lcars-applied-summary__row-btn {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
  }
  .lcars-applied-summary__row-when {
    grid-row: 1;
    grid-column: 1;
  }
  .lcars-applied-summary__row-bucket {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }
  .lcars-applied-summary__row-rule {
    grid-row: 2;
    grid-column: 1 / 3;
    white-space: normal;
  }
  .lcars-applied-summary__row-target {
    grid-row: 3;
    grid-column: 1 / 3;
    /* F-M-13 — collapse target kind+path to one inline meta-line so
       the wide 0.18em-tracked chip doesn't dwarf the rule above it
       at narrow widths. */
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
}

/* Highlight pulse — flashes the matching CorrectionPatternCard after  */
/* the summary scrolls it into view. Two-second animation; the         */
/* highlightedPatternId state clears at the same time.                 */
@keyframes lcars-applied-summary-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 153, 0); }
  20%      { box-shadow: 0 0 0 6px rgba(255, 204, 153, 0.45); }
  60%      { box-shadow: 0 0 0 4px rgba(255, 204, 153, 0.15); }
}
.lcars-corrections__pattern-item {
  border-radius: 8px;
  transition: box-shadow 240ms ease-out;
}
.lcars-corrections__pattern-item[data-highlighted='true'] {
  animation: lcars-applied-summary-pulse 2s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  /* Static fallback — keep the highlight perceivable for reduced-     */
  /* motion users without a pulsing animation. A solid amber outline + */
  /* tint reads as "this card was selected" without movement.          */
  .lcars-corrections__pattern-item[data-highlighted='true'] {
    animation: none;
    outline: 2px solid color-mix(in srgb, var(--lcars-peach) 70%, transparent);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--lcars-peach) 6%, transparent);
  }
}

.lcars-corrections__coverage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 14px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid color-mix(in srgb, var(--lcars-sunflower) 70%, transparent);
}
.lcars-corrections__coverage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lcars-corrections__coverage-figure {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
  font-variant-numeric: tabular-nums;
}
.lcars-corrections__coverage-figure strong {
  color: var(--lcars-text);
  font-weight: 700;
}
.lcars-corrections__coverage-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lcars-corrections__coverage-fill {
  display: block;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--lcars-sunflower),
    var(--lcars-peach)
  );
  transition: width 240ms ease-out;
}
.lcars-corrections__coverage-provenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--lcars-text) 88%, transparent);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.lcars-corrections__coverage-provenance:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--lcars-text);
}
.lcars-corrections__coverage-provenance:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--lcars-text);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-corrections__coverage-chevron {
  font-size: 10px;
  color: color-mix(in srgb, var(--lcars-sunflower) 80%, transparent);
}
.lcars-corrections__coverage-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--lcars-text) 8%, transparent);
}
.lcars-corrections__pipeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-corrections__pipeline-label {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: color-mix(in srgb, var(--lcars-sunflower) 80%, transparent);
}
.lcars-corrections__pipeline-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 95%, transparent);
}
.lcars-corrections__pipeline-list li {
  font-variant-numeric: tabular-nums;
}
.lcars-corrections__pipeline-list strong {
  color: var(--lcars-text);
  font-weight: 600;
}
.lcars-corrections__pipeline-note {
  display: block;
  /* 9ch matches .lcars-corrections__pipeline-source min-width so the
   * note flows on its own line, indented under the source-label
   * column. Prevents mid-phrase wraps like
   *   "CLI crashed before writing | a transcript"
   * at narrow widths. */
  margin-left: 9ch;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: italic;
  color: color-mix(in srgb, var(--lcars-text) 85%, transparent);
}
.lcars-corrections__pipeline-source {
  display: inline-block;
  min-width: 9ch;
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
}
.lcars-corrections__pipeline-sublabel {
  margin-top: -2px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  font-style: italic;
  color: color-mix(in srgb, var(--lcars-text) 60%, transparent);
}
/* Pipeline-stage wrappers: each one groups the work performed by a
 * single stage of the corrections pipeline. The status badge + note
 * are load-bearing — they answer the "the headline says 0 mined but
 * everything below has counts" question by making the EXPORTER SCAN
 * vs LLM MINE boundary explicit. */
.lcars-corrections__stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}
.lcars-corrections__stage + .lcars-corrections__stage {
  border-top: 1px dashed color-mix(in srgb, var(--lcars-text) 12%, transparent);
  padding-top: 10px;
}
.lcars-corrections__stage-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.lcars-corrections__stage-badge {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.lcars-corrections__stage[data-stage-status='done'] .lcars-corrections__stage-badge {
  color: var(--lcars-sunflower);
}
.lcars-corrections__stage[data-stage-status='pending'] .lcars-corrections__stage-badge {
  color: var(--lcars-peach);
}
.lcars-corrections__stage-title {
  font-family: var(--lcars-font-chrome);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--lcars-text);
}
.lcars-corrections__stage-note {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-corrections__stage-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 18px;
}
.lcars-corrections__danger {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 14px;
  border-top: 1px dashed color-mix(in srgb, #ff5a4f 40%, transparent);
}
.lcars-corrections__danger-header {
  display: flex;
  align-items: center;
}
.lcars-corrections__danger-label {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, #ff5a4f 70%, transparent);
  font-weight: 700;
}
.lcars-corrections__danger-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lcars-corrections__danger-blurb {
  margin: 0;
  flex: 1 1 280px;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
}
.lcars-corrections__danger-confirm {
  margin: 0;
  flex: 1 1 280px;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lcars-text);
}
.lcars-corrections__danger-actions {
  display: flex;
  gap: 10px;
}
.lcars-corrections__armed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 60%, transparent);
  border-radius: 8px;
  background: rgba(255, 153, 51, 0.06);
}
.lcars-corrections__armed-summary {
  margin: 0;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lcars-text);
}
.lcars-corrections__armed-actions {
  display: flex;
  gap: 10px;
}
.lcars-corrections__running {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--lcars-peach);
  background: rgba(255, 153, 51, 0.05);
  border-radius: 0 8px 8px 0;
}
.lcars-corrections__running-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lcars-font-chrome);
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--lcars-peach);
}
.lcars-corrections__running-title {
  font-weight: 700;
}
.lcars-corrections__running-phase {
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
  letter-spacing: 0.06em;
}
.lcars-corrections__sr-only,
.lcars-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lcars-corrections__running-abort {
  margin-left: 8px;
  font-size: 9.5px;
  padding: 4px 10px;
}
.lcars-corrections__running-elapsed {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
  letter-spacing: 0.04em;
}
.lcars-corrections__running-staleness {
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
  letter-spacing: 0.04em;
}
.lcars-corrections__running-error {
  margin: 0;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  color: var(--lcars-peach);
  white-space: pre-wrap;
}
.lcars-corrections__running-hint {
  margin: 0;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-text) 75%, transparent);
  font-style: italic;
}
.lcars-corrections__spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lcars-peach);
  animation: lcars-corrections-pulse 1.2s infinite ease-in-out;
}
@keyframes lcars-corrections-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.lcars-corrections__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  max-height: 160px;
  overflow: auto;
}
.lcars-corrections__log-line {
  padding: 3px 8px;
  background: rgba(255, 153, 51, 0.04);
  border-left: 2px solid rgba(255, 153, 51, 0.45);
  border-radius: 0 3px 3px 0;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.lcars-corrections__buckets {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lcars-corrections__bucket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  /* Default neutral treatment — applies to every bucket; the
   * urgency-attribute selectors below override for buckets containing
   * recurring / already-encoded patterns. Same visual that the
   * dropped `--new` modifier class used to render. */
  border-left: 3px solid color-mix(in srgb, var(--lcars-text) 30%, transparent);
  background: rgba(0, 0, 0, 0.18);
}
/* Encoded-but-failing signal (weaker urgency, sunflower accent) —
 * applied when a bucket contains ≥1 alreadyEncoded pattern AND
 * no recurring patterns. */
.lcars-corrections__bucket[data-has-encoded='true'] {
  border-left: 3px solid var(--lcars-sunflower);
  background: rgba(255, 204, 102, 0.05);
}
/* Recurring-after-applied signal (highest urgency, peach accent) —
 * declared last so it wins over the encoded rule when a bucket
 * carries both signals. Same intent as the dropped `--recurring`
 * modifier class: scan the page for these first. */
.lcars-corrections__bucket[data-has-recurring='true'] {
  border-left: 3px solid var(--lcars-peach);
  background: rgba(255, 153, 51, 0.05);
}
.lcars-corrections__bucket-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.lcars-corrections__bucket-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  /* Default neutral title color — matches the dropped `--new` modifier.
   * Urgency selectors below override per signal. */
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
}
.lcars-corrections__bucket[data-has-encoded='true'] .lcars-corrections__bucket-title {
  color: var(--lcars-sunflower);
}
/* Recurring last so it wins when both signals are present. */
.lcars-corrections__bucket[data-has-recurring='true'] .lcars-corrections__bucket-title {
  color: var(--lcars-peach);
}
.lcars-corrections__bucket-count {
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--lcars-text) 88%, transparent);
}
.lcars-corrections__bucket-blurb {
  margin: 0;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
}
.lcars-corrections__bucket-empty {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: color-mix(in srgb, var(--lcars-text) 78%, transparent);
}
.lcars-corrections__pattern-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Correction pattern card --- */
.lcars-correction-pattern {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 25%, transparent);
  border-radius: 8px;
}
.lcars-correction-pattern--recurring { border-color: color-mix(in srgb, var(--lcars-peach) 60%, transparent); }
.lcars-correction-pattern--encoded   { border-color: color-mix(in srgb, var(--lcars-sunflower) 60%, transparent); }
.lcars-correction-pattern--new       { border-color: color-mix(in srgb, var(--lcars-text) 25%, transparent); }
.lcars-correction-pattern__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-correction-pattern__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcars-correction-pattern__badge {
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid currentColor;
}
.lcars-correction-pattern__badge--recurring { color: var(--lcars-peach); background: rgba(255, 153, 51, 0.10); }
.lcars-correction-pattern__badge--encoded   { color: var(--lcars-sunflower); background: rgba(255, 204, 102, 0.10); }
.lcars-correction-pattern__badge--new       { color: color-mix(in srgb, var(--lcars-text) 88%, transparent); background: rgba(255, 255, 255, 0.04); }
.lcars-correction-pattern__count {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
}
.lcars-correction-pattern__rule {
  margin: 0;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--lcars-text);
}
.lcars-correction-pattern__confidence {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcars-correction-pattern__confidence-label {
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-correction-pattern__confidence-track {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
}
.lcars-correction-pattern__confidence-fill {
  height: 100%;
  background: var(--lcars-peach);
}
.lcars-correction-pattern__confidence-pct {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-text) 92%, transparent);
  min-width: 36px;
  text-align: right;
}
.lcars-correction-pattern__toggle {
  align-self: flex-start;
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 50%, transparent);
  color: var(--lcars-peach);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.lcars-correction-pattern__toggle:hover {
  background: rgba(255, 153, 51, 0.10);
}
.lcars-correction-pattern__toggle:focus-visible {
  background: rgba(255, 153, 51, 0.10);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-correction-pattern__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lcars-correction-pattern__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-correction-pattern__section-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  /* Bumped from 10.5px → 13px after UX feedback: the old size read as
     a chip label and the eye skipped right past it, making it hard to
     find the section breaks inside a dense card. */
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--lcars-peach);
  font-weight: 700;
  /* Subtle left accent so the header is found by both shape and
     color, not color alone. Matches the LCARS chrome elsewhere in
     the viewer where section labels live next to a colored bar. */
  padding-left: 8px;
  border-left: 3px solid var(--lcars-peach);
  line-height: 1.2;
}

/* EVIDENCE toggle: header sits inside a button so the whole row is
   clickable. Reset the button chrome so it reads as a header with a
   hint to its right, not a generic button. */
.lcars-correction-pattern__evidence-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.lcars-correction-pattern__evidence-toggle:focus-visible {
  outline: 2px solid var(--lcars-peach);
  outline-offset: 2px;
  border-radius: 2px;
}
.lcars-correction-pattern__evidence-toggle-hint {
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
}
.lcars-correction-pattern__evidence-toggle:hover .lcars-correction-pattern__evidence-toggle-hint {
  color: var(--lcars-peach);
}

/* Upgrade headline: the punchline. Sits above the target chip + path
   so the user reads "what changes and why" in one glance before any
   diagnosis prose or diff. Larger + brighter than rationale, which
   stays as supporting detail below. */
.lcars-correction-pattern__upgrade-headline {
  margin: 0 0 2px 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--lcars-text);
  max-width: 78ch;
}
.lcars-correction-pattern__instance-list,
.lcars-correction-pattern__upgrade-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-correction-pattern__instance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 10px;
  background: rgba(255, 204, 153, 0.03);
  border-left: 3px solid rgba(255, 204, 153, 0.53);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.55;
}
.lcars-correction-pattern__instance:hover {
  background: rgba(255, 204, 153, 0.06);
}
.lcars-correction-pattern__instance-context {
  margin: 0;
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-text) 90%, transparent);
}
.lcars-correction-pattern__instance-body {
  margin: 0;
  display: flex;
  gap: 8px;
}
.lcars-correction-pattern__instance-tag {
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lcars-peach);
  flex-shrink: 0;
  padding-top: 2px;
}
.lcars-correction-pattern__more {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--lcars-peach);
  font-family: var(--lcars-font-chrome);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.lcars-correction-pattern__upgrade {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid color-mix(in srgb, var(--lcars-text) 12%, transparent);
  border-radius: 6px;
}
.lcars-correction-pattern__upgrade-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lcars-correction-pattern__target {
  font-family: var(--lcars-font-chrome);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid currentColor;
}
.lcars-correction-pattern__target--global-claude-md  { color: var(--lcars-peach);       background: rgba(255, 153, 51, 0.10); }
.lcars-correction-pattern__target--project-claude-md { color: var(--lcars-sunflower);   background: rgba(255, 204, 102, 0.10); }
.lcars-correction-pattern__target--settings-hook     { color: var(--lcars-violet);      background: rgba(204, 153, 204, 0.10); }
.lcars-correction-pattern__target--skill             { color: var(--lcars-ice);         background: rgba(153, 204, 255, 0.10); }
.lcars-correction-pattern__target--prompt-snippet    { color: var(--lcars-butterscotch);background: rgba(255, 204, 153, 0.10); }
.lcars-correction-pattern__target-path {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--lcars-text) 90%, transparent);
}
.lcars-correction-pattern__rationale {
  margin: 0;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--lcars-text) 95%, transparent);
}
.lcars-correction-pattern__patch {
  margin: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--lcars-text);
  max-height: 240px;
  overflow: auto;
}
.lcars-correction-pattern__upgrade-actions {
  display: flex;
  gap: 8px;
}
.lcars-correction-pattern__btn {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}
.lcars-correction-pattern__btn--primary {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
}
.lcars-correction-pattern__btn--secondary {
  border-color: color-mix(in srgb, var(--lcars-peach) 60%, transparent);
  color: var(--lcars-peach);
}
.lcars-correction-pattern__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lcars-correction-pattern__empty {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 78%, transparent);
}
.lcars-correction-pattern__apply-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-correction-pattern__btn--ghost {
  border-color: color-mix(in srgb, var(--lcars-text) 30%, transparent);
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-correction-pattern__instance-pill {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}
.lcars-correction-pattern__instance-pill:hover {
  border-color: color-mix(in srgb, var(--lcars-peach) 50%, transparent);
}
.lcars-correction-pattern__instance-pill:focus-visible {
  border-color: color-mix(in srgb, var(--lcars-peach) 50%, transparent);
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-correction-pattern__applied {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lcars-peach) 20%, transparent);
  color: var(--lcars-peach);
}
.lcars-correction-pattern__applied-time {
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--lcars-peach) 80%, transparent);
}
.lcars-correction-pattern__confirm,
.lcars-correction-pattern__apply-error {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.lcars-correction-pattern__confirm-blurb {
  margin: 0;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--lcars-text) 88%, transparent);
}
.lcars-correction-pattern__confirm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--lcars-text) 80%, transparent);
}
.lcars-correction-pattern__confirm-textarea {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--lcars-text) 25%, transparent);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--lcars-text);
  resize: vertical;
}
.lcars-correction-pattern__confirm-actions {
  display: flex;
  gap: 8px;
}

/* -------------------------------------------------------------------------
 * Chat page surface — added in the chat-page ship.
 *
 * Layout: two-column grid inside the existing main content area. Left
 * column is a slim chat-list rail; right column is the conversation
 * panel (intent toggle, transcript, input bar). Keeps the visual
 * vocabulary aligned with the rest of the LCARS surface — no new
 * design tokens, just composed primitives.
 * ------------------------------------------------------------------------- */

.lcars-chat {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
}

.lcars-chat--probing,
.lcars-chat--unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lcars-chat__probe {
  font-family: var(--lcars-font-mono, monospace);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
}

.lcars-chat__empty {
  max-width: 560px;
  padding: 24px;
  background: color-mix(in srgb, var(--lcars-sunflower) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  border-radius: 8px;
}

.lcars-chat__empty h2 {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--lcars-sunflower);
}

.lcars-chat__empty p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.55;
}

.lcars-chat__empty pre {
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin: 6px 0;
}

/* --- Chat list rail --- */

.lcars-chat__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
}

.lcars-chat__new {
  background: var(--lcars-sunflower);
  color: #000;
  border: none;
  padding: 8px 10px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}

.lcars-chat__new:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 80%, white);
}

.lcars-chat__list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lcars-chat__list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid color-mix(in srgb, var(--lcars-text) 18%, transparent);
  color: var(--lcars-text);
  padding: 8px 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}

.lcars-chat__list-item:hover {
  border-color: color-mix(in srgb, var(--lcars-sunflower) 60%, transparent);
}

.lcars-chat__list-item--active {
  border-color: var(--lcars-sunflower);
  background: color-mix(in srgb, var(--lcars-sunflower) 12%, transparent);
}

.lcars-chat__list-intent {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--lcars-sunflower);
}

.lcars-chat__list-title {
  font-size: 12.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lcars-chat__clear {
  margin-top: auto;
  background: transparent;
  color: color-mix(in srgb, var(--lcars-peach) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 40%, transparent);
  padding: 6px 10px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 4px;
}

.lcars-chat__clear:hover {
  background: color-mix(in srgb, var(--lcars-peach) 15%, transparent);
}

/* --- Conversation panel --- */

.lcars-chat__panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-height: 0;
}

.lcars-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lcars-chat__intent {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px;
  border-radius: 4px;
}

.lcars-chat__intent-opt {
  padding: 6px 12px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 3px;
  color: color-mix(in srgb, var(--lcars-text) 70%, transparent);
}

.lcars-chat__intent-opt input {
  display: none;
}

.lcars-chat__intent-opt--active {
  background: var(--lcars-sunflower);
  color: #000;
}

.lcars-chat__transcript {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 8px;
}

.lcars-chat__seed {
  max-width: 640px;
  padding: 20px;
}

.lcars-chat__seed h2 {
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--lcars-sunflower);
}

.lcars-chat__seed p {
  font-size: 13px;
  line-height: 1.55;
}

.lcars-chat__seed-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lcars-chat__seed-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  color: var(--lcars-text);
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}

.lcars-chat__seed-button:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 10%, transparent);
}

.lcars-chat__seed-label {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--lcars-sunflower);
}

.lcars-chat__seed-q {
  font-size: 13px;
}

/* --- Messages --- */

.lcars-chat-message__wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lcars-chat-message {
  font-size: 14px;
  line-height: 1.55;
}

.lcars-chat-message--user {
  align-self: flex-end;
  max-width: 70%;
  background: color-mix(in srgb, var(--lcars-sunflower) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 40%, transparent);
  padding: 8px 12px;
  border-radius: 8px;
}

.lcars-chat-message__user-text {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.5;
}

.lcars-chat-message--assistant {
  display: block;
}

.lcars-chat-message__p {
  margin: 0.5em 0;
}

.lcars-chat-message__h1 {
  font-size: 18px;
  margin: 0.8em 0 0.4em;
}

.lcars-chat-message__h2 {
  font-size: 15.5px;
  margin: 0.8em 0 0.4em;
  color: var(--lcars-sunflower);
}

.lcars-chat-message__h3 {
  font-size: 14px;
  margin: 0.8em 0 0.4em;
}

.lcars-chat-message__ul {
  margin: 0.4em 0 0.4em 1.5em;
  padding: 0;
}

.lcars-chat-message__code {
  background: rgba(0, 0, 0, 0.45);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.lcars-chat-message__code:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}
.lcars-chat-message__user-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lcars-chat-message__caret {
  display: inline-block;
  margin-left: 2px;
  animation: lcars-chat-caret 1s steps(2) infinite;
  color: var(--lcars-sunflower);
}
@media (prefers-reduced-motion: reduce) {
  .lcars-chat-message__caret {
    animation: none;
    opacity: 0.7;
  }
}

@keyframes lcars-chat-caret {
  to {
    opacity: 0;
  }
}

.lcars-chat-message__error {
  font-size: 12.5px;
  color: var(--lcars-peach);
  font-family: var(--lcars-font-mono, monospace);
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 40%, transparent);
  border-radius: 4px;
}

/* --- Collapsible trust-artifact section (Caveats / Methodology / Risks) --- */

.lcars-chat-message__details {
  margin: 0.8em 0;
  border: 1px solid color-mix(in srgb, var(--lcars-ice) 25%, transparent);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
}

.lcars-chat-message__details[open] {
  background: rgba(0, 0, 0, 0.28);
}

.lcars-chat-message__details-summary {
  cursor: pointer;
  padding: 6px 10px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--lcars-ice);
  text-transform: uppercase;
  user-select: none;
  list-style: none;
}
.lcars-chat-message__details-summary:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
  border-radius: 2px;
}

.lcars-chat-message__details-summary::-webkit-details-marker {
  display: none;
}

.lcars-chat-message__details-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 120ms ease;
  color: color-mix(in srgb, var(--lcars-ice) 80%, transparent);
}

.lcars-chat-message__details[open] .lcars-chat-message__details-summary::before {
  transform: rotate(90deg);
}

.lcars-chat-message__details-summary:hover {
  color: var(--lcars-sunflower);
}

.lcars-chat-message__details-body {
  padding: 0 12px 8px;
  border-top: 1px solid color-mix(in srgb, var(--lcars-ice) 15%, transparent);
}

/* --- Follow-up chip group (`→ Question?` lines) --- */

.lcars-chat-message__followups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1em 0 0.4em;
}

.lcars-chat-message__followup {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: color-mix(in srgb, var(--lcars-ice) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-ice) 40%, transparent);
  color: var(--lcars-text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  padding: 5px 10px;
  border-radius: 14px;
  cursor: pointer;
  max-width: 100%;
}

.lcars-chat-message__followup:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lcars-sunflower) 14%, transparent);
  border-color: color-mix(in srgb, var(--lcars-sunflower) 55%, transparent);
}

.lcars-chat-message__followup:disabled {
  cursor: default;
  opacity: 0.6;
}

.lcars-chat-message__followup-arrow {
  color: var(--lcars-sunflower);
  font-weight: bold;
}

.lcars-chat-message__followup-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- Citation chip --- */

.lcars-chat-citation {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: color-mix(in srgb, var(--lcars-sunflower) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  color: var(--lcars-text);
  font-family: var(--lcars-font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  vertical-align: baseline;
}

.lcars-chat-citation:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 25%, transparent);
}

.lcars-chat-citation--unverified {
  border-color: color-mix(in srgb, var(--lcars-peach) 50%, transparent);
  background: color-mix(in srgb, var(--lcars-peach) 6%, transparent);
}

.lcars-chat-citation__prefix {
  color: var(--lcars-sunflower);
  font-weight: bold;
  font-size: 9px;
}

.lcars-chat-citation--unverified .lcars-chat-citation__prefix {
  color: var(--lcars-peach);
}

.lcars-chat-citation__value {
  font-size: 10.5px;
}

/* --- Agent trace strip --- */

.lcars-chat-trace {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid color-mix(in srgb, var(--lcars-ice) 30%, transparent);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
}

.lcars-chat-trace__summary {
  display: flex;
  gap: 12px;
  cursor: pointer;
  font-family: var(--lcars-font-mono, monospace);
  letter-spacing: 0.06em;
  user-select: none;
}
.lcars-chat-trace__summary:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
  border-radius: 2px;
}

.lcars-chat-trace__label {
  color: var(--lcars-ice);
  font-size: 10px;
}

.lcars-chat-trace__counts {
  color: color-mix(in srgb, var(--lcars-text) 78%, transparent);
  font-size: 12px;
}

.lcars-chat-trace__list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lcars-chat-trace__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
}

.lcars-chat-trace__glyph {
  flex-shrink: 0;
}

.lcars-chat-trace__code {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  color: color-mix(in srgb, var(--lcars-text) 88%, transparent);
  word-break: break-word;
}

.lcars-chat-trace__thinking {
  color: color-mix(in srgb, var(--lcars-text) 72%, transparent);
  font-size: 12px;
}

.lcars-chat-trace__item--error {
  border-left: 2px solid var(--lcars-peach);
  padding-left: 6px;
}
.lcars-chat-trace__item--error .lcars-chat-trace__code {
  color: var(--lcars-peach);
}

/* --- Input bar --- */

.lcars-chat__inputbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}

.lcars-chat__input {
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 40%, transparent);
  color: var(--lcars-text);
  border-radius: 4px;
  resize: vertical;
  min-height: 64px;
}

.lcars-chat__input:focus {
  outline: none;
  border-color: var(--lcars-sunflower);
}

.lcars-chat__send {
  background: var(--lcars-sunflower);
  color: #000;
  border: none;
  padding: 0 18px;
  font-family: var(--lcars-font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  min-width: 110px;
}

.lcars-chat__send:disabled {
  background: color-mix(in srgb, var(--lcars-sunflower) 25%, transparent);
  cursor: not-allowed;
}

/* --- Disclosure modal --- */

.lcars-chat-disclosure {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lcars-chat-disclosure__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.lcars-chat-disclosure__panel {
  position: relative;
  max-width: 580px;
  margin: 24px;
  background: var(--lcars-bg, #0c0a1a);
  border: 2px solid var(--lcars-sunflower);
  border-radius: 8px;
  padding: 20px 24px;
  outline: none;
}

.lcars-chat-disclosure__title {
  margin: 0 0 12px;
  color: var(--lcars-sunflower);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.lcars-chat-disclosure__body p,
.lcars-chat-disclosure__body ol {
  font-size: 13px;
  line-height: 1.55;
}

.lcars-chat-disclosure__body ol {
  margin: 0.6em 0 0.6em 1.4em;
  padding: 0;
}

.lcars-chat-disclosure__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.lcars-chat-disclosure__cancel,
.lcars-chat-disclosure__confirm {
  font-family: var(--lcars-font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  min-height: 36px;
  cursor: pointer;
  border-radius: 4px;
}

.lcars-chat-disclosure__cancel {
  background: transparent;
  color: var(--lcars-text);
  border: 1px solid color-mix(in srgb, var(--lcars-text) 35%, transparent);
}

.lcars-chat-disclosure__confirm {
  background: var(--lcars-sunflower);
  color: #000;
  border: none;
  font-weight: bold;
}

.lcars-chat-disclosure__cancel:focus-visible,
.lcars-chat-disclosure__confirm:focus-visible {
  outline: 2px solid var(--lcars-ice);
  outline-offset: 2px;
}

/* ============================================================================
 * Iter-14 — chrome backfill
 *
 * Five component class families were shipping without ANY CSS rules and
 * rendering with browser-default `<button>` / `<aside>` chrome on top of
 * the LCARS frame. Authored minimal LCARS-style rules here (tokens-only,
 * no hardcoded colors) to restore visual hierarchy + focus-visible
 * outlines + body-prose contrast. Not a full design pass — just enough
 * to fix the a11y/readability gaps the iter-14 review surfaced.
 * ============================================================================ */

/* --- MethodologyDisclosure ------------------------------------------------- */
.lcars-methodology {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 35%, transparent);
  border-left: 3px solid var(--lcars-butterscotch);
  border-radius: 4px;
  background: color-mix(in srgb, var(--lcars-butterscotch) 4%, transparent);
}
.lcars-methodology__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  cursor: pointer;
}
.lcars-methodology__toggle:hover {
  color: var(--lcars-sunflower);
}
.lcars-methodology__toggle:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
  border-radius: 2px;
}
.lcars-methodology__body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--lcars-butterscotch) 35%, transparent);
}
.lcars-methodology__lead {
  margin: 0 0 10px;
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lcars-sunflower);
  max-width: 72ch;
}
.lcars-methodology__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 72ch;
}
.lcars-methodology__item {
  padding: 6px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--lcars-butterscotch) 25%, transparent);
}
.lcars-methodology__item:last-child {
  border-bottom: 0;
}
.lcars-methodology__item-title {
  display: block;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  margin-bottom: 4px;
}
.lcars-methodology__item-body {
  display: block;
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--lcars-text) 92%, var(--lcars-bg-1));
}

/* --- ActionItemsBanner ----------------------------------------------------- */
.lcars-action-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--lcars-peach) 8%, var(--lcars-bg-1));
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 40%, transparent);
  border-left: 4px solid var(--lcars-peach);
  border-radius: 6px;
  margin: 12px 0;
}
.lcars-action-items__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.lcars-action-items__label {
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lcars-sunflower);
}
.lcars-action-items__label strong {
  color: var(--lcars-peach);
  font-weight: 700;
}
.lcars-action-items__dismiss {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 55%, transparent);
  color: var(--lcars-peach);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.lcars-action-items__dismiss:hover {
  background: color-mix(in srgb, var(--lcars-peach) 18%, transparent);
}
.lcars-action-items__dismiss:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
/* Action rows lead — vertical list, one full-width row per bucket so
   the destination cue can right-align. */
.lcars-action-items__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-action-items__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.lcars-action-items__link {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  color: var(--lcars-sunflower);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}
.lcars-action-items__link:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 12%, transparent);
}
.lcars-action-items__link:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-action-items__delta {
  font-family: var(--lcars-font-prose);
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg-1));
}
.lcars-action-items__dest {
  margin-left: auto;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}

/* "Worth a look" examples strip — supporting region below the rows. */
.lcars-action-items__examples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--lcars-peach) 22%, transparent);
}
.lcars-action-items__examples-label {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  font-weight: 700;
}
.lcars-action-items__examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.lcars-action-items__examples-link {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  color: var(--lcars-sunflower);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}
.lcars-action-items__examples-link:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 12%, transparent);
}
.lcars-action-items__examples-link:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}

/* --- DataUpdatedBanner ----------------------------------------------------- */
.lcars-data-updated-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--lcars-ice) 10%, var(--lcars-bg-1));
  border: 1px solid color-mix(in srgb, var(--lcars-ice) 40%, transparent);
  border-left: 4px solid var(--lcars-ice);
  border-radius: 6px;
  margin: 10px 0;
}
.lcars-data-updated-banner__tag {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--lcars-ice);
  color: var(--lcars-bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.lcars-data-updated-banner__message {
  flex: 1 1 200px;
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lcars-sunflower);
}
.lcars-data-updated-banner__detail {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-ice);
}
.lcars-data-updated-banner__btn {
  background: var(--lcars-ice);
  color: var(--lcars-bg);
  border: 0;
  border-radius: 14px;
  padding: 5px 14px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.lcars-data-updated-banner__btn:hover {
  background: var(--lcars-sunflower);
}
.lcars-data-updated-banner__btn:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-data-updated-banner__btn--ghost {
  background: transparent;
  color: var(--lcars-ice);
  border: 1px solid color-mix(in srgb, var(--lcars-ice) 55%, transparent);
  width: 26px;
  padding: 0;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lcars-data-updated-banner__btn--ghost:hover {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
  color: var(--lcars-sunflower);
}

/* --- CopyMarkdownButton ---------------------------------------------------- */
.lcars-copy-md-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 40%, transparent);
  color: var(--lcars-butterscotch);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  font-weight: 600;
  transition: background 80ms linear, color 80ms linear, border-color 80ms linear;
}
.lcars-copy-md-btn:hover {
  background: color-mix(in srgb, var(--lcars-butterscotch) 12%, transparent);
  color: var(--lcars-sunflower);
  border-color: var(--lcars-sunflower);
}
.lcars-copy-md-btn:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-copy-md-btn[data-state='copied'] {
  background: color-mix(in srgb, var(--lcars-ice) 18%, transparent);
  color: var(--lcars-ice);
  border-color: var(--lcars-ice);
}
.lcars-copy-md-btn[data-state='failed'] {
  background: color-mix(in srgb, var(--lcars-fail) 14%, transparent);
  color: var(--lcars-fail);
  border-color: var(--lcars-fail);
}

/* --- empty-state CTA + muted message variant ------------------------------- */
.lcars-empty-state__cta {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  border: 0;
  border-radius: 16px;
  padding: 8px 22px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  margin-top: 8px;
  align-self: center;
}
.lcars-empty-state__cta:hover {
  background: var(--lcars-sunflower);
}
.lcars-empty-state__cta:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-empty-state__message--muted {
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg));
  font-size: 12px;
  line-height: 1.5;
  max-width: 72ch;
}

/* ============================================================================
 * Iter-15 / F71 — outcome-substrate mode chrome backfill
 *
 * Seven major viewer surfaces (TrendsMode / EffectivenessMode / InsightsMode /
 * DecisionsMode / TrustMode / ExportMode + OutcomeSparkline) had ZERO CSS
 * rules in styles.css and were rendering with browser-default chrome on top
 * of the LCARS frame — 3430+ LOC of components without paint discipline.
 *
 * Authored shared mode-page rules first (header / lead / section / panel
 * / empty / caption / card-list / card / chip), then per-mode specifics.
 * Tokens-only, no hardcoded colors, focus-visible outlines on every
 * interactive surface, body-prose ≥12px / line-height 1.5, LCARS chrome
 * carve-out (≥9px ALL-CAPS + ≥0.14em tracking + uppercase).
 *
 * Each mode uses a distinct left-edge accent color so the surface
 * communicates which view you're on at a glance:
 *   Trends → ice          Effectiveness → violet     Insights → sunflower
 *   Decisions → peach     Trust → butterscotch        Export → sunflower-muted
 * ============================================================================ */

/* --- Shared mode-page base ------------------------------------------------- */
.lcars-trends,
.lcars-effectiveness,
.lcars-insights,
.lcars-decisions,
.lcars-trust,
.lcars-export {
  padding: 16px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--lcars-bg);
  color: var(--lcars-text);
  font-family: var(--lcars-font-prose);
  min-height: 0;
}
.lcars-trends__header,
.lcars-effectiveness__header,
.lcars-insights__header,
.lcars-decisions__header,
.lcars-trust__header,
.lcars-export__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 35%, transparent);
}
.lcars-trends__title,
.lcars-effectiveness__title,
.lcars-insights__title,
.lcars-decisions__title,
.lcars-trust__title,
.lcars-export__title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lcars-sunflower);
}
.lcars-trends__lead,
.lcars-effectiveness__lead,
.lcars-insights__lead,
.lcars-decisions__lead,
.lcars-trust__lead,
.lcars-export__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 88%, var(--lcars-bg));
  max-width: 72ch;
}
.lcars-trends__section,
.lcars-insights__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--lcars-bg-1);
  border-radius: 6px;
  border-left: 4px solid var(--lcars-butterscotch);
}
.lcars-trends__section-title,
.lcars-insights__section-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}
.lcars-insights__section-blurb,
.lcars-insights__section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-insights__section-blurb {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
}
.lcars-trends__empty,
.lcars-effectiveness__empty,
.lcars-insights__empty,
.lcars-decisions__empty,
.lcars-trust__empty,
.lcars-export__empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg));
  background: color-mix(in srgb, var(--lcars-dim) 14%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--lcars-dim) 55%, transparent);
  border-radius: 0 4px 4px 0;
}
.lcars-trends__caption {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-1));
  max-width: 72ch;
}

/* --- TrendsMode (ice accent — trajectories + archetypes + skill curves) --- */
.lcars-trends {
  border-left: 4px solid var(--lcars-ice);
}
.lcars-trends__section {
  border-left-color: var(--lcars-ice);
}
.lcars-trends__section-title {
  color: var(--lcars-ice);
}
.lcars-trends__project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-trends__project-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--lcars-ice) 4%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--lcars-ice) 55%, transparent);
}
.lcars-trends__project-name {
  font-family: var(--lcars-font-mono);
  font-size: 12.5px;
  color: var(--lcars-sunflower);
  font-weight: 600;
}
.lcars-trends__project-meta {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}
.lcars-trends__centroid-list,
.lcars-trends__archetype-sessions,
.lcars-trends__session-list,
.lcars-trends__skill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-trends__centroid-id {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-ice);
}
.lcars-trends__centroid-count {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}
.lcars-trends__session-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-ice);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lcars-trends__session-link:hover {
  color: var(--lcars-sunflower);
}
.lcars-trends__session-link:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-trends__matrix {
  display: grid;
  gap: 2px;
  background: color-mix(in srgb, var(--lcars-butterscotch) 8%, transparent);
  padding: 4px;
  border-radius: 4px;
  overflow-x: auto;
}
.lcars-trends__matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  background: var(--lcars-bg-1);
  min-height: 28px;
  min-width: 28px;
}
.lcars-trends__bar-glyph {
  display: inline-block;
  width: 36px;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--lcars-ice) 55%, transparent);
}
.lcars-trends__sig-mark {
  margin-left: 4px;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  color: var(--lcars-pass);
}
.lcars-trends__skill-group-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-trends__skill-group-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-ice);
}
.lcars-trends__skill-group-blurb {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 78%, var(--lcars-bg-1));
}
.lcars-trends__skill-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--lcars-ice) 4%, transparent);
}
.lcars-trends__skill-label {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
}
.lcars-trends__skill-meta {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 80%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}

/* --- EffectivenessMode (violet accent — trajectory + EWMA + Wilson CI) --- */
.lcars-effectiveness {
  border-left: 4px solid var(--lcars-violet);
}
.lcars-effectiveness__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--lcars-bg-1);
  border-radius: 6px;
  border-left: 4px solid var(--lcars-violet);
}
.lcars-effectiveness__panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.lcars-effectiveness__panel-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-violet);
}
.lcars-effectiveness__readout {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 85%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}
.lcars-effectiveness__verdict {
  margin: 0;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 4px;
  background: color-mix(in srgb, var(--lcars-violet) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--lcars-violet) 55%, transparent);
}
.lcars-effectiveness__verdict--up {
  border-left-color: var(--lcars-pass);
  background: color-mix(in srgb, var(--lcars-pass) 8%, transparent);
}
.lcars-effectiveness__verdict--down {
  border-left-color: var(--lcars-fail);
  background: color-mix(in srgb, var(--lcars-fail) 8%, transparent);
}
.lcars-effectiveness__verdict--flat {
  border-left-color: var(--lcars-butterscotch);
  background: color-mix(in srgb, var(--lcars-butterscotch) 8%, transparent);
}
.lcars-effectiveness__commit-ticks {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-effectiveness__commit-tick {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 78%, var(--lcars-bg-1));
  line-height: 1.4;
}
.lcars-effectiveness__commit-tick code {
  background: color-mix(in srgb, var(--lcars-violet) 14%, transparent);
  color: var(--lcars-violet);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* --- InsightsMode (sunflower accent — insight cards with ack/dismiss) ----- */
.lcars-insights {
  border-left: 4px solid var(--lcars-sunflower);
}
.lcars-insights__section {
  border-left-color: var(--lcars-sunflower);
}
.lcars-insights__section-title {
  color: var(--lcars-sunflower);
}
.lcars-insights__card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lcars-insights__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--lcars-bg-1);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 35%, transparent);
  border-left: 3px solid var(--lcars-sunflower);
  border-radius: 4px;
}
.lcars-insights__card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.lcars-insights__card-tag {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--lcars-sunflower);
  color: var(--lcars-bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.lcars-insights__card-title {
  margin: 0;
  font-family: var(--lcars-font-prose);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lcars-sunflower);
  flex: 1 1 0;
  min-width: 0;
}
.lcars-insights__card-meta {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 78%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}
.lcars-insights__chip {
  display: inline-block;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lcars-butterscotch) 18%, transparent);
  color: var(--lcars-butterscotch);
  border: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 50%, transparent);
}
.lcars-insights__card-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}
.lcars-insights__card-dl-row {
  display: contents;
}
.lcars-insights__card-dl-row > dt {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  font-weight: 700;
  padding-top: 2px;
}
.lcars-insights__card-dl-row > dd {
  margin: 0;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.lcars-insights__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lcars-insights__ack-pill,
.lcars-insights__install-btn,
.lcars-insights__dismiss-btn,
.lcars-insights__restore-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  color: var(--lcars-sunflower);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 80ms linear, color 80ms linear, border-color 80ms linear;
}
.lcars-insights__ack-pill:hover,
.lcars-insights__install-btn:hover,
.lcars-insights__restore-btn:hover {
  background: color-mix(in srgb, var(--lcars-sunflower) 18%, transparent);
}
.lcars-insights__dismiss-btn {
  border-color: color-mix(in srgb, var(--lcars-dim) 60%, transparent);
  color: var(--lcars-dim);
}
.lcars-insights__dismiss-btn:hover {
  background: color-mix(in srgb, var(--lcars-dim) 18%, transparent);
  color: var(--lcars-text);
}
.lcars-insights__ack-pill:focus-visible,
.lcars-insights__install-btn:focus-visible,
.lcars-insights__dismiss-btn:focus-visible,
.lcars-insights__restore-btn:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-insights__acked,
.lcars-insights__dismissed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, var(--lcars-dim) 55%, transparent);
  background: color-mix(in srgb, var(--lcars-dim) 8%, transparent);
  border-radius: 0 4px 4px 0;
}
.lcars-insights__acked-summary,
.lcars-insights__dismissed-summary {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-dim);
  font-weight: 700;
  cursor: pointer;
}
.lcars-insights__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lcars-insights__card-term {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 88%, var(--lcars-bg-1));
}
.lcars-insights__evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lcars-insights__evidence-pill {
  background: color-mix(in srgb, var(--lcars-butterscotch) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 50%, transparent);
  color: var(--lcars-sunflower);
  border-radius: 10px;
  padding: 2px 8px;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
}
.lcars-insights__card-footnote {
  font-family: var(--lcars-font-prose);
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-1));
}

/* --- DecisionsMode (peach accent — decision table + composite chips) ------- */
.lcars-decisions {
  border-left: 4px solid var(--lcars-peach);
}
.lcars-decisions__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--lcars-bg-1);
  border-left: 4px solid var(--lcars-peach);
  border-radius: 0 6px 6px 0;
}
.lcars-decisions__cta-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 88%, var(--lcars-bg-1));
}
.lcars-decisions__cta-stub {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-1));
  background: color-mix(in srgb, var(--lcars-butterscotch) 8%, transparent);
  border-radius: 4px;
}
.lcars-decisions__cta-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lcars-decisions__cta-batch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lcars-decisions__cta-batch-label {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}
.lcars-decisions__cta-btn {
  background: var(--lcars-peach);
  color: var(--lcars-bg);
  border: 0;
  border-radius: 14px;
  padding: 6px 16px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lcars-decisions__cta-btn:hover:not(:disabled) {
  background: var(--lcars-sunflower);
}
.lcars-decisions__cta-btn:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-decisions__cta-error {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lcars-fail);
  background: color-mix(in srgb, var(--lcars-fail) 10%, transparent);
  border-left: 3px solid var(--lcars-fail);
  border-radius: 0 4px 4px 0;
}
.lcars-decisions__cta-status {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lcars-ice);
}
.lcars-decisions__bucket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--lcars-bg-1);
  border-left: 4px solid var(--lcars-peach);
  border-radius: 0 6px 6px 0;
}
.lcars-decisions__bucket-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.lcars-decisions__bucket-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-peach);
  font-weight: 700;
}
.lcars-decisions__bucket-count {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}
.lcars-decisions__rate {
  font-family: var(--lcars-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
}
.lcars-decisions__ci {
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg-1));
}
.lcars-decisions__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
}
.lcars-decisions__table th,
.lcars-decisions__table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--lcars-butterscotch) 25%, transparent);
  vertical-align: baseline;
}
.lcars-decisions__table th {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}
.lcars-decisions__phrase {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
}
.lcars-decisions__context {
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
}
.lcars-decisions__session {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
}
.lcars-decisions__session-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-ice);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lcars-decisions__session-link:hover {
  color: var(--lcars-sunflower);
}
.lcars-decisions__session-link:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-decisions__score {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
}

/* --- TrustMode (butterscotch accent — 2x2 grid with Wilson CIs) ----------- */
.lcars-trust {
  border-left: 4px solid var(--lcars-butterscotch);
}
.lcars-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .lcars-trust__grid {
    grid-template-columns: 1fr;
  }
}
.lcars-trust__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--lcars-bg-1);
  border-left: 4px solid var(--lcars-butterscotch);
  border-radius: 0 6px 6px 0;
}
.lcars-trust__copy-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0;
}
.lcars-trust__cell-mark {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}
.lcars-trust__rate {
  font-family: var(--lcars-font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
}
.lcars-trust__ci {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 78%, var(--lcars-bg-1));
}

/* --- ExportMode (sunflower-muted accent — kind checklist + filters) ------- */
.lcars-export {
  border-left: 4px solid var(--lcars-butterscotch);
}
.lcars-export__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcars-export__kind {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  background: var(--lcars-bg-1);
  border-left: 3px solid var(--lcars-butterscotch);
  border-radius: 0 4px 4px 0;
}
.lcars-export__kind-label {
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-sunflower);
}
.lcars-export__kind-count {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 82%, var(--lcars-bg-1));
  font-variant-numeric: tabular-nums;
}
.lcars-export__kind-blurb {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 78%, var(--lcars-bg-1));
}
.lcars-export__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--lcars-bg-1);
  border-radius: 4px;
}
.lcars-export__filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  cursor: pointer;
}
.lcars-export__filter input {
  accent-color: var(--lcars-butterscotch);
}
.lcars-export__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
}
.lcars-export__btn {
  background: var(--lcars-butterscotch);
  color: var(--lcars-bg);
  border: 0;
  border-radius: 16px;
  padding: 8px 18px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lcars-export__btn:hover:not(:disabled) {
  background: var(--lcars-sunflower);
}
.lcars-export__btn:focus-visible {
  outline: 2px solid var(--lcars-sunflower);
  outline-offset: 2px;
}
.lcars-export__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lcars-export__hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 75%, var(--lcars-bg));
}
.lcars-export__result {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lcars-pass);
  background: color-mix(in srgb, var(--lcars-pass) 10%, transparent);
  border-left: 3px solid var(--lcars-pass);
  border-radius: 0 4px 4px 0;
}
.lcars-export__error {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lcars-fail);
  background: color-mix(in srgb, var(--lcars-fail) 10%, transparent);
  border-left: 3px solid var(--lcars-fail);
  border-radius: 0 4px 4px 0;
}
.lcars-export__existing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-export__section-title {
  margin: 0;
  font-family: var(--lcars-font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}
.lcars-export__entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-export__entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--lcars-butterscotch) 4%, transparent);
  border-radius: 4px;
}
.lcars-export__entry-kind {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  font-weight: 700;
}
.lcars-export__entry-path {
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 80%, var(--lcars-bg-1));
  word-break: break-all;
}
.lcars-export__entry-title {
  font-family: var(--lcars-font-prose);
  font-size: 12.5px;
  color: var(--lcars-sunflower);
}

/* --- OutcomeSparkline (used inside EffectivenessMode + others) ------------- */
.lcars-outcome-sparkline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-outcome-sparkline--empty {
  padding: 12px 14px;
  font-family: var(--lcars-font-chrome);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg));
  background: color-mix(in srgb, var(--lcars-dim) 14%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--lcars-dim) 55%, transparent);
  border-radius: 0 4px 4px 0;
}
.lcars-outcome-sparkline__label {
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
}
.lcars-outcome-sparkline__chart {
  position: relative;
  width: 100%;
}
.lcars-outcome-sparkline svg {
  display: block;
  width: 100%;
  height: auto;
}
.lcars-outcome-sparkline__baseline {
  stroke: color-mix(in srgb, var(--lcars-butterscotch) 35%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
}
.lcars-outcome-sparkline__ribbon {
  fill: color-mix(in srgb, var(--lcars-violet) 22%, transparent);
}
.lcars-outcome-sparkline__raw {
  stroke: color-mix(in srgb, var(--lcars-sunflower) 75%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lcars-outcome-sparkline__ewma {
  stroke: var(--lcars-violet);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.lcars-outcome-sparkline__hit {
  fill: transparent;
  pointer-events: all;
  cursor: crosshair;
}
.lcars-outcome-sparkline__tooltip {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--lcars-bg);
  border: 1px solid var(--lcars-violet);
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 20;
  pointer-events: none;
  min-width: 160px;
}
.lcars-outcome-sparkline__tooltip-head {
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  color: var(--lcars-sunflower);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--lcars-divider);
  white-space: nowrap;
}
.lcars-outcome-sparkline__tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--lcars-font-mono);
  font-size: 12px;
  line-height: 1.4;
}
.lcars-outcome-sparkline__tooltip-label {
  font-family: var(--lcars-font-chrome);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lcars-butterscotch);
  font-weight: 700;
}
.lcars-outcome-sparkline__tooltip-value {
  color: var(--lcars-sunflower);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lcars-outcome-sparkline__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--lcars-butterscotch) 85%, var(--lcars-bg-1));
  letter-spacing: 0.04em;
}

/* --- DECISIONS mode (PR2 redesign) -------------------------------------- */
.lcars-decisions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 20px 48px;
  max-width: 920px;
  margin: 0 auto;
  font-family: var(--lcars-font-prose);
  color: var(--lcars-text);
}
.lcars-decisions__title {
  font-family: var(--lcars-font-chrome);
  font-size: 26px;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
  color: var(--lcars-peach);
}
.lcars-decisions__lead {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--lcars-text) 85%, var(--lcars-bg-1));
  margin: 0 0 8px;
  max-width: 68ch;
}
.lcars-decisions__method {
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg-1));
}
.lcars-decisions__method summary {
  cursor: pointer;
  color: var(--lcars-butterscotch);
  font-family: var(--lcars-font-chrome);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lcars-decisions__method p {
  margin: 8px 0 0;
  line-height: 1.55;
  max-width: 66ch;
}

/* MINE call-to-action */
.lcars-decisions__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--lcars-peach) 8%, var(--lcars-bg-1));
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 40%, transparent);
  border-left: 4px solid var(--lcars-peach);
  border-radius: 6px;
}
.lcars-decisions__cta-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.lcars-decisions__cta-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lcars-decisions__cta-batch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lcars-butterscotch);
}
.lcars-decisions__cta-batch select {
  background: var(--lcars-bg-2);
  color: var(--lcars-text);
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 50%, transparent);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: var(--lcars-font-mono);
}
.lcars-decisions__cta-btn {
  font-family: var(--lcars-font-chrome);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #000;
  background: var(--lcars-peach);
  border: none;
  border-radius: 14px;
  padding: 6px 16px;
  cursor: pointer;
}
.lcars-decisions__cta-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.lcars-decisions__cta-status {
  margin: 0;
  font-size: 12px;
  font-family: var(--lcars-font-mono);
  color: var(--lcars-ice);
}
.lcars-decisions__cta-error {
  margin: 0;
  font-size: 12px;
  font-family: var(--lcars-font-mono);
  color: var(--lcars-peach);
  white-space: pre-wrap;
}
.lcars-decisions__reload {
  background: transparent;
  border: 1px solid var(--lcars-ice);
  color: var(--lcars-ice);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  cursor: pointer;
}

/* Kind buckets + recurring + unclassified sections */
.lcars-decisions__bucket-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
  border-bottom: 1px solid var(--lcars-divider);
  padding-bottom: 6px;
}
.lcars-decisions__bucket-title {
  font-family: var(--lcars-font-chrome);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--lcars-sunflower);
  margin: 0;
}
.lcars-decisions__bucket-count {
  font-size: 11px;
  font-family: var(--lcars-font-mono);
  color: color-mix(in srgb, var(--lcars-text) 65%, var(--lcars-bg-1));
}
.lcars-decisions__rate {
  margin-left: auto;
  font-size: 12px;
  font-family: var(--lcars-font-mono);
  color: var(--lcars-ice);
}
.lcars-decisions__rate--hidden {
  color: color-mix(in srgb, var(--lcars-text) 55%, var(--lcars-bg-1));
}
.lcars-decisions__ci {
  color: color-mix(in srgb, var(--lcars-text) 55%, var(--lcars-bg-1));
}

.lcars-decisions__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcars-decisions__row {
  background: var(--lcars-bg-1);
  border: 1px solid var(--lcars-divider);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcars-decisions__row--pending {
  background: transparent;
  border-style: dashed;
}
.lcars-decisions__row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.lcars-decisions__distilled {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lcars-text);
}
.lcars-decisions__context {
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lcars-text) 80%, var(--lcars-bg-1));
}
.lcars-decisions__choice {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  font-family: var(--lcars-font-mono);
}
.lcars-decisions__chose {
  color: var(--lcars-ice);
}
.lcars-decisions__over {
  color: color-mix(in srgb, var(--lcars-text) 60%, var(--lcars-bg-1));
}
.lcars-decisions__rationale {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  color: color-mix(in srgb, var(--lcars-text) 78%, var(--lcars-bg-1));
}
.lcars-decisions__row-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}
.lcars-decisions__confidence {
  font-size: 11px;
  font-family: var(--lcars-font-mono);
  color: color-mix(in srgb, var(--lcars-text) 60%, var(--lcars-bg-1));
}
.lcars-decisions__session-link {
  background: transparent;
  border: none;
  color: var(--lcars-butterscotch);
  font-family: var(--lcars-font-mono);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.lcars-decisions__session-link:hover {
  text-decoration: underline;
}

/* Outcome chip — LCARS palette (no invented green/red): ice=good,
   peach=bad, butterscotch=neutral, dim=none). */
.lcars-decisions__score {
  font-size: 11px;
  font-family: var(--lcars-font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}
.lcars-decisions__score--good {
  color: var(--lcars-ice);
}
.lcars-decisions__score--bad {
  color: var(--lcars-peach);
}
.lcars-decisions__score--neutral {
  color: var(--lcars-butterscotch-muted);
}
.lcars-decisions__score--none {
  color: color-mix(in srgb, var(--lcars-text) 45%, var(--lcars-bg-1));
}

.lcars-decisions__recurring-lead {
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg-1));
  margin: 2px 0 8px;
}
.lcars-decisions__show-all {
  margin-top: 8px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-sunflower) 45%, transparent);
  color: var(--lcars-sunflower);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.lcars-decisions__legend {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lcars-text) 65%, var(--lcars-bg-1));
}
.lcars-decisions__clear {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 70%, var(--lcars-bg-1));
}
.lcars-decisions__clear-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lcars-peach) 45%, transparent);
  color: var(--lcars-peach);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
}
.lcars-decisions__clear-btn:hover {
  background: color-mix(in srgb, var(--lcars-peach) 12%, transparent);
}
.lcars-decisions__clear-confirm {
  font-size: 12px;
  color: color-mix(in srgb, var(--lcars-text) 80%, var(--lcars-bg-1));
}