/* ============================================================
   Shared design system. One source of truth for every page:
   landing, login and app all pull from here so nothing drifts.
   Light is the ground state; dark is a deliberate second theme,
   not an inversion. Both were contrast-checked.
   ============================================================ */
:root{
  --bg:#fbfaf7; --panel:#ffffff; --panel2:#f3f2ec; --panel3:#eceae1;
  --ink:#181a1e; --sec:#5b5e66; --mut:#8a8d94; --line:#e7e5de;
  --acc:#2a78d6; --acc-ink:#1c5cab; --acc-wash:#eaf2fd;
  --gain:#1a7f37; --loss:#cf222e; --warn:#9a6700;
  --gain-bg:#e6f2e9; --loss-bg:#fbe9e9; --warn-bg:#f6efdc;
  --shadow:0 1px 2px rgba(20,22,26,.05);
  --shadow-lg:0 4px 24px rgba(20,22,26,.08);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#131519; --panel:#1a1d22; --panel2:#21242b; --panel3:#282c34;
  --ink:#eceef2; --sec:#9aa0ab; --mut:#6b7079; --line:#262a31;
  --acc:#3987e5; --acc-ink:#6da7ec; --acc-wash:#16243a;
  --gain:#2ea856; --loss:#f0524d; --warn:#d29922;
  --gain-bg:#15271b; --loss-bg:#2c1a19; --warn-bg:#2a2314;
  --shadow:none; --shadow-lg:0 4px 24px rgba(0,0,0,.4);
}}
:root[data-theme="light"]{
  --bg:#fbfaf7; --panel:#ffffff; --panel2:#f3f2ec; --panel3:#eceae1;
  --ink:#181a1e; --sec:#5b5e66; --mut:#8a8d94; --line:#e7e5de;
  --acc:#2a78d6; --acc-ink:#1c5cab; --acc-wash:#eaf2fd;
  --gain:#1a7f37; --loss:#cf222e; --warn:#9a6700;
  --gain-bg:#e6f2e9; --loss-bg:#fbe9e9; --warn-bg:#f6efdc;
  --shadow:0 1px 2px rgba(20,22,26,.05);
}
:root[data-theme="dark"]{
  --bg:#131519; --panel:#1a1d22; --panel2:#21242b; --panel3:#282c34;
  --ink:#eceef2; --sec:#9aa0ab; --mut:#6b7079; --line:#262a31;
  --acc:#3987e5; --acc-ink:#6da7ec; --acc-wash:#16243a;
  --gain:#2ea856; --loss:#f0524d; --warn:#d29922;
  --gain-bg:#15271b; --loss-bg:#2c1a19; --warn-bg:#2a2314;
  --shadow:none; --shadow-lg:0 4px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box}

/* ---- overscroll: off, everywhere ----------------------------------------
   `none` on BOTH html and body — body alone is not enough on iOS Safari.
   This kills the rubber-band bounce at the top/bottom and pull-to-refresh,
   which on a live dashboard reads as the page glitching. Momentum scrolling
   is deliberately left alone; disabling it makes normal scrolling feel dead.
   Nested scrollers get `contain` so reaching their end never chains the
   scroll up to the page behind them.                                       */
html,body{overscroll-behavior:none;overscroll-behavior-x:none;overscroll-behavior-y:none}
.tbl-wrap,.scroll,[data-scroll],pre,textarea{overscroll-behavior:contain}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font:15px/1.6 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

/* type scale — one scale, used everywhere */
h1{font-size:30px;line-height:1.2;font-weight:650;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0}
h3{font-size:16px;font-weight:600;margin:0}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.lede{font-size:17px;line-height:1.65;color:var(--sec)}
.small{font-size:13px;color:var(--sec)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--gain)} .dn{color:var(--loss)} .mut{color:var(--mut)}

/* surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
      box-shadow:var(--shadow);padding:18px}
.card h2{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
         color:var(--mut);margin:0 0 14px}

/* pills & badges */
.pill{display:inline-block;font:600 10px/1 var(--sans);letter-spacing:.06em;
      padding:5px 9px;border-radius:99px;text-transform:uppercase}
.pill-paper{background:var(--warn-bg);color:var(--warn)}
.pill-live{background:var(--loss-bg);color:var(--loss)}
.pill-ok{background:var(--gain-bg);color:var(--gain)}
.pill-mut{background:var(--panel2);color:var(--mut)}
.badge{font:600 10px/1 var(--sans);padding:3px 7px;border-radius:6px;letter-spacing:.03em}
.badge.run{background:var(--gain-bg);color:var(--gain)}
.badge.stop{background:var(--warn-bg);color:var(--warn)}
.badge.halt{background:var(--loss-bg);color:var(--loss)}

/* buttons */
.btn{display:inline-block;font-size:14px;font-weight:500;padding:10px 18px;
     border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
     transition:background .15s,border-color .15s}
.btn:hover{background:var(--panel2);text-decoration:none}
.btn-primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-primary:hover{background:var(--acc-ink);border-color:var(--acc-ink)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--sec)}
.btn-ghost:hover{background:var(--panel2);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
   color:var(--mut);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
th.r,td.r{text-align:right}
.tbl-wrap{overflow-x:auto}

/* forms */
label{display:block;font-size:12px;color:var(--sec);margin-bottom:5px}
/* `:not([type])` matters: an <input> with no type attribute behaves as text but
   does NOT match input[type=text], so it silently misses these styles and falls
   back to the browser's default size=20 width. */
input:where([type=text],[type=password],[type=email],[type=number],[type=date],
            [type=search],[type=tel],[type=url],:not([type])),
select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;font:14px var(--sans);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
/* Chrome paints autofilled fields white, which breaks the dark theme. There is
   no way to set the background directly — the inset shadow trick is the fix. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--bg) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s}

.skel{color:var(--mut);text-align:center;padding:44px 0;font-size:14px}
.banner{border-radius:var(--r-sm);padding:11px 15px;font-size:13.5px;margin-bottom:16px}
.banner-err{background:var(--loss-bg);color:var(--loss);border:1px solid var(--loss)}
.banner-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}

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