/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE BASE STYLESHEET — every app gets this, and then its own on top.

   Like Laravel's resources/css/app.css: ONE file, served once, cached hard. Not one stylesheet per
   component — that is either many requests or a bundler, and we have neither.

   🔴 MOBILE IS THE DESIGN TARGET, NOT AN ADAPTATION OF THE DESKTOP ONE.

   The React dashboard put eight-column tables inside horizontal scrollers on a 390px phone. That is
   the wrong fix and it had already been patched twice: a `w-full` table in an overflow wrapper does
   not scroll, it SQUASHES, and giving it a `min-width` floor only trades squashed text for a
   sideways scroll nobody discovers. Either way the operator cannot read a row without work.

   So below 720px a table is not a table. Each row becomes a CARD, each cell labels itself from its
   own `data-label`, and everything reads top to bottom in one column with no horizontal scrolling
   anywhere. Above 720px it is a dense terminal table again. One markup, two layouts, no JavaScript
   and no duplicate templates.

   There is no font file. The old bundle shipped 140 KB of JetBrains Mono woff to draw numbers the
   system's own monospace draws identically — SF Mono on macOS and iOS, Consolas on Windows, DejaVu
   on Linux. `font-feature-settings: tnum` is what actually makes a column of numbers line up.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070908; --panel:#0c110f; --panel2:#0f1613; --line:#1b2620; --line2:#27342c;
  --green:#43d67f; --greenb:#6ff0a6; --amber:#f0b429; --red:#f2696b; --cyan:#37cfc8;
  --text:#cdd8d1; --muted:#61736a;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;
  --r:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);
  font-size:13px;line-height:1.5;letter-spacing:-.005em;
  font-feature-settings:'tnum' 1,'zero' 1;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60rem 40rem at 84% -12%,rgba(67,214,127,.045),transparent 60%),
    radial-gradient(48rem 34rem at 4% -8%,rgba(240,180,41,.03),transparent 55%);
  background-attachment:fixed;
}
a{color:var(--greenb)}
b,strong{color:var(--text);font-weight:600}

/* ── layout ─────────────────────────────────────────────────────────────────────────────────── */
.wrap{max-width:1400px;margin:0 auto;padding:12px}
@media(min-width:720px){.wrap{padding:20px 24px}}
.stack{display:flex;flex-direction:column;gap:12px}

/* ── type ───────────────────────────────────────────────────────────────────────────────────── */
.label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.muted{color:var(--muted)}
.dim{color:var(--line2)}
.green{color:var(--greenb)} .amber{color:var(--amber)} .red{color:var(--red)} .cyan{color:var(--cyan)}
.note{font-size:12px;color:var(--muted);line-height:1.65}
.note b{color:var(--text)}

/* ── panel ──────────────────────────────────────────────────────────────────────────────────── */
.panel{
  border:1px solid var(--line);border-radius:var(--r);background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0) 42%),var(--panel);
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 6px 20px -12px rgba(0,0,0,.5);
  overflow:hidden;
}
.panel>header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
@media(min-width:720px){.panel>header{padding:11px 18px}}
.panel>header .t{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:7px;min-width:0;
}
.panel>header .t::before{
  content:'';width:2px;height:.85em;border-radius:2px;background:var(--amber);opacity:.9;flex:none;
}
.body{padding:12px}
@media(min-width:720px){.body{padding:18px}}
.body.flush{padding:0}

/* ── stat tiles ─────────────────────────────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:560px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tile{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:10px 12px;min-width:0;
}
.tile .v{
  font-size:1.45rem;font-weight:600;line-height:1.05;margin-top:8px;
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(min-width:720px){.tile{padding:13px 16px}.tile .v{font-size:1.7rem}}
.tile .s{font-size:11px;color:var(--muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── figures (a row of labelled numbers) ────────────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:560px){.figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fig .v{font-size:1.15rem;line-height:1.1;margin-top:5px;letter-spacing:-.02em}
.fig .v.big{font-size:1.5rem;font-weight:600}
@media(min-width:720px){.fig .v.big{font-size:1.7rem}}

/* ── inline meta row ────────────────────────────────────────────────────────────────────────── */
.meta{
  display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;padding-top:11px;
  border-top:1px solid var(--line);
}
.meta>span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta b{color:var(--text);font-weight:500}

