:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #dde2ea;
  --text: #1a1f2e;
  --muted: #5c667a;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --speaker-0: #5b21b6;
  --speaker-1: #0f766e;
  --speaker-2: #78716c;
  --speaker-3: #be123c;
  --speaker-4: #b45309;
  --speaker-5: #047857;
  --speaker-6: #a21caf;
  --speaker-7: #0369a1;
  --link: #1d4ed8;
  --mark: #fef08a;
  --comment-highlight: #ffe8d6;
  --error: #b91c1c;
  --coral: #e07a5f;
  --coral-hover: #cf684c;
  --btn-success: #15803d;
  --btn-success-hover: #14532d;
  --status-done: #15803d;
  --status-queue: #c2410c;
  --status-cancelled: #6b7280;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --zone-bg: #fafbfc;
  --zone-active: #eff6ff;
  --input-bg: #ffffff;
  --btn-secondary-bg: #eef2f7;
  --btn-secondary-hover: #e2e8f0;
  --track-bg: #eef2f7;
  --slider-track-inactive-lilac: #5c4d72;
  --banner-warn-bg: #fef3c7;
  --banner-warn-border: #fcd34d;
  --banner-ok-bg: #dcfce7;
  --banner-ok-border: #86efac;
  --banner-bad-bg: #fee2e2;
  --banner-bad-border: #fca5a5;
  --duplicate-bg: #eff6ff;
  --duplicate-border: #bfdbfe;
  --page-max-width: 1016px;
  --tasks-rail-width: 56px;
  --tasks-rail-btn-size: 2.25rem;
  --summary-col-min: 18rem;
  --app-content-pad-top: 1rem;
  /* Horizontal gutter: rail/list to transcript; same between transcript, summary, and the right edge */
  --app-shell-inline-gap: 0.625rem;
  --panel-inset-block-start: 0.5rem;
  --panel-inset-inline: 0.75rem;
  --panel-inset-block-end: 0.85rem;
  --control-min-height: 1.85rem;
  --control-padding: 0.28rem 0.55rem;
  --control-font-size: 0.8rem;
  --control-line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1419;
    --surface: #1a2332;
    --border: #2d3a4d;
    --text: #e8ecf1;
    --muted: #9aa8b8;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --speaker-0: #c4b5fd;
    --speaker-1: #5eead4;
    --speaker-2: #a8a29e;
    --speaker-3: #fda4af;
    --speaker-4: #fcd34d;
    --speaker-5: #6ee7b7;
    --speaker-6: #f0abfc;
    --speaker-7: #7dd3fc;
    --link: #60a5fa;
    --mark: #ca8a04;
    --error: #f87171;
    --coral: #f08070;
    --coral-hover: #f59b8e;
    --btn-success: #166534;
    --btn-success-hover: #15803d;
    --status-done: #4ade80;
    --status-queue: #fb923c;
    --status-cancelled: #9aa8b8;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --zone-bg: #151c28;
    --zone-active: #1e3a5f;
    --input-bg: #121a26;
    --btn-secondary-bg: #243044;
    --btn-secondary-hover: #2d3d55;
    --track-bg: #243044;
    --slider-track-inactive-lilac: #4a3d5c;
    --banner-warn-bg: #422006;
    --banner-warn-border: #854d0e;
    --banner-ok-bg: #14532d;
    --banner-ok-border: #166534;
    --banner-bad-bg: #7f1d1d;
    --banner-bad-border: #991b1b;
    --duplicate-bg: #1e3a5f;
    --duplicate-border: #2563eb;
    --comment-highlight: color-mix(in srgb, #e8a870 22%, var(--surface));
    --comment-accent: #e8a870;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: clip;
  max-width: 100%;
}

.hidden {
  display: none !important;
}

/* iOS Safari ignores programmatic .click() on display:none file inputs. */
.sr-only-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.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;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--tasks-sidebar-w, 440px) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-main.layout {
  margin: 0;
  min-width: 0;
}

.tasks-sidebar-host {
  display: flex;
  position: sticky;
  top: 0;
  height: var(--tasks-sidebar-h, 100dvh);
  max-height: var(--tasks-sidebar-h, 100dvh);
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg);
}

.tasks-sidebar-chrome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 var(--tasks-rail-width);
  width: var(--tasks-rail-width);
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--app-content-pad-top) 0 0.75rem;
  box-sizing: border-box;
}

.tasks-sidebar-top-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.tasks-sidebar-new-btn__glyph {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: inherit;
}

.tasks-sidebar-burger {
  display: grid;
  place-items: center;
  width: var(--tasks-rail-btn-size);
  height: var(--tasks-rail-btn-size);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.tasks-sidebar-burger.tasks-sidebar-new-btn {
  border: none;
  background: var(--accent);
  color: #fff;
}

.tasks-sidebar-burger.tasks-sidebar-new-btn:hover {
  background: var(--accent-hover);
}

.tasks-sidebar-burger:hover {
  background: var(--btn-secondary-hover);
  color: var(--text);
}

.tasks-sidebar-burger[aria-expanded="true"]:not(.tasks-sidebar-new-btn):not(:disabled),
.tasks-rail-btn.btn[aria-expanded="true"]:not(:disabled),
.tasks-rail-labels-toggle[aria-expanded="true"] {
  background: var(--btn-secondary-hover);
  color: var(--text);
}

#tasks-sidebar-toggle {
  position: relative;
}

.tasks-sidebar-burger__pip {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--mark);
  pointer-events: none;
}

.tasks-sidebar-burger__pip.hidden {
  display: none;
}

.tasks-sidebar-burger--flash {
  animation: job-nav-flash 0.42s ease-in-out 2;
}

.tasks-sidebar-burger--highlight {
  border-color: var(--status-queue);
  background: color-mix(in srgb, var(--status-queue) 14%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-queue) 35%, transparent);
}

.tasks-sidebar {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

body.tasks-sidebar--rail .tasks-sidebar {
  display: none;
}

.tasks-sidebar-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.75rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 1rem 0 0.75rem 0;
  min-width: 0;
}

.tasks-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow: hidden;
  min-width: 0;
}

.tasks-sidebar-section.card {
  padding: 0.85rem 1rem;
  margin: 0;
  --section-inline-pad: 1rem;
}

.tasks-sidebar-section .overview-summary {
  font-size: 1rem;
  margin-bottom: 0;
}

.tasks-sidebar-section[open] > .overview-summary {
  margin-bottom: 0.75rem;
}

#jobs-section,
#active-jobs-section {
  --jobs-font-section: 1.17rem;
  --jobs-font-title: 0.96rem;
  --jobs-font-body: 0.8rem;
  --jobs-font-emphasis: 0.84rem;
  --jobs-font-caption: 0.73rem;
  --jobs-font-meta: 1rem;
  --jobs-font-badge: 0.8rem;
  --jobs-font-action: 0.8rem;
  --jobs-font-filter: 0.91rem;
  --jobs-font-filter-hint: 0.84rem;
  --jobs-font-tag: 0.84rem;
  --jobs-font-empty: 0.91rem;
  --jobs-font-deleted-badge: 0.76rem;
}

#jobs-section {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#jobs-section .jobs-section-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#jobs-section .jobs-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.jobs-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-shrink: 0;
  margin: 0 0 0.5rem;
}

.jobs-recent-heading {
  flex-shrink: 0;
  margin: 0;
  font-size: 1.05rem;
}

.jobs-filters-toggle {
  position: relative;
  flex-shrink: 0;
}

.jobs-filters-toggle__icon {
  display: block;
}

.jobs-filters-section {
  flex-shrink: 0;
}

.jobs-filters-section[open] {
  margin-bottom: 0.75rem;
}

.jobs-filters-toggle .jobs-filters-active-badge {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.jobs-filters-active-badge.hidden {
  display: none;
}

.jobs-filters-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.tasks-sidebar-section[open] .jobs-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.tasks-sidebar--rail {
  --tasks-sidebar-w: var(--tasks-rail-width);
}

body.tasks-sidebar--rail .app-main.layout {
  padding-left: 0;
}

body.tasks-sidebar--expanded {
  --tasks-sidebar-w: calc(var(--tasks-rail-width) + 384px);
}

body.tasks-rail--labeled {
  --tasks-rail-width: 11rem;
}

.tasks-rail-badge {
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  --badge-bg: var(--status-queue);
  --badge-fg: #fff;
  background: var(--badge-bg);
  color: var(--badge-fg);
}

@supports (color: contrast-color(red vs white, black)) {
  .tasks-rail-badge {
    color: contrast-color(var(--badge-bg) vs #fff, #0f172a);
  }
}

.tasks-rail-badge--done {
  --badge-bg: #5c6570;
  --badge-fg: #fff;
}

.tasks-rail-badge--today {
  --badge-bg: color-mix(in srgb, var(--status-done) 72%, #fff);
  --badge-fg: #0f172a;
  font-size: 0.78rem;
  min-width: 1.5rem;
}

.tasks-rail-badge--online {
  --badge-bg: #1d6b5a;
  --badge-fg: #fff;
}

.tasks-rail-badge--share {
  --badge-bg: #6d28d9;
  --badge-fg: #fff;
}

.tasks-rail-badge--active {
  --badge-bg: var(--status-queue);
  --badge-fg: #0f172a;
}

.tasks-rail-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.tasks-rail-divider {
  width: 2rem;
  height: 1px;
  background: var(--border);
  margin: 0.1rem 0;
  flex-shrink: 0;
}

.tasks-rail-toggle {
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.55rem;
  line-height: 1;
}

.tasks-rail-toggle .dev-mode-toggle__label {
  display: block;
  font-size: inherit;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.tasks-rail-toggle .dev-mode-toggle__switch {
  width: 2rem;
  height: 1.1rem;
}

.tasks-rail-toggle .dev-mode-toggle__thumb {
  width: 0.85rem;
  height: 0.85rem;
  left: 0.12rem;
}

.tasks-rail-toggle .dev-mode-toggle__input:checked ~ .dev-mode-toggle__thumb {
  transform: translate(0.88rem, -50%);
}

#revision-show-original-wrap .dev-mode-toggle__input:checked ~ .dev-mode-toggle__track {
  background: var(--speaker-0);
  border-color: var(--speaker-0);
}

#revision-show-original-wrap .dev-mode-toggle__input:focus-visible ~ .dev-mode-toggle__track {
  outline-color: var(--speaker-0);
}

.tasks-rail-btn.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tasks-rail-btn-size);
  height: var(--tasks-rail-btn-size);
  padding: 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  line-height: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.tasks-rail-btn.btn:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
  color: var(--text);
}

.tasks-rail-btn__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  pointer-events: none;
}

.tasks-rail-btn__glyph {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.tasks-rail-btn__label {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  font-weight: 600;
  pointer-events: none;
}

.tasks-rail-logout {
  margin-top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.tasks-rail-labels-toggle {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.4rem;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.tasks-rail-labels-toggle:hover {
  background: var(--btn-secondary-hover);
  color: var(--text);
}

body.tasks-rail--labeled .tasks-sidebar-chrome {
  align-items: stretch;
  padding-inline: 0.5rem;
}

body.tasks-rail--labeled .tasks-sidebar-top-actions,
body.tasks-rail--labeled .tasks-rail-controls {
  align-items: stretch;
}

body.tasks-rail--labeled .tasks-sidebar-burger:not(.live-capture-controls__btn),
body.tasks-rail--labeled .tasks-rail-btn.btn {
  display: flex;
  width: 100%;
  height: var(--tasks-rail-btn-size);
  min-height: var(--tasks-rail-btn-size);
  justify-content: flex-start;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  gap: 0.35rem;
}

body.tasks-rail--labeled .tasks-sidebar-new-btn__glyph {
  font-size: 1.05rem;
}

body.tasks-rail--labeled .tasks-rail-btn__label {
  display: block;
}

body.tasks-rail--labeled .tasks-rail-label-short {
  display: none;
}

body.tasks-rail--labeled .tasks-rail-toggle {
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  font-size: var(--control-font-size);
  gap: 0.35rem;
}

body.tasks-rail--labeled .tasks-rail-toggle .dev-mode-toggle__label {
  font-size: var(--control-font-size);
}

body.tasks-rail--labeled .tasks-rail-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--control-font-size);
  border-radius: 0;
}

body.tasks-rail--labeled .tasks-rail-badge .tasks-rail-btn__label {
  color: var(--muted);
  font-weight: 600;
}

body.tasks-rail--labeled .tasks-rail-badge__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 0.72rem;
  font-weight: 700;
}

body.tasks-rail--labeled .tasks-rail-divider {
  width: 100%;
}

body.tasks-rail--labeled .tasks-rail-logout {
  justify-content: stretch;
}

body.tasks-rail--labeled .tasks-rail-logout .tasks-rail-btn.btn {
  width: 100%;
}

body.tasks-rail--labeled .tasks-rail-labels-toggle {
  width: 100%;
  height: var(--control-min-height);
  font-size: var(--control-font-size);
}

body.tasks-rail--labeled .live-capture-controls {
  align-items: center;
}

.app-version {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  padding: 0.2rem 0.1rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.15;
  min-height: 0;
  cursor: pointer;
  word-break: break-all;
  text-align: center;
}

.app-version:hover {
  color: var(--text);
}

.app-version:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}

.changelog-modal-body {
  margin: 0;
  font-size: var(--control-font-size);
  line-height: 1.35;
  color: var(--text);
}

.changelog-modal-body h1,
.changelog-modal-body h2,
.changelog-modal-body h3 {
  margin: 0.75rem 0 0.35rem;
  font-weight: 600;
  line-height: 1.25;
}

.changelog-modal-body h1 {
  font-size: 1.05rem;
}

.changelog-modal-body h2 {
  font-size: 0.95rem;
}

.changelog-modal-body h3 {
  font-size: 0.85rem;
}

.changelog-modal-body h1:first-child,
.changelog-modal-body h2:first-child {
  margin-top: 0;
}

.changelog-modal-body p,
.changelog-modal-body ul,
.changelog-modal-body ol,
.changelog-modal-body table {
  margin: 0 0 0.55rem;
}

.changelog-modal-body ul,
.changelog-modal-body ol {
  padding-inline-start: 2rem;
}

.changelog-modal-body li {
  margin: 0.15rem 0;
}

.changelog-modal-body table {
  width: 100%;
  border-collapse: collapse;
}

.changelog-modal-body th,
.changelog-modal-body td {
  border: 1px solid var(--border);
  padding: 0.28rem 0.45rem;
  text-align: left;
  vertical-align: top;
}

.changelog-modal-body th {
  font-weight: 600;
  background: var(--surface);
}

.maintenance-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  width: 100%;
}

.maintenance-header-status {
  max-width: 100%;
  font-size: 0.5rem;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
}

.maintenance-header-status:empty {
  display: none;
}

.gpu-degraded-chip {
  display: block;
  max-width: 100%;
  padding: 0.12rem 0.35rem;
  font-size: var(--jobs-font-caption, 0.65rem);
  line-height: 1.15;
  text-align: center;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.25rem;
  word-break: break-word;
}

.gpu-degraded-chip.hidden {
  display: none;
}

.gpu-recreate-btn {
  min-height: var(--control-min-height, 1.85rem);
  padding: var(--control-padding, 0.28rem 0.55rem);
  font-size: var(--control-font-size, 0.8rem);
  line-height: var(--control-line-height, 1.2);
}

.gpu-recreate-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.tasks-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(15, 23, 42, 0.4);
}

.tasks-sidebar-backdrop.hidden {
  display: none;
}

body.tasks-drawer-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .tasks-sidebar-host {
    position: relative;
    height: auto;
    max-height: none;
    align-self: stretch;
    border-right: none;
    width: 56px;
    overflow: hidden;
  }

  .tasks-sidebar-chrome {
    position: sticky;
    top: 0;
    height: auto;
    max-height: 100dvh;
    align-self: flex-start;
    background: var(--bg);
    z-index: 210;
  }

  .tasks-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    display: flex !important;
    width: min(320px, calc(100vw - 56px));
    height: 100dvh;
    padding: 0;
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  body.tasks-drawer-open .tasks-sidebar {
    transform: translateX(56px);
  }

  .tasks-sidebar-panel {
    padding: 1rem 0.75rem 1rem 0.5rem;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #active-jobs-section:not(.hidden) .jobs-list {
    max-height: min(14rem, 32vh);
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  .app-main.layout {
    max-width: none;
    margin: 0 auto;
    width: 100%;
    padding-left: 0;
  }

  .tasks-rail-badge,
  #revision-show-original-wrap,
  #help-btn,
  #tasks-rail-labels-toggle {
    display: none;
  }
}

@media (min-width: 901px) {
  #active-jobs-section {
    flex-shrink: 0;
  }

  #active-jobs-section:not(.hidden) .jobs-list {
    max-height: min(16rem, 36vh);
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  body.tasks-sidebar--expanded .app-main.layout {
    padding-left: var(--app-shell-inline-gap);
  }
}

.logout-form {
  flex-shrink: 0;
  margin-top: 0;
}

.dev-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.dev-mode-toggle__switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.35rem;
}

.dev-mode-toggle__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.dev-mode-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--track-bg);
  border: 1px solid var(--border);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.dev-mode-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 0.15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: translateY(-50%);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.dev-mode-toggle__input:checked ~ .dev-mode-toggle__track {
  background: var(--accent);
  border-color: var(--accent);
}

