/* Mobile-first; the same markup on a phone, a tablet and a desktop. */
:root {
  color-scheme: light dark;
  --bg:#f5f6f8; --card:#ffffff; --text:#1d2330; --muted:#5f6b7a; --line:#e3e6ea; --accent:#1f5fbf;
  --accent-ink:#ffffff; --ok:#1a7f37; --bad:#c62828; --warn:#b26a00; --chip:#ffffff;
  --s1:#2a78d6; --s2:#eb6834; --grid:#e3e6ea; --axis:#9aa3ad;
  --pill:#eceff3; --row-crit:#fff5f5; --row-alert:#fffaf0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121417; --card:#1b1f25; --text:#eceff3; --muted:#a3adb8; --line:#2b323b; --accent:#5b9cf2;
    --accent-ink:#0b1320; --ok:#5cc46f; --bad:#ff7b72; --warn:#f0b35a; --chip:#1b1f25;
    --s1:#3987e5; --s2:#d95926; --grid:#2b323b; --axis:#6b7580;
    --pill:#2b323b; --row-crit:#2a1b1b; --row-alert:#2a2416;
  }
}
:root[data-theme="dark"] {
  --bg:#121417; --card:#1b1f25; --text:#eceff3; --muted:#a3adb8; --line:#2b323b; --accent:#5b9cf2;
  --accent-ink:#0b1320; --ok:#5cc46f; --bad:#ff7b72; --warn:#f0b35a; --chip:#1b1f25;
  --s1:#3987e5; --s2:#d95926; --grid:#2b323b; --axis:#6b7580;
  --pill:#2b323b; --row-crit:#2a1b1b; --row-alert:#2a2416;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:var(--bg);
       padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
a { color:var(--accent); }
h1 { font-size:22px; margin:0 0 6px; line-height:1.25; } h1 small { font-size:14px; color:var(--muted); font-weight:normal; }
h2 { font-size:16px; margin:0 0 10px; } h2.section { margin:18px 0 8px; color:var(--muted); text-transform:uppercase; font-size:12px; letter-spacing:.06em; }

/* header and tabs */
header.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px;
             padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
header.top .brand { font-weight:600; color:var(--text); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
nav.topnav { display:flex; gap:4px; align-items:center; }
nav.topnav a, nav.topnav button.link { padding:10px 10px; min-height:44px; display:inline-flex; align-items:center; color:var(--accent); text-decoration:none; font-size:15px; }
nav.tabs { display:flex; background:var(--card); border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; }
nav.tabs a { flex:1 0 auto; text-align:center; padding:12px 16px; min-height:44px; text-decoration:none; color:var(--muted); font-weight:600; border-bottom:3px solid transparent; white-space:nowrap; }
nav.tabs a.active { color:var(--accent); border-bottom-color:var(--accent); }
main { max-width:1100px; margin:0 auto; padding:16px; }
footer.foot { color:var(--muted); font-size:13px; text-align:center; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }

/* cards and tiles */
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; }
.narrow { max-width:420px; margin:32px auto; }
.tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:8px 0 12px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; min-width:0; }
.tile .label { display:block; color:var(--muted); font-size:12px; margin-bottom:2px; }
.tile .value { display:block; font-size:22px; font-weight:600; overflow-wrap:anywhere; }
.machine-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.machine-card { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--text); }
.machine-card .name { font-size:18px; font-weight:600; } .machine-card .facts { font-size:14px; color:var(--muted); }

/* filters: chips scroll sideways on a phone, big tap targets */
.filters { margin:6px 0 4px; }
.chips { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0 6px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; padding:9px 14px; min-height:40px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px;
        text-decoration:none; background:var(--chip); color:var(--text); font-size:14px; }
