/* ————————————————————————————————————————
   ANNONA — control room demo
   ink stage, paper library, gold signals
———————————————————————————————————————— */
.demo-body{background:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.demo-head{position:sticky;top:0}
.demo-title-tag{color:var(--ink-soft);margin-left:.5rem}
.demo-back{margin-left:auto}

.demo-main{
  flex:1;display:grid;grid-template-columns:19rem 1fr;
  gap:0;align-items:stretch;min-height:0;
}
@media(max-width:1000px){.demo-main{grid-template-columns:1fr}}

/* ————— library ————— */
.demo-lib{
  background:var(--paper);border-right:1px solid var(--line);
  padding:1.4rem;display:flex;flex-direction:column;gap:1rem;
  max-height:calc(100vh - 3.4rem);overflow-y:auto;
}
@media(max-width:1000px){.demo-lib{max-height:20rem}}
.lib-head{color:var(--gold)}
.lib-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);
  padding:.3rem .6rem;cursor:pointer;transition:all .2s;
}
.chip:hover{border-color:var(--gold)}
.chip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lib-list{display:flex;flex-direction:column}
.lib-item{
  text-align:left;background:none;border:none;border-top:1px solid var(--line);
  padding:.7rem .2rem;cursor:pointer;transition:background .2s;
}
.lib-item:last-child{border-bottom:1px solid var(--line)}
.lib-item:hover{background:rgba(185,137,46,.08)}
.lib-item .mono{font-size:.55rem;color:var(--gold);display:block;margin-bottom:.25rem}
.lib-item strong{font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--ink)}
.lib-item.sel{background:var(--ink)}
.lib-item.sel strong{color:var(--paper)}
.lib-item.sel .mono{color:var(--gold-bright)}
.lib-fine{font-size:.72rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:.8rem}

/* ————— stage ————— */
.demo-stage{
  display:flex;flex-direction:column;min-width:0;color:var(--paper);
  padding:1.4rem clamp(1rem,2.5vw,2.4rem);gap:1rem;
}
.stage-top{display:flex;align-items:flex-start;gap:1rem}
.stage-sector{color:var(--gold-bright)}
.stage-title{font-size:clamp(1.3rem,2.4vw,2rem);margin:.25rem 0}
.stage-trigger{color:rgba(244,238,223,.55)}
.stage-controls{margin-left:auto}
button.btn{background:transparent;cursor:pointer}
button.btn-gold{background:var(--gold)}
#btn-replay{color:var(--paper);border-color:rgba(244,238,223,.4)}
#btn-replay:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

/* canvas */
.canvas-wrap{position:relative;border:1px solid rgba(244,238,223,.16);background:
  radial-gradient(90% 110% at 50% 0%,rgba(244,238,223,.045),transparent 60%)}
#canvas{display:block;width:100%;height:auto}
.n-box{fill:#241F15;stroke:rgba(244,238,223,.28);stroke-width:1;transition:stroke .3s}
.n-label{fill:rgba(244,238,223,.88);font-family:'Marcellus',serif;font-size:16px}
.n-role{fill:rgba(244,238,223,.4);font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.12em}
.node.hot .n-box{stroke:#E0B04C;stroke-width:1.5}
.node.hot .n-role{fill:#E0B04C}
.n-dot{fill:none}
.node.hot .n-dot{fill:#E0B04C;animation:dotPulse 1.2s ease-out infinite}
@keyframes dotPulse{0%{opacity:1}70%{opacity:.25}100%{opacity:1}}
.edge{stroke:rgba(244,238,223,.10);stroke-width:1;fill:none}
.edge.hot{stroke:#E0B04C;stroke-width:1.6;stroke-dasharray:7 7;animation:edgeFlow .7s linear infinite}
@keyframes edgeFlow{to{stroke-dashoffset:-14}}
@media (prefers-reduced-motion:reduce){
  .edge.hot{animation:none}
  .node.hot .n-dot{animation:none}
}

/* adjustment card */
.adjust-card{
  position:absolute;right:1.2rem;top:1.2rem;width:min(24rem,80%);
  background:var(--paper);color:var(--ink);padding:1.4rem;
  border-top:3px solid var(--gold);box-shadow:0 30px 70px -25px rgba(0,0,0,.75);
}
.adjust-level{color:var(--gold);margin-bottom:.5rem}
.adjust-title{font-size:1.25rem;margin-bottom:.5rem}
.adjust-detail{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem}
.adjust-actions{display:flex;gap:.6rem}
.adjust-actions .btn{cursor:pointer}
.btn-ink{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ink:hover{border-color:var(--ink)}
.adjust-note{color:var(--ink-soft);font-size:.52rem;margin-top:.9rem}

/* ledger + outcome */
.stage-bottom{display:grid;grid-template-columns:1fr 20rem;gap:1rem;min-height:11rem}
@media(max-width:900px){.stage-bottom{grid-template-columns:1fr}}
.ledger{border:1px solid rgba(244,238,223,.16);padding:1rem 1.2rem;overflow-y:auto;max-height:15rem}
.ledger-head{color:var(--gold-bright);margin-bottom:.7rem}
.ledger-list{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.ledger-list li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;line-height:1.5;
  color:rgba(244,238,223,.78);opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s;
}
.ledger-list li.on{opacity:1;transform:none}
.ledger-list .who{color:#E0B04C}
.ledger-list .arrow{color:rgba(244,238,223,.4)}
.ledger-list li.l-action .who{color:#9DBB7B}
.ledger-list li.l-human{color:var(--paper)}
.ledger-list li.l-human .who{color:#9DBB7B}

.outcome{border:1px solid rgba(244,238,223,.16);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem}
.outcome-head{color:var(--gold-bright)}
.outcome-chips{display:flex;flex-direction:column;gap:.55rem}
.outcome-chip{border-top:1px solid rgba(244,238,223,.14);padding-top:.5rem}
.outcome-chip .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:rgba(244,238,223,.5);display:block}
.outcome-chip .v{font-family:'Marcellus',serif;font-size:1.15rem;color:#E0B04C}
.outcome-cta{margin-top:auto;text-align:center}