/* Company top bar → report header → summary strip → area breakdown + test list; a side panel opens per test */
/* Light only. Colors come from the company design tokens (vendor/os-tokens.css); "Passed" keeps a green,
   since the company palette uses blue for success and blue already means links and buttons here. */
:root {
  --bg: var(--surface-secondary);
  --surface: var(--surface-primary);
  --surface-2: var(--surface-primary-alt);
  --fg: var(--text-primary);
  --heading: var(--secondary);
  --muted: var(--text-secondary);
  --line: var(--neutral-200);
  --accent: var(--secondary);
  --accent-soft: var(--brand-50);
  --brand-cyan: var(--brand-400);
  --brand-blue: var(--secondary);
  --pass: #2e7d32;                        --pass-bg: #e8f5e9;
  --fail: var(--functional-red-600);      --fail-bg: var(--functional-red-100);
  --error: var(--functional-orange-600);  --error-bg: var(--functional-orange-100);
  --skip: var(--neutral-500);             --skip-bg: var(--neutral-100);
  --code-bg: var(--neutral-50);
  --shadow: 0 10px 40px rgba(13, 60, 97, .14);
  --fresh-strong: var(--brand-100);
  --fresh-weak: var(--brand-50);
  --spinner-track: var(--brand-100);
  --chip-tint: #fff;
  --chip-ink: #000;
  --font-ui: var(--font-family-base, "Lato"), "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
/* Dark: the company dark palette (vendor/os-tokens.css) switches surfaces, text and borders on the same
   [data-theme="dark"] attribute; these are the colors the reports add on top of it. */
:root[data-theme="dark"] {
  --line: var(--neutral-700);
  --heading: var(--brand-200);
  --accent: var(--brand-400);
  --accent-soft: var(--brand-900);
  --brand-blue: var(--brand-400);
  --pass: #81c784;                        --pass-bg: #1b3a20;
  --fail: var(--functional-red-400);      --fail-bg: var(--functional-red-900);
  --error: var(--functional-orange-400);  --error-bg: var(--functional-orange-900);
  --skip: var(--neutral-400);             --skip-bg: var(--neutral-750);
  --code-bg: var(--neutral-900);
  --shadow: 0 10px 40px rgba(0, 0, 0, .55);
  --fresh-strong: #1f4468;
  --fresh-weak: #173450;
  --spinner-track: var(--brand-800);
  --chip-tint: transparent;
  --chip-ink: #fff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 20px 48px; display: grid; gap: 20px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }

.proto { background: var(--accent-soft); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.proto b { font-weight: 600; }

header.report { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; color: var(--muted); font-weight: 600; }
h1 { font-size: var(--text-size-title, 24px); line-height: var(--text-line-height-title, 32px); margin: 4px 0 8px; font-weight: 700; text-wrap: balance; color: var(--heading); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; }
.meta span b { color: var(--fg); font-weight: 600; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.summary { padding: 18px 20px; display: grid; gap: 14px; }
.summary-top { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; }
.total { display: grid; }
.total .big { font-size: 40px; font-weight: 650; line-height: 1; }
.total small { color: var(--muted); }
.counts { display: flex; flex-wrap: wrap; gap: 10px; }
.count { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; min-width: 116px; display: grid; gap: 2px; background: var(--surface); cursor: pointer; text-align: left; }
.count[aria-pressed="true"] { border-color: var(--fg); }
.count .label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.count .v { font-size: 20px; font-weight: 650; }
.count .v small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.bar i { display: block; height: 100%; }
.c-PASSED { background: var(--pass); } .c-FAILED { background: var(--fail); } .c-ERROR { background: var(--error); } .c-WAIVED { background: var(--skip); }

.grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.areas { padding: 14px 0 6px; }
.areas h2, .list-head h2 { font-size: 14px; margin: 0; font-weight: 600; }
.areas h2 { padding: 0 16px 8px; }
.area { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 16px; cursor: pointer; text-align: left; border-top: 1px solid var(--line); }
.area:hover { background: var(--surface-2); }
.area[aria-pressed="true"] { background: var(--accent-soft); }
.area .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.area .pct { color: var(--muted); font-size: 12.5px; }
.area .bar { grid-column: 1 / -1; height: 6px; }

.list { min-width: 0; }
.list-head { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.search { flex: 1 1 260px; max-width: 420px; position: relative; }
.search input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); align-items: center; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; background: var(--surface-2); cursor: pointer; color: var(--fg); }

.rows { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; background: var(--surface-2); border-bottom: 2px solid var(--line); white-space: nowrap; }
td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr[aria-selected="true"] td { background: var(--accent-soft); }
.tname { font-weight: 550; }
.tpath { color: var(--muted); font-size: 12px; font-family: var(--font-mono); word-break: break-all; }
.reason { color: var(--muted); font-size: 13px; max-width: 360px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-PASSED { color: var(--pass); background: var(--pass-bg); }
.p-FAILED { color: var(--fail); background: var(--fail-bg); }
.p-ERROR { color: var(--error); background: var(--error-bg); }
.p-WAIVED { color: var(--skip); background: var(--skip-bg); }
.p-PENDING { color: var(--muted); background: var(--surface-2); }
.c-PENDING { background: var(--line); }
.pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; color: var(--muted); font-size: 13px; }
.pager .pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pager button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; min-width: 32px; padding: 4px 8px; cursor: pointer; }
.pager button[aria-current="page"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.pager button:disabled { opacity: .45; cursor: default; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* Side panel */
.scrim { position: fixed; inset: 0; background: rgba(10, 14, 20, .35); }
aside.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.d-head { padding: 16px 20px 0; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.d-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.d-title { font-size: 18px; font-weight: 650; margin: 0; text-wrap: balance; }
.icon-btn { border: 1px solid var(--surface-brand); background: var(--surface); color: var(--text-brand); border-radius: var(--radius, 8px); padding: 4px 8px; font-size: 14px; line-height: 16px; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease; }
.icon-btn:hover:not(:disabled) { background: var(--surface-info); }
.d-path { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; }
.tabs { display: flex; gap: 4px; }
.tabs button { border: 0; background: transparent; padding: 10px 12px; cursor: pointer; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.d-body { padding: 18px 20px 28px; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.desc { white-space: pre-wrap; line-height: 1.6; max-width: 68ch; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.failure { border: 1px solid var(--line); border-left: 4px solid var(--fail); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; background: var(--fail-bg); }
.failure.err { border-left-color: var(--error); background: var(--error-bg); }
.failure.skip { border-left-color: var(--skip); background: var(--skip-bg); }
.failure h3 { margin: 0; font-size: 14px; }
.failure .msg { font-size: 15px; font-weight: 600; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin: 0; }
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
ol.steps li { counter-increment: step; }
details.step { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
details.step summary { list-style: none; cursor: pointer; padding: 8px 12px; display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
details.step summary::-webkit-details-marker { display: none; }
details.step summary::before { content: counter(step); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.method { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--accent); }
.endpoint { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
pre.code { margin: 0; background: var(--code-bg); border-top: 1px solid var(--line); padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }
details.raw > summary { cursor: pointer; color: var(--accent); font-weight: 550; }
details.raw pre.code { border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; }
.note { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; }
.mask { background: var(--surface-2); border-radius: 4px; padding: 0 4px; color: var(--muted); }
.ok-box { border: 1px solid var(--line); border-left: 4px solid var(--pass); border-radius: 8px; padding: 12px 14px; background: var(--pass-bg); }
.head-main { min-width: 0; }
.meta a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.version { display: inline-flex; align-items: baseline; gap: 8px; }
.version .tag { line-height: 18px; align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
button.primary { background: var(--surface-brand); color: var(--text-light); border: 0; border-radius: var(--radius, 8px); padding: 6px 12px; font-size: 14px; line-height: 20px; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease; }
button.primary:hover:not(:disabled) { background: var(--surface-brand-hover); }
.modal { position: fixed; inset: 0; background: rgba(10, 14, 20, .45); display: grid; place-items: center; padding: 16px; }
.modal-card { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); width: min(720px, 100%); max-height: calc(100% - 32px); overflow-y: auto; padding: 18px 20px; display: grid; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label, .label-like { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field input, .field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; resize: vertical; }
.email-preview { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: #ffffff; color: #1d2733; font-size: 13.5px; max-height: 320px; overflow-y: auto; }
.email-preview a { color: #2c5bd6; }
.email-preview table { border-collapse: collapse; margin: 8px 0; }
.email-preview td { border: 0; padding: 2px 14px 2px 0; }
.email-preview h4 { margin: 12px 0 4px; font-size: 13.5px; }
.email-preview ul { margin: 0 0 6px; padding-left: 18px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.note-inline { margin-right: auto; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  h1 { font-size: 21px; }
  th.col-area, td.col-area, th.col-reason, td.col-reason { display: none; }
  .count { min-width: calc(50% - 5px); }
}
@media (prefers-reduced-motion: no-preference) { aside.drawer { animation: slide .16s ease-out; } @keyframes slide { from { transform: translateX(24px); opacity: .6; } } }

/* Index page */
.runs td, .runs th { white-space: nowrap; }
.runs td.url { white-space: normal; overflow-wrap: anywhere; min-width: 220px; }
.runs a.run-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.runs a.run-link:hover { text-decoration: underline; }
.mini-bar { width: 120px; }
.state { font-size: 12px; font-weight: 600; color: var(--muted); }
.state.live { color: var(--accent); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar a { color: var(--accent); text-decoration: none; font-weight: 600; }
.loading { color: var(--muted); padding: 8px 0; }
.error-box { border: 1px solid var(--line); border-left: 4px solid var(--fail); border-radius: 8px; padding: 10px 12px; background: var(--fail-bg); }
.note-inline.err { color: var(--fail); }
.note-inline.ok { color: var(--pass); }

/* Brand bar */
.brandbar { background: var(--gradient-blue); color: #fff; }
.brandbar-inner { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 8px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img.mark { width: 28px; height: 28px; }
.brand img.word { height: 18px; width: auto; }
.brand .product { color: rgb(255 255 255 / 85%); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-left: 1px solid rgb(255 255 255 / 35%); padding-left: 10px; }
.brandbar nav a { color: #fff; font-weight: 700; text-decoration: none; }
.brandbar nav a:hover { text-decoration: underline; }
.d-title { color: var(--heading); }

/* Executions of one test under the full log */
.exec-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.exec-tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; display: grid; text-align: left; font-weight: 600; color: var(--heading); }
.exec-tabs button small { font-weight: 500; color: var(--muted); font-size: 12px; }
.exec-tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }
.exec-actions { display: flex; gap: 12px; align-items: center; margin: 8px 0; }

/* Full-screen log viewer */
.logview { position: fixed; inset: 0; background: var(--surface); display: flex; flex-direction: column; z-index: 20; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.lv-head { padding: 14px 20px 10px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; }
.lv-titles { display: grid; gap: 2px; min-width: 0; }
.lv-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lv-wrap { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
.lv-head .exec-tabs { grid-column: 1 / -1; margin: 0; }
.lv-text { flex: 1; margin: 0; overflow: auto; padding: 16px 20px 32px; background: var(--code-bg); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; tab-size: 4; }
.lv-text.nowrap { white-space: pre; word-break: normal; }
.exec-actions .copy + .copy { border-left: 1px solid var(--line); padding-left: 12px; }
@media (max-width: 640px) { .lv-head { grid-template-columns: minmax(0, 1fr); } .lv-actions { justify-content: flex-start; } }

/* Execution history of a test */
.hist-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.hist-strip a { width: 14px; height: 22px; border-radius: 3px; display: block; }
.hist-strip a.here { outline: 2px solid var(--heading); outline-offset: 1px; }
table.hist td { padding: 8px 10px; }
table.hist th { padding: 6px 10px; }
table.hist tr.here td { background: var(--accent-soft); }
table.hist a { color: var(--accent); text-decoration: none; font-weight: 600; }
.failure a, .ok-box a { color: var(--accent); font-weight: 600; }
.d-body .tag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }

/* Kiwi login status in the top bar */
.topnav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.account { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.account .muted { color: rgb(255 255 255 / 80%); }
.account b { color: #fff; }

/* Live updates: what just changed */
.fresh-note { color: var(--accent); font-weight: 700; }
tbody tr.fresh td { background: var(--fresh-weak); }
tbody tr.fresh td:first-child { box-shadow: inset 3px 0 0 var(--surface-brand); }
@media (prefers-reduced-motion: no-preference) {
  tbody tr.fresh td { animation: fresh-fade 10s linear forwards; animation-delay: var(--fresh-elapsed, 0ms); }
  tbody tr.fresh td:first-child { animation-name: fresh-fade, fresh-edge; }
  .count.bump { animation: bump 1.2s ease-out; }
  @keyframes fresh-fade { from { background: var(--fresh-strong); } 60% { background: var(--fresh-weak); } to { background: transparent; } }
  @keyframes fresh-edge { from { box-shadow: inset 3px 0 0 var(--surface-brand); } 70% { box-shadow: inset 3px 0 0 var(--surface-brand); } to { box-shadow: inset 3px 0 0 transparent; } }
  @keyframes bump { 0% { box-shadow: 0 0 0 0 rgb(33 150 243 / 45%); } 100% { box-shadow: 0 0 0 10px rgb(33 150 243 / 0%); } }
}
/* Run types */
.type-chip { --chip: var(--neutral-400); background: color-mix(in srgb, var(--chip) 12%, var(--chip-tint)); color: color-mix(in srgb, var(--chip) 65%, var(--chip-ink)); border-color: color-mix(in srgb, var(--chip) 35%, var(--chip-tint)); display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.type-chip[data-type="NRT v5"] { --chip: var(--tab-group-color-blue); }
.type-chip[data-type="NRT v6"] { --chip: var(--tab-group-color-indigo); }
.type-chip[data-type="Migration"] { --chip: var(--tab-group-color-lime); }
.type-chip[data-type="Hybrid"] { --chip: var(--tab-group-color-purple); }
.type-chip[data-type="Release service"] { --chip: var(--tab-group-color-pink); }
.type-chip[data-type="Smoke tests"] { --chip: var(--tab-group-color-yellow); }
.type-chip[data-type="Other"] { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.type-chip.manual::after { content: " · set by admin"; font-weight: 500; opacity: .75; }
.index-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.field-inline { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.field-inline select, .type-edit select, .type-edit input[type=text] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-weight: 500; }
.version .tag.edited { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.type-edit { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; font-size: 13px; }
.type-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Progress of a run in progress: one bar, results so far against the expected total */
.progress-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: -6px; }
.progress-line b { color: var(--heading); }
.progress-line .pct { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--spinner-track); border-top-color: var(--surface-brand); display: inline-block; }
#bar { height: 12px; box-shadow: inset 0 0 0 1px var(--line); }
#bar .fill { display: flex; height: 100%; position: relative; overflow: hidden; border-radius: 6px; }
#bar .fill i { height: 100%; }
#bar.live .fill::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 55%) 50%, transparent 80%);
  background-size: 50% 100%; background-repeat: no-repeat; background-position: -60% 0; }
@media (prefers-reduced-motion: no-preference) {
  #bar .fill { transition: width .6s ease; }
  #bar.live .fill::after { animation: bar-shine 1.8s ease-in-out infinite; }
  .spinner { animation: spin .8s linear infinite; }
  @keyframes bar-shine { from { background-position: -60% 0; } to { background-position: 160% 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
}
:root[data-theme="dark"] .type-chip { background: color-mix(in srgb, var(--chip) 22%, transparent); }
:root[data-theme="dark"] .version .tag, :root[data-theme="dark"] .d-body .tag { background: var(--surface-tertiary); }

/* Theme switcher in the top bar */
.theme-switch { position: relative; }
.theme-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgb(255 255 255 / 35%); color: #fff; border-radius: var(--radius, 8px); padding: 3px 8px; font-size: 13px; cursor: pointer; }
.theme-btn:hover { background: rgb(255 255 255 / 12%); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius, 8px); box-shadow: var(--shadow); padding: 4px; display: grid; min-width: 150px; z-index: 30; }
.theme-menu button { background: transparent; border: 0; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.theme-menu button:hover { background: var(--surface-2); }
.theme-menu button[aria-checked="true"] { color: var(--accent); font-weight: 700; }
.theme-menu button[aria-checked="true"]::after { content: "✓"; }

/* Admin controls in the test panel */
.admin-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius, 8px); background: var(--surface-2); font-size: 13px; }
.admin-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.admin-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy.danger-link { color: var(--fail); }
button.primary.danger { background: var(--functional-red-500); }
button.primary.danger:hover:not(:disabled) { background: var(--functional-red-600); }

/* Bulk edit (staff) */
.col-check { display: none; width: 36px; padding-right: 0 !important; }
table.selecting .col-check { display: table-cell; }
.col-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--surface-brand); }
.select-banner { padding: 8px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bulk-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: calc(100% - 32px);
  background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 16px; font-size: 14px; }

/* Terminal colors in logs: a palette readable on light, and on dark (below) */
.ansi { --a0: #1e293b; --a1: #c62828; --a2: #2e7d32; --a3: #9a6700; --a4: #1565c0; --a5: #8e24aa; --a6: #00838f; --a7: #64748b;
  --a8: #475569; --a9: #e53935; --a10: #43a047; --a11: #b7791f; --a12: #1e88e5; --a13: #ab47bc; --a14: #0097a7; --a15: #334155; }
:root[data-theme="dark"] .ansi { --a0: #94a3b8; --a1: #f87171; --a2: #81c784; --a3: #fbbf24; --a4: #60a5fa; --a5: #d8b4fe; --a6: #5eead4; --a7: #cbd5e1;
  --a8: #94a3b8; --a9: #fca5a5; --a10: #a7f3d0; --a11: #fde68a; --a12: #93c5fd; --a13: #f0abfc; --a14: #99f6e4; --a15: #f8fafc; }
.ansi .ansi-fg0 { color: var(--a0); }
.ansi .ansi-bg0 { background: color-mix(in srgb, var(--a0) 22%, transparent); }
.ansi .ansi-fg1 { color: var(--a1); }
.ansi .ansi-bg1 { background: color-mix(in srgb, var(--a1) 22%, transparent); }
.ansi .ansi-fg2 { color: var(--a2); }
.ansi .ansi-bg2 { background: color-mix(in srgb, var(--a2) 22%, transparent); }
.ansi .ansi-fg3 { color: var(--a3); }
.ansi .ansi-bg3 { background: color-mix(in srgb, var(--a3) 22%, transparent); }
.ansi .ansi-fg4 { color: var(--a4); }
.ansi .ansi-bg4 { background: color-mix(in srgb, var(--a4) 22%, transparent); }
.ansi .ansi-fg5 { color: var(--a5); }
.ansi .ansi-bg5 { background: color-mix(in srgb, var(--a5) 22%, transparent); }
.ansi .ansi-fg6 { color: var(--a6); }
.ansi .ansi-bg6 { background: color-mix(in srgb, var(--a6) 22%, transparent); }
.ansi .ansi-fg7 { color: var(--a7); }
.ansi .ansi-bg7 { background: color-mix(in srgb, var(--a7) 22%, transparent); }
.ansi .ansi-fg8 { color: var(--a8); }
.ansi .ansi-bg8 { background: color-mix(in srgb, var(--a8) 22%, transparent); }
.ansi .ansi-fg9 { color: var(--a9); }
.ansi .ansi-bg9 { background: color-mix(in srgb, var(--a9) 22%, transparent); }
.ansi .ansi-fg10 { color: var(--a10); }
.ansi .ansi-bg10 { background: color-mix(in srgb, var(--a10) 22%, transparent); }
.ansi .ansi-fg11 { color: var(--a11); }
.ansi .ansi-bg11 { background: color-mix(in srgb, var(--a11) 22%, transparent); }
.ansi .ansi-fg12 { color: var(--a12); }
.ansi .ansi-bg12 { background: color-mix(in srgb, var(--a12) 22%, transparent); }
.ansi .ansi-fg13 { color: var(--a13); }
.ansi .ansi-bg13 { background: color-mix(in srgb, var(--a13) 22%, transparent); }
.ansi .ansi-fg14 { color: var(--a14); }
.ansi .ansi-bg14 { background: color-mix(in srgb, var(--a14) 22%, transparent); }
.ansi .ansi-fg15 { color: var(--a15); }
.ansi .ansi-bg15 { background: color-mix(in srgb, var(--a15) 22%, transparent); }
.ansi .ansi-bold { font-weight: 700; }
.ansi .ansi-dim { opacity: .7; }
.ansi .ansi-italic { font-style: italic; }
.ansi .ansi-underline { text-decoration: underline; }

/* Response of each request in "Requests sent" */
.status-badge { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.status-badge.ok { color: var(--pass); background: var(--pass-bg); }
.status-badge.redirect { color: var(--skip); background: var(--skip-bg); }
.status-badge.bad { color: var(--fail); background: var(--fail-bg); }
.step-part { padding: 6px 12px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); }

/* Home page: the QA tools as big buttons */
.home { max-width: 980px; padding-block: 40px 64px; gap: 28px; }
.home-head h1 { font-size: 30px; line-height: 38px; margin: 4px 0 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 26px 24px; min-height: 180px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--fg); text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tile:hover, .tile:focus-visible { border-color: var(--surface-brand); box-shadow: var(--shadow); }
.tile-icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tile-icon svg { width: 30px; height: 30px; }
.tile-body { display: grid; gap: 8px; min-width: 0; }
.tile-title { font-size: 20px; font-weight: 700; color: var(--heading); }
.tile-text { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.tile-latest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.tile-latest b { color: var(--fg); }
.tile-go { font-size: 22px; color: var(--accent); align-self: center; }
@media (prefers-reduced-motion: no-preference) { .tile:hover { transform: translateY(-2px); } }

/* Performance pages (template) */
.perf-chart-panel { padding-bottom: 12px; }
.perf-chart { padding: 8px 16px 0; }
.perf-chart svg { width: 100%; height: auto; display: block; }
.perf-chart .grid { stroke: var(--line); stroke-width: 1; }
.perf-chart .axis { fill: var(--muted); font-size: 12px; font-family: var(--font-ui); }
.perf-chart .series { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.perf-chart .s0 { stroke: var(--surface-brand); } .perf-chart .s1 { stroke: var(--functional-orange-500); }
.perf-chart .s2 { stroke: var(--pass); } .perf-chart .s3 { stroke: var(--tab-group-color-purple); }
.perf-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding-bottom: 6px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.swatch.s0 { background: var(--surface-brand); } .swatch.s1 { background: var(--functional-orange-500); }
.swatch.s2 { background: var(--pass); } .swatch.s3 { background: var(--tab-group-color-purple); }
.perf-table th[data-sort] { cursor: pointer; }
.perf-table th[aria-sort="ascending"]::after { content: " ▲"; }
.perf-table th[aria-sort="descending"]::after { content: " ▼"; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* ---- Launch tests page ---- */
.launch h2 { font-size: 17px; margin: 0 0 12px; color: var(--heading); }
.launch-locked, .launch-form-panel { padding: 20px 22px; }
.launch-warning { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 10px; border: 2px solid var(--fail);
  background: var(--fail-bg); color: var(--fg); font-size: 15px; line-height: 1.55; }
.launch-warning svg { flex: none; width: 30px; height: 30px; color: var(--fail); }
.launch-warning b { color: var(--fail); }
.vm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.vm-card { padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.vm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vm-name { font-size: 16px; font-weight: 700; color: var(--heading); }
.vm-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.vm-busy { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.vm-busy:empty { display: none; }
.vm-state { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vm-state.free { color: var(--pass); background: var(--pass-bg); }
.vm-state.busy { color: var(--fail); background: var(--fail-bg); }
.vm-state.checking { color: var(--skip); background: var(--skip-bg); }
.pill-status { font-family: var(--font-mono); font-size: 12px; }
#launch-form { display: grid; gap: 16px; max-width: 640px; }
#launch-form .field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; font-size: 14px; }
#launch-form .field > span, #launch-form legend { font-weight: 700; color: var(--fg); padding: 0; margin-bottom: 6px; }
#launch-form .field small { font-weight: 400; color: var(--muted); }
#launch-form .field.disabled { opacity: .55; }
#launch-form input[type=text], #launch-form select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; max-width: 320px; }
#launch-form input[type=text]:focus-visible, #launch-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.target { font-size: 14px; }
.confirm-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--fail); border-radius: 8px; font-size: 14px; cursor: pointer; }
.confirm-check input { margin-top: 3px; }
.launch .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#launch-btn:disabled { opacity: .5; cursor: not-allowed; }
.launch-hint { font-size: 13px; color: var(--muted); }
.launch-error { margin: 0; color: var(--fail); font-size: 14px; font-weight: 600; }
.launch-done { margin: 0; font-size: 14px; color: var(--pass); font-weight: 600; }
.list-title { padding: 16px 16px 0; }
.launch-table td { white-space: nowrap; }
.url-intro { margin: -4px 0 16px; color: var(--muted); font-size: 14px; max-width: 70ch; }
#url-form { display: grid; gap: 16px; max-width: 640px; }
#url-form .field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; font-size: 14px; }
#url-form .field > span, #url-form legend { font-weight: 700; color: var(--fg); padding: 0; }
#url-form .field small { font-weight: 400; color: var(--muted); }
#url-form input, #url-form select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; max-width: 420px; }
#url-form input:focus-visible, #url-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#url-form .creds { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
#url-form .creds .note-inline { margin: 0; max-width: 60ch; }
#url-form .sub-field { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; max-width: 420px; }
#url-form .sub-field span { color: var(--muted); }
#url-btn:disabled { opacity: .5; cursor: not-allowed; }
/* what the test repository holds, and what a run may leave out */
#url-form .tests-help { display: block; }  /* a details is not a grid: the summary must stay on its line */
.tests-help { font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.tests-help summary { cursor: pointer; font-weight: 700; color: var(--fg); }
.tests-help summary small { font-weight: 400; color: var(--muted); }
.tests-help-body { display: grid; gap: 10px; margin-top: 12px; max-height: 320px; overflow: auto; }
.tests-help-body .note-inline { margin: 0; }
.dir-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.dir-count { color: var(--muted); font-size: 12px; }
button.dir { font: inherit; font-size: 13px; font-family: var(--font-mono); color: var(--accent); background: none;
  border: 0; padding: 0; cursor: pointer; text-align: left; }
button.dir:hover { text-decoration: underline; }
button.dir.sub { color: var(--fg); background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; }
button.dir.sub span { color: var(--muted); margin-left: 4px; }
.dir-kids { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 14px; }
#url-form .skip-box { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
#url-form .skip-box .note-inline { margin: 0; max-width: 70ch; }
.skip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skip-list:empty { display: none; }
.choice.skip { padding: 5px 10px; font-size: 13px; gap: 6px; }
.choice.skip.file { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.choice.skip.file:has(input:checked) { color: var(--fg); }
#url-form .sub-field.wide { grid-template-columns: 90px minmax(0, 1fr); max-width: 520px; }
#skip-summary { font-weight: 600; }
#skip-summary.warn { color: var(--skip); }
.skip-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--skip-bg); color: var(--skip);
  font-size: 11.5px; font-weight: 700; }
.launch-table td .url { overflow-wrap: anywhere; white-space: normal; }
.job-picker { padding: 18px 22px; display: grid; gap: 10px; }
.job-picker .field { display: grid; gap: 6px; font-size: 14px; }
.job-picker .field > span { font-weight: 700; color: var(--fg); }
.job-picker select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; max-width: 520px; }
.job-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.job-hint { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 75ch; }
#job-vm, #job-url { display: grid; gap: 20px; }
.log-box { padding: 14px 16px; display: grid; gap: 10px; }
.log-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.log-title { font-weight: 700; color: var(--heading); }
.log-state { font-size: 12.5px; color: var(--muted); }
.log-spacer { flex: 1 1 auto; }
.log-text { margin: 0; max-height: 460px; overflow: auto; background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.log-text.err { color: var(--fail); }
.log-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.log-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.launch-table td button.copy { font-size: 12px; }