:root{--digbit-build:"0.23.2"}   /* which version this file is from (tools/stamp-build.js sets it) */
:root{
  color-scheme: dark;
  --navy-950:#0c1424; --navy-900:#111c30; --navy-800:#172540; --navy-700:#1d2e4d; --navy-600:#27405f;
  --line:#33496f; --line-soft:#283c5e;
  --text:#eaf0f8; --muted:#a3b3cc; --faint:#7184a2;
  --hivis:#ff7a1a; --hivis-soft:rgba(255,122,26,.14); --silver:#c9d2de; --ink:#1a1206;
  --ok:#45d08c; --warn:#ffc53d; --bad:#ff5a4f; --rival:#a78bfa;
  --display:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;
  --body:'Overpass','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--navy-900);color:var(--text);font:14px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hivis);outline-offset:2px}
[hidden]{display:none!important}
#app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}

/* HUD */
.hud{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:16px 16px 10px;background:var(--navy-800);border-bottom:1px solid var(--line)}
.hud::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(var(--hivis) 0 2px,var(--silver) 2px 4px,var(--hivis) 4px 6px)}
.brand{display:flex;flex-direction:column;line-height:1}
.logo{font:800 28px/.9 var(--display);letter-spacing:.03em;color:var(--hivis);text-transform:uppercase}
.town{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:600}
.clock{display:flex;flex-direction:column;gap:2px;min-width:118px}
.clock .date{font:700 18px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.clock .time{display:flex;align-items:center;gap:8px}
.clock .time b{font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.phase{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:2px 6px 1px;border-radius:3px;background:var(--navy-700)}
.phase.peak{background:var(--hivis);color:var(--ink)}
.speed{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.speed button{background:var(--navy-700);border:0;border-right:1px solid var(--line);padding:7px 11px;cursor:pointer;font:600 13px/1 var(--mono);color:var(--muted)}
.speed button:last-child{border-right:0}
.speed button:hover{background:var(--navy-600);color:var(--text)}
.speed button[aria-pressed="true"]{background:var(--hivis);color:var(--ink)}
.stats{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.val{font:600 18px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sub{font-size:11px;color:var(--faint);white-space:nowrap}
.neg .val{color:var(--bad)}
.c-ok{color:var(--ok)} .c-warn{color:var(--warn)} .c-bad{color:var(--bad)}

/* stage */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:0}
.map-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:#0c1424}
#map{display:block;touch-action:none;cursor:grab}
.tip{position:absolute;pointer-events:none;z-index:5;background:rgba(12,20,36,.96);border:1px solid var(--line);border-radius:5px;padding:7px 9px;font-size:12px;line-height:1.45;max-width:290px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.tip hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.tip .m{color:var(--muted)} .tip .ok{color:var(--ok)} .tip .rv{color:var(--rival)} .tip .bad{color:var(--bad)} .tip .warn{color:var(--warn)} .tip .or{color:#7fb3ff}
.toasts{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:6;width:min(560px,calc(100% - 48px));pointer-events:none}
.toast{background:rgba(12,20,36,.96);border:1px solid var(--line);border-left:4px solid var(--hivis);border-radius:5px;padding:9px 12px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:tin .25s ease-out}
.toast.bad{border-left-color:var(--bad)} .toast.good{border-left-color:var(--ok)} .toast.rival{border-left-color:var(--rival)} .toast.event{border-left-color:var(--warn)}
@keyframes tin{from{opacity:.2;transform:translateY(-6px)}to{opacity:1;transform:none}}
.zoomctl{position:absolute;right:14px;bottom:36px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;z-index:4}
.zoomctl button{width:34px;height:32px;border:0;background:rgba(23,37,64,.94);font-size:18px;font-weight:700;cursor:pointer}
.zoomctl button + button{border-top:1px solid var(--line)}
.zoomctl button:hover{background:var(--navy-600)}
.attrib{position:absolute;left:10px;bottom:8px;font-size:10.5px;color:var(--muted);background:rgba(12,20,36,.75);padding:2px 7px;border-radius:3px;z-index:4;pointer-events:none}
.busy{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:12px;background:rgba(12,20,36,.97);border:1px solid var(--line);border-left:4px solid var(--hivis);border-radius:6px;padding:11px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.busy b{display:block;font-size:14px}
.busy span{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.surveychip{position:absolute;left:12px;bottom:36px;z-index:5;display:flex;align-items:center;gap:10px;max-width:min(330px,calc(100% - 90px));background:rgba(12,20,36,.95);border:1px solid var(--line);border-left:4px solid var(--hivis);border-radius:6px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.surveychip.failed{border-left-color:var(--bad)}
.surveychip b{display:block;font-size:13px}
.surveychip span{display:block;font-size:11.5px;color:var(--muted)}
.surveychip .btn{flex:none}
.surveychip .spin{width:15px;height:15px;border-width:2.5px}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--hivis);animation:spin 0.8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* sheets */
.sheet{position:absolute;inset:0;margin:auto;z-index:8;width:min(580px,calc(100% - 32px));height:fit-content;max-height:calc(100% - 28px);overflow:auto;background:rgba(17,28,48,.96);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:8px;padding:30px 28px 24px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.sheet::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:8px 8px 0 0;background:linear-gradient(var(--hivis) 0 2px,var(--silver) 2px 4px,var(--hivis) 4px 6px)}
.eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sheet h1{margin:0;font:800 58px/.9 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--hivis);text-wrap:balance}
.sheet .lede{font-size:15.5px;line-height:1.5;margin:12px 0 18px;max-width:50ch}
.steps{list-style:none;counter-reset:s;margin:0 0 16px;padding:0;display:grid;gap:9px}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 13px/1.5 var(--mono);color:var(--hivis)}
.steps b{color:var(--text)}
.status{font-size:13px;margin:0 0 16px;padding:9px 12px;border-radius:5px;background:var(--hivis-soft);border:1px solid rgba(255,122,26,.35)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{background:var(--navy-600);border:1px solid var(--line);border-radius:5px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:13px}
.btn:hover:not(:disabled){background:#30496d}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--hivis);border-color:var(--hivis);color:var(--ink);font-weight:700}
.btn.primary:hover:not(:disabled){background:#ff8d3a}
.btn.small{padding:5px 10px;font-size:12px}
.endstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 20px}
.endstats div{display:flex;flex-direction:column;gap:2px}
.endstats dd{margin:0;font:600 20px/1.1 var(--mono)}
.endstats dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* panel */
.panel{min-height:0;overflow:hidden;background:var(--navy-800);border-left:1px solid var(--line);display:flex;flex-direction:column}
/* one page of the panel at a time, picked with the tabs along its top */
.paneltabs{display:flex;flex:none;padding:6px 8px 0;border-bottom:1px solid var(--line);background:var(--navy-900)}
.paneltabs button{flex:1 1 auto;padding:11px 3px 10px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);font:700 12.5px/1 var(--body);cursor:pointer;white-space:nowrap}
.paneltabs button:hover{color:var(--text)}
.paneltabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--hivis)}
.paneltabs button.alert::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bad);margin-left:4px;vertical-align:2px}
.pages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px 26px}
.page{display:none;flex-direction:column;gap:12px}
.page.active{display:flex}
.card{background:var(--navy-700);border:1px solid var(--line-soft);border-radius:6px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.card > header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h2{margin:0;font:700 18px/1 var(--display);letter-spacing:.07em;text-transform:uppercase}
.hint{font-size:12px;color:var(--muted);line-height:1.4;margin:0}
.hint.call{color:var(--text);background:var(--hivis-soft);border:1px solid rgba(255,122,26,.3);padding:7px 9px;border-radius:5px}
.search{width:100%;background:var(--navy-950);border:1px solid var(--line);border-radius:5px;padding:9px 11px;font-size:14px}
.search::placeholder{color:var(--faint)}
.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.results:empty{display:none}
.results button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:none;border:0;border-radius:4px;padding:6px 8px;cursor:pointer;text-align:left}
.results button:hover,.results button:focus-visible{background:var(--navy-600)}
.results button span{font-size:11.5px;color:var(--faint);white-space:nowrap}
.results .none{font-size:12.5px;color:var(--muted);padding:4px 8px}
.placecard{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-soft);padding-top:10px}
.placecard > div{display:flex;flex-direction:column}
.placecard b{font:700 20px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--hivis)}
.placecard span{font-size:12px;color:var(--muted)}
.placecard p{margin:0;font-size:12.5px;line-height:1.45}
.placecard .btn{align-self:flex-start}
.pill{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 7px 2px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad);background:rgba(255,90,79,.12)}
.tools{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.tools .tool{grid-column:span 3;padding-left:3px;padding-right:3px}

.tool{display:flex;align-items:center;gap:6px;justify-content:center;background:var(--navy-600);border:1px solid var(--line);border-radius:5px;padding:8px 6px;cursor:pointer;font-weight:600;font-size:12.5px;white-space:nowrap}
.tool[aria-pressed="true"]{background:var(--hivis);border-color:var(--hivis);color:var(--ink)}
kbd{font:600 10.5px/1 var(--mono);padding:2px 4px;border-radius:3px;border:1px solid currentColor;opacity:.75}
.planline{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:13px}
.linkbtn{background:none;border:0;color:var(--hivis);cursor:pointer;font-size:12px;font-weight:700;padding:0;white-space:nowrap;flex:none}
.linkbtn:disabled{color:var(--faint);cursor:default}
.crewline{font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:flex-start}
.crewline::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--faint);margin-top:4px}
.crewline.digging::before{background:var(--ok);box-shadow:0 0 0 3px rgba(69,208,140,.18)}
.crewline.stuck::before{background:var(--warn)}
#planSummary b{font-family:var(--mono);color:var(--text)}
details.costs summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600}
table{border-collapse:collapse;width:100%}
.costs table{margin-top:6px;font-size:12px}
.costs td{padding:3px 0;border-top:1px solid var(--line-soft)}
.costs td.n{text-align:right;font-family:var(--mono)}
.costs td.h{text-align:right;color:var(--faint);font-family:var(--mono);width:64px}
.sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.netsel{display:flex;align-items:center;justify-content:space-between;gap:10px}
.netsel select{flex:1;min-width:0;background:var(--navy-950);border:1px solid var(--line);border-radius:5px;padding:5px 8px;font-size:13px}
.peaknums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.peaknums div{display:flex;flex-direction:column;gap:1px}
.big{font:600 19px/1.15 var(--mono);font-variant-numeric:tabular-nums}
.big small{font-size:11px;color:var(--faint);font-weight:500}
#chart{display:block;width:100%;height:132px}
.caption{font-size:11.5px;color:var(--muted);margin:0}
.tiers{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:5px;overflow:hidden}
.tier{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;padding:6px 8px;font-size:12.5px;border-top:1px solid var(--line-soft)}
.tier:first-child{border-top:0}
.tier .tn{font-family:var(--mono);font-weight:600}
.tier .ts{color:var(--faint);font-size:11.5px}
.tier.live{background:rgba(255,122,26,.1)} .tier.live .tn{color:var(--hivis)}
.tier.ordered .ts{color:var(--warn)} .tier.locked{opacity:.5}
.tiers-empty{margin:0;padding:8px 10px;font-size:12px;color:var(--faint)}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.pricebox{display:flex;flex-direction:column;gap:6px}
.pricebox label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.pricebox label b{color:var(--text);font-family:var(--mono)}
input[type=range]{width:100%;accent-color:var(--hivis);margin:0}
.meter{display:grid;grid-template-columns:104px 1fr 30px;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--navy-950);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--ok);transition:width .3s}
.meter output{font-family:var(--mono);text-align:right;color:var(--text)}
#spark{display:block;width:100%;height:46px}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
.row:has(> .stepper){flex-wrap:nowrap} .row > div:first-child{min-width:0}
.rowt{font-weight:600;font-size:13px}
.rows{font-size:11.5px;color:var(--faint)}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px;overflow:hidden;flex:none}
.stepper button{width:30px;height:28px;border:0;background:var(--navy-600);cursor:pointer;font-size:16px;font-weight:700}
.stepper button:hover:not(:disabled){background:#30496d}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:34px;text-align:center;font-family:var(--mono);font-weight:600}
.btns{display:flex;gap:6px;flex:none}
.pnl{font-size:12.5px}
.pnl td{padding:3px 0}
.pnl td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pnl tr.net td{border-top:1px solid var(--line);padding-top:6px;font-weight:700}
.pnl .in td:last-child{color:var(--ok)}
.offer{background:rgba(69,208,140,.1);border:1px solid rgba(69,208,140,.4);border-radius:5px;padding:9px 10px;display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.offer .btn{align-self:flex-start}
.news{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.news li{display:grid;grid-template-columns:48px 1fr;gap:8px;font-size:12.5px;line-height:1.4}
.news time{font:500 11px/1.6 var(--mono);color:var(--faint)}
.news li span{border-left:2px solid var(--line);padding-left:8px}
.news li.good span{border-color:var(--ok)} .news li.bad span{border-color:var(--bad)} .news li.rival span{border-color:var(--rival)} .news li.event span{border-color:var(--warn)} .news li.press span{border-color:var(--hivis);font-style:italic}
.news li.ledger span{color:var(--muted)}
.menu{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.newsmore{align-self:flex-start}
.linkbtn.osm{align-self:flex-start;font-size:12.5px}
.companies h3,.newco label{display:block;margin:0 0 8px;font:700 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.companies{margin:0 0 16px}
.savelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.savelist li{display:flex;align-items:center;gap:8px;background:var(--navy-700);border:1px solid var(--line-soft);border-radius:6px;padding:8px 10px}
.savelist li > div{flex:1;min-width:0;display:flex;flex-direction:column}
.savelist b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.savelist span{font-size:11.5px;color:var(--faint)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.newco{margin:0 0 16px}
.diffrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.diffrow .hint{font-size:12px;color:var(--muted);flex:1 1 200px}
.weekbox{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:10px 12px;border:1px solid rgba(255,209,102,.35);border-radius:6px;background:rgba(255,209,102,.06)}
.weekbox > div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.weekbox .eyebrow{margin:0;color:#ffd166}
.weekbox b{font-size:14px}
.weekbox span{font-size:12px;color:var(--muted);line-height:1.4}
.weekbox .wbtns{display:flex;flex-direction:column;gap:6px}
.sheet.boards h1{font-size:clamp(26px,8vw,44px)}
.boardtabs{margin:12px 0;flex-wrap:wrap}
.boardbody{display:flex;flex-direction:column;gap:8px;min-height:120px}
.boardbody h4{margin:8px 0 0;font:700 13px var(--body);color:var(--text)}
.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.board li{display:flex;align-items:center;gap:10px;background:var(--navy-700);border:1px solid var(--line-soft);border-radius:5px;padding:7px 10px}
.board li.me{border-color:var(--hivis)}
.board .rk{font:700 13px var(--mono);color:var(--hivis);width:22px;text-align:right}
.board li > div{flex:1;min-width:0;display:flex;flex-direction:column}
.board li b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li span{font-size:11.5px;color:var(--muted)}
.board .sc{font:700 14px var(--mono);color:var(--text)}
.dealrows{display:flex;flex-direction:column;gap:12px}
.drow{display:flex;flex-direction:column;gap:5px}
.drow small{font-size:12px;color:var(--muted);line-height:1.4}
.drow .btn{align-self:flex-start}
.dealseg{flex-wrap:wrap}
.dealseg button{flex:1 1 auto}
.scens{margin:0 0 16px;border:1px solid var(--line-soft);border-radius:6px;background:var(--navy-800,rgba(255,255,255,.02))}
.scens > summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:3px;padding:10px 12px}
.scens > summary::-webkit-details-marker{display:none}
.scens > summary b{font:700 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.scens > summary b::after{content:' ▸';color:var(--faint)}
.scens[open] > summary b::after{content:' ▾'}
.scens > summary span{font-size:12px;color:var(--faint)}
.scenlist{list-style:none;margin:0;padding:0 10px 10px;display:flex;flex-direction:column;gap:6px}
.scenlist li{display:flex;align-items:center;gap:10px;background:var(--navy-700);border:1px solid var(--line-soft);border-radius:6px;padding:9px 10px}
.scenlist li > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.scenlist b{font-size:14px}
.scenlist span{font-size:12px;color:var(--muted);line-height:1.4}
.scenlist .sgoal{color:#ffd98a;font-weight:600}
.scenlist .stars,.scencard .stars{color:#ffd166;letter-spacing:.1em;font-size:13px}
.scencard .sgoal{margin:0 0 8px;font-weight:600;color:#ffd98a;font-size:13.5px}
.scencard .hint{margin:8px 0 0}
.newrow{display:flex;gap:8px}
.newrow input{flex:1;min-width:0;background:var(--navy-950);border:1px solid var(--line);border-radius:5px;padding:8px 11px;font-size:14px}
.newrow input::placeholder{color:var(--faint)}
.fine{margin:12px 0 0;font-size:11.5px;color:var(--faint);line-height:1.45}
@media (max-width:1100px){ .stage{grid-template-columns:minmax(0,1fr) 320px} .stats{gap:6px 16px} }
@media (prefers-reduced-motion:reduce){ .toast{animation:none} .bar i{transition:none} .spin{animation-duration:3s} }

.account{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(29,46,77,.6)}
.account h3{margin:0 0 6px;font:700 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.account .hint{margin:0 0 10px}
.acctform{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acctform input{min-width:0;background:var(--navy-950);border:1px solid var(--line);border-radius:5px;padding:8px 11px;font-size:14px}
.acctform input::placeholder{color:var(--faint)}
.accterr{margin:8px 0 0;font-size:12.5px;color:var(--bad)}
.acctline{margin:0 0 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13.5px}

.paused{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:6;background:rgba(12,20,36,.95);border:1px solid var(--warn);color:var(--warn);border-radius:999px;padding:7px 16px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.paused:hover{background:var(--navy-700)}

/* network card */
.card header .btn.small{margin-left:auto}
.poplist,.linklist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.poplist{max-height:340px;overflow:auto}
.poplist li{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:rgba(12,20,36,.35)}
.poplist .ph{display:flex;align-items:center;gap:8px}
.poplist .ph b{font-size:13.5px}
.poplist .ph .linkbtn{margin-left:auto}
.poplist .st{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;border:1px solid currentColor}
.poplist .st.ok{color:var(--ok)} .poplist .st.warn{color:var(--warn)} .poplist .st.bad{color:var(--bad)}
.poplist .pr{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:5px;flex-wrap:wrap}
.poplist .pr b{color:var(--text,#eaf0f8);font-family:var(--mono);font-weight:600}
.poplist .ports{flex:1;min-width:40px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.poplist .ports i{display:block;height:100%;background:var(--ok)}
.poplist .ports.warn i{background:var(--warn)} .poplist .ports.bad i{background:var(--bad)}
.linklist:empty{display:none}
.linklist li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);border-left:3px solid var(--hivis);padding:3px 0 3px 8px}
.linklist li.pending{border-left-color:var(--faint)}
.linklist li span{flex:1}
.linklist li b{color:var(--text,#eaf0f8)}
.linkbox{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:7;width:min(440px,calc(100% - 32px));background:rgba(12,20,36,.97);border:1px solid var(--line);border-left:4px solid var(--hivis);border-radius:6px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px}
.linkbox > b{font-size:14px}
.linkbox .lbwhy{margin:0;font-size:12px;color:var(--muted)}
.linkbox .lbopt{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:8px}
.linkbox .lbopt div{flex:1;display:flex;flex-direction:column;gap:2px}
.linkbox .lbopt b{font-size:13px}
.linkbox .lbopt span{font-size:12px;color:var(--muted)}
.linkbox .linkbtn{align-self:flex-end}

/* build mode */
.buildmode{display:flex;align-items:center;gap:6px;margin-top:10px}
.buildmode .label{margin-right:4px}
.buildmode .seg{flex:1;background:var(--navy-600);border:1px solid var(--line);border-radius:5px;padding:6px 8px;cursor:pointer;font-weight:600;font-size:12px}
.buildmode .seg[aria-pressed="true"]{background:#1b9aaa;border-color:#1b9aaa;color:#fff}
.buildmode #buildDig[aria-pressed="true"]{background:var(--hivis);border-color:var(--hivis);color:var(--ink)}
#buildHint{margin:6px 0 0}
/* packages */
.pkgs{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.pkghead,.pkg{display:grid;grid-template-columns:minmax(0,1fr) auto 42px;align-items:center;gap:8px;font-size:12.5px}
.pkghead{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700}
.pkghead span:last-child,.pkg .ps{text-align:right}
.pkg label{display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:600}
.pkg label input{accent-color:var(--hivis);width:15px;height:15px}
.pkg.locked{color:var(--faint)}
.pkg .pp{display:flex;align-items:center;gap:4px}
.pkg .pp button{width:22px;height:22px;border:1px solid var(--line);border-radius:4px;background:var(--navy-600);cursor:pointer;font-weight:700;line-height:1}
.pkg .pp b{font-family:var(--mono);min-width:34px;text-align:center}
.pkg .pp small{color:var(--faint);font-size:10.5px;white-space:nowrap}
.pkg .pp small.hi{color:var(--warn)} .pkg .pp small.lo{color:var(--ok)}
.pkg .ps{font-family:var(--mono);color:var(--muted)}
#pkgNote{margin:4px 0 2px}
/* map overlays */
.overlay{position:absolute;right:12px;top:12px;z-index:5;background:rgba(12,20,36,.95);border:1px solid var(--line);border-radius:6px;padding:7px 10px;box-shadow:0 6px 20px rgba(0,0,0,.4);font-size:12px;max-width:240px}
.overlay label{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600}
.overlay select{max-width:170px;background:var(--navy-600);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:3px 6px;font:inherit;font-weight:600}
.overlay .legend{margin-top:7px;display:flex;flex-direction:column;gap:3px;color:var(--muted)}
.overlay .legend div{display:flex;align-items:center;gap:7px}
.overlay .legend i{display:inline-block;width:18px;height:5px;border-radius:3px}
.overlay .legend p{margin:3px 0 0;font-size:11px;color:var(--faint)}

/* performance mode button and toasts with a button */
.btn.toggle[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--ink)}
.toast.action{pointer-events:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* ======================= phones and tablets ======================= */
.short{display:none}
.mapbottom{display:contents}
body{touch-action:manipulation}
@media (pointer:coarse){
  .zoomctl{display:none}                        /* pinch to zoom instead */
  .btn.small{padding:8px 12px}
  .tool{padding:11px 6px}
  .pkg .pp button{width:30px;height:30px}
  .buildmode .seg{padding:9px 8px}
  .paused .long{display:none}
  .paused .short{display:inline}
}
/* a narrow desktop or a tablet on its side: keep messages clear of the overlay box in the top right */
@media (min-width:901px) and (max-width:1400px){
  .toasts{left:16px;transform:none;width:min(560px,calc(100% - 290px))}
}
/* tablets in portrait and phones: the map takes the screen and the panels live in a drawer at the bottom */
@media (max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .panel.drawer{position:fixed;left:0;right:0;bottom:0;z-index:15;height:auto;padding:0 0 env(safe-area-inset-bottom);border-left:0;border-top:1px solid var(--line);
    box-shadow:0 -10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--navy-800)}
  .panel.drawer .paneltabs{gap:2px;padding:6px;border-bottom:0;background:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .panel.drawer .paneltabs::-webkit-scrollbar{display:none}
  .panel.drawer .paneltabs button{flex:1 0 auto;min-width:58px;padding:9px 8px;border:0;border-radius:6px;margin:0}
  .panel.drawer .paneltabs button[aria-selected="true"]{background:var(--navy-600);color:var(--text)}
  .panel.drawer .paneltabs button.alert{color:var(--bad)}
  .panel.drawer .pages{display:none;padding:0 8px 8px}
  .panel.drawer.open{height:min(62vh,calc(100% - 96px))}
  .panel.drawer.open .pages{display:block;-webkit-overflow-scrolling:touch}
  #app:has(#intro:not([hidden])) .panel.drawer, #app:has(#endCard:not([hidden])) .panel.drawer{display:none}
  .mapbottom{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:absolute;left:8px;right:8px;bottom:calc(var(--drawer-h, 50px) + 8px);z-index:6;pointer-events:none}
  .mapbottom > *{position:static!important;transform:none!important;width:auto!important;max-width:none!important;pointer-events:auto}
  .mapbottom .toasts{pointer-events:none}
  #app:has(.panel.drawer.open) .mapbottom .toast:nth-child(n+2){display:none}   /* one message while the drawer is open */
  #app:has(.mapbottom > .linkbox:not([hidden])) .mapbottom .toasts{display:none}   /* a question on screen: messages wait */
  .mapbottom .paused{align-self:center}
  .tip{left:8px!important;right:8px;top:8px!important;max-width:none;z-index:8}   /* above the overlay box */
  .attrib{left:auto;right:6px;bottom:calc(var(--drawer-h, 50px) + 2px);font-size:9.5px;padding:1px 5px}
  .overlay{top:8px;right:8px;padding:5px 7px;max-width:190px}
  .overlay .legend p{display:none}
  .busy{bottom:calc(var(--drawer-h, 50px) + 16px)}
}
@media (max-width:600px){
  .hud{padding:9px 8px 6px;gap:6px 8px}
  .hud::before{height:4px}
  .brand{display:none}
  .clock{min-width:0}
  .clock .date{font-size:14px}
  .clock .time b{font-size:13px}
  .clock .phase:not(.peak){display:none}          /* only "Evening peak" is worth the room */
  .clock .phase.peak{font-size:8.5px;padding:1px 4px 0;letter-spacing:.06em}
  .speed button{padding:8px 8px}
  .hud .btn.small{padding:7px 9px}
  .panel.drawer .paneltabs button{min-width:0;flex:1 1 auto;padding:9px 4px;font-size:11.5px}
  .mapbottom .toasts .toast:nth-child(n+3){display:none}   /* two messages at a time on a phone */
  .overlay label span{font-size:11px}
  .overlay select{max-width:112px}
  .long{display:none}
  .short{display:inline}
  .stats{width:100%;margin:0;flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .stat .sub{display:none}
  .val{font-size:15px}
  .label{font-size:9.5px}
  .toast{font-size:12.5px;padding:7px 10px}
  .surveychip{padding:6px 10px}
  .sheet{padding:22px 18px 18px}
}
/* no text selection or pop-up menus when a finger is held on the map; clear of notches when added to the home screen */
#map, .hud, .paneltabs{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
button{-webkit-tap-highlight-color:transparent}
.hud{padding-top:max(16px, calc(8px + env(safe-area-inset-top)));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
@media (max-width:600px){
  .hud{padding-top:max(9px, calc(4px + env(safe-area-inset-top)));padding-left:max(8px, env(safe-area-inset-left));padding-right:max(8px, env(safe-area-inset-right))}
}

/* wayleaves, auto-order and Openreach */
.wayleaves{display:flex;flex-direction:column;gap:6px;border:1px solid rgba(255,197,61,.35);background:rgba(255,197,61,.07);border-radius:5px;padding:8px 10px}
.wayleaves .btn{align-self:flex-start}
.autobh{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;cursor:pointer;margin-top:2px}
.autobh input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--hivis);flex:none}
.autobh small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;margin-top:2px}
.poplist .orf{color:#7fb3ff}

/* area planning, backbone, every-PoP orders */
.linkbox .lbbtns{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.linkbox .lbbtns .linkbtn{align-self:center}
.bulk{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line-soft);padding-top:10px}
.bulkrow{display:flex;gap:8px;align-items:center}
.bulkrow select{flex:1;min-width:0;background:var(--navy-600);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:6px 8px;font:inherit;font-weight:600}
.bbsum{color:#ffd98a}
.poplist .bb{color:#ffd98a}

/* line tests: addresses, ping, traceroute */
.testbox{width:min(560px,calc(100% - 32px));max-height:calc(100% - 120px);overflow-y:auto}
.testbox .tk{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12.5px}
.testbox .tk dt{color:var(--muted)} .testbox .tk dd{margin:0;font-family:var(--mono);font-size:12px;word-break:break-all}
.testbox .tk dd.plain{font-family:var(--body);font-size:12.5px}
.testbox table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
.testbox th{text-align:left;color:var(--faint);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 4px}
.testbox td{padding:3px 4px;border-top:1px solid var(--line-soft);vertical-align:top}
.testbox td.n{color:var(--faint);width:18px} .testbox td.ip{font-family:var(--mono);white-space:nowrap} .testbox td.ms{font-family:var(--mono);text-align:right;white-space:nowrap}
.testbox .ok{color:var(--ok)} .testbox .warn{color:var(--warn)} .testbox .bad{color:var(--bad)}

/* kinds of customer */
.kinds{display:flex;flex-direction:column;gap:0}
.kind{display:grid;grid-template-columns:minmax(0,1fr) 44px 84px;gap:2px 8px;align-items:baseline;font-size:12.5px;padding:6px 0;border-top:1px solid var(--line)}
.kind:first-child{border-top:0;padding-top:0}
.kind b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kind .sh{font-family:var(--mono);color:var(--muted);text-align:right}
.kind .md{font-weight:700} .kind .md.ok{color:var(--ok)} .kind .md.warn{color:var(--warn)} .kind .md.bad{color:var(--bad)}
.kind .md{text-align:right}
.kind .why{grid-column:1 / -1;color:var(--faint);font-size:11.5px}

/* goals and achievements */
.goals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.goals li{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.goals li b{font-size:13px;font-weight:700}
.goals li.m{color:var(--muted)}
.gbar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.gbar i{display:block;height:100%;background:linear-gradient(90deg,var(--hivis),#ffd166);border-radius:4px}
.gmeta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11.5px}
.gmeta span:first-child{font-family:var(--mono);color:var(--text);white-space:nowrap}
.gmeta span:last-child{text-align:right}
.achs summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted)}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin-top:8px}
.ach{border:1px solid var(--line-soft);border-radius:5px;padding:6px 8px;display:flex;flex-direction:column;gap:2px;opacity:.55}
.ach b{font-size:12px} .ach span{font-size:11px;color:var(--faint)}
.ach.got{opacity:1;border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.08)} .ach.got b{color:#ffd166}
.paneltabs button.news::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffd166;margin-left:4px;vertical-align:2px}
.paneltabs button.alert.news::after{background:var(--bad)}
/* the dots sit in the tab's corner, so they never push the name onto a second line */
.paneltabs button{position:relative}
.paneltabs button.alert::after,.paneltabs button.news::after{position:absolute;top:4px;right:0;margin:0}

/* wholesale partners, dedicated lines and government contracts */
.deals{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.deal{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.deal:first-child{border-top:0}
.deal .dt{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.deal .dt b{font-weight:700;font-size:13px}
.deal .dt span{color:var(--muted);font-size:12px;line-height:1.4}
.deal.d-later .dt b,.deal.d-wait .dt b,.deal.d-past .dt b{color:var(--muted);font-weight:600}
.deal .dbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.deal .gbar{flex:1 0 100%}
.deal .bids{flex:1 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.deal .bids .btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;line-height:1.15}
.deal .bids .btn small{font-size:10.5px;font-weight:600;opacity:.8}
.deals li.m{color:var(--muted);font-size:12px;padding:6px 0}

/* the stats page */
.statsheet{position:fixed;inset:0;z-index:60;background:rgba(6,11,22,.74);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 16px}
.statsheet[hidden]{display:none}
.statsinner{position:relative;width:min(1080px,100%);background:var(--navy-900);border:1px solid var(--line);border-radius:8px;padding:24px 24px 16px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.statsinner::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:8px 8px 0 0;background:linear-gradient(var(--hivis) 0 2px,var(--silver) 2px 4px,var(--hivis) 4px 6px)}
.statshead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.statshead h2{margin:0;font:800 34px/.95 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--hivis)}
.statsx{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:4px}
.statsx:hover{color:var(--text);background:var(--navy-700)}
.statsctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}
.statsctl .grow{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.seg button{background:var(--navy-700);border:0;border-right:1px solid var(--line);padding:7px 11px;color:var(--muted);font:600 12.5px var(--body);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--navy-600);color:var(--text)}
.btn[aria-pressed="true"]{background:var(--navy-600);border-color:var(--silver)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tile{background:var(--navy-800);border:1px solid var(--line-soft);border-radius:6px;padding:10px 12px}
.tile .tl{font-size:12px;color:var(--muted);font-weight:600}
.tile .tv{font:700 26px/1.15 var(--body);margin-top:3px}
.tile .td{font-size:12px;margin-top:2px;color:var(--muted)}
.tile .td b{font-weight:700} .tile .td .up{color:var(--ok)} .tile .td .down{color:var(--bad)}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.chart{background:var(--navy-800);border:1px solid var(--line-soft);border-radius:6px;padding:10px 12px 8px;margin:0;min-width:0}
.chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chart .ct{font-weight:700;font-size:13.5px}
.chart .cv{font-size:12.5px;color:var(--muted);white-space:nowrap}
.chart .legend{display:flex;flex-wrap:wrap;gap:3px 14px;margin:5px 0 2px;font-size:11.5px;color:var(--muted)}
.chart .legend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.chart canvas{display:block;width:100%;height:170px;cursor:crosshair;touch-action:pan-y}
.charttip{position:fixed;z-index:62;pointer-events:none;background:var(--navy-950);border:1px solid var(--line);border-radius:5px;padding:7px 9px;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);min-width:160px}
.charttip b{display:block;margin-bottom:4px;font-size:12px}
.charttip div{display:flex;justify-content:space-between;gap:14px;color:var(--muted)}
.charttip div span:last-child{color:var(--text);font-weight:600}
.charttip i{display:inline-block;width:10px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.stable{max-height:440px;overflow:auto;border:1px solid var(--line-soft);border-radius:6px}
.stable table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.stable th,.stable td{padding:5px 9px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.stable th{position:sticky;top:0;background:var(--navy-800);color:var(--muted);font-weight:700}
.stable td:first-child,.stable th:first-child{text-align:left}
#statsNote{margin:12px 0 0;color:var(--faint);font-size:12px}
@media (max-width:760px){
  .statsheet{padding:0}
  .statsinner{border-radius:0;min-height:100%;padding:18px 14px 14px;padding-top:max(18px,env(safe-area-inset-top))}
  .statshead h2{font-size:26px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile .tv{font-size:21px}
  .charts{grid-template-columns:1fr}
}

/* the time-lapse controls */
.replaybar{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;width:min(760px,calc(100% - 32px));background:rgba(12,20,36,.96);border:1px solid var(--line);border-left:4px solid var(--hivis);border-radius:6px;padding:8px 12px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.replaybar[hidden]{display:none}
.replaybar input[type=range]{flex:1 1 180px;accent-color:var(--hivis);min-width:120px}
.replaybar select{background:var(--navy-700);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:6px 8px;font:600 12.5px var(--body)}
.replaybar #rpPlay{min-width:40px}
.rpnote{flex:1 0 100%;font-size:12px;color:var(--muted)}
.rpnote:empty{display:none}
.rpnote.rec{color:var(--bad);font-weight:700}
/* while the time-lapse plays, the map carries its own date, totals and credit: messages and map buttons step aside */
body.replaying .toasts, body.replaying .zoomctl, body.replaying .attrib, body.replaying #overlayBox, body.replaying .surveychip{display:none!important}

/* the inbox: offers and requests wait here instead of popping up */
.inboxbtn{position:relative;display:inline-flex;align-items:center;gap:6px}
.inboxbtn svg{width:16px;height:16px;flex:none}
.inboxbtn .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hivis);color:var(--ink);font:800 11px/18px var(--body);text-align:center}
.inboxbtn .badge[hidden]{display:none}
.inbox{position:fixed;z-index:55;top:88px;right:16px;width:min(430px,calc(100vw - 24px));max-height:min(72vh,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--navy-900);border:1px solid var(--line);border-top:3px solid var(--hivis);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.inbox[hidden]{display:none}
.inbox > header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 8px}
.inbox > header b{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--hivis)}
.inbox > header span{margin-left:10px;font-size:12px;color:var(--muted)}
.inboxlist{overflow:auto;min-height:0;padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}
.ibx{flex:none}
.ibx{background:var(--navy-800);border:1px solid var(--line-soft);border-left:3px solid var(--ok);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ibx.event{border-left-color:var(--warn)}
.ibx .it{font-size:13.5px;font-weight:700}
.ibx p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.ibx .dbtns{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.ibx .bids{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ibx .bids .btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;line-height:1.15}
.ibx .bids .btn small{font-size:10.5px;font-weight:600;opacity:.8}
.ibrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ibrows li{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--line-soft)}
.ibrows li:first-child{border-top:0;padding-top:2px}
.ibrows .dt{display:flex;flex-direction:column;gap:2px;font-size:12px}
.ibrows .dt b{font-size:12.5px}
.ibrows .dt span{color:var(--muted)} .ibrows .dt span.c-ok{color:var(--ok)} .ibrows .dt span.c-warn{color:var(--warn)}
.ibempty{margin:6px 0 4px;color:var(--muted);font-size:13px;line-height:1.5}
/* the month's round-up */
.toast.roundup{border-left-color:var(--silver);display:flex;flex-direction:column;gap:5px;pointer-events:auto}
.toast.roundup .rh{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.toast.roundup .rh b{font-weight:800}
.toast.roundup .rh span{color:var(--muted);font-size:12.5px}
.toast.roundup .rh span.c-ok{color:var(--ok)}
.toast.roundup ul{margin:0;padding:0 0 0 16px;font-size:12.5px;line-height:1.45}
.toast.roundup .m{color:var(--muted);font-size:12px}
.toast.roundup .btn{align-self:flex-start}
.toast.roundup .rtips{display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.4;padding:5px 8px;border-radius:5px;background:rgba(255,209,102,.08)}
.toast.roundup .rtips b{color:#ffd166}
.toast.roundup .rbtns{display:flex;flex-wrap:wrap;gap:6px}
.advlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.advlist li{border-left:3px solid var(--line);background:var(--navy-700);border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.advlist li b{font-size:13px;font-weight:700}
.advlist li p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.advlist li.bad{border-left-color:var(--bad)} .advlist li.warn{border-left-color:var(--warn)} .advlist li.info{border-left-color:#7fb3ff} .advlist li.ok{border-left-color:var(--ok)}
.advlist li .dbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.advicecard.alert{box-shadow:inset 0 0 0 1px rgba(255,90,90,.35)}
.msgseg{display:flex;margin:4px 0 8px}
.msgseg button{flex:1}
@media (max-width:900px){
  .inbox{top:auto;bottom:calc(var(--drawer-h, 50px) + 8px);right:8px;left:8px;width:auto;max-height:calc(100vh - var(--drawer-h, 50px) - 150px);max-height:calc(100dvh - var(--drawer-h, 50px) - 150px)}
}
/* the top bar keeps to one line on a laptop: the map buttons shorten their names */
@media (max-width:1640px){
  .hud .btn .long{display:none}
  .hud .btn .short{display:inline}
}
@media (max-width:900px){ .inboxbtn .lbl{display:none} }
.iconbtn{display:inline-flex;align-items:center;gap:6px}
.iconbtn svg{width:16px;height:16px;flex:none}
@media (max-width:600px){
  .hud{gap:6px 6px}
  .speed button{padding:8px 7px}
  .hud .btn.small{padding:7px 8px}
  .inboxbtn{gap:4px}
  #statsBtn .lbl{display:none}
  #perfBtn{display:none}           /* on a phone it's in the Company tab */
}
@media (max-width:380px){ .speed button{padding:8px 5px} .hud{gap:6px 5px} .hud .btn.small{padding:7px 7px} }
/* backup lines and the outage record */
.poplist .pr.bkok{color:var(--ok);font-size:12px}
.poplist .pr.bkno{color:var(--warn);font-size:12px}
.poplist .pr.kit{justify-content:space-between}
.poplist .pr.kit .btn{margin-left:auto}
.poplist .pr.closeask{flex-direction:column;align-items:stretch;gap:6px;background:rgba(255,197,61,.07);border:1px solid rgba(255,197,61,.3);border-radius:5px;padding:8px;color:var(--text,#eaf0f8);line-height:1.45}
.poplist .pr.closeask .dbtns{display:flex;gap:6px;flex-wrap:wrap}
.mktrows{display:flex;flex-direction:column;gap:8px}
.mkt{display:flex;align-items:center;gap:10px;background:var(--navy-800);border:1px solid var(--line-soft);border-radius:6px;padding:8px 10px}
.mkt > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mkt b{font-size:13px}
.mkt span{font-size:12px;color:var(--muted);line-height:1.4}
.mkt span.c-ok{color:var(--ok)} .mkt span.c-warn{color:var(--warn)}
.mkt .btn{flex:none;min-width:74px}
.mktlist{list-style:none;margin:0;padding:0;font-size:12px;color:var(--ok);display:flex;flex-direction:column;gap:2px}
.mktlist:empty{display:none}
#cacheBox:empty{display:none}
.outlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.outlist li{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:8px 0 8px 9px;border-top:1px solid var(--line);border-left:3px solid var(--ok);font-size:12.5px}
.outlist li.bad{border-left-color:var(--bad)}
.outlist li:first-child{border-top:0}
.outlist li .om{color:var(--faint);font-size:11px;font-weight:600;padding-top:1px;white-space:nowrap}
.outlist li.now .om{color:var(--bad);font-weight:800}
.outlist li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.outlist li b{font-weight:700}
.outlist li span:not(.om){color:var(--muted);font-size:12px}
.outlist li.m{display:block;color:var(--muted);border-left:0;padding-left:0}
.diffseg button[aria-pressed="true"], .dealseg button[aria-pressed="true"], .boardtabs button[aria-pressed="true"]{background:var(--hivis);color:#1a1206}
.seg button:disabled{opacity:.45;cursor:not-allowed}

/* the tutorial: a coach card on the map, and a glow on whatever it points at */
.tutcard{position:absolute;right:14px;bottom:112px;z-index:7;width:min(360px,calc(100% - 28px));display:flex;flex-direction:column;gap:6px;background:rgba(12,20,36,.97);border:1px solid var(--line);border-top:3px solid var(--hivis);border-radius:6px;padding:11px 14px 12px;box-shadow:0 12px 32px rgba(0,0,0,.5);animation:tin .25s ease-out}
.tuthead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tutcard .eyebrow{margin:0;color:var(--hivis)}
.tuttitle{font:700 21px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase}
.tuttext{margin:0;font-size:13px;line-height:1.5}
.tutprog{margin:0;font:600 12px/1.4 var(--mono);color:var(--warn)}
.tutbtns{display:flex;align-items:center;gap:14px;margin-top:4px}
.tutbtns .btn:disabled{opacity:.45;cursor:default}
.tutmin{background:none;border:0;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:0 4px}
.tutmin:hover{color:var(--text)}
.tutchip{position:absolute;right:14px;bottom:112px;z-index:7;display:flex;align-items:center;gap:8px;max-width:calc(100% - 28px);background:rgba(12,20,36,.97);border:1px solid var(--hivis);border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:700;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tutchip .eyebrow{margin:0;color:var(--hivis)}
.tut-hl{outline:2px solid var(--hivis)!important;outline-offset:-1px;animation:tutglow 1.4s ease-in-out infinite}
@keyframes tutglow{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.6)}50%{box-shadow:0 0 0 6px rgba(255,122,26,0)}}
.newco .tutpick,.tutpick{display:flex;align-items:center;gap:8px;margin:10px 0 0;font:400 13px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
.tutpick b{color:var(--text)}
.tutpick input{accent-color:var(--hivis);width:16px;height:16px}
@media (pointer:coarse){ .tutcard, .tutchip{bottom:44px} }
@media (max-width:900px){
  .tutcard{padding:9px 12px 10px;gap:4px}
  .tuttitle{font-size:18px}
  .tuttext{font-size:12.5px;line-height:1.42}
  .mapbottom .tutchip{align-self:flex-end}
}

/* v0.23: the top bar keeps its shape while you play. Whether the money and customer figures share the top line
   or have a line of their own depends only on the window's width, never on what the clock or the figures say.
   (At some widths they used to hop between one line and two every game evening, shaking the map up and down.) */
.hud{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;row-gap:8px}
.hudleft{display:flex;flex-wrap:nowrap;align-items:center;gap:10px 24px;min-width:0;overflow:hidden;padding:6px;margin:-6px}   /* (room for focus rings) */
.hudleft > *{flex:none}
.hudleft > .brand{flex:0 1 auto;min-width:0;overflow:hidden}
.logo{white-space:nowrap}
.inboxbtn .badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;line-height:17px;font-size:10.5px;padding:0 4px}   /* on the button's corner, so the buttons don't shuffle when mail arrives */
.brand .town{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clock{width:160px;min-width:0}
.clock .time{white-space:nowrap;overflow:hidden}
.stats{flex-wrap:nowrap;margin-left:0;justify-content:flex-end;min-width:0}
.stat .val,.stat .sub{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1359px){ .hud{grid-template-columns:minmax(0,1fr)} }
@media (max-width:1100px){ .hudleft{gap:10px 16px} }
@media (max-width:760px){ .hudleft > .brand{display:none} #statsBtn .lbl{display:none} #perfBtn{display:none} }
@media (max-width:600px){
  .hud{row-gap:6px}
  .hudleft{gap:6px 8px}
  .clock{width:80px}
  .clock .phase.peak{font-size:0}
  .clock .phase.peak::before{content:"Peak";font-size:8.5px}
  .inboxbtn .badge{min-width:16px;height:16px;line-height:16px;font-size:10px}
  .stats{justify-content:space-between;width:100%}
}
@media (max-width:380px){ .hudleft{gap:6px 5px} }

/* the start screen: only the map behind it until a company is open */
body.onmenu #app{grid-template-rows:minmax(0,1fr)}
body.onmenu .stage{grid-template-columns:minmax(0,1fr)}
body.onmenu .hud, body.onmenu .panel, body.onmenu #overlayBox, body.onmenu .zoomctl, body.onmenu #pausedChip, body.onmenu #surveyChip,
body.onmenu #tutCard, body.onmenu #tutChip, body.onmenu #inboxBox, body.onmenu #tip, body.onmenu .linkbox, body.onmenu #replayBar{display:none!important}
body.onmenu .mapbottom{bottom:8px}
.nameerr{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--bad)}
#companyName[aria-invalid="true"]{border-color:var(--bad)}