/* zt web UI, styled with Material Design 3: a top app bar, a navigation rail
   (a bottom bar on phones), outlined cards, tonal and filled buttons, outlined
   text fields, primary tabs, dense data tables, snackbars and dialogs. Colours
   are the M3 colour roles (--md-*) generated from the brand blue; the dark set
   redefines them, following the browser unless the app bar's theme switch sets
   data-theme (twice below, as CSS can't combine a media query with a
   selector). Chart series use the validated reference palette, status colours
   are reserved for state. Roboto is served from ./fonts (CSP font-src). A
   white-label brand's brand.css (zt serve --brand) loads after this file and
   overrides colour roles with the same selectors. */

@font-face {
  font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/roboto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;
  --md-primary: #1a4fc4;
  --md-on-primary: #ffffff;
  --md-primary-container: #dbe1ff;
  --md-on-primary-container: #001551;
  --md-secondary-container: #dce2f9;
  --md-on-secondary-container: #151b2c;
  --md-tertiary-container: #fde5b0;
  --md-on-tertiary-container: #261a00;
  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-surface: #faf8ff;
  --md-on-surface: #1a1b21;
  --md-on-surface-variant: #44464f;
  --md-outline: #757780;
  --md-outline-variant: #c5c6d0;
  --md-surface-lowest: #ffffff;
  --md-surface-low: #f4f3fa;
  --md-surface-container: #eeedf4;
  --md-surface-high: #e8e7ee;
  --md-surface-highest: #e2e2e9;
  --md-inverse-surface: #2f3036;
  --md-inverse-on-surface: #f1f0f7;
  --md-scrim: rgb(0 0 0 / .32);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%2344464f'%3E%3Cpath d='M480-345 240-585l43-43 197 198 197-198 43 43-240 240Z'/%3E%3C/svg%3E");

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --good: #0a8a0a;
  --warning: #fab219;
  --critical: var(--md-error);
  --mark: #ffe28a;
  --mark-encoded: #ffc78a;

  --font: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-xl: 28px;
  --elev-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
  --elev-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
  --elev-3: 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15);
  --hover: color-mix(in srgb, var(--md-primary) 8%, transparent);
  --pressed: color-mix(in srgb, var(--md-primary) 12%, transparent);
  --app-bar: 64px;
  --rail: 80px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-primary: #b5c4ff;
    --md-on-primary: #002a77;
    --md-primary-container: #264391;
    --md-on-primary-container: #dbe1ff;
    --md-secondary-container: #404659;
    --md-on-secondary-container: #dce2f9;
    --md-tertiary-container: #5a4300;
    --md-on-tertiary-container: #fde5b0;
    --md-error: #ffb4ab;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-surface: #121318;
    --md-on-surface: #e3e2e9;
    --md-on-surface-variant: #c5c6d0;
    --md-outline: #8f909a;
    --md-outline-variant: #44464f;
    --md-surface-lowest: #0d0e13;
    --md-surface-low: #1a1b21;
    --md-surface-container: #1e1f25;
    --md-surface-high: #292a2f;
    --md-surface-highest: #34343a;
    --md-inverse-surface: #e3e2e9;
    --md-inverse-on-surface: #2f3036;
    --md-scrim: rgb(0 0 0 / .6);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23c5c6d0'%3E%3Cpath d='M480-345 240-585l43-43 197 198 197-198 43 43-240 240Z'/%3E%3C/svg%3E");
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9;
    --good: #3cc13c; --mark: #6b5a17; --mark-encoded: #7a4a17;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #b5c4ff;
  --md-on-primary: #002a77;
  --md-primary-container: #264391;
  --md-on-primary-container: #dbe1ff;
  --md-secondary-container: #404659;
  --md-on-secondary-container: #dce2f9;
  --md-tertiary-container: #5a4300;
  --md-on-tertiary-container: #fde5b0;
  --md-error: #ffb4ab;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
  --md-surface: #121318;
  --md-on-surface: #e3e2e9;
  --md-on-surface-variant: #c5c6d0;
  --md-outline: #8f909a;
  --md-outline-variant: #44464f;
  --md-surface-lowest: #0d0e13;
  --md-surface-low: #1a1b21;
  --md-surface-container: #1e1f25;
  --md-surface-high: #292a2f;
  --md-surface-highest: #34343a;
  --md-inverse-surface: #e3e2e9;
  --md-inverse-on-surface: #2f3036;
  --md-scrim: rgb(0 0 0 / .6);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23c5c6d0'%3E%3Cpath d='M480-345 240-585l43-43 197 198 197-198 43 43-240 240Z'/%3E%3C/svg%3E");
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9;
  --good: #3cc13c; --mark: #6b5a17; --mark-encoded: #7a4a17;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: 400 14px/20px var(--font);
  letter-spacing: .01em;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: var(--app-bar) 1fr;
  grid-template-areas: "bar bar" "rail main";
}
body:has(.nav-rail:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main"; }
a { color: var(--md-primary); }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
h1 { font: 400 22px/28px var(--font); margin: 0; letter-spacing: 0; }
h2 { font: 500 16px/24px var(--font); margin: 0 0 12px; letter-spacing: .01em; }
h3 { font: 500 14px/20px var(--font); margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--md-outline-variant); }
p { margin: 0 0 8px; }
.muted { color: var(--md-on-surface-variant); }
.faint { color: var(--md-outline); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; }
[hidden] { display: none !important; }

