/* kerai — visual tokens follow DESIGN.md (Anthropic warm parchment system).
   Step 2 of the GUI roadmap: token migration. Borders are kept here but made
   barely-visible (Border Cream) so the next step (borderless / hover-reveal
   delineation) is a small follow-up rather than a rewrite.

   Theme model:
   - :root carries light tokens (Parchment).
   - :root[data-theme="dark"] carries dark tokens (Deep Dark warm chapter).
   - Without an explicit data-theme, system prefers-color-scheme decides.
   The toggle UI lives in index.html and persists choice in localStorage. */

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

:root {
  color-scheme: light dark;
  /* Surfaces — light theme is a warm sepia manuscript, intentionally
     darker and more amber than DESIGN.md's literal Parchment so the page
     feels comfortable for extended reading. The undertone shifts from
     yellow-green toward yellow-amber. Borders/sand/cards step in
     proportional luminance from the canvas. */
  --bg: #efe8d3;               /* Warm Manuscript — page canvas */
  --bg-card: #f6f0db;          /* Aged Ivory — elevated containers */
  --bg-pure: #ffffff;
  --bg-sand: #e0d8be;          /* Warm Sand — button surfaces, chips */
  --bg-dark: #141413;          /* Deep Dark — dark chapters */
  --bg-dark-surface: #30302e;  /* Dark Surface — dark cards */

  /* Text */
  --text: #141413;             /* Anthropic Near Black — primary */
  --text-emph: #3d3d3a;        /* Dark Warm — emphasized */
  --text-dim: #5e5d59;         /* Olive Gray — secondary */
  --text-muted: #87867f;       /* Stone Gray — tertiary, footnotes */
  --text-on-dark: #b0aea5;     /* Warm Silver — text on dark */
  --text-on-dark-strong: #faf9f5;

  /* Borders & ring shadows — proportional to the warmer canvas */
  --border: #e7e0c8;           /* gentle warm cream border */
  --border-warm: #ddd5b9;      /* section dividers */
  --border-hover: #c8bfa1;     /* on hover */
  --border-dark: #30302e;      /* dark surface borders */
  --ring-warm: #c8bfa1;
  --ring-deep: #b3a988;

  /* Brand & semantics */
  --accent: #c96442;           /* Terracotta Brand — primary CTA only */
  --accent-light: #d97757;     /* Coral Accent — secondary emphasis */
  --accent-dim: rgba(201, 100, 66, 0.18);
  --error: #b53333;            /* Error Crimson — warm */
  --error-tint: rgba(181, 51, 51, 0.07);
  --focus: #3898ec;            /* Focus Blue — only cool color, accessibility */
  --warn: #a86d2c;             /* warm amber for stale/affected states */
  --warn-tint: rgba(168, 109, 44, 0.10);
  --success: #5e7048;          /* warm muted olive-green for proven */

  /* Typography */
  --font-serif: "Anthropic Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "Anthropic Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Backwards-compatible aliases used elsewhere in the file */
  --font: var(--font-sans);
  --mono: var(--font-mono);

  /* Geometry */
  --radius: 8px;
  --radius-input: 12px;
  --radius-feature: 16px;
  --shadow-ring: 0 0 0 1px var(--ring-warm);
  --shadow-ring-deep: 0 0 0 1px var(--ring-deep);
  --shadow-whisper: 0 4px 24px rgba(0, 0, 0, 0.05);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
}

/* ── Info Bar ────────────────────────────────────────── */

#infobar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  padding: 10px 24px;
  font-size: 13px;
  user-select: none;
  transition: transform 0.2s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Subtle border appears once the user scrolls — keeps the resting page clean */
#infobar.scrolled {
  border-bottom-color: var(--border);
}

#infobar.hidden-bar {
  transform: translateY(-100%);
}

/* ── Hamburger button + slide-over panel ─────────────────────────────── */

.hamburger {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: 18px;
  line-height: 1;
  transition: color 0.1s, background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:hover {
  color: var(--text);
  background: var(--bg-sand);
}
.hamburger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.30);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 88vw;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-whisper);
  z-index: 95;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  overflow-y: auto;
  padding: 20px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.slide-menu.open {
  transform: translateX(0);
}

.slide-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.slide-menu-brand {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.10;
  letter-spacing: -0.01em;
}
.slide-menu-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
  transition: color 0.1s, background 0.1s;
}
.slide-menu-close:hover {
  color: var(--text);
  background: var(--bg-sand);
}

.menu-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.menu-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-emph);
  font-size: 15px;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.menu-tab:hover {
  background: var(--bg-sand);
  color: var(--text);
}
.menu-tab .tab-glyph {
  width: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.menu-tab.active {
  color: var(--accent);
}
.menu-tab.active .tab-glyph {
  color: var(--accent);
}

/* Surface panels — exactly one is .active at a time. The container is
   a bounded, scrollable pane so a long notebook list doesn't push the
   View / Tools sections off-screen or visually overlap them. */
.menu-surfaces {
  display: flex;
  flex-direction: column;
  min-height: 64px;
  max-height: 45vh;
  overflow-y: auto;
  flex-shrink: 0;
}
.menu-surface {
  display: none;
  flex-direction: column;
  gap: 4px;
}
.menu-surface.active {
  display: flex;
}
.menu-surface-empty {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  padding: 12px 10px;
  line-height: 1.5;
}
/* Workspace items rendered into the surface inherit the .tree-item style */
.menu-surface .tree-item { font-size: 14px; padding: 7px 10px; }
.menu-surface .tree-group { padding-left: 10px; }

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius);
}
.menu-row-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-emph);
}
.menu-row-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Segmented control — 3-way pill (used for Theme: Light / System / Dark).
   The chosen option lifts onto the card surface; others sit on the sand
   track. Single chromatic accent reserved for the page; the segment
   itself stays neutral so it doesn't compete with cell content. */
.seg {
  display: inline-flex;
  background: var(--bg-sand);
  border-radius: 24px;
  padding: 2px;
  box-shadow: var(--shadow-ring);
  flex-shrink: 0;
}
.seg-opt {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.seg-opt:hover:not([aria-checked="true"]) {
  color: var(--text);
}
.seg-opt[aria-checked="true"] {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-ring);
}
.seg-opt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Subdued switch — pill toggle, terracotta when on.
   Knob color is themed via --switch-knob so it pops in either mode. */
