/* ---------------------------------------------------------------------------
   Prompt Tree — design tokens
   --------------------------------------------------------------------------- */
:root {
  --bg:           #fafbfc;
  --bg-elev:     #ffffff;
  --bg-sunk:    #f4f5f8;
  --bg-rail:    #fbfbfd;

  --ink-50:    #f7f8fa;
  --ink-100:   #eef0f4;
  --ink-200:   #e3e6ec;
  --ink-300:   #c8cdd8;
  --ink-400:   #9099ab;
  --ink-500:   #67708a;
  --ink-600:   #4b5268;
  --ink-700:   #353a4a;
  --ink-800:   #232735;
  --ink-900:   #15182233;
  --ink-950:   #0b0d14;

  --border:    #e3e6ec;
  --border-strong: #cdd2dc;
  --border-soft:   #ecedf2;

  --fg:        #1c1f2a;
  --fg-muted:  #5e6577;
  --fg-faint:  #8e95a8;

  --accent:        #0891b2;
  --accent-soft:   #cffafe;
  --accent-fg:     #155e75;
  --accent-bg:     #06b6d4;
  --accent-bg-hov: #0891b2;

  --status-canonical: #10b981;
  --status-experimental: #3b82f6;
  --status-candidate: #0d9488;
  --status-approved: #10b981;
  --status-deprecated: #f59e0b;
  --status-archived: #94a3b8;
  --status-draft: #6b7280;
  --status-refinement: #14b8a6;

  --green-50:  #ecfdf5;
  --green-200: #a7f3d0;
  --green-700: #047857;
  --rose-50:   #fff1f2;
  --rose-200:  #fecdd3;
  --rose-700:  #be123c;
  --amber-50:  #fffbeb;
  --amber-200: #fde68a;
  --amber-700: #b45309;
  --blue-50:   #eff6ff;
  --blue-200:  #bfdbfe;
  --blue-700:  #1d4ed8;
  --teal-50:   #f0fdfa;
  --teal-200:  #99f6e4;
  --teal-700:  #0f766e;

  --shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-pop:  0 12px 32px -16px rgba(15,23,42,.18), 0 2px 6px -2px rgba(15,23,42,.08);
  --shadow-key:  0 1px 0 rgba(15,23,42,.06);

  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --rail-w: 260px;
  --topbar-h: 48px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:        #0e1018;
  --bg-elev:   #161a25;
  --bg-sunk:   #11141d;
  --bg-rail:   #12151e;
  --border:    #232735;
  --border-strong: #2e3344;
  --border-soft:   #1d2029;
  --fg:        #e7e9ee;
  --fg-muted:  #9ba2b3;
  --fg-faint:  #6a7186;
  --ink-100:   #21242f;
  --ink-200:   #2a2e3c;
  --accent-soft: #164e63;
  --accent-fg:  #67e8f9;
  --shadow-soft: 0 1px 0 rgba(0,0,0,.25);
  --shadow-pop:  0 18px 40px -16px rgba(0,0,0,.6);
  --shadow-key:  0 1px 0 rgba(0,0,0,.3);
}

/* ---------------------------------------------------------------------------
   Reset + base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { -webkit-appearance: none; appearance: none; }
/* Keep the native chrome for checkboxes and radios — the default check
   glyph is the universally recognised "selected" affordance, and we
   rely on it in the Run / Batch modals. */
input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
   Splash
   --------------------------------------------------------------------------- */
#splash {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; background: var(--bg); z-index: 9999;
  transition: opacity .3s ease;
}
#splash.hidden { opacity: 0; pointer-events: none; }
.splash-mark {
  animation: splash-breathe 1.6s ease-in-out infinite;
}
@keyframes splash-breathe {
  0%, 100% { opacity: .7;  transform: scale(0.98); }
  50%      { opacity: 1;   transform: scale(1);    }
}
.splash-text {
  font-weight: 600; letter-spacing: -0.01em; color: var(--fg-muted);
  font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
   Layout shell
   --------------------------------------------------------------------------- */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  position: sticky; top: 0; z-index: 50;
}
.topbar-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 13.5px;
  padding: 4px 6px; border-radius: var(--radius);
  color: var(--fg);
}
.topbar-logo:hover { background: var(--bg-sunk); }
.topbar-logo .mark {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);  /* currentColor driver for the monochrome mark */
}
.topbar-logo .mark svg { width: 100%; height: 100%; display: block; }
.topbar-crumb {
  display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted);
  font-size: 13px;
}
.topbar-crumb .sep { color: var(--ink-300); }
.topbar-crumb a:hover { color: var(--fg); }
.topbar-crumb .current { color: var(--fg); font-weight: 500; }

.topbar-counters { display: flex; align-items: center; gap: 14px; color: var(--fg-muted); font-size: 12.5px; }
.topbar-counters .ct { display: inline-flex; align-items: center; gap: 5px; }
.topbar-counters .ct svg { opacity: .65; }

.topbar-spacer { flex: 1; }

.topbar-shortcuts { display: flex; align-items: center; gap: 14px; color: var(--fg-muted); font-size: 12px; }
.topbar-shortcuts .kbd-group { display: inline-flex; align-items: center; gap: 6px; }
.kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px;
  border: 1px solid var(--border); border-bottom-width: 1.5px; border-radius: 4px;
  background: var(--bg-elev); color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.4; text-align: center;
  box-shadow: var(--shadow-key);
}
.topbar-shortcuts .label { color: var(--fg-muted); }

.topbar-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius);
  font-size: 12.5px; color: var(--fg-muted); border: 1px solid var(--border-soft);
}
.topbar-action:hover { background: var(--bg-sunk); color: var(--fg); }

/* ---------------------------------------------------------------------------
   Two-pane workspace (rail + main)
   --------------------------------------------------------------------------- */
.workspace { display: grid; grid-template-columns: var(--rail-w) 1fr; flex: 1; min-height: 0; }
.rail {
  border-right: 1px solid var(--border);
  background: var(--bg-rail);
  display: flex; flex-direction: column;
  min-height: 0;
}
.rail-content { padding: 18px 16px 16px; overflow-y: auto; flex: 1; min-height: 0; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint);
}

.rail-section { margin-bottom: 22px; }
.rail-section + .rail-section { padding-top: 0; }