/* Top app bar: brand, page title and host line, job/recording status, actions */
.app-bar {
  grid-area: bar; position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  height: var(--app-bar); padding: 0 12px 0 16px;
  background: var(--md-surface);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--md-on-surface); text-decoration: none; flex: none; padding-right: 8px; }
.brand:hover { text-decoration: none; }
.brand-mark { height: 32px; width: auto; max-width: 220px; object-fit: contain; }
.brand-mark.dark { display: none; }
/* The name, and the brand's subtitle on the second line */
.brand-name { font: 400 12px/16px var(--font); color: var(--md-on-surface-variant); }
.brand-name::first-line { font-size: 16px; line-height: 20px; font-weight: 500; color: var(--md-on-surface); }
.masthead-title { min-width: 0; flex: 1; }
.masthead-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masthead-sub { display: flex; gap: 12px; align-items: center; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); flex-wrap: nowrap; white-space: nowrap; }
.topbar-status { display: inline-flex; gap: 12px; align-items: center; }
.topbar-status a { color: var(--md-on-surface-variant); text-decoration: none; }
.theme-switch { display: inline-flex; gap: 8px; align-items: center; flex: none; font-size: 12px; color: var(--md-on-surface-variant); }
.theme-switch select { font-size: 13px; min-height: 32px; padding-left: 8px; padding-right: 32px; background-size: 20px; background-color: var(--md-surface); }
.appbar-actions { display: flex; gap: 4px; align-items: center; flex: none; }
/* Who is signed in: their email (or "API token") and a role chip */
.who { display: inline-flex; gap: 8px; align-items: center; margin-right: 8px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.who-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--shape-sm); font: 500 12px/16px var(--font); text-transform: capitalize; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.role-chip.reporter { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* Navigation rail; a bottom navigation bar on phones */
.nav-rail {
  grid-area: rail; position: sticky; top: var(--app-bar); align-self: start;
  height: calc(100vh - var(--app-bar)); overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0;
  background: var(--md-surface);
}
.nav-rail:empty { display: none; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; color: var(--md-on-surface-variant); text-decoration: none; font: 500 12px/16px var(--font); text-align: center; }
.nav-item:hover { text-decoration: none; }
.nav-pill { display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; transition: background-color .15s; }
.nav-item:hover .nav-pill { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.nav-item[aria-current="page"] { color: var(--md-on-surface); }
.nav-item[aria-current="page"] .nav-pill { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.nav-item:focus-visible { outline: none; }
.nav-item:focus-visible .nav-pill { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.nav-label { max-width: 76px; }

main { grid-area: main; padding: 8px 24px 32px; width: 100%; max-width: 1500px; margin: 0 auto; outline: none; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head h2 { margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { font-size: 12px; color: var(--md-on-surface-variant); margin-bottom: 4px; }

/* Page header: where you are, plus the actions for it */
.pathbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 4px 0; margin-bottom: 8px; min-height: 48px; }
.pathbar > b { font: 500 16px/24px var(--font); }
.pathbar .tools { margin-left: auto; }

/* Cards: outlined surfaces; the first heading is the card title */
.card { background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md); padding: 16px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card > h2:first-child, .card > .card-head:first-child { margin: 0 0 12px; }
.card.flush > p.muted { padding: 16px; margin: 0; }
.card > .card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card > .card-head h2, .card > .card-head h3 { margin: 0; border: 0; padding: 0; font: 500 16px/24px var(--font); }
.card > .card-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card.empty-state { padding: 32px 16px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.split > .sticky { position: sticky; top: calc(var(--app-bar) + 8px); max-height: calc(100vh - var(--app-bar) - 24px); overflow: auto; }
.split > .sticky > .card { margin-bottom: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 8px; }
.stack > label.check { display: flex; }

/* Forms: outlined text fields, state layers, visible focus */
label.field { display: flex; flex-direction: column; gap: 4px; font: 500 12px/16px var(--font); color: var(--md-on-surface-variant); }
label.field .hint { font-weight: 400; }
label.check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--md-on-surface); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="file"], input:not([type]), select, textarea {
  font: 400 14px/20px var(--font); color: var(--md-on-surface); background: var(--md-surface-lowest);
  border: 1px solid var(--md-outline); border-radius: var(--shape-xs); padding: 0 12px; min-width: 0; min-height: 40px;
}
input[type="file"] { padding: 7px 12px; }
input[type="file"]::file-selector-button { font: 500 13px var(--font); margin-right: 12px; padding: 4px 12px; border: 0; border-radius: 16px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); cursor: pointer; }
select { appearance: none; padding-right: 36px; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 8px center; background-size: 24px; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--md-on-surface); }
input:disabled, select:disabled, textarea:disabled { background: color-mix(in srgb, var(--md-on-surface) 4%, transparent); color: color-mix(in srgb, var(--md-on-surface) 38%, transparent); border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent); }
textarea { font-family: var(--mono); font-size: 13px; line-height: 20px; padding: 8px 12px; width: 100%; resize: vertical; }
textarea.prose { font-family: var(--font); font-size: 14px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--md-primary); width: 18px; height: 18px; margin: 0; flex: none; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--md-primary); outline-offset: -2px; border-color: var(--md-primary); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
ul.plain { list-style: none; padding: 0; margin: 0 0 12px; }
ul.plain li { padding: 2px 0; }
ol.stack { padding-left: 20px; margin: 0 0 12px; }
img.logo-preview { max-height: 40px; max-width: 160px; border-radius: var(--shape-xs); border: 1px solid var(--md-outline-variant); background: #fff; }
.rtc-list { margin: 8px 0 0; padding-left: 20px; }
.fleet + .fleet { margin-top: 16px; }

/* Buttons: outlined by default, .primary filled, .tool tonal with an icon, .text for dialogs and bars */
:where(button:not(.tool):not(.link):not(.icon-btn)), .button {
  font: 500 14px/20px var(--font); letter-spacing: .01em; cursor: pointer;
  padding: 0 24px; min-height: 40px; border-radius: 20px;
  border: 1px solid var(--md-outline); background: transparent; color: var(--md-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none;
  transition: background-color .15s, box-shadow .15s;
}
:where(button:not(.tool):not(.link):not(.icon-btn)):hover, .button:hover { background: var(--hover); text-decoration: none; }
:where(button:not(.tool):not(.link):not(.icon-btn)):active { background: var(--pressed); }
button.primary, .button.primary { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; }
button.primary:hover, .button.primary:hover { background: color-mix(in srgb, var(--md-primary), var(--md-on-primary) 8%); box-shadow: var(--elev-1); }
button.primary:active, .button.primary:active { background: color-mix(in srgb, var(--md-primary), var(--md-on-primary) 12%); }
button.danger { color: var(--md-error); }
button.danger:hover { background: color-mix(in srgb, var(--md-error) 8%, transparent); }
button.primary.danger { background: var(--md-error); color: var(--md-on-primary); }
button.text { border-color: transparent; padding: 0 12px; }
button.small { padding: 0 16px; min-height: 32px; font-size: 13px; border-radius: 16px; }
button.link { border: none; background: none; padding: 0; color: var(--md-primary); font: inherit; cursor: pointer; text-decoration: underline; }
button:disabled, .tool:disabled { cursor: default; pointer-events: none; color: color-mix(in srgb, var(--md-on-surface) 38%, transparent); border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent); }
button.primary:disabled, .tool:disabled { background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); border-color: transparent; }
.tool {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 24px 0 16px; border: none; border-radius: 20px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font: 500 14px/20px var(--font); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: box-shadow .15s;
}
.tool:hover { box-shadow: var(--elev-1); text-decoration: none; background: color-mix(in srgb, var(--md-secondary-container), var(--md-on-secondary-container) 8%); }
.tool .ico { width: 18px; height: 18px; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--md-on-surface-variant); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); text-decoration: none; }
.icon-btn:disabled { color: color-mix(in srgb, var(--md-on-surface) 38%, transparent); background: none; cursor: default; }
.hint { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.error-text { color: var(--md-error); white-space: pre-wrap; font-size: 14px; }

/* Tables: dense, ruled rows, state layers */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { font: 500 12px/16px var(--font); letter-spacing: .04em; color: var(--md-on-surface-variant); background: var(--md-surface-low); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
th.shrink, td.shrink { width: 1%; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.pick, th.pick { width: 1%; padding: 8px 4px 8px 12px; cursor: default; }
.pick input { margin: 0; vertical-align: middle; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--hover); }
tr.selected td, tr.selected:hover td { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
tr.group td { background: var(--md-surface-low); font-weight: 500; border-top: 1px solid var(--md-outline); }
tr.group td .muted { font-weight: 400; }
td.url { font-family: var(--mono); font-size: 13px; word-break: break-all; }
td.url .host { color: var(--md-outline); }
.rowtools { display: inline-flex; gap: 0; align-items: center; margin: -6px 0; }
.rowtools .icon-btn { width: 32px; height: 32px; color: var(--md-primary); }
.rowtools .ico { width: 20px; height: 20px; }

/* Status: a dot with its label, chips and labels */
.badge { display: inline-block; padding: 0 8px; border-radius: var(--shape-sm); font: 500 11px/20px var(--font); background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.badge.accent { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.state { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--md-outline); }
.state.good::before { background: var(--good); }
.state.warning::before { background: var(--warning); }
.state.critical::before { background: var(--critical); }
.state.live::before { background: var(--critical); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .state.live::before, .recstate.recording::before { animation: none; } * { transition: none !important; } }
.status-code { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.status-code.s2 { color: var(--good); }
.status-code.s3 { color: var(--md-on-surface-variant); }
.status-code.s4, .status-code.s5, .status-code.s0 { color: var(--critical); }
.kind { display: inline-block; width: 40px; text-align: center; font: 500 10px/18px var(--font); border-radius: var(--shape-xs); letter-spacing: .04em; background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.kind.html { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.kind.error { background: var(--md-error-container); color: var(--md-on-error-container); }
.notice { border-radius: var(--shape-md); background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.notice a { color: inherit; font-weight: 500; }
.notice.critical { background: var(--md-error-container); color: var(--md-on-error-container); }

/* Record band (Main Menu): page break on the left, recording state and controls on the right */
.recband {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px; margin-bottom: 16px; border-radius: var(--shape-md);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.recband-break { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; flex: 1 1 380px; }
.recband-break label { font-weight: 500; }
.recband-break input { flex: 1; min-width: 180px; max-width: 360px; }
.recband-break .hint { color: var(--md-on-primary-container); flex-basis: 100%; }
.recstatus { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--md-surface-lowest); color: var(--md-on-surface); border-radius: var(--shape-md); padding: 12px 16px; }
.recstatus-text { font-size: 14px; line-height: 20px; min-width: 190px; }
.recstate.recording { color: var(--md-error); }
.recstate.recording::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--critical); margin-right: 6px; animation: pulse 1.2s infinite; }

/* Recorded session card: title row with actions, save bar, filter bar */
.session-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; min-height: 56px; border-bottom: 1px solid var(--md-outline-variant); }
.session-head h2 { margin: 0; }
.session-head .tools { margin-left: auto; gap: 4px; }
.session-head .tool { background: none; color: var(--md-primary); padding: 0 16px 0 12px; box-shadow: none; }
.session-head .tool:hover { background: var(--hover); }
.session-head .tool:disabled { background: none; }
.savebar, .filterbar, .listbar { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; padding: 8px 16px; font-size: 14px; background: var(--md-surface-low); border-bottom: 1px solid var(--md-outline-variant); }
.filterbar input:not([type="checkbox"]) { width: 200px; min-height: 36px; }
.filterbar details { position: relative; }
.filterbar details[open] > .stack { position: absolute; right: 0; top: 100%; z-index: 3; background: var(--md-surface-high); border-radius: var(--shape-sm); padding: 12px 16px; white-space: nowrap; box-shadow: var(--elev-2); }
.filterbar summary.hint { color: var(--md-primary); font-weight: 500; }

/* Live job controls */
.recbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.recbar .proxy { font-family: var(--mono); background: var(--md-surface-container); border-radius: var(--shape-xs); padding: 2px 6px; }
.pagebreak { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--md-outline-variant); }
.pagebreak input[type="text"] { flex: 1; min-width: 200px; }

/* Waterfall bar inside a table cell */
.wf { position: relative; height: 8px; min-width: 120px; margin-top: 6px; background: var(--md-surface-high); border-radius: 4px; overflow: hidden; }
.wf > span { position: absolute; top: 0; bottom: 0; background: var(--series-1); min-width: 2px; border-radius: 4px; }
.wf > span.err { background: var(--critical); }

/* Primary tabs: label with a rounded indicator under the active one */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button, .tabs a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: none; border-radius: 0; background: none;
  color: var(--md-on-surface-variant); font: 500 14px/20px var(--font); letter-spacing: .01em; text-decoration: none; cursor: pointer;
}
.tabs button:hover, .tabs a:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); text-decoration: none; }
.tabs button[aria-selected="true"], .tabs a[aria-current="page"] { color: var(--md-primary); }
.tabs button[aria-selected="true"]::after, .tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-primary); }