:root { --switch-knob: #ffffff; }
:root[data-theme="dark"] { --switch-knob: #b0aea5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --switch-knob: #b0aea5; }
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--bg-sand);
  border-radius: 24px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: var(--shadow-ring);
  border: none;
  flex-shrink: 0;
}
.switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: var(--shadow-ring);
  transition: transform 0.15s, background 0.15s;
}
.switch:checked {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.switch:checked::before {
  transform: translateX(16px);
  background: #faf9f5;  /* Ivory always — high contrast on terracotta */
}
.switch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.path {
  color: var(--text-dim);
}

.path-segment {
  color: var(--text-dim);
  transition: color 0.1s;
}

.path-segment:hover {
  color: var(--accent);
}

.path-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

.path-current {
  color: var(--text);
  font-weight: 500;
}

/* Caret on the current segment — opens the curate popover.
   Resting state is subtle (low-contrast glyph); hover/open bumps it
   into the foreground. Touch target is bigger than the visible
   chevron via padding. */
.path-menu-caret {
  margin-left: 6px;
  padding: 2px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.path-menu-caret:hover,
.path-menu-caret:focus-visible {
  color: var(--text);
  background: var(--bg-sand);
  border-color: var(--border);
  outline: none;
}

/* Floating menu opened from the current-segment caret. Small,
   editorial, appears just below the breadcrumb. */
.curate-popover {
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ring-deep);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 120;
  font-size: 13px;
}
.curate-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}
.curate-item:hover,
.curate-item:focus-visible {
  background: var(--bg-sand);
  outline: none;
}
.curate-label {
  font-weight: 500;
}
.curate-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Tree Dropdown ───────────────────────────────────── */

.tree {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.5rem 0 1rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 16px;
}

.tree.hidden {
  display: none;
}

.tree-item {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.1s;
  /* Labels can be full URLs or text previews — clip to the sidebar
     width so long rows don't spill into the surrounding page layout.
     Full text stays accessible via the `title` attribute on hover. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tree-item:hover {
  background: var(--bg-sand);
  color: var(--text);
}

.tree-item.active {
  color: var(--accent);
}

.tree-indent {
  display: inline-block;
  width: 16px;
}

.tree-group {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 8px 3px;
}

/* ── Notebook ────────────────────────────────────────── */

#notebook {
  flex: 1;
  overflow-y: auto;
  padding: 0 1rem;
  width: 100%;
}

/* ── Cards ───────────────────────────────────────────── */

/* Default: borderless document feel.
   Spacing + typography carry delineation. Hover reveals a soft ring.
   Holding Shift while hovering reveals strong structure (border + card lift)
   for navigation. The persistent "Show structure" toggle (in the slide-over
   menu) sets [data-show-structure="true"] on :root to keep the borders
   visible at rest for users who prefer them. */
/* Notebook heading block — label as the H1, slug as a muted caption.
   Sits above the welcome card (if shown) and the cell stack. */
.notebook-head {
  margin: 8px 18px 20px;
}
.notebook-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
  word-break: break-word;
}
.notebook-slug {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  user-select: all;
}

.card {
  position: relative;
  padding: 14px 18px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
  box-shadow: var(--shadow-ring);
}

/* Shift+hover reveals strong structure: lifts the card onto Ivory and
   shows the Border Cream halo. Pure visual hint — doesn't change layout. */
:root.show-structure-modifier .card:hover {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-ring-deep);
}

/* Persistent structure (toggle) — borders always visible at rest. */
:root[data-show-structure="true"] .card {
  background: var(--bg-card);
  border-color: var(--border);
}
:root[data-show-structure="true"] .card:hover {
  border-color: var(--border-hover);
}

.card:hover .card-controls {
  opacity: 1;
}

/* Welcome card */

.card-welcome {
  position: relative;
  padding: 20px 24px;
  margin-top: 0.75rem;
  margin-bottom: 16px;
}

.card-welcome.collapsed .card-welcome-body {
  display: none;
}

.card-welcome-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-welcome-toggle {
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s, opacity 0.15s, box-shadow 0.15s;
  line-height: 1;
  opacity: 0;
}

.card-welcome-toggle:hover {
  color: var(--text);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-ring);
}

.card-welcome-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  line-height: 1.2;
}

.card-welcome-dismiss {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s, opacity 0.15s, box-shadow 0.15s;
  line-height: 1;
  opacity: 0;
}

.card-welcome:hover .card-welcome-toggle,
.card-welcome:hover .card-welcome-dismiss {
  opacity: 1;
}

/* Add card buttons (top of first card, bottom of every card) */

.card-add {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s, opacity 0.15s, box-shadow 0.15s;
  line-height: 1;
  opacity: 0;
  z-index: 2;
}

.card-add:hover {
  color: var(--text);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-ring);
}

.card-add-top {
  top: -1px;
  transform: translateX(-50%) translateY(-50%);
}

.card-add-bottom {
  bottom: -1px;
  transform: translateX(-50%) translateY(50%);
}

.card:hover .card-add {
  opacity: 1;
}

.card-welcome-dismiss:hover {
  color: var(--text);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-ring);
}

.card-welcome-body {
  margin-top: 12px;
  color: var(--text-emph);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
}

/* Card content types */

.card-prose {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
}

.card-prose p { margin-bottom: 0.8em; }
.card-prose p:last-child { margin-bottom: 0; }

.card-prose a {
  color: var(--accent);
  text-decoration: none;
}
.card-prose a:hover { text-decoration: underline; }

.card-prose strong { font-weight: 600; }
.card-prose em { font-style: italic; }

.card-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sand);
  color: var(--text-emph);
  padding: 2px 5px;
  border-radius: 4px;
}

.card-code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--text);
}

.card-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.card-heading[data-level="1"] { font-size: 2rem;    margin: 20px 0 10px; line-height: 1.10; }
.card-heading[data-level="2"] { font-size: 1.6rem;  margin: 16px 0 8px;  line-height: 1.20; }
.card-heading[data-level="3"] { font-size: 1.3rem;  margin: 12px 0 6px;  line-height: 1.20; }

.card-image {
  max-width: 100%;
  border-radius: var(--radius-feature);
}