/* ── pills (the funnel) ─────────────────────────────────────────────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  display:inline-flex;align-items:baseline;gap:6px;padding:4px 8px;
  border:1px solid var(--line);border-radius:6px;white-space:nowrap;font-size:11px;
}
.pill b{font-weight:600}
.pill span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ══ TABLES ═════════════════════════════════════════════════════════════════════════════════════
   Desktop: a dense terminal table. Phone: one card per row. No horizontal scroll, ever.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:400;text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;background:var(--panel);z-index:1;
}
.tbl td{padding:7px 10px;border-bottom:1px solid rgba(27,38,32,.55);vertical-align:top}
.tbl .r{text-align:right}
.tbl tbody tr:last-child td{border-bottom:0}
.scroll{
  max-height:26rem;overflow-y:auto;overflow-x:hidden;
  /* 🔴 A CLIPPED ROW MUST READ AS "MORE BELOW", NOT AS A RENDERING FAULT. On a phone the rows are
     CARDS, so a hard clip cuts one in half and looks broken rather than scrollable. The fade is
     the affordance; it costs nothing and needs no JavaScript. */
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 22px),transparent 100%);
}
.tbl.dim{opacity:.55}

@media(max-width:719px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{
    border:1px solid var(--line);border-radius:8px;background:var(--panel2);
    padding:8px 10px;margin-bottom:8px;
  }
  .tbl td{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:2px 0;border:0;text-align:left!important;
  }
  /* Each cell carries its own header on a phone, so a card reads without one. */
  .tbl td::before{
    content:attr(data-label);flex:none;
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  /* The cell that is the row's identity spans the card as a title instead of a label/value pair. */
  .tbl td.lead{
    display:block;font-weight:600;color:var(--text);
    padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line);
  }
  .tbl td.lead::before{display:none}
  /* A free-text reason wraps under its label rather than fighting it for the line. */
  .tbl td.wrap{display:block}
  .tbl td.wrap::before{display:block;margin-bottom:2px}
  .tbl td:empty{display:none}
  /* Taller on a phone, because one card is several rows tall — 26rem would show barely three. */
  .scroll{max-height:32rem}
}

/* ── the tape ───────────────────────────────────────────────────────────────────────────────── */
.tape{max-height:26rem;overflow-y:auto}
.tape li{
  display:flex;gap:8px;padding:7px 12px;font-size:12px;line-height:1.45;
  border-bottom:1px solid rgba(27,38,32,.55);
}
@media(min-width:720px){.tape li{padding:7px 18px;gap:12px}}
.tape li:last-child{border-bottom:0}
.tape ul{list-style:none;margin:0;padding:0}
.tape .t{color:var(--muted);flex:none;width:3.2rem}
@media(min-width:720px){.tape .t{width:4.2rem}}
.tape .new{background:rgba(67,214,127,.06)}
.bar{height:1px;background:var(--line);position:relative;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;background:rgba(67,214,127,.6);transition:width 1s linear}

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--greenb);margin:0;line-height:1.2}
.top .sub{margin-top:4px}
.top .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.live .dot{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── controls ───────────────────────────────────────────────────────────────────────────────── */
button,.btn{
  font:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:5px 9px;cursor:pointer;transition:color .15s,border-color .15s;
  min-height:30px;
}
button:hover,.btn:hover{color:var(--text);border-color:var(--line2)}
button[aria-pressed=true]{color:var(--greenb);border-color:var(--line2)}
input{
  font:inherit;font-size:13px;width:100%;background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;
}
input:focus{outline:0;border-color:var(--green)}

/* ── login ──────────────────────────────────────────────────────────────────────────────────── */
.mid{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}
.card{width:100%;max-width:22rem;padding:20px}
.warn{border:1px solid rgba(242,105,107,.5);border-radius:8px;padding:11px;margin-bottom:16px}
.login-title{font-size:15px;font-weight:600;color:var(--greenb);margin:0 0 4px}
/* The one button on the page that is the point of the page. 38px tall: a comfortable phone tap
   target, where the 30px default used for toggles is not. */
button.primary{width:100%;min-height:38px;margin-top:16px;color:var(--greenb);border-color:var(--green)}
button.primary:hover{background:rgba(67,214,127,.1);color:var(--greenb)}

/* ── connection banner ──────────────────────────────────────────────────────────────────────── */
#conn{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  padding:9px 14px;text-align:center;background:#2a1416;color:var(--red);
  border-top:1px solid rgba(242,105,107,.4);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
body.offline #conn{display:block}

footer{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.8;
}

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#223029;border-radius:8px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}