.prompt-card { display: flex; flex-direction: column; gap: 4px; }
.prompt-card .name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--fg); }
.prompt-card .slug {
  display: inline-block; align-self: flex-start;
  background: var(--bg-sunk); border: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  color: var(--fg-muted);
}
.prompt-card .desc { color: var(--fg-muted); font-size: 12.5px; line-height: 1.5; margin-top: 4px; }

/* ---- branches list ---- */
.branch-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.branch-row {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: var(--radius);
  cursor: pointer; user-select: none;
}
.branch-row:hover { background: var(--bg-sunk); }
.branch-row.active { background: var(--bg-sunk); }
.branch-row .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.branch-row .name { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); display: inline-flex; align-items: center; gap: 5px; }
.branch-row .hash {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint);
  background: var(--bg-elev); border: 1px solid var(--border-soft); padding: 1px 5px; border-radius: 4px;
}
.branch-row .crown { color: var(--status-canonical); }

/* ---- tree visualisation ---- */
.tree { position: relative; padding: 6px 0; margin-top: 2px; }
.tree-node {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 3px 6px 3px 0;
  cursor: pointer; border-radius: var(--radius);
}
.tree-node:hover { background: var(--bg-sunk); }
.tree-node.selected { background: var(--accent-soft); }
.tree-node .glyph {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.6px solid var(--ink-300); background: var(--bg-elev);
  flex-shrink: 0; margin-top: 2px;
  position: relative;
}
.tree-node .glyph.canonical { border-color: var(--status-canonical); }
.tree-node .glyph.canonical::after {
  content: ""; position: absolute; inset: 2px; background: var(--status-canonical); border-radius: 50%;
  opacity: .25;
}
.tree-node .glyph.exp { border-color: var(--status-experimental); }
.tree-node .glyph.refine { border-color: var(--status-refinement); border-style: dashed; }
.tree-node .glyph.head::before {
  content: ""; position: absolute; left: -3px; top: -3px; right: -3px; bottom: -3px;
  border: 1.5px solid currentColor; border-radius: 50%; opacity: .25;
  color: var(--accent);
}
.tree-node .label { display: flex; flex-direction: column; min-width: 0; }
.tree-node .label .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); font-weight: 600; }
.tree-node .label .t { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.tree-connector {
  position: absolute; border-left: 1.2px solid var(--border-strong);
}
.tree-connector.dashed { border-left-style: dashed; border-color: var(--status-refinement); }
.tree-connector.horiz {
  border-left: none; border-top: 1.2px solid var(--border-strong); height: 0;
}
.tree-connector.horiz.dashed { border-top-style: dashed; border-color: var(--status-refinement); }

/* ---- legend ---- */
.legend { display: flex; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--border); color: var(--fg-faint); font-size: 11px; }
.legend .item { display: inline-flex; align-items: center; gap: 5px; }
.legend .dot { width: 10px; height: 2px; border-radius: 2px; display: inline-block; }
.legend .dot.canonical { background: var(--status-canonical); }
.legend .dot.refinement { background: var(--status-refinement); }
.legend .head { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }

/* ---------------------------------------------------------------------------
   Main pane
   --------------------------------------------------------------------------- */
.main { padding: 24px 32px 60px; min-width: 0; }

.main-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-bottom: 18px;
}
.main-head .crumbs {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-muted);
  margin-bottom: 6px;
}
.main-head .crumbs .br {
  font-family: var(--font-mono); padding: 1px 6px; border-radius: 4px;
  background: var(--bg-sunk); border: 1px solid var(--border-soft); color: var(--fg-muted);
}
.main-head .crumbs .vno {
  font-family: var(--font-mono); font-weight: 600; color: var(--fg);
}
.main-head .crumbs .pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid;
  display: inline-flex; align-items: center; gap: 5px;
}
.main-head .crumbs .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.main-head h1 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg);
}
.main-head .subtitle {
  margin-top: 4px; color: var(--fg-muted); font-size: 13px;
}
.main-head .actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* status pill colors */
.pill.draft        { color: var(--status-draft); background: #f4f5f8; border-color: #e1e3eb; }
.pill.experimental { color: var(--status-experimental); background: var(--blue-50); border-color: var(--blue-200); }
.pill.candidate    { color: var(--status-candidate); background: var(--teal-50); border-color: var(--teal-200); }
.pill.approved     { color: var(--status-approved); background: var(--green-50); border-color: var(--green-200); }
.pill.deprecated   { color: var(--status-deprecated); background: var(--amber-50); border-color: var(--amber-200); }
.pill.archived     { color: var(--status-archived); background: #f4f5f8; border-color: #e1e3eb; }

/* hash chip */
.hash-chip {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 4px;
  background: var(--bg-sunk); border: 1px solid var(--border-soft); color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius); font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-sunk); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary { background: var(--ink-950); color: white; border-color: var(--ink-950); }
.btn.primary:hover { background: #1d2029; }

.btn.accent { background: var(--accent-bg); border-color: var(--accent-bg); color: white; box-shadow: var(--shadow-soft); }
.btn.accent:hover { background: var(--accent-bg-hov); }

/* Disabled affordance applies to every variant — unambiguously dim. */
.btn[disabled], .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.2);
}
.btn[disabled]:hover, .btn:disabled:hover {
  /* Undo the per-variant hover so the disabled look stays stable. */
  background: inherit;
}
.btn.accent[disabled], .btn.accent:disabled {
  background: var(--ink-300); border-color: var(--ink-300);
}

.btn.ghost-accent { color: var(--accent-fg); background: var(--accent-soft); border-color: transparent; }
.btn.ghost-accent:hover { background: #a5f3fc; }

.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-muted); }
.btn.ghost:hover { background: var(--bg-sunk); color: var(--fg); }

.btn.sm { font-size: 11.5px; padding: 4px 8px; }

.btn-icon { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: 22px; border-bottom: 1px solid var(--border);
  padding: 0; margin: 8px 0 22px;
}
.tab {
  padding: 8px 0; font-size: 13px; color: var(--fg-muted); position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--ink-900); font-weight: 500; }
.tab .badge {
  background: var(--bg-sunk); border: 1px solid var(--border-soft);
  padding: 0 5px; border-radius: 999px; font-size: 11px; color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
   Sections / cards
   --------------------------------------------------------------------------- */
.section { margin-bottom: 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.section-head .meta { font-size: 11.5px; color: var(--fg-faint); font-family: var(--font-mono); }

.code-frame {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev);
  overflow: hidden;
}
.code-frame pre {
  margin: 0; padding: 16px 18px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg);
}