.card-empty {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  padding: 48px 0;
  text-align: center;
}

/* Card controls (hover) */

.card-controls {
  position: absolute;
  top: 4px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.card-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}

.card-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
}

/* Tags */

.tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12px;
  color: var(--text-emph);
  background: var(--bg-sand);
  padding: 1px 8px;
  border-radius: 24px;
  margin-right: 4px;
}

/* Inline tag strip on cards (distinct from ws-index-item tags, which
   flow inline with the item row). Sits below the body, before the
   provenance chip gutter. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 4px;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.card:hover .card-tags {
  opacity: 1;
}

/* Workspace index items */

.ws-index-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.ws-index-name {
  font-weight: 500;
  color: var(--text);
}

.ws-index-preview {
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ── Scrollbar ───────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ring-warm);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ring-deep); }

/* ── Utility ─────────────────────────────────────────── */

.loading {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  padding: 48px 0;
  text-align: center;
}

/* Inline eval results */

.inline-result {
  color: var(--accent);
  font-style: italic;
  display: block;
}

.inline-error {
  color: var(--error);
}

/* Code editing state — monospace when typing a dot-command */

.card-code-editing .card-input {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.32px;
}

/* Editable blank card */

.card-input {
  min-height: 1.6em;
  outline: none;
  cursor: text;
}

.card-input:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.card-locked {
  cursor: default;
  user-select: text;
}

.card-input:not(.card-locked) {
  outline: 1px solid var(--accent-dim);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.hidden { display: none; }

/* ── Landing / Auth ────────────────────────────────────── */

#auth-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

#auth-screen.hidden { display: none; }

.landing {
  max-width: 520px;
  padding: 48px 32px;
  text-align: center;
}

.logo {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.10;
}

.tagline {
  color: var(--text-dim);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.30;
  margin-bottom: 40px;
  text-align: left;
}

.description {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: left;
}

.description p { margin-bottom: 12px; }

.login-section {
  border-top: 1px solid var(--border-warm);
  padding-top: 32px;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-sand);
  border: 1px solid transparent;
  color: var(--text-emph);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 10px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-ring);
  transition: box-shadow 0.15s, background 0.15s;
}

.login-btn:hover {
  background: var(--bg-card);
  box-shadow: var(--shadow-ring-deep);
}

.login-note {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 16px;
}

.token-label {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 10px;
  text-align: left;
}

.token-label code {
  color: var(--text);
  font-family: var(--font-mono);
}

.token-row {
  display: flex;
  gap: 8px;
}

.token-input {
  flex: 1;
  background: var(--bg-pure);
  border: 1px solid var(--border-warm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-input);
  outline: none;
}

.token-input:focus {
  border-color: var(--focus);
}

.token-input::placeholder {
  color: var(--text-muted);
}

.logged-in {
  border-top: 1px solid var(--border-warm);
  padding-top: 32px;
}

.user-info {
  color: var(--text-dim);
  font-size: 16px;
  margin-bottom: 16px;
}

.user-handle {
  color: var(--accent);
  font-weight: 500;
}

.enter-btn {
  display: inline-block;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--text-on-dark-strong);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 10px 24px;
  border-radius: var(--radius-input);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--accent);
  transition: background 0.15s, box-shadow 0.15s;
}

.enter-btn:hover {
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent-light);
}

.logout-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  text-decoration: underline;
}

.logout-link:hover { color: var(--text-dim); }

.error-msg {
  background: var(--error-tint);
  border: 1px solid var(--error);
  color: var(--error);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 24px;
}

.terminal-link {
  position: fixed;
  bottom: 16px;
  right: 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
}

.terminal-link:hover { color: var(--text-dim); }

/* ── Cascade delete ────────────────────────────────────── */

.card-deleted {
  background: var(--error-tint);
  border-color: var(--error);
}

.card-deleted::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(181, 51, 51, 0.04);
  border-radius: var(--radius);
  pointer-events: none;
}

.card-affected {
  background: var(--warn-tint);
  border-color: var(--warn);
}

.card-affected::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(168, 109, 44, 0.04);
  border-radius: var(--radius);
  pointer-events: none;
}

.card-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.1s;
}

.card-delete-btn:hover {
  color: var(--error);
}

.card-deleted .card-delete-btn {
  color: var(--error);
}

.delete-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-warm);
  box-shadow: var(--shadow-whisper);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  font-size: 13px;
}

.delete-bar .count {
  color: var(--error);
  font-weight: 600;
}

.delete-bar button {
  background: var(--bg-sand);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-emph);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: var(--shadow-ring);
  transition: box-shadow 0.15s;
}

.delete-bar button:hover {
  box-shadow: var(--shadow-ring-deep);
}

.delete-bar .confirm {
  background: var(--error-tint);
  color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.delete-bar .confirm:hover {
  background: rgba(181, 51, 51, 0.14);
  box-shadow: 0 0 0 1px var(--error);
}

/* ── Infobar Actions ────────────────────────────────────── */

.infobar-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.infobar-btn {
  background: none;
  border: 1px solid var(--border-warm);
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.1s, border-color 0.1s;
}
.infobar-btn:hover { color: var(--text); border-color: var(--border-hover); }
.infobar-btn.active { color: var(--accent); border-color: var(--accent); }

/* ── Definition Graph Panel (dark chapter) ──────────────── */

.def-graph-panel {
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
  transition: max-height 0.2s ease;
  max-height: 0;
}
.def-graph-panel.open {
  max-height: 280px;
}
.def-graph-panel.hidden { display: none; }

/* ── DAG Visualization (dark chapter, warm palette) ─────── */

:root {
  /* Graph palette — uses one chromatic accent (terracotta) plus warm
     neutrals. Saturation discipline per DESIGN.md: don't introduce new hues. */
  --edge-color: #5e5d59;       /* Olive Gray edges */
  --num-color: #87867f;        /* numbers in Stone Gray */
  --text-color: #c96442;       /* text values pop with terracotta */
  --list-color: #d97757;       /* lists in Coral Accent */
  --node-color: #b0aea5;       /* warm silver nodes */
  --def-link-color: rgba(201, 100, 66, 0.30);
}

.dag-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  background: var(--bg-dark-surface);
  border-left: 1px solid var(--border-dark);
  z-index: 100;
  overflow-y: auto;
  padding: 12px;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-whisper);
}
.dag-sidebar.open {
  transform: translateX(0);
}
.dag-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dag-sidebar-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-on-dark-strong);
}
.dag-sidebar-close {
  background: none;
  border: none;
  color: var(--text-on-dark);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.dag-sidebar-close:hover { color: var(--text-on-dark-strong); }

.dag-svg {
  background: var(--bg-dark);
  border-radius: var(--radius);
}
.dag-node-label {
  font-size: 11px;
  fill: var(--text-on-dark);
  font-family: var(--font-mono);
}
.dag-edge-label {
  font-size: 9px;
  fill: var(--text-muted);
  font-family: var(--font-mono);
}
.dag-empty {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  padding: 16px;
  text-align: center;
}

/* Definition reference links */
.dag-def-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Stale result indicator */
.card.stale .inline-result {
  opacity: 0.4;
  text-decoration: line-through;
}
.card.stale::after {
  content: 'stale';
  position: absolute;
  top: 4px;
  right: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-tint);
  padding: 1px 6px;
  border-radius: 24px;
}