/* Key/value lists and code */
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; font-size: 14px; border: 1px solid var(--md-outline-variant); border-bottom: 0; border-radius: var(--shape-sm); overflow: hidden; }
dl.kv dt, dl.kv dd { padding: 6px 12px; border-bottom: 1px solid var(--md-outline-variant); }
dl.kv dt { background: var(--md-surface-low); font: 500 12px/20px var(--font); color: var(--md-on-surface-variant); }
dl.kv dd { margin: 0; font-family: var(--mono); font-size: 13px; word-break: break-all; }
pre.code { background: var(--md-surface-container); border-radius: var(--shape-sm); padding: 12px 16px; margin: 0; overflow: auto; max-height: 520px; white-space: pre-wrap; word-break: break-all; }
mark { background: var(--mark); color: inherit; border-radius: 2px; }
mark.encoded { background: var(--mark-encoded); }

/* Stat tiles: filled cards with a small caption and a large figure */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--md-surface-low); border-radius: var(--shape-md); padding: 12px 16px; }
.tile .label { font: 500 12px/16px var(--font); letter-spacing: .04em; color: var(--md-on-surface-variant); margin-bottom: 4px; }
.tile .value { font: 400 24px/32px var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tile .value small { font-size: 12px; color: var(--md-on-surface-variant); margin-left: 2px; }
.tile .sub { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }

/* Charts */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
.chart { background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md); padding: 0 16px 12px; position: relative; }
.chart-title { font: 500 14px/20px var(--font); margin: 0; padding: 14px 0 8px; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--md-on-surface-variant); margin-bottom: 4px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-legend i.box { height: 10px; width: 10px; border-radius: 2px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg text { fill: var(--md-on-surface-variant); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart svg .grid { stroke: var(--md-outline-variant); stroke-width: 1; }
.chart svg .axis { stroke: var(--md-outline); stroke-width: 1; }
.chart svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart svg .cross { stroke: var(--md-outline); stroke-width: 1; }
.chart svg .dot { stroke: var(--md-surface-lowest); stroke-width: 2; }
.chart svg .seg:hover, .chart svg .seg:focus { filter: brightness(1.15); outline: none; }
.chart .empty { color: var(--md-outline); font-size: 12px; padding: 32px 0; text-align: center; }
.tooltip { position: absolute; pointer-events: none; z-index: 5; background: var(--md-surface-high); color: var(--md-on-surface); border-radius: var(--shape-sm); box-shadow: var(--elev-2); padding: 8px 12px; font-size: 12px; min-width: 120px; }
.tooltip .tt-head { color: var(--md-on-surface-variant); margin-bottom: 4px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 8px; }
.tooltip .tt-row i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.tooltip .tt-row b { font-variant-numeric: tabular-nums; font-weight: 500; }
.tooltip .tt-row span { color: var(--md-on-surface-variant); }

/* Snackbars */
#toasts { position: fixed; bottom: 16px; left: calc(var(--rail) + 16px); display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: var(--shape-xs); padding: 14px 16px; font-size: 14px; min-width: 288px; max-width: 560px; box-shadow: var(--elev-3); animation: snack-in .2s ease-out; }
.toast.error { background: var(--md-error-container); color: var(--md-on-error-container); }
@keyframes snack-in { from { opacity: 0; transform: translateY(8px); } }

/* Dialogs: a modal <dialog> with a scrim */
dialog.md-dialog { border: 0; padding: 24px; border-radius: var(--shape-xl); background: var(--md-surface-high); color: var(--md-on-surface); box-shadow: var(--elev-3); min-width: 280px; max-width: min(560px, calc(100vw - 32px)); }
dialog.md-dialog::backdrop { background: var(--md-scrim); }
dialog.md-dialog h2 { font: 400 24px/32px var(--font); margin: 0 0 16px; letter-spacing: 0; }
dialog.md-dialog p { color: var(--md-on-surface-variant); white-space: pre-wrap; margin: 0 0 24px; }
dialog.md-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; }

details > summary { cursor: pointer; }
details.snapshot { border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm); padding: 8px 12px; margin-bottom: 8px; }
.empty-state { text-align: center; padding: 32px 16px; color: var(--md-on-surface-variant); }

