/* ══════════════════════════════════════════════════════════════════════════════════════════════
   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{
  /* A NEUTRAL GROUND, NOT A GREEN ONE. Everything sat on a green-black wash with green rules and
     green text, so nothing could stand out by being green — a won trade looked like a table
     border. The surfaces are now neutral slate and colour is reserved for meaning: green won,
     red lost, cyan open, amber attention. */
  --bg:#0a0c0f; --panel:#12161b; --panel2:#171c22; --line:#232a33; --line2:#323b47;
  --green:#3ecf8e; --greenb:#5ce3a4; --amber:#f0b429; --red:#f2696b; --cyan:#4cc9e8;
  --text:#dde3ea; --muted:#7c8896;
  --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(70rem 44rem at 82% -14%,rgba(76,201,232,.05),transparent 62%),
    radial-gradient(52rem 36rem at 2% -8%,rgba(62,207,142,.035),transparent 58%);
  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:16px}

/* ── 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.7;max-width:80ch}
.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:18px}
@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.75rem;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{background:var(--panel2);
  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:9px 12px;border-bottom:1px solid rgba(35,42,51,.7);vertical-align:top}
/* A readable table needs the eye to track a row across eight columns. */
.tbl tbody tr:hover td{background:rgba(255,255,255,.022)}
.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}}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LEAD'S OWN STYLES — appended to core/src/ui/base.css, served as one /app.css.
   One strategy, read top to bottom on a phone first: the money, what it is, now, the curve, every trade.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── shared bits ─────────────────────────────────────────────────────────────────────────────── */
.quiet { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.quiet.pad { padding: 14px 16px; margin: 0; }
.badge { font-size: 10px; letter-spacing: .14em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); }
.badge.paper { color: var(--amber); border-color: rgba(240,180,41,.45); }
.badge.live { color: #fff; background: var(--red); border-color: var(--red); font-weight: 600; }
.dot.dead { background: var(--red); }
.side { font-weight: 600; white-space: nowrap; }
.side.up { color: var(--greenb); }
.side.down { color: var(--red); }
.st { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.st.open { color: var(--amber); background: rgba(240,180,41,.12); }
.st.won { color: var(--greenb); background: rgba(62,207,142,.12); }
.st.lost { color: var(--red); background: rgba(242,105,107,.12); }

/* segmented control — the toggles in a panel header */
.seg { display: inline-flex; gap: 0; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; text-transform: none; letter-spacing: 0; }
.seg button { border: 0; border-radius: 0; margin: 0; padding: 4px 10px; font-size: 11px; background: transparent; color: var(--muted); min-height: 26px; }
.seg button + button { border-left: 1px solid var(--line2); }
.seg button[aria-pressed=true] { background: var(--panel2); color: var(--text); }
.seg button b { color: var(--muted); font-weight: 500; margin-left: 2px; }
.seg button[aria-pressed=true] b { color: var(--greenb); }

/* ── hero ────────────────────────────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .hero { grid-template-columns: minmax(220px, 1fr) 2.2fr; align-items: center; } }
.hero-eq .eq { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: 4px; }
@media (min-width: 720px) { .hero-eq .eq { font-size: 3.2rem; } }
.hero-delta { margin-top: 6px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 960px) { .hero-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hcell { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.hcell .hv { font-size: 1.25rem; margin-top: 4px; }
.hcell .hs { font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.pulse .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* ── how it works ────────────────────────────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.steps li { display: flex; gap: 10px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.steps .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--bg); background: var(--cyan); }
.steps .h { display: block; font-size: 12px; margin-bottom: 3px; }
.steps span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.steps span b { color: var(--text); }
.why { font-size: 12px; color: var(--muted); margin: 12px 0 10px; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text); }

/* ── this window ─────────────────────────────────────────────────────────────────────────────── */
.win-now { margin-bottom: 12px; }
.win-clock { font-size: 13px; margin-bottom: 8px; }
.win-clock b { font-size: 1.3rem; margin-left: 6px; }
.win-bar { position: relative; height: 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.win-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(76,201,232,.35), rgba(76,201,232,.75)); transition: width 1s linear; }
.win-bar > em { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--amber); }
.win-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 4px; letter-spacing: .06em; }
.buys { list-style: none; margin: 0 0 12px; padding: 0; }
.buys li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.buys li:first-child { border-top: 0; }
.buys .st { margin-left: auto; }
.strip-l { margin: 4px 0 6px; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 960px) { .strip { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.wc { border: 1px solid var(--line); border-radius: 8px; padding: 6px 7px; background: var(--panel2); display: grid; gap: 2px; min-width: 0; position: relative; }
.wc .t { font-size: 10px; color: var(--muted); }
.wc b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc .r { position: absolute; top: 5px; right: 7px; font-size: 10px; color: var(--muted); }
.wc.none b { color: var(--muted); }
.wc.won { border-color: rgba(62,207,142,.55); } .wc.won b { color: var(--greenb); }
.wc.lost { border-color: rgba(242,105,107,.55); } .wc.lost b { color: var(--red); }
.wc.open { border-color: rgba(240,180,41,.55); } .wc.open b { color: var(--amber); }

/* ── bank over time ──────────────────────────────────────────────────────────────────────────── */
.curve-wrap { width: 100%; height: 200px; }
.curve { width: 100%; height: 100%; display: block; }
.curve-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.curve-foot b { color: var(--text); }

/* ── every trade ─────────────────────────────────────────────────────────────────────────────── */
.tlink { background: none; border: 0; padding: 0; margin: 0; min-height: 0; color: var(--cyan); font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.tlink.on, .tlink:hover { color: var(--text); }
.more { padding: 10px 16px; border-top: 1px solid var(--line); }
.tcard { margin: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--panel2); }
.tcard-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.tcard-h .x { margin-left: auto; font-size: 11px; min-height: 0; padding: 3px 9px; }
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.story li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font-size: 12px; line-height: 1.5; }
.story .k { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; padding-top: 2px; }

/* ── the numbers ─────────────────────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.kpi .kv { font-size: 1.2rem; margin-top: 4px; }
.kpi .ks { font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1100px) { .split { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── health ──────────────────────────────────────────────────────────────────────────────────── */
.hstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .hstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hitem { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.hitem .hv { font-size: 1.05rem; margin-top: 4px; }
.hitem .hs { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* chart labels laid over the stretched SVG */
.curve-wrap { position: relative; }
.ytag { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; background: var(--panel); }
.ytag.start { color: var(--muted); }
.ytag.hi { color: var(--text); }

/* a won / lost pair is ONE value — on a phone card the cell would otherwise spread its three parts across the row */
.wl { white-space: nowrap; }

/* the five steps, compact on a phone: a numbered list, not five cards */
@media (max-width: 959px) {
  .steps { gap: 0; }
  .steps li { background: none; border: 0; border-radius: 0; padding: 7px 0; border-top: 1px solid var(--line); }
  .steps li:first-child { border-top: 0; padding-top: 0; }
  .steps .h { display: inline; margin: 0 6px 0 0; }
}
/* on a phone the grey sub-lines wrap instead of cutting off mid-word */
@media (max-width: 719px) { .kpi .ks, .hcell .hs { white-space: normal; } }
/* the engine's heartbeat dot: green and breathing while it beats, red when it has gone quiet */
.pulse .dot.live { background: var(--green); animation: pulse 1.9s ease-in-out infinite; }
.pulse .dot.dead { background: var(--red); }