/* Proven result indicator — warm muted olive bar */
.inline-result.proven {
  border-left: 2px solid var(--success);
  padding-left: 4px;
}

/* Provenance button on results */
.inline-result {
  cursor: pointer;
}
.inline-result:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ── Dark mode ─────────────────────────────────────────────────────────
   Warm-dark "chapter" palette per DESIGN.md. Same chromatic discipline:
   Terracotta as the only chromatic moment, Coral for links/text accents
   on dark, no cool grays, ring shadows shift to warm darks. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark light;

    --bg: #141413;               /* Deep Dark — page canvas */
    --bg-card: #1f1f1d;          /* slightly raised */
    --bg-pure: #30302e;          /* Dark Surface */
    --bg-sand: #3d3d3a;          /* warm dark "sand" for chips */
    --bg-dark: #f5f4ed;          /* inverted: light chapter on dark */
    --bg-dark-surface: #faf9f5;

    --text: #faf9f5;             /* Ivory headings */
    --text-emph: #e8e6dc;
    --text-dim: #b0aea5;         /* Warm Silver */
    --text-muted: #87867f;       /* Stone Gray */
    --text-on-dark: #4d4c48;     /* used in light chapters embedded in dark */
    --text-on-dark-strong: #141413;

    --border: #30302e;           /* Border Dark */
    --border-warm: #3d3d3a;
    --border-hover: #5e5d59;
    --border-dark: #f0eee6;
    --ring-warm: #5e5d59;
    --ring-deep: #87867f;

    --accent: #c96442;           /* Terracotta — same brand */
    --accent-light: #d97757;     /* Coral — links/accents on dark */
    --accent-dim: rgba(217, 119, 87, 0.22);

    --error: #d4544f;            /* lifted for dark legibility */
    --error-tint: rgba(212, 84, 79, 0.10);
    --warn: #c08840;
    --warn-tint: rgba(192, 136, 64, 0.12);
    --success: #88a06d;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark light;

  --bg: #141413;
  --bg-card: #1f1f1d;
  --bg-pure: #30302e;
  --bg-sand: #3d3d3a;
  --bg-dark: #f5f4ed;
  --bg-dark-surface: #faf9f5;

  --text: #faf9f5;
  --text-emph: #e8e6dc;
  --text-dim: #b0aea5;
  --text-muted: #87867f;
  --text-on-dark: #4d4c48;
  --text-on-dark-strong: #141413;

  --border: #30302e;
  --border-warm: #3d3d3a;
  --border-hover: #5e5d59;
  --border-dark: #f0eee6;
  --ring-warm: #5e5d59;
  --ring-deep: #87867f;

  --accent: #c96442;
  --accent-light: #d97757;
  --accent-dim: rgba(217, 119, 87, 0.22);

  --error: #d4544f;
  --error-tint: rgba(212, 84, 79, 0.10);
  --warn: #c08840;
  --warn-tint: rgba(192, 136, 64, 0.12);
  --success: #88a06d;
}

/* Dark mode: links inside prose should pop without becoming aggressive */
:root[data-theme="dark"] .card-prose a,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-prose a { color: var(--accent-light); }
}

/* ── Demo banner ────────────────────────────────────────────────────── */

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 4px 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-emph);
  font-style: italic;
  box-shadow: var(--shadow-ring);
}
.demo-banner-back {
  background: var(--accent);
  color: #faf9f5;
  border: none;
  padding: 5px 12px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent);
  transition: background 0.12s, box-shadow 0.12s;
}
.demo-banner-back:hover {
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent-light);
}

/* ── Cell popover (chip click) — provenance + history selector ────────
   Anchored to the cell chip; closes on Esc or outside-click. Surfaces
   the link into the provenance sidebar plus a list of local snapshots
   (created when a suggestion is applied). Each snapshot exposes an
   inline diff against the current content and a one-click Restore. */

.cell-popover {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-feature);
  box-shadow: var(--shadow-whisper), var(--shadow-ring);
  padding: 12px 14px;
  width: min(420px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.cell-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cell-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cell-popover-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.cell-popover-action {
  background: var(--bg-sand);
  border: 1px solid transparent;
  color: var(--text-emph);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  box-shadow: var(--shadow-ring);
  transition: box-shadow 0.12s, color 0.12s;
}
.cell-popover-action:hover { color: var(--accent); box-shadow: var(--shadow-ring-deep); }

.cell-popover-section {
  padding-top: 10px;
}
.cell-popover-section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cell-popover-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
  line-height: 1.4;
}

