/* The doom-floor console, scoped under #dfloor so it can sit inside a
 * Perslis Defense page. Same panels, same colours, same numbers as the
 * live console (doom_floor/console.py + web/console.css); the page only
 * replays what the loop recorded. */
#dfloor{
  --bg:#070a0e; --panel:#0e141b; --line:#1d2732; --ink:#d7e3ef; --dim:#7d8fa3;
  --teal:#6fe3d0; --green:#4ade80; --orange:#ff8a6a; --violet:#a78bfa;
  --amber:#fbbf24; --radius:12px;
  color-scheme:dark;
  margin:0;padding:18px 20px 22px;background:var(--bg);color:var(--ink);
  font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid #1d2732;border-radius:14px;overflow:hidden;text-align:left
}
#dfloor *{box-sizing:border-box}
#dfloor h1{font-size:17px;margin:0 0 3px;letter-spacing:.2px;color:var(--ink);font-family:inherit}
#dfloor h1,#dfloor .lead,#dfloor .head{font-weight:600}
#dfloor p{margin:0;font-size:inherit;line-height:inherit;color:inherit;max-width:none}
#dfloor .dim{color:var(--dim)}
#dfloor b{color:var(--ink)}
#dfloor button{font-family:inherit}

#dfloor .bar{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:14px}
#dfloor .id p{color:var(--dim);font-size:12px;max-width:62ch}
#dfloor .ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#dfloor .tag{border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  color:var(--violet);font-size:12px}
#dfloor .verdict{border:1px solid var(--green);color:var(--green);border-radius:10px;
  padding:9px 18px;font-weight:700;letter-spacing:.6px}
#dfloor .verdict.held{border-color:var(--amber);color:var(--amber)}
#dfloor .verdict.dead{border-color:var(--orange);color:var(--orange)}

#dfloor .btn{background:#121b24;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:8px 14px;font:inherit;cursor:pointer}
#dfloor .btn:hover{border-color:var(--teal);color:var(--teal)}
#dfloor .btn.wide{padding:10px 20px;border-color:var(--amber);color:var(--amber)}
#dfloor .btn.small{padding:5px 10px;font-size:12px}
#dfloor .btn.on{border-color:var(--teal);color:var(--teal);background:#0f1f22}

#dfloor .counters{display:grid;gap:10px;margin-bottom:12px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#dfloor .counter{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px}
#dfloor .counter .n{font-size:26px;font-weight:700;line-height:1.1}
#dfloor .counter .k{color:var(--dim);font-size:10.5px;letter-spacing:.7px;
  text-transform:uppercase;margin-top:4px}
#dfloor .counter.good{border-color:#1d3b2c}#dfloor .counter.good .n{color:var(--green)}
#dfloor .counter.warn .n{color:var(--amber)}
#dfloor .counter.bad .n{color:var(--orange)}
#dfloor .counter.info .n{color:var(--teal)}
#dfloor .counter.alt .n{color:var(--violet)}

#dfloor .panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:12px}
#dfloor .head{display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.9px;color:var(--dim);margin-bottom:10px;gap:10px}
#dfloor .note{color:var(--dim);font-size:11.5px;margin-top:10px;line-height:1.5}

/* ---- the navigator: recording picker + transport, sticky at the top ---- */
#dfloor .topnav{position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;margin:-18px -20px 16px;padding:10px 20px;
  background:rgba(7,10,14,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
#dfloor .ddbtn{display:flex;align-items:center;gap:10px;min-width:200px;
  background:#0e141b;border:1px solid var(--line);border-radius:10px;
  padding:8px 12px 8px 14px;color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color .12s}
