/* sr-admin stylesheet
   One file. No inline styles anywhere (CSP). Per-item widths and heights
   come from the .p-0 ... .p-100 classes at the end of this file. */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* surfaces and ink: a cool, slightly green grey, like instrument paper */
  --bg: #edf0ec;
  --surface: #fbfcfa;
  --surface-2: #f2f5f1;
  --ink: #18201c;
  --ink-2: #44504a;
  --muted: #66726c;
  --line: #d6ddd7;
  --line-strong: #b4beb8;

  /* one accent: petrol. Links, current nav, normal meter fill, running state */
  --accent: #0d5869;
  --accent-hover: #0a4755;
  --accent-ink: #ffffff;
  --accent-soft: #dbeaed;

  /* status: reserved, never used for brands */
  --ok: #1f7444;
  --ok-fill: #2e8f58;
  --ok-soft: #dcefe2;
  --warn: #8f5500;
  --warn-fill: #c98100;
  --warn-soft: #f7e8cc;
  --danger: #ae2a1f;
  --danger-fill: #cf3a2c;
  --danger-soft: #f8dfdb;
  --never: #8b9690;

  /* brands, fixed order (validated categorical set, light surface) */
  --brand-1: #2a78d6; /* admos */
  --brand-2: #eb6834; /* muhadyan */
  --brand-3: #1baf7a; /* ringkasaja */
  --brand-4: #4a3aa7; /* ummualfatih */
  --brand-other: #b4beb8;

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-base: 0.875rem;/* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.25rem;   /* 20 */
  --fs-xl: 1.75rem;   /* 28 */

  /* space (4px steps) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* radius by hierarchy: marks < controls < panels */
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;

  --gutter: 16px;
  --max: 1200px;
  --topbar-h: 52px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press: 160ms;
  --t-color: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131916;
    --surface: #1a211e;
    --surface-2: #212925;
    --ink: #e2e8e4;
    --ink-2: #b7c2bc;
    --muted: #8e9b94;
    --line: #2c3530;
    --line-strong: #44504a;

    --accent: #62b6c9;
    --accent-hover: #80c6d6;
    --accent-ink: #0b1b1f;
    --accent-soft: #183740;

    --ok: #6acb94;
    --ok-fill: #3fa86c;
    --ok-soft: #173525;
    --warn: #e8ad4a;
    --warn-fill: #d99420;
    --warn-soft: #3b2d13;
    --danger: #f3857a;
    --danger-fill: #e0574a;
    --danger-soft: #401c18;
    --never: #6c7872;

    --brand-1: #3987e5;
    --brand-2: #d95926;
    --brand-3: #199e70;
    --brand-4: #9085e9;
    --brand-other: #44504a;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 112px; /* anchors land below the sticky top bar */
}

@media (min-width: 720px) {
  html {
    scroll-padding-top: 72px;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9375rem; /* 15 on phone */
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 720px) {
  body {
    font-size: var(--fs-base);
  }
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
pre {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

code,
pre,
kbd {
  font-family: var(--mono);
}

hr,
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s7) 0;
}

/* ---------- Utilities ---------- */

.muted {
  color: var(--muted);
}

.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.note {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Top bar and nav ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand end"
    "nav nav";
  align-items: center;
  column-gap: var(--s4);
}

.wordmark {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  align-self: center;
  padding-top: var(--s2);
  font-weight: 650;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wordmark a {
  color: inherit;
}

.asof {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.topbar-end {
  grid-area: end;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s2);
}

.nav {
  grid-area: nav;
  display: flex;
  gap: var(--s1);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-color) ease;
}

.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    color: var(--ink);
    text-decoration: none;
  }
}

.nav-count {
  margin-left: var(--s1);
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 600;
}

@media (min-width: 720px) {
  .topbar-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav end";
    min-height: var(--topbar-h);
  }

  .wordmark,
  .topbar-end {
    padding-top: 0;
  }

  .nav {
    margin: 0;
    padding: 0;
    align-self: stretch;
  }

  .nav a {
    min-height: var(--topbar-h);
  }
}

/* ---------- Page layout ---------- */

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s7);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

@media (min-width: 720px) {
  :root {
    --gutter: 24px;
  }

  .page {
    padding-top: var(--s6);
  }
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
}

