/**
 * naynor shared UI tokens + base components (main app + QA).
 * Page-specific layout stays in each HTML template; this file prevents token drift.
 * AYI-103 / critic handoff after AYI-97.
 * AYI-143: form controls, topbar/brand, empty-state, login helpers.
 */

/* AYI-236: semantic surface tokens (light default) + type identity */
:root {
  color-scheme: light;
  --bg: #f3f5f9;
  --bg-elevated: #ffffff;
  --bg-wash-1: #dbeafe;
  --bg-wash-2: #d1fae5;
  --bg-wash-3: #ede9fe;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --surface-muted: #eef1f6;
  --surface-sunken: #f1f5f9;
  --border: #d0d7e2;
  --border-soft: #e2e8f0;
  --text: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --err: #dc2626;
  --err-soft: #fee2e2;
  --info-soft: #dbeafe;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.08);
  --focus: 0 0 0 3px rgba(37, 99, 235, 0.24);
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.35rem;
  --space-5: 1.75rem;
  --space-6: 2.25rem;
  --input-bg: var(--surface-muted);
  --input-bg-focus: #ffffff;
  --placeholder: #94a3b8;
  --topbar-bg: rgba(243, 245, 249, 0.88);
  --glass: rgba(255, 255, 255, 0.72);
  --chrome-border: rgba(208, 215, 226, 0.9);
  --on-accent: #ffffff;
  --hover-fill: color-mix(in srgb, var(--text) 5%, transparent);
  --hover-fill-strong: color-mix(in srgb, var(--text) 9%, transparent);
  --border-strong: #94a3b8;
  --scrim: rgba(15, 23, 42, 0.45);
  --danger: var(--err);
  --page-max: 860px;
  --page-max-wide: 1200px;
  --rail-width: 17.5rem;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-md: 0.95rem;
  --text-lg: 1.05rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.65rem;
  --leading: 1.55;
  --leading-tight: 1.25;
  font-family: var(--font-sans);
  font-feature-settings: "ss01" on, "cv11" on;
}

/* AYI-236 D: dark scheme via data-theme or system preference */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --bg-elevated: #111a2b;
  --bg-wash-1: rgba(37, 99, 235, 0.18);
  --bg-wash-2: rgba(16, 185, 129, 0.12);
  --bg-wash-3: rgba(139, 92, 246, 0.12);
  --card: #121b2e;
  --card-hover: #172238;
  --surface-muted: #1a2438;
  --surface-sunken: #0f172a;
  --border: #2a364d;
  --border-soft: #1f2a3d;
  --text: #e8eef9;
  --muted: #9aa8bf;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --ok: #4ade80;
  --ok-soft: rgba(34, 197, 94, 0.16);
  --warn: #fbbf24;
  --warn-soft: rgba(245, 158, 11, 0.16);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, 0.16);
  --info-soft: rgba(59, 130, 246, 0.16);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.14);
  --focus: 0 0 0 3px rgba(59, 130, 246, 0.35);
  --input-bg: var(--surface-muted);
  --input-bg-focus: #0f172a;
  --placeholder: #6b7c96;
  --topbar-bg: rgba(11, 18, 32, 0.86);
  --glass: rgba(18, 27, 46, 0.78);
  --chrome-border: rgba(42, 54, 77, 0.95);
  --on-accent: #ffffff;
  --hover-fill: color-mix(in srgb, var(--text) 8%, transparent);
  --hover-fill-strong: color-mix(in srgb, var(--text) 14%, transparent);
  --border-strong: #64748b;
  --scrim: rgba(0, 0, 0, 0.55);
  --danger: var(--err);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-elevated: #111a2b;
    --bg-wash-1: rgba(37, 99, 235, 0.18);
    --bg-wash-2: rgba(16, 185, 129, 0.12);
    --bg-wash-3: rgba(139, 92, 246, 0.12);
    --card: #121b2e;
    --card-hover: #172238;
    --surface-muted: #1a2438;
    --surface-sunken: #0f172a;
    --border: #2a364d;
    --border-soft: #1f2a3d;
    --text: #e8eef9;
    --muted: #9aa8bf;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: rgba(59, 130, 246, 0.16);
    --ok: #4ade80;
    --ok-soft: rgba(34, 197, 94, 0.16);
    --warn: #fbbf24;
    --warn-soft: rgba(245, 158, 11, 0.16);
    --err: #f87171;
    --err-soft: rgba(248, 113, 113, 0.16);
    --info-soft: rgba(59, 130, 246, 0.16);
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.14);
    --focus: 0 0 0 3px rgba(59, 130, 246, 0.35);
    --input-bg: var(--surface-muted);
    --input-bg-focus: #0f172a;
    --placeholder: #6b7c96;
    --topbar-bg: rgba(11, 18, 32, 0.86);
    --glass: rgba(18, 27, 46, 0.78);
      --chrome-border: rgba(42, 54, 77, 0.95);
    --on-accent: #ffffff;
    --hover-fill: color-mix(in srgb, var(--text) 8%, transparent);
    --hover-fill-strong: color-mix(in srgb, var(--text) 14%, transparent);
    --border-strong: #64748b;
    --scrim: rgba(0, 0, 0, 0.55);
    --danger: var(--err);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  line-height: var(--leading);
  background:
    radial-gradient(1100px 520px at 8% -12%, var(--bg-wash-1) 0%, transparent 58%),
    radial-gradient(900px 480px at 100% 0%, var(--bg-wash-2) 0%, transparent 52%),
    radial-gradient(700px 360px at 50% 100%, var(--bg-wash-3) 0%, transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* AYI-172: skip link — off-screen until keyboard focus, then high-contrast chip. */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 200;
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.12s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--focus), var(--shadow);
  color: var(--accent-hover);
}

/* AYI-263: new app mark already includes rounded tile; keep shadow neutral */
.brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 11px;
  display: block;
  flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  object-fit: contain;
  background: transparent;
}
html[data-theme="dark"] .brand-mark {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
}

.section-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.section-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.field-hint {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-soft);
}

.card-primary {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow), var(--shadow-glow);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card) 48%);
}

label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.muted { color: var(--muted); font-size: 0.88rem; }
.error { color: var(--err); margin-top: 0.5rem; font-size: 0.9rem; }
.hidden { display: none !important; }

a { color: var(--accent-hover); text-underline-offset: 2px; }

a.nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  align-self: center;
}
a.nav-link:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--hover-fill);
}

/* AYI-115 / AYI-118 / AYI-120 / AYI-133: shared top main nav on all pages. */
.main-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.65rem 0 1rem;
  padding: 0.28rem;
  background: var(--surface-muted);
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  padding: 0.55rem 1rem;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
a.tab-btn {
  color: var(--muted);
}
.tab-btn:hover:not(:disabled) {
  background: var(--hover-fill-strong);
  color: var(--text);
  transform: none;
}
a.tab-btn:hover {
  color: var(--text);
}
.tab-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}
.tab-btn.is-active:hover:not(:disabled),
a.tab-btn.is-active:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  transform: none;
}
.tab-panel { margin-top: 0.1rem; }


/* AYI-144 / AYI-170: account menu (topbar user pill → change password / feedback / logout) */
.account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.account-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(18rem, 72vw);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.7rem 0.4rem 0.85rem;
  cursor: pointer;
  box-shadow: none;
  line-height: 1.3;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.account-menu-btn:hover:not(:disabled) {
  background: var(--card-hover);
  border-color: var(--border);
  color: var(--text);
  transform: none;
}
.account-menu-btn[aria-expanded="true"] {
  background: var(--card);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--focus);
}
.account-menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-caret {
  flex: 0 0 auto;
  font-size: 0.72rem;
  opacity: 0.75;
  line-height: 1;
}
.account-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  min-width: 12.5rem;
  max-width: min(18rem, 92vw);
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.account-menu-header {
  padding: 0.45rem 0.7rem 0.55rem;
  margin: 0 0 0.2rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-word;
}
.account-menu-header strong {
  display: block;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 650;
  margin-bottom: 0.1rem;
}
.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: none;
}
.account-menu-item:hover:not(:disabled) {
  background: var(--hover-fill);
  transform: none;
}
.account-menu-item:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.account-menu-item-danger {
  color: var(--err);
}
.account-menu-item-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.08);
}
.account-menu-sep {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: var(--border-soft);
  border: none;
}

/* AYI-126 / AYI-170: feedback + password-change modal (shared across main + admin) */
.fb-modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: var(--scrim); display: flex; align-items: flex-start;
  justify-content: center; padding: 4vh 1rem 2rem; overflow-y: auto;
}
.fb-modal {
  width: min(440px, 100%); background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.25rem 1.15rem;
}
.fb-modal h2 { margin: 0 0 0.25rem; font-size: 1.1rem; letter-spacing: -0.02em; }
.fb-modal .fb-lead { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.88rem; }
.fb-modal textarea {
  width: 100%; min-height: 7rem; resize: vertical; font: inherit; line-height: 1.45;
  padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text);
}
.fb-modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); background: var(--input-bg-focus); }
.fb-modal select {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--input-bg-focus); font: inherit; color: var(--text);
}
.fb-modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; justify-content: flex-end; }
.fb-ok { color: var(--ok); font-size: 0.9rem; margin: 0.5rem 0 0; }




/* AYI-128: admin Analytics table */
.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin: 0.85rem 0 1rem;
  align-items: flex-end;
}
.analytics-filter {
  min-width: 10rem;
  flex: 0 1 12rem;
}
.analytics-filter label { margin-bottom: 0.3rem; }
.analytics-filter select {
  width: 100%;
  min-height: 2.5rem;
}
/* AYI-175: column density control sits with filters */
.analytics-filter-action {
  min-width: auto;
  flex: 0 0 auto;
}
.analytics-filter-spacer {
  display: block;
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}
.analytics-filter-action #analytics-columns-btn {
  min-height: 2.5rem;
  white-space: nowrap;
}
/* AYI-175: progressive disclosure — hide secondary columns until expanded */
.analytics-table:not(.show-extra-cols) .analytics-col-extra {
  display: none;
}
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.65rem;
  margin: 0 0 1rem;
}
.analytics-tile {
  background: var(--card-hover);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
.analytics-tile .label {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.analytics-tile .value {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.analytics-tile.total {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.analytics-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.analytics-table th,
.analytics-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.analytics-table th {
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.analytics-table tbody tr:last-child td { border-bottom: none; }
.analytics-row { cursor: pointer; }
.analytics-row:hover td { background: var(--card-hover); }
.analytics-row.is-selected td { background: var(--info-soft); }
.analytics-username {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}
.analytics-role {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.analytics-money { font-weight: 650; }
.analytics-table .muted-num { color: var(--muted); font-weight: 500; }
.analytics-when { color: var(--muted); font-size: 0.84rem; }
.analytics-empty-row td {
  text-align: center;
  color: var(--muted);
  padding: 1.25rem 0.75rem;
}
.analytics-user-detail {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
}
.analytics-user-jobs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.analytics-job-row {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--card-hover);
}
.analytics-job-meta { margin-top: 0.15rem; font-size: 0.82rem; }


button {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.12s ease, opacity 0.12s ease;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
button.secondary {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}
button.secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--card-hover);
  transform: none;
}
/* Quiet tertiary actions — demoted vs secondary (Refresh, Expand/Collapse). AYI-141 / AYI-173 */
button.btn-quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 600;
  padding: 0.45rem 0.65rem;
}
button.btn-quiet:hover:not(:disabled) {
  background: var(--hover-fill);
  color: var(--text);
  border-color: transparent;
  transform: none;
}
button.danger {
  background: transparent;
  border: 1px solid var(--err);
  color: var(--err);
}
button.primary,
#submit-btn,
#login-btn,
#register-btn,
#run-btn {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
  padding: 0.78rem 1.25rem;
  font-size: 0.98rem;
}
button.primary:hover:not(:disabled),
#submit-btn:hover:not(:disabled),
#login-btn:hover:not(:disabled),
#register-btn:hover:not(:disabled),
#run-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  background: var(--info-soft);
  color: var(--accent-hover);
}
.tag.done { background: var(--ok-soft); color: var(--ok); }
.tag.failed { background: var(--err-soft); color: var(--err); }
.tag.cancelled { background: var(--warn-soft); color: var(--warn); }
.tag.queued,
.tag.uploading,
.tag.converting,
.tag.transcribing,
.tag.building,
.tag.running {
  background: var(--info-soft);
  color: var(--accent-hover);
}

/* Mobile-friendly file pick control (AYI-103). */
.dropzone-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  min-width: min(100%, 16rem);
  width: 100%;
  max-width: 22rem;
  margin: 0 auto 0.65rem;
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: none;
}
.dropzone-pick:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: none;
}
/* AYI-145 / AYI-137: single pick affordance — custom "Choose audio file" only.
   Higher-specificity selector + full sr-only reset so shared form styles cannot
   re-skin the native control. Button .click() and drag-drop still use #audio. */
input.dropzone-file-input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  max-width: 1px;
  max-height: 1px;
  min-width: 0;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  background: transparent;
  box-shadow: none;
  /* Choose button is the keyboard/focus path; input is JS-triggered only. */
  pointer-events: none;
}
@media (max-width: 560px) {
  .dropzone-pick {
    max-width: none;
    min-height: 3.1rem;
  }
}

/* Success moment when a transcript becomes Ready (AYI-103). */
.ready-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border));
  background: linear-gradient(180deg, var(--ok-soft) 0%, var(--card) 100%);
  box-shadow: var(--shadow-soft);
}
.ready-banner-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ok);
}
.ready-banner-detail {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 0;
}
.ready-banner .actions {
  margin: 0;
  margin-left: auto;
}
.ready-banner button {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
}

