/* UserBus studio — design system and layout.
   Dark-first studio surface, light option from the OS preference, no web fonts,
   no third-party requests, no decorative gradients. Tokens first, then base,
   then components, then responsive rules. */

:root {
  color-scheme: dark;

  /* Typography: one system stack, five sizes, tabular numerals for data. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;    /* 12px — metadata, chips */
  --fs-sm: 0.8125rem;  /* 13px — dense data, table cells */
  --fs-md: 0.9375rem;  /* 15px — body, controls */
  --fs-lg: 1.125rem;   /* 18px — section titles */
  --fs-xl: 1.625rem;   /* 26px — page titles */
  --lh-tight: 1.25;
  --lh-body: 1.55;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Neutral ramp (dark surface) */
  --c-bg: #0b0d11;
  --c-bg-raised: #10131a;
  --c-surface: #141821;
  --c-surface-2: #1a1f29;
  --c-surface-3: #222834;
  --c-line: #262d38;
  --c-line-strong: #39414f;

  /* Text */
  --c-text: #e9edf3;
  --c-text-soft: #aeb8c6;
  --c-text-dim: #7d8798;
  --c-text-invert: #0a0d12;

  /* One restrained accent */
  --c-accent: #6f9dff;
  --c-accent-strong: #8bb0ff;
  --c-accent-quiet: rgba(111, 157, 255, 0.14);
  --c-accent-line: rgba(111, 157, 255, 0.45);

  /* Semantic state colors */
  --c-queued: #9aa6b8;
  --c-running: #6f9dff;
  --c-succeeded: #3fbf8f;
  --c-failed: #ef7070;
  --c-canceled: #b08cd8;
  --c-warn: #d9a04a;

  /* Radius and elevation */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);

  --focus: 2px solid var(--c-accent-strong);
  --focus-offset: 2px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --c-bg: #f6f7f9;
    --c-bg-raised: #ffffff;
    --c-surface: #ffffff;
    --c-surface-2: #f2f4f7;
    --c-surface-3: #e7eaef;
    --c-line: #dfe3e9;
    --c-line-strong: #c3cad4;
    --c-text: #14181f;
    --c-text-soft: #4c5766;
    --c-text-dim: #5a6472;
    --c-text-invert: #ffffff;
    --c-accent: #2f5fd0;
    --c-accent-strong: #24499f;
    --c-accent-quiet: rgba(47, 95, 208, 0.1);
    --c-accent-line: rgba(47, 95, 208, 0.4);
    --c-queued: #5b6573;
    --c-running: #2f5fd0;
    --c-succeeded: #14684a;
    --c-failed: #c0392b;
    --c-canceled: #7c4fa8;
    --c-warn: #7a5210;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
    --shadow-2: 0 10px 30px rgba(16, 24, 40, 0.12);
  }
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }

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

/* Media can take focus, so it must show it. */
video:focus-visible, .stage-player:focus-visible, .poster .player:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  z-index: 10;
}
.skip-link:focus { left: var(--sp-3); }

/* ---------- shell ---------- */

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-bg-raised);
  border-bottom: 1px solid var(--c-line);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: var(--sp-2); }
.brand-name { font-weight: 650; letter-spacing: -0.01em; font-size: var(--fs-lg); }
.brand-context { color: var(--c-text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }

.nav { display: flex; gap: var(--sp-1); margin-left: var(--sp-2); }
.nav a {
  color: var(--c-text-soft);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.nav a:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--c-surface-3); color: var(--c-text); }

.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.session-state { color: var(--c-text-dim); font-size: var(--fs-xs); }
.session-state .who { color: var(--c-text-soft); font-family: var(--font-mono); }

main { flex: 1; padding: var(--sp-5); max-width: 1240px; width: 100%; margin: 0 auto; }

.footer {
  border-top: 1px solid var(--c-line);
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-text-dim);
  font-size: var(--fs-xs);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head .lede { color: var(--c-text-soft); margin: 0; max-width: 62ch; }
.page-head .head-actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

/* ---------- primitives ---------- */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: var(--sp-4); }
.card, .studio-grid > * { min-width: 0; }
.card-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; min-width: 0; }
.card-head h2 { margin: 0; }
.card-head .card-note { color: var(--c-text-dim); font-size: var(--fs-xs); margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--c-text);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  min-height: 36px;
  cursor: pointer;
}
.btn:hover { background: var(--c-surface-3); }
.btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-invert); }
.btn-primary:hover { background: var(--c-accent-strong); border-color: var(--c-accent-strong); }
.btn-lg { font-size: var(--fs-md); padding: var(--sp-3) var(--sp-5); min-height: 44px; }
.btn-quiet { background: transparent; border-color: var(--c-line); color: var(--c-text-soft); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 550;
  padding: 2px var(--sp-2);
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  color: var(--c-text-soft);
  background: var(--c-surface-2);
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.chip--queued { color: var(--c-queued); border-color: color-mix(in srgb, var(--c-queued) 45%, transparent); }
.chip--leased,
.chip--running { color: var(--c-running); border-color: color-mix(in srgb, var(--c-running) 45%, transparent); }
.chip--succeeded { color: var(--c-succeeded); border-color: color-mix(in srgb, var(--c-succeeded) 45%, transparent); }
.chip--failed { color: var(--c-failed); border-color: color-mix(in srgb, var(--c-failed) 45%, transparent); }
.chip--canceled { color: var(--c-canceled); border-color: color-mix(in srgb, var(--c-canceled) 45%, transparent); }
.chip--plain::before { display: none; }
.chip--warn { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); }