.page-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

@media (min-width: 720px) {
  .page-title {
    font-size: 1.5rem;
  }
}

.page-sub {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.back {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: var(--fs-sm);
}

.section {
  margin-top: var(--s6);
}

.section:first-child {
  margin-top: 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  margin-bottom: var(--s3);
}

.section-title {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.section-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.grid-2 {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Panel ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-width: 0;
}

.panel-body {
  padding: var(--s4);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.panel-foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Stat tiles: one panel split by hairlines ---------- */

.tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tile {
  background: var(--surface);
  padding: var(--s3) var(--s4);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s3);
}

.tile-value {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.tile-label {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.tile-value {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tile-note {
  font-size: var(--fs-xs);
  color: var(--muted);
}

@media (min-width: 560px) {
  .tiles {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
  }

  .tile {
    display: block;
    padding: var(--s4);
  }

  .tile-value {
    grid-column: auto;
    grid-row: auto;
  }

  .tile-value {
    margin-top: var(--s1);
    font-size: var(--fs-xl);
  }

  .tile-note {
    margin-top: var(--s1);
  }
}

/* ---------- Quota meter (the one loud element) ---------- */

.quota + .quota {
  margin-top: var(--s5);
}

.quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.quota-name {
  font-weight: 600;
}

.quota-value {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.quota-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* track carries the warn (75) and danger (90) zones; ticks mark the edges */
.meter {
  position: relative;
  height: 14px;
  border-radius: var(--r-sm);
  background:
    linear-gradient(
      to right,
      var(--surface-2) 0 75%,
      var(--warn-soft) 75% 90%,
      var(--danger-soft) 90% 100%
    );
  box-shadow: inset 0 0 0 1px var(--line);
}

.meter::before,
.meter::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--line-strong);
  z-index: 1;
}

.meter::before {
  left: 75%;
}

.meter::after {
  left: 90%;
}

.meter-fill {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  max-width: 100%;
  border-radius: var(--r-sm);
  background: var(--accent);
}

.quota.is-warn .meter-fill {
  background: var(--warn-fill);
}

.quota.is-warn .quota-value {
  color: var(--warn);
}

.quota.is-danger .meter-fill {
  background: var(--danger-fill);
}

.quota.is-danger .quota-value {
  color: var(--danger);
}

/* ---------- Brand share (stacked bar + legend) ---------- */

.share-title {
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.share {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-top: 6px;
}

.share-seg {
  flex: var(--pct, 0) 1 0;
  min-width: 2px;
  background: var(--brand, var(--brand-other));
}

.share-seg:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.share-seg:last-child {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-item::before,
.swatch {
  content: "";
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand, var(--brand-other));
}

.legend-value {
  color: var(--ink);
  font-weight: 500;
}

.brand-1 { --brand: var(--brand-1); }
.brand-2 { --brand: var(--brand-2); }
.brand-3 { --brand: var(--brand-3); }
.brand-4 { --brand: var(--brand-4); }
.brand-other { --brand: var(--brand-other); }

.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ---------- Inline bar (relative cost in a table cell) ---------- */

.bar {
  display: block;
  min-width: 64px;
  height: 6px;
  border-radius: 2px;
  background: var(--surface-2);
}

.bar::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  border-radius: 2px;
  background: var(--brand, var(--accent));
}

/* ---------- Sparkline (cost by day) ---------- */

.spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 72px;
  border-bottom: 1px solid var(--line-strong);
}

.spark-bar {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--pct, 0) * 1%);
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  opacity: 0.55;
  transition: opacity var(--t-color) ease;
}

.spark-bar.is-today {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .spark-bar:hover {
    opacity: 1;
  }
}

.spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.table th,
.table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
}

.table th {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-bottom-color: var(--line-strong);
}

.table th.num,
.table td.num {
  text-align: right;
}

.table th:first-child,
.table td:first-child {
  padding-left: var(--s4);
}

.table th:last-child,
.table td:last-child {
  padding-right: var(--s4);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tfoot td {
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  font-weight: 600;
}

.table tr.is-error td {
  background: var(--danger-soft);
}

@media (hover: hover) and (pointer: fine) {
  .table tbody tr:hover td {
    background: var(--surface-2);
  }

  .table tbody tr.is-error:hover td {
    background: var(--danger-soft);
  }
}

.cell-bar {
  width: 30%;
  min-width: 80px;
}

.cell-preview {
  min-width: 16rem;
  max-width: 32rem;
}

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------- Facts (key/value summary) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s4);
}

