/* ============================================================
   Fogito Speech — "Midnight Studio" theme
   Dark by default, light via html[data-theme="light"].
   Token-driven so both themes stay in sync.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens: dark (default) ---------- */
:root {
  --bg: #0b0f14;
  --bg-2: #0e141b;
  --panel: #121a23;
  --panel-2: #16202b;
  --raised: #1b2734;
  --line: #223142;
  --line-soft: #1a2635;
  --line-strong: #33475c;
  --text: #eaf2f7;
  --text-soft: #aebccb;
  --muted: #7e8fa1;
  --accent: #3ee0b0;
  --accent-2: #5fb8ff;
  --accent-strong: #20bd90;
  --accent-ink: #04120d;
  --accent-soft: rgba(62, 224, 176, .14);
  --accent-glow: rgba(62, 224, 176, .16);
  --info: #5fb8ff;
  --info-soft: rgba(95, 184, 255, .13);
  --warn: #f2b455;
  --warn-soft: rgba(242, 180, 85, .13);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .13);
  --ok: #3ee0b0;
  --ok-soft: rgba(62, 224, 176, .13);
  --radius: 16px;
  --radius-sm: 11px;
  --radius-xs: 8px;
  --shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, .35);
  --focus-ring: rgba(62, 224, 176, .35);
  --ease: cubic-bezier(.2, .75, .25, 1);
  --sidebar-w: 252px;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* ---------- Tokens: light ----------
   The greens here are deliberately deeper than the dark theme's #3ee0b0. At the
   previous #0f9370 the primary button rendered white text at 3.87:1 - its own
   label failed WCAG AA - and the accent failed as text anywhere. #0c7359 gives
   5.81:1 both as a fill behind white and as text on a panel. --muted moved for
   the same reason: it passed on a white panel but not on the page background.

   --danger, --warn, --ok and --info were darkened for §1.5, which is the first
   feature to use them as body text rather than as a border or a tint: an
   overdue label at 4.25:1 would have failed AA the moment it appeared. None of
   them sits behind white text anywhere, so darkening was free.
   Verify with a contrast checker before changing any of them. */
html[data-theme="light"] {
  --bg: #eef1f0;
  --bg-2: #f5f8f7;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --raised: #eef3f1;
  --line: #e1e8e5;
  --line-soft: #eaf0ed;
  --line-strong: #c7d3ce;
  --text: #0e1a16;
  --text-soft: #3d4a45;
  --muted: #5f6d67;
  --accent: #0c7359;
  --accent-2: #2065ad;
  --accent-strong: #08624c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(12, 115, 89, .10);
  --accent-glow: rgba(12, 115, 89, .14);
  --info: #2065ad;
  --info-soft: rgba(32, 101, 173, .10);
  --warn: #8a5708;
  --warn-soft: rgba(138, 87, 8, .12);
  --danger: #b42318;
  --danger-soft: rgba(180, 35, 24, .10);
  --ok: #0a7355;
  --ok-soft: rgba(10, 115, 85, .12);
  --shadow: 0 22px 48px -22px rgba(18, 60, 50, .22), 0 4px 12px -6px rgba(18, 60, 50, .10);
  --shadow-sm: 0 10px 26px -14px rgba(18, 60, 50, .22);
  --focus-ring: rgba(15, 147, 112, .30);
  color-scheme: light;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(900px 500px at 82% -8%, var(--info-soft), transparent 60%),
    radial-gradient(760px 520px at 6% 4%, var(--accent-glow), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { max-width: 100%; }
svg.lucide { width: 18px; height: 18px; flex: 0 0 auto; }
:where(h1, h2, h3, h4, strong) { text-wrap: balance; }
:where(p, li, td) { text-wrap: pretty; }
time, .metrics strong, .quota-ring strong, .state-badge, .detail-list dd, .data-table td,
.admin-stat-list dd, .recorder-timer, .segment-time, .metric-card strong, .error-code {
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--accent-soft); color: var(--text); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.compact { font-size: 13px; }
.mono { font-family: var(--mono); }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 9px 14px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   App shell (sidebar)
   ============================================================ */
.appshell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
}
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px 16px;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, transparent), transparent 42%);
  backdrop-filter: blur(4px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.brand-link { color: inherit; }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: linear-gradient(150deg, var(--accent), var(--accent-strong));
  color: var(--accent-ink);
  box-shadow: 0 8px 22px var(--accent-glow), inset 0 1px rgba(255, 255, 255, .35);
}
.brand-mark svg.lucide { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong, .brand h1 { font-size: 15.5px; font-weight: 680; letter-spacing: -0.01em; }
.brand-text small, .brand p {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; margin: 2px 0 0;
}

.sidenav { display: flex; flex-direction: column; gap: 3px; }
.sidenav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px;
  color: var(--text-soft); font-weight: 540; font-size: 14px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidenav a svg.lucide { width: 18px; height: 18px; opacity: .85; }
.sidenav a:hover { background: var(--panel); color: var(--text); }
.sidenav a.is-active { background: var(--accent-soft); color: var(--text); }
.sidenav a.is-active svg.lucide { color: var(--accent); opacity: 1; }
.sidenav .nav-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700; padding: 12px 11px 5px;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel);
}
.theme-row > span { font-size: 12.5px; color: var(--muted); font-weight: 560; }

.theme-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 62px; height: 30px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line); padding: 0 9px; flex: 0 0 auto;
}
.theme-toggle .tt-ic { position: relative; z-index: 2; display: grid; place-items: center; line-height: 0; transition: color .2s; }
.theme-toggle .tt-ic svg.lucide { width: 15px; height: 15px; }
.theme-toggle .tt-moon { color: var(--accent); }
.theme-toggle .tt-sun { color: var(--muted); }
html[data-theme="light"] .theme-toggle .tt-moon { color: var(--muted); }
html[data-theme="light"] .theme-toggle .tt-sun { color: var(--accent); }
.theme-toggle .tt-thumb {
  position: absolute; top: 2px; left: 2px; width: 26px; height: 24px; border-radius: 999px; z-index: 1;
  background: var(--panel); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .22s var(--ease);
}
html[data-theme="light"] .theme-toggle .tt-thumb { transform: translateX(28px); box-shadow: 0 2px 6px rgba(18, 60, 50, .18); }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 6px; }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-weight: 680;
  background: linear-gradient(150deg, var(--raised), var(--panel-2));
  color: var(--accent); border: 1px solid var(--line);
}
.user-chip .user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-chip .user-meta strong { font-size: 13px; font-weight: 600; }
.user-chip .user-meta small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip form { margin-left: auto; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--raised); border: 1px solid var(--line); color: var(--text-soft); transition: .15s var(--ease);
}
.icon-btn:hover { color: var(--accent); border-color: var(--line-strong); }
.icon-btn svg.lucide { width: 17px; height: 17px; }

.app-main { min-width: 0; padding: 26px 32px 90px; }
.app-topbar { display: none; }

/* Guest (logged-out) shell */
.guest-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.guest-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--line-soft);
}
.guest-topbar .brand-text small { display: block; }