.dev-mode-toggle__input:checked ~ .dev-mode-toggle__thumb {
  transform: translate(1.15rem, -50%);
}

.dev-mode-toggle__input:focus-visible ~ .dev-mode-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .dev-mode-toggle__thumb {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  }
}

@keyframes dev-mode-flash {
  0%,
  100% {
    outline: 2px solid transparent;
    outline-offset: 2px;
    background-color: transparent;
  }
  50% {
    outline: 2px solid var(--link);
    background-color: color-mix(in srgb, var(--link) 16%, transparent);
  }
}

.dev-mode-toggle.dev-mode-toggle--flash {
  animation: dev-mode-flash 0.42s ease-in-out 8;
  border-radius: 0.35rem;
}

body:not(.dev-mode-on) .dev-mode-block {
  display: none !important;
}

.subtitle {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.success-count {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.success-count-sep {
  color: var(--muted);
}

.queue-status--free {
  color: var(--status-done);
  font-weight: 600;
}

.queue-status--busy {
  color: var(--status-queue);
  font-weight: 600;
}

.overview-summary {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.overview-summary::-webkit-details-marker {
  display: none;
}

.overview-summary::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  transition: transform 0.15s ease;
}

details[open] > .overview-summary::before {
  transform: rotate(45deg);
  vertical-align: 0.05em;
}

details.card > .overview-summary {
  margin: 0;
}

details.card[open] > .overview-summary {
  margin-bottom: 1rem;
}

.purge-ingress-block {
  flex-shrink: 0;
  margin-top: 0;
  padding: 0.85rem 1rem;
}

.purge-ingress-block .btn {
  width: 100%;
  text-align: left;
  white-space: normal;
}

.purge-ingress-status {
  display: block;
  margin-top: 0.35rem;
}

.invite-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.invite-comment-slots-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

.invite-create-form .field input[type="text"],
.invite-create-form .field input[type="number"],
.invite-create-form .field input[type="email"] {
  width: 100%;
}

.invite-comment-slots-row #invite-label {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.invite-comment-slots-row #invite-max-slots {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  min-width: 4.25rem;
  max-width: 4.25rem;
  box-sizing: border-box;
}

.invite-create-form .invite-expires-row input {
  flex: 1 1 6rem;
  min-width: 0;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

.invite-create-form .field input[type="number"] {
  padding-right: 0.35rem;
}

.invite-create-form .field input[type="number"]::-webkit-inner-spin-button,
.invite-create-form .field input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  height: var(--control-min-height);
  margin-left: 0.15rem;
}

.invite-ttl-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.invite-ttl-presets .invite-ttl-btn {
  flex: 1 1 auto;
  min-width: 4.5rem;
}

.invite-ttl-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.invite-list-item {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
}

.invite-list-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
}

.invite-list-item-row .invite-list-actions {
  margin-left: auto;
}

.invite-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.25rem;
}

.invite-list-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.invite-list-status {
  font-size: 0.78rem;
  color: var(--muted);
}

.invite-list-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.invite-list-claims {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.25rem 0 0.5rem;
}

.invite-claim-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0;
}

.invite-claim-row--pending {
  background: color-mix(in srgb, var(--status-done) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--status-done) 40%, var(--border));
  color: var(--status-done);
}

.invite-grant-pip,
.admin-nav-pip,
.login-admin-grant-pip {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  pointer-events: none;
}

.invite-list-item-row .invite-grant-pip {
  width: 0.55rem;
  height: 0.55rem;
}

.invite-grant-pip {
  animation: invite-grant-breathe 1.6s ease-in-out infinite;
}

.invite-grant-pip--static {
  animation: none;
  opacity: 0.85;
}

.invite-grant-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0.15rem;
}

.invite-grant-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.invite-grant-edit input[type="email"],
.invite-grant-edit input[type="number"] {
  flex: 1 1 8rem;
  min-width: 8rem;
}

.invite-slots-input {
  flex: 0 1 4rem;
  min-width: 3.5rem;
  width: 4rem;
}

@keyframes invite-grant-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invite-grant-pip {
    animation: none;
  }
}

.admin-nav-pip.hidden {
  display: none;
}

.login-admin-row--grant td:first-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.invite-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.invite-copy-btn--copied {
  background: color-mix(in srgb, var(--status-done) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--status-done) 40%, var(--border));
  color: var(--status-done);
}

.invite-list-url {
  display: block;
  font-size: 0.75rem;
  word-break: break-all;
  user-select: text;
  margin: 0.2rem 0 0.4rem;
}

#invite-create-status .invite-list-url {
  display: inline;
  margin: 0;
}

.job-processing-details {
  margin-top: 0.5rem;
}

.job-processing-details:not(.job-processing-details--spoiler) > .job-processing-summary {
  display: none;
}

.job-processing-summary {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
}

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

.job-processing-summary::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  transition: transform 0.15s ease;
}

.job-processing-details[open] > .job-processing-summary::before {
  transform: rotate(45deg);
  vertical-align: 0.05em;
}

.job-processing-details--spoiler[open] > .job-processing-summary {
  margin-bottom: 0.5rem;
}

.job-meta-details {
  margin-top: 0.35rem;
}

.job-meta-details > .job-meta-details__summary {
  cursor: pointer;
  list-style: none;
}

.job-meta-details > .job-meta-details__summary::-webkit-details-marker {
  display: none;
}

.job-meta-details > .job-meta-details__summary::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.35rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  transition: transform 0.15s ease;
}

.job-meta-details[open] > .job-meta-details__summary::before {
  transform: rotate(45deg);
  vertical-align: 0.05em;
}

.layout {
  margin: 0 auto;
  padding: var(--app-content-pad-top) var(--app-shell-inline-gap) 2.5rem;
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.card.job-card {
  padding: var(--panel-inset-block-start) var(--panel-inset-inline) var(--panel-inset-block-end);
}

.card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.card h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  background: var(--zone-bg);
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.retro-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  margin-right: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

#new-transcript-modal .modal-dialog__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upload-split {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.upload-split .drop-zone--split {
  flex: 1;
  padding: 1.25rem 0.75rem;
  min-width: 0;
}

.upload-split .drop-zone-optional-hint {
  margin: 0.4rem 0 0;
  text-align: center;
}

@media (max-width: 640px) {
  .upload-split {
    flex-direction: column;
  }
}

.drop-zone.dragover {
  border-color: var(--accent);
  background: var(--zone-active);
}

.drop-zone.upload-picker-locked {
  cursor: not-allowed;
  opacity: 0.65;
}

.drop-zone-title {
  margin: 0;
  font-weight: 600;
}

.drop-zone-hint {
  margin: 0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.file-name {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  word-break: break-all;
}

.upload-privacy-note {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.4;
}

.live-capture-rail-btn {
  position: relative;
}

.live-capture-rail-btn__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
}

.live-capture-rail-btn__dot {
  display: none;
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--coral);
}

.live-capture-rail-btn.is-recording {
  border-color: var(--coral);
  color: var(--coral);
}

.live-capture-rail-btn.is-recording .live-capture-rail-btn__dot,
.live-capture-rail-btn.is-paused .live-capture-rail-btn__dot {
  display: block;
}

.live-capture-rail-btn.is-recording .live-capture-rail-btn__dot {
  animation: live-capture-pulse 1.2s ease-in-out infinite;
}

.live-capture-rail-btn.is-paused .live-capture-rail-btn__dot {
  background: var(--muted);
}

@keyframes live-capture-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.live-capture-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.live-capture-controls__btn--stop {
  border: none;
  background: var(--coral);
  color: #fff;
}

.live-capture-controls__btn--stop:hover:not(:disabled) {
  background: var(--coral-hover);
}

.live-capture-status {
  position: fixed;
  z-index: 340;
  left: calc(var(--tasks-rail-width) + var(--app-shell-inline-gap));
  top: var(--app-content-pad-top);
  max-width: 18rem;
  margin: 0;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-shadow: var(--shadow);
  display: none;
}

.live-capture-status:not(.hidden) {
  display: block;
}

.live-capture-session-card {
  position: fixed;
  z-index: 340;
  left: calc(var(--tasks-rail-width) + var(--app-shell-inline-gap));
  top: var(--app-content-pad-top);
  max-width: 22rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  font-size: var(--control-font-size);
  line-height: 1.35;
  color: var(--text);
  background: color-mix(in srgb, var(--coral) 8%, var(--panel, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--coral) 35%, var(--border));
  border-radius: 0.35rem;
  box-shadow: var(--shadow);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.live-capture-session-card.is-dragging {
  cursor: grabbing;
}

.live-capture-session-card.is-paused {
  opacity: 0.92;
}

.live-capture-session-card__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.live-capture-session-card__source {
  margin: 0 0 0.25rem;
  word-break: break-word;
}

.live-capture-session-card__state {
  margin: 0;
  color: var(--muted);
}

.live-capture-session-card__upload {
  margin-top: 0.35rem;
}

.live-capture-session-card__upload-track {
  height: 0.35rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}

.live-capture-session-card__upload-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease;
}

.live-capture-session-card.is-submitting .live-capture-session-card__upload-fill {
  background: color-mix(in srgb, var(--accent) 75%, var(--coral));
}

.live-capture-session-card__upload-label {
  margin: 0.2rem 0 0;
  font-size: var(--jobs-font-caption, 0.72rem);
  color: var(--muted);
}

.live-capture-session-card__hint {
  margin: 0.35rem 0 0;
  color: var(--coral);
}

.live-capture-voice-note-btn {
  margin-top: 0.35rem;
  width: 100%;
}

.live-capture-voice-notes-list {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--control-font-size);
}

.live-capture-voice-notes-list.hidden {
  display: none;
}

#context-voice-note-here-btn.is-recording,
#live-capture-voice-note-btn.is-recording {
  color: var(--coral);
  border-color: color-mix(in srgb, var(--coral) 45%, var(--border));
}

.context-voice-notes-pending {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.context-voice-notes-pending.hidden {
  display: none;
}

.context-voice-note-pending-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.context-note-voice-row {
  align-items: center;
}

.context-note-audio {
  width: min(100%, 14rem);
  height: 1.85rem;
}

.context-note-asr-pending {
  color: var(--muted);
  font-size: var(--control-font-size);
}

.live-transcript-draft {
  position: fixed;
  z-index: 339;
  left: calc(var(--tasks-rail-width) + var(--app-shell-inline-gap));
  top: calc(var(--app-content-pad-top) + 3.2rem);
  max-width: 22rem;
  max-height: 12rem;
  overflow: auto;
  margin: 0;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-shadow: var(--shadow);
}

.live-transcript-draft p {
  margin: 0 0 0.35rem;
}

.live-capture-silence-toast {
  position: fixed;
  z-index: 360;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  max-width: min(22rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--coral) 35%, var(--border));
  background: color-mix(in srgb, var(--coral) 8%, var(--panel, var(--surface)));
  box-shadow: var(--shadow);
}

.live-capture-silence-toast__text {
  margin: 0 0 0.45rem;
  font-size: var(--control-font-size);
  line-height: 1.35;
}

.live-capture-silence-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.live-capture-notice-toast {
  bottom: 5.75rem;
  z-index: 359;
}

@media (min-width: 901px) {
  .live-capture-notice-toast {
    display: none;
  }
}

.live-capture-top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 348;
  pointer-events: none;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-weight: 600;
  background: var(--banner-warn-bg);
  border-bottom: 1px solid var(--banner-warn-border);
}

.live-capture-top-banner--notice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  pointer-events: auto;
}

.live-capture-top-banner--notice .btn {
  flex-shrink: 0;
  font-weight: 600;
}

#maintenance-toast:not(.hidden) ~ .live-capture-top-banner {
  top: 2.75rem;
}

#stale-build-toast:not(.hidden) ~ .live-capture-top-banner {
  top: 2.75rem;
}

#maintenance-toast:not(.hidden) ~ #stale-build-toast:not(.hidden) ~ .live-capture-top-banner {
  top: 5.5rem;
}

.retention-note {
  display: block;
  margin-top: 0.25rem;
}

.form-grid {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
}

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

.form-grid-compact {
  gap: 0.45rem 1rem;
  margin: 0.75rem 0 0.5rem;
  align-items: start;
}

.form-grid-compact .field {
  gap: 0.2rem;
  font-size: 0.85rem;
}

.form-grid-compact .field-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.form-grid-compact .field-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--control-min-height);
}

.form-grid-compact .field-checkbox .checkbox-row {
  margin-top: 0;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.form-grid-compact .meeting-start-row input {
  min-width: 5.5rem;
}

.form-grid-compact .field-hint {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.form-grid-compact .field-hint-tight {
  margin-top: 0;
}

.form-grid-compact .field-hint + .field-hint {
  margin-top: 0;
}

.form-grid-compact .range-row {
  gap: 0.5rem;
}

.range-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.range-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.range-row output {
  flex-shrink: 0;
  min-width: 2.5rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

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

.field-inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.field-slider {
  gap: 0.4rem;
}

.field-slider-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  min-width: 0;
  max-width: 100%;
}

.field-slider-label {
  color: var(--muted);
  flex: 0 1 auto;
  max-width: 100%;
}

.field-slider-row > input[type="range"] {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
}

#merge-gap-value.merge-gap-value--default {
  color: var(--status-done);
}

#merge-gap-value.merge-gap-value--magnet {
  color: var(--coral);
}

@media (prefers-color-scheme: dark) {
  #merge-gap-value.merge-gap-value--magnet {
    color: var(--speaker-4);
  }
}

#merge-gap-value.merge-gap-value--plain {
  color: var(--muted);
}

.field-slider-row output {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}

.field-slider > .field-hint,
.field-slider > .confidence-pending,
.field-slider > .confidence-unavailable {
  margin-top: 0;
  flex: none;
  width: 100%;
}

@media (max-width: 480px) {
  .field-slider-label {
    flex: 1 0 100%;
  }

  .field-slider-row > input[type="range"] {
    flex: 1 1 calc(100% - 3.5rem);
  }
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
select,
.combobox {
  padding: var(--control-padding);
  min-height: var(--control-min-height);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  font-family: inherit;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  background: var(--input-bg);
  color: var(--text);
}

select,
.combobox {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.65rem;
  accent-color: var(--accent);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 0.95rem) calc(50% - 0.12rem),
    calc(100% - 0.65rem) calc(50% - 0.12rem);
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

select:focus-visible,
.combobox:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}

.meeting-start-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.meeting-start-row input {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.meeting-start-row #invite-expires-date {
  flex: 0 0 8.5rem;
  max-width: 8.5rem;
}

.meeting-start-row input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.meeting-date-picker {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 6rem;
  min-width: 0;
  max-width: 100%;
}

.meeting-date-picker > #invite-expires-date {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.meeting-date-picker__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--btn-secondary-bg);
  color: var(--muted);
  cursor: pointer;
}

.meeting-date-picker__toggle:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
  color: var(--accent);
}

.meeting-date-picker__toggle:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.meeting-date-picker__popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  width: min(17.5rem, 92vw);
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.meeting-date-picker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.meeting-date-picker__month-label {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.meeting-date-picker__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--btn-secondary-bg);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.meeting-date-picker__nav-btn:hover {
  background: var(--btn-secondary-hover);
  color: var(--accent);
}

.meeting-date-picker__weekdays,
.meeting-date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.15rem;
}

.meeting-date-picker__weekdays {
  margin-bottom: 0.25rem;
}

.meeting-date-picker__weekday {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.meeting-date-picker__pad {
  display: block;
  aspect-ratio: 1;
}

.meeting-date-picker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border-radius: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.meeting-date-picker__day:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.meeting-date-picker__day.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.meeting-date-picker__day.is-today:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
}

.field-checkbox .checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

.checkbox-row > input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  min-height: 1.1rem;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background-color: var(--input-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem 0.75rem;
  cursor: pointer;
}

.checkbox-row > input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}

.checkbox-row > input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.checkbox-row > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-checkbox .checkbox-row > span {
  min-width: 0;
}

.field-checkbox .checkbox-row--with-hint {
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.checkbox-row-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.field-asr-mode {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

@media (min-width: 560px) {
  .field-asr-mode {
    grid-column: 1 / -1;
  }

  .field-checkbox--span {
    grid-column: 1 / -1;
  }
}

.asr-mode-slider {
  --asr-mode-label-gap: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.asr-mode-slider__track-area {
  /* Inset track so end ticks sit over label centers (1/6 and 5/6 of the label grid). */
  padding: 0.35rem calc((100% - 2 * var(--asr-mode-label-gap)) / 6) 0;
}

.asr-mode-slider__rail {
  position: relative;
  height: 1.25rem;
  --track-bg: var(--slider-track-inactive-lilac);
}

.asr-mode-slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--asr-mode-progress, 0%),
    var(--track-bg) var(--asr-mode-progress, 0%),
    var(--track-bg) 100%
  );
  pointer-events: none;
}

.asr-mode-slider__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 1px;
}

.asr-mode-slider__tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.55;
}

.asr-mode-slider__input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.asr-mode-slider__input:focus {
  outline: none;
}

.asr-mode-slider__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.asr-mode-slider__input::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}

.asr-mode-slider__input::-moz-range-track {
  height: 2px;
  background: transparent;
}

.asr-mode-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.asr-mode-slider__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.asr-mode-slider__input:not(:disabled):hover::-webkit-slider-thumb {
  transform: scale(1.08);
}

