/* WORLD STUDIO: an operator's console. Dark is the only theme. The colours are GRIFT's own (css/finance-pages.css, worlds.html): olive-black panels,
   parchment ink, brass for what an operator can act on, moss for what has been established. */
@font-face{font-family:'Manrope';src:url('fonts/manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  --void:#0d0f0b;--bg:#11140f;--panel:#171b14;--panel-2:#1d2219;--panel-3:#252b20;--well:#0c0e0a;
  --line:#a2a58124;--line-2:#a2a58140;--line-3:#a2a58166;
  --ink:#ece4cf;--ink-2:#c9c8b4;--ink-3:#a4a793;--ink-4:#8b8f7c;
  --brass:#d2a369;--brass-hi:#e6c294;--brass-ink:#1b1408;--brass-soft:#d2a3691a;
  --moss:#a9bd8a;--moss-hi:#c6d2b0;--moss-soft:#a9bd8a17;
  --ember:#e5927a;--ember-soft:#e5927a17;
  --amber:#e0b45f;--amber-soft:#e0b45f14;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --display:'Manrope',var(--sans);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --r:5px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--void)}
body{margin:0;min-height:100vh;color:var(--ink);font:14.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased;background:var(--void) radial-gradient(1100px 620px at 78% -8%,#4a4f2c30,transparent 68%) no-repeat fixed}
::selection{background:#d2a36955}
a{color:var(--brass-hi);text-decoration-color:#e6c29455;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,p{margin:0}
h1{font:800 27px/1.15 var(--display);letter-spacing:-.018em}
code,.mono{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.boot{max-width:640px;margin:20vh auto;padding:0 16px;color:var(--ink-3);text-align:center;font:12px var(--mono);letter-spacing:.08em}
.muted{color:var(--ink-3)}.small{font-size:13px}.spacer{flex:1}
.label{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* the frame */
.topbar{position:sticky;top:0;z-index:20;background:#0d0f0bee;backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.topbar-in{max-width:1320px;margin:0 auto;padding:0 20px;min-height:54px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 14px var(--display);letter-spacing:.02em;white-space:nowrap}
.brand i{width:17px;height:17px;border-radius:50%;border:2px solid var(--brass);box-shadow:inset 0 0 0 3px var(--void),inset 0 0 0 9px var(--brass);flex:none}
.bar-sep{width:1px;height:20px;background:var(--line-2)}
.net{display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.bar-meta{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--ink-4);white-space:nowrap}
.bar-meta b{color:var(--ink-2);font-weight:500}
main{max-width:1320px;margin:0 auto;padding:26px 20px 90px}
.led{width:7px;height:7px;border-radius:50%;background:var(--ink-4);display:inline-block;flex:none}
.led.ok{background:var(--moss);box-shadow:0 0 0 3px var(--moss-soft),0 0 8px #a9bd8a88}
.led.warn{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.led.bad{background:var(--ember);box-shadow:0 0 0 3px var(--ember-soft)}
.led.info{background:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.state{display:inline-flex;align-items:center;gap:8px;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.state.ok{color:var(--moss-hi)}.state.warn{color:var(--amber)}.state.bad{color:var(--ember)}.state.info{color:var(--brass-hi)}
/* controls */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 14px;border:1px solid var(--line-3);border-radius:var(--r);background:linear-gradient(#262c21,#1e2319);color:var(--ink);font:600 13px/1.2 var(--sans);letter-spacing:.005em;cursor:pointer;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff0d;transition:border-color .12s,background .12s,color .12s}
.btn:hover:not(:disabled){border-color:var(--brass);color:var(--brass-hi)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.primary{background:linear-gradient(#ddb27b,#c8975d);border-color:#e6c294;color:var(--brass-ink);box-shadow:inset 0 1px 0 #ffffff40,0 1px 10px #d2a36926}
.btn.primary:hover:not(:disabled){background:linear-gradient(#e8c28f,#d2a369);color:var(--brass-ink);border-color:#efd3ad}
.btn.danger{background:transparent;border-color:#e5927a66;color:var(--ember);box-shadow:none}
.btn.danger:hover:not(:disabled){background:var(--ember-soft);border-color:var(--ember);color:var(--ember)}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--line-2);color:var(--ink-2)}
.btn.small{min-height:29px;padding:4px 10px;font-size:12px}
.btn.link{background:none;border:none;box-shadow:none;color:var(--ink-3);min-height:0;padding:2px 0;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}
.btn.link:hover:not(:disabled){color:var(--ember)}
.copy{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--ink-4);border-radius:3px;padding:0 6px;font:500 9.5px/17px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;margin-left:8px;vertical-align:1px}
.copy:hover{color:var(--brass-hi);border-color:var(--brass)}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
input[type=text],input[type=number],select,textarea{width:100%;min-width:0;min-height:38px;padding:8px 11px;font:14px/1.3 var(--sans);color:var(--ink);background:var(--well);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:inset 0 1px 3px #0007;transition:border-color .12s}
input.mono{font:13px/1.3 var(--mono)}
input::placeholder{color:var(--ink-4)}
input:hover,select:hover{border-color:var(--line-3)}
input:focus,select:focus{outline:none;border-color:var(--brass);box-shadow:inset 0 1px 3px #0007,0 0 0 3px var(--brass-soft)}
select{appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-size:5px 5px;background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-repeat:no-repeat}
select option{background:var(--panel);color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.flabel{font:600 12.5px/1.3 var(--sans);color:var(--ink-2)}
.hint{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.err{font-size:12.5px;line-height:1.4;color:var(--ember);font-weight:500}
.err:empty{display:none}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.form .wide{grid-column:1/-1}
.switch{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.switch input{appearance:none;width:36px;height:20px;margin:1px 0 0;border-radius:10px;background:var(--well);border:1px solid var(--line-3);position:relative;cursor:pointer;transition:background .12s,border-color .12s}
.switch input::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-3);transition:left .12s,background .12s}
.switch input:checked{background:#a9bd8a2e;border-color:var(--moss)}
.switch input:checked::after{left:18px;background:var(--moss-hi)}
.switch b{color:var(--ink);font-weight:600;display:block}
.tick{display:inline-flex;gap:8px;align-items:center;font:500 12px var(--mono);color:var(--ink-2);cursor:pointer;padding:5px 9px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--well)}
.tick input{accent-color:var(--brass);margin:0}
.ticks{display:flex;flex-wrap:wrap;gap:6px}
.choice{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--well);cursor:pointer;transition:border-color .12s,background .12s}
.choice:hover{border-color:var(--line-3)}
.choice.on{border-color:var(--brass);background:linear-gradient(90deg,#d2a36914,transparent 70%)}
.choice input{appearance:none;width:14px;height:14px;margin:3px 0 0;border-radius:50%;border:1px solid var(--line-3);background:var(--void)}
.choice input:checked{border:4px solid var(--brass)}
.choice b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
/* panels */
.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel) 90px);border:1px solid var(--line-2);border-radius:7px;box-shadow:inset 0 1px 0 #ffffff08,0 8px 24px #0005;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.panel-h h2{font:600 10.5px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.panel-b{padding:18px}
.panel-b.flush{padding:0}
.panel-note{padding:12px 18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.stack.loose{gap:18px}
.stack.tight{gap:8px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.endalign{align-items:flex-end}
.grow{flex:1;min-width:160px}
.selfstart{align-self:flex-start}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.notice{border:1px solid var(--line-2);border-left:2px solid var(--ink-4);border-radius:var(--r);padding:11px 14px;font-size:13.5px;line-height:1.5;background:var(--well);color:var(--ink-2)}
.notice b{color:var(--ink)}
.notice.ok{border-left-color:var(--moss);background:linear-gradient(90deg,var(--moss-soft),transparent 60%),var(--well)}
.notice.warn{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-soft),transparent 60%),var(--well)}
.notice.bad{border-left-color:var(--ember);background:linear-gradient(90deg,var(--ember-soft),transparent 60%),var(--well)}
.notice.info{border-left-color:var(--brass);background:linear-gradient(90deg,var(--brass-soft),transparent 60%),var(--well)}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
/* page heads and stats */
.pagehead{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.pagehead .sub{color:var(--ink-3);margin-top:6px;max-width:68ch}
.eyebrow{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:7px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line-2);border-radius:7px;background:var(--panel);overflow:hidden}
.stat{padding:14px 18px;border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:none}
.stat .label{display:block;margin-bottom:6px}
.stat b{display:block;font:800 21px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.stat b.ok{color:var(--moss-hi)}.stat b.bad{color:var(--ember)}.stat b.warn{color:var(--amber)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:0;font-size:13.5px}
.kv dt,.kv dd{padding:9px 0;border-top:1px solid var(--line);margin:0;min-width:0}
.kv dt:first-of-type,.kv dt:first-of-type+dd{border-top:none;padding-top:0}
.kv dt{padding-right:22px;font:500 10.5px/1.9 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.kv dd{overflow-wrap:anywhere;color:var(--ink)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:13.5px}
.checks li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.checks li:first-child{border-top:none;padding-top:0}
.checks li:last-child{padding-bottom:0}
.checks .led{margin-top:7px;margin-left:3px}
/* the fleet */
.fleet{display:flex;flex-direction:column}
.fleet-head,.fleet-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) 170px;gap:16px;align-items:center;padding:13px 18px}
.fleet-head{border-bottom:1px solid var(--line-2)}
.fleet-row{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:background .12s}
.fleet-row:last-child{border-bottom:none}
.fleet-row:hover{background:#d2a3690d}
.fleet-row:hover .fleet-name{color:var(--brass-hi)}
.fleet-name{font:800 15.5px/1.25 var(--display);color:var(--ink);overflow-wrap:anywhere}
.fleet-sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;overflow-wrap:anywhere}
.fleet-row .mono{color:var(--ink-2)}
.tagline{display:inline-block;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);padding:1px 6px;border-radius:3px;margin-left:8px;vertical-align:2px}
/* a world: a rail and a working area */
.console{display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px;align-items:start}
.rail{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px;min-width:0}
.rail-id h1{font-size:21px;overflow-wrap:anywhere}
.rail-id .state{margin-top:9px;white-space:normal}
.rail-id .fleet-sub{margin-top:7px}
.back{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;display:inline-block;margin-bottom:12px}
.back:hover{color:var(--brass-hi)}
.nav{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.nav-item{display:block;padding:10px 12px;color:var(--ink-3);text-decoration:none;font-size:13.5px;font-weight:500;border-bottom:1px solid var(--line);border-left:2px solid transparent;white-space:nowrap;transition:color .12s,background .12s}
.nav-item:hover{color:var(--ink);background:#ffffff05}
.nav-item[aria-current=page]{color:var(--ink);background:linear-gradient(90deg,var(--brass-soft),transparent);border-left-color:var(--brass);font-weight:600}
.section-head{margin-bottom:16px}
.section-head h2{font:800 20px/1.2 var(--display);letter-spacing:-.012em}
.section-head p{color:var(--ink-3);margin-top:4px;font-size:13.5px;max-width:72ch}
/* the door */
.door{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.door-state{font:800 22px/1.1 var(--display);display:flex;align-items:center;gap:12px}
.door-state.open{color:var(--moss-hi)}.door-state.closed{color:var(--ember)}
.door-state .led{width:10px;height:10px}
/* the record */
.item{padding:13px 18px;border-top:1px solid var(--line)}
.item:first-child{border-top:none}
.item-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.item-head .what{font:600 13px var(--mono);color:var(--ink)}
.item-meta{font:500 11px var(--mono);color:var(--ink-3);letter-spacing:.03em}
.item p{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.chip{font:500 9.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 6px;border:1px solid var(--line-3);border-radius:3px;color:var(--ink-3);white-space:nowrap}
.chip.fact{color:var(--moss-hi);border-color:#a9bd8a66;background:var(--moss-soft)}
.chip.claim{color:var(--brass-hi);border-color:#d2a36966;background:var(--brass-soft)}
.verdict{margin-top:12px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--well);display:flex;flex-direction:column;gap:16px;font-size:13px}
.verdict h3{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.verdict .est h3{color:var(--moss-hi)}.verdict .say h3{color:var(--brass-hi)}.verdict .gap h3{color:var(--ink-3)}
.verdict .fail h3{color:var(--ember)}
/* the wizard */
.wizard{display:grid;grid-template-columns:200px minmax(0,1fr) 330px;gap:20px;align-items:start}
.steps{list-style:none;margin:0;padding:0;position:sticky;top:78px;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:center;padding:10px 0;font-size:13.5px;color:var(--ink-3);font-weight:500}
.steps li i{font:600 11px/24px var(--mono);font-style:normal;width:24px;height:24px;text-align:center;border-radius:50%;border:1px solid var(--line-3);color:var(--ink-3);background:var(--panel)}
.steps li.on{color:var(--ink);font-weight:600}
.steps li.on i{border-color:var(--brass);color:var(--brass-hi);box-shadow:0 0 0 3px var(--brass-soft)}
.steps li.done i{border-color:var(--moss);color:var(--moss-hi)}
.sheet{position:sticky;top:78px}
.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;font-size:13px;line-height:1.5;color:var(--ink-2)}
.rules li{padding:10px 0;border-top:1px solid var(--line)}
.rules li:first-child{border-top:none;padding-top:0}
.rules li:last-child{padding-bottom:0}
.rules b{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.taskrow{border:1px solid var(--line-2);border-radius:var(--r);padding:14px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:start;background:#0c0e0a80}
.wizard-foot{display:flex;gap:9px;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line)}
hr{border:none;border-top:1px solid var(--line);margin:4px 0}
details>summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
pre{font:12px/1.55 var(--mono);color:var(--ink-2);background:var(--well);border:1px solid var(--line);padding:12px 14px;border-radius:var(--r);overflow:auto;max-height:380px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.cmd{display:flex;gap:8px;align-items:flex-start}
.cmd pre{flex:1;min-width:0}
.log{font:12.5px/1.65 var(--mono);color:var(--ink-2);background:var(--well);border:1px solid var(--line);padding:12px 14px;border-radius:var(--r);min-height:150px;max-height:420px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.progress{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ink-2)}
.progress li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px}
.progress .led{margin-top:7px}
.progress .tx{font:11px var(--mono);color:var(--ink-4);overflow-wrap:anywhere;margin-top:1px}
@media (prefers-reduced-motion:no-preference){.led.run{animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}}
.led.run{background:var(--brass)}
/* narrower */
@media (max-width:1180px){.wizard{grid-template-columns:minmax(0,1fr) 300px}.steps{grid-column:1/-1;position:static;flex-direction:row;gap:18px;flex-wrap:wrap}.steps li{padding:0}}
@media (max-width:900px){
  .console,.wizard,.split,.split.even{grid-template-columns:minmax(0,1fr)}
  .rail,.steps,.sheet{position:static}
  .nav{flex-direction:row;overflow-x:auto;border-top:none;border-bottom:1px solid var(--line-2);margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .nav-item{border-bottom:2px solid transparent;border-left:none;padding:10px 13px;margin-bottom:-1px}
  .nav-item[aria-current=page]{border-bottom-color:var(--brass);background:none}
  main{padding:18px 16px 70px}.topbar-in{padding:8px 16px;min-height:0;gap:6px 11px}
  .bar-sep,.bar-meta.opt{display:none}
  h1{font-size:23px}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
  .stat b{font-size:18px}
  .fleet-head{display:none}
  .fleet-row{grid-template-columns:minmax(0,1fr);gap:5px}
  .fleet-row .col-opt{display:none}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{border-top:1px solid var(--line);padding:9px 0 0}
  .kv dd{border-top:none;padding:0 0 9px}
  .panel-b{padding:15px}.panel-h{padding:11px 15px}.item{padding:12px 15px}
  .wizard-foot{padding:12px 15px}.panel-note{padding:11px 15px}
  .btn{min-height:40px}.btn.small{min-height:32px}
  input[type=text],input[type=number],select{font-size:16px}
}
.mt8{margin-top:8px}
details.panel>summary{list-style:none;border-bottom:none}details.panel[open]>summary{border-bottom:1px solid var(--line)}
.stack>div:empty{display:none}
.kv.stacked{grid-template-columns:minmax(0,1fr)}
.kv.stacked dt{border-top:1px solid var(--line);padding:10px 0 1px;line-height:1.4}
.kv.stacked dt:first-of-type{border-top:none;padding-top:0}
.kv.stacked dd,.kv.stacked dt:first-of-type+dd{border-top:none;padding:0 0 10px}
.kv.stacked dd:last-child{padding-bottom:0}
.kv .mono,.kv code{font-size:12px}
@media (max-width:420px){.kv .mono,.kv code{font-size:11.2px}.copy{margin-left:5px}}
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line, #2a2f36); }