/* PANTHEON v5 — "on-chain instrument" identity.
   Deliberately COOL + hard + technical to break from the warm/organic/serif/gold house style
   of the previous project (Holotype) and from v4's neutral-gold minimal look.
   Only transform/opacity animated; all loops respect prefers-reduced-motion. */

:root{
  --bg:#0a0f18;
  --surface:#0f1622;
  --surface2:#152030;
  --line:#1e2a3d;
  --text:#e8eef6;
  --muted:#8fa0b5;
  --accent:#5ff2c0;          /* money / live  (cool mint, NOT warm gold) */
  --ice:#7ab8ff;             /* info / links  */
  --burn:#ff7a59;            /* burn / down   */
}

body{background:
  radial-gradient(1100px 600px at 78% -10%, rgba(122,184,255,.08), transparent 60%),
  radial-gradient(900px 520px at 4% 2%, rgba(95,242,192,.05), transparent 55%),
  var(--bg);}

/* tabular, instrument-like numerals */
strong, .ledger-table td, .market-value strong, .market-stats strong, .agent-budget, [class*="budget"]{
  font-variant-numeric:tabular-nums;}

/* tighter, cooler micro-labels */
.tiny-label, .eyebrow, .panel-eyebrow span{letter-spacing:.22em;color:var(--ice);}

/* --- top system bar (terminal telemetry) --- */
.fx-sysbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:7px 48px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(95,242,192,.05), transparent 40%);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);}
.fx-sysbar b{color:var(--text);font-weight:500}
.fx-sysbar .ok{color:var(--accent)}
.fx-sysbar .sep{color:var(--line)}
.fx-sysbar .right{margin-left:auto;color:var(--ice)}

/* --- atmosphere over the collective scene (cool) --- */
.collective-scene{position:relative}
.fx-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('assets/room-bg-cool.png') center/cover no-repeat;
  opacity:.34;mix-blend-mode:screen;filter:saturate(1.05)}
.fx-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 36%, rgba(4,7,12,.55) 84%)}
/* (scanlines + rotating sweep removed: they hazed the portraits/table) */
/* (HUD corner ticks removed: boundaries stay mathematical, no drawn frame) */

/* --- cursor lens + causal money pulse (cool) --- */
.fx-lens{position:absolute;left:50%;top:50%;width:360px;height:360px;border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(circle, rgba(95,242,192,.07), transparent 62%);
  mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;will-change:transform}
.collective-scene:hover .fx-lens{opacity:1}
.fx-pulse{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;z-index:6;pointer-events:none;
  will-change:transform,opacity}
.fx-pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid currentColor;opacity:.5}

/* --- on-chain proof chips --- */
.txchip{display:inline-block;margin-left:8px;padding:0 6px;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;
  color:var(--ice);border:1px solid rgba(122,184,255,.32);background:rgba(122,184,255,.06);
  cursor:pointer;transition:background-color .15s ease,border-color .15s ease;vertical-align:1px}
.txchip:hover{background:rgba(122,184,255,.14);border-color:rgba(122,184,255,.55)}

/* --- live dot (mint) --- */
.fx-livedot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;
  vertical-align:1px;box-shadow:0 0 0 0 rgba(95,242,192,.5);animation:fx-beat 1.9s ease-out infinite}
@keyframes fx-beat{0%{box-shadow:0 0 0 0 rgba(95,242,192,.45)}70%{box-shadow:0 0 0 7px rgba(95,242,192,0)}100%{box-shadow:0 0 0 0 rgba(95,242,192,0)}}

/* --- micro-interactions --- */
.capability-button{transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease}
.capability-button:hover{transform:translateY(-2px)}
.capability-button:active{transform:scale(.97)}
.collective-scene .agent-card img{transition:opacity .5s ease, filter .5s ease, transform .35s cubic-bezier(.215,.61,.355,1)}
.collective-scene .agent-card.is-active img,
.collective-scene .agent-card:hover img{transform:scale(1.03);
  filter:saturate(1) brightness(1.2) drop-shadow(0 0 18px rgba(122,184,255,.3))}