.muted { color: var(--c-text-dim); }
.small { font-size: var(--fs-xs); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

.alert {
  border: 1px solid var(--c-line-strong);
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.alert.error { border-left-color: var(--c-failed); }
.alert.notice { border-left-color: var(--c-succeeded); }
.alert.info { border-left-color: var(--c-accent); }

/* ---------- forms ---------- */

.field { margin-bottom: var(--sp-4); min-width: 0; }
.field > label, .field-label { display: block; font-size: var(--fs-sm); font-weight: 550; margin-bottom: var(--sp-2); }
.field-hint { color: var(--c-text-dim); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }
.field-error { color: var(--c-failed); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }

.input, .textarea, .select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  min-height: 38px;
}
.textarea { min-height: 132px; resize: vertical; line-height: var(--lh-body); }
.input[readonly], .select[disabled], .select:disabled { color: var(--c-text-soft); background: var(--c-surface-2); }
.input::placeholder, .textarea::placeholder { color: var(--c-text-dim); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-accent); }

.param-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }

fieldset { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
legend { font-size: var(--fs-sm); font-weight: 550; margin-bottom: var(--sp-2); padding: 0; }

.model-cards { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.model-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--c-bg-raised);
  cursor: pointer;
}
.model-card:has(input:checked) { border-color: var(--c-accent-line); background: var(--c-accent-quiet); }
.model-card input { width: 20px; height: 20px; accent-color: var(--c-accent); }
.model-card-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.model-card .model-name { font-weight: 550; }
.model-card.is-unavailable { color: var(--c-text-dim); background: var(--c-surface-2); cursor: not-allowed; }

/* Advanced parameters, disclosed on demand. */
.advanced { margin-top: var(--sp-4); border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
.advanced summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 550; color: var(--c-text-soft); }
.advanced summary:hover { color: var(--c-text); }
.advanced[open] summary { margin-bottom: var(--sp-3); }
.tiles { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tile {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-raised);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.tile input { accent-color: var(--c-accent); }
.tile-frame { display: inline-block; border: 1px solid var(--c-line-strong); border-radius: 2px; background: var(--c-surface-3); }
.ratio-5-3 { width: 30px; height: 18px; }
.ratio-16-9 { width: 32px; height: 18px; }
.ratio-1-1 { width: 20px; height: 20px; }
.tile.is-locked { color: var(--c-text-dim); cursor: not-allowed; background: var(--c-surface-2); }
.range { width: 100%; accent-color: var(--c-accent); }

/* Result stage: the video leads, the chrome recedes. */
.stage {
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-2);
}
.stage-player { width: 100%; max-width: 960px; aspect-ratio: 5 / 3; background: #000; border-radius: var(--r-md); display: block; }
.stage-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 220px;
  width: 100%;
  max-width: 960px;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  text-align: center;
  padding: var(--sp-5);
}
.stage-meter { max-width: 320px; }

/* Your videos: a plain, bounded list. No thumbnails, no grid. */
.video-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.video-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-raised);
  padding: var(--sp-3) var(--sp-4);
}
.video-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.video-row-title { font-weight: 550; overflow-wrap: anywhere; }
.video-row-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
@media (max-width: 720px) {
  .video-row { flex-wrap: wrap; }
  .video-row-actions { width: 100%; }
  .video-row-actions .btn { width: 100%; }
}

/* Long identifiers and checksums must wrap, never widen the page. */
.table td.id a, .copy-row .value, .mono, h1 .mono, .result-title a { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- composer / layout ---------- */

.studio-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 1000px) { .studio-grid { grid-template-columns: minmax(0, 1fr); } }

.composer .primary-action { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.composer .primary-action .hint { color: var(--c-text-dim); font-size: var(--fs-xs); }

/* ---------- data ---------- */

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table caption { text-align: left; color: var(--c-text-dim); font-size: var(--fs-xs); padding-bottom: var(--sp-2); }
.table th, .table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table thead th { color: var(--c-text-dim); font-size: var(--fs-xs); font-weight: 550; text-transform: none; letter-spacing: 0.02em; }
.table tbody tr:hover { background: var(--c-surface-2); }
.table td.id, .table th.id { font-family: var(--font-mono); font-size: var(--fs-xs); }
.table .empty-row td { color: var(--c-text-dim); padding: var(--sp-5); text-align: center; }

.filter-bar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.filter-bar .input { max-width: 260px; }

.meter { display: flex; align-items: center; gap: var(--sp-3); }
.meter-track { flex: 1; height: 8px; background: var(--c-surface-3); border-radius: 999px; overflow: hidden; min-width: 80px; }
.meter-fill { height: 100%; background: var(--c-running); border-radius: 999px; transition: width 200ms ease-out; }
.meter-fill[data-state="succeeded"] { background: var(--c-succeeded); }
.meter-fill[data-state="failed"] { background: var(--c-failed); }
.meter-fill[data-state="canceled"] { background: var(--c-canceled); }
.meter-value { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--c-text-soft); min-width: 3.5ch; text-align: right; }