.asr-mode-slider__input:not(:disabled):hover::-moz-range-thumb {
  transform: scale(1.08);
}

.asr-mode-slider__input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.asr-mode-slider__labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem var(--asr-mode-label-gap);
}

.asr-mode-slider__label {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: color 0.12s ease;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 0.35rem;
}

.asr-mode-eta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78em;
  color: var(--muted);
  white-space: nowrap;
}

.asr-mode-eta.hidden {
  display: none;
}

.asr-slot-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.asr-slot-dot--free {
  background: #16a34a;
}

.asr-slot-dot--busy {
  background: #ea580c;
}

.asr-mode-eta__time {
  font-variant-numeric: tabular-nums;
}

.asr-mode-slider__label:first-child {
  text-align: left;
}

.asr-mode-slider__label:last-child {
  text-align: right;
}

.asr-mode-slider__label.is-active {
  color: var(--text);
}

.asr-mode-slider__label.is-active .asr-mode-slider__hint {
  color: var(--muted);
  font-weight: 400;
}

.asr-mode-slider__label .asr-mode-slider__model.job-slot-badge {
  font-size: 0.85em;
}

.asr-mode-slider__label--disabled,
.asr-mode-slider__label:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.asr-mode-slider__label:not(:disabled):hover {
  color: var(--text);
}

@media (max-width: 520px) {
  .asr-mode-slider {
    --asr-mode-label-gap: 0.35rem;
  }

  .asr-mode-slider__labels {
    gap: 0.25rem var(--asr-mode-label-gap);
  }

  .asr-mode-slider__label {
    font-size: 0.72rem;
  }
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

#asr-loudness-hint {
  text-align: center;
}

.field-hint.gpu-unavailable {
  color: var(--error);
}

input[type="range"] {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.btn {
  border: none;
  border-radius: 6px;
  padding: var(--control-padding);
  font: inherit;
  font-size: var(--control-font-size);
  font-weight: 600;
  line-height: var(--control-line-height);
  min-height: var(--control-min-height);
  cursor: pointer;
  max-width: 100%;
}

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

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-sm {
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  min-height: var(--control-min-height);
  border-radius: 5px;
  white-space: nowrap;
}

.btn-coral {
  background: var(--coral);
  color: #fff;
}

.btn-coral:hover:not(:disabled) {
  background: var(--coral-hover);
}

.btn-success {
  background: var(--btn-success);
  color: #fff;
}

.btn-success:hover:not(:disabled) {
  background: var(--btn-success-hover);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
  max-width: 100%;
  min-width: 0;
}

.btn-label--short {
  display: none;
}

#copy-btn .btn-label--long,
#revision-start .btn-label--long,
#revision-exit-edit .btn-label--long {
  display: none;
}

#copy-btn .btn-label--short,
#revision-start .btn-label--short,
#revision-exit-edit .btn-label--short {
  display: inline;
}

.btn-export-icon {
  display: none;
}

.btn-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.upload-actions {
  margin-top: 0;
}

.btn:is(a) {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.error {
  margin: 0.75rem 0 0;
  color: var(--error);
  font-size: 0.9rem;
}

.gpu-sparkline {
  margin: 0.35rem 0 0.5rem;
}

.gpu-sparkline__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.gpu-sparkline__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.gpu-sparkline__chart {
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: 28px;
  width: 100%;
}

.gpu-sparkline__slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.gpu-sparkline__bar {
  width: 100%;
  min-width: 2px;
  border-radius: 1px;
  opacity: 0.72;
}

.gpu-sparkline__bar--current {
  opacity: 1;
}

.gpu-sparkline__bar--low {
  background: var(--status-done);
}

.gpu-sparkline__bar--mid {
  background: var(--status-queue);
}

.gpu-sparkline__bar--high {
  background: var(--error);
}

.gpu-sparkline__bar--upload {
  background: var(--accent);
}

.upload-busy .gpu-sparkline {
  margin-top: 0.5rem;
}

.progress-wrap {
  height: 8px;
  background: var(--track-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-panel.is-active .progress-bar {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-hover) 50%,
    var(--accent) 100%
  );
  background-size: 200% 100%;
  animation: progress-shimmer 1.4s ease-in-out infinite;
}

@keyframes progress-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.progress-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.pipeline-strip {
  --pipeline-progress: 0%;
  list-style: none;
  margin: 0.35rem 0 0.65rem;
  padding: 0.35rem 0 0.15rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pipeline-strip::before {
  content: "";
  position: absolute;
  top: 1.95rem;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.pipeline-strip::after {
  content: "";
  position: absolute;
  top: 1.95rem;
  left: 5%;
  width: var(--pipeline-progress);
  max-width: 90%;
  height: 2px;
  background: var(--status-done);
  z-index: 0;
}

.pipeline-stage {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.pipeline-stage__icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.4rem;
  border-radius: var(--radius);
  background: var(--zone-bg);
  border: 1.5px solid var(--border);
  color: var(--muted);
}

.pipeline-stage__icon-img {
  width: 28px;
  height: 28px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-mask);
  mask-image: var(--icon-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pipeline-stage__badge {
  position: absolute;
  top: -5px;
  right: -6px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.28rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}

.pipeline-stage__badge--pct {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  min-width: 2.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pipeline-stage__check {
  position: absolute;
  top: -5px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--status-done);
  color: #fff;
  box-shadow: 0 0 0 2px var(--zone-bg);
  line-height: 0;
}

.pipeline-stage__check svg {
  display: block;
}

.pipeline-stage__label {
  display: block;
  font-size: clamp(0.78rem, 1.7vw, 0.88rem);
  line-height: 1.2;
  color: var(--muted);
  min-height: 2.4em;
  overflow-wrap: anywhere;
}

.pipeline-stage__label--short {
  display: none;
}

.pipeline-stage.is-done .pipeline-stage__icon-wrap {
  border-color: var(--status-done);
  color: var(--status-done);
  background: color-mix(in srgb, var(--status-done) 16%, var(--zone-bg));
}

.pipeline-stage.is-done .pipeline-stage__label {
  color: var(--status-done);
}

.pipeline-stage.is-active .pipeline-stage__icon-wrap {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--zone-active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: pipeline-pulse 1.4s ease-in-out infinite;
}

.pipeline-stage.is-active .pipeline-stage__label {
  color: var(--accent-hover);
  font-weight: 600;
}

.pipeline-stage.is-future .pipeline-stage__icon-wrap {
  opacity: 0.55;
}

.pipeline-stage.is-skip .pipeline-stage__icon-wrap,
.pipeline-stage.is-skip .pipeline-stage__label {
  opacity: 0.35;
}

.pipeline-stage.is-error .pipeline-stage__icon-wrap {
  border-color: var(--error);
  color: var(--error);
}

.pipeline-stage.is-error .pipeline-stage__label {
  color: var(--error);
}

@keyframes pipeline-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@media (max-width: 719px) {
  .layout {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card {
    padding: 1rem 0.9rem;
  }

  .pipeline-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem 0.35rem;
  }

  .pipeline-strip::before,
  .pipeline-strip::after {
    display: none;
  }

  .pipeline-stage__icon-wrap {
    width: 40px;
    height: 40px;
  }

  .pipeline-stage__icon-img {
    width: 24px;
    height: 24px;
  }

  .pipeline-stage__label--long {
    display: none;
  }

  .pipeline-stage__label--short {
    display: block;
    font-size: 0.75rem;
    min-height: 2.2em;
  }

  .field-inline {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .field-inline > span:first-of-type {
    flex: none;
  }

  .field-inline input[type="range"] {
    width: 100%;
  }

  .field-inline output {
    align-self: flex-end;
  }

  .field-inline .range-row,
  .field-inline .meeting-start-row {
    width: 100%;
  }

  .meeting-start-field .meeting-start-row {
    flex: 1 1 100%;
    width: 100%;
  }

  .form-grid-compact .meeting-start-row input {
    min-width: 0;
  }

  .btn-row > .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .btn-label--long {
    display: none;
  }

  .btn-label--short {
    display: inline;
  }

  .transcript-action-row,
  .revision-toolbar,
  .context-panel-toolbar {
    gap: 0.35rem;
  }

  .transcript-action-row .btn-row > .btn,
  .context-panel-toolbar > .btn {
    flex: 0 1 auto;
  }

  .job-export-actions .btn-export {
    min-width: var(--control-min-height);
  }

  .job-export-actions .btn-export .btn-export-icon {
    display: block;
  }

  .context-panel .btn-export .btn-export-icon {
    display: block;
  }
}

@media (max-width: 380px) {
  .pipeline-stage__icon-wrap {
    width: 36px;
    height: 36px;
  }

  .btn-row > .btn {
    flex: 1 1 100%;
  }

  .transcript-action-row .btn-row > .btn,
  .context-panel-toolbar > .btn {
    flex: 0 1 auto;
  }

  .meeting-start-row {
    flex-direction: column;
  }

  .meeting-start-row input {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-stage.is-active .pipeline-stage__icon-wrap {
    animation: none;
  }

  .job-nav-target--flash,
  .job-list-item--flash,
  .tasks-sidebar-burger--flash {
    animation: none;
    outline: 2px solid var(--status-queue);
    outline-offset: 2px;
    background-color: color-mix(in srgb, var(--status-queue) 16%, transparent);
  }

  .job-nav-target--reveal {
    animation: none;
    outline: 2px solid color-mix(in srgb, var(--status-queue) 55%, transparent);
    outline-offset: 2px;
    background-color: color-mix(in srgb, var(--status-queue) 18%, transparent);
  }
}

.braille-spinner {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--accent);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", monospace;
}

.job-list-meta .braille-spinner-live {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.05em;
  margin-right: 0.15rem;
}

.upload-busy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  background: var(--zone-bg);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

.upload-busy .pipeline-strip--compact {
  flex: 1 1 100%;
  margin: 0.25rem 0 0;
}

.upload-busy-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.upload-stop-btn {
  margin-left: auto;
  flex: 0 0 auto;
}

.job-stage-detail {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}

.job-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.job-heading-label,
h1.job-heading-label {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--muted);
}

.job-meta {
  margin: 0.4rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

#job-heading,
.job-meta {
  cursor: pointer;
}

@keyframes job-nav-flash {
  0%,
  100% {
    outline: 2px solid transparent;
    outline-offset: 2px;
    background-color: transparent;
  }
  50% {
    outline: 2px solid color-mix(in srgb, var(--status-queue) 70%, transparent);
    background-color: color-mix(in srgb, var(--status-queue) 16%, transparent);
  }
}

@keyframes job-nav-reveal-fade {
  0% {
    background-color: color-mix(in srgb, var(--status-queue) 18%, transparent);
    outline: 2px solid color-mix(in srgb, var(--status-queue) 55%, transparent);
    outline-offset: 2px;
  }
  100% {
    background-color: transparent;
    outline-color: transparent;
  }
}

.job-nav-target--flash {
  border-radius: 0.35rem;
  animation: job-nav-flash 0.42s ease-in-out 2;
}

.job-nav-target--reveal {
  border-radius: 0.35rem;
  animation: job-nav-reveal-fade 4s ease-out forwards;
}

.job-meta-owner {
  background: var(--comment-highlight);
  border-radius: 0.2rem;
  padding: 0.05rem 0.3rem;
}

.job-slot-badge {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  vertical-align: baseline;
  white-space: nowrap;
}

.job-slot-badge--gigaam {
  color: var(--speaker-0);
  background: color-mix(in srgb, var(--speaker-0) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--speaker-0) 38%, transparent);
}

.job-slot-badge--whisper {
  color: var(--status-queue);
  background: color-mix(in srgb, var(--status-queue) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--status-queue) 38%, transparent);
}

.job-slot-badge--cpu,
.job-slot-badge--other {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}

.job-slot-badge--pending {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--muted) 35%, transparent);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.job-slot-badge--gpu {
  letter-spacing: normal;
  text-transform: none;
  font-weight: 600;
}

.job-list-meta .job-slot-badge {
  font-size: 0.85em;
}

.load-meters {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 0.25rem;
}

.load-meter {
  display: grid;
  grid-template-columns: 2.5rem 1fr minmax(5rem, 7.5rem);
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.load-label {
  color: var(--muted);
  font-weight: 600;
}

.load-track {
  height: 6px;
  background: var(--track-bg);
  border-radius: 999px;
  overflow: hidden;
}

.load-fill {
  height: 100%;
  width: 0;
  background: #64748b;
  transition: width 0.4s ease;
}

.load-fill-gpu {
  background: #16a34a;
}

.load-value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.job-status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.poll-continue {
  margin-top: 0.75rem;
}

.meeting-start-field {
  margin-top: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}

.meeting-start-field .meeting-start-row {
  flex: 0 1 auto;
}

.meeting-start-field .field-hint-tight {
  flex: 1 0 100%;
}

.meeting-date-relative {
  font-style: italic;
}

.speakers-panel {
  margin-top: 0;
  min-width: 0;
  container-type: inline-size;
  container-name: speakers-panel;
}

.speakers-ui-block {
  margin-top: 1rem;
  min-width: 0;
}

.speakers-ui-block > .field {
  margin-bottom: 0.35rem;
}

.speakers-ui-block:has(#speakers-panel.hidden) > .field {
  display: none;
}

.speakers-ui-block .speakers-panel {
  margin-top: 0;
}

body:not(.bio-legal-on):not(.is-admin) #voices-modal-btn,
body:not(.bio-legal-on) #speaker-identity-notice,
body:not(.bio-legal-on) #upload-privacy-details-btn {
  display: none !important;
}

.tasks-rail-admin.tasks-rail-btn,
.tasks-rail-admin .tasks-rail-btn__icon {
  color: var(--coral);
}

#consent-profile-btn {
  position: relative;
}

.speaker-identity-notice {
  position: relative;
  margin-bottom: 0.75rem;
  padding: 0.55rem 1.7rem 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--banner-warn-border);
  background: var(--banner-warn-bg);
}

.speaker-identity-notice__spoiler {
  margin: 0;
}

.speaker-identity-notice__summary {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.speaker-identity-notice__summary::-webkit-details-marker {
  display: none;
}

.speaker-identity-notice__summary::before {
  content: "▸ ";
  font-weight: 400;
}

.speaker-identity-notice__spoiler[open] .speaker-identity-notice__summary::before {
  content: "▾ ";
}

.speaker-identity-notice__body {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text);
}

.speaker-identity-notice__details-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: inherit;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.speaker-identity-notice__details-btn:hover {
  color: var(--accent-hover);
}

.speaker-identity-notice__ack {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.speaker-identity-notice__ack > input[type="checkbox"] {
  width: 0.8rem;
  height: 0.8rem;
  min-width: 0.8rem;
  min-height: 0.8rem;
  margin-top: 0.13em;
  background-size: 0.55rem 0.55rem;
}

.speaker-identity-notice__outdated {
  margin: 0 0 0.45rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text);
}

.speaker-identity-changelog {
  margin-top: 0.75rem;
  max-height: 40vh;
  overflow: auto;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.45;
  background: var(--surface);
}

.speaker-row input.speaker-input--gated {
  opacity: 0.72;
  cursor: not-allowed;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  z-index: 50;
}

#bio-voice-conflicts-backdrop {
  /* Above consent (51 desktop, 301 narrow) so purge/ack stay clickable. */
  z-index: 310;
}

#bio-voice-conflicts-modal {
  z-index: 311;
}

.modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(85vh, 40rem);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--text) 18%, transparent);
}

.modal-dialog--wide {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
}

#new-transcript-modal {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(90vh, 52rem);
}

.new-transcript-modal__body {
  display: grid;
  gap: 1rem;
}

#new-transcript-modal .upload-busy {
  margin-top: 0.25rem;
}

#voices-modal {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(85vh, 44rem);
}

.voice-bank-info {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
}

.voice-bank-info p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--muted);
}

.voice-bank-info p + p {
  margin-top: 0.45rem;
}

#remarks-modal {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
}

#remarks-modal .modal-dialog__body {
  padding: 1rem 1.15rem 1.2rem;
}

#remarks-modal .modal-dialog__body ul.remarks-list {
  margin: 0;
  padding: 0;
}

#remarks-modal .modal-dialog__body li + li {
  margin-top: 0;
}

#remarks-modal-btn {
  position: relative;
}

#retro-problems-modal {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
}

#retro-problems-modal .modal-dialog__header {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.retro-problems-modal__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.retro-problems-header-meta {
  width: 100%;
}

.retro-problems-header-meta.hidden {
  display: none;
}

.retro-problems-header-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.retro-problems-header-meta #retro-problems-trend {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

.retro-problems-header-meta #retro-problems-source-note {
  margin: 0.35rem 0 0;
}

.retro-problems-header-meta .retro-problems-backfill-wrap {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

#retro-problems-modal .modal-dialog__body {
  padding: 1rem 1.15rem 1.2rem;
  position: relative;
}

.retro-problems-baseline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin: 0 0 0.5rem;
}

.retro-problems-baseline-row #retro-problems-baseline {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
}