/* --- scroll reveal (staggered ease-out) --- */
.fx-reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease-out, transform .55s cubic-bezier(.215,.61,.355,1)}
.fx-reveal.fx-in{opacity:1;transform:none}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .fx-livedot{animation:none}
  .fx-lens{display:none}
  .fx-reveal{opacity:1;transform:none;transition:opacity .3s ease}
  .capability-button:hover,.capability-button:active{transform:none}
  .collective-scene .agent-card.is-active img,
  .collective-scene .agent-card:hover img{transform:none}
}

/* ================= COUNCIL: seat money lives in the aligned ledger below ================= */
/* causal glow on the speaking seat — opacity/filter only, no transform, so seats never skew */
.room-member.is-speaking img{filter:saturate(1.05) brightness(1.28)!important}
.room-member.is-speaking .seat-status{color:var(--accent)}
/* the table: one clean ring that EARNS its place — a replay-progress arc + current speaker at center */
.small-roundtable{box-shadow:none;background:transparent;border:1px solid rgba(122,184,255,.16)}
.small-roundtable::before{display:none}
.small-roundtable::after{content:'';position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from -90deg, var(--accent) calc(var(--turn,0) * 20%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  transition:background .4s ease}
.small-roundtable span{display:none}
.small-roundtable strong{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--text);font-weight:500}
/* seat ledger fills the left column */
.fx-seatledger{width:100%;margin-top:14px;border-top:1px solid var(--line);padding-top:10px;
  font-family:var(--mono);font-size:10px;color:var(--muted)}
.fx-sl-head{display:flex;justify-content:space-between;letter-spacing:.16em;font-size:8.5px;color:var(--ice);margin-bottom:7px}
.fx-sl-row{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.05)}
.fx-sl-row i{width:6px;height:6px;border-radius:50%;flex:none}
.fx-sl-row.voice i{opacity:.4}
.fx-sl-name{flex:1;color:var(--text);letter-spacing:.06em}
.fx-sl-budget{color:var(--text)}
.fx-sl-pledge{width:44px;text-align:right;color:var(--accent)}
.fx-sl-row.voice .fx-sl-pledge{color:var(--muted)}

/* ================= CAPABILITIES: 3x3 + motion ================= */
#capability-grid{grid-template-columns:repeat(3,1fr)}
.capability-button pre{position:relative;color:var(--muted);transition:color .2s ease}
.capability-button:hover pre{color:var(--text)}
/* blinking block cursor on the active glyph */
.capability-button[aria-pressed="true"] pre::after{content:'▌';margin-left:2px;color:var(--accent);
  animation:fx-blink 1s steps(1) infinite}
@keyframes fx-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* active-only micro-loops, one per capability */
.capability-button[data-capability="observe"][aria-pressed="true"] pre::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);animation:fx-scanline 2.2s ease-in-out infinite}
@keyframes fx-scanline{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
/* active-only micro-loop: gentle opacity pulse (no transform/glow, so glyphs never skew or smear) */
.capability-button[data-capability="market"][aria-pressed="true"] pre,
.capability-button[data-capability="create"][aria-pressed="true"] pre,
.capability-button[data-capability="treasury"][aria-pressed="true"] pre,
.capability-button[data-capability="review"][aria-pressed="true"] pre,
.capability-button[data-capability="community"][aria-pressed="true"] pre{animation:fx-pulse-op 2.2s ease-in-out infinite}
@keyframes fx-pulse-op{0%,100%{opacity:1}50%{opacity:.66}}

@media (prefers-reduced-motion: reduce){
  .capability-button[aria-pressed="true"] pre::before,
  .capability-button[data-capability="market"][aria-pressed="true"] pre,
  .capability-button[data-capability="create"][aria-pressed="true"] pre,
  .capability-button[data-capability="treasury"][aria-pressed="true"] pre,
  .capability-button[data-capability="review"][aria-pressed="true"] pre,
  .capability-button[data-capability="community"][aria-pressed="true"] pre{animation:none}
  .room-member.is-speaking{transform:none}
}
@media (max-width:680px){#capability-grid{grid-template-columns:repeat(2,1fr)}}

/* ================= NAV: replace the bare 2px active bar with a real selected state ================= */
.main-nav button{position:relative;border-radius:9px;padding:8px 14px!important;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease}
.main-nav button.active:after{display:none}
.main-nav button:hover{background:rgba(122,184,255,.05)}
.main-nav button.active{color:var(--text);background:rgba(122,184,255,.08);
  box-shadow:inset 0 0 0 1px rgba(122,184,255,.22)}
.main-nav button.active::before{content:'';position:absolute;left:7px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}

/* ================= GLOBAL backdrop: one cool telemetry field for the whole page ================= */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url('assets/room-bg-cool.png') center/cover no-repeat;opacity:.16}
/* scene no longer needs its own copy (avoid double image); vignette keeps depth */
.fx-backdrop{display:none}

/* wallet column in seat ledger: truncated, hover full, click copies */
.fx-sl-wallet{flex:none;width:76px;color:var(--ice);font-size:9.5px;letter-spacing:.02em;cursor:pointer;
  transition:color .15s ease}
.fx-sl-wallet:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.fx-sl-row.voice .fx-sl-wallet{opacity:.55}

/* holder-chat state chip: rendered while the chat gate is closed (see CHAT_OPEN in enhance.js) */
.fx-soon{display:inline-block;margin:0 4px;padding:1px 6px;border-radius:999px;vertical-align:1px;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--ice);background:rgba(122,184,255,.10);box-shadow:inset 0 0 0 1px rgba(122,184,255,.24)}