#dfloor .ddbtn small{color:var(--dim);font-size:10px;letter-spacing:.9px;text-transform:uppercase}
#dfloor .ddbtn b{flex:1;text-align:left;font-weight:700;white-space:nowrap}
#dfloor .ddbtn:hover,#dfloor .ddbtn.on{border-color:var(--teal)}
#dfloor .ddbtn.on b{color:var(--teal)}
#dfloor .ddbtn.play{min-width:0;border-color:#2a3a2f}
#dfloor .ddbtn.play b{color:var(--green)}
#dfloor .transport{display:flex;gap:8px;align-items:center;flex:1 1 320px;min-width:0;flex-wrap:wrap}
#dfloor .transport input[type=range]{flex:1 1 140px;min-width:120px;accent-color:var(--teal)}
#dfloor .topnav .ddbtn{min-width:0;flex:0 1 auto}
#dfloor .head{flex-wrap:wrap}
#dfloor .head span:last-child{text-align:right;margin-left:auto}
#dfloor .transport .time{color:var(--dim);font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
#dfloor .speed{display:flex;gap:4px}
#dfloor .navstatus{margin-left:auto;color:var(--dim);font-size:12px;white-space:nowrap}
@media (max-width:900px){#dfloor .topnav{margin:-14px -16px 14px;padding:10px 16px}
  #dfloor .ddbtn{min-width:0;flex:1}#dfloor .navstatus{width:100%;margin-left:0}}

#dfloor .orders-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#dfloor .lead{color:var(--dim);font-size:12px;white-space:nowrap}
#dfloor .presets{display:flex;gap:7px;flex-wrap:wrap}
#dfloor .presets .btn.hot{border-color:var(--teal);color:var(--teal);background:#0f1f22}
#dfloor .presets .btn em{font-style:normal;color:var(--dim);font-size:10.5px;margin-left:6px}

#dfloor .standing{background:#0f1a18;border:1px solid #1f3b36;border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px;display:flex;gap:14px;align-items:center;
  flex-wrap:wrap}
#dfloor .standing ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;
  flex-wrap:wrap;flex:1}
#dfloor .standing li{border:1px solid var(--line);border-radius:8px;padding:6px 11px;
  font-size:12px;display:flex;gap:9px;align-items:center}
#dfloor .standing li.on{border-color:var(--teal);color:var(--teal)}
#dfloor .standing li.off{border-color:#4a3030;color:var(--orange)}
#dfloor .standing li em{font-style:normal;color:var(--dim);font-size:11px}

#dfloor .dmain{display:grid;gap:12px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
#dfloor .col{min-width:0}
#dfloor .view img{width:100%;display:block;border-radius:8px;background:#000;
  image-rendering:pixelated;aspect-ratio:4/3;object-fit:cover}
#dfloor .live{color:var(--green)}

#dfloor .chain{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#dfloor .chain b{border:1px solid var(--line);border-radius:7px;padding:5px 10px;
  font-size:11.5px;font-weight:500;color:var(--dim)}
#dfloor .chain i{color:#33404d;font-style:normal}

#dfloor .goals{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#dfloor .goal{border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  background:#0a1016}
#dfloor .goal .g{font-weight:600;font-size:12.5px;color:var(--dim)}
#dfloor .goal .u{font-size:11px;color:var(--dim);margin-top:5px}
#dfloor .goal.applicable .g{color:var(--ink)}
#dfloor .goal.chosen{border-color:var(--green);background:#0d1b14}
#dfloor .goal.chosen .g{color:var(--green)}
#dfloor .goal.blocked{border-color:#3a2a2a;opacity:.72}
#dfloor .goal.blocked .g{color:var(--orange);text-decoration:line-through}
#dfloor .goal .why{font-size:10.5px;color:var(--orange);margin-top:4px}

#dfloor pre{margin:0;white-space:pre-wrap;font:inherit;color:var(--ink);
  background:#0a1016;border:1px solid var(--line);border-radius:8px;
  padding:11px;min-height:96px}

#dfloor .row{margin-bottom:9px}
#dfloor .row .t{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--dim);margin-bottom:4px}
#dfloor .row .t b{color:var(--ink);font-weight:600}
#dfloor .meter{height:6px;background:#0a1016;border-radius:99px;overflow:hidden}
#dfloor .meter span{display:block;height:100%;background:var(--teal);border-radius:99px}
#dfloor .meter.warn span{background:var(--amber)}
#dfloor .meter.bad span{background:var(--orange)}