/* ---- variables / metadata grid ---- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; margin-top: 18px; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

.subblock { display: flex; flex-direction: column; }
.subblock .eyebrow { margin-bottom: 8px; }

.var-row {
  display: grid; grid-template-columns: auto auto auto 1fr;
  gap: 12px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; background: var(--bg-elev);
  font-size: 12.5px;
}
.var-row .name { font-family: var(--font-mono); padding: 1px 6px; border-radius: 4px; background: var(--bg-sunk); border: 1px solid var(--border-soft); color: var(--fg); }
.var-row .type { color: var(--fg-muted); font-family: var(--font-mono); font-size: 11.5px; }
.var-row .req { color: var(--rose-700); font-size: 11.5px; font-weight: 500; }
.var-row .desc { color: var(--fg-muted); text-align: right; }

.kv {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev);
  overflow: hidden;
}
.kv .row {
  display: grid; grid-template-columns: 130px 1fr;
  padding: 10px 14px; border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
}
.kv .row:first-child { border-top: none; }
.kv .row .k { color: var(--fg-muted); }
.kv .row .v { color: var(--fg); }
.kv .row .v.mono { font-family: var(--font-mono); font-size: 12px; }

/* ---- analyzer signals ---- */
.signals {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev);
}
.signals .head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
}
.signals .head .title { font-size: 12.5px; font-weight: 500; color: var(--fg); }
.signal {
  padding: 10px 14px; border-top: 1px solid var(--border-soft);
}
.signal:first-of-type { border-top: none; }
.signal .head-row { display: flex; align-items: center; gap: 8px; }
.signal .head-row .name { font-weight: 500; color: var(--fg); font-size: 13px; }
.signal .head-row .code {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 1px 6px; background: var(--bg-sunk); border: 1px solid var(--border-soft);
  color: var(--fg-muted); border-radius: 4px;
}
.signal ul { margin: 6px 0 0; padding: 0 0 0 22px; color: var(--fg-muted); font-size: 12.5px; }
.signal ul li { padding: 2px 0; }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sev-dot.error { background: #ef4444; }
.sev-dot.warn  { background: #f59e0b; }
.sev-dot.info  { background: #94a3b8; }

/* ---------------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--ink-950); color: white; font-size: 12.5px;
  padding: 8px 14px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.with-action { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; }
.toast.with-action .toast-msg { color: white; }
.toast.with-action .toast-action {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: white; font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.toast.with-action .toast-action:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.toast.with-action .toast-action:focus-visible { outline: 2px solid var(--accent-bg); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Modal & command palette
   --------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh;
  z-index: 100;
}
.modal {
  background: var(--bg-elev); border-radius: var(--radius-xl); border: 1px solid var(--border);
  width: min(560px, 92vw); padding: 22px; box-shadow: var(--shadow-pop);
  max-height: 80vh; overflow-y: auto;
}
.modal h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.modal .modal-sub { color: var(--fg-muted); font-size: 12.5px; margin-bottom: 14px; }
.modal .row { margin-bottom: 12px; }
.modal label { display: block; font-size: 11.5px; font-weight: 500; color: var(--fg-muted); margin-bottom: 4px; }
.modal label .req { color: var(--rose-700); }
.modal input, .modal textarea, .modal select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--bg-elev); color: var(--fg); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  font-size: 13px;
}
.modal textarea { font-family: var(--font-mono); font-size: 12.5px; min-height: 120px; }
.modal input:focus, .modal textarea:focus, .modal select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.modal .helper { color: var(--fg-faint); font-size: 11.5px; margin-top: 4px; }
.modal-error {
  margin-top: 8px; padding: 8px 10px; background: var(--rose-50); border: 1px solid var(--rose-200);
  color: var(--rose-700); border-radius: var(--radius); font-size: 12.5px;
}

/* command palette */
.palette {
  background: var(--bg-elev); width: min(560px, 92vw); border-radius: var(--radius-xl);
  border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.palette-input {
  width: 100%; padding: 14px 18px; border: none; outline: none; background: transparent;
  color: var(--fg); font-size: 14px; border-bottom: 1px solid var(--border);
}
.palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
  font-size: 13px;
}
.palette-item .kind {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 5px; border-radius: 4px; background: var(--bg-sunk); color: var(--fg-muted);
}
.palette-item .label { flex: 1; min-width: 0; color: var(--fg); }
.palette-item .label .snip { color: var(--fg-faint); font-size: 11.5px; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item.active { background: var(--bg-sunk); }
.palette-empty { padding: 24px; text-align: center; color: var(--fg-faint); font-size: 12.5px; }
.palette-foot {
  display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border);
  color: var(--fg-faint); font-size: 11px;
}

/* ---------------------------------------------------------------------------
   Workspace landing & list pages
   --------------------------------------------------------------------------- */
.center { max-width: 1100px; margin: 0 auto; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card {
  display: block; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.card:hover { box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
.card .ttl { font-weight: 600; font-size: 14px; color: var(--fg); margin-bottom: 2px; }
.card .sub { font-size: 11.5px; color: var(--fg-faint); font-family: var(--font-mono); }
.card .desc { color: var(--fg-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.card .stats { color: var(--fg-faint); font-size: 11.5px; margin-top: 10px; display: flex; gap: 10px; }

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 36px 24px; text-align: center; background: var(--bg-elev);
}
.empty .ttl { font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.empty .sub { color: var(--fg-muted); font-size: 13px; margin-bottom: 12px; }

/* compare-specific */
.diff {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev);
  overflow: hidden;
}
.diff table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.diff td { vertical-align: top; padding: 1px 12px; white-space: pre-wrap; word-break: break-word; }
.diff td.gutter { width: 40px; text-align: right; color: var(--fg-faint); user-select: none; background: var(--bg-sunk); border-right: 1px solid var(--border-soft); font-size: 11px; padding: 1px 6px; }
.diff tr.added td.right    { background: var(--green-50); color: var(--green-700); }
.diff tr.removed td.left   { background: var(--rose-50);  color: var(--rose-700); }
.diff tr.modified td.left  { background: rgba(244,63,94,.06); }
.diff tr.modified td.right { background: rgba(16,185,129,.06); }
.diff .added-word   { background: rgba(16,185,129,.25); border-radius: 3px; padding: 0 2px; }
.diff .removed-word { background: rgba(244,63,94,.25); border-radius: 3px; padding: 0 2px; text-decoration: line-through; }

/* runs table */
.table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.table th { text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-faint); padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: var(--bg-sunk); }
.table td { padding: 8px 14px; border-top: 1px solid var(--border-soft); color: var(--fg); }
.table td.mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); }
.table td.right { text-align: right; font-family: var(--font-mono); }
.table .score { font-family: var(--font-mono); }
.table .score.good { color: var(--green-700); }
.table .score.mid  { color: var(--amber-700); }
.table .score.bad  { color: var(--rose-700); }

/* ---------------------------------------------------------------------------
   Forms (settings / refine)
   --------------------------------------------------------------------------- */
.form-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px;
}
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 11.5px; font-weight: 500; color: var(--fg-muted); margin-bottom: 4px; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-elev); color: var(--fg); outline: none; font-size: 13px;
}
.form-row textarea { font-family: var(--font-mono); min-height: 110px; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------------------------------------------------------------------------
   Avatar + author lockup
   --------------------------------------------------------------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sz, 20px); height: var(--sz, 20px);
  border-radius: 50%; background: var(--bg, #9ba2b3); color: var(--fg, #fff);
  font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  user-select: none; flex-shrink: 0;
}
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg-elev); }
.avatar-stack .avatar + .avatar { margin-left: -6px; }