/* Flash messages */
.flash-stack { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; max-width: 720px; }
.guest-shell .flash-stack { margin: 18px auto 0; width: min(440px, calc(100% - 44px)); }
.flash {
  padding: 12px 15px; border-radius: 12px; font-size: 14px; font-weight: 540;
  border: 1px solid var(--line); background: var(--panel); color: var(--text-soft);
  display: flex; align-items: center; gap: 10px;
}
.flash.success { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-soft); color: var(--ok); }
.flash.error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.flash.warning { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); color: var(--warn); }

/* ============================================================
   Content layouts (per <main>)
   ============================================================ */
.workspace, .settings-layout, .admin-layout, .job-layout, .home-layout, .tasks-layout, .people-layout { animation: fade .32s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.workspace-new { max-width: 760px; }
.workspace-history { max-width: 1120px; }
.settings-layout { max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.job-layout { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.admin-layout { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.admin-user-layout { grid-template-columns: 400px minmax(0, 1fr); }
.auth-layout, .error-layout { min-height: calc(100dvh - 130px); display: grid; place-items: center; padding: 30px 0; }

/* Panels */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}
.workspace-new > .panel, .workspace-new .new-transcription-panel { padding: 0; background: none; border: 0; box-shadow: none; }
.new-transcription-panel { display: flex; flex-direction: column; gap: 16px; }

.section {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}
.section + .section, .settings-disclosure.section { margin-top: 0; }
.section-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.section-heading svg.lucide { width: 19px; height: 19px; color: var(--accent); }
.section-heading h2 { font-size: 16.5px; }
.small-heading svg.lucide { width: 16px; height: 16px; }
.small-heading h2 { font-size: 14px; }
.mini-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 700; }
.page-heading h1 { font-size: 27px; margin-top: 8px; }
.page-meta { color: var(--muted); font-size: 13.5px; font-family: var(--mono); }
.subhead { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin: 26px 0 12px; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ============================================================
   Buttons
   ============================================================ */
.primary-button, .download-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 17px; border-radius: 12px; font-weight: 580; font-size: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.primary-button svg.lucide, .download-button svg.lucide { width: 17px; height: 17px; }
.download-button:hover { transform: translateY(-1px); border-color: var(--line-strong); background: var(--raised); }
.primary-button, .primary-download {
  background: linear-gradient(150deg, var(--accent), var(--accent-strong));
  color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 10px 26px var(--accent-glow);
}
.primary-button:hover, .primary-download:hover { transform: translateY(-1px); filter: brightness(1.05); }
.danger-button { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); background: var(--danger-soft); }
.danger-button:hover { background: color-mix(in srgb, var(--danger) 16%, var(--panel)); border-color: var(--danger); transform: translateY(-1px); }

.small-action {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 9px; font-size: 13px; font-weight: 560;
  border: 1px solid var(--line); background: var(--raised); color: var(--text-soft); transition: .15s var(--ease);
}
.small-action:hover { color: var(--text); border-color: var(--line-strong); }
.primary-small { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.primary-small:hover { filter: brightness(1.05); color: var(--accent-ink); }
.positive-action { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.danger-action { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, .label-row > span:first-child { font-size: 13px; font-weight: 540; color: var(--text-soft); }
.label-row { display: flex; align-items: center; gap: 8px; }
.field input[type="text"], .field input[type="url"], .field input[type="email"],
.field input[type="password"], .field input[type="number"], .field input[type="search"],
.field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea, textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f8194' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
.compact-field span { font-size: 12px; }
.compact-field input { padding: 8px 11px; }

/* Help tooltip */
.help {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  color: var(--muted); cursor: help; position: relative;
}
.help svg.lucide { width: 14px; height: 14px; }
.help:hover, .help:focus-visible { color: var(--accent); }
.help[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 10px;
  background: var(--panel); color: var(--text-soft); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); z-index: 60;
}
.help:hover::after, .help:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Switch (toggle) */
.switch {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 0; position: relative;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-control {
  position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line); transition: .18s var(--ease);
}
.switch-control::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .18s var(--ease), background .18s var(--ease);
}
.switch input:checked + .switch-control { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-control::after { transform: translateX(18px); background: var(--accent-ink); }
.switch input:focus-visible + .switch-control { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.switch-label { font-size: 14px; font-weight: 540; }
.switch .help { margin-left: 2px; }
.switch.wide { width: 100%; }
.compact-switch .switch-control { width: 36px; height: 21px; }
.compact-switch .switch-control::after { width: 15px; height: 15px; }
.compact-switch input:checked + .switch-control::after { transform: translateX(15px); }
.compact-switch .switch-label { font-size: 13px; }
.switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }

/* Disclosure */
.settings-disclosure { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; padding: 0; overflow: hidden; }
.settings-disclosure > summary { list-style: none; cursor: pointer; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-heading { display: flex; align-items: center; gap: 12px; padding: 15px 17px; }
.disclosure-heading svg.lucide { width: 19px; height: 19px; color: var(--accent); }
.disclosure-heading span { display: flex; flex-direction: column; }
.disclosure-heading strong { font-size: 14px; }
.disclosure-heading small { font-size: 12px; color: var(--muted); }
.settings-disclosure > summary { display: flex; align-items: center; justify-content: space-between; padding-right: 16px; }
.disclosure-chevron { color: var(--muted); transition: transform .2s var(--ease); }
.settings-disclosure[open] .disclosure-chevron { transform: rotate(180deg); }
.disclosure-body { padding: 4px 17px 18px; display: flex; flex-direction: column; gap: 14px; }
.privacy-disclosure { margin-top: 0; }

/* Entity groups */
.entity-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; }
.entity-title { font-size: 13px; font-weight: 560; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.entity-group label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-soft); }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* Dropzone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 30px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--bg-2);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.dropzone:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-2)); }
.dropzone input[type="file"] { display: none; }
.drop-icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
  background: var(--raised); color: var(--accent);
}
.drop-icon svg.lucide { width: 24px; height: 24px; }
#fileName { font-size: 15px; font-weight: 560; }

/* Source-mode picker */
.source-mode-picker { display: flex; gap: 8px; padding: 5px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); }
.source-mode {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 9px; color: var(--text-soft); font-weight: 540; font-size: 14px; transition: .15s var(--ease);
}
.source-mode svg.lucide { width: 17px; height: 17px; }
.source-mode.is-active { background: var(--panel); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.source-panel { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.source-panel[hidden] { display: none; }

/* Recorder */
.recorder-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); }
.recorder-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.recorder-copy { display: flex; flex-direction: column; gap: 3px; }
.recorder-copy strong { font-size: 14.5px; }
.recorder-copy span { font-size: 12.5px; color: var(--muted); }
.recorder-timer { margin-left: auto; font-family: var(--mono); font-size: 20px; font-weight: 600; }
.recorder-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.recording-preview { width: 100%; margin-top: 8px; }

.transcription-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.transcription-submit .primary-button { padding: 13px 22px; font-size: 15px; }
.inline-status { font-size: 13px; color: var(--muted); }

/* ============================================================
   History / dashboard
   ============================================================ */