/* Returning-user hero: collapsible how-it-works (AYI-103). */
.hero-steps-wrap {
  margin: 0 0 1.35rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--glass);
  box-shadow: var(--shadow-soft);
}
.hero-steps-wrap > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  user-select: none;
}
.hero-steps-wrap > summary::-webkit-details-marker { display: none; }
.hero-steps-wrap > summary::before {
  content: "▸ ";
  color: var(--accent-hover);
  font-size: 0.85em;
}
.hero-steps-wrap[open] > summary::before { content: "▾ "; }
.hero-steps-wrap[open] > summary {
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
.hero-steps-wrap .hero-steps {
  margin: 0;
  padding: 0.65rem;
  border: none;
  box-shadow: none;
  background: transparent;
}
.hero-steps-wrap.is-fresh {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.hero-steps-wrap.is-fresh > summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-steps-wrap.is-fresh .hero-steps {
  padding: 0;
}

/* QA matrix plain-language line under technical description. */
.step-user-summary {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 550;
  line-height: 1.4;
}
.step-tech-detail {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

/* AYI-142: solid danger for destructive confirm primary action */
button.danger-fill {
  background: var(--err);
  border: 1px solid var(--err);
  color: var(--on-accent);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.22);
}
button.danger-fill:hover:not(:disabled) {
  background: color-mix(in srgb, var(--err) 88%, #000);
  border-color: color-mix(in srgb, var(--err) 88%, #000);
  transform: translateY(-1px);
}
button.danger-fill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28);
}

/* AYI-142: shared in-app confirm dialog (replaces window.confirm) */
.ayin-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
  overflow-y: auto;
}
.ayin-confirm {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px rgba(15, 23, 42, 0.04);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.ayin-confirm-title {
  margin: 0 0 var(--space-2);
  font-size: 1.08rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}
.ayin-confirm-body {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ayin-confirm-body:last-of-type {
  margin-bottom: var(--space-3);
}
/* AYI-185: optional select field (e.g. retry language). */
.ayin-confirm-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 var(--space-3);
}
.ayin-confirm-field-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ayin-confirm-select,
.ayin-confirm-input {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ayin-confirm-select:focus,
.ayin-confirm-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.ayin-confirm-field-error {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--danger, #b91c1c);
  line-height: 1.35;
}
.ayin-confirm-field-error.hidden {
  display: none;
}
.ayin-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 var(--space-3);
  padding: 0.65rem 0.75rem;
  background: var(--card-hover);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.ayin-confirm-check input {
  margin: 0.2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.ayin-confirm-check span {
  line-height: 1.4;
}
.ayin-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-1);
}

/* -------------------------------------------------------------------------
   AYI-143: shared page chrome, form controls, empty states, login helpers.
   Page templates keep only surface-specific layout (gradients, max-width,
   QA matrix, tables, dropzone layout variants).
   ------------------------------------------------------------------------- */

/* Base page column — override max-width per surface.
   AYI-172: .page-frame holds width/padding so <header> + <main> share one column. */
.page-frame {
  margin: 0 auto;
  padding: 1.25rem 1.25rem 4rem;
  max-width: var(--page-max);
  width: 100%;
}
.page-frame--wide {
  max-width: var(--page-max-wide);
}
@media (min-width: 1100px) {
  .page-frame {
    max-width: var(--page-max-wide);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* Legacy: keep main-as-column working if a surface still wraps everything in main. */
main {
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
/* When main sits inside .page-frame it is only the content landmark. */
.page-frame > main {
  margin: 0;
  padding: 0;
  max-width: none;
}
#main-content:focus,
#main-content:focus-visible {
  outline: none;
  box-shadow: none;
}

h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: var(--leading-tight);
}

.sub {
  color: var(--muted);
  margin: 0.2rem 0 0;
  max-width: 42rem;
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Topbar + brand — sticky chrome (AYI-236 B) */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.15rem;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck,
.page-frame:has(.app-shell:not(.hidden)) .topbar {
  border-bottom-color: var(--chrome-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.brand-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.brand-copy h1 {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.65rem);
}
.brand-copy .sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Identity pills (admin who-pill + main user-pill) */
.who-pill,
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}
.who-pill {
  margin: 0 0 0.9rem;
}
.who-pill strong,
.user-pill strong {
  color: var(--text);
  font-weight: 650;
}

/* Form controls — one focus/hover/autofill contract for all surfaces */
input[type="password"],
input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-xs);
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  line-height: 1.4;
  font-family: inherit;
  font-weight: 400;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="password"],
input[type="text"],
input[type="number"],
input[type="email"],
select {
  min-height: 2.75rem;
}
input[type="number"] {
  max-width: 12rem;
}
input[type="password"] {
  letter-spacing: 0.08em;
}
input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
  letter-spacing: normal;
}
input[type="password"]:hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}
input[type="password"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--input-bg-focus);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--input-bg-focus) inset;
  transition: background-color 99999s ease-out;
  border: 1px solid var(--border);
}
select {
  cursor: pointer;
}
textarea {
  min-height: 5rem;
  resize: vertical;
}

.row {
  margin-bottom: 0.9rem;
}
.row:last-child {
  margin-bottom: 0;
}

/* Admin login gate box */
#login-box {
  margin-top: 0.85rem;
  max-width: 22rem;
}
#login-box .actions {
  margin-top: 0.25rem;
}

/* Two-column form layouts (Users invite, etc.) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
.form-grid .span-2 {
  grid-column: 1 / -1;
}

/* Empty / zero-data regions */
.empty-state {
  text-align: center;
  padding: 1.35rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  color: var(--muted);
  font-size: var(--text-sm);
}
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.65rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.empty-state-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.empty-state-title {
  margin: 0 0 0.3rem;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.empty-state-lead {
  margin: 0 0 0.85rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}

/* Auth / password-change intro copy */
.login-welcome {
  margin: 0 0 1rem;
}
.login-welcome h2 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.login-welcome p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* AYI-146: lightweight polite toast for transient success (folder, cancel, copy, password).
   Keep inline form .error for validation — this is for short confirmations only. */
.ayin-toast-region {
  position: fixed;
  z-index: 10050;
  left: 50%;
  bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 1.5rem));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}
.ayin-toast {
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  background: linear-gradient(180deg, var(--ok-soft) 0%, var(--card) 100%);
  color: var(--ok);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: var(--shadow);
  text-align: center;
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.ayin-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ayin-toast.is-leaving {
  opacity: 0;
  transform: translateY(0.35rem);
}
.ayin-toast--info {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(180deg, var(--info-soft) 0%, var(--card) 100%);
  color: var(--accent-hover);
}
.ayin-toast--error {
  border-color: color-mix(in srgb, var(--err) 45%, var(--border));
  background: linear-gradient(180deg, var(--err-soft) 0%, var(--card) 100%);
  color: var(--err);
}
@media (prefers-reduced-motion: reduce) {
  .ayin-toast {
    transition: none;
    transform: none;
  }
  .ayin-toast.is-leaving {
    transform: none;
  }
}


/* =========================================================================
   AYI-236 modernisation: dropzone base, admin nav split, bulk menu,
   two-zone desktop, theme toggle, density + motion polish
   ========================================================================= */

/* Shared dropzone (lifted from page-local) */
.dropzone {
  position: relative;
  border: 2px dashed color-mix(in srgb, var(--muted) 55%, var(--border));
  border-radius: 12px;
  padding: 1.25rem 1.05rem 1.05rem;
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 55%),
    var(--surface-sunken);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  text-align: center;
}
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--focus);
  transform: translateY(-1px);
}
.dropzone.has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  text-align: left;
}
.dropzone-title {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.dropzone-file {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  color: var(--muted);
  word-break: break-word;
}
.dropzone .dropzone-pick { display: flex; }

/* Product vs admin nav (F) */
.main-tabs-cluster {
  display: contents;
}
.main-tabs-admin {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding-left: 0.45rem;
  border-left: 1px solid var(--border-soft);
}
.main-tabs-admin.is-visible {
  display: inline-flex;
}
.main-tabs-admin .tab-btn {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.48rem 0.8rem;
  color: var(--muted);
}
.main-tabs-admin .tab-btn.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}
.main-tabs-admin-label {
  display: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.35rem;
}
@media (min-width: 720px) {
  .main-tabs-admin-label { display: inline; }
}

/* Sticky nav under topbar when app shell is open */
.app-shell > .main-tabs {
  position: sticky;
  top: 4.1rem;
  z-index: 25;
  margin-top: 0.15rem;
}

/* Bulk actions menu (F) */
.jobs-bulk-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.jobs-bulk-menu.hidden { display: none !important; }
.jobs-bulk-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
}
.jobs-bulk-menu-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 28;
  min-width: 12.5rem;
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.jobs-bulk-menu-panel > button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  box-shadow: none;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
}
.jobs-bulk-menu-panel > button.hidden { display: none !important; }

/* Theme toggle control in account menu */
.account-menu-theme {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem 0.55rem;
  margin: 0 0 0.15rem;
  border-bottom: 1px solid var(--border-soft);
}
.account-menu-theme-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.account-menu-theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}
.theme-option {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  border-radius: 8px;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
  box-shadow: none;
  line-height: 1.2;
}
.theme-option:hover:not(:disabled) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: none;
  background: var(--card-hover);
}
.theme-option.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* Two-zone desktop workspace (B) */
.workspace-two-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1100px) {
  .workspace-two-zone {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: 1.15rem;
  }
  .workspace-rail {
    position: sticky;
    top: 8.5rem;
  }
  .workspace-rail .costs-disclosure {
    margin-top: 0;
  }
}
.workspace-primary { min-width: 0; }
.workspace-rail { min-width: 0; }

/* Denser job chrome */
.jobs-header {
  gap: 0.65rem 0.85rem;
}
.jobs-sub {
  font-size: var(--text-sm);
}

/* Motion polish with reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .dropzone.is-dragover,
  button.primary:hover:not(:disabled),
  #submit-btn:hover:not(:disabled),
  #login-btn:hover:not(:disabled),
  #register-btn:hover:not(:disabled),
  #run-btn:hover:not(:disabled) {
    transform: none !important;
  }
}

/* analytics surfaces use semantic tokens (AYI-236 contrast fix) */

/* Admin denied panel uses tokens */
.admin-denied {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: linear-gradient(180deg, var(--warn-soft) 0%, var(--card) 100%);
}
.admin-denied-title { color: var(--warn); }

/* Status icon helper for empty / ready */
.status-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -0.15em;
  margin-right: 0.35rem;
}
.status-icon svg { width: 100%; height: 100%; display: block; }

/* =========================================================================
   AYI-236 Pass 2: G–N modernisation packages
   Jobs control center, calm upload, library product, reading mode,
   admin parity, motion, narrow viewports, design-system consolidation.
   ========================================================================= */

/* --- Page header (K — admin + main parity) --- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 0 0 0.9rem;
}
.page-header-copy {
  min-width: 0;
  flex: 1 1 14rem;
}
.page-header-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--text);
}
.page-header-lead {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 42rem;
  line-height: 1.45;
}
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 1 auto;
}
.page-header-actions button {
  min-height: 2.5rem;
}

/* --- Skeletons (G, L) --- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.skeleton-line {
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, var(--surface-muted));
  margin: 0.35rem 0;
}
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-55 { width: 55%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-85 { width: 85%; }
.skeleton-block {
  height: 3.1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--border) 35%, var(--surface-muted));
}
.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, var(--card) 55%, transparent) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: ayin-shimmer 1.35s ease-in-out infinite;
}
@keyframes ayin-shimmer {
  100% { transform: translateX(100%); }
}
.jobs-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.jobs-skeleton .skeleton-block {
  height: 3.35rem;
  margin: 0;
}
.library-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* --- Busy buttons (L) --- */
button.is-busy,
button[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.82;
  color: transparent !important;
}
button.is-busy::after,
button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-top-color: var(--on-accent);
  animation: ayin-spin 0.7s linear infinite;
}
button.secondary.is-busy::after,
button.secondary[aria-busy="true"]::after,
button.btn-quiet.is-busy::after,
button.btn-quiet[aria-busy="true"]::after {
  border-color: color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--text);
}
@keyframes ayin-spin {
  to { transform: rotate(360deg); }
}

/* --- Compact job status stepper (G) --- */
.job-stepper {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  grid-column: 1 / -1;
  margin: 0.05rem 0 0.15rem;
  padding: 0 0.1rem;
  pointer-events: none;
}
.job-stepper-step {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border-radius: 99px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.job-stepper-step.is-done {
  background: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
}
.job-stepper-step.is-active {
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--ok) 65%, var(--accent))
  );
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.job-stepper-step.is-failed {
  background: var(--err);
  border-color: color-mix(in srgb, var(--err) 50%, var(--border));
}
.job-stepper-step.is-active.is-running {
  animation: ayin-step-pulse 1.4s ease-in-out infinite;
}
@keyframes ayin-step-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
.job-card.is-active-job {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.job-card.is-active-job:not(.is-expanded) .job-summary {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

/* Job row hierarchy polish (G) — title primary, status secondary */
/* AYI-254: 6 tracks so cost chip + actions never wrap into the chevron column */
.job-summary {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
}
.job-summary-title {
  font-size: 0.93rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  order: 0;
  justify-self: start;
  text-align: left;
}
.job-summary .tag {
  order: 0;
  font-size: 0.68rem;
  padding: 0.14rem 0.42rem;
}
.job-summary-meta {
  max-width: 14rem;
  font-size: 0.76rem;
}
.job-summary-actions {
  gap: 0.3rem;
}

/* Overflow menu for secondary job actions (G / AYI-253) */
.job-overflow {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.job-overflow-btn {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.55rem;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.job-overflow-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  bottom: auto;
  z-index: 45;
  min-width: 11.5rem;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
/* Open upward when near the bottom of the viewport / card (JS sets this). */
.job-overflow-panel.is-dropup {
  top: auto;
  bottom: calc(100% + 0.25rem);
}
.job-overflow-panel.hidden { display: none !important; }
.job-overflow-panel > button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  box-shadow: none;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.86rem;
  min-height: 2.4rem;
}
/* Job detail action bar — primary first, overflow aligned end (AYI-253) */
.job-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}
.job-detail-actions .job-overflow {
  margin-inline-start: auto;
}
/* Allow menus to escape card chrome and stack above neighbors while open. */
.job-card.has-overflow-open {
  overflow: visible !important;
  z-index: 40;
}

/* --- Calm upload (H) --- */
/* AYI-274: language + quality options are primary; More options is folder-only. */
#stt-language-row {
  margin-bottom: 0.85rem;
}
#quality-options-row:not(.hidden) {
  margin-bottom: 0.85rem;
}
.upload-more-options {
  margin: 0.15rem 0 0.85rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow: hidden;
}
.upload-more-options > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  user-select: none;
}
.upload-more-options > summary::-webkit-details-marker { display: none; }
.upload-more-options > summary::before {
  content: "▸ ";
  color: var(--accent-hover);
  font-size: 0.85em;
}
.upload-more-options[open] > summary::before { content: "▾ "; }
.upload-more-options[open] > summary {
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  background: var(--card-hover);
}
.upload-more-options-body {
  padding: 0.85rem 0.9rem 0.95rem;
}
.upload-more-options-body .row:last-child {
  margin-bottom: 0;
}
/* Denser multi-file rows */
.upload-file-list {
  gap: 0.4rem;
}
.upload-file-row {
  padding: 0.5rem 0.65rem;
  gap: 0.3rem 0.55rem;
  border-radius: 9px;
}
.upload-file-name {
  font-size: 0.86rem;
}
.upload-file-size {
  font-size: 0.74rem;
}
.upload-file-remove {
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
}
.upload-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.15rem;
}
.upload-primary-actions #submit-btn {
  min-width: 12rem;
}

