/* ---------------------------------------------------------------------
   Part 1 of 2 - copied byte-for-byte from the CSS constant in the
   engine's offline renderer (sandbox.py). Not one rule below is edited;
   the Room and the offline page must not drift apart on appearance.
   New rules the Room needs are appended in part 2, never merged in here.
   --------------------------------------------------------------------- */

*{margin:0;padding:0;box-sizing:border-box}
body{background:#0b0b14;color:#e8e8f0;
 font-family:'Helvetica Neue',Inter,-apple-system,sans-serif;font-size:17px;
 font-variant-numeric:tabular-nums;padding-bottom:60px}
a{color:inherit}
.topbar{display:flex;align-items:center;gap:20px;padding:14px 24px;
 background:#171727;border-bottom:1px solid #2a2a3d;position:sticky;top:0;z-index:20}
.brand{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:17px;
 color:#c9b8ff}
.chip{padding:6px 15px;border:1px solid #2a2a3d;border-radius:2px;font-size:15px;
 color:#a8a8c0;background:#12121d}
.chip b{color:#e8e8f0;font-weight:600}
.spacer{flex:1}
.meta{font-size:15px;color:#8888a0}
.wrap{max-width:1400px;margin:0 auto;padding:24px}
.lab{font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
 color:#8888a0;margin-bottom:12px}
.headline{display:flex;gap:32px;align-items:flex-start;
 background:#12121d;border:1px solid #2a2a3d;padding:20px 24px;margin-bottom:20px}
.dist{flex:0 0 480px}
.drow{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.dname{width:112px;font-size:17px;color:#c8c8dc}
.dbar{height:20px;background:#7b5cff;transition:none}
.dbar.modal{background:#c9b8ff}
.dpct{font-size:19px;font-weight:600;width:58px}
.sliders{flex:1;min-width:320px}
.srow{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.sname{width:132px;font-size:16px;color:#c8c8dc}
.srow input[type=range]{flex:1;accent-color:#7b5cff;height:6px}
.sval{width:56px;text-align:right;font-size:16px;color:#a8a8c0}
.note{font-size:14px;color:#8888a0;line-height:1.6;margin-top:12px;
 border-left:2px solid #7b5cff;padding-left:12px}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:10px 20px;border:1px solid #2a2a3d;background:#12121d;color:#a8a8c0;
 font-size:16px;cursor:pointer;font-family:inherit}
.tab.on{background:#7b5cff;border-color:#7b5cff;color:#fff;font-weight:600}
.room{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.grp{border:1px solid;padding:14px;flex:0 1 auto;min-width:230px}
.grp h3{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
 margin-bottom:12px}
.cards{display:flex;flex-wrap:wrap;gap:8px}
.card{width:132px;padding:12px 8px;background:#12121d;border:1px solid #2a2a3d;
 cursor:pointer;text-align:center}
.card:hover{border-color:#7b5cff;background:#181828}
.card.sel{border-color:#c9b8ff;background:#1c1c30}
.card .nm{font-size:16px;font-weight:600;margin-top:7px}
.card .rl{font-size:13px;color:#8888a0;line-height:1.4;margin-top:4px;min-height:36px}
.badge{display:inline-block;font-size:12px;padding:3px 8px;margin-top:6px;
 letter-spacing:.06em}
.b-red{background:#ff5c5c;color:#0b0b14;font-weight:700}
.b-grey{background:#2a2a3d;color:#a8a8c0}
.b-chair{background:#7b5cff;color:#fff;font-weight:700}
.card.chair{border-color:#7b5cff}
.detail{background:#12121d;border:1px solid #2a2a3d;padding:20px 24px;margin-top:20px}
.detail h2{font-size:28px;font-weight:600;margin-bottom:2px}
.detail .sub{font-size:15px;color:#8888a0;margin-bottom:20px}
.kv{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:16px}
.kv div{font-size:14px;color:#8888a0}
.kv b{display:block;font-size:20px;color:#e8e8f0;font-weight:600;margin-top:2px}
.sec{margin-bottom:14px}
.sec .t{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
 color:#8888a0;margin-bottom:5px}
.sec p{font-size:17px;line-height:1.75;color:#c8c8dc}
.hl{color:#ff5c5c;font-weight:600}
.empty{color:#8888a0;font-size:16px}
.legend{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:#8888a0;
 margin:-4px 0 18px;line-height:1.6}
.legend b{font-weight:600;padding:2px 7px;margin-right:5px}
.lg-red{background:#ff5c5c;color:#0b0b14}
.lg-pur{background:#7b5cff;color:#fff}
.lg-grey{background:#2a2a3d;color:#c8c8dc}
.foot{max-width:1400px;margin:24px auto 0;padding:16px 24px;border-top:1px solid #2a2a3d;
 font-size:13px;color:#6a6a80;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------------
   Part 2 of 2 - the Room only. Everything above renders the committee and
   is shared with the offline page; everything below is the live-service
   furniture the offline page has no use for (run picker, ask box, scenario
   modal, archive drawer) plus the narrow-width rules.
   --------------------------------------------------------------------- */

.topbar{flex-wrap:wrap;row-gap:10px}
.nav{display:flex;gap:0;font-size:15px;color:#8888a0;align-items:center;flex-wrap:wrap}
.nav a{color:#a8a8c0;text-decoration:none;padding:0 10px;border-left:1px solid #2a2a3d;
 white-space:nowrap}
.nav a:first-child{border-left:0;padding-left:0}
.nav a:hover{color:#c9b8ff}
.nav a.here{color:#c9b8ff;font-weight:600}

select,textarea,input[type=text],input[type=number]{font-family:inherit;
 background:#12121d;color:#e8e8f0;border:1px solid #2a2a3d;border-radius:2px;
 font-size:15px;padding:6px 10px}
select:focus,textarea:focus,input:focus{outline:1px solid #7b5cff}
.picker{max-width:340px}

.btn{font-family:inherit;font-size:15px;padding:7px 16px;border-radius:2px;cursor:pointer;
 background:#12121d;color:#a8a8c0;border:1px solid #2a2a3d}
.btn:hover{border-color:#7b5cff;color:#e8e8f0}
.btn.primary{background:#7b5cff;border-color:#7b5cff;color:#fff;font-weight:600}
.btn.primary:hover{background:#8f74ff;color:#fff}
.btn:disabled{opacity:.45;cursor:default}
/* Spec: the scenario button is top right and always visible. The top bar wraps
   below about 1500px, and on the wrapped line the spacer above it is on the
   previous line, so it needs its own push. */
.topbar #btn-run{margin-left:auto}

/* single-scenario runs: a tally where a four-scenario run has sliders */
.tally .n{font-size:44px;font-weight:600;line-height:1}
.tally .n span{font-size:20px;color:#8888a0;font-weight:400;margin-left:8px}
.tally .who{font-size:16px;color:#c8c8dc;line-height:1.7;margin-top:12px}
.tally .who b{color:#ff5c5c;font-weight:600}
.scentext{font-size:16px;color:#c8c8dc;line-height:1.7;background:#12121d;
 border:1px solid #2a2a3d;border-left:2px solid #7b5cff;padding:14px 18px;margin-bottom:18px}
.scentext b{display:block;font-size:13px;letter-spacing:.15em;text-transform:uppercase;
 color:#8888a0;margin-bottom:6px;font-weight:600}

/* ask box, inside the member panel */
.ask{border-top:1px solid #2a2a3d;margin-top:18px;padding-top:16px}
.ask textarea{width:100%;min-height:76px;line-height:1.6;resize:vertical}
.ask .row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ask .hint{font-size:13px;color:#6a6a80}
.answer{margin-top:16px;border-left:2px solid #3ddc97;padding-left:14px}
.answer p{font-size:17px;line-height:1.75;color:#c8c8dc}
.answer .t{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
 color:#8888a0;margin-bottom:5px}
.answer .verdict{font-size:15px;color:#a8a8c0;margin-top:8px}
.answer .verdict b{color:#e8e8f0;font-weight:600}
.err{color:#ff9f43;font-size:15px;margin-top:10px;line-height:1.6}

/* run-your-own dialog. Named .dlg, not .modal: the ported half already uses
   `.dbar.modal` for the most-likely outcome bar, and a bare `.modal` here
   turned that bar into a fixed-position sheet over the brand. */
.dlg{position:fixed;inset:0;background:rgba(6,6,12,.82);z-index:60;
 display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;
 overflow:auto}
.dlg[hidden]{display:none}
.mbox{background:#12121d;border:1px solid #2a2a3d;max-width:640px;width:100%;
 padding:24px}
.mbox h2{font-size:24px;font-weight:600;margin-bottom:6px}
.mbox .sub{font-size:15px;color:#8888a0;line-height:1.6;margin-bottom:18px}
.f{margin-bottom:16px}
.f label{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:#8888a0;margin-bottom:6px}
.f input[type=text],.f textarea,.f select{width:100%}
.f textarea{min-height:110px;line-height:1.6;resize:vertical}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip.ex{cursor:pointer;font-size:13px;line-height:1.4;text-align:left;max-width:100%}
.chip.ex:hover{border-color:#7b5cff;color:#e8e8f0}
.ovr{display:flex;gap:8px;align-items:center}
/* These two beat `.f input[type=text],.f textarea,.f select{width:100%}` above
   on specificity, not on order: an attribute selector outranks a plain class,
   and without the extra class the value box took the whole row and squeezed
   the series list down to its arrow. */
.f .ovr select{flex:1;min-width:0;width:auto}
.f .ovr input[type=text]{width:110px;flex:0 0 auto}
.mact{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:20px}
.mact .spacer{flex:1}
.prog{margin-top:18px;border-top:1px solid #2a2a3d;padding-top:16px}
.prog[hidden]{display:none}
.pbar{height:8px;background:#1c1c30;border:1px solid #2a2a3d;margin-bottom:9px}
.pbar i{display:block;height:100%;background:#7b5cff;width:0;transition:width .4s linear}
.pmsg{font-size:15px;color:#a8a8c0}
.pnote{font-size:13px;color:#6a6a80;margin-top:6px;line-height:1.6}

/* archive drawer */
.drawer{margin-top:26px;border-top:1px solid #2a2a3d;padding-top:16px}
.drawer summary{font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
 color:#8888a0;cursor:pointer;list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary:hover{color:#c9b8ff}
.arch{margin-top:14px;display:flex;flex-direction:column;gap:1px}
.arow{display:flex;gap:14px;align-items:baseline;background:#12121d;border:1px solid #2a2a3d;
 padding:10px 14px;cursor:pointer;font-size:15px;flex-wrap:wrap}
.arow:hover{border-color:#7b5cff}
.arow.on{border-color:#c9b8ff;background:#1c1c30}
.arow .k{font-size:12px;letter-spacing:.06em;padding:3px 8px;background:#2a2a3d;color:#a8a8c0}
.arow .k.off{background:#7b5cff;color:#fff;font-weight:600}
.arow .ti{color:#e8e8f0;flex:1;min-width:150px}
.arow .mo,.arow .hd{color:#8888a0;font-size:14px}

.foot a{color:#8888a0}
.foot .offline{color:#ff9f43}

@media (max-width:860px){
  body{font-size:16px}
  .wrap{padding:16px}
  .headline{flex-direction:column;gap:20px;padding:16px}
  .dist{flex:1 1 auto;width:100%}
  .sliders{width:100%;min-width:0}
  .dname{width:96px}
  .sname{width:104px}
  .room{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}
  .grp{flex:0 0 auto}
  .detail{padding:16px}
  .detail h2{font-size:23px}
  .topbar{padding:12px 16px;gap:12px}
  .foot{padding:16px}
  .mbox{padding:18px}
}