/* Remoir Project Lens — mock styles
   Vanilla CSS, no deps. Settled-truth feel: serif body, mono codes, paper bg. */

:root {
  --bg:           #faf9f6;
  --bg-card:      #f4f0e7;
  --bg-card-hov:  #ede8db;
  --text:         #1a1a1a;
  --text-2:       #5a5a5a;
  --text-3:       #8a8a8a;
  --text-4:       #a8a3a0;
  --border:       #e6e3dd;
  --border-2:     #d4cfc3;
  --accent:       #15803d;
  --accent-2:     #166534;
  --accent-soft:  #d4e7d8;
  --accent-faint: #ecf3ee;

  --arc-settled:      #15803d;
  --arc-emergent:     #65a30d;
  --arc-unknown:      #ca8a04;
  --arc-speculative:  #c2410c;
  --arc-unknowable:   #64748b;

  --status-shipped: #15803d;
  --status-active:  #ca8a04;
  --status-todo:    #c2bfb5;

  --serif: 'Charter', 'Iowan Old Style', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code, .mono { font-family: var(--mono); font-size: 0.88em; }

/* ───── layout shell ───────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  max-width: 1480px;
  margin: 0 auto;
  min-height: 100vh;
}

.col-main {
  padding: 0 56px 80px;
  border-right: 1px solid var(--border);
}

.col-rail {
  padding: 88px 32px 80px;
  background: linear-gradient(180deg, var(--bg) 0%, #f7f4ec 100%);
  /* Flex column so .build-stamp anchors to the bottom via margin-top: auto. */
  display: flex;
  flex-direction: column;
}

/* ───── header ─────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}

.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: 1px;
}

.nav {
  display: flex;
  gap: 28px;
  font-family: var(--sans);
  font-size: 14px;
}

.nav a {
  color: var(--text-2);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border-2); }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); }

.search-icon {
  font-family: var(--mono);
  color: var(--text-3);
  font-size: 14px;
  margin-left: 24px;
  cursor: pointer;
}

/* ───── hero ───────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

.breadcrumb-large {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.breadcrumb-large .sep { color: var(--text-4); margin: 0 12px; font-weight: 300; }
.breadcrumb-large .code { font-family: var(--mono); font-size: 0.7em; color: var(--accent-2); margin-right: 8px; vertical-align: 3px; }
.breadcrumb-large .where { color: var(--text-2); }

.breadcrumb-caption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 32px;
}

/* arc horizon ribbon */
.horizon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}
.horizon-cell {
  height: 38px;
  border-radius: 2px;
  position: relative;
  padding: 8px 10px;
  color: white;
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  align-items: flex-end;
  font-weight: 500;
}
.horizon-cell.settled     { background: var(--arc-settled);     }
.horizon-cell.emergent    { background: var(--arc-emergent);    }
.horizon-cell.unknown     { background: var(--arc-unknown);     }
.horizon-cell.speculative { background: var(--arc-speculative); }
.horizon-cell.unknowable  { background: var(--arc-unknowable);  }
.horizon-cell.current::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--text);
  border-radius: 2px;
  pointer-events: none;
}

.horizon-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 56px;
}
.horizon-label {
  padding: 0 10px;
}

/* ───── bet card ───────────────────────────────────────────── */

.bet {
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  padding: 24px 28px;
  margin-bottom: 56px;
  border-radius: 0 4px 4px 0;
}

.bet-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
}

.bet-quote {
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
  color: var(--text);
  margin: 0;
}

.bet-attr {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
}
.bet-attr a { color: var(--text-2); }

/* ───── rooms ──────────────────────────────────────────────── */

.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

.room {
  background: var(--bg-card);
  border: 1px solid transparent;
  padding: 24px 24px 20px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background 120ms ease, border-color 120ms ease;
}
.room:hover {
  background: var(--bg-card-hov);
  border-color: var(--border-2);
  text-decoration: none;
}

.room-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.room-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.room-arrow {
  font-family: var(--mono);
  color: var(--text-3);
  font-size: 14px;
}
.room:hover .room-arrow { color: var(--accent-2); }

.room-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 16px;
  line-height: 1.5;
}

.room-counts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-family: var(--sans);
  font-size: 13px;
  margin-top: auto;
}
.room-counts dt { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }
.room-counts dd { margin: 0; color: var(--text-2); }

/* ───── section pages ──────────────────────────────────────── */