.cell-popover-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cell-popover-history-item {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.cell-popover-history-item:last-child { border-bottom: none; }
/* DAG revisions carry a subtle terracotta marker — they're authoritative
   (content-addressed, non-ephemeral); local edits are just pending
   snapshots that may or may not make it to the DAG. */
.cell-popover-section-dag .cell-popover-section-title::before { content: '◆ '; color: var(--accent); }
.cell-popover-section-local .cell-popover-section-title::before { content: '◇ '; color: var(--text-muted); }
.cell-popover-history-item-dag .cell-popover-history-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.cell-popover-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cell-popover-history-label {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text);
  line-height: 1.30;
}
.cell-popover-history-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cell-popover-history-actions { display: flex; gap: 4px; }
.cell-popover-history-toggle,
.cell-popover-history-restore {
  background: var(--bg-sand);
  border: 1px solid transparent;
  color: var(--text-emph);
  padding: 3px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  box-shadow: var(--shadow-ring);
  transition: box-shadow 0.12s, color 0.12s, background 0.12s;
}
.cell-popover-history-restore { background: var(--accent); color: #faf9f5; box-shadow: 0 0 0 1px var(--accent); }
.cell-popover-history-restore:hover { background: var(--accent-light); box-shadow: 0 0 0 1px var(--accent-light); }
.cell-popover-history-toggle:hover { color: var(--accent); }
.cell-popover-history-diff {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  max-height: 220px;
  overflow: auto;
}
.history-diff {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.32px;
  line-height: 1.4;
}
.history-diff-line { display: flex; gap: 8px; padding: 1px 0; }
.history-diff-sigil {
  width: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
  text-align: center;
}
.history-diff-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.history-diff-eq  { color: var(--text-dim); }
.history-diff-add { color: var(--success); background: rgba(94, 112, 72, 0.10); }
.history-diff-rm  { color: var(--error);   background: rgba(181, 51, 51, 0.08); }

/* Suggestion actions (Apply / Copy) row */
.comment-suggestion-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.comment-accept-secondary {
  background: var(--bg-sand) !important;
  color: var(--text-emph) !important;
}
.comment-accept-secondary:hover {
  background: var(--bg-card) !important;
  color: var(--accent) !important;
}

/* ── Per-cell post-it comments ─────────────────────────────────────────
   Pins sit in the right margin of each card, color-coded by author kind
   (warm amber for human, terracotta for AI). Click any pin or the
   "+ comment" affordance to open the comments sidebar from the right. */

.cell-comments {
  position: absolute;
  top: 14px;
  right: -8px;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.cell-comment-pin,
.cell-comment-add {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 22px;
  height: 22px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12px;
  color: #faf9f5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* "Post-it pointer" silhouette — flat right edge, angled left so the
     pin reads as pointing at the cell. */
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%);
  padding: 0 2px 0 6px;
  transition: transform 0.12s, opacity 0.12s, filter 0.12s;
}
.cell-comment-pin[data-kind="human"] { background: var(--warn); }
.cell-comment-pin[data-kind="ai"]    { background: var(--accent); }
.cell-comment-pin:hover               { transform: translateX(-2px); filter: brightness(1.05); }

.cell-comment-add {
  background: var(--bg-sand);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.12s, transform 0.12s;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px 0 4px;
}
.card:hover .cell-comment-add { opacity: 0.7; }
.cell-comment-add:hover { opacity: 1; color: var(--text); transform: translateX(-2px); }
:root[data-show-structure="true"] .cell-comment-add { opacity: 0.5; }

/* On narrow viewports the right gutter disappears — fall back to the
   bottom of the card so pins stay reachable. */
@media (max-width: 720px) {
  .cell-comments {
    position: static;
    transform: none;
    flex-direction: row;
    margin-top: 6px;
  }
  .cell-comment-add { opacity: 1; }
}

/* Comments sidebar — slides in from the right, dim warm scrim feel */
.comments-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-whisper);
  z-index: 105;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
.comments-sidebar.open { transform: translateX(0); }

.comments-sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.comments-sidebar-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}
.comments-filter {
  display: flex;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}
.comments-filter label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.comments-filter input { accent-color: var(--accent); }
.comments-sidebar-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
}
.comments-sidebar-close:hover {
  color: var(--text);
  background: var(--bg-sand);
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 18px;
}
.comments-empty {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

.comment-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.comment-item.highlight {
  background: var(--bg-sand);
  margin: 0 -10px;
  padding: 12px 10px;
  border-radius: var(--radius);
  border: none;
}
.comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.comment-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #faf9f5;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12px;
  flex-shrink: 0;
}
.comment-initials[data-kind="human"] { background: var(--warn); }
.comment-initials[data-kind="ai"]    { background: var(--accent); }
.comment-meta {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}
.comment-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.comment-del:hover { color: var(--error); }
.comment-body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.comment-suggestion {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-sand);
  border-radius: var(--radius);
}
.comment-suggestion-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.comment-suggestion pre {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--text);
}
.comment-accept {
  margin-top: 6px;
  background: var(--accent);
  color: #faf9f5;
  border: none;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.comment-accept:hover { background: var(--accent-light); }

.comment-form {
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  background: var(--bg);
}
.comment-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-warm);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: var(--radius);
  outline: none;
}
.comment-form textarea:focus { border-color: var(--focus); }
.comment-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.comment-form-kind {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.comment-form-kind input { accent-color: var(--accent); }
.comment-form-submit {
  background: var(--accent);
  color: #faf9f5;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent);
}
.comment-form-submit:hover { background: var(--accent-light); box-shadow: 0 0 0 1px var(--accent-light); }

/* ── Cell provenance chip ──────────────────────────────────────────────
   Sits in the left gutter, hover-revealed by default to keep the
   resting page clean (matches the borderless cell model). Shows
   @position + tag count; click opens the provenance sidebar. */

.cell-chip {
  position: absolute;
  top: 14px;
  left: -8px;
  transform: translateX(-100%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.32px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.12s, background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.card:hover .cell-chip { opacity: 0.55; }
.cell-chip:hover {
  opacity: 1 !important;
  color: var(--accent);
  border-color: var(--border);
  background: var(--bg-card);
}
.cell-chip-pos {
  font-family: var(--font-mono);
}
.cell-chip-tags {
  font-family: var(--font-sans);
  font-size: 10px;
  padding: 0 5px;
  background: var(--bg-sand);
  color: var(--text-emph);
  border-radius: 24px;
  letter-spacing: 0.12px;
}

/* On narrow viewports the gutter disappears — fall back to top-left
   inside the card so the chip stays reachable. */
@media (max-width: 720px) {
  .cell-chip {
    position: static;
    transform: none;
    margin-bottom: 4px;
    align-self: flex-start;
  }
}

/* When the structure pin is on, chips can also stay visible at rest */
:root[data-show-structure="true"] .card:hover .cell-chip { opacity: 0.85; }

/* ── Rich result renderers (MIME-typed) ────────────────────────────────
   Wrapper carries header (MIME badge + pop-out), body (the rendered DOM,
   vertically resizable), and a drag handle on the bottom edge. Built-in
   renderers: CSV (kerai table), SVG, image, JSON, HTML iframe, markdown. */

.rich-host {
  margin-top: 6px;
}
.rich-render {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-feature);
  background: var(--bg-card);
  box-shadow: var(--shadow-ring);
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.rich-render:hover {
  box-shadow: var(--shadow-ring-deep);
}

.rich-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sand);
}
.rich-mime {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-emph);
  letter-spacing: -0.32px;
}
.rich-popout {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1;
  transition: color 0.1s, background 0.1s;
}
.rich-popout:hover {
  color: var(--accent);
  background: var(--bg-card);
}

