/* ============================================================
   Otto Time · Admin — app.css  (SINGLE complete stylesheet)
   Design tokens per graphic-design/F002_visual_v1.md (verbatim :root),
   extended additively by F003 (rights matrix, lyric rows, CSV import) and
   F004 (episodes: job chain, renders, produce, detail).
   Plain CSS, no build step, no @import, no web fonts.
   No off-token hex inside any component rule — every colour reads a token.
   ============================================================ */

:root {
  /* ---- Base surfaces (warm-neutral, calm) ---- */
  --color-bg:            #FAF7F1;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F4EFE7;
  --color-surface-sunk:  #EFE9DF;

  /* ---- Text ---- */
  --color-text:          #2B2723;
  --color-text-muted:    #6B6259;
  --color-text-faint:    #9A9188;
  --color-text-invert:   #FFFFFF;

  /* ---- Topbar (warm-dark, on-brand; derived from --color-text) ---- */
  --color-topbar:        #231F1B;
  --color-topbar-muted:  #B7ADA0;
  --color-link:          #A9542F;
  --color-link-hover:    #8A4325;

  /* ---- Borders ---- */
  --color-border:        #E3DBCF;
  --color-border-strong: #CDC3B4;
  --color-border-focus:  #A9542F;

  /* ---- Primary action (cinnamon, from brand Kanel #C96F4A) ---- */
  --color-primary:       #A9542F;
  --color-primary-hover: #8A4325;
  --color-primary-active:#733819;
  --color-primary-soft:  #F6E7DE;

  /* ---- Semantic (derived from brand hues, tuned for legibility) ---- */
  --color-success:       #3E6B4C;
  --color-success-bg:    #E7F0E9;
  --color-success-border:#BFD6C6;
  --color-warning:       #9A6A1E;
  --color-warning-bg:    #FBF1DC;
  --color-warning-border:#EAD6A6;
  --color-danger:        #9A362C;
  --color-danger-hover:  #832E25;
  --color-danger-bg:     #FBEAE7;
  --color-danger-border:#E6BDB6;
  --color-info:          #46617A;
  --color-info-bg:       #E9EFF4;
  --color-info-border:   #C3D2DF;

  /* ---- Episode state accents (badge families) ---- */
  --state-producing:     #46617A;
  --state-producing-bg:  #E9EFF4;
  --state-needs-review:  #9A6A1E;
  --state-needs-review-bg:#FBF1DC;
  --state-blocked:       #9A362C;
  --state-blocked-bg:    #FBEAE7;
  --state-published:     #3E6B4C;
  --state-published-bg:  #E7F0E9;
  --state-neutral:       #6B6259;
  --state-neutral-bg:    #F0EAE0;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  3rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.25;
  --lh-base:  1.5;

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

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(43,39,35,0.06);
  --shadow-md: 0 2px 8px rgba(43,39,35,0.08);
  --shadow-lg: 0 8px 24px rgba(43,39,35,0.12);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(169,84,47,0.30);

  /* ---- Layout ---- */
  --container-max: 1120px;
  --input-height:  40px;
  --border-w:      1px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur:  140ms;

  /* ==== F003 additions — semantic ALIASES onto F002 values (no new hues) ==== */
  --rights-green:        var(--color-success);
  --rights-green-bg:     var(--color-success-bg);
  --rights-green-border: var(--color-success-border);
  --rights-yellow:       var(--color-warning);
  --rights-yellow-bg:    var(--color-warning-bg);
  --rights-yellow-border:var(--color-warning-border);
  --rights-red:          var(--color-danger);
  --rights-red-bg:       var(--color-danger-bg);
  --rights-red-border:   var(--color-danger-border);

  --import-new:          var(--color-success);
  --import-new-bg:       var(--color-success-bg);
  --import-updated:      var(--color-info);
  --import-updated-bg:   var(--color-info-bg);
  --import-unchanged:    var(--color-text-muted);
  --import-unchanged-bg: var(--color-surface-alt);
  --import-error:        var(--color-danger);
  --import-error-bg:     var(--color-danger-bg);

  --lyric-row-bg:        var(--color-surface-alt);
  --lyric-row-border:    var(--color-border);

  /* ==== F004 additions — semantic ALIASES onto F002/F003 values (no new hues) ==== */
  --job-done:      var(--color-success);
  --job-done-bg:   var(--color-success-bg);
  --job-running:   var(--color-info);
  --job-running-bg:var(--color-info-bg);
  --job-queued:    var(--color-text-muted);
  --job-queued-bg: var(--color-surface-alt);
  --job-blocked:   var(--color-warning);
  --job-blocked-bg:var(--color-warning-bg);
  --job-failed:    var(--color-danger);
  --job-failed-bg: var(--color-danger-bg);

  --preview-frame-bg:     var(--color-surface-sunk);
  --preview-frame-border: var(--color-border);
  --render-letterbox:     var(--color-topbar);

  /* ==== F005 additions — worker-health + stalled (aliases, no new hues) ==== */
  --worker-ok:         var(--color-success);      /* running, recent activity   */
  --worker-idle:       var(--color-text-faint);   /* no worker running (≠ error) */
  --worker-stalled:    var(--color-warning);      /* running > N min → attention */
  --worker-stalled-bg: var(--color-warning-bg);

  --job-stalled:     var(--color-warning);        /* stalled job row/badge       */
  --job-stalled-bg:  var(--color-warning-bg);
  --job-skipped:     var(--color-text-muted);     /* skipped = quiet neutral     */
  --job-skipped-bg:  var(--color-surface-alt);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
}
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-surface); color: var(--color-text);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); box-shadow: var(--focus-ring); }

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