.author { display: inline-flex; align-items: center; gap: 6px; }
.author-name { color: var(--fg); font-weight: 500; }

/* ---------------------------------------------------------------------------
   Activity timeline
   --------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 14px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 2px; bottom: 2px;
  width: 1.5px; background: var(--border-strong); opacity: 0.6;
}
.timeline-item {
  position: relative; padding: 8px 0 8px 16px;
  display: flex; gap: 10px; align-items: flex-start;
}
.timeline-item::before {
  content: ""; position: absolute; left: -1.5px; top: 14px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-elev); border: 1.8px solid var(--ink-400);
}
.timeline-item[data-kind="version_created"]::before { border-color: var(--status-experimental); }
.timeline-item[data-kind="version_promoted"]::before { border-color: var(--status-approved); background: var(--status-approved); }
.timeline-item[data-kind="branch_created"]::before { border-color: var(--accent); }
.timeline-item[data-kind="run_completed"]::before { border-color: #0ea5e9; }
.timeline-item[data-kind="proposal_opened"]::before { border-color: var(--accent); background: var(--accent); }
.timeline-item[data-kind="proposal_merged"]::before { border-color: var(--status-approved); background: var(--status-approved); }
.timeline-item[data-kind="release_published"]::before { border-color: var(--amber-700); background: var(--amber-700); }

.timeline-item .body { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; }
.timeline-item .body strong { color: var(--fg); font-weight: 500; }
.timeline-item .body a { color: var(--fg); border-bottom: 1px dotted var(--border-strong); }
.timeline-item .body a:hover { color: var(--accent-fg); }
.timeline-item .when { color: var(--fg-faint); font-size: 11.5px; margin-left: 4px; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Proposal (PR-like)
   --------------------------------------------------------------------------- */
.prop-state {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
}
.prop-state.open   { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-200); }
.prop-state.merged { background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-200); }
.prop-state.closed { background: var(--rose-50);   color: var(--rose-700);   border: 1px solid var(--rose-200); }
.prop-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.prop-card {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev);
}
.prop-card:hover { border-color: var(--border-strong); }

.prop-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.prop-meta a { color: var(--fg); }

/* Conversation thread */
.thread { display: flex; flex-direction: column; gap: 12px; }
.comment {
  display: flex; gap: 10px; align-items: flex-start;
}
.comment-body {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev); overflow: hidden;
}
.comment-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-sunk); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--fg-muted);
}
.comment-head .name { color: var(--fg); font-weight: 500; }
.comment-text { padding: 10px 12px; font-size: 13px; color: var(--fg); line-height: 1.55; }
.comment-text .markdown { font-size: inherit; line-height: inherit; }
.comment-text .markdown p:first-child { margin-top: 0; }
.comment-text .markdown p:last-child  { margin-bottom: 0; }
.comment-text .markdown p  { margin: 0.4em 0; color: inherit; }
.comment-text .markdown ul { margin: 0.3em 0; padding-left: 18px; color: inherit; }

.comment.review {
  margin: 6px 0; padding-left: 40px; /* align with diff gutter */
}
.comment.review .comment-body { background: var(--accent-soft); border-color: transparent; }
.comment.review .comment-head { background: rgba(8, 145, 178, 0.08); border-bottom-color: rgba(8, 145, 178, 0.2); }

/* Inline comment row in diff */
.diff tr.review-thread td {
  padding: 0; background: var(--accent-soft);
  border-top: 1px solid rgba(8, 145, 178, 0.25);
  border-bottom: 1px solid rgba(8, 145, 178, 0.25);
}
.diff tr.review-thread .comment { padding: 10px 14px; }

/* Add-comment button on a diff line number */
.diff td.gutter { position: relative; }
.diff td.gutter.b .add-comment {
  position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--accent-bg); color: white;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 700; line-height: 1;
  font-size: 13px;
}
.diff tr:hover td.gutter.b .add-comment { display: inline-flex; }
.diff td.gutter.b .add-comment:hover { background: var(--accent-bg-hov); }

/* ---------------------------------------------------------------------------
   Release card
   --------------------------------------------------------------------------- */
.release-card {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev);
}
.release-card .date {
  color: var(--fg-muted); font-size: 12px; padding-top: 2px;
}
.release-card .date .tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); color: var(--fg); font-weight: 600; font-size: 12.5px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--amber-50); border: 1px solid var(--amber-200);
  margin-bottom: 4px;
}
.release-card .name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 4px; }
.release-card .notes { color: var(--fg-muted); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }

/* ---------------------------------------------------------------------------
   Minimal markdown rendering
   --------------------------------------------------------------------------- */
.markdown { font-size: 14px; line-height: 1.65; color: var(--fg); }
.markdown h1, .markdown h2, .markdown h3 {
  letter-spacing: -0.01em; color: var(--fg); font-weight: 600;
  margin: 1.2em 0 0.4em;
}
.markdown h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.markdown h2 { font-size: 17px; }
.markdown h3 { font-size: 15px; }
.markdown p { margin: 0.6em 0; color: var(--fg-muted); }
.markdown strong { color: var(--fg); font-weight: 600; }
.markdown code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--bg-sunk); padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border-soft); color: var(--fg);
}
.markdown ul { margin: 0.4em 0; padding-left: 22px; color: var(--fg-muted); }
.markdown li { margin: 0.25em 0; }
.markdown li strong { color: var(--fg); }