.rich-body {
  height: 280px;
  overflow: auto;
  position: relative;
}

.rich-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, transparent 0%, var(--ring-warm) 100%);
  opacity: 0.35;
  transition: opacity 0.12s;
}
.rich-resize-handle:hover { opacity: 1; }
.rich-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 1px;
  opacity: 0.6;
}

/* CSV table — sticky header, dense rows, monospace numeric columns */
.rich-csv-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
table.rich-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
}
.rich-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-warm);
  text-align: left;
  font-weight: 500;
  color: var(--text);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.12px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}
.rich-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-emph);
  white-space: nowrap;
}
.rich-table tbody tr:hover td { background: var(--bg-sand); }
.rich-table th.num,
.rich-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  letter-spacing: -0.32px;
}
.rich-table td.empty { color: var(--text-muted); }
.rich-meta {
  flex-shrink: 0;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--bg);
  letter-spacing: 0.12px;
}

/* SVG — fit to body, preserve aspect */
.rich-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  height: 100%;
}
.rich-svg svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/* Image — same fit treatment */
.rich-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: 16px;
}

/* HTML — sandboxed iframe fills body */
.rich-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-pure);
}

/* JSON — pre with syntax-respecting whitespace */
.rich-json {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: var(--text);
  white-space: pre;
  overflow: auto;
  height: 100%;
  background: transparent;
}

/* LaTeX (KaTeX) — math centered with editorial breathing room */
.rich-latex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  min-height: 100%;
  color: var(--text);
  overflow-x: auto;
}
.rich-latex .katex-display { margin: 0; }
.rich-latex-loading {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}

/* Vega-Lite chart — centered on the body surface */
.rich-vega {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  height: 100%;
  background: var(--bg-pure);
}
.rich-vega-target {
  max-width: 100%;
  max-height: 100%;
}
.rich-vega-target canvas, .rich-vega-target svg { max-width: 100%; }
.rich-vega-status {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}
/* Vega-Embed action menu — restyle to fit the warm system */
.rich-vega .vega-actions {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-whisper) !important;
  font-family: var(--font-sans) !important;
}
.rich-vega .vega-actions a {
  color: var(--text-emph) !important;
  font-family: var(--font-sans) !important;
}
.rich-vega .vega-actions a:hover {
  background: var(--bg-sand) !important;
  color: var(--accent) !important;
}

/* Markdown — light editorial style consistent with prose cells */
.rich-markdown {
  padding: 16px 20px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.rich-markdown h1, .rich-markdown h2, .rich-markdown h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  margin: 16px 0 8px;
}
.rich-markdown h1 { font-size: 1.6rem; }
.rich-markdown h2 { font-size: 1.3rem; }
.rich-markdown h3 { font-size: 1.1rem; }
.rich-markdown p  { margin-bottom: 0.7em; }
.rich-markdown ul { margin: 0.4em 0 0.7em 1.3em; }
.rich-markdown li { margin-bottom: 0.2em; }
.rich-markdown code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sand);
  color: var(--text-emph);
  padding: 1px 5px;
  border-radius: 4px;
}
.rich-markdown pre {
  background: var(--bg-sand);
  padding: 12px 14px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 8px 0;
}
.rich-markdown pre code {
  background: none;
  padding: 0;
}
.rich-markdown a { color: var(--accent); text-decoration: none; }
.rich-markdown a:hover { text-decoration: underline; }

/* ── Command palette ───────────────────────────────────────────────────
   Cmd-K opens. Centered modal, parchment surface, fuzzy filter over a
   curated command list. Enter inserts the chosen command into a new
   editable cell at the end of the notebook. */

.palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.40);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.palette-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.palette {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(560px, 92vw);
  max-height: 64vh;
  background: var(--bg-card);
  border-radius: var(--radius-feature);
  box-shadow: var(--shadow-whisper), var(--shadow-ring);
  z-index: 115;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.palette.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.palette-input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: transparent;
  padding: 18px 22px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.30;
  color: var(--text);
  border-bottom: 1px solid var(--border-warm);
}
.palette-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.palette-list {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}

.palette-section {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 22px 4px;
}

.palette-item {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 14px;
  padding: 9px 22px;
  cursor: pointer;
  align-items: baseline;
  background: transparent;
  transition: background 0.08s;
}
.palette-item:hover,
.palette-item.active {
  background: var(--bg-sand);
}
.palette-item-name {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.32px;
  color: var(--text);
}
.palette-item.active .palette-item-name {
  color: var(--accent);
}
.palette-item-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.3;
}

/* Notebook items use serif (it's a destination, not a literal incantation) */
.palette-item-name.palette-item-ws {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: normal;
}

/* Sub-headings under "Commands" when browsing the unfiltered list */
.palette-section.palette-subsection {
  padding: 6px 22px 2px;
  color: var(--text-muted);
  opacity: 0.85;
}
.palette-empty {
  padding: 20px 22px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}
.palette-hint {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 22px;
  border-top: 1px solid var(--border-warm);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.palette-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-sand);
  color: var(--text-emph);
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: var(--shadow-ring);
}

/* Theme toggle button — sun/moon glyph in infobar */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-warm);
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  font-family: var(--font-sans);
  transition: color 0.1s, border-color 0.1s;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-hover);
}
/* Glyph swap: button shows the *target* state (moon = switch to dark,
   sun = switch to light). Default light shows moon. */
