@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/static/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/static/fonts/atkinson-mono.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #eef1f4;
  --surface: #fafbfc;
  --ink: #131b24;
  --ink-2: #435061;
  --muted: #5d6978;
  --line: #d8dee5;
  --line-strong: #b4bec9;
  --spark: #2a78d6;
  --spark-fill: rgba(42, 120, 214, 0.12);
  --ok: #0ca30c;
  --notice: #6b7a8c;
  --warning: #fab219;
  --critical: #d03b3b;
  --critical-wash: rgba(208, 59, 59, 0.07);
  --warning-wash: rgba(250, 178, 25, 0.1);
  --glyph-on-warning: #131b24;
  --focus: #2a78d6;

  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-hero: clamp(2rem, 3.2vw + 1rem, 3.25rem);

  --gap: 1.5rem;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d1217;
    --surface: #141b22;
    --ink: #eaf0f5;
    --ink-2: #b3bfcb;
    --muted: #8b97a4;
    --line: #232d37;
    --line-strong: #3a4653;
    --spark: #3987e5;
    --spark-fill: rgba(57, 135, 229, 0.16);
    --notice: #8190a1;
    --critical-wash: rgba(208, 59, 59, 0.14);
    --warning-wash: rgba(250, 178, 25, 0.09);
    --focus: #5a9cf0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  border-top: 6px solid var(--line-strong);
}
body[data-level="ok"] { border-top-color: var(--ok); }
body[data-level="notice"] { border-top-color: var(--notice); }
body[data-level="warning"] { border-top-color: var(--warning); }
body[data-level="critical"], body[data-level="stale"] { border-top-color: var(--critical); }

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
.quiet { color: var(--muted); }

/* -------------------------------------------------------------- icons */
.icon { width: 1.1rem; height: 1.1rem; flex: none; }
.icon .i-glyph { fill: #fff; }
.icon.critical .i-shape { fill: var(--critical); }
.icon.warning .i-shape { fill: var(--warning); }
.icon.warning .i-glyph { fill: var(--glyph-on-warning); }
.icon.notice .i-shape { fill: var(--notice); }
.icon.ok .i-shape { fill: var(--ok); }
.icon.stopped .i-shape { fill: var(--line-strong); }
.icon.stopped .i-glyph { fill: var(--ink-2); }

/* -------------------------------------------------------------- header */
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 88rem;
  margin: 0 auto;
  padding: 1.25rem var(--gap) 0;
}
.identity h1 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
.top-actions { display: flex; align-items: center; gap: 1rem; }
.top-actions form { margin: 0; }
button { font: inherit; cursor: pointer; }
.button-quiet {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: var(--step--1);
}
.button-quiet:hover { background: var(--surface); }
#freshness[data-stale="true"] { color: var(--critical); font-weight: 600; }

main { max-width: 88rem; margin: 0 auto; padding: 1.5rem var(--gap) 4rem; }
body.is-offline main { opacity: 0.6; transition: opacity 0.3s; }

.section-title { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.005em; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- overview */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.verdict-text {
  font-size: var(--step-hero);
  line-height: 1.04;
  font-weight: 760;
  letter-spacing: -0.028em;
  max-width: 18ch;
  text-wrap: balance;
}
.verdict-sub { margin-top: 0.75rem; font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; }

.problems { margin-top: 1.75rem; display: grid; gap: 0.5rem; }
.problem {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.8rem 1rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--notice);
  border-radius: 4px var(--radius) var(--radius) 4px;
}
.problem.critical { border-left-color: var(--critical); background: linear-gradient(var(--critical-wash), var(--critical-wash)), var(--surface); }
.problem.warning { border-left-color: var(--warning); }
.problem-level { display: flex; align-items: center; gap: 0.45rem; font-size: var(--step--1); font-weight: 650; color: var(--ink-2); padding-top: 0.12rem; }
.problem-title { font-weight: 650; overflow-wrap: anywhere; }
.problem-detail { grid-column: 2; color: var(--ink-2); font-size: var(--step--1); max-width: 75ch; }
.problem-link { grid-column: 2; font-size: var(--step--1); }
.problems-more summary { cursor: pointer; color: var(--muted); font-size: var(--step--1); padding: 0.35rem 0; }
.problems-more[open] summary { margin-bottom: 0.5rem; }
.problems-more .problems { margin-top: 0; }

/* -------------------------------------------------------------- machine */
.machine {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
}
.meters { display: grid; gap: 1.1rem; margin-top: 1rem; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.meter-name { font-weight: 650; }
.meter-value { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.01em; }
.meter-note { font-size: var(--step--1); color: var(--muted); }
.spark { position: relative; margin-top: 0.3rem; }
.spark svg { display: block; width: 100%; height: 44px; overflow: visible; }
.spark .line { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--spark-fill); }
.spark .threshold { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.7; }
.spark .base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark .cross { stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.spark-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
.spark-hit { position: absolute; inset: -6px 0; cursor: crosshair; }
.spark-hit:focus-visible { outline-offset: 0; }

.storage { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.7rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; font-size: var(--step--1); }
.bar-row .name { font-weight: 600; }
.bar { grid-column: 1 / -1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--spark); border-radius: 3px; }
.bar.warning > span { background: var(--warning); }
.bar.critical > span { background: var(--critical); }