/* ---------------------------------------------------------------------------
   Counter-badge on tabs (keep existing .tab .badge)
   --------------------------------------------------------------------------- */
.tab .badge.open { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }

/* ---------------------------------------------------------------------------
   Drawer (right-side panel for run detail, etc.)
   --------------------------------------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.32);
  z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(720px, 92vw);
  background: var(--bg-elev); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  z-index: 100;
  transform: translateX(100%);
  transition: transform .18s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.drawer-head .ttl { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
.drawer-head .meta { font-size: 11.5px; color: var(--fg-faint); font-family: var(--font-mono); }
.drawer-body {
  flex: 1; overflow-y: auto; padding: 18px 18px 32px;
}
.drawer-section { margin-bottom: 18px; }
.drawer-section .label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-faint); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.drawer-section .label .meta {
  margin-left: auto; font-family: var(--font-mono); color: var(--fg-faint);
  font-size: 11px; text-transform: none; letter-spacing: 0;
}
.drawer-section pre {
  margin: 0; padding: 12px 14px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg-sunk); border: 1px solid var(--border-soft);
  border-radius: var(--radius); color: var(--fg);
  max-height: 320px; overflow: auto;
}
.drawer-actions {
  display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--bg-sunk);
}
.drawer-kv {
  display: grid; grid-template-columns: 130px 1fr; row-gap: 4px;
  font-size: 12.5px; padding: 10px 14px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-sunk);
}
.drawer-kv .k { color: var(--fg-muted); }
.drawer-kv .v { color: var(--fg); font-family: var(--font-mono); font-size: 12px; }
.run-row { cursor: pointer; }
.run-row:hover { background: var(--bg-sunk); }

/* ---------------------------------------------------------------------------
   Tour overlay (first-run onboarding)
   --------------------------------------------------------------------------- */
#tour-root { pointer-events: none; }
#tour-root .tour-backdrop,
#tour-root .tour-spotlight,
#tour-root .tour-tooltip { pointer-events: auto; }

.tour-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 200;
}
.tour-spotlight {
  position: fixed; z-index: 201;
  border-radius: 10px;
  /* Cut a hole through the backdrop using a huge box-shadow spread. */
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55),
              0 0 0 2px var(--accent),
              0 0 28px 4px rgba(6, 182, 212, 0.45);
  background: transparent;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
  pointer-events: none;
}
.tour-tooltip {
  position: fixed; z-index: 210;
  width: min(360px, 92vw);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: 14px 16px;
}
.tour-tooltip-step {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.tour-tooltip-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  margin-top: 4px; color: var(--fg);
}
.tour-tooltip-body {
  margin-top: 8px; font-size: 13px; line-height: 1.55;
  color: var(--fg-muted);
}
.tour-tooltip-body strong { color: var(--fg); }
.tour-tooltip-body code   {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--bg-sunk); padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border-soft); color: var(--fg);
}
.tour-tooltip-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------
   Help / reference page
   --------------------------------------------------------------------------- */
.help-page { max-width: 1100px; }
.help-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 880px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-toc { position: relative !important; top: 0 !important; }
}
.help-toc {
  position: sticky;
  top: 24px;
  align-self: start;
}
.help-toc nav {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--border-soft);
  padding-left: 12px;
}
.help-toc nav a {
  display: block;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--fg-muted);
  border-left: 2px solid transparent;
  margin-left: -14px;
  padding-left: 12px;
  transition: color .12s ease, border-color .12s ease;
}
.help-toc nav a:hover {
  color: var(--fg);
  border-left-color: var(--accent);
}
.help-content { min-width: 0; }
.help-content > .markdown { font-size: 14.5px; line-height: 1.7; }
.help-content .markdown h1 {
  font-size: 26px; margin-top: 0; padding-bottom: 12px;
}
.help-content .markdown h2 {
  font-size: 19px; margin-top: 1.8em; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.help-content .markdown h3 { font-size: 15px; margin-top: 1.4em; }
.help-content .markdown table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin: 0.6em 0;
}
.help-content .markdown table th,
.help-content .markdown table td {
  border-bottom: 1px solid var(--border-soft);
  padding: 7px 10px;
  vertical-align: top;
  text-align: left;
}
.help-content .markdown table th {
  font-weight: 600; color: var(--fg);
  background: var(--bg-sunk);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
}
.help-content .markdown pre {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  background: var(--bg-sunk); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
  overflow-x: auto;
}
.help-content .markdown blockquote {
  border-left: 3px solid var(--accent);
  margin: 1em 0; padding: 4px 14px;
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg);
}

/* ---------------------------------------------------------------------------
   Blame view (Content tab toggle)
   --------------------------------------------------------------------------- */
.blame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  overflow: hidden;
}
.blame table { width: 100%; border-collapse: collapse; }
.blame col.blame-gutter-col { width: 280px; }
.blame col.blame-lineno-col { width: 36px; }
.blame td {
  vertical-align: top;
  padding: 0;
  border-top: 1px solid var(--border-soft);
}
.blame tr:first-child td { border-top: none; }
.blame td.gutter-cell {
  background: var(--bg-sunk);
  border-right: 1px solid var(--border-soft);
  padding: 0;
}
.blame .blame-gutter {
  display: grid;
  grid-template-columns: 22px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--fg);
  text-decoration: none;
  height: 100%;
  min-height: 100%;
  transition: background .12s ease;
}
.blame .blame-gutter:hover {
  background: var(--bg-elev);
}
.blame .blame-gutter .vno {
  font-family: var(--font-mono); font-weight: 600;
  color: var(--fg);
}
.blame .blame-gutter .why {
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
.blame td.lineno {
  text-align: right;
  padding: 2px 8px;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  user-select: none;
  background: var(--bg-sunk);
  border-right: 1px solid var(--border-soft);
}
.blame td.content {
  padding: 0;
}
.blame td.content pre {
  margin: 0;
  padding: 2px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg);
}
/* Slight stripe per author block so the eye picks them out at a glance */
.blame tr:has(td.gutter-cell) td.content { background: rgba(99, 102, 241, 0.025); }

