:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #dde1e6;
  --grid: #e6e9ed;
  --text: #1c2129;
  --muted: #5d6673;
  --accent: #1f6feb;
  --accent-text: #ffffff;
  --series: #1f6feb;
  /* Live chart series slots 1-5 (validated categorical palette; light surface) */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --ok: #1a7f37;
  --ok-bg: #e6f4ea;
  --warn: #9a6700;
  --warn-bg: #fff4d6;
  --error: #c62828;
  --error-bg: #fdecea;
  --pending: #57606a;
  --pending-bg: #eef0f3;
  --meter-ok: #2da44e;
  --meter-warn: #d4a72c;
  --meter-error: #d1453b;
  --track: #e8ebef;
  --tip-bg: #1c2129;
  --tip-text: #f2f4f7;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --border: #2b323b;
    --grid: #232a32;
    --text: #e4e8ee;
    --muted: #97a1ad;
    --accent: #4a8df8;
    --series: #5b9bff;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --ok: #4ac26b;
    --ok-bg: #12301c;
    --warn: #d6a531;
    --warn-bg: #33290e;
    --error: #f2716b;
    --error-bg: #3a1716;
    --pending: #a3adb8;
    --pending-bg: #232931;
    --meter-ok: #3fb950;
    --meter-warn: #d6a531;
    --meter-error: #f0625a;
    --track: #232931;
    --tip-bg: #e4e8ee;
    --tip-text: #111418;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.page-header, main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}
main { padding-bottom: 32px; }

.page-header { padding-top: 32px; padding-bottom: 8px; }
h1 { margin: 0; font-size: 1.6rem; }
h2 { margin: 0; font-size: 1.05rem; }
.subtitle { margin: 4px 0 0; color: var(--muted); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.small-text { font-size: 0.85rem; }

/* ------------------------------------------------------------ tabs */

.tabs {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.tabs [role="tab"] {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  padding: 9px 16px;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: -1px;
}
.tabs [role="tab"]:hover { color: var(--text); background: var(--pending-bg); }
.tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs [role="tab"][aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: transparent; color: var(--muted); }

/* ------------------------------------------------------------ cards & controls */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 16px 0;
}
.card.disabled, .side-section.disabled { opacity: 0.55; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.row.tight { align-items: center; gap: 12px; }
.result-row { align-items: center; }

.hint { color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; }

button, select, input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--error); border-color: var(--error); }
button.small { padding: 3px 10px; font-size: 0.85rem; }
button:disabled, select:disabled, input:disabled { cursor: not-allowed; opacity: 0.5; }

.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.inline-field select { padding: 3px 8px; font-size: 0.85rem; }
.addr-input { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.addr-input .prefix { padding-left: 10px; font-family: var(--mono); color: var(--muted); }
.addr-input input { border: 0; width: 4.5em; font-family: var(--mono); padding-left: 2px; background: transparent; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--muted); }

.input-group { display: inline-flex; }
.input-group input { width: 9em; border-radius: 6px 0 0 6px; font-family: var(--mono); }
.input-group button { border-radius: 0 6px 6px 0; margin-left: -1px; }

.status-pill, .result[data-kind]:not([data-kind=""]) {
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.result:not(:empty) { display: inline-block; padding: 6px 14px; font-size: 0.95rem; }

a { color: var(--accent); }
.back-link { display: inline-block; margin-bottom: 6px; font-size: 0.85rem; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
a.button {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
a.button.small { padding: 3px 10px; font-size: 0.85rem; }

.demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.demo-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.demo-list a { font-weight: 600; }
.demo-list .muted { font-size: 0.85rem; }
[data-kind="ok"] { color: var(--ok); background: var(--ok-bg); }
[data-kind="warn"] { color: var(--warn); background: var(--warn-bg); }
[data-kind="error"] { color: var(--error); background: var(--error-bg); }
[data-kind="pending"], [data-kind="idle"] { color: var(--pending); background: var(--pending-bg); }

.info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 14px 0 0;
  font-size: 0.9rem;
}
.info:empty { display: none; }
.info dt { color: var(--muted); }
.info dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

.scan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
}
.scan-cell {
  font-family: var(--mono);
  font-size: 0.8rem;
  text-align: center;
  padding: 3px 0;
  border-radius: 4px;
  color: var(--muted);
  background: var(--pending-bg);
}
.scan-cell.empty { opacity: 0.45; }
.scan-cell.found { color: var(--ok); background: var(--ok-bg); font-weight: 700; opacity: 1; }

/* ------------------------------------------------------------ page layout: data left, controls right */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0 20px;
  align-items: start;
}
.layout-main, .layout-side { min-width: 0; }
.layout-side {
  position: sticky;
  top: 16px;
  margin: 16px 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.layout-side .card { margin: 0; }
@media (max-width: 999px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout-side { position: static; max-height: none; margin-bottom: 0; }
  .layout.side-first .layout-side { order: -1; }
}

.side { padding: 16px 18px; }
.side h2 { font-size: 0.95rem; margin-bottom: 10px; }
.side-section + .side-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.side-head h2 { margin: 0; }
.stack { display: grid; gap: 10px; }
.stack > * { min-width: 0; }
.stack > select, .stack > button { width: 100%; max-width: 100%; }
.stack .field select, .stack .addr-input { width: 100%; }
.stack .addr-input input { flex: 1; width: auto; min-width: 0; }
.stack .input-group { display: flex; }
.stack .input-group input { flex: 1; width: auto; min-width: 0; }
.button-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.9rem; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* Toggle switch: <label class="switch"><input type="checkbox" role="switch"><span class="switch-track"></span>Text</label> */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--track);
  border: 1px solid var(--border);
  transition: background-color 0.15s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.5; cursor: not-allowed; }