#retro-problems-modal .retro-crit-bar-slider {
  flex: 1 1 14rem;
  max-width: 20rem;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.retro-crit-bar-slider__title {
  margin: 0;
  font-size: var(--jobs-font-caption, 0.72rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
}

.retro-problems-tabs {
  margin-top: 0.35rem;
}

.retro-problems-panel.hidden {
  display: none;
}

.retro-problems-row-tooltip {
  position: fixed;
  z-index: 6;
  max-width: min(40rem, calc(100% - 1.5rem));
  max-height: min(28rem, 65vh);
  overflow: auto;
  padding: 0.7rem 0.85rem;
  font-size: var(--jobs-font-caption, 0.73rem);
  line-height: 1.45;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
}

.retro-problems-row-tooltip--crit-medium,
.retro-problems-row-tooltip--crit-low {
  background: color-mix(in srgb, #fff9c4 72%, var(--surface));
  border-color: color-mix(in srgb, var(--banner-warn-border) 55%, var(--border));
}

.retro-problems-row-tooltip--crit-high {
  background: color-mix(in srgb, var(--comment-highlight) 78%, var(--surface));
  border-color: color-mix(in srgb, var(--status-queue) 35%, var(--border));
}

.retro-problems-row-tooltip p {
  margin: 0 0 0.45rem;
}

.retro-problems-row-tooltip ol,
.retro-problems-row-tooltip ul {
  margin: 0 0 0.45rem;
  padding-left: 1.1rem;
}

/* Row fill on td (tr background is unreliable in tables); mix with surface for dark mode */
.retro-problems-table tr.retro-problems-item--crit-high td {
  background: color-mix(in srgb, var(--error) 20%, var(--surface));
}

.retro-problems-table tr.retro-problems-item--crit-medium td {
  background: color-mix(in srgb, var(--banner-warn-bg) 58%, var(--surface));
}

.retro-problems-table tr.retro-problems-item--crit-low td {
  background: transparent;
}

.retro-problems-sort-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

.retro-problems-sort-label {
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--muted);
}

.retro-problems-sort {
  min-width: 8rem;
}

.retro-problems-source-note {
  color: var(--muted);
}

.retro-problems-table {
  width: 100%;
  margin: 0.75rem 0 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.retro-problems-table th,
.retro-problems-table td {
  padding: 0.35rem 0.55rem 0.35rem 0;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.retro-problems-table th {
  font-weight: 600;
  font-size: var(--jobs-font-caption, 0.72rem);
  color: var(--muted);
}

.retro-problems-table th:nth-child(2),
.retro-problems-table td:nth-child(2) {
  width: 8rem;
}

.retro-problems-table th:nth-child(3),
.retro-problems-table td:nth-child(3) {
  width: 3.75rem;
}

.retro-problems-table th:nth-child(4),
.retro-problems-table td:nth-child(4) {
  width: 5.75rem;
  padding-right: 0;
}

.retro-problems-table tr:last-child td {
  border-bottom: none;
}

.retro-problems-item--has-tip {
  cursor: pointer;
}

.retro-problems-table tr.retro-problems-item--tip-open.retro-problems-item--crit-high td {
  background: color-mix(in srgb, var(--error) 34%, var(--surface));
}

.retro-problems-table tr.retro-problems-item--tip-open.retro-problems-item--crit-medium td {
  background: color-mix(in srgb, var(--banner-warn-bg) 76%, var(--surface));
}

.retro-problems-table tr.retro-problems-item--tip-open.retro-problems-item--crit-low td {
  background: color-mix(in srgb, #fff9c4 32%, var(--surface));
}

.retro-problems-title-cell {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  overflow-wrap: anywhere;
}

.retro-problems-project {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-problems-crit {
  flex: 0 0 auto;
  width: 0.5rem;
  min-height: 1.35em;
  align-self: stretch;
  border-radius: 0.12rem;
}

.retro-problems-crit--high {
  background: var(--error);
}

.retro-problems-crit--medium {
  background: var(--status-queue);
}

.retro-problems-crit--low {
  background: var(--accent);
}

.retro-problems-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.retro-problems-title--high {
  color: var(--error);
}

.retro-problems-title--medium {
  color: var(--status-queue);
}

.retro-problems-title--low {
  color: var(--accent);
}

.retro-problems-meta {
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.retro-problems-delta {
  font-size: var(--jobs-font-tag, 0.72rem);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.08rem 0.35rem;
  border-radius: 0.25rem;
}

.retro-problems-delta--add {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.retro-problems-delta--resolved {
  color: var(--btn-success);
  background: color-mix(in srgb, var(--btn-success) 12%, transparent);
}

.retro-problems-mentions {
  font-size: var(--jobs-font-caption, 0.72rem);
  color: var(--muted);
}

.retro-problems-trend {
  font-size: var(--control-font-size);
  line-height: 1.35;
  color: var(--text);
}

.retro-problems-trend__n {
  font-weight: 600;
}

.retro-problems-trend__n--add {
  color: var(--error);
}

.retro-problems-trend__n--resolved {
  color: var(--btn-success);
}

.retro-problems-trend__n--zero {
  color: var(--muted);
}

.retro-maturity-section {
  margin: 0.35rem 0 0;
  padding-top: 0;
  border-top: none;
}

.retro-maturity-section__title {
  margin: 0 0 0.35rem;
  font-size: var(--control-font-size);
  font-weight: 600;
  line-height: 1.3;
}

.retro-maturity-summary {
  margin: 0 0 0.5rem;
}

.retro-maturity-table {
  margin-top: 0.35rem;
}

.retro-maturity-table.retro-problems-table th,
.retro-maturity-table.retro-problems-table td {
  padding: 0.35rem 0.55rem;
}

.retro-maturity-table.retro-problems-table th:nth-child(1),
.retro-maturity-table.retro-problems-table td:nth-child(1) {
  width: 14%;
}

.retro-maturity-table.retro-problems-table th:nth-child(2),
.retro-maturity-table.retro-problems-table td:nth-child(2) {
  width: 8%;
}

.retro-maturity-table.retro-problems-table th:nth-child(3),
.retro-maturity-table.retro-problems-table td:nth-child(3) {
  width: auto;
}

.retro-maturity-table th:nth-child(4),
.retro-maturity-table td:nth-child(4) {
  width: 4.5rem;
  min-width: 3.5rem;
  text-align: right;
  white-space: nowrap;
}

.retro-maturity-table th:nth-child(5),
.retro-maturity-table td:nth-child(5) {
  width: 6.5rem;
  min-width: 5.5rem;
  white-space: nowrap;
  text-align: left;
}

.retro-maturity-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
}

.retro-maturity-item--tier-low td {
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

.retro-maturity-item--tier-medium td {
  background: color-mix(in srgb, #ca8a04 12%, transparent);
}

.retro-maturity-item--tier-high td {
  background: color-mix(in srgb, var(--btn-success) 10%, transparent);
}

.retro-maturity-item--has-tip {
  cursor: pointer;
}

.retro-maturity-table tr.retro-maturity-item--tip-open.retro-maturity-item--tier-low td {
  background: color-mix(in srgb, var(--error) 18%, transparent);
}

.retro-maturity-table tr.retro-maturity-item--tip-open.retro-maturity-item--tier-medium td {
  background: color-mix(in srgb, #ca8a04 20%, transparent);
}

.retro-maturity-table tr.retro-maturity-item--tip-open.retro-maturity-item--tier-high td {
  background: color-mix(in srgb, var(--btn-success) 18%, transparent);
}

.retro-maturity-tier--low {
  color: var(--error);
}

.retro-maturity-tier--medium {
  color: #ca8a04;
}

.retro-maturity-tier--high {
  color: var(--btn-success);
}

#discussion-maturity-modal {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
}

#discussion-maturity-modal .modal-dialog__header {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.discussion-maturity-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
}

.discussion-maturity-axis-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.discussion-maturity-table th:nth-child(7),
.discussion-maturity-table td:nth-child(7) {
  width: 7rem;
  white-space: nowrap;
}

.discussion-maturity-axis-cells {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

.discussion-maturity-axis-dot {
  font-size: 0.75rem;
  line-height: 1;
}

.discussion-maturity-axis-dot--empty {
  color: var(--muted);
}

.discussion-maturity-axis-dot--empty::before {
  content: "·";
}

.retro-maturity-flag {
  display: inline-block;
  margin: 0;
  padding: 0.08rem 0.35rem;
  border-radius: 0.35rem;
  font-size: var(--jobs-font-caption, 0.72rem);
  line-height: 1.2;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}

.retro-maturity-title-cell {
  font-size: var(--jobs-font-body, 0.8rem);
  line-height: 1.25;
}

.retro-project-trend-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0.35rem 0 0.5rem;
}

.retro-project-trend-summary {
  margin: 0 0 0.5rem;
}

.summary-trend-bar-hint {
  margin: 0 0 0.35rem;
  font-style: italic;
}

.context-summary-trend-open-modal {
  margin: 0 0 0.5rem;
}

.retro-project-trend-axes {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.retro-project-trend-axis {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
}

.retro-project-trend-axis__title {
  font-size: var(--jobs-font-caption, 0.72rem);
  font-weight: 600;
  color: var(--text);
}

.retro-project-trend-axis__text {
  font-size: var(--control-font-size);
  line-height: 1.35;
  color: var(--muted);
}

.retro-project-trend-axis--ok {
  border-color: color-mix(in srgb, var(--btn-success) 35%, var(--border));
}

.retro-project-trend-axis--warn {
  border-color: color-mix(in srgb, #ca8a04 45%, var(--border));
  background: color-mix(in srgb, #ca8a04 8%, var(--surface));
}

.retro-project-trend-axis--alert {
  border-color: color-mix(in srgb, var(--error) 45%, var(--border));
  background: color-mix(in srgb, var(--error) 8%, var(--surface));
}

.retro-project-trend-axis--na {
  opacity: 0.85;
}

.retro-project-trend-recent-table {
  margin-top: 0.35rem;
}

.retro-problems-backfill-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.retro-problems-backfill-wrap.hidden {
  display: none;
}

.retro-problems-backfill-wrap > .field-hint {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.retro-problems-loading {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--control-font-size);
}

.tasks-rail-btn__pip {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}

.ui-hidden-dismiss,
.ui-hidden-restore {
  border: none;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  padding: 0.05rem 0.25rem;
}

.ui-hidden-dismiss {
  position: absolute;
  top: 0.25rem;
  right: 0.2rem;
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
}

.ui-hidden-dismiss:hover,
.ui-hidden-dismiss:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.ui-hidden-field-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ui-hidden-field-head .ui-hidden-dismiss {
  position: static;
}

.ui-pref-hidden {
  display: none !important;
}

.ui-processing-gated {
  display: none !important;
}

.ui-hidden-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.ui-hidden-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

.ui-hidden-list li span:not(.ui-hidden-row-pip) {
  flex: 1 1 auto;
}

.ui-hidden-row-pip {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.remarks-add-form {
  margin: 0 0 1rem;
}

.remarks-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.remarks-add-form input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.35rem 0.5rem;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
}

#remarks-add-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.remarks-add-form input::placeholder {
  font-weight: 400;
  color: var(--muted);
}

.remarks-add-form input:hover,
.remarks-add-form input:focus {
  outline: none;
  border-color: var(--border);
  background: var(--input-bg);
}

.remarks-form-status:empty {
  display: none;
}

.remarks-form-status {
  margin: 0.45rem 0 0;
}

.remarks-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.remarks-list {
  list-style: none;
}

.remarks-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem 0.55rem;
  padding: 0.7rem 0.1rem;
  border-top: 1px solid var(--border);
}

.remarks-item-check {
  display: flex;
  align-items: center;
  margin: 0.35rem 0 0;
  cursor: pointer;
}

.remarks-item-check input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}

.remarks-item-num {
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
  user-select: none;
}

.remarks-item-body {
  min-width: 0;
}

.remarks-tour-badge {
  display: inline-block;
  margin: 0 0 0.35rem;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.remarks-item-text {
  margin: 0;
  white-space: pre-wrap;
}

.remarks-item-meta {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.remarks-item--closed .remarks-item-text,
.remarks-item--closed .remarks-item-edit {
  text-decoration: line-through;
  opacity: 0.78;
}

.remarks-item-remove {
  margin-top: 0.15rem;
  padding: 0.1rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.3rem;
}

.remarks-item-remove:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.remarks-item-edit {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 0.2rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}

.remarks-item-edit:hover,
.remarks-item-edit:focus {
  outline: none;
  border-color: var(--border);
  background: var(--input-bg);
}

.admin-modal-section + .admin-modal-section {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.admin-modal-section h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.platform-admin-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
}

.platform-admin-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.platform-admin-toggle .dev-mode-toggle:has(.dev-mode-toggle__input:checked) .dev-mode-toggle__label {
  color: var(--coral);
}

.platform-admin-toggle .dev-mode-toggle__input:checked ~ .dev-mode-toggle__track {
  background: var(--coral);
  border-color: var(--coral);
}

.platform-admin-toggle .dev-mode-toggle__input:focus-visible ~ .dev-mode-toggle__track {
  outline-color: var(--coral);
}

.platform-admin-toggle .field-hint:empty {
  display: none;
}

.upload-rate-limit-panel {
  margin-top: 0.35rem;
}

.upload-rate-limit-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.upload-rl-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--surface);
}

.upload-rl-chip--low,
.upload-rl-warn {
  color: var(--error);
}

.upload-rl-warn {
  margin: 0.35rem 0 0;
  font-size: var(--control-font-size);
}

.rl-field--overridden {
  border-color: var(--accent, #2563eb);
}

.rl-enforce-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rl-enforce-tiers .checkbox-row {
  margin-top: 0;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.rl-enforce-tiers .checkbox-row.rl-field--overridden > input[type="checkbox"] {
  border-color: var(--accent, #2563eb);
}

.rl-enforce-tiers .checkbox-row input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.modal-dialog--wide .purge-ingress-block {
  padding: 0 0 0.5rem;
}

.modal-dialog--wide .purge-ingress-block .btn {
  width: auto;
}

.modal-dialog--wide .invite-list,
.modal-dialog--wide .jobs-list {
  margin: 0;
  padding: 0;
}

.modal-dialog--wide .jobs-list li + li,
.modal-dialog--wide .invite-list li + li {
  margin-top: 0;
}

.modal-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.modal-dialog__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.modal-dialog__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  padding: 0.1rem 0.35rem;
}

.admin-modal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.admin-modal-nav .btn {
  position: relative;
  flex: 1 1 auto;
  min-width: 4.5rem;
}

.admin-modal-nav .btn.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}

.admin-nav-pip {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
}

.modal-dialog__body {
  overflow: auto;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.modal-dialog__body p {
  margin: 0 0 0.75rem;
}

.modal-dialog__body ul {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.modal-dialog__body li + li {
  margin-top: 0.35rem;
}

.modal-dialog__subtitle {
  margin: 0.25rem 0 0.45rem;
  font-size: 0.92rem;
}

.modal-dialog__fine-print {
  margin: 0;
}

.modal-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.9rem;
  border-top: 1px solid var(--border);
}

#speaker-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

.speakers-panel--monologue #speaker-inputs {
  display: none;
}

.speakers-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

.speakers-options .speakers-option-toggle {
  margin: 0;
}

#voice-bank-optout-field,
.speakers-options .speakers-option-toggle .dev-mode-toggle__label,
.speakers-options .speakers-merge-gap .field-slider-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.speakers-options .speakers-option-toggle .dev-mode-toggle__switch {
  width: 2.25rem;
  height: 1.2rem;
}

.speakers-options .speakers-option-toggle .dev-mode-toggle__thumb {
  width: 0.85rem;
  height: 0.85rem;
  left: 0.12rem;
}

.speakers-options .speakers-option-toggle .dev-mode-toggle__input:checked ~ .dev-mode-toggle__thumb {
  transform: translate(0.88rem, -50%);
}

.speakers-options .speakers-merge-gap {
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
  margin: 0;
}

.speakers-options .speakers-merge-gap .field-slider-row {
  gap: 0.5rem;
}

.speakers-options .speakers-merge-gap .field-slider-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.speakers-options .speakers-merge-gap .field-slider-row input[type="range"] {
  flex: 1 1 7rem;
  min-width: 4.5rem;
}

.speakers-options .speakers-merge-gap .field-slider-row output {
  min-width: 2.75rem;
}

#voice-bank-optout-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

#voice-bank-optout-field > span {
  font-weight: 600;
}

.speaker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "id name"
    ". roles";
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.9rem;
  min-width: 0;
}

.speaker-row code {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 1.1rem;
  text-align: center;
}

.speaker-row-label {
  cursor: pointer;
}

.speaker-row-label:hover {
  text-decoration: underline;
}

.speaker-row-id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.speaker-row-dot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.speaker-row-dot:empty {
  display: none;
}

.speaker-row input {
  min-width: 0;
  width: 100%;
  font-weight: 600;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  min-height: var(--control-min-height);
  line-height: var(--control-line-height);
}

.speaker-row-name {
  grid-area: name;
  display: grid;
  grid-template-columns: 8rem auto auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.speaker-row-name .voice-bank-chips {
  flex: 0 0 auto;
  max-width: 7.5rem;
}

.speaker-row-name .voice-bank-chips .voice-bank-suggestion {
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  min-height: auto;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaker-row-name input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: 100%;
}

.speaker-row-roles {
  grid-area: roles;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.speaker-row-roles .combobox,
.speaker-row .speaker-row-roles input {
  flex: 0 0 8rem;
  min-width: 0;
  width: 8rem;
  font-weight: 400;
  order: -1;
}

.speaker-role-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.speaker-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.25;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
}

.speaker-role-chip-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
}

.speaker-role-chip-remove:hover {
  color: var(--text);
}

.speaker-role-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.speaker-role-suggest {
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.25;
  min-height: auto;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.speaker-role-suggest:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.role-catalog-admin-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.role-catalog-axis {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.5rem;
}

.speaker-picker {
  position: relative;
  min-width: 0;
  width: 100%;
}

.speaker-picker-field {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: var(--control-min-height);
}

.speaker-picker-field input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.speaker-picker-caret {
  flex: 0 0 auto;
  width: 1.65rem;
  min-height: var(--control-min-height);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 0.35rem 0.35rem 0;
  background: color-mix(in srgb, var(--surface) 88%, var(--muted));
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.speaker-picker-caret::after {
  content: "▾";
  font-size: 0.72rem;
}

.speaker-picker-caret:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.speaker-picker-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 12;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
  max-height: 14rem;
  overflow: auto;
}

.speaker-picker-section {
  padding: 0.2rem 0.65rem 0.1rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: lowercase;
}

.speaker-picker-option {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}

.speaker-picker-option:hover,
.speaker-picker-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.speaker-picker-option--self {
  font-weight: 600;
}

.speaker-picker-option--exact {
  font-weight: 700;
}

.speaker-picker-option--high {
  font-weight: 600;
}

.speaker-picker-option--mid {
  font-weight: 500;
}

.speaker-picker-option--low {
  color: var(--muted);
}

.speaker-row-actions {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.speaker-row:hover .speaker-row-actions,
.speaker-row:focus-within .speaker-row-actions {
  display: flex;
}

.voice-bank-enrolled-dot {
  width: 0.55rem;
  height: 0.55rem;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  flex: 0 0 auto;
}

.voice-bank-enrolled-dot.is-on {
  border-color: currentColor;
  background: currentColor;
}

.voice-bank-enrolled-dot.is-blocked {
  border-color: #d97706;
  background: #f59e0b;
  cursor: pointer;
}

.speaker-self-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  min-height: var(--control-min-height);
  line-height: var(--control-line-height);
}

.speaker-row-actions .voice-bank-enrol,
.speaker-row-actions .voice-bank-drop,
.speaker-row-actions .voice-bank-unbind {
  min-height: var(--control-min-height);
  padding: var(--control-padding);
  font-size: var(--control-font-size);
}

.speaker-row-actions .voice-bank-clear {
  min-width: var(--control-min-height);
  min-height: var(--control-min-height);
}

.voice-bank-enrol-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  display: block;
}

.voice-bank-enrol-glyph {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  vertical-align: middle;
  margin: 0 0.12rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--btn-secondary-bg);
  color: var(--text);
}

.voice-bank-enrol,
.voice-bank-drop,
.voice-bank-clear,
.voice-bank-unbind,
.voice-bank-suggestion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  box-sizing: border-box;
  min-height: var(--control-min-height);
  padding: var(--control-padding);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--btn-secondary-bg);
  color: var(--text);
  font-size: var(--control-font-size);
  font-weight: 500;
  line-height: var(--control-line-height);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.voice-bank-enrol:hover:not(:disabled),
.voice-bank-drop:hover:not(:disabled),
.voice-bank-clear:hover:not(:disabled),
.voice-bank-unbind:hover:not(:disabled),
.voice-bank-suggestion:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
}

.voice-bank-enrol--fail {
  border-color: var(--error);
  color: var(--error);
}

body:not(.bio-legal-on) .voice-bank-enrol,
body:not(.bio-legal-on) .voice-bank-drop,
body:not(.bio-legal-on) .voice-bank-unbind {
  display: none !important;
}

.voice-bank-clear,
.voice-bank-sample-row .voice-bank-drop {
  min-width: var(--control-min-height);
  min-height: var(--control-min-height);
  padding: 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
}

.voice-bank-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.78rem;
  min-width: 0;
}

.voice-bank-chips:empty {
  display: none;
}

.voice-bank-chips .hint {
  flex: 0 0 auto;
}

.voice-bank-suggestion--exact {
  border-color: color-mix(in srgb, var(--status-done) 55%, var(--border));
  background: color-mix(in srgb, var(--status-done) 18%, var(--surface));
  color: var(--status-done);
  font-weight: 600;
}

.voice-bank-suggestion--exact:hover:not(:disabled) {
  background: color-mix(in srgb, var(--status-done) 28%, var(--surface));
}

.voice-bank-suggestion--high {
  border-color: color-mix(in srgb, var(--status-done) 40%, var(--border));
  color: var(--status-done);
}

.voice-bank-suggestion--mid {
  color: var(--text);
}

.voice-bank-suggestion--low {
  color: var(--muted);
}

.voice-bank-enrol[disabled],
.voice-bank-drop[disabled],
.voice-bank-clear[disabled],
.voice-bank-suggestion[disabled],
.voice-bank-unbind[disabled] {
  opacity: 0.5;
  cursor: default;
}

.voice-bank-bound {
  color: var(--muted);
}

.voice-bank-screen {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.voice-bank-screen__title {
  margin: 0;
  font-size: 0.95rem;
}

.voice-bank-toolbar {
  margin: 0 0 0.75rem;
}

.voice-bank-toolbar .btn {
  width: auto;
}

#voice-bank-persons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.55rem;
  align-items: start;
}

#voice-bank-persons > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.voice-bank-person-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--zone-bg);
  font-size: 0.85rem;
}

.voice-bank-person-head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.voice-bank-person-name {
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.turn-speaker-initial {
  font-weight: 700;
}

.voice-bank-person-count {
  color: var(--muted);
  font-size: 0.78rem;
}

.voice-bank-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.voice-bank-samples:empty {
  display: none;
}

.voice-bank-sample-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.3rem 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
}

.voice-bank-sample-link {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.voice-bank-sample-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.voice-bank-sample-row .hint {
  color: var(--muted);
}

.speaker-row input.turn-speaker--0 {
  color: var(--speaker-0);
}

.speaker-row input.turn-speaker--1 {
  color: var(--speaker-1);
}

.speaker-row input.turn-speaker--2 {
  color: var(--speaker-2);
}

.speaker-row input.turn-speaker--3 {
  color: var(--speaker-3);
}

.speaker-row input.turn-speaker--4 {
  color: var(--speaker-4);
}

.speaker-row input.turn-speaker--5 {
  color: var(--speaker-5);
}

.speaker-row input.turn-speaker--6 {
  color: var(--speaker-6);
}

.speaker-row input.turn-speaker--7 {
  color: var(--speaker-7);
}

.speaker-row input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

@media (min-width: 560px) {
  @container speakers-panel (min-width: 22rem) {
    #speaker-inputs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem 1rem;
    }
  }

  @container speakers-panel (min-width: 36rem) {
    #speaker-inputs {
      grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
      gap: 0.5rem 1rem;
    }
  }

  .speaker-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "id name"
      ". roles";
    align-items: center;
    gap: 0.35rem 0.5rem;
  }

  .speaker-row-id {
    flex: 0 0 auto;
  }

  .speaker-row code {
    flex: 0 0 auto;
  }

  .speaker-row-name {
    flex: 1 1 auto;
    min-width: 0;
  }

  .speaker-row input,
  .speaker-row-name input,
  .speaker-picker-field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .speaker-picker {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

.transcript-slider-controls {
  margin-top: 0.75rem;
}

.job-processing-details + .transcript-slider-controls {
  margin-top: 0.25rem;
}

.job-audio-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.audio-player .job-audio-download {
  margin-top: 0.35rem;
}

.audio-download-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.job-audio-download .btn {
  flex: 0 0 auto;
}

.job-audio-download .btn-export {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  min-height: var(--control-min-height);
  line-height: var(--control-line-height);
}

.job-audio-download .btn-export .btn-export-icon {
  display: block;
  flex-shrink: 0;
}

@media (max-width: 559px) {
  .transcript-slider-controls > .transcript-controls {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }
}

.transcript-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

@media (min-width: 560px) {
  .transcript-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
  }
}