/* ---------------------------------------------------------------------------
   Chart (SVG line chart for score trends)
   --------------------------------------------------------------------------- */
.chart {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px 4px;
}
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}
.chart-grid     { stroke: var(--border-soft); stroke-width: 1; }
.chart-axis     { fill: var(--fg-faint); font-size: 10.5px; font-family: var(--font-mono); }
.chart-dot      { cursor: pointer; transition: r .12s ease; }
.chart-dot:hover{ r: 6; }
.chart-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-faint); font-size: 13px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 6px 4px 2px;
  font-size: 11.5px;
  color: var(--fg-muted);
}
.chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend-item .dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.chart-tooltip {
  position: absolute;
  background: var(--ink-950);
  color: white;
  font-size: 11px; line-height: 1.3;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

/* dark-mode refinements for status pills */
[data-theme="dark"] .pill.draft { background: #1d2029; border-color: #2a2e3c; }
[data-theme="dark"] .pill.experimental { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93c5fd; }
[data-theme="dark"] .pill.candidate { background: rgba(13,148,136,.1); border-color: rgba(13,148,136,.25); color: #5eead4; }
[data-theme="dark"] .pill.approved { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #6ee7b7; }
[data-theme="dark"] .pill.deprecated { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #fcd34d; }

[data-theme="dark"] .diff tr.added td.right { background: rgba(16,185,129,.08); color: #6ee7b7; }
[data-theme="dark"] .diff tr.removed td.left { background: rgba(244,63,94,.08); color: #fda4af; }

/* ---------------------------------------------------------------------------
   Approval bar (Proposal page) — merge gate with progress + approve button
   --------------------------------------------------------------------------- */
.approval-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
}
.approval-bar.gate-open {
  border-color: var(--green-200);
  background: var(--green-50);
}
[data-theme="dark"] .approval-bar.gate-open {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.25);
}
.approval-main { min-width: 0; }
.approval-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg);
  flex-wrap: wrap;
}
.approval-title strong { font-weight: 500; }
.approval-bar.gate-open .approval-title strong { color: var(--green-700); }
[data-theme="dark"] .approval-bar.gate-open .approval-title strong { color: #6ee7b7; }

.approval-edit-threshold {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--fg-muted);
  padding: 4px 8px; border-radius: 4px;
  min-height: 24px;
  background: transparent; border: 1px solid transparent;
  cursor: pointer;
}
.approval-edit-threshold:hover {
  color: var(--fg); background: var(--bg-sunk); border-color: var(--border-soft);
}

.approval-progress {
  margin-top: 8px; height: 4px; width: 100%;
  background: var(--bg-sunk); border-radius: 999px; overflow: hidden;
}
.approval-progress-fill {
  height: 100%; background: var(--accent-bg);
  transition: width .2s ease;
}
.approval-bar.gate-open .approval-progress-fill { background: var(--status-canonical); }

.approval-approvers {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 12px; color: var(--fg-muted);
}
.approval-approvers.approval-empty { color: var(--fg-faint); font-style: italic; }
.approval-names { min-width: 0; }

.approval-action { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.approval-hint { font-size: 11.5px; color: var(--fg-faint); font-style: italic; }

/* ---------------------------------------------------------------------------
   Batch run modal — two-column checkbox matrix of model profiles × cases
   --------------------------------------------------------------------------- */
.batch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.batch-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.batch-head label {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.batch-selectors { font-size: 11.5px; color: var(--fg-faint); }
.batch-sel {
  color: var(--accent-fg); cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
  background: transparent; border: none;
  font-size: inherit;
}
.batch-sel:hover { background: var(--accent-soft); }
.batch-list {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-sunk);
  max-height: 220px; overflow-y: auto;
  padding: 4px;
}
.batch-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius);
  cursor: pointer;
}
.batch-row:hover { background: var(--bg-elev); }
.batch-row input[type="checkbox"] { margin: 0; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.batch-row-label {
  display: flex; flex-direction: column; min-width: 0;
  font-size: 12.5px;
}
.batch-row-label strong { font-weight: 500; color: var(--fg); }
.batch-row-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.batch-totals {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-sunk);
  font-size: 12.5px; color: var(--fg);
}

/* ---------------------------------------------------------------------------
   A/B summary (Compare page) — Wilson pass-rate + Newcombe diff CI
   --------------------------------------------------------------------------- */
.ab-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  margin-bottom: 12px;
}
.ab-side { min-width: 0; }
.ab-side-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-faint);
}
.ab-side-value {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  margin-top: 4px; color: var(--fg);
}
.ab-side-n {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--fg-faint);
}
.ab-side-ci {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted);
  margin-top: 2px;
}
.ab-center {
  display: flex; flex-direction: column; align-items: center;
  min-width: 160px;
  padding: 0 8px;
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}
.ab-delta {
  font-size: 26px; font-weight: 600; letter-spacing: -0.01em;
  font-family: var(--font-mono); color: var(--fg);
}
.ab-delta.good { color: var(--green-700); }
.ab-delta.bad  { color: var(--rose-700); }
.ab-delta-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-faint);
}
.ab-ci {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted);
  margin-top: 4px;
}
.ab-badge { margin-top: 8px; }
.sig-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid;
}
.sig-badge.sig-up {
  background: var(--green-50); color: var(--green-700); border-color: var(--green-200);
}
.sig-badge.sig-down {
  background: var(--rose-50); color: var(--rose-700); border-color: var(--rose-200);
}
.sig-badge.sig-ns {
  background: var(--bg-sunk); color: var(--fg-muted); border-color: var(--border-soft);
}
.sig-badge.sig-none {
  background: var(--bg-sunk); color: var(--fg-faint); border-color: var(--border-soft);
  font-style: italic;
}
.ab-note {
  font-size: 11.5px; color: var(--fg-faint); line-height: 1.55;
  padding: 0 4px 12px;
}

[data-theme="dark"] .sig-badge.sig-up {
  background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.25);
}
[data-theme="dark"] .sig-badge.sig-down {
  background: rgba(244,63,94,.12); color: #fda4af; border-color: rgba(244,63,94,.25);
}

/* ---------------------------------------------------------------------------
   Wrappers that keep tables / diffs / charts from pushing the layout wider
   than its container at ANY viewport. These classes are applied inline
   by views that render wide tabular content.
   --------------------------------------------------------------------------- */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.scrollx > * { min-width: 0; }