/* --- Library as file product (I) --- */
.library-browser {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
}
.library-browser-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-muted) 0%, var(--card) 100%);
}
.library-browser-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 0;
}
.library-browser-meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.library-browser-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
}
.density-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  min-height: 2rem;
  box-shadow: none;
  cursor: pointer;
}
.density-toggle button:hover:not(:disabled) {
  color: var(--text);
  background: var(--hover-fill);
  transform: none;
}
.density-toggle button.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
}
.library-browser-body {
  padding: 0.65rem 0.75rem 0.8rem;
}
.library-list.is-compact .library-row {
  padding: 0.38rem 0.55rem;
  gap: 0.4rem 0.55rem;
}
.library-list.is-compact .lib-name {
  font-size: 0.86rem;
}
.library-list.is-compact .lib-meta {
  font-size: 0.72rem;
}
.library-list.is-compact .lib-actions button {
  padding: 0.32rem 0.6rem;
  font-size: 0.8rem;
  min-height: 2.15rem;
}

/* AYI-236 reopen: library folders expand/collapse in place (tree, not navigate-away) */
.library-list--tree {
  margin-top: 0.35rem;
}
.library-list--tree .library-row.folder-entry {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-muted));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}
.library-list--tree .library-row.folder-entry.is-open {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: inset 3px 0 0 var(--accent);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.library-list--tree .lib-tree-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  width: 2.4rem;
  flex: 0 0 auto;
  color: var(--muted);
}
.library-list--tree .lib-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.library-list--tree .folder-entry.is-open .lib-tree-toggle {
  transform: rotate(90deg);
  color: var(--accent-hover);
}
.library-list--tree .lib-chevron-svg {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
}
.library-list--tree .library-row--nested {
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--card);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.library-list--tree .library-row--nested + .library-row--nested {
  margin-top: -0.05rem;
}
.library-list--tree .library-row--status {
  opacity: 0.92;
}
.library-list--tree .library-row--status .lib-name {
  font-weight: 500;
}
.library-list--tree .muted-text {
  color: var(--muted);
  font-weight: 500;
}
.library-list--tree .error-inline {
  color: var(--err);
  font-weight: 600;
  font-size: 0.86rem;
}
.library-list.is-compact .library-row--nested {
  margin-left: 0.65rem;
  padding-left: 0.65rem;
}
@media (max-width: 560px) {
  .library-list--tree .library-row--nested {
    margin-left: 0.45rem;
    padding-left: 0.55rem;
  }
  .library-list--tree .lib-tree-lead {
    width: 2rem;
  }
}
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.type-chip--word {
  background: var(--info-soft);
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.type-chip--summary {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
}
.type-chip--folder {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.lib-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}
.lib-name-row .lib-name {
  min-width: 0;
}

/* --- Reading mode (J) --- */
body.reading-focus .topbar,
body.reading-focus .main-tabs,
body.reading-focus .hero-steps-wrap,
body.reading-focus .workspace-rail,
body.reading-focus .jobs-header,
body.reading-focus .job-card:not(.is-reading) {
  opacity: 0.28;
  filter: saturate(0.7);
  pointer-events: none;
  transition: opacity 0.18s ease, filter 0.18s ease;
}
body.reading-focus .job-card.is-reading {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
body.reading-focus .job-card.is-reading .job-details {
  display: block;
}
.reading-focus-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card) 100%);
}
.reading-focus-bar p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
.transcript-panel .transcript-full,
.summary-panel .transcript-full {
  max-width: 48rem;
  line-height: 1.65;
  font-size: 0.98rem;
}
.transcript-full.transcript-structured {
  line-height: 1.62;
}
.transcript-full.transcript-structured h1,
.transcript-full.transcript-structured h2,
.transcript-block.is-h1,
.transcript-block.is-h2 {
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.transcript-toolbar,
.summary-panel-toolbar {
  gap: 0.4rem;
}
.reading-focus-btn {
  font-size: 0.82rem;
  min-height: 2.35rem;
}

/* --- Stage micro-feedback (L) --- */
.stage-row.active .stage-bar,
.stage-row.running .stage-bar {
  transition: width 0.35s ease;
}
.progress-bar {
  transition: width 0.3s ease;
}

/* --- Narrow viewport pass (M) ≤720px --- */
@media (max-width: 720px) {
  .page-header {
    gap: 0.55rem;
  }
  .page-header-actions,
  .panel-header-actions,
  .jobs-header-actions {
    width: 100%;
  }
  .page-header-actions button,
  .panel-header-actions button {
    min-height: 2.75rem;
  }
  .job-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.3rem 0.4rem;
    padding: 0.55rem 0.7rem;
  }
  .job-chevron {
    grid-column: 1;
    grid-row: 1;
  }
  .job-summary .tag {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .job-summary-title {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }
  .job-summary-meta {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    text-align: left;
  }
  .job-summary > .job-cost-chip {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
  }
  .job-summary-actions {
    grid-column: 3;
    grid-row: 1 / span 4;
    align-self: center;
    flex-direction: column;
    align-items: stretch;
  }
  .job-summary-dl,
  .job-overflow-btn,
  .lib-actions button,
  .upload-file-remove {
    min-height: 2.75rem;
  }
  .library-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .library-row .lib-meta,
  .library-row .lib-actions {
    grid-column: 1 / -1;
  }
  .library-row .lib-actions {
    justify-self: stretch;
    flex-wrap: wrap;
  }
  .library-row .lib-actions button {
    flex: 1 1 auto;
  }
  .library-browser-chrome {
    padding: 0.55rem 0.65rem;
  }
  .analytics-table-wrap,
  .users-table-wrap,
  .qa-table-wrap {
    position: relative;
  }
  .analytics-table-wrap::after,
  .users-table-wrap::after {
    content: "Swipe for more →";
    display: block;
    position: sticky;
    left: 0;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
  }
  .main-tabs {
    gap: 0.2rem;
  }
  .tab-btn {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
  }
  .brand-copy .sub {
    -webkit-line-clamp: 2;
  }
  .upload-primary-actions #submit-btn {
    width: 100%;
    min-width: 0;
  }
  body.reading-focus .topbar,
  body.reading-focus .main-tabs {
    display: none;
  }
}

/* --- Tab transition micro-feedback (L) --- */
.tab-panel {
  animation: ayin-tab-in 0.16s ease;
}
@keyframes ayin-tab-in {
  from { opacity: 0.55; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Admin table zebra / sticky headers (K) */
.users-table thead th,
.analytics-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.users-table tbody tr:nth-child(even) td,
.analytics-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-muted) 45%, transparent);
}
.users-table tbody tr:hover td,
.analytics-table tbody tr:hover td {
  background: var(--card-hover);
}

/* Reduced motion: disable Pass 2 animations */
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after,
  .job-stepper-step.is-active.is-running,
  .tab-panel {
    animation: none !important;
  }
  button.is-busy::after,
  button[aria-busy="true"]::after {
    animation: none !important;
    border-top-color: inherit;
    opacity: 0.7;
  }
  body.reading-focus .topbar,
  body.reading-focus .main-tabs,
  body.reading-focus .hero-steps-wrap,
  body.reading-focus .workspace-rail,
  body.reading-focus .jobs-header,
  body.reading-focus .job-card:not(.is-reading) {
    transition: none !important;
  }
}

/* =========================================================================
   AYI-236 Pass 3 (O–W) — product polish on top of Pass 2
   ========================================================================= */

/* --- S: unified iconography helpers --- */
.ayin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  vertical-align: -0.12em;
}
.ayin-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}
.btn-icon-only .ayin-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* --- S: status-pill vocabulary (aliases on .tag for one system) --- */
.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}
.status-pill--ready,
.tag.done {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 28%, var(--border));
}
.status-pill--failed,
.tag.failed {
  background: var(--err-soft);
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 28%, var(--border));
}
.status-pill--cancelled,
.tag.cancelled {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 28%, var(--border));
}
.status-pill--active,
.tag.queued,
.tag.uploading,
.tag.converting,
.tag.transcribing,
.tag.building,
.tag.running {
  background: var(--info-soft);
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.status-pill--idle {
  background: var(--surface-muted);
  color: var(--muted);
  border-color: var(--border-soft);
}

/* --- O: login & first-run product surface --- */
#login-card.login-product {
  max-width: 26rem;
  margin: 1.5rem auto 2rem;
  padding: 1.45rem 1.4rem 1.35rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, var(--card)) 0%, var(--card) 42%);
}
.login-product-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  margin: 0 0 1.15rem;
}
.login-product-mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  background: var(--card);
  object-fit: contain;
}
/* AYI-263: horizontal wordmark (light/dark pair) on login */
.login-product-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  margin: 0.15rem 0 0.1rem;
}
.login-product-wordmark {
  width: auto;
  height: 3.1rem;
  max-width: min(15.5rem, 88vw);
  object-fit: contain;
  display: block;
}
.login-product-wordmark--on-dark {
  display: none;
}
html[data-theme="dark"] .login-product-wordmark--on-light {
  display: none;
}
html[data-theme="dark"] .login-product-wordmark--on-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .login-product-wordmark--on-light {
    display: none;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .login-product-wordmark--on-dark {
    display: block;
  }
}
.login-product-brand .login-welcome {
  margin: 0;
  width: 100%;
}
.login-product-brand .login-welcome h2 {
  font-size: 1.28rem;
  letter-spacing: -0.03em;
}
.login-product-brand .login-welcome p {
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}
.login-product #login-panel .actions,
.login-product #register-panel .actions {
  margin-top: 0.35rem;
}
.login-product #login-btn,
.login-product #register-btn {
  width: 100%;
  min-height: 2.85rem;
  font-weight: 700;
}
.login-bootstrap-callout {
  margin: 0 0 0.95rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.4;
}
.login-bootstrap-callout strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.9rem;
  color: var(--accent-hover);
}
#register-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.auth-advanced {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--muted);
}
.auth-advanced summary {
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
.auth-advanced summary::-webkit-details-marker { display: none; }
.auth-advanced summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.12s ease;
}
.auth-advanced[open] summary::before { transform: rotate(90deg); }
.auth-advanced .auth-advanced-body { margin-top: 0.75rem; }
#auth-mode-hint { margin: 0.65rem 0 0; }
#auth-mode-hint:empty { display: none; }

/* --- P / AYI-258: upload as slide-over sheet ---
   Must paint above sticky .topbar (z-index 30) and account menu (40).
   Sheet lives at the main overlay layer (not under library/workspace) so it
   is not trapped in a lower stacking context than the sticky chrome. */
.upload-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.upload-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
#upload-card.upload-sheet {
  position: fixed;
  z-index: 85;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(28.5rem, 100vw);
  max-width: 100vw;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid var(--border);
  border-right: none;
  border-top: none;
  border-bottom: none;
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem 1.15rem 1.5rem;
  transform: translateX(104%);
  transition: transform 0.2s ease;
  background: var(--card);
  /* Keep hidden utility working until open */
}
#upload-card.upload-sheet.is-open {
  transform: translateX(0);
}
#upload-card.upload-sheet.hidden {
  /* stay mounted for animation; still remove from a11y tree via hidden attr in JS when closed */
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
#upload-card.upload-sheet.is-open:not(.hidden) {
  visibility: visible;
  pointer-events: auto;
}
body.upload-sheet-open {
  overflow: hidden;
}
/* Belt-and-suspenders: demote sticky chrome while the sheet is open so it
   cannot re-cover the lead copy / close control (AYI-258). */
body.upload-sheet-open .topbar,
body.upload-sheet-open .app-shell > .main-tabs {
  z-index: 20;
}
.upload-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.15rem 0 0.65rem;
  background: linear-gradient(180deg, var(--card) 70%, transparent);
}
.upload-sheet-header .panel-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.upload-sheet-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
@media (max-width: 560px) {
  #upload-card.upload-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: min(92vh, 100%);
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: translateY(104%);
  }
  #upload-card.upload-sheet.is-open {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .upload-sheet-backdrop,
  #upload-card.upload-sheet {
    transition: none !important;
  }
}

/* --- Q: ready completion surface --- */
.ready-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 1rem;
  align-items: center;
}
.ready-banner-copy {
  min-width: 0;
}
.ready-banner .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  margin-left: 0;
  justify-content: flex-end;
}
/* AYI-247: companion CTAs on Ready success path (summary / layout). */
.ready-banner-companion {
  white-space: nowrap;
}
.ready-banner-more {
  position: relative;
}
.ready-banner-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.ready-banner-more > summary::-webkit-details-marker { display: none; }
.ready-banner-more[open] > summary {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--accent-soft);
}
.ready-banner-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 5;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ready-banner-more-panel button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  box-shadow: none;
  min-height: 2.35rem;
}
@media (max-width: 640px) {
  .ready-banner {
    grid-template-columns: 1fr;
  }
  .ready-banner .actions {
    justify-content: stretch;
  }
  .ready-banner .actions > .primary {
    flex: 1 1 auto;
  }
}

/* --- R: jobs toolbar & filter chips --- */
.jobs-header.jobs-toolbar-sticky {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.15rem 0.65rem;
  background: linear-gradient(180deg, var(--card) 70%, color-mix(in srgb, var(--card) 40%, transparent));
  backdrop-filter: blur(6px);
}
.jobs-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  width: 100%;
}
.jobs-status-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
}
.jobs-status-chip {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  min-height: 2.05rem;
  cursor: pointer;
  box-shadow: none;
}
.jobs-status-chip:hover:not(:disabled) {
  color: var(--text);
  background: var(--hover-fill);
  transform: none;
}
.jobs-status-chip.is-active {
  background: var(--card);
  color: var(--text);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.jobs-status-chip[data-status="done"].is-active {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
}
.jobs-status-chip[data-status="failed"].is-active {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 30%, var(--border));
}
.jobs-status-chip[data-status="active"].is-active {
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
/* Visually hide native select but keep id for tests + a11y mirror */
.jobs-status-filter-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.jobs-header-actions.jobs-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-left: auto;
}
.jobs-toolbar-meta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.jobs-toolbar-meta .page-header-lead {
  margin: 0;
}

