:root {
  --bg: #f4f6f9; --surface: #ffffff; --surface2: #e9edf2; --ink: #17202b; --ink2: #44505f;
  --muted: #586373; --rule: #d3d9e1; --m1: #1f5fae; --m2: #bf5410; --mx: #6b7686;
  --ok: #146c43; --run: #0a6a6a; --bad: #b42318; --warn: #855300; --idle: #586373;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1319; --surface: #161d25; --surface2: #202a35; --ink: #e8edf3; --ink2: #b4bec9;
    --muted: #8f9bab; --rule: #2d3945; --m1: #5894de; --m2: #d4752f; --mx: #94a0b0;
    --ok: #5cc58f; --run: #4fc3c3; --bad: #ff8f85; --warn: #e8b44f; --idle: #8f9bab;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0e1319; --surface: #161d25; --surface2: #202a35; --ink: #e8edf3; --ink2: #b4bec9;
    --muted: #8f9bab; --rule: #2d3945; --m1: #5894de; --m2: #d4752f; --mx: #94a0b0;
    --ok: #5cc58f; --run: #4fc3c3; --bad: #ff8f85; --warn: #e8b44f; --idle: #8f9bab;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin: 0 0 4px; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 8px; }
a { color: var(--ink); text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.85em; }

.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); padding-top: 18px; }
.mast-row { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-start; }
.mast-title { flex: 1 1 360px; min-width: 0; }
.lede { color: var(--ink2); max-width: 68ch; margin: 6px 0 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; }
.mast-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 0.9rem; }
.badge { border: 1px solid var(--rule); border-radius: 3px; padding: 2px 8px; color: var(--ink2); background: var(--bg); }
.ext::after { content: " \2197"; text-decoration: none; display: inline-block; }
.fresh { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 14px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 0.92rem; }
.fresh-text { color: var(--ink2); }
.banner { margin: 0 0 8px; padding: 8px 12px; border-left: 4px solid var(--warn); background: var(--surface2); font-size: 0.92rem; }
.banner.bad { border-color: var(--bad); }
.banner ul { margin: 4px 0 0; padding-left: 18px; }
.tabs { display: flex; gap: 2px; margin-top: 4px; overflow-x: auto; }
.tabs a { padding: 9px 16px; text-decoration: none; border-bottom: 3px solid transparent; color: var(--ink2); font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--ink); background: var(--bg); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

main { padding-top: 22px; padding-bottom: 36px; min-height: 60vh; }
main:focus { outline: none; }
section { margin-bottom: 36px; }
.sec-head { margin-bottom: 12px; }
.sec-head p { color: var(--ink2); max-width: 70ch; margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; }
.empty { border: 1px dashed var(--rule); border-radius: 4px; padding: 14px 16px; color: var(--ink2); background: transparent; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border: 1.5px solid currentColor; border-radius: 99px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.chip .ic { font-size: 0.8em; }
.chip-live, .chip-running { color: var(--run); }
.chip-completed { color: var(--ok); }
.chip-stale, .chip-warn { color: var(--warn); }
.chip-disconnected, .chip-blocked, .chip-error { color: var(--bad); }
.chip-preparing, .chip-unknown { color: var(--idle); }

.lane { background: var(--surface); border: 1px solid var(--rule); border-top: 5px solid var(--mx); border-radius: 4px; padding: 14px 16px 16px; min-width: 0; }
.lane.m1 { border-top-color: var(--m1); } .lane.m2 { border-top-color: var(--m2); }
.lane-head { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: baseline; }
.lane-method { color: var(--ink2); margin: 2px 0 10px; }
.lane .lastgood { font-size: 0.85rem; color: var(--warn); font-weight: 600; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: 0.92rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; }
.track { margin-top: 10px; }
.track-label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; margin-bottom: 4px; }
.segs { display: flex; gap: 2px; height: 12px; }
.seg { flex: 1 1 0; background: var(--surface2); border-radius: 1px; box-shadow: inset 0 0 0 1px var(--rule); }
.seg.on { background: var(--mx); box-shadow: none; }
.m1 .seg.on { background: var(--m1); } .m2 .seg.on { background: var(--m2); }
.bar { height: 12px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--mx); }
.m1 .bar > i { background: var(--m1); } .m2 .bar > i { background: var(--m2); }
.note { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.now { margin-top: 12px; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--rule); }
.now.blocked { border-left-color: var(--bad); }
.now h4 { margin: 0 0 2px; font-size: 0.92rem; font-family: var(--sans); font-weight: 600; }

details { margin: 6px 0 0; }
summary { cursor: pointer; color: var(--ink2); font-size: 0.88rem; padding: 2px 0; }
summary:hover { color: var(--ink); }
details > div, details > p { margin: 4px 0 0 4px; padding-left: 10px; border-left: 2px solid var(--rule); font-size: 0.88rem; color: var(--ink2); }