.chip.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
details.custom summary { cursor:pointer; color:var(--accent); padding:8px 0; min-height:40px; display:flex; align-items:center; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.field { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); flex:1 1 140px; }
input, select { font-size:16px; padding:10px; min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); width:100%; }
label.check { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; }
label.check input { width:22px; height:22px; min-height:0; margin:0; }
button, a.button { background:var(--accent); color:var(--accent-ink); border:0; padding:10px 16px; min-height:44px; border-radius:8px; font-size:15px; cursor:pointer;
                   text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button.link { background:none; color:var(--accent); padding:0 8px; }
form.inline { display:inline; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:4px 0 10px; }
.inline-form { display:flex; gap:8px; align-items:flex-end; flex:1 1 220px; max-width:360px; }
.inline-form .field { flex:1 1 120px; }
.checks { align-items:center; } .checks .muted { flex:1 1 100%; }
@media (max-width: 559px) { .checks label.check { flex:1 1 100%; } .checks button { flex:1 1 100%; } }

/* text helpers */
.ok { color:var(--ok); font-weight:600; } .bad { color:var(--bad); font-weight:600; } .warn { color:var(--warn); font-weight:600; }
.muted { color:var(--muted); } .small { font-size:13px; } .hint { color:var(--muted); font-size:13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; }
.wrap { overflow-wrap:anywhere; }
.status { color:var(--muted); font-size:14px; margin:0 0 8px; }
.notice { background:color-mix(in srgb, var(--accent) 12%, var(--card)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); padding:10px 12px; border-radius:8px; }
.error { background:color-mix(in srgb, var(--bad) 12%, var(--card)); border:1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); padding:10px 12px; border-radius:8px; color:var(--bad); }
label { display:block; margin:10px 0; }
.pill { display:inline-block; padding:2px 10px; border-radius:12px; font-size:13px; background:var(--pill); }
.pill.completed { background:color-mix(in srgb, var(--ok) 18%, var(--card)); color:var(--ok); }
.pill.running { background:color-mix(in srgb, var(--accent) 18%, var(--card)); color:var(--accent); }
.pill.aborted, .pill.interrupted { background:color-mix(in srgb, var(--warn) 18%, var(--card)); color:var(--warn); }
.pill.error, .pill.estop { background:color-mix(in srgb, var(--bad) 18%, var(--card)); color:var(--bad); }

/* programme groups */
details.program summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:18px 1fr; column-gap:4px; row-gap:2px; min-height:44px; padding:4px 0; align-items:start; }
details.program summary::-webkit-details-marker { display:none; }
details.program summary::before { content:"▸"; color:var(--muted); grid-row:1 / span 2; padding-top:2px; }
details.program[open] summary::before { content:"▾"; }
details.program summary .name, details.program summary .facts { grid-column:2; }
details.program .name { font-weight:600; font-size:16px; } details.program .facts { color:var(--muted); font-size:13px; }

/* tables: stacked rows on a phone, classic grid from 760px */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; min-width:0; }
th { color:var(--muted); font-weight:600; font-size:13px; }
table.kv th { width:42%; }
tr.critical td { background:var(--row-crit); } tr.alert td { background:var(--row-alert); }
@media (max-width: 759px) {
  table.stack thead { position:absolute; left:-9999px; }
  table.stack tr { display:block; padding:8px 0; border-bottom:1px solid var(--line); }
  table.stack td { display:flex; gap:10px; border:0; padding:3px 0; }
  table.stack td::before { content:attr(data-label); flex:0 0 38%; color:var(--muted); font-size:13px; }
  table.stack td > * { min-width:0; }
  table.kv th { width:36%; font-size:13px; }
}
@media (min-width: 560px) { .tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); } .machine-grid { grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); } main { padding:24px; } }

/* charts: SVG scales to the card, colours from CSS so dark mode follows */
.charts { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 760px) { .charts { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } }
figure.card { margin:0; } figure figcaption { font-weight:600; margin-bottom:6px; font-size:14px; }
svg.chart { width:100%; height:auto; display:block; font: 11px system-ui, sans-serif; }
svg.chart .grid { stroke:var(--grid); stroke-width:1; } svg.chart .axis { stroke:var(--axis); stroke-width:1; }
svg.chart .tick, svg.chart .label { fill:var(--muted); font-size:10px; }
svg.chart .bar.s1 { fill:var(--s1); } svg.chart .bar.s2 { fill:var(--s2); }
svg.chart .marker { stroke:var(--text); stroke-width:2; stroke-dasharray:3 2; }
svg.chart .hit { fill:transparent; } svg.chart .bucket:hover .bar { opacity:.85; }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); margin:6px 0 0; }
.legend .swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.legend .swatch.s1 { background:var(--s1); } .legend .swatch.s2 { background:var(--s2); }
.legend .swatch.marker-swatch { background:none; border-top:2px dashed var(--text); height:0; vertical-align:3px; }

/* account management */
details.actions summary { cursor:pointer; color:var(--accent); min-height:40px; display:flex; align-items:center; }
details.actions form.stacked { margin:8px 0 12px; max-width:420px; }
details.confirm summary { cursor:pointer; color:var(--bad); min-height:44px; display:inline-flex; align-items:center; padding:0 4px; }
button.secondary { background:var(--pill); color:var(--text); }
button.danger { background:var(--bad); color:#fff; }
p.chips { margin:0 0 8px; }
p.status a { text-decoration:none; }
ul { padding-left:20px; margin:6px 0; } ul li { padding:4px 0; }