/* okay engine: the telemetry page, in the okay engineering look (okayengineering.com site/assets/style.css):
   white page, light lowercase Inter, mono for every number, hairlines, one signal orange. No dark theme,
   like that site. Sparklines and funnels are inline SVG from src/dashboard.js, styled here by class. */
:root {
  --page: #ffffff;
  --card: #f2f2f2;
  --ink: #000000;
  --dim: #8c8c8c;
  --line: #d9d8d3;
  --signal: #ff5a1f;
  --good: #1f7a3a;
  --bad: #c2321d;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3vw, 36px);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--page); color: var(--ink); font: 300 15px/1.35 var(--sans); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-transform: lowercase; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { color: var(--signal); }
b { font-weight: 400; }
.mono, time, code { font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: .92em; }
::selection { background: var(--signal); color: #fff; }

.top { display: grid; grid-template-columns: auto 1fr auto; gap: 0 clamp(16px, 3vw, 48px); align-items: start; padding: 14px var(--gutter) 0; }
.word { font-size: 17px; line-height: 1.05; border: 0; }
.lede { max-width: 46em; font-size: 13px; color: var(--dim); padding-top: 2px; }
.stamp { font-size: 11px; color: var(--dim); padding-top: 4px; }

main { padding: 0 var(--gutter) 40px; }
section { margin-top: clamp(32px, 4vw, 56px); }
h2 { font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1; border-top: 1px solid var(--ink); padding: 10px 0 14px; }

.bigs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.big { padding: 12px 14px 16px 0; border-right: 1px solid var(--line); margin-right: 14px; }
.big:last-child { border-right: 0; }
.big-label { font-size: 13px; }
.big-value { font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; letter-spacing: -.04em; line-height: 1.1; padding: 6px 0 4px; }
.big-value .none { font-family: var(--sans); font-size: 15px; letter-spacing: 0; }
.big-sub { font-size: 12px; color: var(--dim); }
.trend { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.trend.good { color: var(--good); }
.trend.bad, .bad { color: var(--bad); }
.ok, .up { color: var(--good); }
.none, .dim, .empty { color: var(--dim); }
.dim { font-size: 12px; }
.empty { font-size: 14px; }
.empty.lead { margin-top: 24px; font-size: 15px; color: var(--ink); border-left: 2px solid var(--signal); padding-left: 12px; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); }
thead th { font-weight: 300; color: var(--dim); font-size: 12px; white-space: nowrap; }
tbody th { font-weight: 400; white-space: nowrap; }

.gates { display: flex; flex-wrap: wrap; gap: 4px; }
.gate { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px 2px; white-space: nowrap; }
.gate.pass { border-color: var(--good); color: var(--good); }
.gate.fail { border-color: var(--bad); background: var(--bad); color: #fff; }
.gate.skip { color: var(--dim); }

.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--signal); }
.spark.drift path { stroke: var(--dim); }
.funnel rect { fill: var(--ink); }
.funnel rect:first-child { fill: var(--signal); }
.funnel text { font: 300 11px var(--sans); fill: var(--ink); }
.metrics { display: grid; gap: 2px; margin-top: 4px; }
.metric { white-space: nowrap; }

.feed { list-style: none; font-size: 13px; }
.feed li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.feed .kind { color: var(--dim); font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px 1px; margin: 0 4px; }

.foot { display: flex; justify-content: space-between; padding: 14px var(--gutter); border-top: 1px solid var(--ink); font-size: 12px; color: var(--dim); }

@media (max-width: 900px) {
  .bigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big { border-right: 0; border-bottom: 1px solid var(--line); }
  .top { grid-template-columns: auto 1fr; }
  .stamp { grid-column: 1 / -1; }
}