/* --- T: transcript reading power tools --- */
.reading-type-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}
.reading-type-controls button {
  min-height: 2.15rem;
  min-width: 2.15rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
.reading-type-controls button:hover:not(:disabled) {
  color: var(--text);
  background: var(--hover-fill);
  transform: none;
}
.reading-type-controls button:disabled {
  opacity: 0.45;
}
.reading-focus-bar {
  gap: 0.55rem;
}
.reading-focus-bar-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
body.reading-type-sm .transcript-panel .transcript-full,
body.reading-type-sm .summary-panel .transcript-full {
  font-size: 0.9rem;
  line-height: 1.55;
}
body.reading-type-md .transcript-panel .transcript-full,
body.reading-type-md .summary-panel .transcript-full {
  font-size: 0.98rem;
  line-height: 1.65;
}
body.reading-type-lg .transcript-panel .transcript-full,
body.reading-type-lg .summary-panel .transcript-full {
  font-size: 1.12rem;
  line-height: 1.72;
}
body.reading-type-xl .transcript-panel .transcript-full,
body.reading-type-xl .summary-panel .transcript-full {
  font-size: 1.28rem;
  line-height: 1.78;
}
@media print {
  body.reading-focus .topbar,
  body.reading-focus .main-tabs,
  body.reading-focus .hero-steps-wrap,
  body.reading-focus .workspace-rail,
  body.reading-focus .jobs-header,
  body.reading-focus .job-card:not(.is-reading),
  .skip-link,
  .ready-banner,
  .upload-sheet-backdrop,
  #upload-card.upload-sheet {
    display: none !important;
  }
  body.reading-focus .job-card.is-reading {
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .reading-focus-bar,
  .transcript-toolbar,
  .summary-panel-toolbar,
  .job-summary-actions,
  .job-overflow,
  .job-chevron {
    display: none !important;
  }
  .transcript-panel,
  .summary-panel {
    border: none !important;
    box-shadow: none !important;
  }
  .transcript-full {
    max-width: none !important;
    color: #000 !important;
  }
}

/* --- U: admin data surfaces 2.0 --- */
.admin-skeleton {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0;
}
.admin-skeleton .skeleton-block {
  height: 2.6rem;
  border-radius: 10px;
}
.analytics-summary .analytics-tile,
.admin-stat-tile {
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.analytics-summary .analytics-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.admin-mobile-cards {
  display: none;
  gap: 0.55rem;
  margin-top: 0.65rem;
}
.admin-mobile-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 0.75rem 0.85rem;
  box-shadow: var(--shadow-soft);
}
.admin-mobile-card-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.admin-mobile-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  font-size: 0.82rem;
}
.admin-mobile-card-grid .label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.admin-mobile-card-grid .value {
  margin: 0.05rem 0 0;
  font-weight: 650;
  color: var(--text);
}
@media (max-width: 720px) {
  .admin-mobile-cards.is-active {
    display: grid;
  }
  .admin-table-desktop-only.is-mobile-hidden {
    display: none;
  }
}

/* --- W: keyboard / focus power paths --- */
.ayin-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}
.kbd-hint kbd {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.08rem 0.32rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--muted);
  line-height: 1.2;
}