.results { display: flex; flex-direction: column; gap: 16px; }
.result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.result-header h2 { font-size: 22px; }
.result-header p { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.quota-ring {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto; text-align: center;
  background: radial-gradient(closest-side, var(--panel) 78%, transparent 79%), conic-gradient(var(--accent) var(--quota, 36%), var(--line) 0);
  border: 0;
}
.quota-ring strong { font-size: 16px; font-weight: 680; line-height: 1; }
.quota-ring span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.history-search { margin: 4px 0; }
.search-control { display: flex; align-items: center; gap: 10px; padding: 0 13px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); transition: .15s var(--ease); }
.search-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-control svg.lucide { width: 17px; height: 17px; color: var(--muted); }
.search-control input { border: 0; background: none; padding: 12px 0; box-shadow: none !important; }
.search-control input:focus { box-shadow: none; }

.job-list { display: flex; flex-direction: column; gap: 11px; }
.job-row {
  /* The title is the reason the row exists, so it gets a floor. Three `auto`
     tracks let the export buttons size to their content first and squeezed the
     title to ~100px, wrapping long meeting names into a ribbon; a bare minmax
     on the title then overflowed the row instead. The export group is the one
     that gives: minmax(0, auto) lets it shrink, and it wraps to a second line. */
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, auto) auto; align-items: center; gap: 16px;
  padding: 15px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.job-row:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-sm); }
.job-main-link { min-width: 0; color: inherit; }
.job-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.job-main strong { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.job-main .muted { font-size: 13px; }
.job-speaker-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.job-speaker-tag { font-size: 11.5px; padding: 3px 9px; border-radius: 7px; background: var(--raised); color: var(--text-soft); border: 1px solid var(--line-soft); }
.job-speaker-tag.more { color: var(--muted); }
.job-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.state-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  background: var(--raised); color: var(--text-soft);
}
.state-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state-badge.completed { color: var(--ok); background: var(--ok-soft); }
.state-badge.running, .state-badge.processing { color: var(--info); background: var(--info-soft); }
.state-badge.queued { color: var(--warn); background: var(--warn-soft); }
.state-badge.failed, .state-badge.error { color: var(--danger); background: var(--danger-soft); }

.meter, .row-meter { height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.row-meter { width: 150px; }
.meter span, .row-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s var(--ease); }
.detail-meter { height: 8px; margin: 4px 0 2px; }

/* History download actions */
.history-downloads { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.history-download {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px;
  font-size: 12.5px; font-weight: 540; color: var(--text-soft);
  background: var(--raised); border: 1px solid var(--line-soft); transition: .15s var(--ease);
}
.history-download svg.lucide { width: 15px; height: 15px; }
.history-download:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.primary-history-download { color: var(--accent); }

/* Download menu (details) */
.download-menu { position: relative; }
.download-menu > summary { list-style: none; cursor: pointer; }
.download-menu > summary::-webkit-details-marker { display: none; }
.download-menu-trigger { display: inline-flex; align-items: center; gap: 6px; }
.download-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 7px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow);
}
.history-menu-panel { min-width: 220px; }
.download-menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--text-soft); transition: .13s var(--ease); }
.download-menu-item svg.lucide { width: 17px; height: 17px; color: var(--accent); }
.download-menu-item:hover { background: var(--raised); color: var(--text); }
.download-menu-item span { display: flex; flex-direction: column; }
.download-menu-item strong { font-size: 13.5px; font-weight: 560; }
.download-menu-item small { font-size: 11.5px; color: var(--muted); }

/* Empty state */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 46px 24px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted);
}
.empty-state strong { font-size: 16px; color: var(--text); }
.empty-state span { font-size: 13.5px; }
.empty-state-icon, .empty-state > svg.lucide { display: grid; place-items: center; }
.empty-state svg.lucide { width: 30px; height: 30px; color: var(--accent); }
.empty-state-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.empty-state-icon svg.lucide { width: 26px; height: 26px; }
.compact-empty { padding: 30px 20px; }
.composed-empty .download-button { margin-top: 6px; }

/* ============================================================
   Job detail
   ============================================================ */
.job-title-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.job-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-title-row h2 { font-size: 24px; }
.title-edit-button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 540;
  color: var(--text-soft); background: var(--raised); border: 1px solid var(--line); transition: .15s var(--ease);
}
.title-edit-button:hover { color: var(--accent); border-color: var(--line-strong); }
.title-edit-button svg.lucide { width: 15px; height: 15px; }
.title-edit-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.title-edit-form input { flex: 1; min-width: 200px; }
#runSubtitle { color: var(--muted); font-size: 13.5px; }

.warning-state, .error-state {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-radius: 12px; font-size: 13.5px; font-weight: 500;
}
.warning-state { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.error-state { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.warning-state svg.lucide, .error-state svg.lucide { width: 18px; height: 18px; margin-top: 1px; }
.retry-bar { margin: 2px 0; }

.audio-player { padding: 6px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); }
.audio-player audio { width: 100%; display: block; }

/* Review checklist */
.review-panel {
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--line)); border-radius: 14px; padding: 16px 18px;
  background: linear-gradient(160deg, var(--warn-soft), transparent);
}
.review-panel.ready { border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); background: linear-gradient(160deg, var(--ok-soft), transparent); }
.review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.review-header h3 { font-size: 16px; margin: 4px 0 3px; }
.review-header p { font-size: 13px; color: var(--muted); }
.review-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--warn); }
.review-kicker svg.lucide { width: 15px; height: 15px; }
.review-status { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.review-status.ready { background: var(--ok-soft); color: var(--ok); }
.review-status.processing { background: var(--info-soft); color: var(--info); }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); }
.review-item-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); flex: 0 0 auto; }
.review-item.ready .review-item-icon { background: var(--ok-soft); color: var(--ok); }
.review-item-icon svg.lucide { width: 16px; height: 16px; }
.review-item-copy { flex: 1; }
.review-item-copy h4 { font-size: 13.5px; }
.review-item-copy p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.review-action { align-self: center; }

/* Artifact toolbar + tabs */
.artifact-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; color: var(--text-soft); font-size: 13.5px; font-weight: 540; transition: .15s var(--ease); }
.tab svg.lucide { width: 16px; height: 16px; }
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--panel); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.export-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Preview panes */
.preview { margin-top: 18px; }
.editor-panel { margin-top: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); overflow: hidden; }
.editor-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 13.5px; font-weight: 560; }
.editor-panel > summary::-webkit-details-marker { display: none; }
.editor-panel > summary svg.lucide { width: 17px; height: 17px; color: var(--accent); }
.editor-panel .stack { padding: 4px 16px 16px; }

/* Prose / summary */
.prose { color: var(--text-soft); line-height: 1.65; }
.prose h1, .prose h2, .prose h3 { color: var(--text); margin: 22px 0 10px; }
.prose h1 { font-size: 20px; } .prose h2 { font-size: 17px; } .prose h3 { font-size: 15px; }
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 11px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); }
.prose a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--bg-2); padding: 2px 6px; border-radius: 6px; }
.prose blockquote { margin: 0 0 14px; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; }

/* Synced transcript */
.transcript { display: flex; flex-direction: column; gap: 2px; }
.segment { display: flex; align-items: start; gap: 6px; border-radius: 11px; border: 1px solid transparent; transition: .14s var(--ease); }
.segment-main {
  flex: 1; display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: start;
  padding: 11px 13px; text-align: left; background: none; border: 0; cursor: pointer; min-width: 0;
}
.segment:hover { background: var(--panel); border-color: var(--line); }
/* app.js has always set `is-active`; the rule said `.active`, so the transcript
   never followed along with the audio. */