.facts dt {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.facts dd {
  margin-top: 2px;
  font-weight: 600;
}

/* ---------- Status dot + label ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-weight: 500;
}

.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--never);
}

.status.is-ok::before {
  background: var(--ok-fill);
}

/* failed is a square, so it reads without colour */
.status.is-failed {
  color: var(--danger);
}

.status.is-failed::before {
  border-radius: 1px;
  background: var(--danger-fill);
}

.status.is-running {
  color: var(--accent);
}

.status.is-running::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* never ran: hollow ring */
.status.is-never {
  color: var(--muted);
}

.status.is-never::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--never);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.badge.is-ok {
  background: var(--ok-soft);
  box-shadow: none;
  color: var(--ok);
}

.badge.is-warn {
  background: var(--warn-soft);
  box-shadow: none;
  color: var(--warn);
}

.badge.is-danger {
  background: var(--danger-soft);
  box-shadow: none;
  color: var(--danger);
}

.badge.is-accent {
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent);
}

.badge.is-muted {
  background: transparent;
  color: var(--muted);
}

/* ---------- Simple lists (failing jobs, stopped brands) ---------- */

.list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
}

.list > li:first-child {
  border-top: 0;
}

.list-main {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}

.list-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Jobs (details rows) ---------- */

.jobs-head,
.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "unit status"
    "last next";
  gap: 2px var(--s3);
  padding: var(--s3) 40px var(--s3) var(--s4);
}

.jobs-head {
  display: none;
}

.jobs-group-title {
  padding: var(--s4) var(--s4) var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.job {
  border-bottom: 1px solid var(--line);
}

.jobs-group:last-child .job:last-child {
  border-bottom: 0;
}

.job-row {
  position: relative;
  cursor: pointer;
  list-style: none;
  align-items: baseline;
  border-radius: 0;
}

.job-row::-webkit-details-marker {
  display: none;
}

.job-row:focus-visible {
  outline-offset: -2px;
}

/* chevron */
.job-row::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 180ms var(--ease-out);
}

.job[open] > .job-row::after {
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .job-row:hover {
    background: var(--surface-2);
  }
}

.job-unit {
  grid-area: unit;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.unit-prefix {
  font-weight: 400;
  color: var(--muted);
}

.job-status { grid-area: status; justify-self: end; }
.job-last { grid-area: last; }
.job-next { grid-area: next; justify-self: end; text-align: right; }
.job-dur { grid-area: dur; display: none; }
.job-exit { grid-area: exit; display: none; }

.job-last,
.job-next {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* phone: prefix values with their column name, since the header is hidden */
.job-last::before,
.job-next::before {
  content: attr(data-label) " ";
  color: var(--muted);
}

.job.is-failed .job-exit {
  display: block;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--danger);
}

.job.is-failed .job-exit::before {
  content: attr(data-label) " ";
}

.job.is-failed .job-row {
  grid-template-areas:
    "unit status"
    "last next"
    "exit exit";
}

.job-body {
  padding: 0 var(--s4) var(--s4);
}

@media (min-width: 820px) {
  .jobs-head,
  .job-row,
  .job.is-failed .job-row {
    grid-template-columns: 6.5rem minmax(0, 1.4fr) minmax(0, 1fr) 4.5rem 3rem minmax(0, 1fr);
    grid-template-areas: "status unit last dur exit next";
    gap: var(--s3) var(--s5);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .jobs-head {
    display: grid;
    font-size: var(--fs-sm);
    color: var(--muted);
    border-bottom: 1px solid var(--line-strong);
  }

  .job-status { justify-self: start; }
  .job-next { justify-self: start; text-align: left; }

  .job-dur,
  .job-exit,
  .job.is-failed .job-exit {
    display: block;
    text-align: right;
    font-size: var(--fs-base);
    color: var(--ink-2);
  }

  .job.is-failed .job-exit {
    color: var(--danger);
    font-weight: 600;
  }

  .job-last,
  .job-next {
    font-size: var(--fs-base);
  }

  .job-last::before,
  .job-next::before,
  .job.is-failed .job-exit::before {
    content: none;
  }

  .jobs-head .num {
    text-align: right;
  }
}

/* ---------- Log block ---------- */

.log-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.log {
  max-height: 24rem;
  overflow: auto;
  padding: var(--s3);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 0.78125rem; /* 12.5 */
  line-height: 1.55;
  white-space: pre;
  tab-size: 4;
  font-variant-numeric: normal;
  overscroll-behavior: contain;
}

/* ---------- Tabs (queue brands; plain links, server-selected) ---------- */

.tabs {
  display: flex;
  gap: var(--s1);
  margin-bottom: var(--s4);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--s3);
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.tab[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--brand, var(--accent));
}

@media (hover: hover) and (pointer: fine) {
  .tab:hover {
    color: var(--ink);
    text-decoration: none;
  }
}

.tab-count {
  color: var(--muted);
  font-weight: 400;
}

/* ---------- Switch cards ---------- */

.switches {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.switch {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.switch-name {
  font-size: var(--fs-md);
  font-weight: 600;
}

.switch-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.switch-state::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok-fill);
}

.switch.is-stopped {
  background: var(--warn-soft);
  border-color: transparent;
}

.switch.is-stopped .switch-state {
  color: var(--warn);
}

.switch.is-stopped .switch-state::before {
  border-radius: 1px;
  background: var(--warn-fill);
}

.switch-meta {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.switch form {
  margin-top: auto;
}

/* ---------- Buttons ---------- */

.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition:
    transform var(--t-press) var(--ease-out),
    background-color var(--t-color) ease,
    border-color var(--t-color) ease;
}

.btn:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--surface-2);
    text-decoration: none;
  }
}

