/* ============================================================
   Noema site V2 — scenario picker + journey stage.
   Motion narrates causality, never decorates (03_MOTION.md).
   ============================================================ */
:root {
  --motion-fast:160ms; --motion-base:320ms; --motion-slow:640ms;
  --motion-ease:cubic-bezier(.2,0,0,1);
  --motion-spring:cubic-bezier(.34,1.3,.64,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; }
}

.hero-pad { padding-top:72px; }

/* ---------- picker ---------- */
.picker-head { display:flex; align-items:baseline; gap:14px; margin-top:48px; }
.picker-meta { font-size:11px; color:var(--text-tertiary); }
.picker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
@media (max-width:980px) { .picker-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .picker-grid { grid-template-columns:1fr; } }
.pick-card { position:relative; text-align:left; background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:18px 18px 16px; cursor:pointer; font-family:var(--font-sans);
  transition:border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease),
             transform var(--motion-fast) var(--motion-ease); }
.pick-card:hover { border-color:var(--brand-accent); transform:translateY(-1px); }
.pick-card .pk-ix { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); }
.pick-card .pk-t { display:block; font-size:var(--text-lg); font-weight:600; color:var(--text-primary); margin-top:8px; line-height:1.3; text-wrap:balance; }
.pick-card .pk-s { display:block; font-size:var(--text-sm); color:var(--text-secondary); margin-top:6px; line-height:1.45; }
.pick-card .pk-go { position:absolute; top:16px; right:16px; color:var(--text-tertiary); transition:color var(--motion-fast), transform var(--motion-fast) var(--motion-ease); }
.pick-card:hover .pk-go { color:var(--brand-accent); transform:translateX(2px); }
.pick-card.played .pk-ix::after { content:" · played ✓"; color:var(--confidence-high-fg); }

/* ---------- stage shell ---------- */
.stage-section { padding:24px 0 64px; }
.stage-screen { box-shadow:var(--shadow-float); }
.stage-leave { margin-left:auto; background:none; border:none; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--text-xs); color:var(--text-tertiary); padding:4px 6px; border-radius:var(--radius-sm); }
.stage-leave:hover { color:var(--text-primary); background:var(--bg-hover); }
.stage-head { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 18px;
  border-bottom:1px solid var(--border-subtle); }
.stage-head-l { display:flex; align-items:center; gap:10px; min-width:0; }
.stage-client { font-weight:600; font-size:var(--text-md); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px;
  border-top:1px solid var(--border-subtle); background:var(--bg-subtle); }
.stage-next[hidden] { display:none; }
.stage-next.armed { background:var(--status-locked-bg); color:#fff; border-color:transparent; animation:pip-in var(--motion-base) var(--motion-ease) both; }
[data-theme="dark"] .stage-next.armed { color:#06210F; }

/* ---------- beat rail ---------- */
.beat-rail { display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; max-width:100%; }
.beat-rail::-webkit-scrollbar { display:none; }
.beat-pip { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:500;
  color:var(--text-tertiary); border:1px solid var(--border-subtle); border-radius:99px; padding:4px 10px;
  white-space:nowrap; background:var(--bg-surface);
  transition:color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast),
             opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); }
.beat-pip.now { color:var(--text-primary); border-color:var(--text-primary); font-weight:600; }
.beat-pip.done { color:var(--confidence-high-fg); border-color:color-mix(in oklab, var(--confidence-high-fg) 40%, transparent); }
.beat-pip.dim { opacity:.45; border-style:dashed; }
.beat-pip.enter { animation:pip-in var(--motion-base) var(--motion-ease) both; }
@keyframes pip-in { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } }

/* ---------- canvas + beat layout ---------- */
.stage-canvas { padding:22px 18px; min-height:380px; }
.beat { animation:beat-in var(--motion-base) var(--motion-ease) both; }
@keyframes beat-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.beat-title { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.beat-title .bt { font-size:var(--text-xl); font-weight:600; color:var(--text-primary); letter-spacing:-.01em; }
.beat-title .bs { font-size:var(--text-sm); color:var(--text-secondary); }
.beat-prompt { display:inline-flex; align-items:center; gap:8px; margin:10px 0 16px; font-size:var(--text-sm);
  font-weight:500; color:var(--brand-accent); background:var(--brand-accent-tint);
  border-radius:99px; padding:5px 12px; }
.beat-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:760px) { .beat-cols { grid-template-columns:1fr; } }

/* ---------- generic rows / registers ---------- */
.reg { display:flex; flex-direction:column; }
.reg-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); }
.reg-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-sm); color:var(--text-primary);
  transition:background var(--motion-fast), border-color var(--motion-fast); }
.reg-row:last-child { border-bottom:none; }
.reg-row .grow { flex:1; min-width:0; }
.reg-row.ghost { color:var(--text-tertiary); font-style:italic; border-bottom:none; }
.reg-row.hot { background:color-mix(in oklab, var(--brand-accent) 8%, transparent); }
.reg-row.lit { background:color-mix(in oklab, var(--confidence-high-fg) 10%, transparent); }
.reg-row.settled { animation:settle var(--motion-fast) var(--motion-ease); }
@keyframes settle { 50% { transform:scaleY(.96); } }
.reg-row.row-in { animation:row-in var(--motion-base) var(--motion-ease) both; }
@keyframes row-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ---------- shape beat ---------- */
.manifest-list .reg-row { cursor:default; }
.comp-toggle { display:inline-flex; align-items:center; flex:0 0 auto; width:34px; height:20px; border-radius:99px;
  border:1px solid var(--border-default); background:var(--bg-subtle); cursor:pointer; position:relative;
  transition:background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast); }
.comp-toggle i { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:99px;
  background:var(--text-tertiary); transition:transform var(--motion-fast) var(--motion-ease), background var(--motion-fast); }
.comp-toggle[aria-checked="true"] { background:var(--brand-accent-tint); border-color:var(--brand-accent); }
.comp-toggle[aria-checked="true"] i { transform:translateX(14px); background:var(--brand-accent); }
.comp-toggle[disabled] { opacity:.5; cursor:not-allowed; }
.estimate { display:flex; align-items:baseline; gap:8px; padding:14px 16px; }
.estimate .ev { font-family:var(--font-mono); font-size:28px; font-weight:500; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.estimate .el { font-size:var(--text-sm); color:var(--text-secondary); }
.estimate.bump .ev { animation:bump var(--motion-base) var(--motion-spring); }
@keyframes bump { 40% { transform:translateY(-3px); } }
.mini-rail { display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 14px; }
.mini-phase { font-size:var(--text-xs); font-weight:500; color:var(--text-secondary); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:4px 9px; background:var(--bg-surface);
  transition:opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); }
.mini-phase.in { animation:pip-in var(--motion-base) var(--motion-ease) both; }
.mini-phase.out { opacity:0; transform:translateX(-6px); }

/* ---------- value beat ---------- */
.vtree { padding:14px 16px; }
.vroot { font-weight:600; font-size:var(--text-md); color:var(--text-primary); padding-bottom:10px;
  border-bottom:1px solid var(--border-subtle); margin-bottom:8px; }
.vdriver { border:1px solid var(--border-subtle); border-radius:var(--radius-md); margin-top:8px; overflow:hidden; }
.vdriver-head { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; background:var(--bg-surface);
  border:none; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); text-align:left; }
