/* ============================================================
   primae-demo.css — a self-playing, interactive Primae session.
   Scoped under .pd-*  ·  theme-aware via site tokens.
   ============================================================ */
.pd-wrap { margin: var(--space-xl) auto 0; max-width: 1160px; }
.pd-wrap figcaption { margin-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--color-muted); }

.pd-app {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans); color: var(--color-text);
  --pd-add: #2f9e44; --pd-del: #d64545; --pd-line: var(--color-border);
  container-type: inline-size;
}
@media (prefers-color-scheme: dark) { .pd-app { --pd-add: #4ade80; --pd-del: #f87171; } }

/* titlebar */
.pd-tb { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.pd-dots { display: flex; gap: 6px; }
.pd-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border); }
.pd-title { flex: 1; text-align: center; font-size: 14px; color: var(--color-muted); font-weight: 500; }
.pd-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.pd-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pd-del); transition: background .3s; }
.pd-app.pd-live .pd-status::before { background: var(--pd-add); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-add) 22%, transparent); }

/* body grid */
.pd-body { display: grid; grid-template-columns: 21% 40% 39%; height: 700px; font-size: 14px; }
.pd-col { overflow: hidden; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; min-width: 0; }
.pd-col:last-child { border-right: none; }
.pd-h { font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); padding: 12px 14px 8px; display: flex; justify-content: space-between; align-items: center; }
.pd-scroll { overflow: hidden; flex: 1; min-height: 0; }