/* Prevent any single element from pushing the page wider than the viewport.
   This is belt-and-braces — the per-view styles above still constrain each
   widget; this just keeps overflow CONTAINED inside the main pane. */
.main { overflow-x: hidden; min-width: 0; }
.workspace > .main { min-width: 0; }

/* Tabs become horizontally scrollable when they can't all fit.
   We rely on `min-width: 0` on the flex parent so the overflow actually
   clips rather than forcing parent expansion. */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; min-width: 0; }
.tabs::-webkit-scrollbar { height: 3px; }
.tab { white-space: nowrap; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Tablet breakpoint — collapse the 260px rail into a collapsible top panel
   so the main content has room. Desktop grid stays intact above this.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  /* Topbar: let it wrap and hide the keyboard-shortcut row (which is
     decorative on tablet-sized screens). */
  .topbar { flex-wrap: wrap; height: auto; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .topbar-shortcuts { display: none; }
  .topbar-spacer { flex: 1 1 100%; height: 0; }
  .topbar-counters { flex-wrap: wrap; gap: 10px; }

  .workspace {
    grid-template-columns: 1fr;
  }
  .rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
  }
  .rail-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 14px 18px;
  }
  .rail-section { margin-bottom: 0; }
  /* The version tree can still overflow horizontally; let it scroll within
     its own card instead of pushing the page wider. */
  .tree { overflow-x: auto; }
  .legend { padding: 8px 18px; }

  /* The Split (variables + metadata) stacks at its own 1100px breakpoint
     already; nothing to change here. */

  /* Compare page's 4-col pick form wraps. */
  #pick-form {
    grid-template-columns: 1fr 1fr !important;
  }
  #pick-form > *:nth-child(2) { display: none !important; }
  #pick-form button[type="submit"] { grid-column: span 2; justify-self: end; }

  /* Side-by-side diff header cards on Compare */
  .main > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Project dashboard 1.4fr / 1fr -> 1col on narrow screens */
  .main > div[style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Trend tab: chart (1fr) + sidebar (200px) → stacked */
  .main div[style*="grid-template-columns:1fr 200px"] {
    grid-template-columns: 1fr !important;
  }

  /* A/B summary: 3-col → single stack on narrow screens */
  .ab-summary { grid-template-columns: 1fr; gap: 14px; }
  .ab-center {
    border-left: none; border-right: none;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 0;
    min-width: 0; width: 100%;
  }

  /* Batch modal: 2-col matrix → stacked on narrow screens */
  .batch-grid { grid-template-columns: 1fr; gap: 12px; }
  .batch-list { max-height: 180px; }

  /* Approval bar: action button drops beneath the title on narrow screens */
  .approval-bar { grid-template-columns: 1fr; gap: 10px; }
  .approval-action { justify-self: flex-start; width: 100%; }
  .approval-action .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Mobile breakpoint — compact density, wrapping topbars, stacked forms,
   readable tap targets.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 10px;
    gap: 8px 10px;
    row-gap: 6px;
  }
  .topbar-spacer { flex: 1 1 100%; height: 0; }
  .topbar-shortcuts { display: none; }
  .topbar-counters { flex-wrap: wrap; gap: 8px; }
  .topbar-crumb { font-size: 12px; flex-wrap: wrap; }
  .topbar-action { padding: 6px 10px; font-size: 12.5px; }
  /* Long icon+text actions on the workspace topbar stay legible with a
     bit of breathing room. */
  .topbar-action, .topbar-logo { min-height: 32px; }

  .main { padding: 16px 14px 48px; }
  .main-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .main-head h1 { font-size: 20px; }
  .main-head .actions {
    gap: 8px;
    width: 100%;
  }
  .main-head .actions .btn { flex: 1 1 140px; justify-content: center; min-height: 36px; }

  /* Rail sections on mobile: stack single column, don't let card grid
     explode. */
  .rail-content { grid-template-columns: 1fr; padding: 12px 14px; }

  /* Card grids shrink below 240px is hopeless — keep auto-fill but
     relax the min so cards don't blow the viewport. */
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

  /* Tables + diffs + release-card: confine their width with a scroll
     instead of overflowing the page. */
  .table,
  .diff,
  .release-card {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .diff table, .table { min-width: 480px; }

  /* Release card: 2-col → stacked */
  .release-card {
    grid-template-columns: 1fr;
    display: grid;
    gap: 10px;
  }

  /* Key-value lists: stack row labels above values */
  .kv .row,
  .drawer-kv { grid-template-columns: 1fr; row-gap: 2px; }
  .kv .row { padding: 8px 12px; }
  .kv .row .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); }

  /* Var-row: grid collapses to two rows */
  .var-row { grid-template-columns: auto auto 1fr; row-gap: 4px; }
  .var-row .desc { grid-column: 1 / -1; text-align: left; }

  /* Compare pick form single column.
     NOTE: the tablet block above sets `grid-column: span 2` on the submit
     button, which would force implicit columns; undo that here. */
  #pick-form {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px;
  }
  #pick-form > *:nth-child(2) { display: none !important; }
  #pick-form button[type="submit"] {
    grid-column: auto !important;
    width: 100%;
    justify-self: stretch;
  }
  #pick-form select { width: 100%; min-width: 0; }

  /* Settings: the inline [input][Save][Remove] form wraps onto 2 rows. */
  .form-card form[data-form] { flex-wrap: wrap; }
  .form-card form[data-form] input[name="key"] { flex: 1 1 100%; }
  .form-card form[data-form] .btn { flex: 1 1 auto; justify-content: center; min-height: 36px; }

  /* Provider headers wrap their "get a key" link onto its own line. */
  .form-card [data-provider] > div { flex-direction: column; }
  .form-card [data-provider] a[href^="http"] { margin-left: 0 !important; }

  /* Help TOC links: more tappable. */
  .help-toc nav a { padding: 8px 0 8px 12px; min-height: 36px; }
  .help-content .markdown h1 { font-size: 22px; }
  .help-content .markdown h2 { font-size: 17px; }
  .help-content .markdown table { display: block; overflow-x: auto; }

  /* Tabs: nudge size for fingers, keep a thin scroll shadow */
  .tab { padding: 10px 0; font-size: 13.5px; }
  .tabs { gap: 18px; }

  /* Small buttons (e.g. Show blame, Export all JSON) get a tap-sized minimum. */
  .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
  /* Inline "get a key" links in Settings need a proper tap zone. */
  .form-card a[href^="http"] { display: inline-block; padding: 6px 0; min-height: 32px; }

  /* Drawer: keep accessible on narrow screens */
  .drawer { width: 100vw; }
  .drawer-body { padding: 14px 14px 28px; }

  /* Chart SVG: already width: 100% via container, but make the wrapper
     container scrollable if the viewBox is locked. */
  .chart { padding: 6px 6px 2px; }

  /* Timeline card padding relaxed; inline anchors get a touch more
     vertical padding so they're easier to tap on mobile. */
  .timeline-item { padding: 6px 0 6px 12px; }
  .timeline-item .body a { padding: 2px 0; display: inline-block; }
  /* Key-value rows: the primary anchor (e.g. "v3 · Few-shot examples" in
     the Lineage tab) needs a proper touch target. */
  .kv .row .v a { padding: 6px 0; display: inline-block; line-height: 1.4; }

  /* Branch row fits within the rail card */
  .branch-row { grid-template-columns: 12px 1fr auto; gap: 6px; }

  /* Modal input: comfortable on-screen keyboard spacing */
  .modal input, .modal textarea, .modal select { font-size: 16px; }
  .form-row input, .form-row textarea, .form-row select { font-size: 16px; }

  /* Proposal / activity: avoid hard 400+ elements */
  .comment-head, .comment-text { font-size: 12.5px; }
}