.vdriver-head:hover { background:var(--bg-hover); }
.vdriver-head .vr { margin-left:auto; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-secondary); white-space:nowrap; }
.vdriver-head .car { color:var(--text-tertiary); transition:transform var(--motion-fast) var(--motion-ease); }
.vdriver.open .vdriver-head .car { transform:rotate(90deg); }
.vleaves { border-top:1px solid var(--border-subtle); background:var(--bg-subtle); }
.vleaf { display:flex; align-items:center; gap:8px; padding:8px 12px 8px 28px; font-size:var(--text-sm); color:var(--text-secondary); }
.vleaf .ev-ct { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.vleaf .ev-ct.tick { color:var(--confidence-high-fg); animation:bump var(--motion-base) var(--motion-spring); }
.beat-dim { text-align:center; padding:56px 24px; }
.beat-dim .bd-t { font-size:var(--text-lg); font-weight:600; color:var(--text-tertiary); }
.beat-dim .bd-s { font-size:var(--text-sm); color:var(--text-tertiary); margin-top:8px; max-width:46ch; margin-inline:auto; }

/* ---------- prepare beat ---------- */
.owner-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px) { .owner-cols { grid-template-columns:1fr; } }
.owner-col-h { display:flex; align-items:center; gap:8px; font-size:var(--text-xs); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); padding:10px 12px;
  border-bottom:1px solid var(--border-subtle); }
.stake { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-sm); background:var(--bg-surface); }
.stake:last-child { border-bottom:none; }
.stake .sn { font-weight:500; color:var(--text-primary); }
.stake .sr { color:var(--text-tertiary); font-size:var(--text-xs); }
.stake .flip-btn { margin-left:auto; flex:0 0 auto; background:var(--btn-secondary-bg); border:1px solid var(--btn-secondary-border);
  border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:11px; font-weight:500; color:var(--text-secondary);
  padding:3px 8px; cursor:pointer; }
.stake .flip-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.stake.travel { animation:travel-in var(--motion-base) var(--motion-ease) both; }
@keyframes travel-in { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
.capacity-chip { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:var(--text-sm);
  font-weight:500; color:var(--text-primary); background:var(--bg-subtle); border:1px solid var(--border-subtle);
  border-radius:99px; padding:6px 14px; }
.capacity-chip b { font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums; }
.capacity-chip.bump { animation:bump var(--motion-base) var(--motion-spring); }

/* ---------- conduct beat ---------- */
.transcript { padding:6px 0; max-height:340px; overflow-y:auto; }
.tline { display:flex; gap:10px; padding:7px 14px; font-size:var(--text-sm); line-height:1.5; opacity:0; }
.tline.shown { opacity:1; transition:opacity var(--motion-fast); }
.tline .who { flex:0 0 auto; font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); padding-top:2px; width:52px; }
.tline .tx { color:var(--text-secondary); }
.tline .tx mark { background:color-mix(in oklab, var(--brand-accent) 22%, transparent); color:var(--text-primary);
  border-radius:2px; padding:0 2px; transition:background var(--motion-slow) var(--motion-ease); }
.tline .tx mark.cool { background:transparent; }
.caret { display:inline-block; width:7px; height:14px; background:var(--text-tertiary); vertical-align:-2px;
  animation:caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation:none; } }
.items-col-h { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); }
.item-card { border:1px solid var(--border-default); border-radius:var(--radius-md); margin:10px 12px; background:var(--bg-surface);
  transition:border-color var(--motion-fast), box-shadow var(--motion-fast); }
.item-card.land { animation:land var(--motion-base) var(--motion-spring) both; }
@keyframes land { from { opacity:0; transform:translateY(-14px) scale(.97); } to { opacity:1; transform:none; } }
.item-card.accepted { border-color:color-mix(in oklab, var(--confidence-high-fg) 55%, transparent); }
.item-head { display:flex; align-items:center; gap:7px; padding:10px 12px 0; flex-wrap:wrap; }
.item-body { padding:8px 12px 10px; font-size:var(--text-sm); color:var(--text-primary); line-height:1.5; }
.item-prov { padding:0 12px 10px; }
.item-actions { display:flex; gap:8px; padding:0 12px 12px; }
.ia-btn { background:var(--btn-secondary-bg); border:1px solid var(--btn-secondary-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:500; color:var(--text-primary); padding:5px 10px; cursor:pointer;
  transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); }
