/* Altivox Razor — light theme matching altivox.co.uk */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f5f7fa;
  --bg-line:   #eaeef3;
  --bor:       #e2e8f0;
  --ink:       #0e1b30;
  --ink-2:     #2d3e57;
  --mu:        #61708a;
  --mu-2:      #7d8ba3;
  --acc:       #1f6fd6;
  --acc-ink:   #14457f;
  --acc-soft:  rgba(31,111,214,0.08);
  --acc-soft2: rgba(31,111,214,0.16);
  --ok:        #067647;
  --ok-soft:   #ecfdf3;
  --ok-bor:    #abefc6;
  --err:       #b42318;
  --err-soft:  #fef3f2;
  --err-bor:   #fecdca;
  --warn:      #b25500;
  --warn-soft: #fff3e6;
  --r:         14px;
  --r-sm:      8px;
  --r-xs:      6px;
  --shadow:    0 1px 2px rgba(14,27,48,.04), 0 8px 24px rgba(14,27,48,.06);
  --shadow-lg: 0 20px 50px rgba(14,27,48,.10);
  --maxw:      1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; width: 100%; }

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-ink); text-decoration: underline; }

/* ── Topnav ─────────────────────────────────────────────────────────── */
.topnav {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bg-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.inner-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 0;            /* keep imgs aligned without baseline shift */
}
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 28px;
  width: auto;
  display: block;
}
.brand-razor {
  height: 36px;
  width: auto;
  display: block;
}
/* Hair-thin vertical divider between the Altivox logo and the Razor
   wordmark — matches the airy spacing on altivox.co.uk. */
.brand-sep {
  width: 1px;
  height: 22px;
  background: var(--bg-line);
  border-radius: 1px;
}
.nav-link {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.nav-link:hover { color: var(--ink); text-decoration: none; }

/* ── Hero / page intro ──────────────────────────────────────────────── */
.hero { padding-top: 64px; padding-bottom: 18px; }
.hero h1 {
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.hero h1 .accent { color: var(--acc); }
.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--mu);
  margin: 0 0 36px;
  max-width: 600px;
}
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc-soft);
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 18px;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--bg-line);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 4px;
}
.card-sub { color: var(--mu); font-size: 14px; margin: 0 0 18px; }

/* ── Drop zone ──────────────────────────────────────────────────────── */
.drop {
  background: var(--bg-soft);
  border: 2px dashed var(--bor);
  border-radius: var(--r);
  padding: 56px 24px;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.drop:hover { border-color: var(--mu-2); background: #f0f3f8; }
.drop.over {
  background: var(--acc-soft);
  border-color: var(--acc);
  transform: scale(1.005);
}
.drop-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 4px;
}
.drop-sub { color: var(--mu); font-size: 13px; margin: 0 0 18px; }
.drop input[type=file] { display: none; }
.drop-icon {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-soft);
  border-radius: 50%;
  color: var(--acc);
  font-size: 18px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--acc-soft2);
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover {
  background: var(--acc-ink);
  box-shadow: var(--shadow-lg);
  color: #fff;
  text-decoration: none;
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--bor);
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.btn-accent {
  background: var(--acc);
  color: #fff;
}
.btn-accent:hover {
  background: var(--acc-ink);
  color: #fff;
  text-decoration: none;
}
.btn:disabled, .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm {
  padding: 7px 13px;
  font-size: 13px;
  border-radius: var(--r-xs);
}

/* ── Form fields ────────────────────────────────────────────────────── */
.field { margin: 18px 0; }
.field > label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 7px;
}
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 200px; margin: 0; }
.field select,
.field input[type=text] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--bor);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field select:focus,
.field input[type=text]:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  margin: 10px 0;
  cursor: pointer;
  user-select: none;
}
.checkbox-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
  cursor: pointer;
}
.checkbox-row .hint { color: var(--mu); font-size: 13px; }

/* ── Status / progress ──────────────────────────────────────────────── */
.status { margin-top: 24px; }
.status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--mu);
}
.status-step { color: var(--ink); font-weight: 600; }
.status-pct  { font-variant-numeric: tabular-nums; }
.progress-track {
  height: 6px;
  background: var(--bg-line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--acc);
  width: 0%;
  transition: width .25s ease-out;
}