.transcript-controls > .field-slider {
  min-width: 0;
}

/* Scale ticks share the range column; they must not sit under the label or value. */
.field-slider-row:has(> .field-slider-track) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  align-items: center;
}

.field-slider-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  min-width: 0;
}

.field-slider-track input[type="range"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 480px) {
  .field-slider-row:has(> .field-slider-track) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .field-slider-row:has(> .field-slider-track) .field-slider-label {
    grid-column: 1 / -1;
  }
}

.field-slider-marks {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.2;
  padding: 0 0.1rem;
}

.field-slider-marks--five span {
  flex: 1 1 0;
  text-align: center;
}

.field-slider-marks--five span:first-child,
.field-slider-marks--five span:last-child {
  flex: 0 0 auto;
}

.audio-player {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: 0.75rem;
  padding: 0.75rem 0;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
}

.audio-player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.audio-player-controls input[type="range"] {
  flex: 1 1 12rem;
  min-width: 8rem;
}

.audio-play-btn {
  min-width: 2.5rem;
}

.audio-speed-btn {
  min-width: 3.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.audio-time {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audio-retention-deadline {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.audio-retention-notice {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.audio-error-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.audio-error-wrap.hidden {
  display: none;
}

.audio-error {
  display: block;
  font-size: 0.85rem;
  color: var(--danger, #b42318);
}

.audio-retry-btn {
  min-height: var(--control-min-height, 1.85rem);
  padding: var(--control-padding, 0.28rem 0.55rem);
  font-size: var(--control-font-size, 0.8rem);
  line-height: var(--control-line-height, 1.2);
}

.audio-retry-status:empty {
  display: none;
}

.transcript-scroll--seekable .turn {
  cursor: pointer;
}

.turn.turn-active {
  background: color-mix(in srgb, var(--accent, #e67e22) 12%, transparent);
  border-radius: 0.35rem;
}

.confidence-unavailable {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--muted);
  font-style: italic;
}

.transcript-scroll.revision-layout {
  grid-template-columns: minmax(0, 1fr) 12px;
  gap: 0.5rem;
}

.transcript-scroll.revision-layout .conf-gutter.is-inactive,
.transcript-scroll.revision-layout .edit-gutter.is-inactive {
  visibility: hidden;
  pointer-events: none;
}

.transcript-scroll {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
  max-height: 60vh;
}

.transcript-scroll.with-edit-gutter {
  grid-template-columns: minmax(0, 1fr) 12px;
  gap: 0.5rem;
}

.conf-gutter {
  position: absolute;
  left: calc(-12px - 0.5rem);
  top: 0;
  bottom: 0;
  width: 12px;
  min-height: 100%;
  border-radius: 999px;
  background: var(--track-bg);
}

.edit-gutter {
  position: relative;
  min-height: 100%;
  border-radius: 999px;
  background: var(--track-bg);
}

.edit-tick {
  position: absolute;
  right: 1px;
  width: 10px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #B3D4FC;
  cursor: pointer;
  transform: translateY(-50%);
}

.edit-tick:hover,
.edit-tick:focus-visible {
  background: #7eb8f7;
  outline: 2px solid #B3D4FC;
  outline-offset: 1px;
}

.conf-tick {
  position: absolute;
  left: 1px;
  width: 10px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ca8a04;
  cursor: pointer;
  transform: translateY(-50%);
}

.conf-tick:hover,
.conf-tick:focus-visible {
  background: #854d0e;
  outline: 2px solid #facc15;
  outline-offset: 1px;
}

.transcript {
  margin: 0;
  padding: 1rem;
  background: var(--zone-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 60vh;
  overflow: auto;
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.turn {
  position: relative;
  margin-bottom: 0.4rem;
  padding: 0.35rem 2.75rem 0.35rem 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  border-radius: 0.35rem;
  transition: background 120ms ease;
}

.turn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.turn.turn-doubtful {
  border-left: 3px solid #e8a735;
  padding-left: calc(0.5rem - 3px);
}

.turn-share-wrap {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.turn:hover .turn-share-wrap,
.turn.turn-active .turn-share-wrap,
.turn-share-wrap--copied {
  opacity: 1;
  pointer-events: auto;
}

.turn-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--mark) 55%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--mark) 42%, var(--surface));
  color: color-mix(in srgb, #92400e 70%, var(--text));
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.turn-share-btn:hover {
  background: color-mix(in srgb, var(--mark) 58%, var(--surface));
  border-color: color-mix(in srgb, var(--mark) 70%, var(--border));
  color: color-mix(in srgb, #78350f 75%, var(--text));
}

.turn-share-btn--copied {
  background: color-mix(in srgb, var(--status-done) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--status-done) 40%, var(--border));
  color: var(--status-done);
}

.turn-share-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.turn-share-btn-icon--check {
  display: none;
}

.turn-share-btn--copied .turn-share-btn-icon--link {
  display: none;
}

.turn-share-btn--copied .turn-share-btn-icon--check {
  display: inline-flex;
}

.turn-share-icon {
  display: block;
}

.turn-share-feedback {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--status-done);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  pointer-events: none;
}

.turn-share-wrap--copied .turn-share-feedback {
  opacity: 1;
  transform: translateX(0);
}

.share-banner {
  background: var(--duplicate-bg);
  border-bottom: 1px solid var(--duplicate-border);
  padding: 0.75rem 1.25rem;
  text-align: center;
  color: var(--text);
}

.turn:last-child {
  margin-bottom: 0;
}

.turn-header {
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.turn-clock {
  font-weight: 500;
}

.turn-speaker {
  font-weight: 700;
}

.turn-speaker--0 {
  color: var(--speaker-0);
}

.turn-speaker--1 {
  color: var(--speaker-1);
}

.turn-speaker--2 {
  color: var(--speaker-2);
}

.turn-speaker--3 {
  color: var(--speaker-3);
}

.turn-speaker--4 {
  color: var(--speaker-4);
}

.turn-speaker--5 {
  color: var(--speaker-5);
}

.turn-speaker--6 {
  color: var(--speaker-6);
}

.turn-speaker--7 {
  color: var(--speaker-7);
}

.job-open-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  word-break: break-word;
}

.job-open-btn:hover {
  text-decoration: underline;
}

.turn mark:not(.revision-marker):not(.revision-edit-highlight) {
  background: var(--mark);
  padding: 0 2px;
  border-radius: 2px;
}

.turn mark.revision-edit-highlight {
  background: #B3D4FC;
  padding: 0;
  border-radius: 2px;
}

.turn mark.revision-marker {
  padding: 0;
  border-radius: 2px;
}

.login-banner {
  background: var(--banner-warn-bg);
  border-bottom: 1px solid var(--banner-warn-border);
  padding: 0.75rem 1.25rem;
  text-align: center;
}

.maintenance-banner {
  background: var(--banner-warn-bg);
  border-bottom: 1px solid var(--banner-warn-border);
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-weight: 600;
}

.maintenance-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 350;
  pointer-events: none;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-weight: 600;
  opacity: 1;
  transition: opacity 500ms ease;
}

.maintenance-toast--on {
  background: var(--banner-warn-bg);
  border-bottom: 1px solid var(--banner-warn-border);
}

.maintenance-toast--off {
  background: var(--banner-ok-bg);
  border-bottom: 1px solid var(--banner-ok-border);
}

.maintenance-toast.is-leaving {
  opacity: 0;
}

.maintenance-toast--click-dismiss {
  pointer-events: auto;
  cursor: pointer;
}

.stale-build-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 349;
  pointer-events: auto;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-weight: 600;
  background: var(--banner-warn-bg);
  border-bottom: 1px solid var(--banner-warn-border);
}

#maintenance-toast:not(.hidden) + #stale-build-toast {
  top: 2.75rem;
}

.stale-build-toast__link {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .maintenance-toast {
    transition: none;
  }
}

.login-banner a {
  color: var(--accent);
  font-weight: 600;
}

.identity-link-banner {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--banner-warn-bg);
  border-bottom: 1px solid var(--banner-warn-border);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.identity-link-banner p {
  margin: 0;
}

.identity-link-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
}

.identity-link-form .field {
  margin: 0;
}

.identity-link-form .field.identity-link-form__lead {
  flex: 1 1 100%;
}

.identity-link-form .field-hint {
  flex: 1 1 100%;
  margin: 0;
}

.identity-link-form input[type="email"] {
  width: 100%;
  min-width: 8rem;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  min-height: var(--control-min-height);
}

.identity-link-reject-note {
  display: block;
  width: 100%;
  min-width: 10rem;
  min-height: 2.4rem;
  margin-bottom: 0.25rem;
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  box-sizing: border-box;
  resize: vertical;
}

.identity-link-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: flex-end;
}

.invite-error {
  max-width: 28rem;
  margin: 2rem auto;
}

.queue-empty {
  opacity: 0.7;
}

.jobs-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: grid;
  gap: 0.5rem;
}

.jobs-list-scroll {
  min-height: 0;
}