/* =========================================================================
   AYI-236 Pass 4 X — Design-system consolidation
   Lifted from index.html page-local <style> (jobs, library, costs, feedback,
   recovery, progress, upload estimate, transcript find base). Prefer tokens
   here for future main-app surfaces; keep true one-offs minimal.
   ========================================================================= */
    /* AYI-143: shared topbar/forms/empty-state in /static/ayin-ui.css */
    /* Page layout + main-app components. Shared chrome/forms/empty-state in ayin-ui.css (AYI-103 / AYI-143). */
    /* Page wash comes from ayin-ui.css body (tokenized for dark mode). */
    body { /* keep page-local overrides free of hard-coded washes */ }
    /* AYI-172: page-frame is the width column; main is content landmark. */
    /* AYI-236 B: width tokens live in ayin-ui.css (.page-frame / --page-max-wide) */
    .page-frame {
      padding-bottom: 4.5rem;
    }
    .hero-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
      margin: 0 0 1.35rem;
      padding: 0;
      list-style: none;
    }
    .hero-step {
      background: var(--glass);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-sm);
      padding: 0.7rem 0.75rem;
      min-width: 0;
      box-shadow: var(--shadow-soft);
    }
    /* AYI-278: badge must beat .hero-step span (desc text) so flex centering holds. */
    .hero-step .hero-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.4rem;
      height: 1.4rem;
      min-width: 1.4rem;
      padding: 0;
      box-sizing: border-box;
      border-radius: 50%;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      text-align: center;
      background: var(--accent-soft);
      color: var(--accent-hover);
      margin-bottom: 0.35rem;
      flex-shrink: 0;
    }
    .hero-step strong {
      display: block;
      font-size: 0.88rem;
      font-weight: 650;
      letter-spacing: -0.01em;
      margin-bottom: 0.12rem;
    }
    /* Description only — do not target .hero-step-num (cascade broke circle centering). */
    .hero-step > span:not(.hero-step-num) {
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.35;
    }
    @media (max-width: 560px) {
      .hero-steps { grid-template-columns: 1fr; }
    }
    .job-summary:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }
    /* AYI-126: user feedback modal */
    .fb-modal-backdrop {
      position: fixed; inset: 0; z-index: 80;
      background: var(--scrim); display: flex; align-items: flex-start;
      justify-content: center; padding: 4vh 1rem 2rem; overflow-y: auto;
    }
    .fb-modal {
      width: min(440px, 100%); background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.25rem 1.15rem;
    }
    .fb-modal h2 { margin: 0 0 0.25rem; font-size: 1.1rem; letter-spacing: -0.02em; }
    .fb-modal .fb-lead { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.88rem; }
    .fb-modal textarea {
      width: 100%; min-height: 7rem; resize: vertical; font: inherit; line-height: 1.45;
      padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px;
      background: var(--surface-muted); color: var(--text);
    }
    .fb-modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); background: var(--card); }
    .fb-modal select {
      width: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
      border-radius: 8px; background: var(--card); font: inherit; color: var(--text);
    }
    .fb-modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; justify-content: flex-end; }
    .fb-ok { color: var(--ok); font-size: 0.9rem; margin: 0.5rem 0 0; }
    /* AYI-115 / AYI-118 / AYI-120: .main-tabs / .tab-btn live in /static/ayin-ui.css */
    .panel-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem 0.85rem;
      margin: 0 0 0.85rem;
    }
    .panel-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.015em;
    }
    .panel-header-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem;
    }
    .panel-header-actions button {
      padding: 0.5rem 0.95rem;
      font-size: 0.88rem;
    }
    
    /* AYI-127: cannot-miss impersonation banner */
    .impersonation-banner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem 0.85rem;
      margin: 0 0 1rem;
      padding: 0.75rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border));
      background: linear-gradient(180deg, var(--warn-soft) 0%, color-mix(in srgb, var(--warn-soft) 70%, var(--card)) 100%);
      box-shadow: var(--shadow-soft);
      color: var(--warn);
    }
    .impersonation-banner-title {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--warn);
    }
    .impersonation-banner-detail {
      margin: 0;
      flex: 1 1 10rem;
      font-size: 0.88rem;
      color: color-mix(in srgb, var(--warn) 85%, var(--text));
      min-width: 0;
    }
    .impersonation-banner .actions {
      margin: 0;
      margin-left: auto;
    }
    .impersonation-banner button {
      padding: 0.45rem 0.9rem;
      font-size: 0.85rem;
      background: var(--warn);
      border-color: var(--warn);
      color: var(--on-accent);
    }
    .impersonation-banner button:hover:not(:disabled) {
      background: color-mix(in srgb, var(--warn) 85%, #000);
      border-color: color-mix(in srgb, var(--warn) 85%, #000);
    }
    /* AYI-174: password change reuses .fb-modal-backdrop / .fb-modal (no mid-page card). */
    /* AYI-74: compact summary first; full grid only when expanded. */
    .cost-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 0.75rem;
      margin: 0 0 0.5rem;
    }
    .cost-summary-total {
      font-size: 1.15rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--ok);
      margin: 0;
    }
    .cost-summary-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin: 0;
    }
    .cost-summary-hint {
      margin: 0 0 0.5rem;
      font-size: 0.82rem;
    }
    .cost-summary-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.15rem;
    }
    .cost-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
      gap: 0.65rem;
      margin-top: 0.75rem;
    }
    .cost-tile {
      background: var(--surface-muted);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.7rem 0.8rem;
    }
    .cost-tile .label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin: 0 0 0.25rem;
    }
    .cost-tile .value {
      font-size: 1.05rem;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
      margin: 0;
    }
    .cost-tile.total { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
    .cost-tile.total .value { color: var(--ok); }
    .cost-breakdown.hidden,
    .secondary-panel-body.hidden { display: none !important; }
    .secondary-heading {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 650;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .readiness {
      border-radius: 10px;
      padding: 0.85rem 1rem;
      border: 1px solid var(--border);
      background: var(--surface-muted);
    }
    .readiness-ready { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: var(--ok-soft); }
    .readiness-warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); background: var(--warn-soft); }
    .readiness-blocked { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); background: var(--err-soft); }
    .readiness-loading { opacity: 0.85; }
    .readiness-head {
      display: flex;
      gap: 0.7rem;
      align-items: flex-start;
    }
    .readiness-dot {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 999px;
      margin-top: 0.35rem;
      flex: 0 0 auto;
      background: var(--muted);
    }
    .readiness-ready .readiness-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18); }
    .readiness-warn .readiness-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.16); }
    .readiness-blocked .readiness-dot { background: var(--err); box-shadow: 0 0 0 3px rgba(240, 113, 120, 0.16); }
    .readiness-title {
      margin: 0;
      font-size: 0.98rem;
      font-weight: 650;
    }
    .readiness-ready .readiness-title { color: var(--ok); }
    .readiness-warn .readiness-title { color: var(--warn); }
    .readiness-blocked .readiness-title { color: var(--err); }
    .readiness-summary { margin: 0.2rem 0 0; }
    .readiness-items {
      list-style: none;
      margin: 0.75rem 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .readiness-items:empty { display: none; }
    .readiness-item {
      padding: 0.55rem 0.7rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--hover-fill);
    }
    .readiness-item.error { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
    .readiness-item.warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
    .readiness-item-msg {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 600;
    }
    .readiness-item-action {
      margin: 0.25rem 0 0;
      font-size: 0.84rem;
      color: var(--muted);
    }
    .readiness-item-hint {
      margin: 0.2rem 0 0;
      font-size: 0.78rem;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      word-break: break-word;
    }
    .readiness-lang { margin: 0.7rem 0 0; }
    /* AYI-78: large drop target; native file input is visually hidden (AYI-145). */
    /* AYI-236 A: shared .dropzone* base lives in ayin-ui.css (dark-safe tokens). */
    /* AYI-199: calm pre-start duration + cost summary on the upload form. */
    .upload-estimate {
      margin: 0.15rem 0 0.35rem;
      padding: 0.85rem 0.95rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--card-hover) 0%, var(--surface-sunken) 100%);
    }
    .upload-estimate.hidden { display: none; }
    .upload-estimate-title {
      margin: 0 0 0.35rem;
      font-size: 0.78rem;
      font-weight: 650;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .upload-estimate-lead {
      margin: 0;
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
    }
    .upload-estimate-lead .sep {
      color: var(--muted);
      font-weight: 500;
      margin: 0 0.35rem;
    }
    /* AYI-275: wall-clock processing band under duration/cost (not audio length). */
    .upload-estimate-lead .upload-estimate-proc {
      display: inline-block;
      margin-top: 0.35rem;
      font-size: 0.86rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.35;
    }
    .upload-estimate-hint {
      margin: 0.4rem 0 0;
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.4;
    }
    .upload-estimate-hint.loading {
      font-style: italic;
    }
    .upload-estimate details {
      margin-top: 0.55rem;
    }
    .upload-estimate summary {
      cursor: pointer;
      font-size: 0.84rem;
      color: var(--accent);
      font-weight: 550;
      list-style: none;
    }
    .upload-estimate summary::-webkit-details-marker { display: none; }
    .upload-estimate-breakdown {
      margin: 0.45rem 0 0;
      padding: 0;
      list-style: none;
      font-size: 0.84rem;
      color: var(--text);
    }
    .upload-estimate-breakdown li {
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.2rem 0;
      border-top: 1px solid var(--border-soft);
    }
    .upload-estimate-breakdown li:first-child { border-top: 0; }
    .upload-estimate-breakdown .label { color: var(--muted); }
    .upload-estimate-breakdown .value { font-variant-numeric: tabular-nums; font-weight: 550; }
    /* AYI-208: compact per-file title rows for batch upload. */
    .upload-file-list {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin: 0.15rem 0 0.25rem;
    }
    .upload-file-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.35rem 0.65rem;
      align-items: start;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      background: var(--card-hover);
    }
    .upload-file-row.has-error {
      border-color: color-mix(in srgb, var(--err) 40%, var(--border));
      background: var(--err-soft);
    }
    .upload-file-meta {
      min-width: 0;
    }
    .upload-file-name {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text);
      word-break: break-word;
    }
    .upload-file-size {
      margin: 0.15rem 0 0;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .upload-file-error {
      margin: 0.25rem 0 0;
      font-size: 0.8rem;
      color: var(--err);
      line-height: 1.35;
    }
    .upload-file-remove {
      flex: 0 0 auto;
      min-height: 2rem;
      padding: 0.25rem 0.55rem;
      font-size: 0.8rem;
    }
    .upload-file-title-wrap label {
      display: block;
      margin: 0 0 0.25rem;
      font-size: 0.78rem;
      font-weight: 550;
      color: var(--muted);
    }
    .upload-file-title-wrap input[type="text"] {
      width: 100%;
      margin: 0;
    }
    /* AYI-218: per-file language + title on multi-file rows. */
    .upload-file-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.45rem 0.65rem;
    }
    .upload-file-lang-wrap label {
      display: block;
      margin: 0 0 0.25rem;
      font-size: 0.78rem;
      font-weight: 550;
      color: var(--muted);
    }
    .upload-file-lang-wrap select {
      width: 100%;
      margin: 0;
      min-height: 2.25rem;
      font-size: 0.88rem;
    }
    @media (min-width: 520px) {
      .upload-file-fields {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: end;
      }
    }
    @media (max-width: 420px) {
      .dropzone { padding: 0.9rem 0.75rem; }
      .dropzone-title { font-size: 0.92rem; }
    }
    .folder-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: stretch;
    }
    .folder-row select { flex: 1 1 12rem; min-width: 0; }
    .folder-row input[type="text"] { flex: 1 1 12rem; min-width: 0; }
    .folder-row button { flex: 0 0 auto; white-space: nowrap; }
    .progress-wrap {
      height: 8px;
      background: var(--surface-muted);
      border-radius: 99px;
      overflow: hidden;
      margin: 0.75rem 0 0.5rem;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--ok) 70%, var(--accent)));
      transition: width 0.25s ease;
    }
    /* AYI-105: slim overall bar on collapsed active job rows */
    .job-summary-progress {
      grid-column: 1 / -1;
      margin: 0.05rem 0 0.1rem;
      pointer-events: none;
    }
    .job-summary-progress .progress-wrap {
      height: 5px;
      margin: 0;
      background: var(--scrim);
    }
    .job-card.is-expanded .job-summary-progress {
      display: none;
    }
    .stages {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin: 0.85rem 0 0.4rem;
    }
    .stage-row {
      display: grid;
      grid-template-columns: 6.5rem 1fr auto;
      gap: 0.55rem;
      align-items: center;
    }
    @media (max-width: 520px) {
      .stage-row {
        grid-template-columns: 5.2rem 1fr auto;
        gap: 0.4rem;
      }
    }
    .stage-label {
      font-size: 0.78rem;
      font-weight: 650;
      letter-spacing: 0.02em;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .stage-row.active .stage-label,
    .stage-row.running .stage-label { color: var(--text); }
    .stage-row.done .stage-label { color: var(--ok); }
    .stage-row.failed .stage-label { color: var(--err); }
    .stage-bar-wrap {
      height: 7px;
      background: var(--surface-muted);
      border-radius: 99px;
      overflow: hidden;
      border: 1px solid var(--border-soft);
    }
    .stage-bar {
      height: 100%;
      width: 0%;
      border-radius: 99px;
      background: var(--border);
      transition: width 0.25s ease, background 0.2s ease;
    }
    .stage-row.active .stage-bar,
    .stage-row.running .stage-bar {
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--ok) 70%, var(--accent)));
    }
    .stage-row.done .stage-bar {
      background: var(--ok);
    }
    .stage-row.failed .stage-bar {
      background: var(--err);
    }
    .stage-row.pending .stage-bar { width: 0% !important; }
    .stage-pct {
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
      min-width: 2.6rem;
      text-align: right;
    }
    .stage-row.done .stage-pct { color: var(--ok); font-weight: 700; }
    .stage-row.failed .stage-pct { color: var(--err); font-weight: 700; }
    .stage-row.active .stage-pct,
    .stage-row.running .stage-pct { color: var(--text); }
    .status-line { font-size: 0.95rem; }
    .status-line .tag {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0.15rem 0.45rem;
      border-radius: 4px;
      margin-right: 0.45rem;
      vertical-align: middle;
    }
    .tag.queued, .tag.uploading, .tag.converting, .tag.transcribing, .tag.building { background: var(--info-soft); color: var(--accent-hover); }
    .tag.done { background: var(--ok-soft); color: var(--ok); }
    .tag.failed { background: var(--err-soft); color: var(--err); }
    .tag.cancelled { background: var(--warn-soft); color: var(--warn); }
    .library-crumb {
      font-size: 0.8rem;
      color: var(--muted);
      margin: 0.2rem 0 0;
      line-height: 1.4;
    }
    .library-crumb button.linkish {
      background: none;
      border: none;
      color: var(--accent-hover);
      padding: 0;
      font-size: inherit;
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .library-list {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      margin-top: 0.75rem;
    }
    .library-list.library-list--tree {
      margin-top: 0.35rem;
    }
    .library-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 0.55rem 0.75rem;
      align-items: center;
      padding: 0.55rem 0.65rem;
      background: var(--surface-muted);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    @media (max-width: 560px) {
      .library-row {
        grid-template-columns: auto 1fr;
        gap: 0.35rem 0.55rem;
      }
      .library-row .lib-meta,
      .library-row .lib-actions {
        grid-column: 1 / -1;
      }
      .library-row .lib-actions { justify-self: start; }
    }
    .library-row.folder-entry { cursor: pointer; }
    .library-row.folder-entry:hover { border-color: var(--muted); }
    .library-row.folder-entry:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }
    /* AYI-177: SVG marks use currentColor (no emoji). */
    .lib-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.4rem;
      height: 1.4rem;
      flex: 0 0 auto;
      line-height: 1;
      color: var(--muted);
    }
    .lib-icon .lib-icon-svg {
      display: block;
      width: 1.125rem;
      height: 1.125rem;
    }
    .library-row.folder-entry .lib-icon { color: var(--accent-hover); }
    .lib-name {
      font-size: 0.92rem;
      font-weight: 600;
      word-break: break-word;
    }
    .lib-meta {
      font-size: 0.75rem;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .lib-actions { white-space: nowrap; display: inline-flex; gap: 0.35rem; align-items: center; }
    .lib-actions button { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
    .lib-actions button.lib-del-btn {
      background: var(--err-soft);
      color: var(--err);
      border: 1px solid color-mix(in srgb, var(--err) 40%, var(--border));
    }
    .lib-actions button.lib-del-btn:hover:not(:disabled) {
      background: color-mix(in srgb, var(--err) 28%, var(--card));
    }
    /* AYI-141 / AYI-169: empty library/jobs is a real empty-state with one strong Upload CTA */
    .library-empty,
    .jobs-empty {
      margin: 0.75rem 0 0;
      text-align: center;
      padding: 1.25rem 1rem;
      border: 1px dashed var(--border);
      border-radius: var(--radius-sm);
      background: var(--accent-soft);
      color: var(--muted);
      font-size: 0.9rem;
    }
    .library-empty-title,
    .jobs-empty-title {
      margin: 0 0 0.35rem;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .library-empty-lead,
    .jobs-empty-lead {
      margin: 0 0 0.9rem;
      font-size: 0.9rem;
      color: var(--muted);
    }
    .library-empty .primary,
    .jobs-empty .primary { min-width: 12rem; }
    .library-lead {
      margin: 0 0 0.75rem;
      color: var(--muted);
      font-size: 0.88rem;
    }
    /* AYI-141 / AYI-173: .btn-quiet lives in ayin-ui.css (shared tertiary). */
    /* AYI-141: Usage & costs as quiet disclosure, not a peer card */
    .costs-disclosure {
      margin: 0.35rem 0 0;
      padding: 0.55rem 0.75rem 0.65rem;
      border: 1px solid var(--border-soft, var(--border));
      border-radius: var(--radius-sm);
      background: var(--hover-fill);
      box-shadow: none;
    }
    .costs-disclosure > summary.costs-disclosure-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.35rem 0.85rem;
      cursor: pointer;
      list-style: none;
      user-select: none;
      font-size: 0.88rem;
      font-weight: 650;
      color: var(--muted);
    }
    .costs-disclosure > summary.costs-disclosure-summary::-webkit-details-marker { display: none; }
    .costs-disclosure > summary.costs-disclosure-summary::before {
      content: "▸ ";
      display: inline-block;
      color: var(--muted);
      margin-right: 0.15rem;
    }
    .costs-disclosure[open] > summary.costs-disclosure-summary::before { content: "▾ "; }
    .costs-disclosure[open] > summary.costs-disclosure-summary {
      margin-bottom: 0.55rem;
      color: var(--text);
    }
    .costs-disclosure-title { font-weight: 650; letter-spacing: 0.01em; }
    .costs-disclosure-total {
      font-size: 1rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--ok);
      margin-left: auto;
    }
    .costs-disclosure-body { padding-top: 0.15rem; }
    .costs-disclosure .cost-summary { margin-bottom: 0.35rem; }
    .preview {
      margin-top: 0.75rem;
      padding: 0.75rem;
      background: var(--surface-muted);
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 0.9rem;
      white-space: pre-wrap;
      max-height: 160px;
      overflow: auto;
    }
    /* AYI-79: full transcript review panel (collapsed by default) */
    .transcript-panel {
      margin-top: 0.65rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-muted);
      padding: 0.55rem 0.75rem 0.65rem;
    }
    .transcript-panel > summary {
      cursor: pointer;
      user-select: none;
      font-size: 0.88rem;
      font-weight: 650;
      color: var(--accent-hover);
      list-style: none;
    }
    .transcript-panel > summary::-webkit-details-marker { display: none; }
    .transcript-panel > summary::before {
      content: "▸ ";
      display: inline-block;
      transition: transform 0.12s ease;
      color: var(--muted);
    }
    .transcript-panel[open] > summary::before {
      transform: rotate(90deg);
    }
    /* AYI-233: in-app lecture summary (study overview; above full transcript) */
    .summary-panel {
      margin-top: 0.65rem;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      border-radius: 8px;
      background: var(--accent-soft);
      padding: 0.55rem 0.75rem 0.65rem;
    }
    .summary-panel > summary {
      cursor: pointer;
      user-select: none;
      font-size: 0.88rem;
      font-weight: 650;
      color: var(--accent-hover);
      list-style: none;
    }
    .summary-panel > summary::-webkit-details-marker { display: none; }
    .summary-panel > summary::before {
      content: "▸ ";
      display: inline-block;
      transition: transform 0.12s ease;
      color: var(--muted);
    }
    .summary-panel[open] > summary::before {
      transform: rotate(90deg);
    }
    .summary-panel-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem;
      margin: 0.55rem 0 0.45rem;
    }
    .summary-panel .transcript-full {
      max-height: min(40vh, 22rem);
    }
    .summary-panel .transcript-structured-wrap .transcript-outline {
      max-height: none;
    }
    .summary-panel .transcript-outline ul {
      max-height: 6.5rem;
    }
    .transcript-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem;
      margin: 0.65rem 0 0.5rem;
    }
    .transcript-toolbar button {
      padding: 0.4rem 0.75rem;
      font-size: 0.85rem;
    }
    /* AYI-213: in-panel find for long lecture transcripts */
    .transcript-find {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.3rem;
      flex: 1 1 12rem;
      min-width: 0;
      max-width: 100%;
    }
    .transcript-find-input {
      flex: 1 1 8rem;
      min-width: 6.5rem;
      max-width: 16rem;
      font-size: 0.85rem;
      padding: 0.35rem 0.55rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
    }
    .transcript-find-input::placeholder {
      color: var(--placeholder);
    }
    .transcript-find-input:focus {
      outline: none;
      box-shadow: var(--focus, 0 0 0 3px rgba(37, 99, 235, 0.22));
      border-color: var(--accent);
    }
    .transcript-find-nav {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      flex: 0 0 auto;
    }
    .transcript-find-nav button {
      padding: 0.32rem 0.55rem;
      min-width: 2.1rem;
      font-size: 0.85rem;
      line-height: 1.1;
    }
    .transcript-find-status {
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 600;
      min-width: 4.5rem;
      white-space: nowrap;
    }
    .transcript-find-status.is-empty {
      color: var(--warn);
    }
    mark.transcript-find-hit {
      background: color-mix(in srgb, var(--warn) 40%, var(--card));
      color: inherit;
      border-radius: 2px;
      padding: 0 0.05em;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    mark.transcript-find-hit.transcript-find-hit-active {
      background: var(--warn);
      color: #0f172a; /* fixed ink on solid amber */
      outline: 1px solid rgba(180, 83, 9, 0.45);
    }
    .copy-feedback {
      font-size: 0.8rem;
      color: var(--ok);
      font-weight: 600;
    }
    .transcript-full {
      margin: 0;
      padding: 0.75rem;
      background: var(--surface-muted);
      border-radius: 6px;
      border: 1px solid var(--border);
      font-size: 0.9rem;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: min(50vh, 28rem);
      overflow: auto;
    }
    /* AYI-226: structured format plan (headings + paragraphs) + outline jump list */
    /* AYI-234: sticky outline while reading long structured transcripts */
    .transcript-structured-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.15rem;
      min-width: 0; /* avoid horizontal page blowout in nested flex/grid */
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .transcript-outline {
      border: 1px solid var(--border);
      border-radius: 8px;
      /* Solid surface so body text never shows through while sticky */
      background: var(--surface-muted);
      padding: 0.45rem 0.65rem 0.55rem;
      max-width: 100%;
      box-sizing: border-box;
      /* Narrow viewports: pin outline while the page / panel scrolls */
      position: sticky;
      top: 0;
      z-index: 3;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    }
    .transcript-outline-title {
      font-size: 0.78rem;
      font-weight: 650;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 0 0 0.3rem;
    }
    .transcript-outline ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      max-height: 8.5rem;
      overflow: auto;
      overscroll-behavior: contain;
    }
    .transcript-outline-jump {
      display: block;
      width: 100%;
      text-align: start;
      border: none;
      background: transparent;
      color: var(--accent);
      font: inherit;
      font-size: 0.86rem;
      line-height: 1.35;
      padding: 0.28rem 0.35rem;
      border-radius: 5px;
      cursor: pointer;
    }
    .transcript-outline-jump:hover,
    .transcript-outline-jump:focus-visible {
      background: var(--info-soft);
      outline: none;
    }
    .transcript-outline-jump.is-h1 { font-weight: 650; }
    .transcript-outline-jump.is-h2 {
      padding-inline-start: 0.85rem;
      font-weight: 500;
    }
    .transcript-full.transcript-structured {
      white-space: normal;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }
    .transcript-block {
      margin: 0;
      scroll-margin-top: 0.5rem;
    }
    /* Mobile sticky outline covers top of body after jump — clear headings */
    @media (max-width: 719.98px) {
      .transcript-structured-wrap.has-outline .transcript-block {
        scroll-margin-top: 9.5rem;
      }
    }
    /* Desktop (≥720px): sticky outline rail on the start/logical side + body */
    @media (min-width: 720px) {
      .transcript-structured-wrap.has-outline {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.75rem;
      }
      /* First child outline → start edge (left LTR / right RTL when wrap has dir) */
      .transcript-structured-wrap.has-outline > .transcript-outline {
        flex: 0 0 13.5rem;
        width: 13.5rem;
        max-width: min(13.5rem, 36%);
        position: sticky;
        top: 0.5rem;
        max-height: min(50vh, 28rem);
        overflow: auto;
        align-self: flex-start;
        box-shadow: none;
      }
      .transcript-structured-wrap.has-outline > .transcript-outline ul {
        max-height: none;
      }
      .transcript-structured-wrap.has-outline > .transcript-full {
        flex: 1 1 0;
        min-width: 0;
      }
      .transcript-structured-wrap.has-outline .transcript-block {
        scroll-margin-top: 0.5rem;
      }
    }
    .transcript-block.transcript-heading1 {
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text);
      padding-bottom: 0.15rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .transcript-block.transcript-heading2 {
      font-size: 0.98rem;
      font-weight: 650;
      line-height: 1.4;
      color: var(--text);
      margin-top: 0.15rem;
    }
    .transcript-block.transcript-paragraph {
      font-size: 0.9rem;
      line-height: 1.55;
    }
    .transcript-block.transcript-bullet,
    .transcript-block.transcript-number {
      font-size: 0.9rem;
      line-height: 1.5;
      padding-inline-start: 1rem;
      position: relative;
    }
    .transcript-block.transcript-bullet::before {
      content: "•";
      position: absolute;
      inset-inline-start: 0.15rem;
    }
    .transcript-block.transcript-number { padding-inline-start: 0.25rem; }
    .transcript-block.transcript-outline-focus {
      outline: 2px solid rgba(29, 78, 216, 0.45);
      outline-offset: 2px;
      border-radius: 4px;
      background: var(--accent-soft);
    }
    .format-layout-note { margin: 0.4rem 0 0; }
    /* AYI-60: raw vs cleaned toggle + multi-stage DOCX downloads */
    .transcript-variant-toggle {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin: 0.55rem 0 0.35rem;
    }
    .transcript-variant-toggle button {
      padding: 0.28rem 0.65rem;
      font-size: 0.8rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-muted);
      color: var(--muted);
      cursor: pointer;
    }
    .transcript-variant-toggle button.active {
      border-color: var(--accent);
      color: var(--text);
      background: var(--info-soft);
      font-weight: 650;
    }
    .transcript-compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
      margin-top: 0.5rem;
    }
    @media (max-width: 720px) {
      .transcript-compare { grid-template-columns: 1fr; }
    }
    .transcript-compare-col {
      min-width: 0;
    }
    .transcript-compare-col h4 {
      margin: 0 0 0.35rem;
      font-size: 0.78rem;
      font-weight: 650;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .transcript-compare .transcript-full {
      max-height: min(40vh, 18rem);
    }
    .artifacts-panel {
      margin-top: 0.65rem;
      padding: 0.55rem 0.75rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-muted);
    }
    .artifacts-panel h4 {
      margin: 0 0 0.45rem;
      font-size: 0.85rem;
      font-weight: 650;
      color: var(--text);
    }
    .artifacts-panel p.muted {
      margin: 0 0 0.5rem;
      font-size: 0.8rem;
    }
    .artifacts-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .artifacts-actions button {
      padding: 0.4rem 0.7rem;
      font-size: 0.82rem;
    }
    /* AYI-89: quality step chips on main job cards (XAI / phrases / lossless). */
    .quality-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin: 0.35rem 0 0.15rem;
    }
    .quality-chip {
      display: inline-block;
      padding: 0.12rem 0.45rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      border: 1px solid var(--border);
      background: var(--surface-muted);
      color: var(--muted);
    }
    .quality-chip.on {
      border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
      background: var(--ok-soft);
      color: var(--ok);
    }
    .quality-chip.off {
      border-color: color-mix(in srgb, var(--warn) 50%, var(--border));
      background: var(--warn-soft);
      color: var(--warn);
    }
    .quality-chip.skip {
      opacity: 0.75;
    }
    /* AYI-116: user-option quality ticks on the upload form. */
    .quality-user-options {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .quality-user-opt {
      display: flex;
      gap: 0.65rem;
      align-items: flex-start;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-muted);
    }
    .quality-user-opt input[type="checkbox"] {
      margin-top: 0.2rem;
      width: 1.05rem;
      height: 1.05rem;
      accent-color: var(--accent);
      flex: 0 0 auto;
    }
    .quality-user-opt .q-label {
      margin: 0;
      font-size: 0.92rem;
      font-weight: 650;
      color: var(--text);
    }
    .quality-user-opt .q-summary {
      margin: 0.15rem 0 0;
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.35;
    }
    .quality-user-opt.unavailable {
      opacity: 0.55;
    }
    .recovery {
      margin-top: 0.75rem;
      padding: 0.75rem 0.85rem;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--err) 45%, var(--border));
      background: var(--err-soft);
    }
    .recovery.cancelled {
      border-color: color-mix(in srgb, var(--warn) 50%, var(--border));
      background: var(--warn-soft);
    }
    .recovery-title {
      margin: 0 0 0.4rem;
      font-size: 0.95rem;
      font-weight: 650;
      color: var(--err);
    }
    .recovery.cancelled .recovery-title { color: var(--warn); }
    .recovery-steps {
      margin: 0.35rem 0 0;
      padding-left: 1.15rem;
      font-size: 0.88rem;
      color: var(--text);
    }
    .recovery-steps li { margin: 0.2rem 0; }
    .recovery details {
      margin-top: 0.55rem;
      font-size: 0.8rem;
      color: var(--muted);
    }
    .recovery details summary {
      cursor: pointer;
      color: var(--muted);
      user-select: none;
    }
    .recovery-operator-label {
      margin: 0.5rem 0 0.25rem;
      font-size: 0.85rem;
    }
    .recovery-operator-steps {
      margin: 0.25rem 0 0.5rem;
    }
    .recovery details pre {
      margin: 0.4rem 0 0;
      padding: 0.55rem 0.65rem;
      background: var(--surface-muted);
      border-radius: 6px;
      border: 1px solid var(--border);
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 140px;
      overflow: auto;
      font-size: 0.75rem;
      color: var(--muted);
    }
    /* AYI-236 V: .auth-advanced / #auth-mode-hint live in ayin-ui.css */
    /* AYI-85: dense collapsible job list (1-line when collapsed). */
    .jobs-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 0.75rem;
      margin: 0 0 0.55rem;
    }
    .jobs-header h2 {
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
      color: var(--text);
      letter-spacing: -0.015em;
      text-transform: none;
    }
    .jobs-header .jobs-sub {
      margin: 0.15rem 0 0;
      font-size: 0.82rem;
      color: var(--muted);
      font-weight: 400;
    }
    /* AYI-167: honest "latest N of M" under the Jobs subtitle. */
    .jobs-header .jobs-count {
      margin: 0.2rem 0 0;
      font-size: 0.8rem;
      color: var(--muted);
      font-weight: 500;
    }
    /* AYI-275: durable "server keeps working" copy while any job is non-terminal. */
    .jobs-header .jobs-server-hint {
      margin: 0.4rem 0 0;
      padding: 0.45rem 0.65rem;
      max-width: 42rem;
      font-size: 0.82rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 10%, var(--surface-sunken, var(--card-hover)));
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
      border-radius: 8px;
    }
    .jobs-header .jobs-server-hint.hidden { display: none; }
    .jobs-header-actions .jobs-filter-label {
      display: inline-flex;
      align-items: center;
      margin: 0;
    }
    .jobs-header-actions #jobs-status-filter {
      font-size: 0.8rem;
      padding: 0.3rem 0.55rem;
      border-radius: var(--radius-sm, 6px);
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      max-width: 10.5rem;
    }
    /* AYI-217: bulk clear failed/cancelled — quiet danger, only when filter matches. */
    .jobs-header-actions #jobs-clear-terminal-btn {
      font-size: 0.8rem;
      padding: 0.3rem 0.65rem;
      white-space: nowrap;
    }
    .jobs-header-actions #jobs-clear-terminal-btn:disabled {
      opacity: 0.55;
      cursor: wait;
    }
    /* AYI-228: bulk lecture summaries when Ready filter has missing summaries. */
    .jobs-header-actions #jobs-bulk-summaries-btn {
      font-size: 0.8rem;
      padding: 0.3rem 0.65rem;
      white-space: nowrap;
    }
    .jobs-header-actions #jobs-bulk-summaries-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .jobs-header-actions #jobs-bulk-summaries-btn[data-busy="1"]:disabled {
      cursor: wait;
    }
    /* AYI-232: bulk Improve layout when Ready filter has jobs missing format plans. */
    .jobs-header-actions #jobs-bulk-layouts-btn {
      font-size: 0.8rem;
      padding: 0.3rem 0.65rem;
      white-space: nowrap;
    }
    .jobs-header-actions #jobs-bulk-layouts-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .jobs-header-actions #jobs-bulk-layouts-btn[data-busy="1"]:disabled {
      cursor: wait;
    }
    /* AYI-200: text search next to status filter */
    .jobs-header-actions .jobs-search-wrap,
    .library-search-wrap {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      position: relative;
    }
    .jobs-header-actions #jobs-search-input,
    #library-search-input {
      font-size: 0.8rem;
      padding: 0.3rem 1.7rem 0.3rem 0.55rem;
      border-radius: var(--radius-sm, 6px);
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      min-width: 9.5rem;
      max-width: 14rem;
      width: 11rem;
    }
    .jobs-header-actions #jobs-search-input::placeholder,
    #library-search-input::placeholder {
      color: var(--placeholder);
    }
    .jobs-search-clear,
    .library-search-clear {
      position: absolute;
      right: 0.2rem;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1;
      padding: 0.2rem 0.35rem;
      cursor: pointer;
      border-radius: 4px;
    }
    .jobs-search-clear:hover,
    .library-search-clear:hover {
      color: var(--text);
      background: var(--accent-soft, rgba(37, 99, 235, 0.10));
    }
    .library-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem 0.85rem;
      align-items: flex-end;
      margin: 0 0 0.55rem;
    }
    .library-toolbar .row {
      margin: 0;
      flex: 1 1 12rem;
      min-width: 10rem;
    }
    .library-toolbar .library-search-field {
      flex: 1 1 11rem;
      min-width: 9rem;
      max-width: 16rem;
      margin: 0;
    }
    .library-toolbar .library-search-field > label {
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
      margin: 0 0 0.2rem;
    }
    .library-toolbar .library-search-wrap {
      display: flex;
      width: 100%;
    }
    .library-toolbar #library-search-input {
      width: 100%;
      max-width: none;
    }
    .jobs-load-more-wrap {
      display: flex;
      justify-content: center;
      padding: 0.35rem 0 0.15rem;
    }
    .jobs-load-more-wrap button {
      min-width: 10rem;
      padding: 0.45rem 1rem;
      font-size: 0.85rem;
    }
    .jobs-load-more-wrap button[disabled] {
      opacity: 0.65;
      cursor: wait;
    }
    .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;
    }
    .jobs-header-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 0.55rem;
      align-items: center;
      justify-content: flex-end;
    }
    /* AYI-173: Notify is the clearer situational action; list tools are quieter. */
    .jobs-header-actions > #notify-ready-btn {
      padding: 0.4rem 0.8rem;
      font-size: 0.82rem;
    }
    .jobs-list-tools {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.1rem;
      margin-inline-start: 0.1rem;
      padding-inline-start: 0.5rem;
      border-inline-start: 1px solid var(--border-soft, var(--border));
    }
    /* No leading rule when Notify is absent — tools are the only header action. */
    .jobs-header-actions:not(:has(#notify-ready-btn:not(.hidden))):not(:has(.notify-ready-status:not(.hidden))) .jobs-list-tools {
      margin-inline-start: 0;
      padding-inline-start: 0;
      border-inline-start: none;
    }
    .jobs-list-tools .btn-quiet {
      padding: 0.32rem 0.55rem;
      font-size: 0.78rem;
    }
    /* AYI-153: soft desktop-notify control (revealed after upload/retry intent). */
    .notify-ready-status {
      font-size: 0.78rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .job-card {
      position: relative;
      padding: 0;
      margin-bottom: 0.55rem;
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      z-index: 0;
    }
    .job-card:hover {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    }
    .job-card.is-expanded {
      box-shadow: var(--shadow-soft);
      /* AYI-253: expanded cards must not clip the overflow menu */
      overflow: visible;
    }
    .job-card + .job-card { margin-top: 0; }
    /* AYI-236 G: title → status → meta → primary action (shared polish in ayin-ui.css) */
    /* AYI-254: larger collapse chevron + left-aligned title; 6 cols so CTAs/cost
       never wrap into the chevron track (which pushed filenames right). */
    .job-summary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
      gap: 0.35rem 0.55rem;
      align-items: center;
      padding: 0.55rem 0.8rem;
      cursor: pointer;
      user-select: none;
    }
    .job-summary:hover { background: var(--hover-fill); }
    .job-summary:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }
    .job-chevron {
      grid-column: 1;
      grid-row: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 1.75rem;
      height: 1.75rem;
      min-width: 1.75rem;
      min-height: 1.75rem;
      color: var(--muted);
      border-radius: var(--radius-xs, 8px);
      line-height: 1;
      transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
    }
    .job-summary:hover .job-chevron {
      color: var(--text);
      background: var(--hover-fill-strong, var(--hover-fill));
    }
    .job-chevron-svg {
      display: block;
      width: 1.15rem;
      height: 1.15rem;
    }
    .job-card.is-expanded .job-chevron {
      transform: rotate(90deg);
      color: var(--accent-hover);
    }
    .job-summary .tag {
      grid-column: 3;
      grid-row: 1;
      margin-right: 0;
    }
    .job-summary-title {
      grid-column: 2;
      grid-row: 1;
      justify-self: start;
      text-align: left;
      font-size: 0.93rem;
      font-weight: 650;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      max-width: 100%;
      letter-spacing: -0.01em;
    }
    .job-summary-meta {
      grid-column: 4;
      grid-row: 1;
      font-size: 0.76rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
      max-width: 14rem;
      font-variant-numeric: tabular-nums;
    }
    /* AYI-99: one-tap Download Word on collapsed Ready rows */
    /* AYI-254: pin actions to last track so they never stretch the chevron column */
    .job-summary > .job-cost-chip {
      grid-column: 5;
      grid-row: 1;
    }
    .job-summary-actions {
      grid-column: 6;
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.3rem;
      min-width: 0;
    }
    .job-summary-dl {
      font-size: 0.78rem;
      font-weight: 650;
      padding: 0.38rem 0.7rem;
      min-height: 2.5rem;
      white-space: nowrap;
      line-height: 1.2;
      border-radius: 8px;
    }
    @media (max-width: 720px) {
      .job-summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
      }
      .job-chevron {
        grid-column: 1;
        grid-row: 1;
      }
      .job-summary .tag {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
      }
      .job-summary-title {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        text-align: left;
      }
      .job-summary-meta {
        grid-column: 2;
        grid-row: 3;
        max-width: none;
        text-align: left;
        margin-top: -0.1rem;
      }
      .job-summary > .job-cost-chip {
        grid-column: 2;
        grid-row: 4;
        justify-self: start;
      }
      .job-summary-actions {
        grid-column: 3;
        grid-row: 1 / span 4;
        align-self: center;
        flex-direction: column;
        align-items: stretch;
      }
      .job-summary-dl {
        font-size: 0.72rem;
        padding: 0.45rem 0.65rem;
        min-height: 2.75rem; /* ~44px tap target on narrow screens */
      }
    }
    .job-details {
      display: none;
      padding: 0.75rem 0.9rem 0.9rem;
      border-top: 1px solid var(--border);
    }
    .job-card.is-expanded .job-details { display: block; }
    .job-id {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.72rem;
      color: var(--muted);
      word-break: break-all;
    }
    footer {
      margin-top: 1.75rem;
      color: var(--muted);
      font-size: 0.8rem;
      text-align: center;
      opacity: 0.9;
    }
    footer .footer-meta { margin: 0; }
    /* AYI-255: platform share at page bottom — single figure, no breakdown. */
    footer .footer-platform-cost {
      margin: 0 0 0.35rem;
      font-size: 0.82rem;
      color: var(--muted);
    }
    footer .footer-platform-cost[hidden] { display: none !important; }
    .cost-platform-share {
      margin: 0.65rem 0 0;
      padding-top: 0.5rem;
      border-top: 1px solid var(--border-soft);
      font-size: 0.82rem;
    }
    .cost-platform-share[hidden] { display: none !important; }
    .status-friendly {
      font-weight: 650;
    }

