/* DISPATCH v2: the whole site is one monitor. Near-black bezel, teal line-art city on the glass, cream case files,
   amber for anything that needs you. The header is the top strip of the bezel. Spec: REDESIGN.md. */
:root{
  --bz:#0d1414;--bz2:#162020;--bz3:#22302f;--glass:#1f6f6a;--glass2:#154c4a;--outl:#8fe3d6;
  --amb:#f2a93b;--amb2:#ffe2a6;--cream:#ede6d6;--plate:#e9dfc8;--panel:#183c39;--tealtab:#2f6a5f;--uptab:#c9822f;
  --ink:#16302e;--ink2:#4f625f;--busy:#3a8fb0;--rest:#3f9d5a;--ret:#e07a2b;--hurt:#c8402f;
  --fc:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --cw:clamp(100px,calc((100vw - 260px) / 8.4),150px);--rh:calc(var(--cw) * .9 + 72px)
}
body{background:var(--bz)}

/* ---------- header = the top strip of the bezel ---------- */
.top{position:sticky;top:0;z-index:60;height:36px;gap:14px;padding:0 22px;background:var(--bz);border:0}
.brand{gap:7px;font:800 italic 21px/1 var(--fc);letter-spacing:.04em;color:var(--cream)}
.brand img{width:24px;height:24px}
.nav{gap:2px;margin-left:10px}
.nav a{height:22px;padding:0 10px;background:none;clip-path:none;color:#7f9c97;font:700 12px/1 var(--fc);letter-spacing:.16em}
.nav a:hover{background:none;color:var(--cream)}
.nav a.on{background:none;color:var(--amb);box-shadow:inset 0 -2px 0 var(--amb)}
.top-end{gap:6px}
.ca{height:24px;padding:0 9px;border:1px solid var(--bz3);background:var(--bz2);font-size:11px;color:#7f9c97}
.ca b{font-size:12px}
.ib{width:26px;height:26px;border:1px solid var(--bz3);background:var(--bz2);border-radius:5px}
.ib img,.ib svg{width:15px;height:15px}
.ib:hover{border-color:var(--amb)}
.wallet{height:24px;padding:0 11px;border-radius:4px;background:var(--amb);color:#1a1006;font-size:12px;letter-spacing:.12em}
.wallet.on{background:var(--tealtab);color:var(--cream)}

/* ---------- the desk ---------- */
.desk{height:calc(100dvh - 36px);padding:2px 12px 12px;background:var(--bz)}
.bezel{height:100%;position:relative;border-radius:30px;padding:0;background:linear-gradient(180deg,#1b2524,#0c1212 40%,#080d0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 0 rgba(0,0,0,.6),0 0 0 1px #030606,0 12px 30px rgba(0,0,0,.55)}
.screen{position:absolute;inset:20px;border-radius:16px;overflow:hidden;overflow:clip;background:var(--glass2);box-shadow:0 0 0 2px #020404,0 0 0 4px #1a2423}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer{position:absolute;inset:0;bottom:var(--rh);touch-action:none;cursor:grab;z-index:2}
.layer:active{cursor:grabbing}
.glass{position:absolute;inset:0;z-index:35;pointer-events:none;border-radius:16px;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 0 2px rgba(143,227,214,.08),inset 0 6px 18px rgba(0,0,0,.7),inset 0 0 110px rgba(0,0,0,.45)}
.screen.paused .map{filter:saturate(.45) brightness(.8)}

/* HUD: tiny mono strip top-right */
.hud{position:absolute;top:10px;right:12px;z-index:6;display:flex;align-items:center;gap:1px;background:rgba(9,20,20,.88);border:1px solid #2b4542;border-radius:4px;padding:2px;font:600 11px/1 var(--mono);color:#9fbdb7}
.hud-c{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-right:1px solid #233a38;letter-spacing:.06em}
.hud-c b{color:var(--cream);font-weight:600}
.hud-c:first-child b{color:var(--amb);font-size:13px}
.hud-c svg{width:12px;height:12px}
.hud-sp{display:flex;gap:2px;padding-left:4px}
.hud-sp button{height:22px;min-width:28px;padding:0 6px;border:1px solid #2b4542;border-radius:3px;background:#10201f;color:#9fbdb7;font:600 11px/1 var(--mono);cursor:pointer}
.hud-sp button.on{background:var(--amb);border-color:var(--amb);color:#1a1006}

/* right edge buttons: folder and gear */
.side{position:absolute;right:12px;top:50%;transform:translateY(-70%);z-index:6;display:grid;gap:12px}
.side-b{position:relative;width:46px;height:46px;display:grid;place-items:center;padding:0;border:1px solid #2f5754;border-radius:6px;background:#173f3c;color:var(--cream);cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.side-b:hover{background:#1f504c}
.side-b i{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);padding:2px 4px;background:var(--amb);color:#1a1006;font:800 normal 9px/1 var(--fc);letter-spacing:.1em;border-radius:2px}
.gear-p{position:absolute;right:58px;top:58px;width:230px;display:grid;gap:7px;padding:12px;background:var(--cream);color:var(--ink);border:2px solid #0d1414;border-radius:6px;font-size:13px}
.gear-p b{font:800 15px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase}
.gear-p a{font:700 13px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;color:#a35f12}
kbd{display:inline-block;padding:1px 5px;border:1px solid #9c8f74;border-bottom-width:2px;border-radius:3px;background:#fff8e8;font:600 11px/1.3 var(--mono);color:var(--ink)}

/* pins */
.pin{position:absolute;left:0;top:0;width:44px;height:54px;margin:-54px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.pin .ico{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#2f7fd0;color:var(--cream);border:3.5px solid var(--cream);box-shadow:0 0 0 2px rgba(13,20,20,.55),0 4px 0 rgba(0,0,0,.4);font:800 22px/1 var(--fc);transition:transform .15s}
.pin .ico svg{width:22px;height:22px}
.pin .ico.k-fire,.pin .ico.k-brawl,.pin .ico.k-heist{background:#e0552b}
.pin .ico.k-medical,.pin .ico.k-rescue{background:#1f9a8e}
.pin .stem{position:absolute;left:20px;top:43px;width:4px;height:11px;background:var(--cream);box-shadow:0 0 0 1px rgba(13,20,20,.45)}
.pin .stem::after{content:"";position:absolute;left:-3px;bottom:-3px;width:10px;height:5px;border-radius:50%;background:rgba(0,0,0,.4)}
.pin .cd{position:absolute;left:49px;top:11px;padding:5px 7px;background:#10201f;border:1.5px solid var(--amb);border-radius:3px;color:var(--amb);font:600 13px/1 var(--mono);white-space:nowrap;letter-spacing:.04em}
.pin .lbl{position:absolute;left:49px;top:36px;padding:2px 5px;background:rgba(13,20,20,.78);color:var(--cream);font:700 11px/1.1 var(--fc);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.pin:hover .lbl,.pin:focus-visible .lbl,.pin.hot .lbl{opacity:1}
.pin:hover .ico,.pin.hot .ico{transform:scale(1.12)}
.pin.big{width:50px;height:60px;margin:-60px 0 0 -25px}.pin.big .ico{width:50px;height:50px}.pin.big .stem{left:23px;top:49px}
.pin.big .cd{left:55px;top:14px}.pin.big .lbl{left:55px;top:40px}
.pin.urgent .ico{animation:pulse .7s infinite alternate}
.pin.urgent .cd{background:var(--hurt);border-color:var(--amb2);color:var(--cream)}
.pin.s-enroute .ico,.pin.s-onscene .ico{background:#3a5f5c}
.pin.s-enroute .cd,.pin.s-onscene .cd{color:var(--outl);border-color:var(--outl)}
.pin.s-decision .ico{background:var(--amb);color:#1a1006;animation:pulse .6s infinite alternate}
.pin.s-decision .cd{background:var(--amb);color:#1a1006}
.pin.win .ico{background:var(--rest)}.pin.win .cd{color:#9be2a9;border-color:#9be2a9}
.pin.lose .ico,.pin.s-missed .ico{background:#5f6866}.pin.lose .cd,.pin.s-missed .cd{color:#e8a294;border-color:#e8a294}
.pin.s-missed{opacity:.75}
@keyframes pulse{to{transform:scale(1.14);box-shadow:0 0 0 6px rgba(242,169,59,.35)}}

.token{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
.token .pt.tk{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--amb);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.token.back .pt.tk{border-color:var(--ret)}
.ghost{position:fixed;left:0;top:0;z-index:300;pointer-events:none}
.ghost .pt.tk{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:3px solid var(--amb);box-shadow:0 6px 16px rgba(0,0,0,.5)}
.pin.hot .ico{border-color:var(--amb);box-shadow:0 0 0 6px rgba(242,169,59,.4)}

.result{position:absolute;z-index:4;transform:translateX(-50%);min-width:170px;max-width:240px;padding:7px 10px;background:var(--cream);color:var(--ink);border:2px solid #0d1414;border-radius:5px;box-shadow:0 4px 0 rgba(0,0,0,.35);pointer-events:none;animation:rise 3.4s forwards}
.result>b{display:block;font:800 16px/1 var(--fc);letter-spacing:.06em;text-transform:uppercase}
.result.win>b{color:#2f7f45}.result.lose>b{color:#b23a26}.result.miss>b{color:#5f6866}
.result p{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:12.5px;line-height:1.25}
.result p b{color:#a35f12}
.result .pt.xs{width:20px;height:20px;border-radius:50%;flex:none}
@keyframes rise{0%{opacity:0;margin-top:8px}8%{opacity:1;margin-top:0}80%{opacity:1}100%{opacity:0;margin-top:-14px}}

/* portraits */
.pt{position:relative;display:block;overflow:hidden;background:var(--hc,#3f6f6a)}
.pt b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px/1 var(--fc);color:rgba(255,255,255,.75)}
.pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}

/* mentor */
.mentor{position:absolute;left:16px;top:14px;z-index:40;display:flex;align-items:flex-start;gap:0;max-width:430px;cursor:pointer}
.mentor.in{animation:pop .3s cubic-bezier(.3,1.5,.6,1)}
.m-frame{display:block;padding:4px;background:var(--cream);border:2px solid #0d1414;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.mentor .m-pt{width:92px;height:92px}
.mentor p{position:relative;margin:12px 0 0 14px;padding:12px 14px;background:var(--cream);color:var(--ink);border:2px solid #0d1414;border-radius:6px;font-size:15px;line-height:1.38;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.mentor p::before{content:"";position:absolute;left:-11px;top:16px;border:9px solid transparent;border-right-color:#0d1414;border-left:0}
.mentor p b{display:block;margin-bottom:3px;font:800 13px/1 var(--fc);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.mentor em,.modal em{font-style:normal;font-weight:700;color:#c47512}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(-8px)}}

/* roster: bottom strip on the glass */
.roster{position:absolute;left:0;right:0;bottom:0;height:var(--rh);z-index:30;display:flex;gap:14px;align-items:flex-end;justify-content:safe center;padding:24px 18px 12px;overflow-x:auto;overflow-y:hidden;background:linear-gradient(180deg,rgba(15,26,26,0),rgba(15,26,26,.92) 26%);scrollbar-width:thin;scrollbar-color:#2f5754 transparent}
.card{position:relative;flex:none;width:var(--cw);padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left;touch-action:pan-x;user-select:none}
.card .frame{position:relative;display:block;height:calc(var(--cw) * .9);padding:3px;background:#0d1414;border-radius:4px 4px 0 0;box-shadow:0 0 0 1px #2a3b3a}
.card .frame .pt{width:100%;height:100%;border-radius:2px}
.card .plate{display:block;padding:5px 4px 4px;background:var(--plate);border:2px solid #0d1414;border-top:0;border-radius:0 0 4px 4px;font:800 14px/1 var(--fc);letter-spacing:.04em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .tag{position:absolute;left:4px;top:-17px;height:17px;padding:3px 7px 0;border-radius:4px 4px 0 0;font:800 11px/1 var(--fc);letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.card .tag:empty{display:none}
.card.st-busy .tag{background:var(--busy)}.card.st-resting .tag{background:var(--rest)}.card.st-returning .tag{background:var(--ret)}.card.st-injured .tag{background:var(--hurt)}
.card .rk{position:absolute;left:5px;bottom:9px;color:var(--amb);filter:drop-shadow(0 1px 0 #000)}
.card .lv{position:absolute;right:5px;bottom:8px;display:flex;align-items:center;gap:2px;padding:2px 4px;background:rgba(13,20,20,.85);border-radius:3px;color:var(--amb);font:700 11px/1 var(--mono)}
.card .lv b{color:var(--cream);font-weight:600}
.card .spt{position:absolute;right:5px;top:6px;padding:2px 5px;background:var(--amb);color:#1a1006;font:800 12px/1 var(--fc);border-radius:3px;animation:pulse .8s infinite alternate}
.card .rc{position:absolute;left:5px;top:6px;padding:2px 4px;background:rgba(13,20,20,.85);color:var(--amb);font:600 10px/1 var(--mono)}
.card .bar{position:absolute;left:3px;right:3px;bottom:3px;height:3px;background:rgba(0,0,0,.4)}
.card .bar i{display:block;height:100%;width:0;background:var(--amb);transition:width .2s linear}
.card:hover .frame{box-shadow:0 0 0 2px var(--outl)}
.card.sel .frame,.card.sel .plate{outline:3px solid var(--amb);outline-offset:0}
.card.sel{transform:translateY(-6px)}
.card.st-busy .frame .pt,.card.st-returning .frame .pt{filter:saturate(.6)}
.card.st-resting .frame .pt,.card.st-injured .frame .pt{filter:grayscale(.75) brightness(.75)}
.card.off{opacity:.5}
.card.big{width:220px;margin:18px auto 0}
.card.big>.pt{height:220px;border:3px solid #0d1414;border-bottom:0;border-radius:4px 4px 0 0}
.card.big .tag{background:var(--amb);color:#1a1006}
.card.big .plate{font-size:20px;padding:8px 6px}

/* ---------- modals on the glass ---------- */
.modal-wrap{position:absolute;inset:0;bottom:var(--rh);z-index:20;display:grid;place-items:center;padding:56px 70px 16px;background:rgba(0,0,0,.55);overflow:auto}
.modal{display:grid;grid-template-columns:240px minmax(0,500px) 270px;gap:16px;align-items:start;max-width:1080px;width:100%;color:var(--ink);animation:pop .22s ease-out}
.ptitle{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;background:var(--panel);color:var(--cream);font:800 20px/1 var(--fc);letter-spacing:.05em;text-transform:uppercase}
.ptitle>span:first-child{display:flex;align-items:center;gap:8px}
.ptitle .tm{font:600 13px/1 var(--mono);color:var(--amb);letter-spacing:.04em}

.caller{background:var(--cream);border:2px solid #0d1414;border-radius:6px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.caller-ph{position:relative;height:132px;background:#8d9896;display:grid;place-items:end center;overflow:hidden}
.caller-ph>svg{position:absolute;inset:0;width:100%;height:100%}
.caller-ph .soc{position:absolute;left:8px;top:8px;z-index:1;padding:3px 6px;background:#0d1414;color:var(--cream);font:800 11px/1 var(--fc);letter-spacing:.18em}
.caller-ph .k2{position:absolute;left:8px;bottom:8px;z-index:1;display:flex;align-items:center;gap:4px;padding:3px 6px;background:var(--cream);color:var(--ink);font:800 11px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase}
.caller-id{padding:10px 12px 0}
.caller-id b{display:block;font:800 18px/1 var(--fc);letter-spacing:.03em;text-transform:uppercase}
.caller-id span{font:600 13px/1.4 var(--ff);color:#c47512}
.quote{padding:6px 12px 10px;font-size:14px;font-style:italic;line-height:1.4}
.caller-f{display:flex;justify-content:space-between;padding:8px 12px;border-top:1.5px solid #d4c9b1;font:700 12px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}

.panel-c{background:var(--cream);border:2px solid #0d1414;border-radius:6px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.pbody{display:grid;gap:12px;padding:14px}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:700 13px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.stars{color:#c47512;font-size:15px;letter-spacing:1px}.stars .dim{color:#cdbf9f;font-style:normal}
.meta .ev{padding:3px 6px;background:var(--amb);color:#1a1006}
.needs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.needs li{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border:1.5px solid #b9ad93;background:#f7f1e3;font:700 13px/1 var(--fc);letter-spacing:.07em;text-transform:uppercase}
.needs li b{font:600 12px/1 var(--mono);color:#a33a2a}
.needs li.met{border-color:#3f9d5a;background:#e2f0dc}.needs li.met b{color:#2f7f45}
.hint{font-size:14.5px;color:var(--ink);line-height:1.45}
.hint span{color:var(--ink2)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.slot{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 10px;border:2px dashed #b9ad93;background:#f7f1e3;color:var(--ink2);font:700 13px/1.1 var(--fc);letter-spacing:.06em;text-transform:uppercase}
.slot i{font:800 22px/1 var(--fc);font-style:normal;color:#c47512}
.slot.full{border:2px solid #0d1414;background:#fff8e8;color:var(--ink);cursor:pointer}
.slot.full .pt{width:38px;height:38px;flex:none;border-radius:3px}
.slot.full:hover{border-color:#a33a2a}
.odds{position:relative;display:flex;justify-content:space-between;align-items:baseline;padding:8px 10px 12px;background:#10201f;color:#9fbdb7;font:700 13px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase;overflow:hidden;border-radius:3px}
.odds b{font:600 22px/1 var(--mono);color:var(--cream)}
.odds i{position:absolute;left:0;bottom:0;height:4px;background:#5f6866;transition:width .2s}
.odds.good i{background:var(--rest)}.odds.good b{color:#9be2a9}.odds.mid i{background:var(--amb)}.odds.mid b{color:var(--amb)}.odds.low i{background:var(--hurt)}.odds.low b{color:#f0a090}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.b-go{height:44px;padding:0 18px;border:2px solid #0d1414;border-radius:4px;background:var(--amb);color:#1a1006;font:800 17px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #0d1414}
.b-go:hover:not(:disabled){background:#ffbc55}
.b-go:disabled{background:#cfc4ab;color:#7c7462;cursor:not-allowed;box-shadow:none}
.b-hold,.b-key{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border:2px solid #0d1414;border-radius:4px;background:#f7f1e3;color:var(--ink);font:800 15px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.b-key kbd{background:var(--amb);border-color:#0d1414;color:#1a1006;font-weight:700}
.b-link{font:700 13px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase;color:#a35f12}

.panel-r{background:var(--cream);border:2px solid #0d1414;border-radius:6px;padding:12px;box-shadow:0 6px 0 rgba(0,0,0,.35);text-align:center}
.panel-r h3{font:800 16px/1 var(--fc);letter-spacing:.14em;text-transform:uppercase;text-align:left}
.rbox{display:grid;place-items:center;margin:6px 0}
.radar{max-width:100%;height:auto}
.r-bg{fill:#16302e;stroke:#0d1414;stroke-width:1.5}
.r-grid{fill:none;stroke:#2f5754;stroke-width:1}
.r-axis{stroke:#2f5754;stroke-width:1}
.r-req{fill:rgba(237,230,214,.18);stroke:var(--cream);stroke-width:1.5;stroke-dasharray:4 3}
.r-team{fill:rgba(242,169,59,.75);stroke:var(--amb);stroke-width:2}
.r-ic circle{fill:#16302e}.r-ic svg{color:var(--cream)}
.rleg{display:flex;justify-content:center;gap:6px 14px;align-items:center;font:700 12px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.rleg i{display:inline-block;width:12px;height:12px;margin-right:-8px;vertical-align:-1px}
.rleg .lr{border:1.5px dashed var(--ink)}.rleg .lt{background:var(--amb)}

/* choice event */
.onscene{display:flex;align-items:center;gap:6px;font:700 13px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.onscene .pt.sm{width:34px;height:34px;border-radius:3px;border:2px solid #0d1414}
.evtext{font-size:15.5px;line-height:1.45}
.choices{display:grid;gap:7px}
.choices button{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #b9ad93;border-radius:4px;background:#f7f1e3;color:var(--ink);text-align:left;font-size:15px;cursor:pointer}
.choices button:hover:not(:disabled){border-color:#0d1414;background:#fff8e8}
.choices .n{width:24px;height:24px;display:grid;place-items:center;background:var(--panel);color:var(--cream);font:800 14px/1 var(--fc);border-radius:3px}
.choices small{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--mono);color:var(--ink2)}
.choices button.picked{border:2px solid var(--amb);background:#fff1d6}
.choices button:disabled:not(.picked){opacity:.5}
.evres{display:grid;gap:10px;padding:12px;border-left:4px solid var(--rest);background:#e2f0dc;font-size:14px}
.evres.bad{border-color:var(--hurt);background:#f4ddd6}
.evres .b-go{justify-self:start}

/* clock-in card */
.m-start{grid-template-columns:minmax(0,640px);justify-content:center}
.m-start>.ptitle{border:2px solid #0d1414;border-bottom:0;border-radius:6px 6px 0 0}
.start{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:18px;background:var(--cream);border:2px solid #0d1414;border-top:0;border-radius:0 0 6px 6px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.start .pt.big{width:100%;aspect-ratio:1}
.st-body{display:grid;gap:12px;align-content:start}
.st-body h2{font:800 italic 34px/1 var(--fc);text-transform:uppercase}
.st-body p{font-size:15px;line-height:1.45}
.st-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.st-facts li{padding:6px 9px;background:#10201f;color:#9fbdb7;font:700 12px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;border-radius:3px}
.st-facts b{color:var(--amb);font-family:var(--mono)}

/* performance review */
.m-review{grid-template-columns:minmax(0,1fr)}
.rv{display:grid;grid-template-columns:minmax(0,600px) 280px;gap:18px;justify-content:center;align-items:start}
.rv-main,.rv-bonus{background:var(--cream);border:2px solid #0d1414;border-radius:6px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.rv-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:18px}
.rv-pt{display:grid;gap:6px;justify-items:center;font:700 12px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.rv-pt .pt.big{width:132px;height:132px}
.rv-c{display:grid;gap:10px;align-content:start}
.rv-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font:600 12px/1 var(--mono);color:var(--ink2)}
.rv-meta b{color:#a35f12}
.rv-c h3{font:400 40px/.95 var(--fc);letter-spacing:.02em;text-transform:uppercase}
.rv-c h3 b{font-weight:800}
.rv-calls{font:700 16px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase}
.rv-bar{height:14px;background:#16302e;border-radius:2px;overflow:hidden;border:2px solid #0d1414}
.rv-bar i{display:block;height:100%;background:var(--amb)}
.rv-n{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.rv-n li{display:flex;align-items:center;gap:6px;font:800 20px/1 var(--fc)}
.rv-n svg{width:22px;height:22px}
.rv-save{display:flex;gap:6px}
.rv-save input{flex:1;min-width:0;height:38px;padding:0 10px;border:2px solid #b9ad93;background:#fff8e8;color:var(--ink);border-radius:3px}
.rv-save button{height:38px;padding:0 14px;border:2px solid #0d1414;background:var(--panel);color:var(--cream);font:800 14px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;cursor:pointer}
.rv-st{font-size:13px;color:var(--ink2);min-height:16px}
.rv-bonus{display:grid;gap:10px;padding:0 14px 14px;text-align:center}
.rv-bonus h3{margin:0 -14px;padding:10px;background:var(--amb);color:#1a1006;font:800 20px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase}
.rv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:grid;gap:6px;justify-items:center;align-content:center;min-height:110px;padding:8px;background:#16302e;color:var(--cream);border:2px solid #0d1414;border-radius:4px}
.tile b{font:800 34px/1 var(--fc);color:var(--amb)}
.tile span{font:700 11px/1.1 var(--fc);letter-spacing:.08em;text-transform:uppercase}
.tile .pt.mid{width:64px;height:64px;border-radius:3px}
.tile.dim b{color:#5f6866}
.rv-bonus .line{padding:7px 9px;background:#16302e;color:var(--cream);font:700 13px/1.2 var(--fc);letter-spacing:.05em;text-transform:uppercase;border-radius:3px;text-align:left}
.rv-rew{display:grid;gap:3px;text-align:left;font:600 12px/1.4 var(--mono)}
.rv-rew span{display:flex;justify-content:space-between;border-bottom:1px dashed #c9bfa9}
.rv-rew b{color:#2f7f45}
.rv-bonus .acts{justify-content:center}

/* hero sheet */
.w-sheet{background:rgba(0,0,0,.4)}
.m-sheet{grid-template-columns:minmax(0,1fr);max-width:1000px;gap:0;padding:0 14px 14px;background:var(--panel);border:3px solid var(--cream);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tabs{display:flex;gap:4px;padding:12px 0 10px;align-items:center}
.tabs button{min-width:130px;height:36px;padding:0 18px;border:2px solid #0d1414;border-radius:4px;background:var(--tealtab);color:var(--cream);font:800 17px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.tabs button.on{background:var(--uptab);color:#1a1006}
.tabs .x{margin-left:auto;min-width:0;width:36px;padding:0;font-size:24px;background:#0d1414}
.sheet{display:grid;grid-template-columns:270px minmax(0,1fr) 270px;gap:14px}
.sh-l,.sh-r{display:grid;gap:10px;align-content:start;padding:12px;background:var(--cream);border:2px solid #0d1414;border-radius:6px}
.sh-art .pt.big{width:100%;aspect-ratio:1/1.05;border:2px solid #0d1414;border-radius:3px}
.sh-name h2{font:800 italic 30px/1 var(--fc);text-transform:uppercase}
.sh-name span{display:block;font:600 14px/1.3 var(--ff);color:var(--ink2)}
.sh-name .rkl{display:flex;align-items:center;gap:6px;margin-top:4px;font:800 13px/1 var(--fc);letter-spacing:.1em;text-transform:uppercase;color:#a35f12}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:5px 9px;background:#16302e;color:var(--cream);font:700 12px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase;border-radius:3px}
.chips .cs{background:var(--rest)}.chips .cs.st-busy{background:var(--busy)}.chips .cs.st-returning{background:var(--ret)}.chips .cs.st-injured{background:var(--hurt)}.chips .cs.st-resting{background:var(--rest)}
.sh-m{display:grid;gap:7px;align-content:start;color:var(--cream)}
.sp-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0f2826;border:1.5px solid #2f5754;border-radius:4px;font:800 16px/1 var(--fc);letter-spacing:.12em;text-transform:uppercase}
.sp-row b{min-width:40px;padding:5px 8px;background:var(--amb);color:#1a1006;font:800 20px/1 var(--fc);text-align:center;border-radius:3px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) 38px 44px 38px;gap:6px;align-items:center;padding:6px 6px 6px 14px;background:#20504b;border-radius:4px;font:800 17px/1 var(--fc);letter-spacing:.08em;text-transform:uppercase}
.srow>span{display:flex;align-items:center;gap:8px}
.srow b{text-align:center;font:600 18px/1 var(--mono);color:var(--amb)}
.srow button{height:34px;border:2px solid #0d1414;border-radius:3px;background:var(--cream);color:var(--ink);font:800 20px/1 var(--fc);cursor:pointer}
.srow button:hover:not(:disabled){background:var(--amb)}
.srow button:disabled{opacity:.35;cursor:not-allowed}
.power{padding:12px 14px;background:var(--cream);color:var(--ink);border-radius:4px}
.power b{font:800 20px/1 var(--fc);letter-spacing:.05em;text-transform:uppercase;color:#a35f12}
.power p{margin-top:6px;font-size:14.5px}
.sh-m .tip,.sh-m .bio{font-size:14.5px;line-height:1.5;color:#cfe3de}
.sh-m .bio{padding:12px 14px;background:#0f2826;border-radius:4px}
.sh-m .tip a{color:var(--amb);text-decoration:underline}
.sh-r{justify-items:center}
.lvl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;width:100%;font:600 12px/1 var(--mono);color:var(--ink2)}
.lvl .lvn{grid-row:span 2;font:800 14px/1 var(--fc);letter-spacing:.1em}
.lvl .lvn b{display:block;font-size:30px;color:var(--ink)}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.segs i{height:12px;background:#16302e;border-radius:2px}
.segs i.on{background:var(--amb)}

/* ---------- the other pages: case files on the same glass ---------- */
body:not(.on-desk) #view{margin:0 14px;min-height:calc(100dvh - 50px);border-radius:12px 12px 0 0;background:
  repeating-linear-gradient(180deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),
  linear-gradient(rgba(143,227,214,.07) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(143,227,214,.07) 1px,transparent 1px) 0 0/48px 48px,
  radial-gradient(ellipse at 50% 0,#1f6f6a,#154c4a 70%);box-shadow:inset 0 0 0 1px #1c2828,inset 0 0 120px rgba(0,0,0,.35);overflow:hidden}
body:not(.on-desk) .foot{margin:0 14px 14px;max-width:none;padding:14px 22px;background:#0b1111;border:0;border-radius:0 0 12px 12px;color:#7f9c97}
.pg-h .k,.k{color:var(--amb)}
.pg-h h1{font-style:italic;color:var(--cream);text-shadow:0 3px 0 rgba(0,0,0,.35)}
.pg-h h1 em{color:var(--amb)}
.pg-h p{color:#cfe3de}
.sec{color:var(--amb)}
.file,.dossier,.prev-r{border-radius:6px;border-color:#0d1414;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.dossier .d-pt .pt.big{border:2px solid #0d1414;border-radius:3px}
.board th{background:var(--panel)}
.docs nav a{background:rgba(13,20,20,.7);border-left-color:var(--amb);color:var(--cream)}
.docs article h2{color:var(--panel)}
.chip.on,.chip:hover{background:var(--amb)}
.btn{border-radius:4px}

/* ---------- small screens ---------- */
@media (max-width:1180px){
  .modal{grid-template-columns:220px minmax(0,1fr) 240px}
  .nav a{padding:0 7px;letter-spacing:.1em}
  .ca{display:none}
}
@media (max-width:980px){
  .modal{grid-template-columns:minmax(0,1fr) 240px}
  .modal .caller{display:none}
  .sheet{grid-template-columns:240px minmax(0,1fr)}.sh-r{grid-column:1/-1}
  .rv{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--cw:80px;--rh:142px}
  .top{height:40px;padding:0 8px}
  .nav{top:40px}
  .desk{height:calc(100dvh - 40px);padding:0 4px 4px}
  .bezel{border-radius:14px}
  .screen{inset:7px}
  .screen,.glass{border-radius:8px}
  body:not(.on-desk) #view{margin:0 4px}
  body:not(.on-desk) .foot{margin:0 4px 4px}
  .hud{top:6px;right:6px;left:auto;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 12px)}
  .hud-c{height:22px;padding:0 6px}
  .hud-c:nth-child(n+3):nth-child(-n+5){display:none}
  .side{top:auto;bottom:calc(var(--rh) + 10px);right:6px;transform:none;grid-auto-flow:column;gap:6px}
  .side-b{width:38px;height:38px}
  .gear-p{right:0;top:auto;bottom:52px}
  .roster{padding:20px 8px 8px;gap:8px;justify-content:flex-start}
  .card .frame{height:82px}
  .card .plate{font-size:12px}
  .modal-wrap{place-items:start center;padding:44px 8px 8px}
  .modal,.m-start,.rv,.sheet,.start,.rv-body{grid-template-columns:minmax(0,1fr)}
  .panel-r{display:none}
  .m-sheet .sh-r{display:grid}
  .start .pt.big,.rv-pt{display:none}
  .start{grid-template-columns:1fr}
  .mentor{left:6px;top:36px;max-width:calc(100% - 12px)}
  .mentor .m-pt{width:56px;height:56px}
  .mentor p{font-size:13px}
  .tabs button{min-width:0;flex:1;padding:0 6px}
  .srow{grid-template-columns:minmax(0,1fr) 34px 36px 34px;padding-left:8px}
  .rv-c h3{font-size:30px}
}

/* toasts sit inside the bezel, top centre, newest two only */
body.on-desk .toasts{left:50%;right:auto;bottom:auto;top:66px;transform:translateX(-50%);width:max-content;max-width:min(520px,calc(100vw - 40px));justify-items:center}
body.on-desk .toast:nth-last-child(n+3){display:none}
@media (max-width:760px){body.on-desk .toasts{top:84px}}