/* ---- Topbar ---- */
.topbar { background: var(--color-topbar); color: var(--color-text-invert); }
.topbar__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.wordmark { display: inline-flex; align-items: baseline; gap: var(--sp-2);
  text-decoration: none; color: var(--color-text-invert); }
.wordmark__name   { font-weight: var(--fw-semibold); }
.wordmark__suffix { font-size: var(--fs-sm); color: var(--color-topbar-muted); }
.topbar__user { display: flex; align-items: center; gap: var(--sp-3); }
.user-name { font-size: var(--fs-sm); }
.logout-form { margin: 0; }

.topbar__nav { display: flex; align-items: center; gap: var(--sp-4); margin-right: auto;
  margin-left: var(--sp-5); }
.nav__link { color: var(--color-topbar-muted); text-decoration: none; font-size: var(--fs-sm);
  padding: var(--sp-1) 0; border-bottom: 2px solid transparent; }
.nav__link:hover { color: var(--color-text-invert); }
.nav__link--active { color: var(--color-text-invert); border-bottom-color: var(--color-primary); }

/* ---- Container ---- */
.container { max-width: var(--container-max); margin: 0 auto; padding: var(--sp-5); }
@media (max-width: 767px) { .container { padding: var(--sp-4); } }

.page-title {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); margin: 0 0 var(--sp-5);
}
.section-title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); margin: 0 0 var(--sp-4);
}

.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head .page-title { margin: 0; }
.page-head__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Panels ---- */
.panel {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.panel--danger { border-left: 3px solid var(--color-danger); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--input-height); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  line-height: 1; cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-height: 44px;
}
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn--primary { background: var(--color-primary); color: var(--color-text-invert); }
.btn--primary:hover  { background: var(--color-primary-hover); color: var(--color-text-invert); }
.btn--primary:active { background: var(--color-primary-active); }
.btn--secondary {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-alt); }
.btn--ghost { background: transparent; border: 1px solid var(--color-border-strong); }
.btn--danger { background: var(--color-danger); color: var(--color-text-invert); }
.btn--danger:hover { background: var(--color-danger-hover); color: var(--color-text-invert); }
.btn--block { width: 100%; }
.btn--logout { background: transparent; color: var(--color-text-invert);
  border: 1px solid rgba(255,255,255,0.3); }
.btn--logout:hover { background: rgba(255,255,255,0.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Forms ---- */
.field { margin-bottom: var(--sp-4); }
.field__label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-muted);
}
.input {
  width: 100%; height: var(--input-height);
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font-family: inherit; font-size: var(--fs-base);
}
.input::placeholder { color: var(--color-text-faint); }
.input:focus {
  border-color: var(--color-border-focus); box-shadow: var(--focus-ring); outline: none;
}
.input[aria-invalid="true"] {
  border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg);
}
.input:disabled {
  background: var(--color-surface-sunk); color: var(--color-text-faint);
  cursor: not-allowed;
}
.field__error {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-xs); color: var(--color-danger);
}
.field__hint { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs);
  color: var(--color-text-muted); }

.field-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 160px; }
.field--inline { flex: 0 0 auto; }
.input--short { width: 120px; max-width: 100%; }
.input--textarea { height: auto; min-height: calc(var(--lh-base) * 5em); padding: var(--sp-3);
  line-height: var(--lh-base); resize: vertical; }
.form-actions { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-6); flex-wrap: wrap; }

/* ---- PD group ---- */
.pd-group { background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--sp-4); }
.pd-group__check { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-medium); margin-bottom: var(--sp-3); min-height: 44px; }
.pd-group .field:last-child { margin-bottom: 0; }