/* ---- col 1 · sessions ---- */
.pd-session { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.pd-session.on { opacity: 1; transform: none; }
.pd-session.cur { background: var(--color-surface-hover); }
.pd-s-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--color-border); margin-top: 1px; position: relative; }
.pd-session.run .pd-s-ic { border-color: var(--accent); border-right-color: transparent; animation: pd-spin .8s linear infinite; }
.pd-session.done .pd-s-ic { border-color: var(--pd-add); background: var(--pd-add); }
.pd-session.done .pd-s-ic::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 12px; line-height: 15px; text-align: center; }
@media (prefers-color-scheme: dark){ .pd-session.done .pd-s-ic::after { color: #0b0d12; } }
.pd-s-b { min-width: 0; flex: 1; }
.pd-s-row { display: flex; justify-content: space-between; gap: 8px; }
.pd-s-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-s-when { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); flex: none; }
.pd-s-sub { font-size: 12.5px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pd-s-sub .pd-a { color: var(--pd-add); } .pd-s-sub .pd-d { color: var(--pd-del); }

/* ---- col 2 · plan / chat ---- */
.pd-plan { padding: 14px; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pd-q { border: 1px solid var(--color-border); border-radius: 10px; padding: 11px 13px; font-size: 14px; line-height: 1.5; background: var(--color-bg); }
.pd-q .pd-cursor { display: inline-block; width: 7px; height: 16px; background: var(--accent); vertical-align: -3px; animation: pd-blink 1s steps(1) infinite; }
.pd-stages { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-stage { font: 600 12px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 20px; border: 1px solid var(--color-border); color: var(--color-muted); background: var(--color-bg); transition: all .3s; }
.pd-stage.pd-act { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.pd-stage.done { border-color: color-mix(in srgb, var(--pd-add) 40%, var(--color-border)); color: var(--pd-add); }
.pd-stage.done::before { content: "✓ "; }
.pd-feed { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pd-msg { font-size: 13.5px; line-height: 1.55; color: var(--color-muted); opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; }
.pd-msg.on { opacity: 1; transform: none; }
.pd-chip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--color-border); border-radius: 9px; padding: 9px 12px; background: var(--color-bg); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.pd-chip.on { opacity: 1; transform: none; }
.pd-chip .pd-f { font-family: var(--font-mono); font-size: 13px; color: var(--color-text); flex: 1; }
.pd-chip .pd-a { font-family: var(--font-mono); font-size: 12.5px; color: var(--pd-add); }
.pd-chip .pd-d { font-family: var(--font-mono); font-size: 12.5px; color: var(--pd-del); }
.pd-chip .pd-fi { color: var(--color-muted); }
.pd-input { margin-top: auto; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 13.5px; background: var(--color-bg); }
.pd-input .pd-send { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: var(--btn-primary-fg, #fff); display: grid; place-items: center; font-size: 13px; }

/* ---- col 3 · editor + panels ---- */
.pd-right { display: grid; grid-template-rows: 1.35fr 1fr 1fr; min-height: 0; min-width: 0; }
.pd-editor { border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.pd-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.pd-tab { font-family: var(--font-mono); font-size: 12.5px; padding: 8px 8px; color: var(--color-muted); border-right: 1px solid var(--color-border); white-space: nowrap; }
.pd-tab.pd-act { color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 -2px 0 var(--accent); }
.pd-code { flex: 1; overflow: hidden; min-width: 0; padding: 8px 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.pd-line { padding: 0 12px; white-space: pre; opacity: 0; transition: opacity .18s; color: var(--color-text); }
.pd-line.on { opacity: 1; }
.pd-line.add { background: color-mix(in srgb, var(--pd-add) 14%, transparent); box-shadow: inset 2px 0 0 var(--pd-add); }
.pd-kw { color: #c2185b; } .pd-fn { color: #6f42c1; } .pd-str { color: #2f9e44; } .pd-cm { color: var(--color-muted); } .pd-nm { color: #0b7285; }
@media (prefers-color-scheme: dark){ .pd-kw { color: #ff7ab2; } .pd-fn { color: #b392f0; } .pd-str { color: #7ee787; } .pd-nm { color: #56d4dd; } }

.pd-panels2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; border-bottom: 1px solid var(--color-border); min-height: 0; min-width: 0; }
.pd-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--color-border); overflow: hidden; }
.pd-panel:last-child { border-right: none; }
.pd-graph { width: 100%; flex: 1; display: block; min-height: 0; }
.pd-log { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; padding: 0 12px 8px; overflow: hidden; flex: 1; min-height: 0; color: var(--color-muted); }
.pd-ll { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-ll.on { opacity: 1; transform: none; }
.pd-ll .pd-t { color: var(--accent); }
.pd-checks { padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; flex: 1; }
.pd-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-muted); opacity: 0; transform: translateX(-4px); transition: opacity .35s, transform .35s; }
.pd-check.on { opacity: 1; transform: none; }
.pd-check .pd-ck { flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--pd-add); color: #fff; display: grid; place-items: center; font-size: 12px; }
@media (prefers-color-scheme: dark){ .pd-check .pd-ck { color: #0b0d12; } }
/* V&V flask rack — tiny tube fills as each check lands, then the ✓ pops in */
.pd-check .pd-fl { flex: none; position: relative; width: 9px; height: 15px; border: 1.2px solid var(--color-border); border-radius: 2px 2px 4px 4px; background: var(--color-bg); }
.pd-check .pd-fl::before { content: ""; position: absolute; top: -2.6px; left: -2px; right: -2px; height: 1.4px; border-radius: 1px; background: var(--color-border); }
.pd-check .pd-fl-f { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 0; border-radius: 0 0 2.4px 2.4px; background: var(--accent); transition: height .5s ease, background .3s; }
.pd-check.pd-filled .pd-fl-f { height: 72%; }
.pd-check.pd-passed .pd-fl-f { background: var(--pd-add); }
.pd-check .pd-ck { opacity: 0; transform: scale(.5); transition: opacity .25s, transform .25s; }
.pd-check.pd-passed .pd-ck { opacity: 1; transform: none; }

/* diff gate — per-diff approve/reject card that self-approves and collapses to a slim line */
.pd-gate { flex: none; border: 1px solid var(--color-border); border-radius: 9px; padding: 8px 12px; background: var(--color-bg); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; overflow: hidden; }
.pd-gate.pd-on, .pd-gate.pd-committed { opacity: 1; transform: none; }
.pd-gate-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1); }
.pd-gate-in { overflow: hidden; min-height: 0; }
.pd-gate.pd-committed .pd-gate-body { grid-template-rows: 0fr; }
.pd-gate-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-gate-h { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pd-gate-r { font-size: 13px; line-height: 1.45; color: var(--color-muted); margin-top: 5px; }
.pd-gate-btns { display: flex; gap: 6px; flex: none; }
.pd-gbtn { font: 600 12px/1 var(--font-mono); padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-muted); background: transparent; white-space: nowrap; transition: color .25s, border-color .25s, background .25s, opacity .25s; }
.pd-gate.pd-pressed .pd-gbtn-ok { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); animation: pd-gpress .5s ease-out 1; }
.pd-gate.pd-pressed .pd-gbtn-no { opacity: .45; }
@keyframes pd-gpress { 0% { transform: scale(1); } 40% { transform: scale(.94); box-shadow: 0 0 0 4px var(--accent-soft); } 100% { transform: scale(1); } }
.pd-gate-done { font-family: var(--font-mono); font-size: 12.5px; color: var(--pd-add); max-height: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: max-height .4s ease, opacity .4s ease .1s; }
.pd-gate.pd-committed .pd-gate-done { max-height: 24px; opacity: 1; }

/* honesty tags — roadmap chip in brain headers, footnote under the 24/7 job list */
.pd-roadtag { font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: none; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 20px; padding: 3px 8px; flex: none; opacity: .85; }
.pd-supnote { margin: 2px 14px 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; color: var(--color-muted); opacity: .85; }

.pd-seal { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); opacity: 0; transition: opacity .5s; }
.pd-seal.on { opacity: 1; }
.pd-seal .pd-s-ring { width: 16px; height: 16px; border: 1.6px dashed var(--accent); border-radius: 50%; animation: pd-spin 3s linear infinite; }

@keyframes pd-spin { to { transform: rotate(360deg); } }
@keyframes pd-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .pd-session.run .pd-s-ic, .pd-seal .pd-s-ring, .pd-lane.pd-crowned, .pd-gate.pd-pressed .pd-gbtn-ok { animation: none; } }

/* responsive: stack on narrow */
@media (max-width: 820px) {
  .pd-body { grid-template-columns: 1fr; height: auto; }
  .pd-col { border-right: none; border-bottom: 1px solid var(--color-border); }
  .pd-tab { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pd-right { grid-template-rows: 250px 225px 205px; }
  .pd-plan { height: 400px; }
  .pd-col:first-child { max-height: 250px; }
}

/* ============================================================
   FLEET STRIP — swarm · reach (CUA) · always-on (supervisor)
   ============================================================ */
.pd-strip { display: grid; grid-template-columns: 1.22fr 1.16fr 1fr; border-top: 1px solid var(--color-border); height: 286px; }
.pd-strip > .pd-panel { border-right: 1px solid var(--color-border); min-width: 0; overflow: hidden; }
.pd-strip > .pd-panel:last-child { border-right: none; }
.pd-strip .pd-h span { color: var(--accent); }

/* swarm lanes */
.pd-lanes { padding: 8px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.pd-lane { display: flex; align-items: center; gap: 9px; opacity: .35; transition: opacity .35s; }
.pd-lane.on { opacity: 1; }
.pd-lane-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-muted); width: 106px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-lane-bar { flex: 1; height: 6px; border-radius: 20px; background: var(--color-surface-hover); overflow: hidden; }
.pd-lane-f { height: 100%; width: 4%; background: var(--accent); border-radius: 20px; transition: width 1.5s cubic-bezier(.4, 0, .2, 1); }
.pd-lane.win .pd-lane-f { background: var(--pd-add); }
.pd-lane-s { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); width: 68px; text-align: right; }
.pd-lane.win .pd-lane-s { color: var(--pd-add); font-weight: 700; }
/* shortlist crown — "top pick" tag + brief accent pulse on the winner */
.pd-toppick { flex: none; font: 700 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--color-border)); border-radius: 20px; padding: 3px 7px; }
.pd-lane.pd-crowned { border-radius: 8px; animation: pd-crown .9s ease-out 1; }
@keyframes pd-crown { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.pd-referee { margin: 6px 14px 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); opacity: 0; transition: opacity .4s; }
.pd-referee.on { opacity: 1; }

/* CUA mini browser */
.pd-browser { margin: 8px 14px 8px; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; background: var(--color-bg); }
.pd-bbar { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.pd-bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pd-burl { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pd-bpage { position: relative; height: 78px; padding: 11px 12px; overflow: hidden; }
.pd-bl { height: 6px; border-radius: 3px; background: var(--color-surface-hover); margin-bottom: 7px; opacity: .4; transition: opacity .4s; }
.pd-bpage.loaded .pd-bl { opacity: 1; }
.pd-bcursor { position: absolute; left: 40%; top: 55%; width: 14px; height: 14px; z-index: 2; transition: left .85s cubic-bezier(.4, 0, .2, 1), top .85s cubic-bezier(.4, 0, .2, 1); color: var(--color-text); }
.pd-harvest { margin: 0 14px 8px; font-size: 12.5px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-harvest .pd-hv { color: var(--accent); font-weight: 600; }

/* always-on / supervisor */
.pd-super { padding: 8px 14px 4px; display: flex; flex-direction: column; gap: 7px; }
.pd-job { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-muted); transition: color .3s; }
.pd-job .pd-jd { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--color-border); }
.pd-job.pd-act { color: var(--color-text); }
.pd-job.pd-act .pd-jd { border-color: var(--accent); border-right-color: transparent; animation: pd-spin .8s linear infinite; }
.pd-job.done .pd-jd { border-color: var(--pd-add); background: var(--pd-add); }
.pd-route { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 14px 6px; }
.pd-rc { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--color-border); color: var(--color-muted); white-space: nowrap; }
.pd-rc b { color: var(--accent); font-weight: 600; }
.pd-broker { margin: 0 14px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 6px; }

@media (max-width: 820px) { .pd-strip { grid-template-columns: 1fr; height: auto; } .pd-strip > .pd-panel { border-right: none; border-bottom: 1px solid var(--color-border); } }

/* ---- mini fleet: other sessions running now ---- */
.pd-fleet { margin-bottom: 16px; --pd-add: #2f9e44; }
@media (prefers-color-scheme: dark) { .pd-fleet { --pd-add: #4ade80; } }
.pd-fleet-lead { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 11px; }
.pd-fleet-lead b { color: var(--accent); font-weight: 600; }
.pd-fleet-lead .pd-fleet-live { width: 7px; height: 7px; border-radius: 50%; background: var(--pd-add); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-add) 20%, transparent); flex: none; }
.pd-fleet-lead .pd-fleet-note { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }
.pd-fleet-lead .pd-fleet-note b { color: var(--color-text); font-weight: 600; }
.pd-fleet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pd-mini { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 12px 14px 13px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; transition: border-color .4s; }
.pd-mini::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .55; transition: background .4s, opacity .4s; }
.pd-mini-top { display: flex; align-items: center; gap: 9px; }
.pd-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: pd-mini-pulse 2.2s ease-out infinite; }
.pd-mini-name { font-size: 13.5px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pd-mini-stage { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 20px; padding: 2px 8px; flex: none; }
.pd-mini-bar { height: 5px; border-radius: 20px; background: var(--color-surface-hover); overflow: hidden; }
.pd-mini-f { display: block; height: 100%; width: 8%; background: var(--grad-accent); border-radius: 20px; transition: width .7s cubic-bezier(.4, 0, .2, 1); }
.pd-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--color-muted); }
.pd-mini-pct { font-family: var(--font-mono); font-size: 12px; flex: none; }
.pd-mini.done { border-color: color-mix(in srgb, var(--pd-add) 45%, var(--color-border)); }
.pd-mini.done::before { background: var(--pd-add); opacity: .9; }
.pd-mini.done .pd-mini-dot { background: var(--pd-add); animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-add) 20%, transparent); }
.pd-mini.done .pd-mini-f { background: var(--pd-add); }
.pd-mini.done .pd-mini-foot, .pd-mini.done .pd-mini-msg { color: var(--pd-add); font-weight: 600; }
.pd-mini.done .pd-mini-stage { color: var(--pd-add); border-color: color-mix(in srgb, var(--pd-add) 45%, var(--color-border)); }
@keyframes pd-mini-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 820px) { .pd-fleet-row { grid-template-columns: 1fr; } .pd-fleet-lead .pd-fleet-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .pd-mini-dot { animation: none; } }