/* Login: a card on the plain background */
.login { max-width: 480px; margin: 48px auto; background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md); padding: 24px; }
.login h2 { font: 400 22px/28px var(--font); margin-bottom: 16px; letter-spacing: 0; }
.login-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.login-box label { font-weight: 500; }
.login-box input { flex: 1; min-width: 180px; }
.login .sso { width: 100%; margin-bottom: 8px; }
.login .sso + h3 { margin-top: 24px; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .sticky { position: static; max-height: none; }
  .charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main"; padding-bottom: 80px; }
  .nav-rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 20; height: 80px;
    flex-direction: row; justify-content: space-around; align-items: flex-start; gap: 0; padding: 12px 8px 16px; overflow: visible;
    background: var(--md-surface-container);
  }
  .nav-item { flex: 1; width: auto; }
  .nav-label { max-width: none; }
  #toasts { left: 16px; right: 16px; bottom: 96px; }
  .toast { min-width: 0; }
  main { padding: 8px 16px 24px; }
  .app-bar { padding: 0 4px 0 16px; gap: 8px; }
  .brand-name, .masthead-sub, .theme-switch > span, .who-name { display: none; }
  .brand { padding-right: 0; }
  h1 { font-size: 20px; line-height: 28px; }
  .recband-break input { max-width: none; }
  .filterbar input:not([type="checkbox"]) { width: 100%; }
}