.jobs-list li {
  display: block;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

.jobs-list li.job-list-item {
  --job-list-accent-w: 3px;
  --job-list-bar-gap: 0.65rem;
  --job-list-inset-x: 0.85rem;
  --job-list-inset-y: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: var(--job-list-inset-y) var(--job-list-inset-x) var(--job-list-inset-y)
    var(--job-list-bar-gap);
  margin: 0;
  border-radius: 0.35rem;
  border-left: var(--job-list-accent-w) solid transparent;
  overflow: visible;
}

.job-list-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.job-list-head .job-list-title {
  flex: 1 1 auto;
  min-width: 0;
}

.job-list-trash {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

body.dev-mode-on .job-list-trash:not(:empty),
body:not(.dev-mode-on) .job-list-trash:has(.job-delete-hint) {
  display: inline-flex;
}

.job-delete-hint {
  display: none;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.35rem;
  cursor: help;
}

body:not(.dev-mode-on) .job-delete-hint {
  display: block;
}

.job-delete-toggle {
  display: none;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, #c62828 35%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, #c62828 8%, var(--surface));
  color: #c62828;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

body.dev-mode-on .job-delete-toggle:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.job-delete-toggle__icon {
  display: block;
  width: 1rem;
  height: 1rem;
}

.job-delete-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--status-queue) 16%, var(--surface));
  border-color: var(--status-queue);
  color: var(--status-queue);
}

.job-delete-toggle:disabled {
  color: #9e9e9e;
  border-color: color-mix(in srgb, #9e9e9e 35%, transparent);
  background: var(--surface);
  cursor: not-allowed;
}

.job-list-deleted-badge {
  flex: 0 0 auto;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: lowercase;
  color: #b71c1c;
  background: color-mix(in srgb, #c62828 12%, var(--surface));
}

.job-list-item--deleted {
  opacity: 0.72;
  background: color-mix(in srgb, #c62828 6%, var(--surface));
  transition:
    opacity 0.32s ease,
    background-color 0.32s ease;
}

.job-list-item--deleted .job-list-head {
  flex-wrap: wrap;
}

.job-list-item--deleted .job-list-title {
  flex: 1 1 100%;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #c62828 55%, var(--text));
}

.job-list-item--deleted .job-list-trash {
  flex: 1 1 auto;
}

.job-list-item--deleted .job-list-meta {
  display: none;
}

.job-list-item--openable {
  cursor: pointer;
}

.job-list-item--openable:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.job-list-item--selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-left-color: var(--accent);
}

.job-list-item--openable.job-list-item--selected:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.job-list-item--flash {
  animation: job-nav-flash 0.42s ease-in-out 2;
}

.job-list-item--openable .job-list-title {
  color: var(--link);
}

.jobs-list li:last-child {
  border-bottom: none;
}

.job-list-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.job-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.job-list-actions .btn {
  padding: 0.08rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.job-list-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.82rem;
}

.job-list-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.job-list-voice-source-dot,
.voice-bank-optout-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.job-list-voice-source-dot {
  background: var(--accent);
}

.voice-bank-optout-dot {
  background: #c2185b;
}

.job-list-share-linked-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--muted);
  line-height: 0;
}

.job-list-loudness-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--muted);
  line-height: 0;
}

.job-list-title-text--audio-missing {
  color: color-mix(in srgb, var(--error) 42%, var(--muted));
}

.job-list-title-text--in-progress {
  color: color-mix(in srgb, var(--status-queue) 55%, var(--muted));
}

.job-list-title-text--audio-expired {
  /* Expiry is expected: muted, unlike the error-tinted missing extract. */
  color: var(--muted);
}

.job-list-title-text--audio-unplayable {
  background: color-mix(in srgb, #7b6bb0 22%, var(--surface));
  border-radius: 0.2rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.15em;
}

.job-list-subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
}

.job-list-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.job-list-card-time {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
  flex-shrink: 0;
}

.job-list-card-dates {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.job-list-meeting-when {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.job-list-processed-when {
  font-size: 0.62rem;
  color: var(--muted);
  line-height: 1.3;
}

.job-list-transcript-deadline {
  font-size: 0.62rem;
  color: var(--muted);
  line-height: 1.3;
  display: block;
}

.job-list-active-status {
  font-size: var(--jobs-font-caption, 0.62rem);
  color: var(--muted);
  line-height: 1.3;
}

#active-jobs-section .job-list-active-status {
  font-size: var(--jobs-font-caption);
}

.active-jobs-slot-hint {
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted-fg, #64748b);
}

.jobs-session-hint {
  margin: -0.15rem 0 0.5rem;
  padding: 0;
  font-size: var(--jobs-font-caption);
  line-height: 1.35;
  color: var(--muted-fg, #64748b);
}

#jobs-section .jobs-filters-empty,
#jobs-section .queue-empty,
#jobs-section .jobs-list-poll-error,
#active-jobs-section .queue-empty {
  font-size: var(--jobs-font-empty);
}

#jobs-section .jobs-date-mode-btn,
#jobs-section .jobs-tag-mode-btn,
#jobs-section .jobs-tag-filter-label,
#jobs-section .jobs-date-undated-chip,
#jobs-section .jobs-date-clear,
#jobs-section .jobs-filter-clear-all {
  font-size: var(--jobs-font-filter);
}

#jobs-section .jobs-date-filter-hint {
  font-size: var(--jobs-font-filter-hint);
}

#jobs-section .jobs-date-month-label,
#jobs-section .jobs-date-day {
  font-size: var(--jobs-font-emphasis);
}

#jobs-section .tag-chip--list,
#jobs-section .tag-chip--filter {
  font-size: var(--jobs-font-tag);
}

#jobs-section .job-list-title,
#active-jobs-section .job-list-title,
#jobs-section button.job-list-title,
#active-jobs-section button.job-list-title {
  font-size: var(--jobs-font-title);
}

#jobs-section .job-list-subtitle,
#jobs-section .job-list-card-time,
#active-jobs-section .job-list-subtitle,
#active-jobs-section .job-list-card-time {
  font-size: var(--jobs-font-body);
}

#jobs-section .job-list-meeting-when,
#active-jobs-section .job-list-meeting-when,
#jobs-section .jobs-list li.jobs-undated-heading {
  font-size: var(--jobs-font-emphasis);
}

#jobs-section .job-list-processed-when,
#active-jobs-section .job-list-processed-when {
  font-size: var(--jobs-font-caption);
}

#jobs-section .job-list-num,
#active-jobs-section .job-list-num {
  font-size: var(--jobs-font-badge);
}

#jobs-section .job-list-meta,
#active-jobs-section .job-list-meta {
  font-size: var(--jobs-font-meta);
}

#jobs-section .job-list-meta.dev-mode-block,
#active-jobs-section .job-list-meta.dev-mode-block {
  font-size: var(--jobs-font-body);
}

#jobs-section .job-list-actions .btn,
#active-jobs-section .job-list-actions .btn {
  font-size: var(--jobs-font-action);
}

#jobs-section .job-list-deleted-badge,
#active-jobs-section .job-list-deleted-badge {
  font-size: var(--jobs-font-deleted-badge);
}

.jobs-list li.jobs-undated-heading {
  list-style: none;
  margin: 0.55rem 0 0.15rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: none;
  border-left: none;
  cursor: default;
}

.job-list-card-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.job-list-card-meta .job-list-meta-part {
  max-width: 100%;
}

.display-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.field-display-title {
  font-size: inherit;
  border-radius: 0.35rem;
}

.field-display-title:not(.is-job-done) {
  display: none;
}

.display-title-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ui-hidden-restore-pips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.ui-hidden-restore-pips.hidden {
  display: none;
  margin: 0;
}

.btn.ui-hidden-restore-pip {
  box-sizing: border-box;
  width: var(--control-min-height);
  height: var(--control-min-height);
  min-width: var(--control-min-height);
  min-height: var(--control-min-height);
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ui-hidden-restore-pip__glyph {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}

.display-title-row #job-display-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  border-color: transparent;
  background: transparent;
  padding: 0.35rem 0.5rem;
}

.display-title-row #job-display-title:hover,
.display-title-row #job-display-title:focus {
  border-color: var(--border);
  background: var(--input-bg);
}

.display-title-row #job-display-title::placeholder {
  font-weight: 400;
  color: var(--muted);
}

.display-title-meeting-start {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
}

.display-title-meeting-start .meeting-date-picker {
  flex: 0 0 auto;
}

.display-title-meeting-start input {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  border-color: var(--border);
  background: var(--input-bg);
}

.display-title-meeting-start #meeting-date {
  flex: 0 0 auto;
  width: calc(10ch + 1.1rem + 2px);
  max-width: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.display-title-meeting-start .meeting-date-picker__toggle {
  border-radius: 0;
}

.display-title-meeting-start #meeting-time {
  flex: 0 0 4.5rem;
  max-width: 4.5rem;
  border-left: 0;
  border-radius: 0;
}

.display-title-meeting-start #job-display-title-generate {
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  width: 2.25rem;
  padding: 0;
  min-height: var(--control-min-height);
}

.display-title-meeting-start #job-display-title-generate .braille-spinner {
  font-size: 0.9rem;
  line-height: 1;
}

.display-title-row .ui-hidden-dismiss {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  min-height: var(--control-min-height);
  margin: 0;
}

.job-age-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.job-age-dot--week {
  background: #b8e0b4;
}

.job-age-dot--6m {
  background: #c9b08a;
}

.job-age-dot--1y {
  background: #b8c0cc;
}

.job-age-dot--2y {
  background: #b89a88;
}

@media (prefers-color-scheme: dark) {
  .job-age-dot--week {
    background: color-mix(in srgb, #b8e0b4 72%, var(--surface));
  }

  .job-age-dot--6m {
    background: color-mix(in srgb, #c9b08a 72%, var(--surface));
  }

  .job-age-dot--1y {
    background: color-mix(in srgb, #b8c0cc 72%, var(--surface));
  }

  .job-age-dot--2y {
    background: color-mix(in srgb, #b89a88 72%, var(--surface));
  }
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-icon-svg {
  display: block;
}

.job-list-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  vertical-align: baseline;
  flex-shrink: 0;
}

.job-list-num--done {
  color: var(--status-done);
  background: color-mix(in srgb, var(--status-done) 16%, var(--surface));
}

.job-list-num--failed {
  color: var(--status-failed, var(--error));
  background: color-mix(in srgb, var(--status-failed, var(--error)) 16%, var(--surface));
}

.job-list-num--cancelled {
  color: var(--status-cancelled);
  background: color-mix(in srgb, var(--status-cancelled) 16%, var(--surface));
}

.job-list-num--default {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}

button.job-list-title {
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

button.job-list-title:hover {
  text-decoration: underline;
}

.job-open-disabled {
  color: inherit;
  cursor: default;
}

.job-list-meta {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0;
}

.job-list-meta.dev-mode-block {
  font-size: 0.68rem;
  line-height: 1.3;
}

.job-list-meta-part {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.job-list-meta-part:not(:last-child)::after {
  content: "·";
  margin: 0 0.3rem;
  opacity: 0.65;
}

.job-list-meta .job-status-done,
.job-status .job-status-done {
  color: var(--status-done);
  font-weight: 500;
}

.job-list-meta .job-status-failed,
.job-status .job-status-failed {
  color: var(--status-failed, var(--error));
  font-weight: 500;
}

.job-list-meta .job-status-cancelled,
.job-status .job-status-cancelled {
  color: var(--status-cancelled);
  font-weight: 500;
}

.job-actions {
  margin: 0 0 0.75rem;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

.retranscribe-strip {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  max-width: 100%;
}

.retranscribe-strip.hidden {
  display: none;
}

.retranscribe-strip .field-asr-mode {
  margin: 0;
}

.retranscribe-strip .error {
  margin: 0;
}

.job-export-actions {
  margin-top: 0;
}

.duplicate-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--duplicate-bg);
  border: 1px solid var(--duplicate-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.duplicate-banner p {
  margin: 0 0 0.5rem;
}

.duplicate-banner-title {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-weight: 700;
}

.duplicate-banner-icon {
  flex-shrink: 0;
  color: var(--error);
  line-height: 1.35;
}

.duplicate-banner ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.duplicate-banner li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.duplicate-job {
  min-width: 0;
  word-break: break-word;
}

.duplicate-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.revision-editing-banner {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 0.92rem;
}

.view-opt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.view-opt-toggle__label {
  line-height: 1.2;
}

.view-opt-toggle__switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 2rem;
  height: 1.1rem;
}

.view-opt-toggle__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.view-opt-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--track-bg);
  border: 1px solid var(--border);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.view-opt-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 0.12rem;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: translateY(-50%);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.view-opt-toggle__input:checked ~ .view-opt-toggle__track {
  background: var(--accent);
  border-color: var(--accent);
}

.view-opt-toggle__input:checked ~ .view-opt-toggle__thumb {
  transform: translate(0.9rem, -50%);
}

.view-opt-toggle__input:focus-visible ~ .view-opt-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.view-opt-toggle__input:disabled {
  cursor: not-allowed;
}

.view-opt-toggle__input:disabled ~ .view-opt-toggle__track {
  opacity: 0.55;
}

.view-opt-toggle__input:disabled ~ .view-opt-toggle__thumb {
  opacity: 0.85;
}

.view-opt-toggle--disabled {
  cursor: default;
  opacity: 0.65;
}

.transcript-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.transcript-action-row .btn {
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  min-height: var(--control-min-height);
  line-height: var(--control-line-height);
}

.context-panel .btn {
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  min-height: var(--control-min-height);
  line-height: var(--control-line-height);
}

.context-panel-toolbar > .btn {
  flex: 0 1 auto;
}

.transcript-action-row .job-export-actions {
  margin-top: 0;
}

.job-export-actions .view-opt-toggle {
  gap: 0.3rem;
  font-size: 0.8rem;
}

.revision-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0.4rem;
}

.revision-edit-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.75rem;
  padding: 0.32rem 0.7rem 0.32rem 0.65rem;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--mark) 55%, var(--border));
  background: color-mix(in srgb, var(--mark) 42%, var(--surface));
  color: color-mix(in srgb, #92400e 70%, var(--text));
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.revision-edit-hint__text {
  font-style: inherit;
}

.revision-edit-hint__text strong {
  font-weight: 600;
  font-style: normal;
}

.revision-tool-slider {
  --revision-tool-label-gap: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.revision-tool-slider__track-area {
  /* Inset track so end ticks sit over label centers (1/10 and 9/10 of the 5-column grid). */
  padding: 0.15rem calc((100% - 4 * var(--revision-tool-label-gap)) / 10) 0;
}

.revision-tool-slider__rail {
  position: relative;
  height: 1.15rem;
  --track-bg: var(--slider-track-inactive-lilac);
}

.revision-tool-slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--revision-tool-progress, 0%),
    var(--track-bg) var(--revision-tool-progress, 0%),
    var(--track-bg) 100%
  );
  pointer-events: none;
}

.revision-tool-slider__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 1px;
}

.revision-tool-slider__tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.55;
}

.revision-tool-slider__input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.revision-tool-slider__input:focus {
  outline: none;
}

.revision-tool-slider__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.revision-tool-slider__input::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}

.revision-tool-slider__input::-moz-range-track {
  height: 2px;
  background: transparent;
}

.revision-tool-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  cursor: pointer;
}

.revision-tool-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  cursor: pointer;
}

.revision-tool-slider__labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.2rem var(--revision-tool-label-gap);
}

@media (max-width: 719px) {
  .revision-tool-slider__track-area {
    padding-inline: calc((100% - 2 * var(--revision-tool-label-gap)) / 6);
  }

  .revision-tool-slider__label {
    font-size: 0.78rem;
  }

  .revision-tool-slider__label[data-value="dialogs"],
  .revision-tool-slider__label[data-value="comments"],
  .revision-tool-slider__tick[data-value="dialogs"],
  .revision-tool-slider__tick[data-value="comments"] {
    display: none;
  }

  .revision-tool-slider__labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.revision-tool-slider__label {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.revision-tool-slider__label.is-active {
  color: var(--text);
  font-weight: 600;
}

.revision-tool-slider__label:not(:disabled):hover {
  color: var(--text);
}

#revision-toolbar:not([data-revision-tool="marker"]) ~ #revision-edit-hint #revision-marker-palette {
  display: none;
}

.revision-marker-palette {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.revision-marker-swatch {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  cursor: pointer;
}

.revision-marker-swatch.is-active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.revision-marker-swatch--clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  position: relative;
}

.revision-marker-swatch--clear::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 135%;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.revision-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding-inline: 0.45rem;
}

.revision-tool-btn svg {
  display: block;
}

.revision-comment-view-text {
  margin: 0;
  max-width: 16rem;
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (prefers-color-scheme: dark) {
  .revision-comment-view-text {
    color: var(--comment-accent);
  }

  .revision-comment-popup:has(.revision-comment-view-text:not(.hidden)) {
    border-color: var(--comment-accent);
  }
}

.revision-comment-editor {
  display: flex;
  gap: 0.35rem;
}

.revision-comment-popup {
  position: fixed;
  z-index: 40;
  display: flex;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}

.revision-comment-popup input {
  min-width: 16rem;
}

.revision-reassign-popup {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 16rem;
  max-width: 22rem;
  max-height: min(24rem, 70vh);
  overflow: hidden;
  padding: 0.5rem;
  border-radius: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}

.revision-reassign-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  overflow-y: auto;
}

.revision-reassign-heading {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.revision-reassign-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.revision-reassign-list button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0.25rem;
}

.revision-reassign-list button:hover {
  background: var(--surface-2, rgb(255 255 255 / 6%));
}