.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.feed li { display: grid; grid-template-columns: 150px 1fr; gap: 2px 16px; padding: 10px 0 10px 10px; border-bottom: 1px solid var(--rule); border-left: 4px solid var(--mx); }
.feed li.m1 { border-left-color: var(--m1); } .feed li.m2 { border-left-color: var(--m2); }
.feed time { color: var(--muted); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.feed .ev-title { font-weight: 600; }
.feed .ev-meta { font-size: 0.82rem; color: var(--muted); }
@media (max-width: 560px) { .feed li { grid-template-columns: 1fr; } }

.controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin-bottom: 12px; }
.controls label { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--muted); gap: 2px; min-width: 0; }
select, input[type="search"], button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); border-radius: 3px; padding: 6px 8px; max-width: 100%; }
button { cursor: pointer; }
button:hover, select:hover { border-color: var(--ink); }
.controls select { min-width: 0; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; font-size: 0.9rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 2px; display: inline-block; background: var(--mx); }
.sw.m1 { background: var(--m1); } .sw.m2 { background: var(--m2); }
.sw.faint { opacity: 0.55; }
.chartwrap { min-width: 0; }
.group { padding: 10px 0 2px; border-top: 1px solid var(--rule); }
.group h4 { margin: 0 0 2px; font-size: 0.95rem; font-weight: 600; font-family: var(--sans); }
svg { display: block; max-width: 100%; overflow: visible; }
svg text { font: 12px var(--sans); fill: var(--ink); }
svg text.sub { fill: var(--muted); }
svg .grid { stroke: var(--rule); stroke-width: 1; }
svg .base { stroke: var(--ink2); stroke-width: 1.25; }
svg .track { fill: var(--surface2); }
svg .halo { stroke: var(--surface); stroke-width: 4; stroke-linecap: round; fill: none; }
svg .whisk { stroke: var(--ink); stroke-width: 1.5; fill: none; }
svg .fill-m1 { fill: var(--m1); } svg .fill-m2 { fill: var(--m2); } svg .fill-mx { fill: var(--mx); }
svg .stroke-m1 { stroke: var(--m1); } svg .stroke-m2 { stroke: var(--m2); } svg .stroke-mx { stroke: var(--mx); }
svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .mark { stroke: var(--surface); stroke-width: 2; }
svg .xhair { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 3; }
svg .hit { fill: transparent; cursor: crosshair; }
svg g.row:focus-visible { outline: none; }
svg g.row:focus-visible .hit, svg g.row:hover .hit { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
svg .faint { opacity: 0.55; }
.curves { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.curve { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px; min-width: 0; }
.curve h3 { font-size: 1rem; }
.curve svg:focus-visible { outline: 2px solid var(--ink); }

.tablewrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; color: var(--ink2); background: var(--bg); white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 8px 10px; color: var(--muted); font-size: 0.85rem; caption-side: top; }
.caveat { margin-top: 10px; padding: 8px 12px; border-left: 4px solid var(--warn); background: var(--surface2); font-size: 0.9rem; }

.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 8px; min-width: 0; }
.gallery img { width: 100%; height: auto; display: block; border-radius: 2px; background: var(--surface2); }
.gallery figcaption { font-size: 0.86rem; color: var(--ink2); margin-top: 6px; }
.gallery figcaption strong { color: var(--ink); display: block; }

.tip { position: fixed; z-index: 20; max-width: min(320px, calc(100vw - 16px)); background: var(--ink); color: var(--bg); padding: 8px 10px; border-radius: 4px; font-size: 0.82rem; line-height: 1.4; pointer-events: none; }
.tip b { display: block; }
.tip .tm { opacity: 0.8; }

.foot { border-top: 1px solid var(--rule); background: var(--surface); padding: 18px 0 28px; font-size: 0.88rem; }
.foot p { margin: 0 0 4px; }
.foot p:first-child { font-family: var(--serif); font-size: 1rem; }

.skeleton .sk { height: 90px; margin-bottom: 14px; background: var(--surface2); border-radius: 4px; }
.skeleton .sk-h { height: 28px; width: 40%; }

@media (prefers-reduced-motion: no-preference) {
  .bar > i, .seg { transition: background-color .2s, width .3s; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 480px) { dl.kv { grid-template-columns: 1fr; gap: 0; } dl.kv dt { margin-top: 6px; } }

.linkbtn { background: none; border: 0; padding: 0; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 0.9rem; }
.linkbtn[hidden] { display: none; }
.auth { max-width: 460px; }
.auth-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.auth-form label { font-weight: 600; }
.auth-form input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--muted); border-radius: 3px; padding: 8px 10px; width: 100%; }
.auth-form button { align-self: flex-start; padding: 8px 18px; background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.auth-form button:disabled { opacity: .6; cursor: default; }
.auth-msg { color: var(--bad); font-weight: 600; min-height: 1.4em; margin: 0; }

/* narrow screens: nothing may push the page wider than the viewport */
html, body { max-width: 100%; overflow-x: clip; }
.mast-row > *, .mast-side, .fresh > *, .controls > *, .panel, .lane, .curve, .group, .chartwrap { min-width: 0; max-width: 100%; }
.mast-title { flex-basis: 280px; }
.controls label { flex: 1 1 200px; }
.controls select, .controls input[type="search"] { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.badge { max-width: 100%; }