.page-title {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.section {
  margin-bottom: 56px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.section-head h2 {
  /* Section head is the top-level page divider — bigger, bolder, fuller
     contrast than any nested group head below it (e.g. heuristic-category-name). */
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.section-head .meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

/* arc list */
.arc-list {
  display: flex;
  flex-direction: column;
}
.arc-arrow {
  font-family: var(--mono);
  color: var(--text-4);
  text-align: right;
}

/* phase cards */
.phase-row {
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr;
  gap: 0;
  align-items: stretch;
}
.phase-card {
  border: 1px solid var(--border);
  padding: 18px 20px;
  border-radius: 4px;
  background: var(--bg);
}
.phase-card.active {
  border-color: var(--accent);
  background: var(--accent-faint);
}
.phase-card.next { background: var(--bg-card); }
.phase-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  color: var(--text-3);
  font-size: 18px;
}
.phase-code { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.phase-name { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.phase-state { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.phase-card.active .phase-state { color: var(--accent-2); font-weight: 600; }

/* milestone map */
.ms-list { display: flex; flex-direction: column; }
.ms-row {
  display: grid;
  grid-template-columns: 90px 1fr 160px 160px;
  align-items: start;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ms-row:last-child { border-bottom: none; }
.ms-row.active { background: var(--accent-faint); }
.ms-code { font-family: var(--mono); font-size: 12px; color: var(--text-2); padding-top: 2px; }
.ms-name-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-name { color: var(--text); }
.ms-outcome {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.4;
  max-width: 60ch;
}
.ms-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-top: 8px;
}
.ms-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--status-shipped);
  width: 100%;
}
.ms-bar-fill.active { background: var(--status-active); width: 35%; }
.ms-bar-fill.todo   { background: var(--status-todo); width: 0; }
.ms-state-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.ms-state {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.ms-state.shipped { color: var(--accent-2); }
.ms-state.active { color: var(--status-active); font-weight: 600; }
.ms-state-detail {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--text-3);
  text-align: right;
  line-height: 1.35;
  max-width: 160px;
}

/* for-future list */
.ff-list { display: flex; flex-direction: column; gap: 2px; }
.ff-row {
  display: grid;
  grid-template-columns: 110px 1fr 30px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.ff-row:hover { background: var(--accent-faint); }
.ff-row:last-child { border-bottom: none; }
.ff-date { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.ff-title { font-size: 15px; color: var(--text); }
.ff-arrow { color: var(--text-4); text-align: right; font-family: var(--mono); }
.ff-row:hover .ff-arrow { color: var(--accent-2); }

.passive-strip {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.passive-strip .label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-2);
}
.passive-strip .count {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}
.passive-strip a {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent-2);
}

/* ───── right rail: NOW ────────────────────────────────────── */

.now-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-2);
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.now-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

.now-block {
  margin-bottom: 32px;
}
.now-block-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

.now-ms {
  font-size: 14px;
  margin-bottom: 8px;
}
.now-ms-code { font-family: var(--mono); color: var(--text-3); font-size: 12px; margin-right: 6px; }
.now-ms-name { color: var(--text); }

.now-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.now-bar-fill {
  height: 100%;
  background: var(--status-active);
  width: 35%;
}

.now-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
}

.now-focus {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.okrs { display: flex; flex-direction: column; gap: 8px; }
.okr-row {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  position: relative;
  cursor: help;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 3px;
}
.okr-row:hover { background: var(--bg-card); }
.okr-row:focus { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.okr-code { color: var(--text); }
.okr-dots { color: var(--accent); letter-spacing: 2px; }
.okr-dots .off { color: var(--border-2); }
.okr-num { color: var(--text-3); text-align: right; }

.sparkline {
  width: 100%;
  height: 36px;
  display: block;
  margin: 6px 0 8px;
}
.spark-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
}
.spark-meta .val { color: var(--text); font-weight: 600; }
.spark-meta .target { color: var(--text-3); }

.latest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.latest-row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.latest-date { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.latest-title { color: var(--text-2); }

.friction-none {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
}

.build-stamp {
  /* margin-top: auto anchors the stamp to the bottom of the flex .col-rail,
     preventing the orphan-float that happened when rail content was short. */
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.7;
}
.build-stamp .sha { color: var(--text-2); }

/* ───── footer ─────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
}
.partition-strip {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  display: flex;
  gap: 12px;
}
.partition-strip a {
  color: var(--text-3);
  text-decoration: none;
}
.partition-strip a:hover { color: var(--accent-2); text-decoration: none; }
.partition-strip .sep { color: var(--text-4); }
.env-switcher { display: flex; gap: 8px; }
.env-tab {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 11px;
}
.env-tab:hover { text-decoration: none; background: var(--bg-card); }
.env-tab.active { background: var(--accent); color: white; border-color: var(--accent); }

/* ═════════════════════════════════════════════════════════════
   ITERATION 2 ADDITIONS
   - Panel-style relative arc horizon
   - Phase-pip within-arc progress
   - OKR groups + tooltips
   - Vision page primitives
   - Log page primitives
   ═════════════════════════════════════════════════════════════ */

/* ───── panel-style relative horizon ──────────────────────── */

.horizon-panel {
  display: grid;
  grid-template-columns: 5fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2px;
  margin-bottom: 56px;
  align-items: stretch;
}

.horizon-panel .horizon-cell {
  height: auto;
  min-height: 100%;
  padding: 10px;
  align-items: flex-start;
  border-radius: 2px;
}

.arc-panel {
  background: var(--arc-settled);
  color: white;
  border-radius: 3px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.arc-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--text);
  border-radius: 3px;
  pointer-events: none;
}

.arc-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.arc-panel-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.arc-panel-title .code {
  font-family: var(--mono);
  font-size: 0.7em;
  opacity: 0.75;
  margin-right: 6px;
  vertical-align: 2px;
}
.arc-panel-status {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
}

.phase-pips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.phase-pip {
  height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
}
.phase-pip.archived { background: rgba(255,255,255,0.55); }
.phase-pip.active   {
  background: linear-gradient(to right, #fbbf24 35%, rgba(255,255,255,0.20) 35%);
}
.phase-pip.todo     { background: rgba(255,255,255,0.18); }

.phase-caption {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.85;
  margin-top: -4px;
}

.arc-panel-essence {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}

.arc-panel-thesis {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0;
}

.arc-panel-closure {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.22);
}

/* ───── OKR groups + tooltips ─────────────────────────────── */

.okrs { gap: 14px; }

.okr-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.okr-group-head {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 4px;
  position: relative;
  cursor: help;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px dotted var(--text-3);
  align-self: flex-start;
}
.okr-group-head:focus { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 2px; }

.okr-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: -4px;
  width: 260px;
  background: #1a1a1a;
  color: #f3efe6;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 4px;
  z-index: 10;
  display: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.okr-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #1a1a1a;
}
.okr-group-head:hover  .okr-tooltip,
.okr-group-head:focus  .okr-tooltip,
.okr-row:hover         .okr-tooltip,
.okr-row:focus         .okr-tooltip,
.okr-row:focus-within  .okr-tooltip { display: block; }

.okr-source {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--mono);
  font-size: 10px;
  color: #c2bfb5;
}

/* ───── VISION PAGE ───────────────────────────────────────── */

.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.fp-card {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 18px 20px 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
  position: relative;
}
.fp-card:hover {
  background: var(--bg-card-hov);
  border-color: var(--border-2);
  text-decoration: none;
}
.fp-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.fp-kernel {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  flex: 1;
}
.fp-arrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-3);
  align-self: flex-end;
}
.fp-card:hover .fp-arrow { color: var(--accent-2); }

.principles-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Category-level collapsibles — each of Capture / Store / Enrich / Surface /
   Cross-cutting / Governance shows by name only until clicked. Open: the
   heuristics in that category appear; click a heuristic for its wording. */