/* ---------------------------------------------------------------------------
   Tiny phones (≤ 380px) — last-resort compressions
   --------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .main { padding: 12px 10px 40px; }
  .topbar { padding: 6px 8px; }
  .topbar-logo span:last-child { display: none; } /* hide wordmark, keep sigil */
  .main-head .actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   Landing page (E1) — only rendered when the workspace has zero visible
   projects. Layout is centered, generous, and uses the same design tokens
   as the rest of the app so the jump to the populated workspace feels
   seamless.
   --------------------------------------------------------------------------- */
.topbar-landing { border-bottom-color: transparent; }

.landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.landing-hero {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 16px 12px 28px;
}
.landing-mark {
  width: 160px; height: 160px;
  filter: drop-shadow(0 10px 36px rgba(6, 148, 162, 0.24));
}
.landing-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 4px 0 0;
  background: linear-gradient(135deg, #155e75 0%, #0891b2 55%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-tagline {
  font-size: 15px; font-weight: 500; color: var(--fg-muted);
  letter-spacing: 0.02em; text-transform: uppercase;
  display: inline-flex; gap: 8px; justify-content: center;
}
.landing-tagline .reveal-word { display: inline-block; }

/* ---------------------------------------------------------------------------
   Hero reveal (E2) — sequential word + title fade-ins synced to the
   mark-hero.svg SMIL timeline.  Each `.reveal-*` class carries the right
   `animation-delay` so the text lands *as* the corresponding node in the
   SVG bounces into place:

     reveal-word-1 ("Branch.")   → fork node,         t = 1.40 s
     reveal-word-2 ("Prove.")    → refinement tip,    t = 2.30 s
     reveal-word-3 ("Ship.")     → crown expansion,   t = 3.00 s
     reveal-title ("Prompt Tree") → full assembly,    t = 3.50 s
     reveal-pitch                                      t = 3.85 s
     reveal-ctas                                       t = 4.15 s
     reveal-subcta                                     t = 4.40 s

   The reveal animation is identical across targets (fade + micro-rise)
   so everything feels like one coherent assembly.
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(6px);
  animation: landing-reveal 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.reveal-word-1 { animation-delay: 1.40s; }
.reveal-word-2 { animation-delay: 2.30s; }
.reveal-word-3 { animation-delay: 3.00s; }
.reveal-title  { animation-delay: 3.50s; }
.reveal-pitch  { animation-delay: 3.85s; }
.reveal-ctas   { animation-delay: 4.15s; }
.reveal-subcta { animation-delay: 4.40s; }

@keyframes landing-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion users: SMIL is out of our reach (we swap the animated
   SVG for the static mark in JS), but the CSS reveals MUST collapse to
   the final state instantly so the text doesn't flash. */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}
html[data-reduced-motion="1"] .reveal { animation: none; opacity: 1; transform: none; }
.landing-pitch {
  max-width: 620px;
  color: var(--fg-mute);
  font-size: 16px; line-height: 1.55;
  margin: 4px 0 8px;
}
.landing-ctas {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 6px;
}
.btn.lg {
  font-size: 14px; padding: 10px 18px; gap: 8px;
  border-radius: calc(var(--radius) + 2px);
}
.landing-subcta {
  margin-top: 4px;
  font-size: 13px; color: var(--fg-faint);
}
.landing-subcta a { color: var(--accent); }
.landing-subcta a:hover { text-decoration: underline; }

.landing-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 32px;
}
.landing-pillar {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.landing-pillar-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-fg);
}
.landing-pillar-title {
  font-size: 15px; font-weight: 600; color: var(--fg);
}
.landing-pillar-copy {
  font-size: 13px; line-height: 1.5; color: var(--fg-mute);
}

.landing-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 12px 0 36px;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.landing-feature-col .eyebrow { margin-bottom: 10px; }
.landing-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.landing-list li {
  font-size: 13px; line-height: 1.5; color: var(--fg-mute);
  padding-left: 14px; position: relative;
}
.landing-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.landing-list strong { color: var(--fg); font-weight: 600; }
.landing-list code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--bg-sunk); padding: 1px 6px; border-radius: 4px;
}

.landing-foot {
  text-align: center;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--fg-faint);
  margin-top: 24px;
}
.landing-foot .dot { color: var(--ink-300); }

/* Tablet + mobile: collapse the pillar + feature grids to a single column
   so nothing ever truncates or scrolls sideways. */
@media (max-width: 820px) {
  .landing { padding: 32px 16px 56px; }
  .landing-pillars { grid-template-columns: 1fr; margin: 32px 0 24px; }
  .landing-features { grid-template-columns: 1fr; padding: 20px; }
  .landing-mark { width: 96px; height: 96px; }
}
@media (max-width: 380px) {
  .landing { padding: 20px 12px 40px; }
  .landing-mark { width: 84px; height: 84px; }
  .btn.lg { font-size: 13px; padding: 9px 14px; }
  /* Pillar icon + copy stay readable on tiny phones */
  .landing-pillar { padding: 14px 16px; }
}