/* Interrupt pin indicator: grey = inactive / unknown, green = active (pin low). Always with a text label. */
.int-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.int-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); opacity: 0.45; }
.int-indicator[data-state="active"] { color: var(--ok); }
.int-indicator[data-state="active"] .int-dot { background: var(--meter-ok); opacity: 1; box-shadow: 0 0 0 3px var(--ok-bg); }

/* Hint shown in a card until it has content. */
.placeholder { margin: 0; color: var(--muted); font-size: 0.9rem; }
.info:not(:empty) + .placeholder,
.scan-grid:not(:empty) + .placeholder,
.result-row:has(.result:not(:empty)) + .placeholder { display: none; }
.scan-grid:empty { display: none; }

/* ------------------------------------------------------------ level meter */

.level-hero {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  width: fit-content;
}
.hero-value { font-size: 56px; font-weight: 600; line-height: 1; min-width: 2ch; }
.hero-unit { font-size: 1.3rem; color: var(--muted); font-weight: 600; }
.level-desc { margin-left: 8px; border-radius: 999px; padding: 2px 12px; font-size: 0.85rem; font-weight: 600; }
.level-desc:empty { display: none; }

.meter { margin: 18px 0 6px; }
.meter-track {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: var(--track);
}
.meter-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--meter-ok);
  transition: width 0.12s linear, background-color 0.3s;
}
.meter-fill[data-kind="ok"] { background: var(--meter-ok); }
.meter-fill[data-kind="warn"] { background: var(--meter-warn); }
.meter-fill[data-kind="error"] { background: var(--meter-error); }
.meter-fill.plain { background: var(--series); }
.meter-mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 0 2px var(--surface);
  transition: left 0.2s;
}
.meter-scale {
  position: relative;
  height: 20px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.meter-scale span { position: absolute; transform: translateX(-50%); }
.meter-scale span:first-child { transform: none; }
.meter-scale span:last-child { transform: translateX(-100%); }

.minmax { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.stat {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.stat-label { font-size: 0.8rem; color: var(--muted); }
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.stat-value small { font-size: 0.9rem; color: var(--muted); }

/* ------------------------------------------------------------ history chart */

.chart { position: relative; height: 260px; }
.hc { display: block; width: 100%; height: 100%; touch-action: none; }
.hc-grid line { stroke: var(--grid); stroke-width: 1; }
.hc-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.hc-tick-y { text-anchor: end; dominant-baseline: middle; }
.hc-tick-x { text-anchor: middle; }
.hc-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hc-area { fill: var(--series); opacity: 0.1; stroke: none; }
.hc-dot { fill: var(--series); }
.hc-end { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.hc-end-label { fill: var(--text); font-size: 12px; font-weight: 600; dominant-baseline: middle; }
.hc-empty { fill: var(--muted); font-size: 13px; text-anchor: middle; }
.hc-cross-line { stroke: var(--muted); stroke-width: 1; }
.hc-readout {
  position: absolute;
  top: 8px;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  font-size: 0.85rem;
  pointer-events: none;
  white-space: nowrap;
}
.hc-readout span { color: var(--muted); font-size: 0.8rem; }

.values { margin-top: 10px; font-size: 0.85rem; }
.values summary { cursor: pointer; color: var(--muted); }
.hv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px;
  margin-top: 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.hv-cell { display: flex; justify-content: space-between; gap: 6px; padding: 2px 6px; border-radius: 4px; background: var(--pending-bg); }
.hv-cell span { color: var(--muted); }

/* ------------------------------------------------------------ spectrum card */

.spectrum-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px 24px; }
@media (max-width: 760px) { .spectrum-grid { grid-template-columns: 1fr; } }
.spectrum-pane { min-width: 0; }
.spectrum-pane h3 { margin: 0 0 4px; font-size: 0.9rem; font-weight: 600; width: fit-content; }
.spectrum-pane h3 .muted { font-weight: 400; font-size: 0.8rem; }
.spectrum-grid.wide-first { grid-template-columns: 2fr 1fr; }
@media (max-width: 760px) { .spectrum-grid.wide-first { grid-template-columns: 1fr; } }
.spectrum-chart { height: 220px; }

/* ------------------------------------------------------------ history grid (Pro) */

.history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.history-pane { min-width: 0; }
.history-pane.wide { grid-column: 1 / -1; }
.history-pane h3 { margin: 0 0 4px; font-size: 0.9rem; font-weight: 600; width: fit-content; }
.history-pane h3 .muted { font-weight: 400; font-size: 0.8rem; }
.chart.compact { height: 190px; }
@media (max-width: 760px) { .history-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ level table (Pro) */

.table-wrap { overflow-x: auto; margin-top: 16px; }
.level-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.level-table th, .level-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.level-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.level-table thead th small { display: block; font-weight: 400; }
.level-table tbody th { text-align: left; font-weight: 600; color: var(--muted); }
.level-table td { font-family: var(--mono); font-size: 0.95rem; }
.level-table tbody tr:last-child > * { border-bottom: 0; }
.values h4 { margin: 10px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }

/* A feature the connected sensor doesn't have: shown greyed out, with no data. */
.card.preview .spectrum-grid { opacity: 0.45; }
.card.preview .sc { pointer-events: none; }
.upsell {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--pending-bg);
}
.sc { display: block; width: 100%; height: 100%; touch-action: none; }
.sc-col { fill: var(--series); }
.sc-col.hover { fill: var(--accent); opacity: 0.75; }
.hv-grid.wide { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

/* ------------------------------------------------------------ live chart (Pro) */

.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.pickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.picker { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker label { display: flex; align-items: center; gap: 6px; }
.picker select { flex: 1; min-width: 0; padding: 5px 8px; font-size: 0.85rem; }
.picker-value { padding-left: 24px; font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.picker.empty .swatch { opacity: 0.3; }
.swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.swatch.line { width: 18px; height: 3px; border-radius: 2px; }
.swatch.s1 { background: var(--s1); }
.swatch.s2 { background: var(--s2); }
.swatch.s3 { background: var(--s3); }
.swatch.s4 { background: var(--s4); }
.swatch.s5 { background: var(--s5); }

.time-chart { height: 720px; }
.tc-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 6 4; opacity: 0.8; }
.tc-ref-label { fill: var(--muted); font-size: 11px; font-weight: 600; }
.tc { display: block; width: 100%; height: 100%; touch-action: none; }
.tc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-end { stroke: var(--surface); stroke-width: 2; }
.tc-line.s1 { stroke: var(--s1); } .tc-dot.s1, .tc-end.s1 { fill: var(--s1); }
.tc-line.s2 { stroke: var(--s2); } .tc-dot.s2, .tc-end.s2 { fill: var(--s2); }
.tc-line.s3 { stroke: var(--s3); } .tc-dot.s3, .tc-end.s3 { fill: var(--s3); }
.tc-line.s4 { stroke: var(--s4); } .tc-dot.s4, .tc-end.s4 { fill: var(--s4); }
.tc-line.s5 { stroke: var(--s5); } .tc-dot.s5, .tc-end.s5 { fill: var(--s5); }
.tc-readout { gap: 2px; }
.tc-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; color: var(--text); }
.tc-row b { font-family: var(--mono); font-weight: 600; }

/* ------------------------------------------------------------ log, banner, tooltip */

.log {
  font-family: var(--mono);
  font-size: 0.8rem;
  height: 220px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.log-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.log-ok { color: var(--ok); }
.log-warn { color: var(--warn); }
.log-error { color: var(--error); }
.log-trace { color: var(--muted); }

.banner {
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 10px;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn);
}

.tooltip {
  position: absolute;
  z-index: 100;
  max-width: min(360px, calc(100vw - 16px));
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-text);
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
}
.tooltip strong { display: block; font-family: var(--mono); font-size: 0.78rem; margin-bottom: 2px; }