/* TERMINAL HEADS — shared shell.
   Every page is exactly one viewport tall. The page never scrolls;
   only designated panes (.scrollpane) do. */
:root{
  --g:#3BFF6E; --dim:#1c8c3c; --fade:#0e4a20; --hot:#B4FFCB;
  --bg:#020402; --panel:#050a06; --panel2:#071009;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --nav:46px; --status:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--g); font:14px/1.55 var(--mono);
  text-shadow:0 0 6px rgba(59,255,110,.32);
  display:flex; flex-direction:column; overflow:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;background:transparent;border:0;outline:none}

/* ---------- CRT ---------- */
.scan,.vig,.flick{position:fixed;inset:0;pointer-events:none}
.scan{z-index:9000;background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 4px)}
.vig{z-index:9001;background:radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.88) 100%)}
.flick{z-index:9002;background:rgba(59,255,110,.02);animation:fl 6s steps(1) infinite}
@keyframes fl{0%,96%{opacity:0}97%{opacity:1}98%{opacity:0}99%{opacity:.6}100%{opacity:0}}

/* ---------- boot (first visit only) ---------- */
#boot{position:fixed;inset:0;z-index:9500;background:var(--bg);padding:6vh 6vw;
  font-size:13px;white-space:pre-wrap;transition:opacity .45s}
#boot.gone{opacity:0;pointer-events:none}
#boot b{color:var(--hot);font-weight:400}

/* ---------- nav ---------- */
nav{height:var(--nav);flex:0 0 auto;border-bottom:1px solid var(--fade);
  display:flex;align-items:stretch;padding:0 16px;gap:2px;background:var(--panel)}
nav .brand{display:flex;align-items:center;font-weight:700;letter-spacing:.16em;
  padding-right:22px;white-space:nowrap}
nav .brand span{color:var(--dim)}
nav a.tab{display:flex;align-items:center;padding:0 15px;color:var(--dim);
  border-bottom:2px solid transparent;letter-spacing:.06em;white-space:nowrap;transition:.12s}
nav a.tab:hover{color:var(--g);background:rgba(59,255,110,.05)}
nav a.tab[aria-current]{color:var(--g);border-bottom-color:var(--g);background:rgba(59,255,110,.07)}
nav .grow{flex:1}
nav .x{display:flex;align-items:center;color:var(--dim);padding-left:14px}
nav .x:hover{color:var(--g)}

/* ---------- main ---------- */
main{flex:1 1 auto;min-height:0;padding:20px;display:grid;gap:18px}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.wide{grid-template-columns:minmax(0,1fr)}
.pane{border:1px solid var(--fade);background:var(--panel);min-height:0;
  display:flex;flex-direction:column;overflow:hidden}
.pane>h2{flex:0 0 auto;font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--dim);
  padding:11px 14px;border-bottom:1px solid var(--fade);background:var(--panel2)}
.pane>.body{flex:1 1 auto;min-height:0;padding:16px;overflow:hidden}
.scrollpane{overflow-y:auto!important}
.scrollpane::-webkit-scrollbar{width:7px}
.scrollpane::-webkit-scrollbar-thumb{background:var(--fade)}

h1{font-size:clamp(22px,3.4vw,40px);line-height:1.02;letter-spacing:-.02em;font-weight:700}
.lead{color:var(--dim);letter-spacing:.06em;margin-top:6px}
.hot{color:var(--hot)}
.dim{color:var(--dim)}
p+p{margin-top:10px}