.kv { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.kv dt { color: var(--c-text-dim); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.copy-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.copy-row .value { font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }


video.player { width: 100%; max-width: 720px; background: #000; border-radius: var(--r-md); display: block; }

.skeleton {
  background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 37%, var(--c-surface-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-sm);
  height: 10px;
  animation: skeleton 1.4s ease-in-out infinite;
}
[data-refreshing="true"] .skeleton { display: block; }
[data-refreshing="false"] .skeleton, .skeleton.is-hidden { display: none; }
@keyframes skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }

.toast-region { position: fixed; right: var(--sp-4); bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 20; }
.toast {
  background: var(--c-surface-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-2);
}

/* ---------- sign-in ---------- */

.signin { max-width: 560px; margin: var(--sp-7) auto; }
.signin .value-line { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.signin .lede { color: var(--c-text-soft); margin-bottom: var(--sp-5); }
.signin .fine { color: var(--c-text-dim); font-size: var(--fs-xs); margin-top: var(--sp-4); }
.signin .unavailable { margin-top: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--c-surface-2); }
.signin .unavailable h2 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }

.blocked { color: var(--c-text-soft); font-size: var(--fs-sm); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  main { padding: var(--sp-4) var(--sp-3); }
  .topbar { padding: var(--sp-3); gap: var(--sp-2); }
  .topbar-end { margin-left: 0; width: 100%; justify-content: space-between; }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .card { padding: var(--sp-4); border-radius: var(--r-md); }
  .param-grid { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) 0; }
  .kv dt { font-size: var(--fs-xs); }
  .btn, .input, .select, .nav a { min-height: 44px; }
  .btn { width: 100%; }
  .primary-action .btn { width: 100%; }
  .page-head .head-actions { width: 100%; margin-left: 0; }

  /* Stacked data tables: no horizontal scrolling at 390px. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--c-line); border-radius: var(--r-md); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-bg-raised); }
  .table td { border: 0; padding: var(--sp-1) 0; display: flex; gap: var(--sp-3); }
  .table td::before { content: attr(data-label); color: var(--c-text-dim); font-size: var(--fs-xs); min-width: 7rem; }
  .table td.id::before { content: attr(data-label); }
  .table .empty-row td::before { content: ""; min-width: 0; }
  .table-wrap { overflow-x: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- plain-language studio additions ---------- */

.btn-xl { font-size: var(--fs-lg); padding: var(--sp-3) var(--sp-6); min-height: 52px; }

.job-list { display: grid; gap: var(--sp-2); }
.job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-raised);
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-text);
}
.job-card:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); text-decoration: none; }
.job-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.job-card-title { font-weight: 550; overflow-wrap: anywhere; }
.job-card-state { justify-self: end; }
.job-card-meter { grid-column: 1 / -1; }

.empty-state { text-align: center; padding: var(--sp-5) var(--sp-4); color: var(--c-text-soft); }
.empty-state h3 { color: var(--c-text); margin-bottom: var(--sp-2); }
.empty-state p { max-width: 46ch; margin-left: auto; margin-right: auto; }

.usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.usage-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-raised);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
}
.usage-row .usage-title { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--c-text-soft); }

.stage-actions { margin-top: var(--sp-4); }
.support { margin-top: var(--sp-4); }

@media (max-width: 720px) {
  .btn-xl { width: 100%; }
  .job-card { grid-template-columns: minmax(0, 1fr); }
  .job-card-state { justify-self: start; }
  .usage-row { flex-wrap: wrap; }
}

/* Nothing inside a field may exceed its box: an intrinsic-width control (range
   input, select, button) is the usual cause of a few pixels of inner overflow. */
.field > *, .row > *, .param-grid > * { min-width: 0; }
input[type="range"], .input, .select, .textarea { max-width: 100%; min-width: 0; }
/* A range input carries a default 2px margin in Chromium, which makes a 100%-wide
   slider overflow its box by ~4px; the margins are removed here. */
.range { display: block; width: 100%; margin: 0; }
input[type="range"] { margin: 0; }
.row { min-width: 0; flex-wrap: wrap; }

/* The header shows a short account name and must never wrap or push the navigation
   out of place: a long local part is truncated with an ellipsis, and the full value
   stays available in the title attribute (and on the account view). */
.session-state .who {
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* The header balance: fixed width so a changing value cannot move the account name
   or the navigation, with the number and its label as real text. */
.balance-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  min-width: 11ch;
  justify-content: flex-end;
  text-decoration: none;
  white-space: nowrap;
}
.balance-badge .balance-label { opacity: 0.7; font-size: 0.85em; }
.balance-badge .balance-value { font-variant-numeric: tabular-nums; }