.revision-reassign-score {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.revision-reassign-other {
  display: flex;
  flex-shrink: 0;
  gap: 0.35rem;
}

.revision-reassign-other input {
  flex: 1;
  min-width: 0;
}

body.revision-edit-mode .turn {
  cursor: text;
}

body.revision-edit-mode .turn-header {
  cursor: pointer;
}

body.revision-edit-mode .turn-header--placeholder {
  min-height: 1.25rem;
  cursor: pointer;
}

body.revision-edit-mode .turn.revision-turn-selected .turn-header {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

body.revision-edit-mode .turn.turn-active {
  outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}

.conf-gutter .marker-tick,
.conf-gutter .comment-tick {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border: none;
  padding: 0;
  cursor: pointer;
}

.edit-gutter .marker-tick,
.edit-gutter .comment-tick {
  position: absolute;
  right: 0;
  width: 14px;
  height: 14px;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.revision-comment-anchor {
  border-bottom: none;
  background: none;
  box-shadow:
    inset 0 -2px 0 0 color-mix(in srgb, var(--accent) 55%, var(--border)),
    0 0 10px 3px color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: pointer;
  border-radius: 2px;
}

.revision-comment-anchor.is-active {
  background: var(--comment-highlight);
  box-shadow: none;
  border-radius: 2px;
}

.revision-comment-anchor.is-active .revision-comment-head {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 85%, var(--text));
}

.revision-comment-anchor.is-active .revision-comment-tail {
  text-decoration: none;
}

.conf-gutter .comment-tick.is-active {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 60%, transparent));
  transform: scale(1.15);
}

.edit-gutter .comment-tick.is-active {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));
  transform: translateY(-50%) scale(1.15);
}

.revision-comment-anchor:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.conf-gutter .comment-tick {
  background: transparent;
  font-size: 0.85rem;
  line-height: 1;
  width: auto;
  min-width: 14px;
  height: auto;
  color: var(--text);
}

.edit-gutter .comment-tick {
  background: transparent;
  font-size: 0.85rem;
  line-height: 1;
  width: auto;
  min-width: 14px;
  height: auto;
  color: var(--text);
}

.edit-gutter .marker-tick {
  transform: translateY(-50%);
}

.gutter-filter-wrap {
  margin-left: auto;
  flex: 0 0 auto;
}

.gutter-filter-btn {
  padding-inline: 0.4rem;
  min-width: var(--control-min-height);
  justify-content: center;
}

.gutter-filter-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

.gutter-filter-popup {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 18rem;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.55rem 0.65rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}

.gutter-filter-popup__heading {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gutter-filter-slider {
  --gutter-filter-label-gap: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gutter-filter-slider__track-area {
  padding: 0.15rem calc((100% - 4 * var(--gutter-filter-label-gap)) / 10) 0;
}

.gutter-filter-slider__rail {
  position: relative;
  height: 1.15rem;
}

.gutter-filter-slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--gutter-filter-progress, 100%),
    var(--slider-track-inactive-lilac) var(--gutter-filter-progress, 100%),
    var(--slider-track-inactive-lilac) 100%
  );
  pointer-events: none;
}

.gutter-filter-slider__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.gutter-filter-slider__tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.55;
}

.gutter-filter-slider__input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.gutter-filter-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  cursor: pointer;
}

.gutter-filter-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  cursor: pointer;
}

.gutter-filter-slider__labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.2rem var(--gutter-filter-label-gap);
}

.gutter-filter-slider__label {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.gutter-filter-slider__label.is-active {
  color: var(--text);
  font-weight: 600;
}

.gutter-filter-slider__label:hover {
  color: var(--text);
}

.attachment-tick {
  position: absolute;
  right: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  font-size: 0.85rem;
  line-height: 1;
}

.turn-attachments {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.turn-attachments summary {
  cursor: pointer;
  color: var(--muted);
}

.turn-attachments-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.turn-attachments-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.turn-attachment-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.turn-attachment-thumb-wrap {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}

.turn-attachment-thumb {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
}

.turn-attachment-thumb-wrap .attachment-delete {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  z-index: 1;
  background: var(--surface);
  border-radius: 0.2rem;
}

.attachment-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  opacity: 0.65;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.attachment-delete:hover {
  opacity: 1;
}

body:not(.dev-mode-on) .attachment-delete {
  display: none;
}

.turn-attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#screenshot-import-modal {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(90vh, 52rem);
}

.screenshot-import-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.screenshot-import-hint {
  margin: 0 0 0.35rem;
}

.screenshot-import-shift {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.screenshot-import-shift input {
  width: 5rem;
}

.screenshot-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.screenshot-import-card {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.28rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--zone-bg);
}

.screenshot-import-card img {
  display: block;
  width: 100%;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 0.35rem;
  cursor: zoom-in;
}

.screenshot-import-card__clock {
  color: var(--muted);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.attachment-carousel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg) 92%, black);
  color: var(--text);
}

.attachment-carousel-overlay.hidden {
  display: none;
}

.attachment-carousel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
}

.attachment-carousel-caption,
.attachment-carousel-counter {
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--muted);
}

.attachment-carousel-caption {
  flex: 1;
  min-width: 8rem;
  color: var(--text);
}

.attachment-carousel-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0 0.75rem 0.75rem;
}

.attachment-carousel-img {
  max-width: calc(100% - 6rem);
  max-height: 100%;
  object-fit: contain;
}

.attachment-carousel-nav {
  flex-shrink: 0;
}

.attachment-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  text-align: left;
}

.attachment-link:hover,
.attachment-link:focus-visible {
  text-decoration: underline;
}

.transcript.attachment-mode .turn {
  cursor: copy;
}

.context-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.context-attachment-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.context-attachment-link {
  flex: 1;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--link);
  cursor: pointer;
}

.context-attachment-delete {
  flex-shrink: 0;
}

.context-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

body.summary-split-open {
  --summary-split-max-h: var(--workspace-col-max-h);
}

body.summary-split-open .app-main.layout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--app-shell-inline-gap);
  padding-right: var(--app-shell-inline-gap);
}

body.summary-split-open .job-column {
  flex: 1 1 var(--summary-col-min);
  min-width: min(100%, var(--summary-col-min));
  max-width: 100%;
}

@media (min-width: 901px) {
  body.job-workspace-fill {
    --workspace-layout-pad-bottom: 0.75rem;
    --workspace-main-col-max-h: calc(
      var(--workspace-col-max-h) - var(--app-content-pad-top) -
        var(--workspace-layout-pad-bottom)
    );
  }

  body.job-workspace-fill .app-main.layout {
    padding-bottom: var(--workspace-layout-pad-bottom);
  }

  body.job-workspace-fill .tasks-sidebar-host {
    height: var(--workspace-col-max-h);
    max-height: var(--workspace-col-max-h);
  }

  body.job-workspace-fill .job-column,
  body.job-workspace-fill.summary-split-open .job-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: var(--workspace-main-col-max-h);
  }

  body.job-workspace-fill.summary-split-open .context-panel {
    max-height: var(--workspace-main-col-max-h);
  }

  body.summary-split-open .job-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.job-workspace-fill .job-column .job-card,
  body.summary-split-open .job-column .job-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body.job-workspace-fill .job-column .job-card > *,
  body.summary-split-open .job-column .job-card > * {
    flex-shrink: 0;
  }

  body.job-workspace-fill .job-column .job-card > .transcript-scroll,
  body.summary-split-open .job-column .job-card > .transcript-scroll {
    flex: 1 1 auto;
    flex-shrink: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  body.job-workspace-fill .transcript-scroll,
  body.summary-split-open .job-column .transcript-scroll {
    max-height: none;
  }

  body.job-workspace-fill .transcript,
  body.summary-split-open .transcript {
    max-height: none;
    height: 100%;
    min-height: 0;
  }
}

body.summary-split-open .context-panel {
  flex: 1 1 var(--summary-col-min);
  min-width: min(100%, var(--summary-col-min));
  max-width: 100%;
  max-height: var(--workspace-col-max-h);
  overflow: auto;
}

.job-column {
  min-width: 0;
}

.context-panel-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.context-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  margin: 0 0 0.5rem;
}

.context-panel-title {
  margin: 0;
  font-size: 1.05rem;
}

.context-attachments-label {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.25;
}

.context-attachments-toggle {
  flex-shrink: 0;
}

.context-attachments-toggle__icon {
  display: block;
}

.context-panel-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  padding: 0.15rem 0.35rem;
  flex-shrink: 0;
}

.context-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.context-panel-header .context-attachments {
  flex: 1 1 100%;
  min-width: 0;
}

.context-panel-header .context-attachments-list,
.context-panel-header #context-attachments-empty {
  width: 100%;
}

.context-panel-body {
  flex: 1;
  overflow: auto;
  padding: var(--panel-inset-block-start) var(--panel-inset-inline) var(--panel-inset-block-end);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.context-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.context-panel-subtitle {
  margin: 0;
  font-size: 0.95rem;
}


.context-panel textarea,
.context-panel input[type="text"] {
  width: 100%;
}

.context-panel textarea {
  padding: var(--control-padding);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
}

.context-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.context-note-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem 0.5rem;
  align-items: start;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--text));
}

.context-note-seek {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  white-space: nowrap;
}

.context-note-text {
  word-break: break-word;
}

.context-note-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  opacity: 0.65;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.context-note-delete:hover {
  opacity: 1;
}

.context-note-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.context-note-form.is-drop-target {
  outline: 1px solid var(--accent);
  border-radius: 0.35rem;
}

.context-note-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.context-note-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--control-min-height);
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
}

.context-note-file-chip.hidden {
  display: none;
}

.context-note-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.context-note-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.context-note-file-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.context-note-file {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  padding: 0;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#context-note-save-btn {
  margin-inline-end: calc(var(--app-shell-inline-gap) * 2);
}

#context-note-text {
  min-height: var(--control-min-height);
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  border-color: transparent;
  background: transparent;
}

#context-note-text:hover,
#context-note-text:focus {
  border-color: var(--border);
  background: var(--input-bg);
}

.context-note-time,
.context-note-seek {
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
}

.context-note-time {
  white-space: nowrap;
}

.context-summary-block {
  margin-top: 0;
}

.context-summary-stale {
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--banner-warn-border);
  background: color-mix(in srgb, var(--banner-warn-bg) 76%, var(--surface));
  border-radius: 0.35rem;
}

.context-summary-stale__text {
  margin: 0;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--text);
}

.context-summary-stale .btn {
  margin: 0;
}

.retro-roles-stale {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--banner-warn-border);
  background: color-mix(in srgb, var(--banner-warn-bg) 76%, var(--surface));
  border-radius: 0.35rem;
}

.retro-roles-stale__text {
  display: block;
  margin: 0 0 0.35rem;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--text);
}

.retro-roles-stale .btn {
  margin: 0;
}

.retro-roles-stale .field-hint {
  margin: 0.35rem 0 0;
}

.summary-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.summary-tabs__btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
}

.summary-tabs__pick-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.summary-tabs__pick {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text);
}

.summary-tabs__pick:hover {
  border-color: var(--accent);
}

.context-summary-text[aria-busy="true"] .braille-spinner-live {
  font-size: 1.25rem;
}

.context-compare-share-box {
  margin: 0 0 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.context-compare-share-urls {
  margin: 0.35rem 0 0;
  word-break: break-all;
  font-size: 0.85rem;
}

.summary-tabs__btn.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.context-summary-text {
  white-space: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0;
  border: none;
  background: transparent;
}

.context-summary-text h1,
.context-summary-text h2,
.context-summary-text h3,
.context-summary-text h4,
.context-summary-text h5,
.context-summary-text h6 {
  margin: 1.1rem 0 0.6rem;
  font-weight: 650;
}

.context-summary-text h1 { font-size: 1.18rem; }
.context-summary-text h2 { font-size: 1.08rem; }
.context-summary-text h3 { font-size: 1rem; }
.context-summary-text h4 { font-size: 0.96rem; }
.context-summary-text h5 { font-size: 0.92rem; }
.context-summary-text h6 { font-size: 0.88rem; }

.context-summary-text h1:first-child,
.context-summary-text h2:first-child,
.context-summary-text h3:first-child,
.context-summary-text h4:first-child,
.context-summary-text h5:first-child,
.context-summary-text h6:first-child {
  margin-top: 0;
}

.context-summary-text p {
  margin: 0 0 1.1rem;
  text-indent: 1.25em;
}

.context-summary-text code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82em;
  background: var(--btn-secondary-bg);
  padding: 0.08em 0.32em;
  border-radius: 0.25rem;
}

.context-summary-text table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0 0 1.1rem;
}

.context-summary-text th,
.context-summary-text td {
  border: 1px solid var(--border);
  padding: 0.28rem 0.45rem;
  text-align: left;
  text-indent: 0;
}

.context-summary-text th {
  background: var(--zone-bg);
  font-weight: 600;
}

.context-summary-text .summary-note {
  border: 1px solid;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin: 0 0 0.7rem;
}

.context-summary-text .summary-note p {
  margin: 0;
}

.context-summary-text .summary-note--ok {
  background: var(--banner-ok-bg);
  border-color: var(--banner-ok-border);
}

.context-summary-text .summary-note--bad {
  background: var(--banner-bad-bg);
  border-color: var(--banner-bad-border);
}

.context-summary-text .summary-note--plan {
  background: var(--duplicate-bg);
  border-color: var(--duplicate-border);
}

.context-summary-text .summary-note--rec {
  background: var(--banner-warn-bg);
  border-color: var(--banner-warn-border);
}

.context-summary-text ol,
.context-summary-text ul {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}

.context-summary-text ol {
  list-style-type: decimal;
}

.context-summary-text ul {
  list-style-type: disc;
}

.context-summary-text ol ul {
  margin: 0.4rem 0 0.5rem;
  padding-left: 1.15rem;
  list-style-type: disc;
}

.context-summary-text li {
  margin: 0 0 0.45rem;
  text-indent: 0;
}

#context-panel-btn.is-active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--coral-hover);
}

.field-meeting-context {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.job-context-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0;
}

.job-context-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
}

.job-context-notes {
  margin-top: 0.35rem;
}

.job-context-blocks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.job-context-editor textarea.job-context-block-text {
  display: block;
  width: 100%;
  min-height: 4.5rem;
  margin: 0;
  padding: var(--control-padding);
  border: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  font: inherit;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--text);
}

.job-context-editor textarea.job-context-block-text:focus {
  outline: none;
}

.job-context-editor textarea.job-context-block-text::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.job-context-table-wrap {
  position: relative;
  padding-right: 1.6rem;
}

.job-context-table-remove {
  position: absolute;
  top: 0.05rem;
  right: 0;
  border: none;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
}

.job-context-table-remove:hover,
.job-context-table-remove:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.job-context-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
}

.job-context-table th,
.job-context-table td {
  border: 1px solid var(--border);
  padding: var(--control-padding);
  text-align: left;
  text-indent: 0;
  min-height: var(--control-min-height);
  color: var(--text);
}

.job-context-table th {
  background: var(--zone-bg);
  font-weight: 600;
}

.job-context-table th[contenteditable],
.job-context-table td[contenteditable] {
  outline: none;
}

.job-context-table th[contenteditable]:focus,
.job-context-table td[contenteditable]:focus {
  outline: 1px solid var(--accent);
}

.job-tags-field {
  margin-top: 1rem;
}

.job-tags-editor {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
}

.job-tags-chips {
  display: contents;
}

.job-tags-editor input {
  flex: 1 1 8rem;
  min-width: 6rem;
  min-height: auto;
  border: none;
  background: transparent;
  padding: 0.2rem 0.15rem;
  font-size: inherit;
  color: var(--text);
}

.job-tags-editor input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.job-tags-editor input:focus {
  outline: none;
}

.job-tags-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 5;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
}

.job-tags-suggestion {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  color: var(--text);
}

.job-tags-suggestion:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.tag-chip {
  --tag-hue: 210;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--tag-hue) 42% 78%);
  background: hsl(var(--tag-hue) 52% 91%);
  font-size: 0.78rem;
  line-height: 1.3;
  color: hsl(var(--tag-hue) 38% 28%);
}

@media (prefers-color-scheme: dark) {
  .tag-chip {
    border-color: hsl(var(--tag-hue) 28% 34%);
    background: hsl(var(--tag-hue) 24% 22%);
    color: hsl(var(--tag-hue) 42% 82%);
  }
}

.tag-chip--job,
.tag-chip--filter {
  cursor: pointer;
}

.tag-chip--filter:not(.is-active) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--muted);
  font-weight: normal;
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  .tag-chip--filter:not(.is-active) {
    border-color: color-mix(in srgb, var(--border) 85%, var(--text));
    background: color-mix(in srgb, var(--muted) 8%, var(--surface));
    color: color-mix(in srgb, var(--muted) 90%, var(--text));
  }
}

.tag-chip.tag-chip--filter.tag-chip--engine-gigaam:not(.is-active),
.tag-chip.tag-chip--filter.tag-chip--engine-whisper:not(.is-active) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  .tag-chip.tag-chip--filter.tag-chip--engine-gigaam:not(.is-active),
  .tag-chip.tag-chip--filter.tag-chip--engine-whisper:not(.is-active) {
    border-color: color-mix(in srgb, var(--border) 85%, var(--text));
    background: color-mix(in srgb, var(--muted) 8%, var(--surface));
    color: color-mix(in srgb, var(--muted) 90%, var(--text));
  }
}

.tag-chip--bio,
.tag-chip--linked {
  cursor: default;
}