.heuristic-category {
  border-bottom: 1px solid var(--border);
}
.heuristic-category:last-child {
  border-bottom: none;
}
.heuristic-category > summary.heuristic-category-head {
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  transition: background 120ms ease;
}
.heuristic-category > summary.heuristic-category-head::-webkit-details-marker { display: none; }
.heuristic-category > summary.heuristic-category-head::marker { display: none; }
.heuristic-category > summary.heuristic-category-head:hover {
  background: var(--accent-faint);
}
.heuristic-category[open] > summary.heuristic-category-head {
  background: var(--accent-faint);
}
.heuristic-category-name {
  /* Children — clearly smaller, lighter weight, and more muted than the
     parent section-head h2 above. All children share this exact styling
     so CAPTURE / STORE / ENRICH / SURFACE / CROSS-CUTTING / GOVERNANCE
     read as a uniform set. */
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: 1;
}
.heuristic-category-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.heuristic-category-chevron {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  transition: transform 180ms ease;
  width: 14px;
  text-align: right;
}
.heuristic-category[open] > summary .heuristic-category-chevron {
  transform: rotate(180deg);
  color: var(--accent-2);
}
.heuristic-category-body {
  padding: 4px 0 12px;
}

/* For-future categories — same collapsible pattern as heuristic-category;
   each category wraps the existing ff-row-wrap collapsibles for individual
   briefs. Three levels of disclosure: category → brief → brief body. */
.ff-category {
  border-bottom: 1px solid var(--border);
}
.ff-category:last-child {
  border-bottom: none;
}
.ff-category > summary.ff-category-head {
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  transition: background 120ms ease;
}
.ff-category > summary.ff-category-head::-webkit-details-marker { display: none; }
.ff-category > summary.ff-category-head::marker { display: none; }
.ff-category > summary.ff-category-head:hover {
  background: var(--accent-faint);
}
.ff-category[open] > summary.ff-category-head {
  background: var(--accent-faint);
}
.ff-category-name {
  /* Same styling as .heuristic-category-name — uniform across all categories,
     clearly subordinate to the parent For-future briefs section-head h2. */
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: 1;
}
.ff-category-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.ff-category-chevron {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  transition: transform 180ms ease;
  width: 14px;
  text-align: right;
}
.ff-category[open] > summary .ff-category-chevron {
  transform: rotate(180deg);
  color: var(--accent-2);
}
.ff-category-body {
  padding: 4px 0 12px;
}
.principle-row {
  display: grid;
  grid-template-columns: 1fr 90px 100px 30px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  gap: 12px;
}
.principle-row:hover { background: var(--accent-faint); }
.principle-row:last-child { border-bottom: none; }
.principle-name { color: var(--text); }
.status-pill {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 99px;
  width: fit-content;
  font-weight: 600;
}
.status-pill.settled   { background: var(--accent-soft); color: var(--accent-2); }
.status-pill.candidate { background: #fef3c7; color: #92400e; }
.derivation-chip {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.principle-row .arc-arrow {
  color: var(--text-4);
  font-family: var(--mono);
  text-align: right;
}
.principle-row:hover .arc-arrow { color: var(--accent-2); }
.principles-see-all {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent-2);
  margin-top: 8px;
  display: inline-block;
}

.theory-empty {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 28px;
  text-align: center;
  color: var(--text-3);
  font-style: italic;
  font-family: var(--serif);
}

.vision-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.vision-card {
  background: var(--bg-card);
  padding: 22px 24px;
  border-radius: 4px;
  border-left: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
}
.vision-card.northstar { border-left-color: var(--arc-emergent); }
.vision-card-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.vision-card-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.vision-card-essence {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  flex: 1;
}
.vision-card-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
}

.layer-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 32px;
}
.layer-cell {
  padding: 16px 18px;
  background: var(--bg-card);
  border-radius: 3px;
  border-bottom: 3px solid;
}
.layer-cell.l1 { border-bottom-color: #15803d; }
.layer-cell.l2 { border-bottom-color: #65a30d; }
.layer-cell.l3 { border-bottom-color: #ca8a04; }
.layer-cell.l4 { border-bottom-color: #c2410c; }
.layer-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}
.layer-name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}
.layer-desc {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

.scope-stage-matrix {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr;
  gap: 2px;
}
.matrix-corner { background: transparent; }
.matrix-col-label, .matrix-row-label {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 12px 14px;
}
.matrix-col-label {
  color: var(--text-3);
  background: transparent;
  text-align: center;
  padding-bottom: 8px;
}
.matrix-row-label {
  color: var(--text);
  background: var(--bg-card);
  border-radius: 2px;
}
.matrix-row-label .row-sub {
  display: block;
  font-weight: 400;
  font-size: 10px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
  font-style: italic;
}
.matrix-cell {
  background: var(--bg-card);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  border-radius: 2px;
}

/* ───── LOG PAGE ──────────────────────────────────────────── */

.timeline-wrap {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  position: relative;
}
.timeline-axis {
  border-right: 2px solid var(--border);
  padding-right: 16px;
  position: relative;
}
.timeline-month {
  position: absolute;
  right: 20px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 2px;
}
.timeline-month .yr {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}
/* timeline-month-tick removed — created a strikethrough effect on the month
   label (top:6px positioned mid-text). The axis border-right already provides
   the visual line. */

.timeline-events {
  position: relative;
  height: 640px;
  padding-left: 24px;
}
.timeline-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  left: 18px;
  cursor: pointer;
  z-index: 2;
}
.timeline-dot.log      { background: var(--accent); }
.timeline-dot.decision { background: var(--arc-unknown); }
.timeline-dot.adr      { background: #3b82f6; }
.timeline-dot.lesson   { background: #94a3b8; }
.timeline-dot.friction { background: #dc2626; }

.timeline-event {
  position: absolute;
  left: 44px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-2);
  white-space: nowrap;
  z-index: 1;
}
.timeline-event .ev-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-right: 8px;
}
.timeline-key {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
}
.timeline-key-item { display: flex; align-items: center; gap: 6px; }
.timeline-key-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.decisions-list { display: flex; flex-direction: column; }
.decision-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  align-items: center;
}
.decision-row:hover { background: var(--accent-faint); }
.decision-date { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.decision-title { color: var(--text); }
.decision-tag {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--bg-card);
  padding: 3px 8px;
  border-radius: 99px;
}

.adr-table {
  display: grid;
  grid-template-columns: 90px 1fr 130px;
  gap: 0;
}
.adr-table > * {
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.adr-th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-2);
}
.adr-code { font-family: var(--mono); font-size: 13px; color: var(--text); }
.adr-title { color: var(--text); }
.adr-status {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.adr-status.active { color: var(--accent-2); font-weight: 600; }
.adr-status.superseded { color: var(--text-3); }
.adr-table .superseded.adr-title { text-decoration: line-through; color: var(--text-3); }

.lessons-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.lessons-block {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 20px 22px;
}
.lessons-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-2);
}
.lessons-block-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lessons-block-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.lesson-entry {
  font-size: 13px;
  color: var(--text-2);
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-2);
  line-height: 1.5;
}
.lesson-entry:last-child { border-bottom: none; }
.lesson-entry-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-right: 8px;
}