.ia-btn:hover { background:var(--bg-hover); }
.ia-btn.ok { background:var(--confidence-high-bg); border-color:transparent; color:var(--confidence-high-fg); font-weight:600; }
.chip.morph { animation:morph var(--motion-fast) var(--motion-ease); }
@keyframes morph { 50% { transform:scale(.92); } }
.fly-chip { position:fixed; z-index:90; pointer-events:none; will-change:transform; }

/* ---------- synthesize beat ---------- */
.precond { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.pc-chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:500;
  border-radius:99px; padding:4px 10px; color:var(--confidence-medium-fg); background:var(--confidence-medium-bg);
  transition:color var(--motion-fast), background var(--motion-fast); }
.pc-chip.green { color:var(--confidence-high-fg); background:var(--confidence-high-bg); }
.lock-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:var(--text-base);
  font-weight:600; border-radius:var(--radius-md); padding:10px 16px; border:1px solid var(--border-default);
  background:var(--bg-subtle); color:var(--text-tertiary); cursor:not-allowed;
  transition:background var(--motion-base) var(--motion-ease), color var(--motion-base), border-color var(--motion-base); }
.lock-btn.armed { background:var(--status-locked-bg); color:#fff; border-color:transparent; cursor:pointer; }
[data-theme="dark"] .lock-btn.armed { color:#06210F; }
.resolve-row { display:flex; gap:8px; flex-wrap:wrap; padding:10px 12px; }
.stage-canvas.lockedglow .reg { border-color:color-mix(in oklab, var(--status-locked-bg) 45%, transparent); }
.flowstrip { display:flex; align-items:center; gap:0; padding:16px 14px; overflow-x:auto; }
.fnode { flex:0 0 auto; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-surface);
  padding:8px 12px; min-width:104px; transition:opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease),
  border-color var(--motion-base); }
.fnode .ft { display:block; font-size:var(--text-xs); font-weight:600; color:var(--text-primary); line-height:1.3; }
.fnode .fs { display:block; font-size:11px; color:var(--text-tertiary); margin-top:3px; }
.fnode.variant { border-color:color-mix(in oklab, var(--scope-variant-fg) 50%, transparent); background:var(--scope-variant-bg); }
.fnode.variant .ft { color:var(--scope-variant-fg); }
.fnode.entangled { border-style:dashed; border-color:color-mix(in oklab, var(--finding-risk-fg) 55%, transparent); }
.fnode.fold { opacity:0; transform:translateY(-12px) scale(.9); }
.fedge { flex:0 0 auto; width:22px; height:1px; background:var(--border-default); position:relative;
  transition:opacity var(--motion-slow) var(--motion-ease), width var(--motion-slow) var(--motion-ease); }
.fedge.fold { opacity:0; width:0; }
.fnode { max-width:220px; transition:opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease),
  border-color var(--motion-base), max-width var(--motion-slow) var(--motion-ease), min-width var(--motion-slow) var(--motion-ease),
  padding var(--motion-slow) var(--motion-ease), border-width var(--motion-slow) step-end; }
.fnode.fold { min-width:0; max-width:0; padding-left:0; padding-right:0; border-width:0; overflow:hidden; }
.fedge::after { content:""; position:absolute; right:0; top:-3px; border:3.5px solid transparent; border-left-color:var(--border-default); }

/* ---------- deliver beat ---------- */
.deliv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px) { .deliv-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .deliv-grid { grid-template-columns:1fr; } }
.deliv-card { display:flex; flex-direction:column; gap:6px; padding:16px; }
.deliv-card .fmt { align-self:flex-start; font-family:var(--font-mono); font-size:11px; font-weight:500;
  border-radius:var(--radius-sm); padding:2px 7px; }