.tag-chip--filter.is-active {
  border-color: hsl(var(--tag-hue) 48% 62%);
  background: hsl(var(--tag-hue) 56% 86%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .tag-chip--filter.is-active {
    border-color: hsl(var(--tag-hue) 34% 42%);
    background: hsl(var(--tag-hue) 30% 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}

.tag-chip--list {
  font-size: 0.72rem;
  padding: 0.1rem 0.35rem;
}

.tag-chip--list.is-filter-match {
  border-color: hsl(var(--tag-hue) 48% 62%);
  background: hsl(var(--tag-hue) 56% 86%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  .tag-chip--list.is-filter-match {
    border-color: hsl(var(--tag-hue) 34% 42%);
    background: hsl(var(--tag-hue) 30% 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}

.tag-chip.tag-chip--engine-gigaam {
  color: var(--speaker-0);
  background: color-mix(in srgb, var(--speaker-0) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--speaker-0) 38%, transparent);
}

.tag-chip.tag-chip--engine-whisper {
  color: var(--status-queue);
  background: color-mix(in srgb, var(--status-queue) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--status-queue) 38%, transparent);
}

.tag-chip.tag-chip--filter.tag-chip--engine-gigaam.is-active,
.tag-chip.tag-chip--list.tag-chip--engine-gigaam.is-filter-match {
  border-color: color-mix(in srgb, var(--speaker-0) 55%, transparent);
  background: color-mix(in srgb, var(--speaker-0) 24%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--speaker-0) 35%, transparent);
  font-weight: 600;
}

.tag-chip.tag-chip--filter.tag-chip--engine-whisper.is-active,
.tag-chip.tag-chip--list.tag-chip--engine-whisper.is-filter-match {
  border-color: color-mix(in srgb, var(--status-queue) 55%, transparent);
  background: color-mix(in srgb, var(--status-queue) 24%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-queue) 35%, transparent);
  font-weight: 600;
}

.tag-chip__remove {
  opacity: 0.75;
  font-size: 0.95rem;
  line-height: 1;
}

.jobs-date-filter {
  margin: 0.15rem 0 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}

.jobs-date-filter-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.jobs-date-mode-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-secondary-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.jobs-date-mode-btn:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
}

.jobs-date-mode-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.jobs-date-filter-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}

.jobs-date-calendar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 9rem;
  overflow-y: auto;
  min-height: 0;
}

.jobs-date-month-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.jobs-date-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.jobs-date-day {
  min-width: 1.7rem;
  padding: 0.12rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.jobs-date-day:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.jobs-date-day.is-in-range {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.jobs-date-day.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.jobs-date-day.is-outside {
  opacity: 0.4;
  cursor: default;
}

.jobs-date-day.is-outside:hover {
  background: var(--surface);
}

.jobs-date-filter-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.jobs-date-undated-chip {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--btn-secondary-bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-style: italic;
  cursor: pointer;
}

.jobs-date-undated-chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

.jobs-date-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.jobs-date-clear:hover {
  color: var(--accent-hover);
}

.jobs-filter-clear-all {
  padding: 0;
  margin-left: 0.35rem;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.jobs-filter-clear-all:hover {
  color: var(--accent-hover);
}

.jobs-list-poll-error {
  color: var(--status-failed);
}

.jobs-tag-filter {
  margin: 0.35rem 0 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.guest-jobs-owner-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
}

.guest-jobs-owner-filter.hidden {
  display: none;
}

.guest-jobs-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.5rem;
}

.guest-jobs-pager.hidden {
  display: none;
}

.guest-jobs-pager__range {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 6.5rem;
  text-align: center;
}

.invite-create-form .meeting-date-picker__popover {
  z-index: 60;
}

.jobs-tag-filter-mode {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.jobs-tag-filter-label {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text);
}

.jobs-tag-mode-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-secondary-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.jobs-tag-mode-btn:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
}

.jobs-tag-mode-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.jobs-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.job-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
  min-width: 0;
}

.progress-panel.hidden {
  display: none;
}

.is-guest #dev-mode-toggle,
.is-guest #help-btn,
.is-guest #okdesk-import-btn,
.is-guest #active-jobs-section,
.is-guest .tasks-rail-badge,
.is-guest #purge-ingress-block,
.is-guest #gpu-recreate-header-wrap,
.is-guest #audio-retry-header-wrap,
.is-guest #platform-admin-section,
.is-guest #admin-modal-btn,
.is-guest #admin-modal,
.is-guest #voices-modal-btn,
.is-guest #voices-modal,
.is-guest #consent-profile-btn,
.is-guest #consent-profile-modal,
.is-guest #context-panel-btn,
.is-guest #context-panel,
.is-guest #jobs-tag-filter,
.is-guest #revision-show-original-wrap,
.is-guest #export-with-annotations-wrap,
.is-guest #context-export-include-wrap,
.is-guest .turn-share-wrap {
  display: none !important;
}

.consent-modal {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(88vh, 52rem);
}

.consent-modal .modal-dialog__header .modal-dialog__close {
  display: none;
}

body.consent-modal-open {
  overflow: hidden;
}

body.new-transcript-modal-open {
  overflow: hidden;
}

body.admin-modal-open {
  overflow: hidden;
}

body.consent-profile-modal-open {
  overflow: hidden;
}

body.retro-problems-modal-open {
  overflow: hidden;
}

body.discussion-maturity-modal-open {
  overflow: hidden;
}

body.tour-hub-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  #new-transcript-modal-backdrop {
    z-index: 300;
  }

  #new-transcript-modal {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    border-radius: 0;
    z-index: 301;
  }

  #new-transcript-modal .modal-dialog__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #new-transcript-modal .modal-dialog__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  #admin-modal-backdrop {
    z-index: 300;
  }

  #admin-modal {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    border-radius: 0;
    z-index: 301;
  }

  #admin-modal .modal-dialog__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #admin-modal .admin-modal-nav {
    flex-shrink: 0;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
  }

  #admin-modal .modal-dialog__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  #consent-modal-backdrop {
    z-index: 300;
  }

  #consent-modal {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    border-radius: 0;
    z-index: 301;
  }

  #consent-modal .modal-dialog__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #consent-modal .modal-dialog__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
  }

  #consent-modal .modal-dialog__footer {
    flex-shrink: 0;
    justify-content: stretch;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #consent-modal .modal-dialog__footer .btn {
    flex: 1;
  }

  #consent-profile-backdrop {
    z-index: 300;
  }

  #consent-profile-modal {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    border-radius: 0;
    z-index: 301;
  }

  #consent-profile-modal .modal-dialog__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #consent-profile-modal .modal-dialog__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  #voices-modal-backdrop,
  #remarks-modal-backdrop {
    z-index: 300;
  }

  #voices-modal,
  #remarks-modal {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    border-radius: 0;
    z-index: 301;
  }

  #voices-modal .modal-dialog__header,
  #remarks-modal .modal-dialog__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #voices-modal .modal-dialog__body,
  #remarks-modal .modal-dialog__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  #retro-problems-modal-backdrop,
  #discussion-maturity-modal-backdrop,
  #tour-hub-backdrop {
    z-index: 300;
  }

  #retro-problems-modal,
  #discussion-maturity-modal,
  #tour-hub {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    border-radius: 0;
    z-index: 301;
  }

  #retro-problems-modal .modal-dialog__header,
  #discussion-maturity-modal .modal-dialog__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }

  #tour-hub .tour-hub-card__header {
    flex-shrink: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-left: calc(var(--tour-hub-inline-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--tour-hub-inline-pad) + env(safe-area-inset-right, 0px));
  }

  #retro-problems-modal .modal-dialog__body,
  #discussion-maturity-modal .modal-dialog__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  #tour-hub .tour-hub-card__body {
    min-height: 0;
    overflow: auto;
    padding-left: calc(var(--tour-hub-inline-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--tour-hub-inline-pad) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
}

.consent-block {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.consent-block:first-of-type {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: none;
}

.consent-block h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.consent-block__text {
  max-height: 8rem;
  overflow: auto;
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.consent-block__text strong {
  color: var(--text);
  font-weight: 650;
}

#consent-display-name {
  font-weight: 650;
}

.checkbox-row .consent-scroll-hint {
  display: none;
}

.checkbox-row:has(input:disabled) .consent-scroll-hint {
  display: inline;
}

.checkbox-row:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.consent-block--biometric > .field-hint:first-child {
  margin-top: 0;
  margin-bottom: 0.45rem;
}

.consent-block--biometric {
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warn, #b45309) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn, #b45309) 12%, var(--surface));
}

.consent-block--changes {
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warn, #b45309) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn, #b45309) 10%, var(--surface));
}

.consent-changes__lead {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.consent-changes__body {
  max-height: 40vh;
  overflow: auto;
  margin: 0.45rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.45;
  background: var(--surface);
}

.consent-block .badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.consent-revoked-banner {
  margin: 0.75rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d97706;
  border-radius: var(--radius);
  background: rgba(245, 158, 11, 0.12);
}

.consent-revoke-box {
  margin: 0.75rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.consent-mentions-show-own {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  margin: 0.2rem 0 0.5rem;
}

.consent-mentions-show-own .dev-mode-toggle__label {
  font-size: 0.9rem;
  color: var(--muted);
}

.consent-mentions {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.consent-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.consent-admin-table th,
.consent-admin-table td {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.consent-admin-draft {
  opacity: 0.72;
}

.consent-admin-bio {
  font-weight: 500;
}

.consent-admin-bio--granted {
  color: var(--status-done);
}

.consent-admin-bio--declined {
  color: var(--status-failed, var(--error));
}

.consent-admin-bio--revoked {
  color: var(--status-cancelled);
}

.consent-admin-bio--pending {
  color: var(--status-queue);
}

.consent-admin-bio--none {
  color: var(--muted);
  font-weight: 400;
}

.login-admin-approx {
  opacity: 0.72;
  font-size: 0.85em;
}

.login-admin-role-cell {
  white-space: nowrap;
}

.login-admin-role-cell .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.login-admin-role-shield {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  pointer-events: none;
}

.retro-practices-section,
.retro-people-fit-section {
  margin-top: 1rem;
}

.retro-people-fit-table.retro-problems-table th,
.retro-people-fit-table.retro-problems-table td {
  padding: 0.35rem 0.55rem;
}

.retro-people-fit-table.retro-problems-table th:nth-child(1),
.retro-people-fit-table.retro-problems-table td:nth-child(1) {
  width: 22%;
}

.retro-people-fit-table.retro-problems-table th:nth-child(2),
.retro-people-fit-table.retro-problems-table td:nth-child(2) {
  width: 22%;
}

.retro-people-fit-table.retro-problems-table th:nth-child(3),
.retro-people-fit-table.retro-problems-table td:nth-child(3) {
  width: 9rem;
  white-space: nowrap;
}

.retro-people-fit-table.retro-problems-table th:nth-child(4),
.retro-people-fit-table.retro-problems-table td:nth-child(4) {
  width: auto;
}

.retro-practices-org-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.retro-practice-chip {
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  background: color-mix(in srgb, var(--surface) 80%, var(--muted));
}

.retro-practices-table.retro-problems-table th:nth-child(2),
.retro-practices-table.retro-problems-table td:nth-child(2) {
  width: 9rem;
  white-space: nowrap;
}

.retro-practices-dots {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
}

.retro-practice-dot {
  box-sizing: border-box;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.retro-practice-dot--low {
  background: color-mix(in srgb, var(--danger, #b91c1c) 80%, transparent);
}

.retro-practice-dot--medium {
  background: color-mix(in srgb, var(--accent) 55%, var(--muted));
}

.retro-practice-dot--high {
  background: color-mix(in srgb, var(--accent) 85%, transparent);
}

.retro-practice-dot--na {
  background: transparent;
  border: 1px solid var(--border);
}

.retro-people-fit-item--stretched td:nth-child(3),
.retro-people-fit-item--weak td:nth-child(3) {
  color: color-mix(in srgb, var(--danger, #b91c1c) 80%, var(--text));
}

.retro-people-fit-item--overqualified td:nth-child(3) {
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.retro-people-fit-item--harmonic td:nth-child(3) {
  color: var(--muted);
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}

.tour-overlay--above-modal {
  z-index: 52;
}

.tour-spot {
  position: absolute;
  border-radius: 0.35rem;
  box-shadow: 0 0 0 2px var(--accent),
    0 0 0 9999px color-mix(in srgb, var(--text) 45%, transparent);
  pointer-events: none;
}

.tour-card {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  width: min(22rem, calc(100vw - 2rem));
  padding: var(--control-padding);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #ffffe1;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.35rem;
}

@media (prefers-color-scheme: dark) {
  .tour-card {
    background: var(--surface);
  }
}

.tour-card-text {
  margin: 0;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  max-height: min(40vh, 16rem);
  overflow-y: auto;
}

.tour-card-text a {
  color: var(--link);
}

.tour-card-progress {
  margin: 0;
}

.tour-card-actions {
  flex-wrap: wrap;
}

.tour-card-actions .btn-secondary {
  border: 1px solid color-mix(in srgb, var(--muted) 45%, var(--border));
}

.tour-key-cue {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ui-hidden-restore-pip.tour-restore-pip-cue {
  animation: tour-restore-pip-blink 1s ease-in-out infinite;
}

@keyframes tour-restore-pip-blink {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

#tour-card-voice .tour-voice-idle,
#tour-card-voice .tour-voice-wave {
  display: inline-block;
  vertical-align: middle;
}

#tour-card-voice .tour-voice-wave {
  display: none;
}

#tour-card-voice.is-speaking .tour-voice-idle {
  display: none;
}

#tour-card-voice.is-speaking .tour-voice-wave {
  display: inline-block;
}

#tour-card-voice.is-speaking,
#tour-card-voice.is-pressed,
#tour-card-voice:active:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, var(--btn-secondary-bg));
  color: var(--accent);
}

#tour-card-voice.is-pressed,
#tour-card-voice:active:not(:disabled) {
  transform: scale(0.92);
}

.tour-voice-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: tour-voice-bar 0.8s ease-in-out infinite;
}

.tour-voice-bar:nth-child(2) {
  animation-delay: 0.15s;
}

.tour-voice-bar:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes tour-voice-bar {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-voice-bar {
    animation: none;
  }

  .ui-hidden-restore-pip.tour-restore-pip-cue {
    animation: none;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  #tour-card-voice.is-pressed,
  #tour-card-voice:active:not(:disabled) {
    transform: none;
  }
}

.tour-card-remark-form {
  display: grid;
  gap: 0.35rem;
}

.tour-card-remark-form textarea {
  width: 100%;
  min-height: 4rem;
  resize: vertical;
  padding: var(--control-padding);
  font-family: inherit;
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--input-bg);
}

#tour-hub.tour-hub-card .tour-hub-chapters {
  margin: 0;
  padding: 0;
}

#tour-hub.tour-hub-card .tour-hub-chapter + .tour-hub-chapter {
  margin-top: 0;
}

.tour-hub-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.tour-hub-chapter {
  display: block;
}

.tour-hub-chapter-pip {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.tour-hub-chapter-pip.hidden {
  display: none;
}

#tour-hub.tour-hub-card {
  --tour-hub-inline-pad: 1.25rem;
  width: min(22rem, calc(100vw - 2rem));
  max-width: calc(100% - 2rem);
  border: 1px solid #3d4a5d;
  background: rgba(26, 35, 50, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color: #e8ecf1;
}

#tour-hub.tour-hub-card .tour-hub-card__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  border-bottom-color: #3d4a5d;
  padding-left: var(--tour-hub-inline-pad);
  padding-right: var(--tour-hub-inline-pad);
}

#tour-hub.tour-hub-card .tour-hub-lead {
  grid-column: 1;
}

#tour-hub.tour-hub-card .modal-dialog__title,
#tour-hub.tour-hub-card .modal-dialog__close {
  color: #e8ecf1;
}

#tour-hub.tour-hub-card .modal-dialog__title {
  grid-column: 1;
}

#tour-hub.tour-hub-card .modal-dialog__close {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.tour-hub-lead,
.tour-hub-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #9aa8b8;
}

.tour-hub-lead {
  margin: 0 0 0.35rem;
}

.tour-hub-hint {
  margin: 0.35rem 0;
}

.tour-hub-card__body {
  display: grid;
  gap: 0.35rem;
}

#tour-hub.tour-hub-card .tour-hub-card__body {
  padding-left: var(--tour-hub-inline-pad);
  padding-right: var(--tour-hub-inline-pad);
}

.tour-hub-chapter-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.25;
  font-weight: 600;
  background: #2d3a4d;
  border: 1px solid #4a5568;
  color: #e8ecf1;
}

.tour-hub-chapter-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tour-hub-chapter-btn:disabled {
  opacity: 0.5;
}

.tour-hub-chapter-blurb {
  display: block;
  margin-top: 0.35rem;
  font-weight: 400;
  color: #9aa8b8;
}

.tour-hub-actions {
  display: grid;
  gap: 0.35rem;
}

.tour-hub-primary,
.tour-hub-later {
  width: 100%;
  box-sizing: border-box;
}

.tour-hub-primary {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}

.tour-hub-primary.tour-hub-primary--resume {
  background: #22c55e;
  border-color: #22c55e;
}

.tour-hub-primary.tour-hub-primary--resume:hover:not(:disabled) {
  background: #16a34a;
  border-color: #16a34a;
}

.tour-hub-later {
  background: #2d3a4d;
  border: 1px solid #4a5568;
  color: #e8ecf1;
}

.tour-stale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}