.friction-empty {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 28px;
  text-align: center;
  color: var(--text-3);
}
.friction-empty .resolved-link {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
}

/* ═════════════════════════════════════════════════════════════
   ITERATION 4 ADDITIONS
   - Collapsible A1 arc panel (Home only)
   - In-flight milestones rail block (all four pages)
   - Vision sub-nav
   ═════════════════════════════════════════════════════════════ */

/* ───── collapsible arc panel ─────────────────────────────── */

.arc-panel-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  outline: none;
}
.arc-panel-summary::-webkit-details-marker { display: none; }
.arc-panel-summary::marker             { display: none; }

.arc-panel-chevron {
  font-family: var(--mono);
  font-size: 13px;
  opacity: 0.75;
  transition: transform 200ms ease;
  margin-left: 8px;
}
details[open] > .arc-panel-summary .arc-panel-chevron {
  transform: rotate(180deg);
}

.arc-panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* ───── in-flight milestones (rail block) ─────────────────── */

.inflight-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.inflight-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inflight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.inflight-head .now-ms-code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  margin: 0;
}
.inflight-pct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.inflight-name {
  font-size: 14px;
  color: var(--text);
  margin: 2px 0 6px;
}
.inflight-rule-caption {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  line-height: 1.4;
}

/* ───── Vision sub-nav ────────────────────────────────────── */

.sub-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin-bottom: 48px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
}
.sub-nav a {
  color: var(--text-2);
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sub-nav a:hover {
  color: var(--accent-2);
  border-bottom-color: var(--border-2);
  text-decoration: none;
}

/* anchor jumps to sections clear the sticky nav */
.col-main section.section { scroll-margin-top: 72px; }

/* ═════════════════════════════════════════════════════════════
   ITERATION 5 ADDITIONS
   - App switcher (4-dots → environment dropdown) in header
   - Header layout absorbs the env-switcher previously in footer
   ═════════════════════════════════════════════════════════════ */

.header-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.app-switcher {
  position: relative;
  display: inline-block;
}

.app-switcher-trigger {
  list-style: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-2);
  transition: background 120ms, color 120ms;
  outline: none;
  position: relative;
  top: 2px;
}
.app-switcher-trigger::-webkit-details-marker { display: none; }
.app-switcher-trigger::marker { display: none; }
.app-switcher-trigger:hover {
  background: var(--bg-card);
  color: var(--text);
}
.app-switcher[open] .app-switcher-trigger {
  background: var(--bg-card);
  color: var(--text);
}
.app-switcher-trigger svg {
  display: block;
}

.app-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 360px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 6px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-switcher-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: var(--bg);
  border-left: 1px solid var(--border-2);
  border-top: 1px solid var(--border-2);
  transform: rotate(45deg);
}

.env-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 10px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  position: relative;
}
.env-item:hover {
  background: var(--bg-card);
  text-decoration: none;
}
.env-item.current {
  background: var(--accent-faint);
}
.env-item.current::after {
  content: '●';
  position: absolute;
  right: 14px;
  top: 12px;
  color: var(--accent);
  font-size: 10px;
}

