/* SEER - shared stylesheet.
   One typeface (monospace), one accent, near-black ground. Page-specific rules
   stay inline in the page that needs them. */

:root{
  --ground:#09090b;--panel:#0e0e12;--panel-2:#121218;
  --line:rgba(232,87,10,.15);--line-strong:rgba(232,87,10,.30);
  --ink:#f4efe9;--dim:#8b8278;--faint:#565049;
  --accent:#e8570a;--accent-bright:#ff7d3a;--neg:#b8623f;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --maxw:1000px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--mono);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
a{color:inherit}

.screen{position:relative;min-height:100dvh;overflow:hidden}
.screen::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.5;mask-image:radial-gradient(130% 100% at 50% 12%,#000 42%,transparent 100%)}
.screen::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);
  opacity:.5;mix-blend-mode:multiply;animation:drift 14s linear infinite}
@keyframes drift{from{background-position:0 0}to{background-position:0 44px}}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 26px}

nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 0 18px;border-bottom:1px solid var(--line-strong);position:relative;z-index:3}
.brand{color:var(--accent);font-weight:600;letter-spacing:.22em;font-size:15px;text-decoration:none}
.nav-r{display:flex;align-items:center;gap:22px;font-size:12.5px;color:var(--dim);flex-wrap:wrap}
.nav-r a{text-decoration:none;letter-spacing:.04em}
.nav-r a:hover{color:var(--ink)}
.nav-r a.on{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}
.btn{border:1px solid var(--accent);color:var(--accent);padding:8px 15px;border-radius:2px;
  text-decoration:none;letter-spacing:.06em;font-size:12.5px;white-space:nowrap;transition:.15s;
  background:none;font-family:var(--mono);cursor:pointer}
.btn:hover{background:var(--accent);color:#0a0a0c}
.btn.solid{background:var(--accent);color:#0a0a0c}
.btn.solid:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.btn:focus-visible,.nav-r a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}

/* The offline marker. Never dressed up: a stale page says so plainly. */
.stale{color:var(--faint);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);padding:3px 8px;border-radius:2px;white-space:nowrap}
.stale.on{color:var(--accent);border-color:var(--line-strong)}

.rule{border:0;border-top:1px solid var(--line-strong);margin:52px 0 0}
.sec{padding:44px 0}
.sec-h{color:var(--faint);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 20px}
.sec-note{color:var(--faint);font-size:12.5px;line-height:1.7;max-width:64ch;margin:14px 0 0}

.panel{border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--panel-2),var(--panel));border-radius:2px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;
  border-bottom:1px solid var(--line);color:var(--dim);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.phead b{color:var(--accent);font-weight:600}
/* Wide tables scroll inside their own panel; the page body never scrolls sideways. */
.scroll{overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:right;padding:9px 16px;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal;min-width:16ch}
thead th{color:var(--faint);font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px 8px}
tbody tr{border-top:1px solid var(--line)}
tbody td{font-variant-numeric:tabular-nums}
.mk{color:var(--ink)}.mk a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
.mkt{color:var(--dim)}.see{color:var(--ink)}
.edge{font-weight:600}.edge.pos{color:var(--accent-bright)}.edge.neg{color:var(--neg)}
.tagx{color:var(--faint);font-size:10.5px;letter-spacing:.08em}
.pos-v{color:var(--accent-bright)}.neg-v{color:var(--neg)}

/* One explanatory row, never an empty box. */
.empty{color:var(--faint);font-size:13px;padding:22px 16px;text-align:left}
td.empty{white-space:normal}

/* A label over a number. The number is the only thing that gets weight. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line-strong);border-radius:2px}
.stat{background:var(--panel);padding:15px 16px}
.stat b{display:block;color:var(--faint);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:400;margin-bottom:7px}
.stat span{display:block;color:var(--ink);font-size:21px;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span.pos-v{color:var(--accent-bright)}
.stat span.neg-v{color:var(--neg)}
.stat em{display:block;color:var(--dim);font-style:normal;font-size:12px;margin-top:5px}

.tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;border:1px solid var(--line-strong);color:var(--dim);white-space:nowrap}
.tag.win{color:var(--accent);border-color:var(--accent)}
.tag.loss{color:var(--neg);border-color:var(--neg)}
/* A stop is neither a win nor a loss and must not read as one. */
.tag.stop{color:var(--faint);border-style:dashed}
.tag.open{color:var(--ink)}

footer{border-top:1px solid var(--line-strong);padding:30px 0 60px;margin-top:20px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--faint);font-size:12px}
footer .knewsig{color:var(--accent)}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--ink)}

@media(max-width:680px){
  .wrap{padding:0 18px}
  .sec{padding:34px 0}
  .stat span{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.screen::after{animation:none}}