.btn-primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-danger {
  border-color: transparent;
  background: var(--danger-fill);
  color: #ffffff;
}

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--accent-hover);
  }

  .btn-danger:hover {
    background: var(--danger);
  }

  .btn-quiet:hover {
    background: var(--surface-2);
    color: var(--ink);
  }
}

.btn-sm {
  min-height: 32px;
  padding: 0 var(--s3);
  font-size: var(--fs-sm);
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-color-scheme: dark) {
  .btn-danger {
    color: #1a0806;
  }
}

/* ---------- Forms ---------- */

.form {
  display: grid;
  gap: var(--s4);
}

.field {
  display: grid;
  gap: 6px;
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-2);
}

.field-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming */
  transition: border-color var(--t-color) ease;
}

.input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.input[aria-invalid="true"] {
  border-color: var(--danger-fill);
}

.input-code {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

/* ---------- Login ---------- */

.auth {
  display: grid;
  place-items: center;
  padding: var(--s6) var(--gutter);
}

.auth-body .auth {
  min-height: 100dvh;
}

.auth-card {
  width: 100%;
  max-width: 22rem;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.auth-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.auth-sub {
  margin: var(--s1) 0 var(--s5);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Confirm page ---------- */

.confirm {
  max-width: 34rem;
  padding: var(--s5);
}

.confirm-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.confirm-text {
  margin: var(--s2) 0 var(--s4);
  color: var(--ink-2);
}

.confirm-list {
  margin-bottom: var(--s5);
  padding-left: 1.1em;
  list-style: disc;
  color: var(--ink-2);
}

.confirm-list li + li {
  margin-top: var(--s1);
}

/* ---------- Flash messages ---------- */

.flash {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}

.flash.is-ok {
  background: var(--ok-soft);
  box-shadow: inset 3px 0 0 var(--ok-fill);
}

.flash.is-warn {
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn-fill);
}

.flash.is-danger {
  background: var(--danger-soft);
  box-shadow: inset 3px 0 0 var(--danger-fill);
}

.flash-title {
  font-weight: 600;
}

/* ---------- Empty state ---------- */

.empty {
  padding: var(--s5) var(--s4);
}

.empty-title {
  font-weight: 600;
}

.empty-text {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .job-row::after {
    transition-property: background-color, border-color, color, opacity;
  }

  .btn:active {
    transform: none;
  }
}

/* ---------- Forced colours (Windows high contrast) ---------- */

@media (forced-colors: active) {
  .meter-fill,
  .share-seg,
  .spark-bar,
  .bar::before,
  .status::before,
  .swatch,
  .legend-item::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* ---------- Percent classes ----------
   CSP forbids style="". Set a value with class p-N (N = integer 0..100).
   Consumers: .meter-fill (width), .share-seg (flex-grow), .bar (width),
   .spark-bar (height). Put p-N on the element itself or on .meter. */

.p-0 { --pct: 0; }
.p-1 { --pct: 1; }
.p-2 { --pct: 2; }
.p-3 { --pct: 3; }
.p-4 { --pct: 4; }
.p-5 { --pct: 5; }
.p-6 { --pct: 6; }
.p-7 { --pct: 7; }
.p-8 { --pct: 8; }
.p-9 { --pct: 9; }
.p-10 { --pct: 10; }
.p-11 { --pct: 11; }
.p-12 { --pct: 12; }
.p-13 { --pct: 13; }
.p-14 { --pct: 14; }
.p-15 { --pct: 15; }
.p-16 { --pct: 16; }
.p-17 { --pct: 17; }
.p-18 { --pct: 18; }
.p-19 { --pct: 19; }
.p-20 { --pct: 20; }
.p-21 { --pct: 21; }
.p-22 { --pct: 22; }
.p-23 { --pct: 23; }
.p-24 { --pct: 24; }
.p-25 { --pct: 25; }
.p-26 { --pct: 26; }
.p-27 { --pct: 27; }
.p-28 { --pct: 28; }
.p-29 { --pct: 29; }
.p-30 { --pct: 30; }
.p-31 { --pct: 31; }
.p-32 { --pct: 32; }
.p-33 { --pct: 33; }
.p-34 { --pct: 34; }
.p-35 { --pct: 35; }
.p-36 { --pct: 36; }
.p-37 { --pct: 37; }
.p-38 { --pct: 38; }
.p-39 { --pct: 39; }
.p-40 { --pct: 40; }
.p-41 { --pct: 41; }
.p-42 { --pct: 42; }
.p-43 { --pct: 43; }
.p-44 { --pct: 44; }
.p-45 { --pct: 45; }
.p-46 { --pct: 46; }
.p-47 { --pct: 47; }
.p-48 { --pct: 48; }
.p-49 { --pct: 49; }
.p-50 { --pct: 50; }
.p-51 { --pct: 51; }
.p-52 { --pct: 52; }
.p-53 { --pct: 53; }
.p-54 { --pct: 54; }
.p-55 { --pct: 55; }
.p-56 { --pct: 56; }
.p-57 { --pct: 57; }
.p-58 { --pct: 58; }
.p-59 { --pct: 59; }
.p-60 { --pct: 60; }
.p-61 { --pct: 61; }
.p-62 { --pct: 62; }
.p-63 { --pct: 63; }
.p-64 { --pct: 64; }
.p-65 { --pct: 65; }
.p-66 { --pct: 66; }
.p-67 { --pct: 67; }
.p-68 { --pct: 68; }
.p-69 { --pct: 69; }
.p-70 { --pct: 70; }
.p-71 { --pct: 71; }
.p-72 { --pct: 72; }
.p-73 { --pct: 73; }
.p-74 { --pct: 74; }
.p-75 { --pct: 75; }
.p-76 { --pct: 76; }
.p-77 { --pct: 77; }
.p-78 { --pct: 78; }
.p-79 { --pct: 79; }
.p-80 { --pct: 80; }
.p-81 { --pct: 81; }
.p-82 { --pct: 82; }
.p-83 { --pct: 83; }
.p-84 { --pct: 84; }
.p-85 { --pct: 85; }
.p-86 { --pct: 86; }
.p-87 { --pct: 87; }
.p-88 { --pct: 88; }
.p-89 { --pct: 89; }
.p-90 { --pct: 90; }
.p-91 { --pct: 91; }
.p-92 { --pct: 92; }
.p-93 { --pct: 93; }
.p-94 { --pct: 94; }
.p-95 { --pct: 95; }
.p-96 { --pct: 96; }
.p-97 { --pct: 97; }
.p-98 { --pct: 98; }
.p-99 { --pct: 99; }
.p-100 { --pct: 100; }