/* ---------- art ---------- */
.art{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:10px;background:#000}
.art svg{max-width:100%;max-height:100%;height:auto;display:block}
.artcap{flex:0 0 auto;display:flex;justify-content:space-between;padding:7px 14px;
  border-top:1px solid var(--fade);font-size:11px;letter-spacing:.08em;color:var(--dim)}

/* ---------- controls ---------- */
.btn{border:1px solid var(--g);padding:10px 18px;cursor:pointer;letter-spacing:.08em;
  transition:.13s;display:inline-block;text-align:center}
.btn:hover{background:var(--g);color:#000;text-shadow:none}
.btn.ghost{border-color:var(--fade);color:var(--dim)}
.btn.ghost:hover{background:var(--fade);color:var(--g)}
.btn.block{display:block;width:100%}
.qty{display:flex;gap:6px;flex-wrap:wrap}
.qty button{border:1px solid var(--fade);color:var(--dim);padding:8px 0;cursor:pointer;
  flex:1 1 0;min-width:44px}
.qty button.on{border-color:var(--g);color:var(--g);background:rgba(59,255,110,.09)}
.row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--fade)}
.row:last-child{border:0}
.row.total{font-size:17px;padding-top:11px;border:0}
.field{display:flex;gap:8px;border:1px solid var(--fade);padding:9px 12px;background:var(--panel2)}
.field input{flex:1;min-width:0}

/* ---------- meter ---------- */
.meter{height:8px;border:1px solid var(--fade);background:#000;overflow:hidden}
.meter i{display:block;height:100%;background:var(--g);box-shadow:0 0 10px var(--g)}

/* ---------- log ---------- */
.log{font-size:12px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.log .t{color:var(--fade)}

/* ---------- table ---------- */
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--fade);white-space:nowrap}
th{color:var(--dim);font-weight:400;font-size:10px;letter-spacing:.14em;
  position:sticky;top:0;background:var(--panel2)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}

/* ---------- cards ---------- */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{border:1px solid var(--fade);padding:14px;background:var(--panel2)}
.card b{display:block;letter-spacing:.08em;margin-bottom:5px}
.card p{font-size:12.5px;color:var(--dim);line-height:1.6}
.card .big{font-size:26px;font-weight:700;line-height:1.1;color:var(--g)}

.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
/* clamped so long figures like 10,000,000 don't collide with the next column */
.kpi b{display:block;font-size:clamp(16px,1.45vw,24px);font-weight:700;white-space:nowrap}
.kpi span{font-size:10px;letter-spacing:.14em;color:var(--dim)}

.tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.tile{border:1px solid var(--fade);background:#000;aspect-ratio:1;cursor:pointer;position:relative}
.tile:hover{border-color:var(--g)}
.tile svg{display:block;width:100%;height:100%}
.tile i{position:absolute;left:0;right:0;bottom:0;padding:2px 5px;font-style:normal;
  font-size:9px;color:var(--dim);background:linear-gradient(transparent,rgba(2,4,2,.92) 60%)}

/* ---------- status bar ---------- */
.status{height:var(--status);flex:0 0 auto;border-top:1px solid var(--fade);background:var(--panel);
  display:flex;align-items:center;gap:18px;padding:0 16px;font-size:11px;color:var(--dim);
  letter-spacing:.08em;overflow:hidden;white-space:nowrap}
.status .grow{flex:1}
.status b{color:var(--g);font-weight:400}

/* ---------- small screens: the shell stays fixed, the main pane scrolls ---------- */
@media(max-width:860px){
  /* Rows must size to CONTENT, otherwise the grid clamps to the viewport and
     clips instead of scrolling. align-content:start stops rows stretching. */
  main{grid-template-columns:minmax(0,1fr)!important;overflow-y:auto;gap:14px;padding:14px;
       grid-auto-rows:min-content;align-content:start;-webkit-overflow-scrolling:touch}
  /* unwrap the nested row-grids the pages declare inline */
  main>div{display:flex!important;flex-direction:column;gap:14px;min-height:auto!important}
  .pane{min-height:auto}
  .pane>.body{overflow:visible}
  .scrollpane{overflow:visible!important}
  .art{min-height:240px;max-height:56vh}
  nav{overflow-x:auto;padding:0 10px}
  nav .brand{padding-right:12px;font-size:12px}
  nav a.tab{padding:0 11px;font-size:12px}
  .status{font-size:10px;gap:12px}
  th{position:static}
}