.env-item-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  grid-column: 1;
  grid-row: 1;
}
.env-item-desc {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  grid-column: 1;
  grid-row: 2;
}
.env-item-url {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.env-item.current .env-item-url {
  padding-right: 14px;
}

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   - 900px: rail stacks below main, room cards stack, sub-nav scrolls
   - 700px: matrix stacks, FP grid → 2 cols, horizon A2-A6 wrap below A1
   - 500px: nav wraps below brand, FP grid → 1 col, tooltips constrained
   ═════════════════════════════════════════════════════════════ */

/* ───── ≤ 900px (tablet) ─────────────────────────────────── */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .col-main {
    padding: 0 24px 48px;
    border-right: none;
  }
  .col-rail {
    padding: 32px 24px 48px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, #f7f4ec 0%, var(--bg) 100%);
  }
  .site-header {
    padding: 18px 0 14px;
    margin-bottom: 32px;
  }
  .breadcrumb-large {
    font-size: 24px;
    line-height: 1.3;
  }
  .breadcrumb-large .sep {
    margin: 0 8px;
  }
  .rooms {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vision-pair,
  .lessons-pair {
    grid-template-columns: 1fr;
  }
  .sub-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .sub-nav a {
    white-space: nowrap;
  }
  .layer-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ───── ≤ 700px (large mobile) ───────────────────────────── */
@media (max-width: 700px) {
  .scope-stage-matrix {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .matrix-corner,
  .matrix-col-label {
    display: none;
  }
  .matrix-row-label {
    margin-top: 16px;
    padding-bottom: 4px;
  }
  .matrix-row-label:first-of-type {
    margin-top: 0;
  }
  .fp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .horizon-panel {
    grid-template-columns: repeat(5, minmax(40px, 1fr));
  }
  .horizon-panel > .arc-panel {
    grid-column: 1 / -1;
  }
  .horizon-panel > .horizon-cell {
    min-height: 48px;
  }
  .phase-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .phase-arrow {
    display: none;
    transform: rotate(90deg);
  }
  .ms-row {
    grid-template-columns: 50px 1fr 80px 70px;
    gap: 10px;
    font-size: 13px;
  }
  /* Phase row: the 4-column desktop layout clips text on narrow viewports.
     Stack vertically so each card gets full width. */
  .phase-row-4 {
    grid-template-columns: 1fr;
  }
  .phase-card {
    height: auto;
    min-height: 56px;
  }
}

/* ───── ≤ 500px (mobile phone) ───────────────────────────── */
@media (max-width: 500px) {
  .site-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
  }
  .nav .search-icon {
    margin-left: auto;
  }
  .fp-grid {
    grid-template-columns: 1fr;
  }
  .layer-strip {
    grid-template-columns: 1fr;
  }
  .okr-tooltip {
    width: auto;
    max-width: calc(100vw - 80px);
    left: -4px;
    right: auto;
  }
  .breadcrumb-large {
    font-size: 20px;
  }
  .breadcrumb-large .sep {
    margin: 0 4px;
  }
  .breadcrumb-caption {
    font-size: 12px;
  }
  .arc-panel {
    padding: 16px 18px;
  }
  .arc-panel-essence {
    font-size: 13px;
  }
  .app-switcher-menu {
    width: min(360px, calc(100vw - 32px));
  }
  .timeline-wrap {
    grid-template-columns: 60px 1fr;
  }
  .timeline-events {
    height: 720px;
  }
  .principle-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    padding: 12px 4px;
  }
  .principle-row .principle-name {
    grid-column: 1 / -1;
  }
  .principle-row .status-pill {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .principle-row .derivation-chip {
    grid-column: 2;
    grid-row: 2;
  }
  .principle-row .arc-arrow {
    display: none;
  }
  .ms-row {
    grid-template-columns: 50px 1fr 80px;
    gap: 8px;
    font-size: 12px;
  }
  .ms-row .ms-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ms-row {
    grid-template-rows: auto auto;
  }
  /* Pin every child to an explicit cell. Without explicit columns,
     `.ms-state` with `grid-row: 1` is placed before the auto-placed
     `.ms-code` / `.ms-name`, dragging it to column 1 ahead of them. */
  .ms-row .ms-code { grid-column: 1; grid-row: 1; }
  .ms-row .ms-name { grid-column: 2; grid-row: 1; }
  .ms-row .ms-state { grid-column: 3; grid-row: 1; justify-self: end; }
  /* Section heads with long h2 + long meta: let them stack instead of
     each line-wrapping inside its half. */
  .section-head {
    flex-wrap: wrap;
    gap: 4px;
  }
  .col-rail {
    padding: 24px 20px 40px;
  }
  .col-main {
    padding: 0 20px 40px;
  }
  .page-title {
    font-size: 30px;
  }
  .room-counts {
    font-size: 12px;
  }
  .scope-stage-matrix .matrix-row-label {
    font-size: 12px;
  }
  .ff-row {
    grid-template-columns: 80px 1fr 24px;
  }
  .ff-title {
    font-size: 13px;
  }
  .decision-row {
    grid-template-columns: 70px 1fr;
    gap: 8px 12px;
  }
  .decision-row .decision-tag {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .adr-table {
    grid-template-columns: 70px 1fr 90px;
    font-size: 12px;
  }
}

/* ═════════════════════════════════════════════════════════════
   ITERATION 6 — Collapsible list rows (details + summary)
   - Milestones (Roadmap): expand → show tasks from todo.md
   - Named principles (Vision): expand → show source + derivation
   - Arcs (Vision): expand → show essence + thesis + closure
   - Single-open-at-a-time via shared `name` attribute on <details>
   ═════════════════════════════════════════════════════════════ */

/* Wrapper resets — let summary use the existing row layouts */
.ms-row-wrap,
.principle-row-wrap {
  border-bottom: 1px solid var(--border);
}
.ms-row-wrap:last-child,
.principle-row-wrap:last-child {
  border-bottom: none;
}

/* Suppress default disclosure triangle so the rows look identical */
.ms-row-wrap > summary,
.principle-row-wrap > summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}
.ms-row-wrap > summary::-webkit-details-marker,
.principle-row-wrap > summary::-webkit-details-marker { display: none; }
.ms-row-wrap > summary::marker,
.principle-row-wrap > summary::marker { display: none; }

/* Override the per-row bottom border — the wrap now owns it */
.ms-row-wrap > summary.ms-row,
.principle-row-wrap > summary.principle-row {
  border-bottom: none;
}

/* Visual cues: hover and open state */
.ms-row-wrap > summary:hover,
.principle-row-wrap > summary:hover {
  background: var(--accent-faint);
}
.ms-row-wrap[open] > summary,
.principle-row-wrap[open] > summary {
  background: var(--accent-faint);
}

/* Chevron rotation — reuses arc-arrow span as the indicator */
.ms-row-wrap > summary .arc-arrow,
.principle-row-wrap > summary .arc-arrow {
  transition: transform 180ms ease;
}
.ms-row-wrap[open] > summary .arc-arrow,
.principle-row-wrap[open] > summary .arc-arrow {
  transform: rotate(90deg);
  color: var(--accent-2);
}

/* Expanded body ─ shared base */
.ms-body,
.principle-body {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 14px 20px 18px 70px;
  font-family: var(--sans);
}

/* ─── Milestone body sections (done-when · deliverables · tasks) ─── */
.ms-section { margin-bottom: 16px; }
.ms-section:last-child { margin-bottom: 0; }
.ms-section-label {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.ms-section-source {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-4);
  font-weight: normal;
}
.ms-section-source code {
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-4);
}
.ms-criteria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--text);
}
.ms-criteria li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: baseline;
  line-height: 1.45;
}
.ms-criteria .ms-icon {
  font-family: var(--mono);
  text-align: center;
  color: var(--text-4);
}
.ms-criteria code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ─── Milestone tasks ─── */
.ms-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ms-tasks li {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  gap: 10px;
  align-items: baseline;
  line-height: 1.45;
}
.ms-tasks .task-icon {
  font-family: var(--mono);
  text-align: center;
}
.ms-tasks .task.done     .task-icon { color: var(--accent-2); }
.ms-tasks .task.deferred .task-icon { color: var(--text-3); }
.ms-tasks .task.flight   .task-icon { color: var(--status-active); }
.ms-tasks .task.todo     .task-icon { color: var(--text-4); }
.ms-tasks .task.done     .task-text { color: var(--text-3); }
.ms-tasks .task.deferred .task-text { color: var(--text-3); font-style: italic; }
.ms-tasks .task-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.ms-tasks .task-text {
  color: var(--text);
}
.ms-body-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-3);
}
.ms-body-count {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* ─── Principle body ─── */
.principle-body {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.principle-body code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 0.92em;
}
.principle-body .principle-derivation-full {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text);
}
.principle-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.principle-text-missing {
  font-style: italic;
  color: var(--text-3);
  font-size: 12px;
}
.principle-read-more {
  font-size: 12px;
  color: var(--accent-2);
}