.fmt-xlsx { color:var(--confidence-high-fg); background:var(--confidence-high-bg); }
.fmt-docx { color:var(--finding-requirement-fg); background:var(--finding-requirement-bg); }
.fmt-pptx { color:var(--finding-risk-fg); background:var(--finding-risk-bg); }
.deliv-card .dn { font-size:var(--text-base); font-weight:600; color:var(--text-primary); }
a.deliv-card.dl { text-decoration:none; transition:border-color var(--motion-fast), transform var(--motion-fast) var(--motion-ease); }
a.deliv-card.dl:hover { border-color:var(--brand-accent); transform:translateY(-1px); }
a.deliv-card.dl:hover .dv { color:var(--brand-accent); }
.deliv-card .dv { font-size:11px; color:var(--text-tertiary); }
.trace-stack { display:flex; flex-direction:column; gap:0; }
.t-station { position:relative; border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--bg-surface); padding:11px 14px; margin-top:14px;
  transition:border-color var(--motion-base), background var(--motion-base); }
.t-station:first-child { margin-top:0; }
.t-station .tsl { display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); }
.t-station .tst { display:block; font-size:var(--text-sm); color:var(--text-primary); margin-top:4px; line-height:1.45; }
.t-station::before { content:""; position:absolute; left:22px; top:-14px; width:1px; height:14px; background:var(--border-default);
  transition:background var(--motion-base); }
.t-station:first-child::before { display:none; }
.t-station.lit { border-color:color-mix(in oklab, var(--brand-accent) 60%, transparent);
  background:color-mix(in oklab, var(--brand-accent) 6%, var(--bg-surface)); }
.t-station.lit::before { background:var(--brand-accent); }
.doc-line { cursor:pointer; }
.doc-line:hover { background:var(--bg-hover); }
.doc-line.src { background:color-mix(in oklab, var(--brand-accent) 10%, transparent); }

/* ---------- end card ---------- */
.end-card { text-align:center; padding:48px 24px; }
.end-card .ec-t { font-size:clamp(22px,3vw,30px); font-weight:600; letter-spacing:-.015em; color:var(--text-primary); text-wrap:balance; }
.end-card .ec-b { font-size:var(--text-md); color:var(--text-secondary); max-width:54ch; margin:14px auto 0; line-height:1.6; }
.end-card .ec-cta { display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:28px; }

/* draft state stack (static section A) */
.draft-stack { display:flex; flex-direction:column; gap:12px; }

/* ---------- hero visual ---------- */
.hero-visual .screen { box-shadow:var(--shadow-float); }
.hero-vis-cap { display:block; font-size:11px; color:var(--text-tertiary); margin-top:10px; }

/* ---------- beat rail as navigation ---------- */
.beat-pip { font-family:var(--font-sans); cursor:pointer; }
.beat-pip:hover:not(.now) { color:var(--text-primary); border-color:var(--border-default); background:var(--bg-hover); }
.beat-pip.now { cursor:default; }

/* ---------- shape: engagement facts ---------- */
.fact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-subtle);
  border-top:1px solid var(--border-subtle); }
.fact { display:flex; flex-direction:column; gap:3px; padding:10px 16px; background:var(--bg-surface); }
.fact .fk { font-size:11px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); }
.fact .fv { font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }

/* ---------- process model inside a beat ---------- */
.model-frame .pm-canvas { min-height:0; }
.pnode.entn { border-style:dashed; border-color:color-mix(in oklab, var(--finding-risk-fg) 55%, transparent); }
.pnode, .pedge, .pm-branch { transition:opacity var(--motion-slow) var(--motion-ease); }
.pnode.foldout { opacity:0; transform:translateY(-14px) scale(.92);
  transition:opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); }
.pedge.foldout, .pm-branch.foldout { opacity:0; }

@media (max-width:560px) {
  .stage-canvas { padding:16px 12px; min-height:300px; }
  .stage-head { padding:12px; gap:10px; }
  .beat-rail { margin-left:0; width:100%; order:3; }
  .transcript { max-height:240px; }
}