#dfloor table{width:100%;border-collapse:collapse;font-size:11px;margin:0}
#dfloor td{padding:4px 5px;border-bottom:1px solid #16202b;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:0}
#dfloor td.sig{max-width:0;width:60%;color:var(--ink)}
#dfloor td.num{text-align:right;font-variant-numeric:tabular-nums}
#dfloor td.pos{color:var(--green)}#dfloor td.neg{color:var(--orange)}

#dfloor .rules{list-style:none;margin:0;padding:0;max-height:250px;overflow:auto}
#dfloor .rules li.rule{border-left:2px solid var(--orange);padding:7px 0 7px 10px;
  margin-bottom:8px;background:#140f0e;border-radius:0 7px 7px 0}
#dfloor .rules li.empty{color:var(--dim);font-size:11.5px;line-height:1.5}
#dfloor .rh{font-size:12px;color:var(--ink)}
#dfloor .rh b{color:var(--orange);font-weight:700}
#dfloor .rp{font-size:10.5px;color:var(--teal);margin-top:4px;letter-spacing:.4px}
#dfloor .rv{font-size:10.5px;color:var(--dim);margin-top:3px}

#dfloor .vcards{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#dfloor .vcard{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;font-size:11.5px;background:#0a1016}
#dfloor .vcard b{text-transform:uppercase;letter-spacing:.5px;font-size:10.5px}
#dfloor .vcard.door b{color:#50e6ff}#dfloor .vcard.enemy b{color:var(--orange)}#dfloor .vcard.pickup b{color:var(--green)}
#dfloor .vcard em{font-style:normal;color:var(--dim)}
#dfloor .vcard i{font-style:normal;color:#4b5b6b;font-size:10.5px}
#dfloor .vcard .sw{width:12px;height:12px;border-radius:3px;border:1px solid #2a3542;background:#888}
#dfloor .vcard .sw[data-colour="blue"]{background:#3c5ad2}#dfloor .vcard .sw[data-colour="teal"]{background:#2fa5a0}
#dfloor .vcard .sw[data-colour="brown"]{background:#8a6a3c}#dfloor .vcard .sw[data-colour="orange"]{background:#d98a2c}
#dfloor .vcard .sw[data-colour="red"]{background:#c33}#dfloor .vcard .sw[data-colour="green"]{background:#3a3}
#dfloor .vcard .sw[data-colour="yellow"]{background:#d6c23a}#dfloor .vcard .sw[data-colour="grey"]{background:#888}
#dfloor .vcard .sw[data-colour="light grey"]{background:#bbb}#dfloor .vcard .sw[data-colour="dark grey"]{background:#555}
#dfloor .vcard .sw[data-colour="black"]{background:#111}#dfloor .vcard .sw[data-colour="white"]{background:#eee}
#dfloor .vcard .sw[data-colour="purple"]{background:#84a}#dfloor .vcard .sw[data-colour="olive"]{background:#776}
#dfloor .vcards .empty{color:var(--dim);font-size:11.5px}
#dfloor .range{margin-top:8px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}

#dfloor .log ul{list-style:none;margin:0;padding:0;max-height:168px;overflow:auto}
#dfloor .log li{padding:5px 0;border-bottom:1px solid #141d26;font-size:11.5px;
  color:var(--dim);display:flex;gap:10px}
#dfloor .log li b{color:var(--ink);font-weight:500}
#dfloor .log li.rule b{color:var(--orange)}
#dfloor .log li.game b{color:var(--violet)}
#dfloor .log li.order b{color:var(--teal)}
#dfloor .log li.refused b{color:var(--orange)}
#dfloor .log li.episode b{color:var(--violet)}
#dfloor .log li.error b{color:var(--orange)}
#dfloor .log li.cleared b{color:var(--green);font-weight:700}
#dfloor .log li.campaign b{color:var(--green)}
#dfloor .log li.retry b{color:var(--amber)}
#dfloor .log li .k{min-width:66px;color:#4b5b6b;text-transform:uppercase;font-size:10px;
  letter-spacing:.6px;padding-top:1px}

#dfloor .dfoot{margin-top:16px;color:var(--dim);font-size:11.5px}
#dfloor code{color:var(--teal);background:none;padding:0}

@media (max-width:900px){
  #dfloor .dmain{grid-template-columns:1fr}
  #dfloor{padding:14px 16px 20px}
}