/* -------------------------------------------------------------- apps */
.apps-section { margin-top: 3rem; }
.apps { margin-top: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.app-grid {
  display: grid;
  grid-template-columns: 1.4rem minmax(12rem, 1.6fr) minmax(10rem, 1.3fr) 7.5rem 5rem 6rem 6.5rem;
  gap: 1rem;
  align-items: center;
}
.apps-header { padding: 0.6rem 1rem; font-size: var(--step--1); color: var(--muted); border-bottom: 1px solid var(--line); }
.apps-header .num, .app .num { text-align: right; font-variant-numeric: tabular-nums; }
.category { padding: 0.9rem 1rem 0.35rem; font-size: var(--step--1); font-weight: 700; color: var(--ink-2); border-top: 1px solid var(--line); }
.category:first-of-type { border-top: 0; }
.app { border-top: 1px solid var(--line); }
.category + .app { border-top: 0; }
.app > summary { list-style: none; cursor: pointer; padding: 0.7rem 1rem; }
.app > summary::-webkit-details-marker { display: none; }
.app > summary:hover { background: color-mix(in srgb, var(--page) 55%, var(--surface)); }
.app[open] > summary { background: color-mix(in srgb, var(--page) 70%, var(--surface)); }
.app.critical > summary { background: var(--critical-wash); }
.app-name { font-weight: 650; display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.app-name .chev { color: var(--muted); font-weight: 400; transition: transform 0.15s; display: inline-block; }
.app[open] .chev { transform: rotate(90deg); }
.app-desc { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.app-urls { font-size: var(--step--1); min-width: 0; overflow-wrap: anywhere; }
.app-urls a { display: block; }
.app-urls .down { color: var(--critical); font-weight: 600; }
.app .num { font-size: var(--step--1); }
.app .count-bad { color: var(--critical); font-weight: 650; }

.app-body { padding: 0.25rem 1rem 1.25rem 3.4rem; display: grid; gap: 1rem; }
.app-meta { font-size: var(--step--1); color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: var(--step--1); }
th { text-align: left; font-weight: 600; color: var(--muted); padding: 0.35rem 0.75rem 0.35rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 0.45rem 0.75rem 0.45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .mono { overflow-wrap: anywhere; }
.state-cell { display: flex; gap: 0.4rem; align-items: center; white-space: nowrap; }
.sub-title { font-size: var(--step--1); font-weight: 700; color: var(--ink-2); margin-bottom: 0.35rem; }
.log {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  max-height: 18rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log .t { color: var(--muted); }

/* -------------------------------------------------------------- system & events */
.lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; margin-top: 3rem; }
.facts { margin-top: 1rem; display: grid; grid-template-columns: 11rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.facts dt, .facts dd { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: var(--step--1); padding-top: 0.7rem; }
.facts dd { display: flex; gap: 0.5rem; align-items: flex-start; }
.facts dd .icon { margin-top: 0.2rem; }
.facts .extra { display: block; color: var(--muted); font-size: var(--step--1); }

.events { margin-top: 1rem; border-left: 2px solid var(--line); padding-left: 1rem; display: grid; gap: 0.6rem; }
.event { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.5rem; font-size: var(--step--1); }
.event time { display: block; color: var(--muted); }
.event .icon { margin-top: 0.1rem; }
.empty { color: var(--muted); font-size: var(--step--1); margin-top: 1rem; }

/* -------------------------------------------------------------- tooltip */
.tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: var(--ink);
  color: var(--page);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: var(--step--1);
  line-height: 1.35;
  white-space: nowrap;
}
.tooltip strong { display: block; font-size: var(--step-0); }

/* -------------------------------------------------------------- login */
.login-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 1.5rem; }
.login { width: min(100%, 24rem); display: grid; gap: 0.75rem; }
.login-title { font-size: 2.25rem; font-weight: 760; letter-spacing: -0.025em; line-height: 1.05; }
.login-form { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.login-form label { font-weight: 650; }
.login-form input {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.button-primary {
  margin-top: 0.5rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--page);
  font-weight: 700;
}
.button-primary:hover { opacity: 0.9; }
.login-error { color: var(--critical); font-weight: 650; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .app-grid { grid-template-columns: 1.4rem minmax(10rem, 1.6fr) minmax(9rem, 1.2fr) 6.5rem 4.5rem 5.5rem; }
  .app-grid > .col-up { display: none; }
}
@media (max-width: 960px) {
  .overview, .lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --gap: 1rem; }
  .apps-header { display: none; }
  .app-grid { grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; }
  .app-grid > .app-urls { grid-column: 2 / -1; }
  .app-grid > .col-containers { grid-column: 2; text-align: left; }
  .app-grid > .col-cpu { display: none; }
  .app-grid > .col-mem { grid-row: 1; grid-column: 3; }
  .app-body { padding-left: 1rem; }
  .problem { grid-template-columns: minmax(0, 1fr); }
  .problem-detail, .problem-link { grid-column: 1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media (forced-colors: active) {
  .problem { border-left-width: 6px; }
  .icon .i-shape { fill: CanvasText; }
  .icon .i-glyph { fill: Canvas; }
}