/* =========================================================================
   AYI-236 Pass 4 Y–AH — Trust, speed, craft (feature packages)
   ========================================================================= */

/* --- Y: Command palette --- */
.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(12vh, env(safe-area-inset-top, 0px)) 1rem 2rem;
  overflow-y: auto;
}
.cmd-palette-backdrop[hidden] { display: none !important; }
.cmd-palette {
  width: min(32rem, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cmd-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.cmd-palette-input-wrap .ayin-icon {
  color: var(--muted);
  width: 1.15rem;
  height: 1.15rem;
}
.cmd-palette-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 550;
  outline: none;
  padding: 0.15rem 0;
}
.cmd-palette-input::placeholder { color: var(--placeholder); }
.cmd-palette-list {
  max-height: min(22rem, 50vh);
  overflow-y: auto;
  padding: 0.4rem;
  margin: 0;
  list-style: none;
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 550;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 2.65rem;
}
.cmd-palette-item:hover,
.cmd-palette-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.cmd-palette-item-label { flex: 1; min-width: 0; }
.cmd-palette-item-hint {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.cmd-palette-empty {
  padding: 1.1rem 0.85rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}
.cmd-palette-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}
.cmd-palette-footer kbd {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.06rem 0.28rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
}

/* --- Z: Job progress narrative 2.0 --- */
.job-narrative {
  margin: 0.55rem 0 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
}
.job-narrative-stage {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.job-narrative-band {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.job-narrative-heartbeat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--accent-hover);
}
.job-narrative-heartbeat::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: ayin-heartbeat 1.6s ease-out infinite;
}
.job-card.is-active-job .job-stepper-step.is-active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
@keyframes ayin-heartbeat {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 0.45rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .job-narrative-heartbeat::before { animation: none; }
  .job-card.is-active-job .job-stepper-step.is-active { box-shadow: none; }
}
.recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.recovery-actions .retry-btn { font-weight: 700; }