.theme-toggle .glyph-moon { display: inline; }
.theme-toggle .glyph-sun  { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .glyph-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .glyph-sun  { display: inline; }
}
:root[data-theme="dark"]  .theme-toggle .glyph-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .glyph-sun  { display: inline; }
:root[data-theme="light"] .theme-toggle .glyph-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .glyph-sun  { display: none; }

/* ══════════════════════════════════════════════════════════════
   yomu (読む) — feed reader surface
   ══════════════════════════════════════════════════════════════ */

.yomu-list {
  display: block;
  margin: 4px 0 8px 0;
  font-family: var(--font-sans);
  color: var(--text);
}

.yomu-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.yomu-count {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.yomu-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.yomu-chip {
  background: var(--bg-sand);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.yomu-chip:hover {
  color: var(--accent);
  border-color: var(--border-hover);
  background: var(--bg-card);
}

.yomu-rows {
  display: flex;
  flex-direction: column;
}

.yomu-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 100ms;
}
.yomu-row:hover {
  background: var(--bg-card);
}
.yomu-row:last-child {
  border-bottom: none;
}
.yomu-row-open {
  background: var(--bg-card);
}

.yomu-row-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.yomu-row-title {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 500;
}
.yomu-row:hover .yomu-row-title,
.yomu-row-open .yomu-row-title {
  color: var(--accent);
}

.yomu-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-sand);
  color: var(--text-dim);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.yomu-badge-pinned {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
.yomu-badge-keep {
  background: rgba(94, 112, 72, 0.15);
  color: var(--success);
  border-color: rgba(94, 112, 72, 0.4);
}
.yomu-badge-discard {
  color: var(--text-muted);
}
.yomu-badge-scored {
  color: var(--text-dim);
}
.yomu-badge-pending {
  background: var(--warn-tint);
  color: var(--warn);
  border-color: rgba(168, 109, 44, 0.35);
}
.yomu-badge-review {
  background: var(--error-tint);
  color: var(--error);
  border-color: rgba(181, 51, 51, 0.35);
}

.yomu-row-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.yomu-sep {
  color: var(--text-muted);
  padding: 0 2px;
}
.yomu-authors {
  color: var(--text-emph);
}
.yomu-tier {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--bg-sand);
  border-radius: 4px;
}
.yomu-date {
  font-variant-numeric: tabular-nums;
}
.yomu-score {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.yomu-row-preview {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-emph);
  font-family: var(--font-serif);
  /* Single-line preview collapse; full abstract lives in the detail pane */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yomu-row-open .yomu-row-preview {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.yomu-detail {
  margin-top: 10px;
  border-top: 1px solid var(--border-warm);
  padding-top: 10px;
}
.yomu-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.yomu-detail-abstract {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.yomu-detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 12px;
}
.yomu-detail-grid dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: lowercase;
}
.yomu-detail-grid dd {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-sans);
  word-break: break-word;
}

.yomu-quests {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.yomu-quests-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.yomu-quest-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-pure);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
  text-decoration: none;
}
.yomu-quest-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-card);
}
.yomu-quest-link {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* News-card accents — compact sub-line fields distinct from paper cards. */
.yomu-row-news .yomu-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-emph);
}
.yomu-row-news .yomu-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-sand);
  border-radius: 3px;
  text-transform: lowercase;
}

/* News-side tag pills in the detail pane — each drills into a
   .yomu.subscription filter for that tag. */
.yomu-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.yomu-tag-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.yomu-tag-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-card);
}

/* ── Goal pane (CIC Infoview-lite) ─────────────────────────────────────
   Slide-in panel from the right, mirrors comments-sidebar shape. Lists
   every Open + Conjecture postulate as a goal card; refreshed on demand
   and after every eval via window.kerai.goals.refresh(). */

.goal-pane {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-whisper);
  z-index: 105;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
.goal-pane.open { transform: translateX(0); }

.goal-pane-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.goal-pane-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}
.goal-pane-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-sand);
  padding: 1px 8px;
  border-radius: 24px;
}
.goal-pane-refresh,
.goal-pane-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 8px;
  border-radius: 4px;
}
.goal-pane-refresh:hover,
.goal-pane-close:hover { color: var(--text); background: var(--bg-sand); }

.goal-pane-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}
.goal-pane-list.goal-pane-loading { opacity: 0.5; }
.goal-pane-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 20px 4px;
  text-align: center;
  font-family: var(--font-serif);
}
.goal-pane-error {
  color: var(--error, #b53333);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.goal-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg);
}
.goal-item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.goal-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--bg-card);
}
/* Badge color-codes the declaration status. Conjecture = work-in-progress
   (terracotta). Open = unsettled (warm silver). Settled kinds (axiom,
   opaque, def, inductive, constructor) use a muted neutral so they read
   as ambient rather than active. Fallback: the muted tone for unknowns. */