.segment.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.segment-star {
  background: none; border: 0; cursor: pointer; padding: 12px 10px; color: var(--muted);
  opacity: 0; transition: .14s var(--ease);
}
.segment:hover .segment-star, .segment.is-starred .segment-star, .segment-star:focus-visible { opacity: 1; }
.segment-star svg.lucide { width: 16px; height: 16px; }
.segment.is-starred .segment-star { color: var(--warn); }
.segment.is-starred .segment-star svg.lucide { fill: currentColor; }
.segment-time { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.segment-speaker { font-weight: 600; font-size: 13px; color: var(--accent); margin-bottom: 3px; display: block; }
.segment-text { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; }

/* Chat */
.chat-panel { display: flex; flex-direction: column; gap: 12px; }
.chat-messages { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; padding: 2px; }
.chat-message { display: flex; flex-direction: column; gap: 4px; max-width: 84%; }
.chat-message > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chat-message > div { padding: 12px 15px; border-radius: 13px; font-size: 14px; line-height: 1.55; }
.chat-message.user { align-self: flex-end; align-items: flex-end; }
.chat-message.user > div { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.chat-message.assistant > div { background: var(--panel); border: 1px solid var(--line); color: var(--text-soft); border-bottom-left-radius: 4px; }
.chat-empty { padding: 34px 20px; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; min-height: 52px; }

/* Transcript editor */
.transcript-editor .editor-block { border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: var(--panel); }
.editor-block-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.editor-block-heading h3 { font-size: 15px; }
.speaker-rename-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.segment-editor-list { display: flex; flex-direction: column; gap: 10px; }
.segment-editor-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); }
.transcript-text-field { min-width: 0; }
.sticky-actions { position: sticky; bottom: 14px; background: var(--panel-2); padding: 12px; border-radius: 12px; border: 1px solid var(--line); }

/* Speaker suggestions */
.speaker-learning-block { border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: var(--panel); }
.speaker-suggestion-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.speaker-suggestion-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap; }
.speaker-suggestion-item.applied { border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); }
.speaker-suggestion-item.rejected { opacity: .6; }
.speaker-suggestion-copy { display: flex; flex-direction: column; gap: 2px; }
.speaker-suggestion-copy strong { font-size: 14px; }
.speaker-suggestion-copy span { font-size: 13px; color: var(--accent); }
.speaker-suggestion-copy small { font-size: 11.5px; color: var(--muted); }
.speaker-suggestion-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.speaker-correction-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.speaker-correction-form select, .speaker-correction-form input { width: auto; padding: 7px 11px; font-size: 13px; }
.speaker-backfill-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* Detail sidebar (aside.controls) */
.compact-panel { position: sticky; top: 24px; }
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; }
.detail-list dt { color: var(--muted); font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.detail-list dd { margin: 0; text-align: right; font-weight: 540; font-size: 13px; font-family: var(--mono); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.detail-list dt:last-of-type, .detail-list dd:last-of-type { border-bottom: 0; }
.event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.event-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border-left: 3px solid var(--line-strong); }
.event-item span { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.event-item strong { font-size: 13px; font-weight: 540; }
.event-item small { font-size: 11.5px; color: var(--muted); }
.event-item.warning { border-left-color: var(--warn); }
.event-item.error { border-left-color: var(--danger); }
.event-item.info { border-left-color: var(--info); }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.danger-zone { border-top-color: color-mix(in srgb, var(--danger) 25%, var(--line-soft)); }

/* ============================================================
   Settings
   ============================================================ */
.settings-page-heading { margin-bottom: 4px; }
.speaker-profile-list { display: flex; flex-direction: column; gap: 10px; }
.speaker-profile-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap; }
.speaker-profile-title-row { display: flex; align-items: center; gap: 10px; }
.speaker-profile-item strong { font-size: 14.5px; }
.speaker-profile-item span { font-size: 12.5px; color: var(--text-soft); }
.speaker-profile-item small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }
.speaker-profile-actions { display: flex; align-items: center; gap: 12px; }
.profile-quality { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; background: var(--raised); color: var(--muted); }
.profile-quality.strong { background: var(--ok-soft); color: var(--ok); }
.profile-quality.weak { background: var(--warn-soft); color: var(--warn); }

/* ============================================================
   Admin
   ============================================================ */
.metrics, .admin-primary-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.metric-card { padding: 16px 17px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.metric-card span { font-size: 12.5px; color: var(--muted); }
.metric-card strong { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; }
.metric-card small { font-size: 12px; color: var(--muted); }
.metric-accent { background: linear-gradient(155deg, var(--accent-soft), var(--panel)); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.admin-stat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; }
.admin-stat-group { padding: 16px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); }
.admin-stat-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.admin-stat-heading svg.lucide { width: 17px; height: 17px; color: var(--accent); }
.admin-stat-heading h3 { font-size: 14px; }
.admin-stat-list { margin: 0; display: flex; flex-direction: column; gap: 0; }
.admin-stat-list > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.admin-stat-list > div:last-child { border-bottom: 0; }
.admin-stat-list dt { color: var(--muted); font-size: 13px; }
.admin-stat-list dd { margin: 0; font-weight: 540; font-size: 13px; font-family: var(--mono); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.data-table thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; padding: 12px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bg-2); }
.data-table strong { font-weight: 600; }