/* --- AA: Transcript find & scan (shared polish + section jumps) --- */
.transcript-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0.15rem;
}
.transcript-find-input {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.55rem;
}
.transcript-find-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--input-bg-focus);
}
.transcript-find-nav {
  display: inline-flex;
  gap: 0.25rem;
}
.transcript-find-nav button {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.4rem;
}
.transcript-find-status {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  min-width: 4.5rem;
}
.transcript-find-status.is-empty { color: var(--warn); }
mark.transcript-find-hit {
  background: color-mix(in srgb, var(--warn) 35%, var(--warn-soft));
  color: inherit;
  border-radius: 2px;
  padding: 0 0.08em;
}
mark.transcript-find-hit.transcript-find-hit-active {
  background: color-mix(in srgb, var(--accent) 42%, var(--accent-soft));
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.transcript-section-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.45rem;
}
.transcript-section-jump {
  font-size: 0.75rem;
  font-weight: 650;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transcript-section-jump:hover,
.transcript-section-jump:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent-hover);
  background: var(--accent-soft);
  outline: none;
  box-shadow: var(--focus);
}

/* --- AB: Mobile shell 2.0 --- */
.page-frame {
  padding-left: max(var(--space-3, 1rem), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-3, 1rem), env(safe-area-inset-right, 0px));
  padding-bottom: max(4.5rem, calc(3.5rem + env(safe-area-inset-bottom, 0px)));
}
.topbar {
  padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
}
.mobile-upload-fab {
  display: none;
  position: fixed;
  z-index: 55;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  min-height: 3rem;
  min-width: 7.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-weight: 750;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (max-width: 720px) {
  .mobile-upload-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }
  #app-shell.hidden ~ .mobile-upload-fab,
  body:not(.is-authed) .mobile-upload-fab {
    display: none !important;
  }
  .upload-sheet {
    max-height: min(92vh, calc(100dvh - env(safe-area-inset-top, 0px)));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
  .jobs-header.jobs-toolbar-sticky {
    top: env(safe-area-inset-top, 0px);
  }
  .job-summary-dl {
    min-height: 2.75rem;
  }
}

/* --- AC: Empty & first-success craft --- */
.empty-state-art {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.75rem;
  color: var(--accent);
  opacity: 0.92;
}
.empty-state-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.first-success-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(120%);
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border));
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 650;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.first-success-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.first-success-toast .first-success-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .first-success-toast { transition: opacity 0.15s ease; }
  .first-success-toast.is-visible { transform: translateX(-50%) translateY(0); }
}

/* --- AE: Preferences panel --- */
.prefs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(8vh, env(safe-area-inset-top, 0px)) 1rem 2rem;
  overflow-y: auto;
}
.prefs-backdrop[hidden] { display: none !important; }
.prefs-panel {
  width: min(26rem, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.2rem 1.1rem;
}
.prefs-panel h2 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.prefs-panel .prefs-lead {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}
.prefs-row {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}
.prefs-row label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text);
}
.prefs-row select,
.prefs-row input[type="checkbox"] {
  font: inherit;
}
.prefs-row select {
  min-height: 2.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
  padding: 0.4rem 0.55rem;
}
.prefs-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 550;
  min-height: 2.4rem;
}
.prefs-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* --- AF: Cost clarity 2.0 --- */
.job-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.job-cost-chip.is-actual {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ok) 28%, var(--border));
  background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface-muted));
}
.job-cost-compare {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.job-cost-compare strong { color: var(--text); font-weight: 700; }
.cost-session-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.costs-scope-tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0.35rem 0 0.55rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
}
.costs-scope-tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 2rem;
}
.costs-scope-tabs button.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
}

/* AYI-277: monthly estimated totals (no component breakdown) */
.cost-months-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cost-months-list[hidden] { display: none !important; }
.cost-months-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  font-size: 0.86rem;
}
.cost-months-row.is-current {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
  background: color-mix(in srgb, var(--ok) 8%, var(--surface-muted));
}
.cost-months-label {
  color: var(--text);
  font-weight: 600;
  min-width: 0;
}
.cost-months-value {
  color: var(--ok);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cost-months-empty {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
}

/* --- AG: Multi-file upload queue polish --- */
.upload-queue-banner {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--accent-soft);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text);
  line-height: 1.35;
}
.upload-queue-banner span {
  font-weight: 550;
  color: var(--muted);
}
.upload-file-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0.15rem;
}
.upload-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.3rem 0.35rem 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.upload-file-chip-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-file-chip-size {
  color: var(--muted);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.upload-file-chip-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.upload-file-chip-remove:hover,
.upload-file-chip-remove:focus-visible {
  background: var(--hover-fill);
  color: var(--err);
  outline: none;
  box-shadow: var(--focus);
}

/* --- AH: Accessibility hardening --- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.ayin-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Contrast fixtures: ensure semantic soft surfaces stay readable in both themes */
html[data-theme="light"] .status-pill--ready,
html[data-theme="light"] .tag.done {
  color: #166534;
}
html[data-theme="dark"] .status-pill--ready,
html[data-theme="dark"] .tag.done {
  color: #86efac;
}
html[data-theme="light"] .status-pill--failed,
html[data-theme="light"] .tag.failed {
  color: #b91c1c;
}
html[data-theme="dark"] .status-pill--failed,
html[data-theme="dark"] .tag.failed {
  color: #fca5a5;
}

/* --- AD: Operator surfaces parity helpers --- */
.operator-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}
.operator-page-header h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.operator-page-header .lead {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 36rem;
  line-height: 1.4;
}
.operator-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* =========================================================================
   AYI-236 Pass 5 (AI–AR) — Whole-app modernisation craft
   Type lock-in, elevation, chrome, forms, tables, motion, operator lift.
   ========================================================================= */