.goal-badge { background: var(--text-muted); }
.goal-badge-conjecture { background: var(--accent, #c96442); }
.goal-badge-open { background: var(--text-dim); }
.goal-badge-axiom,
.goal-badge-opaque,
.goal-badge-def,
.goal-badge-inductive,
.goal-badge-constructor { background: var(--text-muted); }
.goal-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.goal-type {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-emph);
  background: var(--bg-sand);
  padding: 8px 10px;
  border-radius: 4px;
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Focused single-goal card (active cell). Rendered in a dedicated host
   above the env list so the user always sees the active proof first. */
.goal-pane-focus {
  padding: 10px 16px 0;
}
.goal-pane-focus:empty { display: none; }
.goal-focus-card {
  border: 1px solid var(--accent, #c96442);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-whisper);
}
.goal-focus-card.goal-settled {
  border-color: var(--border);
  box-shadow: none;
}
.goal-focus-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.goal-focus-card .goal-item-header { margin-bottom: 8px; }
.goal-type-focus {
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 12px;
}
.goal-focus-missing {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-left: 2px solid var(--border);
  background: var(--bg-sand);
  border-radius: 2px;
}
.goal-context-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 4px;
}
.goal-context {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-emph);
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 4px;
  margin: 0;
  white-space: pre-wrap;
}

/* ── Local context section on the focused-goal card ───────────────
   Lean-Infoview-style decomposition: peeled outer Π/λ binders sit
   above a turnstile (⊢), with the residual goal below. Each context
   row is a single `name : type` line in mono so long Pi chains stay
   readable at a glance. */
.goal-context-section {
  margin: 4px 0 6px;
}
.goal-context-list {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-emph);
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 4px;
}
.goal-context-row {
  white-space: pre-wrap;
}
.goal-context-name {
  color: var(--accent, #c96442);
}
.goal-context-colon {
  color: var(--text-muted);
}
.goal-context-type {
  color: var(--text-emph);
}
.goal-turnstile {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  margin: 6px 0 4px;
  padding: 0 4px;
  user-select: none;
}
.goal-type-residual {
  border-left: 2px solid var(--accent, #c96442);
  padding-left: 10px;
}
.goal-focus-card.goal-settled .goal-type-residual {
  border-left-color: var(--border);
}
.goal-pane-section {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 8px;
}

.goal-pane-section-certs { margin-top: 16px; }

.cert-item .cert-hash {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.cert-badge-proven { background: #4a7c59; color: var(--bg); }
.cert-badge-assumed { background: var(--accent, #c96442); color: var(--bg); }

.cert-assumes-count {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--accent, #c96442);
  letter-spacing: 0.5px;
}

/* ── Holes section (cicHoles phase 1) ──────────────────────────────
   Sits between the focused-goal card and the env-list. Renders one
   pill per hole with binder breadcrumbs + structural path. Active
   hole gets an accent border so the user can see what `]` / `[`
   navigation will jump from. Section collapses entirely when there
   are no holes (`:empty` rule on the host). */

.goal-pane-holes {
  padding: 0 16px;
}
.goal-pane-holes:empty { display: none; }
.goal-pane-section-holes { margin-top: 12px; }

.goal-holes-help {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  margin: -4px 0 8px;
  font-style: italic;
}

.goal-hole-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.goal-hole-item:hover { background: var(--bg-sand); }
.goal-hole-active {
  border-color: var(--accent, #c96442);
  background: var(--bg-card);
  box-shadow: var(--shadow-whisper);
}

.goal-hole-badge {
  background: var(--accent, #c96442) !important;
  color: var(--bg) !important;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
}
.goal-hole-name {
  font-family: var(--font-mono);
  color: var(--accent, #c96442);
}
.goal-hole-index {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.goal-hole-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.goal-hole-expected {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* ── Tactic palette ────────────────────────────────────────────────
   Sits below the Holes section. Templates (intro/refl/exact/sorry)
   render as filled chips; constructors (raw proof-block builders)
   render as outlined chips; stubs (apply/refine/rewrite — needs
   cicHoles phase 2 unification) render disabled with a tooltip. */

.goal-pane-tactics {
  padding: 8px 16px 0;
}
.goal-pane-tactics:empty { display: none; }
.goal-pane-section-tactics { margin-top: 14px; }

.goal-tactic-group {
  margin-bottom: 10px;
}
.goal-tactic-group-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 0 4px;
}
.goal-tactic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-tactic-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.goal-tactic-chip:hover { background: var(--bg-sand); border-color: var(--text-dim); }
.goal-tactic-chip:active { background: var(--accent, #c96442); color: var(--bg); }

.goal-tactic-chip-stub {
  opacity: 0.45;
  cursor: not-allowed;
  font-style: italic;
}
.goal-tactic-chip-stub:hover { background: var(--bg); border-color: var(--border); }

/* Phase-2 commit-capable chip: thin accent underline so reviewers can
   tell at a glance that clicking will run a side-effecting koji command
   (writes a cic.tactic.applied DAG node) rather than splicing snippet
   text. */
.goal-tactic-chip-commit {
  border-bottom: 2px solid var(--accent, #c96442);
  padding-bottom: 2px;
}
.goal-tactic-chip-flash {
  animation: goal-tactic-flash 0.4s ease-out 0s 2 alternate;
}
@keyframes goal-tactic-flash {
  from { background: var(--bg); }
  to   { background: var(--bg-sand); }
}

/* Inline commit form rendered as a sibling of its chip in the same
   tactics grid. flex-basis: 100% pushes it onto its own row inside
   the flex-wrap grid so the input gets full width while the chip
   stays in line above. */
.goal-tactic-commit-form {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-sand);
  font-family: var(--font-mono);
  font-size: 11px;
}
.goal-tactic-commit-label {
  color: var(--text-muted);
  white-space: nowrap;
}
.goal-tactic-commit-input {
  flex: 1 1 160px;
  min-width: 120px;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 3px 6px;
  border-radius: 3px;
}
.goal-tactic-commit-input:focus {
  outline: none;
  border-color: var(--text-dim);
}
.goal-tactic-commit-run,
.goal-tactic-commit-cancel {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.goal-tactic-commit-run:hover,
.goal-tactic-commit-cancel:hover { background: var(--bg); border-color: var(--text-dim); }
.goal-tactic-commit-run:disabled { opacity: 0.5; cursor: progress; }
.goal-tactic-commit-cancel { padding: 3px 6px; }
.goal-tactic-commit-status {
  flex-basis: 100%;
  font-size: 10px;
  color: var(--text-muted);
  min-height: 12px;
}
.goal-tactic-commit-status:empty { display: none; }
.goal-tactic-commit-status-pending { color: var(--text-dim); font-style: italic; }
.goal-tactic-commit-status-ok { color: var(--text); }
.goal-tactic-commit-status-err { color: #c1432d; }

/* Tactic history — renders below the tactics palette. One row per
   cic.tactic.applied DAG node (chronological ascending), with a kind
   badge and the refined term shown verbatim. Empty section collapses
   so goals without a committed tactic step stay clean. */
.goal-pane-history {
  padding: 8px 16px 0;
}
.goal-pane-history:empty { display: none; }
.goal-pane-section-history { margin-top: 14px; }

.goal-history-item {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--bg);
}
.goal-history-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.goal-history-badge-apply   { background: #4a7c59; color: var(--bg); }
.goal-history-badge-refine  { background: #5a6c8c; color: var(--bg); }
.goal-history-badge-rewrite { background: #8c5a6c; color: var(--bg); }
.goal-history-args {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  margin-left: 4px;
}
.goal-history-ts {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}
.goal-history-term {
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 4px 0 2px;
  white-space: pre-wrap;
}
.goal-history-subgoals {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.goal-history-hash {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  cursor: help;
}

.cert-theorem {
  font-family: var(--font-mono);
  font-size: 11px;
}