/* ————————————————————————————————————————
   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:.75rem .45rem .8rem;cursor:pointer;transition:background .2s;width:100%;
}
.lib-item:last-child{border-bottom:1px solid var(--line)}
.lib-item:hover{background:rgba(185,137,46,.08)}
.lib-item strong{
  display:block;font-family:var(--sans);font-weight:600;font-size:.85rem;
  line-height:1.4;letter-spacing:.01em;color:var(--ink);margin-bottom:.3rem;
}
.lib-meta{
  display:block;font-family:var(--mono);font-size:.55rem;line-height:1.6;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);
}
.lib-meta i{font-style:normal;color:var(--gold)}
.lib-item.sel{background:var(--ink)}
.lib-item.sel strong{color:var(--paper)}
.lib-item.sel .lib-meta{color:rgba(244,238,223,.55)}
.lib-item.sel .lib-meta i{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}
.ledger-list li.l-sys{color:rgba(244,238,223,.5);font-style:italic}
.ledger-list li.l-sys .dots::after{content:'';animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* live/scripted status badge next to Replay */
.live-badge{font-size:.55rem;letter-spacing:.14em;margin-right:.9rem;vertical-align:middle;color:rgba(244,238,223,.4)}
.live-badge.live{color:var(--gold-bright)}
.live-badge.conferring{color:var(--gold-bright);animation:pulse 1.2s ease-in-out infinite}
.live-badge.scripted{color:rgba(244,238,223,.35)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.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}

/* ————— workflow rail: the scenario's phase pipeline ————— */
.flow-rail{
  list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
  margin:.65rem 0 .8rem;padding:0;font-size:.55rem;letter-spacing:.13em;
}
.flow-rail li{
  display:flex;align-items:center;gap:.4rem;padding:.32rem .6rem;
  border:1px solid rgba(244,238,223,.16);color:rgba(244,238,223,.42);
  transition:color .3s,border-color .3s,background .3s;white-space:nowrap;
}
.flow-rail li+li::before{content:'';margin-right:.15rem}
.flow-rail .r-tick{width:6px;height:6px;border:1px solid currentColor;border-radius:50%;display:inline-block}
.flow-rail li.active{color:var(--gold-bright);border-color:rgba(224,176,76,.55)}
.flow-rail li.active .r-tick{background:currentColor;animation:pulse 1.2s ease-in-out infinite}
.flow-rail li.done{color:#9DBB7B;border-color:rgba(157,187,123,.35)}
.flow-rail li.done .r-tick{background:currentColor}
.flow-rail li.held{color:#C97B5A;border-color:rgba(201,123,90,.5)}
.flow-rail li.held .r-tick{background:currentColor}

/* ————— node status word + progress bar (SVG) ————— */
.n-status{
  font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;
  fill:rgba(244,238,223,.5);
}
.node.hot .n-status{fill:#E0B04C}
.n-track{fill:rgba(244,238,223,.12)}
.n-fill{fill:#E0B04C;transition:width .6s ease}

/* ————— milestone rows in the ledger ————— */
.ledger-list li.l-milestone{
  border-left:2px solid #E0B04C;padding:.35rem 0 .35rem .7rem;margin:.15rem 0;
  background:rgba(224,176,76,.06);color:rgba(244,238,223,.9);
}
.ledger-list li.l-milestone .who{color:var(--gold-bright)}

/* ————— live shift-report line under the outcome chips ————— */
.outcome-note{
  font-family:var(--mono);font-size:.62rem;line-height:1.6;letter-spacing:.02em;
  color:rgba(244,238,223,.65);border-top:1px solid rgba(244,238,223,.14);padding-top:.6rem;
}

/* ————— validator banner (only appears when scenario structure fails checks) ————— */
.validate-banner{
  background:#8A3B2E;color:#F4EEDF;text-align:center;
  padding:.5rem .8rem;font-size:.6rem;letter-spacing:.14em;
}

/* ————— demo CTAs: header button, outcome note, engagement dock ————— */
.demo-head-cta{margin-left:.6rem}
.outcome-cta-note{
  font-size:.52rem;letter-spacing:.12em;text-align:center;
  color:rgba(244,238,223,.45);margin-top:.45rem;
}
.demo-dock{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;max-width:340px;
  background:#26231D;border:1px solid rgba(224,176,76,.45);
  box-shadow:0 12px 40px rgba(0,0,0,.45);padding:1.1rem 1.2rem 1.2rem;
  opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;
}
.demo-dock.on{opacity:1;transform:none}
.dock-head{color:var(--gold-bright);font-size:.6rem;letter-spacing:.14em;margin-bottom:.5rem}
.dock-text{font-size:.78rem;line-height:1.6;color:rgba(244,238,223,.8);margin-bottom:.85rem}
.dock-x{
  position:absolute;top:.35rem;right:.55rem;background:none;border:0;
  color:rgba(244,238,223,.5);font-size:1.05rem;cursor:pointer;line-height:1;
}
.dock-x:hover{color:#F4EEDF}
@media (max-width:700px){
  .demo-dock{left:1rem;right:1rem;max-width:none}
  .demo-head-cta{display:none}
}