/* ─── Markdown content (sub-pages like working-vision) ───────── */
.md-content {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  max-width: 760px;
}
.md-content h1 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  line-height: 1.2;
}
.md-content h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.md-content h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  margin: 28px 0 10px;
}
.md-content p { margin: 0 0 14px; }
.md-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}
.md-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 0 0 14px;
  color: var(--text-2);
  font-style: italic;
}
.md-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.md-content li { margin-bottom: 6px; }
.md-content code {
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.88em;
}
.md-content strong { font-weight: 600; }
.md-content em { font-style: italic; }
.md-content table.md-table {
  border-collapse: collapse;
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 13px;
  width: 100%;
}
.md-content table.md-table th,
.md-content table.md-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.md-content table.md-table th {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-2);
}
.md-content table.md-table code {
  font-size: 11px;
  white-space: nowrap;
}

/* ─── Working-vision specific blocks ───────────────────────── */

/* Two-column lists (is-not/is, commits-to/does-not-commit) */
.md-content .two-col-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 18px 0 22px;
}
.md-content .two-col-block .col {
  padding: 18px 22px;
  border-radius: 4px;
  background: var(--bg-card);
  position: relative;
}
.md-content .two-col-block .col-negative {
  border-left: 3px solid var(--arc-speculative);
}
.md-content .two-col-block .col-positive {
  border-left: 3px solid var(--accent);
}
.md-content .two-col-block .col-head {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.md-content .two-col-block .col-head strong {
  font-weight: 600;
}
.md-content .two-col-block ul {
  margin: 0;
  padding-left: 20px;
}
.md-content .two-col-block li {
  font-size: 14px;
  line-height: 1.5;
}

/* Exit Gate claim cards */
.md-content .claim-card {
  background: var(--bg-card);
  border-radius: 4px;
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
  margin: 18px 0;
}
.md-content .claim-card .claim-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--text);
  padding-bottom: 0;
  border-bottom: none;
  text-transform: none;
  letter-spacing: 0;
}
.md-content .claim-card blockquote {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--border-2);
  font-size: 15px;
  color: var(--text);
  font-style: italic;
  line-height: 1.55;
}
.md-content .claim-card p {
  margin: 0 0 10px;
  font-size: 14px;
}
.md-content .claim-card p:last-child {
  margin-bottom: 0;
}
.md-content .claim-card strong:first-child {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Mobile: stack the two-col blocks */
@media (max-width: 700px) {
  .md-content .two-col-block {
    grid-template-columns: 1fr;
  }
}
    /* ═════ ITERATION 8 ADDITIONS (mock-only — port to src/style.css on approval) ═════
       - Phase banner (mirrors arc-panel pattern, content from stratification §Phase outlines)
       - For-future brief collapsibles (full body on expand)
       - Maybelater banner (collapsible) */

    /* ═════ Monochromatic palettes ════════════════════════════════
       Arcs = green family. Phases = blue family. Active block in each
       hierarchy is fully saturated; non-active blocks are muted shades
       of the same hue. */

    /* ── Arc cells — green family ──────────────────────────────── */
    /* A1 (active/settled) keeps var(--arc-settled) = #15803d via .arc-panel */
    .horizon-cell.emergent,
    .horizon-cell.unknown,
    .horizon-cell.speculative,
    .horizon-cell.unknowable { color: #4a5a4f; }
    .horizon-cell.emergent    { background: #8aa896; }  /* medium sage */
    .horizon-cell.unknown     { background: #a8c0b2; }
    .horizon-cell.speculative { background: #c2d3c9; }
    .horizon-cell.unknowable  { background: #dde4e0; }

    /* ── Phase cards — blue family ─────────────────────────────── */
    .phase-card.active {
      background: #1e3a8a;          /* vivid blue */
      border: 2px solid #1e3a8a;
      color: white;
    }
    .phase-card.active .phase-code  { color: rgba(255,255,255,0.78); }
    .phase-card.active .phase-name  { color: white; }
    .phase-card.active .phase-state {
      color: white;
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .phase-card.archived {
      background: #e3e8ee;
      border: 1px dashed #94a3b8;
      color: #64748b;
      opacity: 0.85;
    }
    .phase-card.archived .phase-code  { color: #94a3b8; }
    .phase-card.archived .phase-name  { color: #64748b; }
    .phase-card.archived .phase-state { color: #94a3b8; }
    .phase-card.next {
      background: #b8c8e0;
      border: 1px solid #b8c8e0;
      color: #475569;
    }
    .phase-card.next .phase-code  { color: #64748b; }
    .phase-card.next .phase-name  { color: #334155; }
    .phase-card.next .phase-state { color: #475569; font-weight: normal; }
    .phase-card:not(.active):not(.archived):not(.next) {
      background: #d4dde9;
      border: 1px solid #d4dde9;
      color: #64748b;
    }
    .phase-card:not(.active):not(.archived):not(.next) .phase-code  { color: #94a3b8; }
    .phase-card:not(.active):not(.archived):not(.next) .phase-name  { color: #475569; }
    .phase-card:not(.active):not(.archived):not(.next) .phase-state { color: #64748b; }

    /* ─── Position stack — uniform 2px spacing inside and between banners ─ */
    .position-stack {
      display: flex;
      flex-direction: column;
      gap: 2px;             /* match the horizon's inter-cell gap */
      margin-bottom: 40px;
    }
    /* Override .horizon-panel's default 56px bottom margin when inside the stack
       so the phase row sits flush against it. */
    .position-stack > .horizon-panel { margin-bottom: 0; }

    /* Phase row — full width, no arrows; PH2 = 50% (3fr), others share 50% (1fr each).
       Card height matches the collapsed Arc panel (single-row title) — short. */
    .phase-row-4 {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 3fr 1fr 1fr;
      gap: 2px;
      align-items: stretch;
    }
    .phase-card {
      height: 72px;         /* exact match to collapsed arc-panel height */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 3px;
      padding: 10px 18px;
      border-radius: 3px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .phase-card .phase-code {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      opacity: 0.85;
      line-height: 1.3;
      margin: 0;
    }
    .phase-card .phase-name {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.2;
      margin: 0;
      padding: 0;
    }
    .phase-card .phase-state {
      font-family: var(--sans);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      line-height: 1.3;
      margin: 0;
    }

    /* ─── Rail section labels — more prominent (was tiny gray uppercase) */
    .now-block-label {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    /* ─── Active milestone — only the IN FLIGHT pill distinguishes it.
       Row otherwise behaves identically to other milestone rows (same hover
       background, same name weight, same bar height, no side outline). */
    .ms-row.active .ms-state.active {
      background: var(--accent);
      color: white;
      padding: 3px 8px;
      border-radius: 99px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
    }
    /* Override leftover `.ms-row.active { background: var(--accent-faint); }`
       from src/style.css (iter-4 artefact). M5 row should be transparent
       like the other closed rows; hover + open tints still apply via the
       existing selectors that target `:hover` and `[open]`. */
    .ms-row.active { background: transparent; }

    /* For-future briefs — collapsibles */
    .ff-row-wrap {
      border-bottom: 1px solid var(--border);
    }
    .ff-row-wrap:last-child {
      border-bottom: none;
    }
    .ff-row-wrap > summary {
      list-style: none;
      cursor: pointer;
      outline: none;
    }
    .ff-row-wrap > summary::-webkit-details-marker { display: none; }
    .ff-row-wrap > summary::marker { display: none; }
    .ff-row-wrap > summary:hover { background: var(--accent-faint); }
    .ff-row-wrap[open] > summary { background: var(--accent-faint); }
    .ff-row-wrap > summary .ff-arrow {
      transition: transform 180ms ease;
    }
    .ff-row-wrap[open] > summary .ff-arrow {
      transform: rotate(90deg);
      color: var(--accent-2);
    }
    .ff-body {
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      padding: 16px 24px 18px 130px;
      font-family: var(--serif);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .ff-chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ff-chip {
      font-family: var(--sans);
      font-size: 11px;
      padding: 3px 9px;
      border-radius: 99px;
      letter-spacing: 0.02em;
    }
    .ff-chip.parked-from {
      background: var(--bg);
      color: var(--text-2);
      border: 1px solid var(--border-2);
    }
    .ff-chip.parked-from .chip-label {
      color: var(--text-3);
      margin-right: 4px;
    }
    .ff-chip.concerns {
      background: var(--accent-faint);
      color: var(--accent-2);
    }
    .ff-chip.concerns .chip-label {
      color: var(--accent-2);
      opacity: 0.7;
      margin-right: 4px;
    }
    .ff-body-text {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text);
      margin: 0;
    }
    .ff-body-text p { margin: 0 0 10px; }
    .ff-body-text p:last-child { margin-bottom: 0; }
    .ff-body-text code {
      background: var(--bg);
      padding: 1px 5px;
      border-radius: 2px;
      font-size: 0.88em;
    }
    .ff-body-link {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--accent-2);
      align-self: flex-start;
    }
    /* Iter-10: structured brief body — "The thing" + "Why parked" sections
       (or "Context" or generic-prose fallback). Mirrors the FP card body styling. */
    .ff-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ff-section-head {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .ff-section-text {
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.55;
      color: var(--text);
    }

    /* Maybelater banner */
    .maybelater-banner {
      background: var(--bg-card);
      border-radius: 4px;
      overflow: hidden;
    }
    .maybelater-banner > summary {
      list-style: none;
      cursor: pointer;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      outline: none;
    }
    .maybelater-banner > summary::-webkit-details-marker { display: none; }
    .maybelater-banner > summary::marker { display: none; }
    .maybelater-banner > summary:hover { background: var(--bg-card-hov); }
    .maybelater-label {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--text-2);
    }
    .maybelater-count {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-3);
    }
    .maybelater-chevron {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--text-3);
      transition: transform 180ms ease;
      margin-left: 12px;
    }
    .maybelater-banner[open] .maybelater-chevron {
      transform: rotate(180deg);
    }
    .maybelater-body {
      padding: 4px 20px 20px;
      border-top: 1px solid var(--border);
      background: var(--bg);
    }
    .maybelater-group-head {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
      margin: 16px 0 8px;
    }
    .maybelater-body ul {
      margin: 0;
      padding-left: 18px;
      list-style: disc;
    }
    .maybelater-body li {
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-2);
      margin-bottom: 6px;
    }
    .maybelater-body li code {
      background: var(--bg-card);
      padding: 1px 4px;
      border-radius: 2px;
      font-size: 0.92em;
    }
    .maybelater-resolved {
      text-decoration: line-through;
      color: var(--text-3);
      opacity: 0.7;
    }

    /* Removed "Now" from nav; first nav item = Roadmap = home */

/* ═════ Arc explorer ═══════════════════════════════════════
   Combined banner + collapsible list on the Vision page's Arcs section.
   Each arc is a colored block (palette per visibility); clicking the block
   expands the summary inline. A1 is open by default and shows phase pips
   + milestone progress. Mutual-exclusion via the `name="arc-group"`
   attribute on the wrapping <details>. */
.arc-explorer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arc-explorer-item {
  border-radius: 4px;
  overflow: hidden;
  color: #1f2a23;
  background: var(--arc-unknowable);
  transition: background 200ms ease;
}
.arc-explorer-item.settled     { background: var(--arc-settled); color: white; }
.arc-explorer-item.emergent    { background: #8aa896; color: #1a2820; }
.arc-explorer-item.unknown     { background: #a8c0b2; color: #1a2820; }
.arc-explorer-item.speculative { background: #c2d3c9; color: #1a2820; }
.arc-explorer-item.unknowable  { background: #dde4e0; color: #1a2820; }

.arc-explorer-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.arc-explorer-summary::-webkit-details-marker { display: none; }
.arc-explorer-summary::marker { display: none; }
.arc-explorer-summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.arc-explorer-item:not([open]):hover .arc-explorer-summary { filter: brightness(0.96); }

.arc-explorer-code {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
  min-width: 26px;
}
.arc-explorer-name {
  flex: 1;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
}
.arc-explorer-vis {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  white-space: nowrap;
}
.arc-explorer-chevron {
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
  transition: transform 180ms ease;
}
.arc-explorer-item[open] > .arc-explorer-summary .arc-explorer-chevron {
  transform: rotate(180deg);
}

.arc-explorer-body {
  padding: 0 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arc-explorer-phase-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}
.arc-explorer-phase-row .phase-pips { flex: 1; max-width: 240px; }
.arc-explorer-phase-caption {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
}
.arc-explorer-essence {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.arc-explorer-thesis {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}
.arc-explorer-closure {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.22);
  opacity: 0.85;
}
.arc-explorer-item:not(.settled) .arc-explorer-closure {
  border-top-color: rgba(0,0,0,0.13);
}
/* Phase pips on lighter (non-settled) backgrounds need a darker tint —
   the default uses rgba(255,255,255,*) which is invisible on light sage.
   Currently only A1 (settled) shows pips, but defending the case. */
.arc-explorer-item:not(.settled) .phase-pip          { background: rgba(0,0,0,0.12); }
.arc-explorer-item:not(.settled) .phase-pip.archived { background: rgba(0,0,0,0.32); }
.arc-explorer-item:not(.settled) .phase-pip.active   {
  background: linear-gradient(to right, #c2792d 35%, rgba(0,0,0,0.12) 35%);
}
.arc-explorer-item:not(.settled) .phase-pip.todo     { background: rgba(0,0,0,0.12); }

@media (max-width: 500px) {
  .arc-explorer-summary {
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .arc-explorer-name { font-size: 15px; }
  .arc-explorer-vis {
    font-size: 10px;
    flex-basis: 100%;
    order: 99;
    padding-left: 36px;
    margin-top: -2px;
    opacity: 0.78;
  }
  .arc-explorer-chevron { margin-left: auto; }
  .arc-explorer-body { padding: 0 16px 16px; }
  .arc-explorer-phase-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .arc-explorer-phase-row .phase-pips { max-width: 100%; }
  .arc-explorer-phase-caption { white-space: normal; }
}

/* ═════════════════════════════════════════════════════════════
   ITER-10 ADDITIONS
   - app-switcher empty-tag for empty PH2 destinations (Capture, Review)
   - a.horizon-cell — A2..A6 cells become anchor links to vision.html#arcs
   - .fp-card-wrap and friends — FP commitments as inline collapsibles
     replacing the static <a class="fp-card"> grid (the old .fp-card
     selectors above remain for any leftover markup; the new
     fp-card-wrap variant is what sync.js now emits)
   ═════════════════════════════════════════════════════════════ */

.env-item-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.env-item-empty-tag {
  font-family: var(--sans);
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
  padding: 2px 6px;
  background: var(--bg-card);
  border-radius: 99px;
  white-space: nowrap;
}

a.horizon-cell { text-decoration: none; }
a.horizon-cell:hover { text-decoration: none; opacity: 0.88; cursor: pointer; }

/* Timeline — flow layout (Log page). Replaces the absolute-positioned layout
   that broke when event count exceeded the per-month band height. Events stack
   sequentially with proportional gaps for density-honest spacing; long titles
   wrap inside the column. The old .timeline-wrap / .timeline-axis /
   .timeline-month / .timeline-events / .timeline-event selectors remain in
   the stylesheet as dead code and may be removed in a cleanup commit. */
.timeline-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-band {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 4px 0;
  margin-top: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.timeline-band:first-child { margin-top: 0; }
.timeline-band .yr {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--text-3);
  margin-left: 8px;
  letter-spacing: 0.04em;
}
.timeline-row {
  display: grid;
  grid-template-columns: 14px 56px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.4;
}
.timeline-row .timeline-dot {
  position: static;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  margin-top: 4px;
  align-self: start;
}
.timeline-row .timeline-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.timeline-row .timeline-title {
  font-family: var(--sans);
  color: var(--text-2);
  min-width: 0;
  /* Allow titles to wrap; long projectlog titles otherwise bleed past the column. */
}

.fp-card-wrap {
  background: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border-2);
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fp-card-wrap:hover {
  background: var(--bg-card-hov);
  border-color: var(--text-4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.fp-card-wrap[open] {
  background: var(--bg-card-hov);
  border-color: var(--text-4);
}
.fp-card-wrap > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  outline: none;
  flex: 1;
}
.fp-card-wrap > summary::-webkit-details-marker,
.fp-card-wrap > summary::marker { display: none; }
.fp-card-wrap .fp-code { font-family: var(--mono); font-size: 11px; color: var(--accent-2); font-weight: 600; letter-spacing: 0.06em; }
.fp-card-wrap .fp-kernel {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  flex: 1;
  letter-spacing: -0.005em;
  min-height: 58px;
}
.fp-card-wrap .fp-arrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-3);
  align-self: flex-end;
  transition: transform 180ms ease;
}
.fp-card-wrap[open] > summary .fp-arrow { transform: rotate(90deg); color: var(--accent-2); }
.fp-body {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fp-section-head {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.fp-section-text {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.fp-essay-link {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--accent-2);
  margin-top: 2px;
}