/* ---- Lyric repeater rows ---- */
.lyrics-row { background: var(--lyric-row-bg); border: 1px solid var(--lyric-row-border);
  border-radius: var(--radius-md); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
.lyrics-row__head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Alerts ---- */
.alert {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-info);
  background: var(--color-info-bg); color: var(--color-text);
  font-size: var(--fs-sm); margin-bottom: var(--sp-4);
}
.alert--error { border-left-color: var(--color-danger);  background: var(--color-danger-bg); }
.alert--warn  { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.alert--info  { border-left-color: var(--color-info);    background: var(--color-info-bg); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4;
}
.badge svg { flex: 0 0 auto; }
.badge__glyph { display: inline-flex; }
.badge--producing    { color: var(--state-producing);    background: var(--state-producing-bg); }
.badge--needs-review { color: var(--state-needs-review); background: var(--state-needs-review-bg); }
.badge--blocked      { color: var(--state-blocked);      background: var(--state-blocked-bg); }
.badge--published    { color: var(--state-published);    background: var(--state-published-bg); }
.badge--neutral      { color: var(--state-neutral);      background: var(--state-neutral-bg); }
.badge--lang {
  color: var(--state-neutral); background: var(--state-neutral-bg);
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
  text-transform: lowercase;
}
.badge--role { color: var(--color-text-invert); }
.badge--role-admin     { background: var(--color-primary); }
.badge--role-konsulent { background: var(--color-success); }
.badge--role-reviewer  { background: var(--color-text-muted); }
.badge--rights-green  { color: var(--rights-green);  background: var(--rights-green-bg);
  border: 1px solid var(--rights-green-border); }
.badge--rights-yellow { color: var(--rights-yellow); background: var(--rights-yellow-bg);
  border: 1px solid var(--rights-yellow-border); }
.badge--rights-red    { color: var(--rights-red);    background: var(--rights-red-bg);
  border: 1px solid var(--rights-red-border); }
.rights-cell { gap: var(--sp-2); }
.rights-cell__count { font-variant-numeric: tabular-nums; opacity: 0.85; }
.rights-matrix code { font-family: var(--font-mono); }

/* ============================================================
   Layout primitives used since F002 (stat cards, tables, toolbar)
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-grid--fixed { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat-card { display: block; text-align: left; text-decoration: none;
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--sp-4); color: var(--color-text); }
a.stat-card:hover { background: var(--color-surface-alt); }
.stat-card--active { box-shadow: var(--focus-ring); }
.stat-card__num { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.stat-card__label { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm);
  color: var(--color-text-muted); }
.stat-card--neutral { border-left-color: var(--state-neutral); }
.stat-card--producing, .stat-card--info { border-left-color: var(--color-info); }
.stat-card--needs-review, .stat-card--warning { border-left-color: var(--color-warning); }
.stat-card--blocked, .stat-card--danger { border-left-color: var(--color-danger); }
.stat-card--published, .stat-card--success { border-left-color: var(--color-success); }
.episode-counters { margin-bottom: var(--sp-5); }

.table-wrap { overflow-x: auto; border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md); }
.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface);
  font-size: var(--fs-sm); }
.data-table thead th { text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--color-text-muted); white-space: nowrap;
  border-bottom: var(--border-w) solid var(--color-border-strong); }
.data-table tbody td { padding: var(--sp-3) var(--sp-4); vertical-align: top;
  border-bottom: var(--border-w) solid var(--color-border); }
.data-table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.cell-title { font-weight: var(--fw-medium); }
.cell-slug  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }
.cell-muted { color: var(--color-text-muted); }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  margin-bottom: var(--sp-5); }
.toolbar__search { flex: 1 1 220px; }
.toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.toolbar__check { display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; font-size: var(--fs-sm); }
.toolbar__clear { align-self: center; font-size: var(--fs-sm); }

/* CSV import diff badges (F003) */
.diff-badge--new    { color: var(--import-new);       background: var(--import-new-bg); }
.diff-badge--update { color: var(--import-updated);   background: var(--import-updated-bg); }
.diff-badge--same   { color: var(--import-unchanged); background: var(--import-unchanged-bg); }
.diff-badge--error  { color: var(--import-error);     background: var(--import-error-bg); }

/* Worker health dot (dashboard) */
.worker-status { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  display: inline-block; background: var(--color-text-faint); }
.dot--active, .dot--ok { background: var(--color-success); }
.dot--muted { background: var(--color-text-faint); }

/* Generic badge tones (parity with stat/engine tones) */
.badge--success { color: var(--color-success); background: var(--color-success-bg); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.badge--danger, .badge--failed { color: var(--color-danger); background: var(--color-danger-bg); }
.badge--info { color: var(--color-info); background: var(--color-info-bg); }
.badge--approved { color: var(--color-success); background: var(--color-success-bg); }
.badge--blocked-signs, .badge--blocked-rights { color: var(--state-blocked); background: var(--state-blocked-bg); }

/* ============================================================
   F004 — episodes: status header, job chain, detail grid, renders, produce
   ============================================================ */
.status-header__main { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.status-header__title { margin: 0; }
.status-header__meta { width: 100%; margin-top: var(--sp-1); font-size: var(--fs-sm); }
.status-header__state { margin-left: auto; }
.status-header__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.approve-disabled { display: inline-flex; flex-direction: column; gap: var(--sp-1); }
.approve-disabled__reason { font-size: var(--fs-xs); }

.job-chain__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); }
.job-chain__count { font-variant-numeric: tabular-nums; color: var(--color-text-muted);
  font-size: var(--fs-sm); }
.job-chain { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.job-step { display: flex; gap: var(--sp-2); align-items: flex-start; flex: 1 1 130px; min-width: 130px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--color-surface-alt); border: var(--border-w) solid var(--color-border); }
.job-step__marker { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.job-step__body { display: flex; flex-direction: column; min-width: 0; }
.job-step__name { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.job-step__status { font-size: var(--fs-xs); color: var(--color-text-muted); }
.job-step--done    { background: var(--job-done-bg);    border-color: var(--job-done); }
.job-step--done    .job-step__marker { color: var(--job-done); }
.job-step--running { background: var(--job-running-bg); border-color: var(--job-running); }
.job-step--running .job-step__marker { color: var(--job-running); }
.job-step--queued  { background: var(--job-queued-bg); }
.job-step--queued  .job-step__marker { color: var(--job-queued); }
.job-step--blocked { background: var(--job-blocked-bg); border-color: var(--job-blocked); }
.job-step--blocked .job-step__marker { color: var(--job-blocked); }
.job-step--failed  { background: var(--job-failed-bg);  border-color: var(--job-failed); }
.job-step--failed  .job-step__marker { color: var(--job-failed); }
.job-step--gate { box-shadow: inset 3px 0 0 var(--color-primary); }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 899px) { .detail-grid { grid-template-columns: 1fr; } }
.kv-list { margin: 0; }
.kv-list__key { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); margin-top: var(--sp-3); }
.kv-list__val { margin: 0 0 var(--sp-1); }

.render-block { margin-bottom: var(--sp-4); }
.render-block__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-2); }
.render-block__mode { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.render-block__frame { border: var(--border-w) solid var(--preview-frame-border);
  border-radius: var(--radius-md); background: var(--preview-frame-bg); overflow: hidden; }
.render-block__video { display: block; width: 100%; background: var(--render-letterbox); }
.render-block__frame--empty { display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: var(--sp-5); text-align: center;
  color: var(--color-text-muted); font-size: var(--fs-sm); }

.produce-options { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.produce-option { border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); }
.produce-option--disabled { opacity: 0.6; background: var(--color-surface-alt); }
.produce-option__label { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.produce-option--disabled .produce-option__label { cursor: not-allowed; }
.produce-option__radio { flex: 0 0 auto; }
.produce-option__title { font-weight: var(--fw-medium); }
.produce-option__reason { display: block; margin-top: var(--sp-1); margin-left: var(--sp-6);
  font-size: var(--fs-xs); color: var(--color-text-muted); }

.progress-mini { display: flex; align-items: center; gap: var(--sp-2); }
.progress-mini__bar { flex: 1 1 60px; height: 6px; background: var(--color-surface-sunk);
  border-radius: 999px; overflow: hidden; }
.progress-mini__fill { display: block; height: 100%; background: var(--color-primary); }
.progress-mini__text { font-size: var(--fs-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   F005 — jobs monitor: worker-health stalled dot, stalled row, live-status
   (all on existing tokens / F005 aliases; no new hues, no off-token hex)
   ============================================================ */
/* Stalled worker dot — the sole new component rule beyond aliases (warning). */
.dot--warn { background: var(--worker-stalled); }

/* Stalled `running` job row: a quiet warning left-stripe on the first cell
   (mirrors the .panel--danger / .stat-card stripe idiom) + a subtle tint. The
   "Hænger" label + glyph is the non-colour signal; the row reads as
   attention-not-error in greyscale. Reserve danger for real failed jobs. */
.data-table tbody tr.job-row--stalled { background: var(--job-stalled-bg); }
.job-row--stalled td:first-child { box-shadow: inset 3px 0 0 var(--job-stalled); }

/* Live-refresh "opdateret" affordance: a quiet, static timestamp beside the
   page title. No spinner, no colour flash — the surface must not pulse. */
.live-status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}