/* ── Feedback messages ──────────────────────────────────────────────── */
.msg {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 16px;
}
.msg.msg-err   { background: var(--err-soft); border-color: var(--err-bor); color: var(--err); }
.msg.msg-ok    { background: var(--ok-soft);  border-color: var(--ok-bor);  color: var(--ok);  }
.msg.msg-warn  { background: var(--warn-soft);border-color: #ffd6a8;        color: var(--warn);}
.msg.msg-info  { background: var(--acc-soft); border-color: var(--acc-soft2); color: var(--acc-ink); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  padding: 36px 0 28px;
  border-top: 1px solid var(--bg-line);
  font-size: 13px;
  color: var(--mu);
}

/* ── Utility ────────────────────────────────────────────────────────── */
.muted { color: var(--mu); }
.dim   { color: var(--mu-2); }
.spacer-sm { height: 8px; }
.spacer    { height: 18px; }
.spacer-lg { height: 36px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-end { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.hidden { display: none !important; }

/* ── Editor view ────────────────────────────────────────────────────── */
.editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 32px 0 18px;
}
.editor-meta h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.editor-meta .file {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 13px;
  color: var(--mu);
}
.editor-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.stat-value {
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stat-value.accent { color: var(--acc); }
.stat-value.ok     { color: var(--ok);  }

.waveform {
  width: 100%;
  height: 140px;
  display: block;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  cursor: crosshair;
  transition: box-shadow .15s, background .15s;
}
/* Armed for start-here / end-here: red wash + ring so it's clearly a
   pick target, not just a scrubbing canvas. */
.waveform.endhere-mode {
  background: var(--err-soft);
  box-shadow: inset 0 0 0 2px var(--err);
}
.audio-player {
  width: 100%;
  margin-top: 12px;
  display: block;
}

/* ── Output preview card ───────────────────────────────────────────
   Sits below the source-waveform card. The waveform shows what the
   listener will actually hear (post-cuts + post-loudnorm). When the
   server is mid-render, the canvas dims and a shimmer overlays it.
   When the user's live edits diverge from the rendered cut list, the
   waveform fades to indicate the preview is stale — the audio still
   plays but the wave no longer represents what's on the player. */
.preview-card                { position: relative; }
.preview-waveform            { transition: opacity .25s, filter .25s; }
.preview-waveform.is-stale   { opacity: .45; filter: grayscale(.6); }
.preview-waveform.is-rendering { opacity: .55; }

.preview-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.preview-badge-ready     { background: #d1fae5; color: #047857; }
.preview-badge-rendering { background: #dbeafe; color: #1e40af; }
.preview-badge-stale     { background: #fef3c7; color: #92400e; }
.preview-badge-failed    { background: #fee2e2; color: #991b1b; }
.preview-badge-none      { background: var(--bg-soft); color: var(--mu); }

/* ── Social-clip panel ──────────────────────────────────────────── */
.social-card  { border-left: 4px solid #6366f1; }
.btn.btn-warn-active {
  background: var(--err);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}

.weekly-card  { border-left: 4px solid #f59e0b; }
.weekly-clips { list-style:none; padding:0; margin:0; }
.weekly-clip-li {
  display:flex; align-items:center; gap:10px;
  padding:6px 0; border-top:1px solid var(--bg-line);
  font-size:13px;
}
.weekly-clip-headline { font-weight:600; }
.weekly-clip-src      { margin-left:auto; font-style:italic; }
.weekly-clip-pick     {
  width:16px; height:16px; flex:none; cursor:pointer; accent-color: var(--acc);
}
.weekly-clip-li.is-unpicked {
  opacity:.45;
}
.weekly-clip-li.is-unpicked .weekly-clip-headline {
  text-decoration: line-through;
  text-decoration-color: var(--mu);
}

/* ── Final-60-seconds countdown overlay ────────────────────────────
   Hovers in the top-right of the preview waveform. Big tabular-nums
   number with a small label below. Colour shifts as the deadline
   approaches: green (60→30 s) → amber (30→10 s) → red + pulse
   (10 s → 0). Designed so the presenter can spot it from the back
   of the studio. */
.preview-wave-wrap { position: relative; }
.preview-countdown {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 16px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  border: 2px solid currentColor;
  font-variant-numeric: tabular-nums;
  color: var(--ok);
  pointer-events: none;
  transition: color .15s, transform .15s;
  z-index: 4;
}
.preview-countdown #preview-countdown-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: inherit;
}
.preview-countdown .preview-countdown-unit {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: inherit;
  opacity: .85;
}
.preview-countdown.warn { color: #d97706; }    /* amber 30→10 s */
.preview-countdown.crit { color: #dc2626; transform: scale(1.06); }  /* red <10 s */
.preview-countdown.crit #preview-countdown-num {
  animation: razor-countdown-pulse 1s steps(1, end) infinite;
}
@keyframes razor-countdown-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.transcript {
  max-height: 60vh;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--bg-line);
  border-radius: var(--r);
  background: #fff;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}
.transcript .word {
  position: relative;
  padding: 1px 2px;
  border-radius: 3px;
}
.transcript .word.cut {
  color: var(--mu-2);
  text-decoration: line-through;
  text-decoration-color: var(--err);
  text-decoration-thickness: 1.5px;
  background: var(--err-soft);
}
/* One distinct hue family per cut reason. Lighter shade for the
   word background, saturated hue for the strikethrough line. The
   waveform fills (in editor.js, REASON_FILL) use the same hues at
   medium saturation so the legend, the waveform shading and the
   transcript all read as the same cut type. */
.transcript .word.cut.silence       { background: #f0f3f7; text-decoration-color: #94a3b8; }   /* cool grey */
.transcript .word.cut.filler        { background: #fff1d6; text-decoration-color: #e8830f; }   /* gold */
.transcript .word.cut.backchannel   { background: #ffe1e8; text-decoration-color: #d33b6d; }   /* pink */
.transcript .word.cut.discourse     { background: #dff3e3; text-decoration-color: #2f9e44; }   /* green */
.transcript .word.cut.false_start   { background: #f1e7fc; text-decoration-color: #7c3aed; }   /* purple */
.transcript .word.cut.non_speech    { background: #eef0f4; text-decoration-color: #475569; }   /* slate */
.transcript .word.cut.line_check    { background: #ffeadb; text-decoration-color: #c0653e; }   /* burnt orange */
.transcript .word.cut.call_intro    { background: #fbe2c8; text-decoration-color: #a86b3b; }   /* warm tan */
.transcript .word.cut.outro         { background: #fff4cf; text-decoration-color: #b8770d; }   /* mustard */
.transcript .word.cut.manual        { background: #dfe9ff; text-decoration-color: var(--acc); } /* brand blue */
.transcript .word.cut.mixed         { background: #ffd9d9; text-decoration-color: var(--err); } /* warm red */
.transcript .word                   { cursor: pointer; }
.transcript .word:hover             { background: var(--acc-soft); }
.transcript .word.cut               { cursor: pointer; }
.transcript .word.cut:hover         { filter: brightness(0.94); }
.transcript .word.cut:hover::after  {
  content: '↺ click to restore';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -2px);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .02em;
  z-index: 2;
}
/* Per-word delete ✕. Lives inside .word, absolutely positioned at
   the top-right so it floats over the word's edge without disturbing
   line spacing. Hidden until the word is hovered. */
.transcript .word-rm {
  position: absolute;
  top: -9px;
  right: -6px;
  display: none;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--err);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 3px rgba(14,27,48,.25);
  z-index: 3;
}
.transcript .word:hover .word-rm { display: inline-block; }
.transcript .word-rm:hover { filter: brightness(1.15); }
/* Don't show ✕ inside the tooltip-on-hover-of-cut-word area */
.transcript .word.cut .word-rm { display: none; }

/* "End the call here…" mode (triggered by the toolbar button): every
   kept word becomes a click target for the new cut-to-end point.
   A faint red wash flags the mode is active; hovered word glows so
   it's obvious which one will become the new last word. */
.transcript.endhere-mode .word:not(.cut) {
  background: var(--err-soft);
  cursor: crosshair;
}
.transcript.endhere-mode .word:not(.cut):hover {
  background: var(--err-bor);
  color: var(--ink);
}
.transcript.endhere-mode .word-rm { display: none !important; }
.transcript .speaker-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mu);
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-line);
}
.transcript .speaker-tag.presenter { color: var(--acc-ink); background: var(--acc-soft); border-color: var(--acc-soft2); }
.transcript .speaker-tag           { cursor: pointer; transition: background .12s, color .12s; }
.transcript .speaker-tag:hover     { background: var(--ink); color: #fff; border-color: var(--ink); }
.transcript .speaker-tag.named     { font-style: normal; }
.transcript .speaker-tag.named::before { content: "✓ "; opacity: .7; }

.legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: var(--mu);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
}
.legend i.silence     { background: #cbd5e1; }   /* cool grey */
.legend i.filler      { background: #fbbf6b; }   /* gold */
.legend i.backchannel { background: #f59cb2; }   /* pink */
.legend i.discourse   { background: #88d39a; }   /* green */
.legend i.false_start { background: #c4a8f0; }   /* purple */
.legend i.non_speech  { background: #6b7280; }   /* slate — neutral grey-blue */
.legend i.line_check  { background: #f0a070; }   /* burnt orange */
.legend i.call_intro  { background: #d8a36b; }   /* warm tan — sibling of line_check, slightly cooler */
.legend i.outro       { background: #f7c84d; }   /* mustard */
.legend i.manual      { background: #6fa8ff; }   /* brand blue */
.legend i.mixed       { background: #f97171; }   /* warm red */

/* ── PII removal banner ─────────────────────────────────────────────── */
.pii-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 24px 0;
  padding: 14px 18px;
  background: #fff3f1;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--err);
  border-radius: var(--r);
}
.pii-banner-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--err);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pii-banner-text { flex: 1; min-width: 0; }
.pii-banner-headline {
  font-weight: 700;
  color: var(--err);
  margin-bottom: 2px;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pii-banner-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.pii-banner-sub strong { color: var(--ink); }

/* ── Queue-position card (editor page, shown while waiting) ─────────── */
.queue-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-soft2);
  border-radius: var(--r);
}
.queue-pos-badge {
  flex: 0 0 auto;
  min-width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}
.queue-pos-text { flex: 1 1 auto; }
.queue-pos-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.queue-pos-sub {
  font-size: 13px;
  color: var(--acc-ink);
}

/* ── Nav username chip ──────────────────────────────────────────────── */
.nav-user {
  font-size: 12px;
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc-soft);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: lowercase;
  letter-spacing: .02em;
}

/* ── Jobs / users table ─────────────────────────────────────────────── */
.jobs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.jobs-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg-line);
}
.jobs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--bg-line);
  vertical-align: middle;
  color: var(--ink-2);
}
.jobs-table tr:last-child td { border-bottom: none; }
.jobs-table tr:hover td { background: var(--bg-soft); }
.jobs-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.jobs-name {
  font-weight: 600;
  color: var(--ink);
}
/* Action buttons in the last column — flex row anchored right so
   Open / Download / ✕ sit on one line and never stack vertically,
   no matter how narrow the column gets. white-space: nowrap on the
   td closes the gap that whitespace between inline-block buttons
   would otherwise open. */
.jobs-table td:last-child   { white-space: nowrap; }
.jobs-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Allow very long filenames (e.g. vMix's 30-char timestamped
   naming) to wrap inside their column instead of forcing the
   whole table wider than the card. word-break:break-word breaks
   at logical boundaries first, then anywhere if needed.
   max-width caps the column so the action buttons always have
   room on the right. */
.jobs-table td:first-child  {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 280px;
}
/* Tiny safety net: if even with the column cap the buttons would
   push past the card edge (e.g. an extra Download button on a
   narrow viewport), wrap the table in a horizontal scroller so
   the user can drag-scroll instead of the action buttons
   hanging out of the card. */
.jobs-table-card  { overflow: hidden; padding: 0; }
.jobs-table-card .jobs-table-scroll { overflow-x: auto; padding: 6px 24px; }
.jobs-table-card .jobs-table        { min-width: 720px; }
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.badge-ok   { background: var(--ok-soft);  color: var(--ok);   border-color: var(--ok-bor); }
.badge-err  { background: var(--err-soft); color: var(--err);  border-color: var(--err-bor); }
.badge-info { background: var(--acc-soft); color: var(--acc-ink); border-color: var(--acc-soft2); }
.badge-mu   { background: var(--bg-soft);  color: var(--mu);   border-color: var(--bg-line); }

/* ── Inline loudness picker in the editor toolbar ───────────────────── */
.loudness-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  background: #fff;
  border: 1px solid var(--bor);
  color: var(--ink);
  cursor: pointer;
}
.loudness-select:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}

/* ── Help overlay (keyboard shortcuts) ──────────────────────────────── */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,27,48,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.help-card {
  background: #fff;
  border: 1px solid var(--bg-line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 24px 28px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.help-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}
.help-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--bg-line);
  vertical-align: top;
}
.help-table td:first-child {
  white-space: nowrap;
  width: 1%;
  padding-right: 18px;
  color: var(--ink);
}
.help-table tr:last-child td { border-bottom: none; }
kbd {
  display: inline-block;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  background: var(--bg-soft);
  border: 1px solid var(--bor);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--ink);
  line-height: 1.3;
}

/* ── Login page ─────────────────────────────────────────────────────── */
.login-body {
  background:
    radial-gradient(circle at 25% 10%, rgba(31,111,214,0.06), transparent 55%),
    radial-gradient(circle at 75% 90%, rgba(14,27,48,0.04),  transparent 50%),
    var(--bg);
}
.login-wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 96px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-card {
  width: 100%;
  padding: 32px;
}
.login-card .card-title { font-size: 22px; }