.readiness-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.readiness-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 13px 15px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.readiness-item span { font-size: 13.5px; font-weight: 540; }
.readiness-item strong { justify-self: end; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; }
.readiness-item small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.readiness-item.ok strong { background: var(--ok-soft); color: var(--ok); }
.readiness-item.missing strong { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   Auth / error
   ============================================================ */
.auth-panel { width: min(420px, 100%); }
.auth-panel .section-heading { justify-content: center; }
.auth-help { text-align: center; margin-top: 4px; }
.error-panel { width: min(460px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 30px; }
.error-code { font-size: 56px; font-weight: 720; color: var(--accent); letter-spacing: -0.03em; line-height: 1; }
.error-panel h2 { font-size: 22px; }
.error-panel p { color: var(--muted); }

/* ============================================================
   Install prompt + mobile tab bar
   ============================================================ */
.install-prompt {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90;
  width: min(440px, calc(100% - 32px)); display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.install-prompt[hidden] { display: none; }
.install-prompt-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.install-prompt-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.install-prompt-copy strong { font-size: 14px; }
.install-prompt-copy span { font-size: 12px; color: var(--muted); }
.install-prompt-actions { display: flex; align-items: center; gap: 8px; }
.install-prompt-actions [data-install-action] { padding: 9px 15px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 13.5px; }
.install-dismiss { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: var(--raised); }
.install-dismiss:hover { color: var(--text); }

.mobile-tabbar { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .job-layout, .admin-layout, .admin-user-layout { grid-template-columns: minmax(0, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .appshell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .app-main { padding: 16px 16px 96px; }
  .app-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -16px -16px 16px; padding: 12px 16px;
    background: color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 50;
  }
  .app-topbar .brand-text small { display: none; }
  .switch-grid { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  .segment-editor-row { grid-template-columns: 1fr; }
  .page-heading h1 { font-size: 23px; }

  .mobile-tabbar {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 4px;
    background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
  }
  .mobile-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 10px;
    color: var(--muted); font-size: 11px; font-weight: 540;
  }
  .mobile-tabbar a svg.lucide { width: 20px; height: 20px; }
  .mobile-tabbar a.is-active { color: var(--accent); background: var(--accent-soft); }
  .install-prompt { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  /* Below this the three columns cannot coexist without starving the title. */
  .job-row { grid-template-columns: 1fr; }
  .job-state { flex-direction: row; align-items: center; justify-content: space-between; }
  .history-downloads { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .result-header { align-items: flex-start; }
  .job-state { flex-direction: row; align-items: center; justify-content: space-between; }
  .history-downloads { flex-wrap: wrap; }
  .artifact-toolbar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Phase 1: Home, Tasks, People, stepper, attention, nav
   ============================================================ */
.new-btn { width: 100%; justify-content: center; }
.sidenav .nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; padding: 12px 11px 5px; }

.home-layout { max-width: 1120px; }
.home-hero {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 15%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius); padding: 24px; margin-bottom: 22px;
}
.home-hero h3 { font-size: 20px; }
.home-hero p { color: var(--text-soft); margin-top: 6px; max-width: 60ch; }
.hero-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.stat-l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 540; }
.stat-l svg.lucide { width: 15px; height: 15px; color: var(--accent); }
.stat strong { display: block; font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-top: 9px; }
.stat-sub { font-size: 14px; font-weight: 400; color: var(--muted); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-head h3 { font-size: 16px; display: flex; align-items: center; gap: 9px; }
.sec-head h3 svg.lucide { width: 18px; height: 18px; color: var(--accent); }
.linkmore { font-size: 13px; color: var(--accent); font-weight: 560; display: inline-flex; align-items: center; gap: 5px; }
.linkmore svg.lucide { width: 15px; height: 15px; }

.mini-list { display: flex; flex-direction: column; gap: 2px; }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 11px; transition: background .13s var(--ease); color: inherit; min-width: 0; }
.mini-row:hover { background: var(--raised); }
.mini-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.mini-ic svg.lucide { width: 18px; height: 18px; }
.mini-body { display: flex; flex-direction: column; min-width: 0; }
.mini-body strong { font-size: 14.5px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-body small { font-size: 12.5px; color: var(--muted); }
.mini-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.mini-meta .row-meter { width: 90px; }

.task-mini { display: flex; align-items: center; gap: 11px; padding: 11px 6px; border-bottom: 1px solid var(--line-soft); color: inherit; }
.task-mini:last-child { border-bottom: 0; }
.task-mini:hover { background: var(--raised); border-radius: 8px; }
.task-mini-text { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-mini small { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.cbx { width: 19px; height: 19px; border-radius: 6px; border: 1.6px solid var(--line-strong); flex: 0 0 auto; display: grid; place-items: center; }
.cbx.done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cbx.done svg.lucide { width: 12px; height: 12px; }

/* Stepper */
.stepper { display: flex; align-items: center; gap: 7px; margin: 4px 0 6px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 560; color: var(--muted); }
.step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--line); font-size: 11px; }
.step .dot svg.lucide { width: 12px; height: 12px; }
.step.done { color: var(--text-soft); }
.step.done .dot { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.step.current { color: var(--text); }
.step.current .dot { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.step-sep { width: 26px; height: 2px; background: var(--line); border-radius: 2px; }
.step-sep.done { background: var(--accent); }

/* Attention banner (slim, replaces heavy review checklist) */
.attention { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; margin-bottom: 16px;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.attention > svg.lucide { width: 18px; height: 18px; color: var(--warn); flex: 0 0 auto; }
.attention-copy strong { font-size: 13.5px; font-weight: 560; }
.attention .small-action { margin-left: auto; flex: 0 0 auto; }
.detail-divider { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.export-stack { display: flex; flex-direction: column; gap: 9px; }
.export-stack .download-button { width: 100%; }
.export-stack .download-menu { width: 100%; }
.export-stack .download-menu-trigger { width: 100%; }

/* Tasks page */
.tasks-layout { max-width: 900px; }
.task-group { margin-bottom: 24px; }
.task-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.task-group-head svg.lucide { width: 15px; height: 15px; color: var(--accent); }
.task-group-head time { margin-left: 4px; font-family: var(--mono); font-size: 12px; }
.task-group-head:hover { color: var(--text); }
.task-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 9px; }
.task-text { flex: 1; min-width: 0; }
.task-text strong { font-size: 14.5px; font-weight: 540; display: block; }
.task-text small { font-size: 12px; color: var(--muted); display: flex; gap: 8px; margin-top: 3px; flex-wrap: wrap; align-items: center; }
.task-row.done .task-text strong { text-decoration: line-through; color: var(--muted); }
.owner { display: inline-flex; align-items: center; gap: 6px; }
.owner-av { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.due { color: var(--warn); }

/* People page */
.people-layout { max-width: 900px; }
.speaker-profile-main { display: flex; align-items: center; gap: 13px; }
.person-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 680;
  background: linear-gradient(150deg, var(--accent-soft), var(--panel-2)); color: var(--accent); border: 1px solid var(--line); flex: 0 0 auto; }

@media (max-width: 1024px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home-stats { grid-template-columns: 1fr; }
  .stepper { font-size: 11.5px; }
  .step-sep { width: 16px; }
}

/* Password change sits in the Account panel, under the email address; the
   rule keeps it from reading as a continuation of that line. */
.password-form { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- People: the contact directory ---------- */
.contact-add-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap;
}
.contact-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.contact-identity { min-width: 0; }
.contact-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.contact-item strong { font-size: 14.5px; }
.contact-email { font-size: 12.5px; color: var(--accent); text-decoration: none; display: block; margin-top: 2px; }
.contact-email:hover { text-decoration: underline; }
.contact-no-email { font-size: 12.5px; display: block; margin-top: 2px; }
.contact-item small { font-size: 11.5px; display: block; margin-top: 3px; }
.profile-quality svg.lucide { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }

.contact-editor > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.contact-editor > summary::-webkit-details-marker { display: none; }
.contact-editor-panel {
  display: flex; flex-direction: column; gap: 14px; margin-top: 12px;
  padding-top: 14px; border-top: 1px solid var(--line); width: 100%;
}
.contact-editor[open] { width: 100%; }
.contact-merge-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.voice-link-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voice-link-form select { min-width: 170px; }

/* A task whose owner we have matched to a real person. */
.owner.assigned .owner-av { background: var(--accent-soft); color: var(--accent); }
.owner-raw { color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  .contact-add-form { grid-template-columns: 1fr; }
  .contact-item { flex-direction: column; align-items: stretch; }
}

/* ---------- Sharing: the owner's card ---------- */
.share-link-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; }
.share-link-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.share-link-row.revoked, .share-link-row.expired { opacity: .62; }
.share-link-main { flex: 1; min-width: 0; }
.share-link-url { width: 100%; font-family: var(--mono); font-size: 11.5px; padding: 6px 8px; margin-bottom: 4px; }
.share-create { margin-top: 8px; }
.share-create > summary { cursor: pointer; list-style: none; }
.share-create > summary::-webkit-details-marker { display: none; }
.share-create-form, .share-recipients { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Sharing: the public page ---------- */
/* Standalone, so it repeats the page frame base.html would otherwise provide. */
.share-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.share-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.share-brand-text { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.share-brand-text strong { font-size: 14.5px; }
.share-brand-text small { font-size: 11.5px; color: var(--muted); }
.share-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 22px 40px; }
.share-doc-header { margin-bottom: 20px; }
.share-doc-header h1 { font-size: 25px; line-height: 1.25; }
.share-doc-header p { margin-top: 6px; }
.share-panel { margin-bottom: 16px; }
.share-unavailable, .share-locked { text-align: center; padding: 40px 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.share-unavailable h1, .share-locked h1 { font-size: 20px; }
.share-unavailable p, .share-locked p { max-width: 44ch; }
.share-password-form { width: 100%; max-width: 320px; margin-top: 6px; text-align: left; }
.share-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.share-tasks li { display: flex; gap: 10px; align-items: flex-start; }
.share-tasks li.done { opacity: .6; }
.share-tasks li.done strong { text-decoration: line-through; }
.share-tasks svg.lucide { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); flex: none; }
.share-tasks strong { font-size: 14px; font-weight: 560; display: block; }
.share-tasks small { font-size: 11.5px; color: var(--muted); }
.share-transcript { max-height: none; }
.share-footer { padding: 18px 22px; border-top: 1px solid var(--line); text-align: center; font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.share-footer .legal-links { margin: 0; }

@media (max-width: 620px) {
  .share-main { padding: 20px 14px 32px; }
  .share-doc-header h1 { font-size: 21px; }
}

/* ---------- Folders, tags, filtering ---------- */
.history-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.history-filters .history-search { flex: 1; min-width: 220px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; text-decoration: none; color: var(--text-soft);
  background: var(--bg-2); border: 1px solid var(--line);
}
.filter-chip:hover { border-color: var(--line-strong); color: var(--text); }
.filter-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-chip svg.lucide { width: 13px; height: 13px; }
.chip-count { font-size: 11px; color: var(--muted); }
.filter-chip.is-active .chip-count { color: var(--accent); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 12.5px; }
.pager .is-disabled { opacity: .4; pointer-events: none; }

.folder-manager { margin-top: 16px; }
.folder-manager > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.folder-manager > summary::-webkit-details-marker { display: none; }
.folder-manager-panel { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.folder-add-form { display: flex; align-items: end; gap: 10px; }
.folder-add-form .field { flex: 1; }
.folder-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.folder-rename-form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.folder-rename-form input { flex: 1; }

/* Filing shown on a meeting row. */
.job-filing { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; align-items: center; }
.job-folder, .job-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line-soft); }
.job-folder { display: inline-flex; align-items: center; gap: 4px; background: var(--raised); color: var(--text-soft); }
.job-folder svg.lucide { width: 12px; height: 12px; }
.job-tag { background: transparent; color: var(--muted); }
.organize-form { margin-top: 10px; }

@media (max-width: 620px) {
  .history-filters { flex-direction: column; align-items: stretch; }
  .folder-add-form { flex-direction: column; align-items: stretch; }
}

/* Action items you can act on (§1.5). The row is shared by the Tasks page and
   the meeting page, so everything here has to hold in both. */
.cbx-button { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.cbx-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.task-row { flex-wrap: wrap; }
.task-row.overdue { border-color: var(--danger); background: linear-gradient(90deg, var(--danger-soft), transparent 40%); }
.task-row.done { opacity: .72; }
.due { display: inline-flex; align-items: center; gap: 4px; }
.due svg.lucide { width: 12px; height: 12px; }
.due.is-overdue, .is-overdue { color: var(--danger); font-weight: 600; }
.due.is-today { color: var(--warn); font-weight: 600; }
.due-raw { color: var(--muted); font-style: italic; }
.task-flag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.task-error { flex-basis: 100%; color: var(--danger); font-size: 12px; margin-top: 6px; }

/* Inline edit. A <details> rather than a JS panel: it opens with no script at
   all, and the form inside is an ordinary POST. */
.task-edit > summary { list-style: none; cursor: pointer; }
.task-edit > summary::-webkit-details-marker { display: none; }
/* Open, the panel takes the whole row width, which pushes the pencil onto its
   own line. Give it a label there so it reads as a heading rather than a
   stray icon. */
.task-edit[open] { flex-basis: 100%; }
.task-edit[open] > summary {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: auto; padding: 6px 11px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--muted);
}
.task-edit-label { display: none; }
.task-edit[open] .task-edit-label { display: inline; }
.task-edit-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.task-edit-form textarea { width: 100%; resize: vertical; }
.task-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.task-edit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.danger-text { color: var(--danger); }
.tiny { font-size: 11.5px; }

.task-add { margin-top: 4px; }
.task-add > summary { list-style: none; cursor: pointer; display: inline-flex; }
.task-add > summary::-webkit-details-marker { display: none; }
.task-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.task-add-form .field { flex: 1 1 160px; margin: 0; }
.task-add-form .field:first-child { flex: 3 1 260px; }

.overdue-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--danger); padding: 8px 6px; border-bottom: 1px solid var(--line-soft); }
.overdue-line svg.lucide { width: 14px; height: 14px; }
.notice-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.notice-line svg.lucide { width: 14px; height: 14px; }
.task-mini form { display: flex; }
.task-mini.overdue .cbx { border-color: var(--danger); }
.task-mini.done .task-mini-text { text-decoration: line-through; color: var(--muted); }
.tasks-layout .history-filters { margin-bottom: 12px; }

/* Meeting-type templates (§1.3). The card is a label wrapping a real radio, so
   picking one needs no scripting; :checked drives the selected state. */
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.tmpl { cursor: pointer; }
.tmpl input { position: absolute; opacity: 0; width: 0; height: 0; }
.tmpl-body {
  display: block; padding: 13px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); transition: .15s var(--ease);
}
.tmpl:hover .tmpl-body { border-color: var(--line-strong); }
.tmpl input:focus-visible + .tmpl-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.tmpl input:checked + .tmpl-body { border-color: var(--accent); background: var(--accent-soft); }
.tmpl .ic {
  width: 32px; height: 32px; border-radius: 10px; background: var(--raised); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 9px;
}
.tmpl input:checked + .tmpl-body .ic { background: var(--accent); color: var(--accent-ink); }
.tmpl .ic svg.lucide { width: 16px; height: 16px; }
.tmpl strong { font-size: 13.5px; display: block; font-weight: 560; }
.tmpl small { font-size: 11.5px; color: var(--muted); }

.template-default-form { display: flex; gap: 10px; align-items: end; margin-bottom: 16px; flex-wrap: wrap; }
.template-default-form .field { flex: 1 1 240px; margin: 0; }
.template-manager { display: flex; flex-direction: column; gap: 10px; }
.template-card { padding: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.template-head { display: flex; align-items: center; gap: 10px; }
.template-head .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--raised); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.template-head .ic svg.lucide { width: 15px; height: 15px; }
.template-head strong { font-size: 14px; font-weight: 560; }
.template-head small { font-size: 11.5px; color: var(--muted); display: block; }
.template-badge { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.template-guidance { font-size: 12.5px; color: var(--text-soft); margin: 10px 0 0; line-height: 1.55; }
.template-sections { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.template-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.template-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* Highlights (§1.4). Starred moments, shown above the summary. */
.highlights { margin-bottom: 22px; }
.highlight { display: flex; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 9px; }
.highlight-time {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  background: var(--accent-soft); border: 0; border-radius: 8px; padding: 5px 8px; cursor: pointer;
}
.highlight-time svg.lucide { width: 12px; height: 12px; }
.highlight-body { flex: 1; min-width: 0; }
.highlight-speaker { font-size: 12px; font-weight: 600; color: var(--accent); display: block; margin-bottom: 2px; }
.highlight-quote { font-size: 14px; color: var(--text-soft); line-height: 1.55; margin: 0 0 8px; }
.highlight-note { display: flex; gap: 8px; align-items: center; }
.highlight-note input { flex: 1; min-width: 0; font-size: 12.5px; }
.highlight-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.highlights .section-heading { display: flex; align-items: center; gap: 9px; }
.highlights .section-heading .small-action { margin-left: auto; }

/* Meeting bots (§2.1). */
.bot-panel { margin-top: 18px; }
.booking-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.booking { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); }
.booking-platform { flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.booking-body { flex: 1; min-width: 0; }
.booking-body strong { display: block; font-size: 13.5px; font-weight: 540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-body small { font-size: 11.5px; color: var(--muted); }
.booking-recording { border-color: var(--danger); }
.booking-recording .booking-platform { color: var(--danger); border-color: var(--danger); }
.booking-failed .booking-body small, .booking-denied .booking-body small { color: var(--danger); }
.booking-done .booking-platform { color: var(--accent); border-color: var(--accent); }

/* Connected calendars (§2.4). */
.calendar-card { padding: 15px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 10px; }
.calendar-head { display: flex; align-items: center; gap: 11px; }
.calendar-head .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--raised); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.calendar-head .ic svg.lucide { width: 16px; height: 16px; }
.calendar-head strong { font-size: 14px; font-weight: 560; }
.calendar-head small { display: block; font-size: 11.5px; color: var(--muted); }
.calendar-head .chip { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.calendar-head .chip.gate { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.calendar-error { font-size: 12.5px; color: var(--danger); margin: 10px 0 0; }
.calendar-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.calendar-form .field { flex: 1 1 200px; margin: 0; }
.calendar-form .button-row { flex-basis: 100%; }
.calendar-connect { margin-top: 12px; }

.note-line { font-size: 13px; color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 9px; padding: 10px 13px; }
.upcoming-heading { margin: 22px 0 4px; font-size: 14px; }
.upcoming-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.upcoming { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.upcoming-when { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.upcoming-body { flex: 1; min-width: 0; }
.upcoming-body strong { display: block; font-size: 13.5px; font-weight: 540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-body small { font-size: 11.5px; color: var(--muted); }
.upcoming.is-skipped { opacity: .6; }
.upcoming.is-skipped .upcoming-body strong { text-decoration: line-through; }

.contact-source { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.contact-source svg.lucide { width: 11px; height: 11px; }

.auth-panel h1 { font-size: 22px; margin-bottom: 6px; }
.auth-panel .stack { margin-top: 16px; }
.auth-panel .note-line { margin: 14px 0; }
.auth-panel .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-panel .label-row .tiny { color: var(--muted); }
.auth-panel .label-row .tiny:hover { color: var(--accent); }

.share-sent { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.share-sent h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.share-sent-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; }
.share-sent-row small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.share-sent-row.failed span { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Coaching (§3.8) — the metrics table on the meeting page. It sits outside
   `.prose`, so it cannot inherit the table rules above. */
.coaching-metrics { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.coaching-metrics th {
  text-align: left; padding: 8px 10px; font-weight: 560; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.coaching-metrics td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); }
.coaching-metrics tr td:first-child { color: var(--text); font-weight: 560; }
.coaching-metrics tr:last-child td { border-bottom: 0; }

/* The bar is decoration on top of the number that follows it, which is why it
   is aria-hidden: a screen reader should hear "65%", not a graphic. */
.share-bar {
  display: inline-block; width: 54px; height: 6px; margin-right: 8px; vertical-align: middle;
  background: var(--line); border-radius: 99px; overflow: hidden;
}
.share-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.coaching .notice-line { margin: 12px 0; }
.coaching #coachingReport { margin-top: 16px; }


/* The public sample meeting: one column, unlike the meeting page, which has a
   sidebar this page has nothing to put in. */
.sample-layout { max-width: 860px; margin: 0 auto; animation: fade .32s var(--ease); }
.sample-layout .result-header { flex-wrap: wrap; gap: 16px; }
.sample-layout .eyebrow-note {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 6px;
}
.sample-layout .segment-time {
  font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.sample-layout .mini-section { margin-top: 26px; }

/* First run: three ways in, because the failure mode is signing up with no
   recording to hand - which is most people. */
.first-run-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.first-run-door {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel); color: var(--text-soft); text-decoration: none;
  transition: .14s var(--ease);
}
.first-run-door:hover { border-color: var(--accent); background: var(--panel-2); }
.first-run-door svg.lucide { width: 19px; height: 19px; color: var(--accent); }
.first-run-door strong { color: var(--text); font-size: 14.5px; }
.first-run-door span { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Plan & billing -------------------------------------------------------- */
.plan-now { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-now-name { font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.plan-now-price { margin-left: 10px; font-size: 16px; font-weight: 560; color: var(--text-soft); }
.plan-now-price small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.plan-now p { margin: 6px 0 0; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 4px 0 14px; }
.plan-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.plan-card.is-current { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(155deg, var(--accent-soft), var(--panel)); }
.plan-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-card h3 { font-size: 15px; }
.plan-card p { margin: 0; }
.plan-price { font-size: 21px; font-weight: 680; letter-spacing: -.02em; white-space: nowrap; }
.plan-price small { font-size: 12px; font-weight: 400; color: var(--muted); }

.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan-features li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.plan-features svg.lucide { width: 15px; height: 15px; flex: none; color: var(--accent); }
.plan-off { color: var(--muted); }
.plan-off svg.lucide { color: var(--muted); }

.plan-current-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 560; color: var(--accent); }
.plan-current-label svg.lucide { width: 15px; height: 15px; }

.coaching-upsell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background: linear-gradient(155deg, var(--accent-soft), var(--panel));
}
.coaching-upsell h3 { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.coaching-upsell h3 svg.lucide { width: 18px; height: 18px; color: var(--accent); }
.coaching-upsell p { margin: 0; max-width: 62ch; font-size: 13.5px; color: var(--text-soft); }

/* Workspace members and invitations ------------------------------------- */
.member-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.member {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-soft);
}
.member-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member-main strong { font-size: 14px; }
.member-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.member.is-inactive .member-main { opacity: .6; }

/* Structured coaching observations --------------------------------------- */
.obs-list { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.obs {
  padding: 16px 18px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
}
.obs-strength { border-left-color: var(--ok); }
.obs-improvement { border-left-color: var(--accent); }
.obs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.obs-head h3 { font-size: 15px; flex: 1; min-width: 0; }
.obs-mark { display: inline-flex; }
.obs-mark svg.lucide { width: 16px; height: 16px; }
.obs-strength .obs-mark { color: var(--ok); }
.obs-improvement .obs-mark { color: var(--accent); }
.obs-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.obs p { margin: 0 0 10px; font-size: 14px; color: var(--text-soft); }
.obs-quote {
  margin: 0 0 10px; padding: 9px 13px; border-left: 2px solid var(--line);
  background: var(--bg-2); border-radius: 0 9px 9px 0;
}
.obs-quote span { font-size: 14px; }
.obs-quote cite { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); font-style: normal; }
.obs-measure { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.obs-measure svg.lucide { width: 14px; height: 14px; }
.obs-do { font-weight: 540; }
.obs-try { font-style: italic; color: var(--muted); }

.obs-feedback { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--line-soft); }
.obs-vote {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 540;
  color: var(--text-soft); background: var(--raised); border: 1px solid var(--line-soft);
  transition: .15s var(--ease);
}
.obs-vote:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.obs-vote.is-chosen { color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.obs-focus { padding: 16px 18px; border-radius: 14px; margin: 4px 0 12px;
  background: linear-gradient(155deg, var(--accent-soft), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); }
.obs-focus h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.obs-focus h3 svg.lucide { width: 16px; height: 16px; color: var(--accent); }
.obs-focus ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-soft); }
.obs-focus li { margin-bottom: 4px; }

/* Coaching over time ----------------------------------------------------- */
.trend-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.trend-controls .field { margin: 0; min-width: 180px; }
.rec-strength td:first-child { color: var(--ok); }
.rec-dir { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--muted); }
.trend-points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trend-points li { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); }

.goal-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goal { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border-radius: 12px;
  background: linear-gradient(155deg, var(--accent-soft), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); }
.goal-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Privacy and terms ------------------------------------------------------ */
/* Two long documents nobody reads front to back. The layout is built for the
   way they are actually used: a standing table of contents on the left so a
   reader can jump straight to the clause they came for, and a measure narrow
   enough that the ones who do read it can. */
.legal-layout { max-width: 1080px; margin: 0 auto; padding: 4px 22px 44px;
  display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 30px; align-items: start;
  animation: fade .32s var(--ease); }
.legal-toc { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 2px; }
.legal-toc-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 700; margin: 0 0 8px 11px; }
.legal-toc a { padding: 6px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text-soft);
  text-decoration: none; border-left: 2px solid transparent; transition: background .16s var(--ease), color .16s var(--ease); }
.legal-toc a:hover { background: var(--bg-2); color: var(--text); border-left-color: var(--accent); }

.legal-doc { max-width: 74ch; padding: 30px 34px 34px; }
.legal-head { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: 27px; margin: 8px 0 10px; }
.legal-meta { color: var(--muted); font-size: 13px; font-family: var(--mono); margin: 0; }
.legal-lede { font-size: 15.5px; color: var(--text); padding: 15px 17px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.legal-doc section { scroll-margin-top: 22px; padding-top: 26px; }
.legal-doc section + section { border-top: 1px solid var(--line-soft); }
.legal-doc section:first-of-type { padding-top: 0; }
.legal-doc td, .legal-doc th { vertical-align: top; font-size: 14px; }
.legal-note { color: var(--muted); font-size: 13px; display: inline-block; margin-top: 5px; }
.legal-where-cell { color: var(--text-soft); }
.legal-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; }

/* An unset company detail. Loud on purpose - see legal.py. */
.legal-gap { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; margin-bottom: 22px;
  border-radius: 12px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  color: var(--text); font-size: 14px; }
.legal-gap svg.lucide { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 1px; }
.legal-blank { font-family: var(--mono); font-size: .92em; color: var(--warn);
  background: var(--warn-soft); padding: 1px 6px; border-radius: 6px; }

.legal-flag { display: block; width: fit-content; white-space: nowrap;
  margin: 6px 0 0; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
  color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); }

.legal-sub { padding: 14px 16px; border-radius: 12px; margin-bottom: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft); }
.legal-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.legal-sub-head strong { color: var(--text); font-size: 15px; }
.legal-where { font-family: var(--mono); font-size: 12px; color: var(--accent-2); }
.legal-sub p { margin: 6px 0 0; font-size: 13.5px; }
.legal-sub-purpose { color: var(--text-soft); }
.legal-sub-data span { color: var(--muted); text-transform: uppercase; font-size: 10.5px;
  letter-spacing: 0.1em; font-weight: 700; margin-right: 7px; }
.legal-sub-when { display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13px; }
.legal-sub-when svg.lucide { width: 15px; height: 15px; flex: none; }

.legal-never { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.legal-never li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(155deg, var(--ok-soft), var(--panel));
  border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--line)); }
.legal-never li::marker { content: none; }
.legal-never svg.lucide { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.legal-never div { display: flex; flex-direction: column; gap: 4px; }
.legal-never span { color: var(--text-soft); font-size: 13.5px; }

/* The two links themselves, in each shell. */
.legal-links { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 0 2px;
  font-size: 12px; color: var(--muted); }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.guest-foot { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 26px 20px 34px; color: var(--muted); font-size: 13px; }
.guest-foot a { color: var(--muted); text-decoration: none; }
.guest-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 4px 16px 36px; }
  /* The sticky rail becomes a scrolling strip rather than a wall of links
     between the reader and the document they came for. */
  .legal-toc { position: static; flex-direction: row; overflow-x: auto; gap: 6px;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .legal-toc-title { display: none; }
  .legal-toc a { white-space: nowrap; border: 1px solid var(--line-soft); border-left-width: 1px;
    background: var(--bg-2); font-size: 13px; }
  .legal-doc { padding: 22px; }
}

@media (max-width: 600px) {
  /* A three-column table of rights does not fit a phone, and letting it push
     the body sideways makes the whole document scroll away from the reader.
     Each table becomes its own scroll container instead. */
  .legal-doc table { display: block; width: 100%; overflow-x: auto; }
  .legal-doc thead, .legal-doc tbody { display: table; width: 100%; min-width: 460px; }
  .legal-doc { padding: 18px 16px; }
}
.consent-line { margin: -4px 0 0; text-align: center; }
.consent-line a { color: var(--accent-2); }

/* Export and account closure ---------------------------------------------- */
.settings-data .export-form { gap: 14px; margin-top: 6px; }
.export-copy { display: flex; flex-direction: column; gap: 4px; }
/* The switch label carries a second line here, so it stops being one line. */
.export-form .switch-label { display: flex; flex-direction: column; gap: 2px; font-weight: 540; }
.export-form .switch-label small { font-weight: 400; }

.blocker-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blocker-list li { display: flex; gap: 11px; padding: 13px 15px; border-radius: 12px;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); }
.blocker-list svg.lucide { width: 17px; height: 17px; color: var(--warn); flex: none; margin-top: 2px; }
.blocker-list div { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.blocker-list span { color: var(--text-soft); }

.close-form { gap: 12px; margin-top: 14px; max-width: 380px; }
.close-form code { font-family: var(--mono); font-size: .92em; background: var(--bg-2);
  padding: 1px 6px; border-radius: 6px; }

/* The Noteret mark ------------------------------------------------------- */
/* `.brand-mark` supplies the tile and the colour; the glyph inherits both, so
   it is one SVG for the dark theme, the light theme, and the share page. Its
   viewBox is 28x19, wider than tall, so only the width is set. */
.brand-mark .brand-glyph { width: 22px; height: auto; display: block; }