/* footer CA slot: label always present, value blank until the token is live */
.footer{position:relative}
.fx-ca{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-style:italic;font-weight:700;letter-spacing:.06em;text-align:center}
.fx-ca b{font-style:italic;font-weight:700;color:var(--ice);word-break:break-all}
@media (max-width:680px){
  .fx-ca{position:static;transform:none;order:4;width:100%}
}

/* model designation: which flagship each mind actually runs on (the lineup is the selling point).
   living.css hides .agent-identity p under 430px, so this must out-specify it at every width. */
.collective-scene .agent-identity p.agent-model{display:block;font:8px/1.5 var(--mono);
  letter-spacing:.3px;color:#8b98a9;margin:2px 0 0;max-width:150px;text-transform:none}
@media(max-width:680px){
  .agent-model .amv{display:none}
  .collective-scene .agent-identity p.agent-model{font-size:6.5px;max-width:100px}
}
.profile-heading .profile-model{font:11px/1.4 var(--mono);letter-spacing:.3px;color:var(--ice);margin:0 0 5px}
.fx-sl-model{display:block;font-size:8.5px;letter-spacing:.03em;color:var(--muted);margin-top:1px;white-space:nowrap}
.fx-chatoff{margin-top:16px;padding:9px 12px;border-left:2px solid rgba(122,184,255,.4);
  background:rgba(122,184,255,.06);font-size:11px;line-height:1.65;color:var(--muted)}

/* live-feed surfaces (live.js): honest empty states + real session/journal rows */
.fx-empty{margin:14px 0;padding:12px 14px;border:1px dashed rgba(255,255,255,.14);border-radius:6px;
  font:10px/1.7 var(--mono);letter-spacing:.04em;color:var(--muted)}
.fx-sl-await{color:var(--muted);font-style:italic;cursor:default}
.fx-session{margin:0 0 18px;padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.07)}
.fx-session-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;
  font:9px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.fx-turn{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:5px 0;
  border-bottom:1px dashed rgba(255,255,255,.05);font-size:11px;line-height:1.6}
.fx-turn>span{font:8.5px/1.9 var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.fx-turn.silent>p{color:var(--muted);font-style:italic}
.fx-turn b{color:var(--accent);font-weight:600}
.fx-jrow{display:grid;grid-template-columns:52px 92px 1fr 70px;gap:10px;padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.05);font:9.5px/1.6 var(--mono);letter-spacing:.03em;color:var(--text)}
.fx-jrow span:first-child{color:var(--muted)}
.fx-jrow span:last-child{text-align:right;color:var(--accent)}
.journal-tab{padding:6px 12px;border:1px solid var(--line);border-radius:999px;margin:0 6px 6px 0;
  font:9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.journal-tab.active{color:var(--bg);background:var(--ice);border-color:var(--ice)}