/* --- AI: Type identity lock-in --- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Helvetica Neue", Arial, sans-serif;
  --text-display: clamp(1.55rem, 1.25rem + 0.9vw, 1.85rem);
  --text-title: 1.18rem;
  --text-body: 0.95rem;
  --tracking-tight: -0.03em;
  --tracking-display: -0.04em;
  --control-height: 2.75rem;
  --control-height-sm: 2.4rem;
  --elev-1: var(--shadow-soft);
  --elev-2: var(--shadow);
  --elev-3: 0 22px 48px rgba(15, 23, 42, 0.14);
  --ring-accent: var(--focus);
}
html[data-theme="dark"] { --elev-3: 0 22px 48px rgba(0, 0, 0, 0.55); }
body { font-size: var(--text-body); letter-spacing: -0.005em; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--text-display); letter-spacing: var(--tracking-display); }
.page-header-title, .operator-page-header h2 { font-size: var(--text-title); letter-spacing: var(--tracking-tight); }
.brand-copy h1 { font-size: clamp(1.4rem, 1.15rem + 0.85vw, 1.72rem); letter-spacing: var(--tracking-display); }

/* --- AP: Global chrome --- */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
html { scroll-padding-top: 5.5rem; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; scrollbar-width: thin; }
html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--accent) 42%, transparent); }
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- AJ: Elevation --- */
.card { transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.card:hover { border-color: color-mix(in srgb, var(--border) 70%, var(--border-strong)); }
.card-primary:hover { box-shadow: var(--elev-2), var(--shadow-glow); }
.library-browser { box-shadow: var(--elev-1); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.library-browser:focus-within { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.job-card { box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent); }
.job-card:hover { box-shadow: var(--elev-1); }
.job-card.is-expanded { box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.ready-banner { box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--ok) 12%, transparent); }

/* --- AK: Topbar chrome 2.0 --- */
.topbar { margin-left: -0.15rem; margin-right: -0.15rem; padding-left: 0.35rem; padding-right: 0.35rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.topbar.is-stuck, .page-frame:has(#app-shell:not(.hidden)) .topbar, .page-frame:has(.app-shell:not(.hidden)) .topbar { border-bottom-color: var(--chrome-border); box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent), 0 10px 28px rgba(15, 23, 42, 0.06); }
html[data-theme="dark"] .topbar.is-stuck, html[data-theme="dark"] .page-frame:has(#app-shell:not(.hidden)) .topbar, html[data-theme="dark"] .page-frame:has(.app-shell:not(.hidden)) .topbar { box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent), 0 12px 28px rgba(0, 0, 0, 0.35); }
/* AYI-263: neutral elevation on monochrome app mark */
.brand-mark { border-radius: 11px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }
html[data-theme="dark"] .brand-mark { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.main-tabs { border-radius: 14px; padding: 0.32rem; gap: 0.28rem; }
.tab-btn { border-radius: 10px; min-height: 2.45rem; }
.tab-btn.is-active { box-shadow: 0 2px 10px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* --- AQ: Buttons --- */
button { border-radius: var(--radius-sm); min-height: var(--control-height-sm); }
button.primary, #submit-btn, #login-btn, #register-btn, #run-btn { min-height: var(--control-height); border-radius: var(--radius-sm); letter-spacing: -0.01em; }
button:active:not(:disabled) { transform: translateY(0.5px); }
button.primary:active:not(:disabled), #submit-btn:active:not(:disabled), #login-btn:active:not(:disabled), #register-btn:active:not(:disabled), #run-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 3px 10px rgba(37, 99, 235, 0.18); }
button.secondary { border-radius: var(--radius-sm); }
button.btn-quiet { border-radius: var(--radius-xs); }

/* --- AN: Forms --- */
input[type="password"], input[type="text"], input[type="number"], input[type="email"], input[type="search"], select, textarea { border-radius: var(--radius-xs); }
input[type="password"], input[type="text"], input[type="number"], input[type="email"], input[type="search"], select { min-height: var(--control-height); }
select { padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.7rem) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-color: var(--input-bg); cursor: pointer; }
select:focus { background-color: var(--input-bg-focus); }
#login-card.login-product { border-radius: calc(var(--radius) + 2px); box-shadow: var(--elev-2), var(--shadow-glow); }
#login-card.login-product:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.login-product-mark { border-radius: 16px; box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.login-product-logo { margin-bottom: 0.15rem; }
.login-product #login-btn, .login-product #register-btn { border-radius: var(--radius-sm); letter-spacing: -0.01em; }

/* --- AM: Jobs & library --- */
.jobs-status-chips { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent); }
.jobs-status-chip.is-active { box-shadow: var(--elev-1); font-weight: 700; }
.jobs-toolbar-sticky { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.library-browser-chrome { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 92%, var(--accent-soft)) 0%, var(--card) 100%); }
.library-list--tree .library-row.folder-entry { transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.library-list--tree .library-row.folder-entry:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface-muted)); }
.library-list--tree .library-row--nested { transition: background 0.12s ease, border-color 0.12s ease; }
.library-list--tree .library-row--nested:hover { background: var(--card-hover); }
.dropzone { transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.dropzone.is-dragover { box-shadow: var(--elev-1), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-steps-wrap { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.hero-steps-wrap:not(.is-fresh):hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }

/* --- AO: Motion --- */
@keyframes ayin-pass5-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ayin-pass5-fade-in { from { opacity: 0; } to { opacity: 1; } }
#login-card.login-product { animation: ayin-pass5-fade-up 0.28s ease both; }
#app-shell:not(.hidden) > .tab-panel:not(.hidden) { animation: ayin-pass5-fade-in 0.18s ease both; }
.fb-modal, .prefs-panel, .cmd-palette, .ayin-confirm { animation: ayin-pass5-fade-up 0.2s ease both; }
.fb-modal-backdrop, .prefs-backdrop, .cmd-palette-backdrop, .ayin-confirm-backdrop, .upload-sheet-backdrop.is-open { animation: ayin-pass5-fade-in 0.16s ease both; }
.first-success-toast:not([hidden]) { animation: ayin-pass5-fade-up 0.28s ease both; }
@media (prefers-reduced-motion: reduce) {
  #login-card.login-product, #app-shell:not(.hidden) > .tab-panel:not(.hidden), .fb-modal, .prefs-panel, .cmd-palette, .ayin-confirm, .fb-modal-backdrop, .prefs-backdrop, .cmd-palette-backdrop, .ayin-confirm-backdrop, .upload-sheet-backdrop.is-open, .first-success-toast:not([hidden]) { animation: none !important; }
}
body.reduce-motion #login-card.login-product, body.reduce-motion .tab-panel, body.reduce-motion .fb-modal, body.reduce-motion .prefs-panel, body.reduce-motion .cmd-palette, body.reduce-motion .ayin-confirm, body.reduce-motion .first-success-toast { animation: none !important; }

/* --- AR: Tables --- */
table.users-table, table.analytics-table, .ayin-data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
table.users-table th, table.users-table td, table.analytics-table th, table.analytics-table td, .ayin-data-table th, .ayin-data-table td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.users-table th, table.analytics-table th, .ayin-data-table th { color: var(--muted); font-weight: 650; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.045em; background: color-mix(in srgb, var(--surface-muted) 88%, var(--card)); position: sticky; top: 0; z-index: 1; border-bottom-color: var(--border); }
table.users-table tbody tr, table.analytics-table tbody tr, .ayin-data-table tbody tr { transition: background 0.12s ease; }
table.users-table tbody tr:hover, table.analytics-table tbody tr:hover, .ayin-data-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
table.users-table tbody tr:last-child td, table.analytics-table tbody tr:last-child td, .ayin-data-table tbody tr:last-child td { border-bottom: none; }
.users-table-wrap, .analytics-table-wrap { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: auto; background: var(--card); box-shadow: var(--elev-1); }

/* --- AL: Operator shared --- */
.role-badge { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 650; border-radius: 999px; padding: 0.18rem 0.55rem; border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text); line-height: 1.2; }
.role-badge.is-admin { background: var(--info-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent-hover); }
.share-card { margin-top: 1rem; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border)); background: linear-gradient(180deg, var(--ok-soft) 0%, var(--card) 55%); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--elev-1); }
.share-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; letter-spacing: var(--tracking-tight); }
.share-card .share-lead { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.92rem; }
.share-creds { font-family: var(--font-mono); font-size: 0.88rem; background: var(--card-hover); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.75rem 0.9rem; white-space: pre-wrap; word-break: break-word; line-height: 1.55; margin: 0 0 0.75rem; }
.success-banner { margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border)); color: var(--ok); font-size: 0.92rem; font-weight: 650; box-shadow: 0 1px 0 color-mix(in srgb, var(--ok) 12%, transparent); }
.password-row { display: flex; gap: 0.5rem; align-items: stretch; }
.password-row input { flex: 1; min-width: 0; }
.password-row button { white-space: nowrap; flex-shrink: 0; }
.list-header { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-bottom: 0.45rem; }
.list-header h2 { margin: 0; letter-spacing: var(--tracking-tight); }
.page-frame { padding-bottom: max(4rem, calc(2rem + env(safe-area-inset-bottom, 0px))); padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
@media (min-width: 1100px) { .page-frame { padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); } }
.mobile-upload-fab { box-shadow: var(--elev-2), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.mobile-upload-fab:hover:not(:disabled) { box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
#upload-card.upload-sheet.is-open { box-shadow: var(--elev-3); }
.prefs-panel, .cmd-palette { border-radius: calc(var(--radius) + 2px); box-shadow: var(--elev-3); }
.account-menu-panel { box-shadow: var(--elev-2); border-radius: var(--radius-sm); }
.library-lead { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.page-header-lead { max-width: 36rem; }
.login-register-lead { margin: 0 0 0.75rem; }
.auth-advanced-hint { margin: 0.5rem 0 0; }
.new-folder-panel { margin: 0 0 0.85rem; }

/* =========================================================================
   AYI-236 Pass 6 (AS–BB) — Whole-app residual modernisation craft
   Dialogs, toast, analytics, feedback inbox, QA matrix, operator gates,
   prose helpers, section rhythm, status residual, print/focus completeness.
   Restores Inter font links consistency after AYI-250 regression.
   ========================================================================= */

/* --- AS: Dialog / modal system 2.0 --- */
.fb-modal-backdrop,
.prefs-backdrop,
.cmd-palette-backdrop,
.ayin-confirm-backdrop,
.upload-sheet-backdrop {
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  background: color-mix(in srgb, var(--scrim) 88%, transparent);
}
.fb-modal,
.prefs-panel,
.ayin-confirm {
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--chrome-border));
  box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: calc(var(--radius) + 2px);
}
.fb-modal h2,
.prefs-panel h2,
.ayin-confirm-title {
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.fb-modal-actions,
.prefs-actions,
.ayin-confirm-actions {
  gap: 0.55rem;
  padding-top: 0.15rem;
}
.account-menu-panel {
  border-color: color-mix(in srgb, var(--border) 80%, var(--chrome-border));
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}
.account-menu-btn {
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.account-menu-btn:hover:not(:disabled) {
  box-shadow: var(--elev-1);
}
.cmd-palette {
  border: 1px solid color-mix(in srgb, var(--border) 65%, var(--accent));
}

/* --- AT: Toast craft 2.0 --- */
.ayin-toast-region {
  bottom: max(1.35rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  width: min(24rem, calc(100vw - 1.75rem));
  z-index: 10060;
}
.ayin-toast {
  border-radius: calc(var(--radius-sm) + 2px);
  padding: 0.78rem 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: var(--elev-2), 0 0 0 1px color-mix(in srgb, var(--ok) 10%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.ayin-toast--info {
  box-shadow: var(--elev-2), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.ayin-toast--error {
  box-shadow: var(--elev-2), 0 0 0 1px color-mix(in srgb, var(--err) 12%, transparent);
}
.first-success-toast {
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--ok) 14%, transparent);
}

/* --- AU: Analytics & summary craft --- */
.analytics-summary {
  gap: 0.75rem;
}
.analytics-tile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-hover) 70%, var(--card)) 0%, var(--card) 100%);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.analytics-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--elev-1);
}
.analytics-tile .value {
  font-size: 1.12rem;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.analytics-tile.total {
  background: linear-gradient(180deg, color-mix(in srgb, var(--info-soft) 85%, var(--card)) 0%, var(--card) 100%);
  box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.analytics-filters {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--card));
  border: 1px solid var(--border-soft);
  margin-bottom: 0.85rem;
}
.analytics-job-row {
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.analytics-job-row:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: var(--elev-1);
  background: var(--card);
}
.analytics-row.is-selected td {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* --- AV: Feedback inbox (shared) --- */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 90%, var(--card));
  border: 1px solid var(--border-soft);
}
.filter-row label { margin: 0; font-size: 0.82rem; font-weight: 650; color: var(--muted); }
.filter-row select {
  min-height: var(--control-height-sm);
  padding: 0.4rem 2.1rem 0.4rem 0.7rem;
  border-radius: var(--radius-xs);
}
.fb-list { display: flex; flex-direction: column; gap: 0.8rem; }
.fb-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--elev-1);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.fb-item:hover {
  border-color: color-mix(in srgb, var(--border) 65%, var(--border-strong));
  box-shadow: var(--elev-2);
}
.fb-item.is-unread {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--info-soft) 90%, var(--card)) 0%, var(--card) 58%);
  box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.fb-item.is-archived { opacity: 0.74; }
.fb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.fb-user { font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.fb-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--muted);
  line-height: 1.2;
}
.fb-badge.cat-bug { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); color: var(--err); }
.fb-badge.cat-idea { background: var(--info-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent-hover); }
.fb-badge.cat-praise { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); color: var(--ok); }
.fb-badge.status-unread { background: var(--info-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent-hover); }
.fb-badge.status-read { background: var(--surface-sunken); }
.fb-badge.status-archived { background: var(--card-hover); }
.fb-message {
  margin: 0 0 0.65rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.55;
}
.fb-context {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-mono);
}
.fb-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fb-actions button { padding: 0.42rem 0.8rem; font-size: 0.84rem; min-height: 2.15rem; }
#gate-card, #app-card { margin-top: 0.5rem; }
a.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-hover);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 650;
  border-radius: var(--radius-xs);
  padding: 0.2rem 0.35rem;
  margin-left: -0.35rem;
}
a.back-link:hover { text-decoration: underline; text-underline-offset: 2px; background: var(--hover-fill); }
.stats-pill {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}

/* --- AW: QA matrix / compare craft --- */
.ab-matrix {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.ab-matrix-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 92%, var(--accent-soft)) 0%, var(--surface-muted) 100%);
  border-bottom: 1px solid var(--border);
  font-weight: 650;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ab-matrix-row {
  transition: background 0.12s ease;
  border-bottom: 1px solid var(--border-soft);
}
.ab-matrix-row:last-child { border-bottom: none; }
.ab-matrix-row:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.step {
  border-radius: var(--radius-xs) !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.step:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
}
.mode-save-status {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  min-height: 1.2em;
}
.mode-save-status.is-saved { color: var(--ok); }
.mode-save-status.is-error { color: var(--err); }
.mode-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

/* --- AX: Operator gate & page shell parity --- */
#gate-card.card,
.card#gate-card {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--elev-2), var(--shadow-glow);
  border-radius: calc(var(--radius) + 2px);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
#gate-card .section-title { letter-spacing: var(--tracking-tight); }
#gate-card .section-lead { max-width: 26rem; }
.operator-page-header {
  margin-bottom: 1rem;
  padding-bottom: 0.15rem;
}
.operator-page-header .page-header-title {
  font-size: var(--text-title);
  letter-spacing: var(--tracking-tight);
}
.who-pill {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 999px;
  font-weight: 600;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.copy-status {
  font-size: 0.85rem;
  color: var(--ok);
  font-weight: 650;
  min-height: 1.2em;
}

/* --- AY: Prose helpers (code, kbd, links) --- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
}
code {
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--accent-soft));
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 0.08em 0.38em;
  color: var(--text);
}
kbd {
  display: inline-flex;
  align-items: center;
  min-height: 1.35em;
  padding: 0.08em 0.4em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 650;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
a:not(.tab-btn):not(.nav-link):not(.back-link):not(.account-menu-item) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
a:not(.tab-btn):not(.nav-link):not(.back-link):not(.account-menu-item):hover {
  color: var(--accent);
}
.field-hint code, .muted code, .login-bootstrap-callout code {
  font-size: 0.86em;
}

/* --- AZ: Section rhythm & density --- */
.section-title {
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.section-lead {
  max-width: 40rem;
  line-height: 1.5;
}
.card + .card { margin-top: 0.15rem; }
.row { margin-bottom: 0.85rem; }
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.page-header {
  margin-bottom: 1.05rem;
}
.page-header-lead {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.tab-panel > .card:first-child,
.tab-panel > .page-header + .card {
  margin-top: 0.15rem;
}
.library-browser,
.jobs-list,
.analytics-table-wrap,
.users-table-wrap {
  border-radius: var(--radius-sm);
}

/* --- BA: Status residual (tags, pills, progress) --- */
.tag, .status-pill {
  letter-spacing: 0.02em;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
.tag.done, .status-pill.done {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ok) 12%, transparent);
}
.tag.failed, .status-pill.failed {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--err) 12%, transparent);
}
.progress-track, .job-progress-track, .hero-progress-track {
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-muted) 90%, var(--border-soft));
}
.progress-fill, .job-progress-fill, .hero-progress-fill {
  border-radius: 999px;
  transition: width 0.28s ease;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #60a5fa) 100%);
}
.ready-banner {
  border-radius: calc(var(--radius) + 2px);
  border-color: color-mix(in srgb, var(--ok) 42%, var(--border));
}
.impersonation-banner {
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--warn) 18%, transparent);
}
.error:not(.hidden) {
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--err-soft) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--err) 28%, var(--border));
}

/* --- BB: Print & focus completeness --- */
@media print {
  .ayin-toast-region,
  .mobile-upload-fab,
  .cmd-palette-backdrop,
  .prefs-backdrop,
  .fb-modal-backdrop,
  .ayin-confirm-backdrop,
  .account-menu-panel,
  .main-tabs-admin,
  .skip-link,
  .first-success-toast {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .card, .job-card, .library-browser, .ready-banner {
    box-shadow: none !important;
    border-color: #ccc !important;
  }
  a { color: #000 !important; text-decoration: underline !important; }
}
/* Strengthen existing focus rings without stripping outline globally */
.tab-btn:focus-visible,
.account-menu-btn:focus-visible,
.account-menu-item:focus-visible,
.fb-item:focus-within,
.filter-row select:focus-visible {
  box-shadow: var(--ring-accent, var(--focus));
}
@media (prefers-reduced-motion: reduce) {
  .fb-item, .analytics-tile, .analytics-job-row, .step, .account-menu-btn {
    transition: none !important;
  }
}
body.reduce-motion .fb-item,
body.reduce-motion .analytics-tile,
body.reduce-motion .analytics-job-row,
body.reduce-motion .step {
  transition: none !important;
}

/* Pass 6 micro-entrance for operator gates (respects reduced motion via Pass 5 rules) */
@keyframes ayin-pass6-gate-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#gate-card.card {
  animation: ayin-pass6-gate-in 0.28s ease both;
}
@media (prefers-reduced-motion: reduce) {
  #gate-card.card { animation: none !important; }
}
body.reduce-motion #gate-card.card { animation: none !important; }