:root {
  color-scheme: dark;
  --canvas: #090b0d;
  --surface: #101317;
  --surface-2: #15191e;
  --surface-3: #1b2026;
  --surface-raised: #1f252c;
  --line: #272d34;
  --line-strong: #626d78;
  --ink: #f4f6f8;
  --ink-2: #c6ccd3;
  --ink-3: #8d97a3;
  --ink-soft: #7b8692;
  --accent: #38c793;
  --accent-hover: #4ed7a5;
  --accent-soft: #143329;
  --accent-line: #2b8968;
  --accent-ink: #06150f;
  --blue: #74a2ff;
  --blue-soft: #15243e;
  --warn: #f0b45b;
  --danger: #ff7b78;
  --danger-soft: #361b1d;
  --focus: #86adff;
  --shadow: 0 28px 80px rgb(0 0 0 / 0.34);
  --shadow-soft: 0 12px 30px rgb(0 0 0 / 0.22);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --radius-sm: 5px;
  --radius: 8px;
  --fast: 140ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar: 264px;
  --sidebar-min: 62px;
  --rail-pad: 10px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f5f6;
  --surface: #ffffff;
  --surface-2: #f7f8f9;
  --surface-3: #eef0f2;
  --surface-raised: #ffffff;
  --line: #dfe3e7;
  --line-strong: #7f8a95;
  --ink: #161a1e;
  --ink-2: #3f4851;
  --ink-3: #66717c;
  --ink-soft: #68737d;
  --accent: #07845d;
  --accent-hover: #06724f;
  --accent-soft: #e2f5ee;
  --accent-line: #16815f;
  --accent-ink: #ffffff;
  --blue: #376dcc;
  --blue-soft: #e9f0ff;
  --warn: #9a610c;
  --danger: #bf3e3b;
  --danger-soft: #fdebea;
  --focus: #376dcc;
  --shadow: 0 24px 70px rgb(24 32 40 / 0.12);
  --shadow-soft: 0 10px 28px rgb(24 32 40 / 0.08);
}

:root[data-sidebar="collapsed"] {
  --sidebar: var(--sidebar-min);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p {
  margin: 0;
}

h1,
h2 {
  color: var(--ink);
  font-size: 25px;
  font-weight: 680;
  line-height: 1.2;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Present to a screen reader, absent to everyone else. `clip-path` rather than
   `display: none`, which would take the element out of the accessibility tree
   and defeat the point. Width and height stay at 1px because a zero-sized
   element is skipped by some screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden until focused, which is the whole design: the first Tab on any screen
   offers a way past the sidebar's eight controls, and nothing else ever sees
   it. Parked off-screen rather than `display: none`, which would take it out of
   the tab order and leave nothing to focus.

   Verified by pressing Tab, in `test_a11y_ui.py` scenario 4, and it is worth
   saying why that test is written the way it is: Chrome keeps a sequential
   focus navigation starting point, so a test that blurs and presses Tab reads
   whatever follows the *previous* focus and reports a working skip link as
   unreachable. It reloads first. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Authentication */

.auth-screen {
  min-height: 100dvh;
  padding: 24px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 50%, transparent), transparent 52%),
    var(--canvas);
  overflow-y: auto;
}

.auth-panel {
  width: min(430px, 100%);
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.auth-brand strong,
.auth-brand small {
  display: block;
}

.auth-brand strong {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}

.auth-brand small {
  color: var(--ink-3);
  font-size: 11px;
}

.auth-copy {
  margin-top: 30px;
}

.auth-copy > p:last-child {
  margin-top: 9px;
  color: var(--ink-3);
  font-size: 13px;
}

.auth-switch {
  height: 40px;
  margin-top: 24px;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.auth-switch button {
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.auth-switch button.active {
  color: var(--ink);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.auth-form {
  margin-top: 22px;
}

.auth-form .form-block + .form-block {
  margin-top: 16px;
}

.auth-submit {
  width: 100%;
  margin-top: 22px;
}

.auth-divider {
  height: 1px;
  margin: 22px 0;
  display: grid;
  place-items: center;
  background: var(--line);
}

.auth-divider span {
  padding: 0 10px;
  color: var(--ink-soft);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.google-btn {
  width: 100%;
  background: var(--surface);
}

.google-btn.disabled {
  opacity: 0.74;
}

.google-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

.auth-note {
  min-height: 18px;
  margin-top: 16px;
  text-align: center;
}

/* App shell */

.app {
  height: 100dvh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sidebar */

.sidebar {
  width: var(--sidebar);
  flex: none;
  display: flex;
  flex-direction: column;
  z-index: 40;
  background: var(--surface);
  border-right: 1px solid var(--line);
  transition: width var(--fast) var(--ease);
}

.sidebar-top {
  min-height: 64px;
  padding: 12px var(--rail-pad);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  min-width: 0;
  flex: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}

.brand-mark svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-text {
  min-width: 0;
  display: grid;
}

.brand-name {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}

.brand-product {
  color: var(--ink-3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-scrollarea {
  flex: 1;
  min-height: 0;
  padding: 4px var(--rail-pad) 12px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.sidebar-block + .sidebar-block {
  margin-top: 20px;
}

.side-label {
  margin: 0 0 6px 8px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.side-action {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.side-action + .side-action {
  margin-top: 6px;
}

.side-action .icon {
  color: var(--accent);
}

.side-action:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.side-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.step-nav {
  display: grid;
  gap: 2px;
}

.step-link {
  width: 100%;
  min-height: 54px;
  padding: 8px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 8px;
  gap: 10px;
  align-items: center;
  color: var(--ink-3);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.step-link:hover:not(:disabled) {
  color: var(--ink-2);
  background: var(--surface-2);
}

.step-link.active {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
}

.step-link:disabled {
  cursor: default;
  opacity: 0.48;
}

.step-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.step-link.active .step-number {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.step-link strong,
.step-link small {
  display: block;
}

.step-link strong {
  font-size: 13px;
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-link small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card {
  padding: 10px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.session-live i {
  width: 8px;
  height: 8px;
  display: block;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}

.session-copy {
  min-width: 0;
}

.session-copy strong,
.session-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-copy strong {
  color: var(--ink);
  font-size: 13px;
}

.session-copy small {
  color: var(--ink-3);
  font-size: 11px;
}

.session-timer {
  grid-column: 2;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rail-status {
  padding: 8px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.rail-status .status-dot {
  margin-top: 5px;
}

.rail-status strong,
.rail-status small {
  display: block;
}

.rail-status strong {
  color: var(--ink-2);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.rail-status small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* Account footer */

.sidebar-foot {
  position: relative;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.account {
  width: 100%;
  min-height: 48px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.account:hover,
.account[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--line);
}

.avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.avatar-lg {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.account-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.account-copy strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-tag {
  padding: 1px 6px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-tag.free {
  color: var(--ink-3);
  background: var(--surface-3);
  border-color: var(--line);
}

.account-caret {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
}

.account-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 10px;
  right: 10px;
  padding: 8px;
  z-index: 60;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: menu-in 140ms var(--ease);
}

.menu-head {
  padding: 8px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.menu-identity {
  min-width: 0;
}

.menu-identity strong,
.menu-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-identity strong {
  font-size: 13px;
  font-weight: 680;
}

.menu-identity small {
  margin-top: 1px;
  color: var(--ink-3);
  font-size: 12px;
}

.menu-plan {
  margin-top: 4px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.menu-plan-copy {
  min-width: 0;
}

.menu-plan-copy strong,
.menu-plan-copy small {
  display: block;
}

.menu-plan-copy strong {
  font-size: 12px;
  font-weight: 680;
}

.menu-plan-copy small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
}

.plan-badge {
  padding: 3px 8px;
  flex: none;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-badge.free {
  color: var(--ink-2);
  background: var(--surface-3);
}

.menu-upgrade {
  width: 100%;
  min-height: 36px;
  margin-top: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.menu-upgrade:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.menu-sep {
  height: 1px;
  margin: 8px 2px;
  background: var(--line);
}

.menu-item {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}

.menu-item .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}

.menu-item:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.menu-item.danger:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.menu-item.danger:hover .icon {
  color: var(--danger);
}

.menu-hint {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 11px;
}

/* Collapsed sidebar (desktop only - below 900px the sidebar is a drawer) */

@media (min-width: 901px) {
  :root[data-sidebar="collapsed"] .sidebar-top {
    padding-inline: 0;
    justify-content: center;
  }

  :root[data-sidebar="collapsed"] .brand {
    flex: none;
  }

  :root[data-sidebar="collapsed"] .brand-text,
  :root[data-sidebar="collapsed"] .side-label,
  :root[data-sidebar="collapsed"] .side-action span,
  :root[data-sidebar="collapsed"] .step-link strong,
  :root[data-sidebar="collapsed"] .step-link small,
  :root[data-sidebar="collapsed"] .step-link > i,
  :root[data-sidebar="collapsed"] .session-copy,
  :root[data-sidebar="collapsed"] .session-timer,
  :root[data-sidebar="collapsed"] .rail-status > span:last-child,
  :root[data-sidebar="collapsed"] .account-copy,
  :root[data-sidebar="collapsed"] .account-caret {
    display: none;
  }

  :root[data-sidebar="collapsed"] .sidebar:not(:hover) .sidebar-toggle {
    display: none;
  }

  :root[data-sidebar="collapsed"] .sidebar:hover .brand-mark {
    display: none;
  }

  :root[data-sidebar="collapsed"] .sidebar-scrollarea {
    padding-inline: 8px;
    overflow: visible;
  }

  :root[data-sidebar="collapsed"] .side-action,
  :root[data-sidebar="collapsed"] .step-link,
  :root[data-sidebar="collapsed"] .rail-status,
  :root[data-sidebar="collapsed"] .session-card,
  :root[data-sidebar="collapsed"] .account {
    min-height: 40px;
    padding: 8px 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  :root[data-sidebar="collapsed"] .rail-status .status-dot {
    width: 9px;
    height: 9px;
    margin: 0;
  }

  :root[data-sidebar="collapsed"] .account-menu {
    left: calc(100% - 2px);
    right: auto;
    bottom: 8px;
    width: 268px;
  }

  :root[data-sidebar="collapsed"] [data-tip] {
    position: relative;
  }

  :root[data-sidebar="collapsed"] [aria-expanded="true"][data-tip]:hover::after {
    content: none;
  }

  :root[data-sidebar="collapsed"] [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    z-index: 70;
    padding: 5px 9px;
    color: var(--ink);
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

.sidebar-scrim {
  display: none;
}

/* Top bar */

.topbar {
  min-height: 64px;
  padding: 10px 20px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 20;
  background: rgb(16 19 23 / 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

:root[data-theme="light"] .topbar {
  background: rgb(255 255 255 / 0.9);
}

.topbar-title {
  min-width: 0;
  margin-right: auto;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .nav-open {
  display: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.model-pill {
  max-width: 220px;
  color: var(--ink-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-state {
  min-height: 30px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.app-state i,
.status-dot,
.signal,
.step-link > i {
  width: 7px;
  height: 7px;
  display: block;
  flex: none;
  background: var(--ink-soft);
  border-radius: 50%;
}

.app-state.ok i,
.app-state.live i,
.status-dot.ok,
.signal.ok,
.step-link > i.ok {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.app-state.error,
.note.error {
  color: var(--danger);
}

.note.warn {
  color: var(--warn);
}

[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}

.app-state.error i,
.status-dot.error,
.signal.error,
.step-link > i.error {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

/* Not a failure - the session can still start. Used for the last interview on
   a plan, where amber says "act soon" without blocking. */
.signal.warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent);
}

.app-state.busy i {
  background: var(--warn);
  animation: pulse 1s ease-in-out infinite;
}

.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
}

[data-theme="dark"] .theme-sun,
[data-theme="light"] .theme-moon {
  display: none;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buttons and fields */

.btn {
  min-height: 38px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: var(--ink-soft);
}

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

.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

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

.btn-secondary {
  background: transparent;
}

.btn-lg {
  min-height: 44px;
  padding: 10px 17px;
}

.text-btn {
  padding: 3px 0;
  color: var(--blue);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.text-btn:hover {
  text-decoration: underline;
}

input,
textarea,
.select {
  width: 100%;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

input,
textarea {
  padding: 11px 12px;
}

input {
  min-height: 44px;
}

textarea {
  line-height: 1.55;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-soft);
}

input:hover,
textarea:hover,
.select:hover {
  border-color: var(--ink-soft);
}

input:focus,
textarea:focus,
.select:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}

.select {
  appearance: none;
  min-height: 40px;
  padding: 8px 34px 8px 11px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
  cursor: pointer;
}

.select-wide {
  width: 100%;
}

.compact-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
}

.compact-field .select {
  width: 120px;
}

.switch {
  min-height: 36px;
  padding: 4px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
}

.switch-track {
  width: 34px;
  height: 20px;
  padding: 2px;
  display: block;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.switch-thumb {
  width: 14px;
  height: 14px;
  display: block;
  background: var(--ink-3);
  border-radius: 50%;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}

.switch[aria-checked="true"] {
  color: var(--ink-2);
}

.switch[aria-checked="true"] .switch-track {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.switch[aria-checked="true"] .switch-thumb {
  background: var(--accent);
  transform: translateX(14px);
}

/* Setup */

.setup {
  flex: 1;
  min-height: 0;
  padding: 40px 24px 72px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.setup-shell {
  width: min(780px, 100%);
  margin: 0 auto;
}

.eyebrow {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-step {
  min-width: 0;
  padding: 34px 38px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: step-in 220ms var(--ease);
}

.page-head {
  margin-bottom: 30px;
  padding-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.page-head > div > p:last-child {
  max-width: 58ch;
  margin-top: 9px;
  color: var(--ink-3);
  font-size: 13px;
}

.privacy-note {
  min-height: 30px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 11px;
  white-space: nowrap;
}

.privacy-note .icon {
  width: 14px;
  height: 14px;
}

.form-block + .form-block,
.paste-fallback + .form-block,
.field-grid + .form-block {
  margin-top: 22px;
}

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.field-grid > .form-block + .form-block {
  margin-top: 0;
}

.field-label-row {
  min-height: 22px;
  margin-bottom: 7px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field-label-row label {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 680;
}

.field-label-row span {
  color: var(--ink-soft);
  font-size: 11px;
}

.field-help {
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 12px;
}

.upload-zone {
  min-height: 128px;
  padding: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.upload-zone:hover,
.upload-zone.dragging {
  background: var(--surface-3);
  border-color: var(--accent);
}

.upload-zone.has-file {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  border-style: solid;
}

.upload-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.upload-copy {
  min-width: 0;
}

.upload-copy strong,
.upload-copy small {
  display: block;
}

.upload-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-copy small {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.file-actions {
  min-height: 20px;
  margin-top: 5px;
  text-align: right;
}

.default-profile-strip,
.profile-default-status {
  min-height: 54px;
  margin-bottom: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}

.profile-default-status {
  margin-bottom: 22px;
  grid-template-columns: 30px minmax(0, 1fr);
}

.profile-default-status.is-empty {
  background: var(--surface-2);
  border-color: var(--line);
}

.profile-default-status.is-processing {
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
}

.profile-default-status.is-error {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}

.profile-default-status.is-empty .default-profile-icon {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-3));
}

.profile-default-status.is-processing .default-profile-icon {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-3));
}

.profile-default-status.is-error .default-profile-icon {
  color: var(--danger);
  background: var(--danger-soft);
}

.default-profile-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.default-profile-icon .icon {
  width: 16px;
  height: 16px;
}

.default-profile-copy {
  min-width: 0;
}

.default-profile-copy strong,
.default-profile-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.default-profile-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 680;
}

.default-profile-copy small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
}

.compact-upload {
  min-height: 102px;
  padding: 16px;
}

.check-row {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.check-row input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.setup-facts-warning,
.inline-confirm {
  margin-top: 16px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: var(--radius);
}

.setup-facts-warning span,
.setup-facts-warning strong,
.setup-facts-warning small,
.inline-confirm > span:first-child,
.inline-confirm strong,
.inline-confirm small {
  display: block;
  min-width: 0;
}

.setup-facts-warning strong,
.inline-confirm strong {
  color: var(--ink);
  font-size: 13px;
}

.setup-facts-warning small,
.inline-confirm small {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}

.inline-confirm {
  margin: 16px 24px;
  background: var(--surface-2);
}

#setup-default-confirm {
  margin-right: 0;
  margin-left: 0;
}

.inline-confirm-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.paste-fallback {
  margin: 4px 0 0;
}

.paste-fallback summary {
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.paste-fallback[open] {
  margin-top: 16px;
}

.paste-fallback textarea {
  margin-top: 10px;
}

.step-footer {
  margin-top: 30px;
  padding-top: 22px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.step-footer.split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.step-footer .note {
  margin-right: auto;
}

.note {
  color: var(--ink-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.note.ok {
  color: var(--accent);
}

.note.busy {
  color: var(--warn);
}

.session-summary {
  min-height: 76px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.session-summary span,
.session-summary strong,
.session-summary small {
  display: block;
}

.session-summary span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.session-summary strong {
  margin-top: 3px;
  font-size: 15px;
}

.session-summary small {
  color: var(--ink-3);
  font-size: 12px;
}

.capture-guide {
  margin-top: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  color: var(--ink-2);
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
}

.guide-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--blue);
}

.capture-guide strong {
  color: var(--ink);
}

.capture-guide p {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.capture-guide b {
  color: var(--ink-2);
}

.readiness-list {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.readiness-list > div {
  min-height: 65px;
  padding: 13px 4px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.readiness-list strong,
.readiness-list small {
  display: block;
}

.readiness-list strong {
  color: var(--ink-2);
  font-size: 13px;
}

.readiness-list small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Profile page */

.profile-page {
  flex: 1;
  min-height: 0;
  padding: 30px 24px 72px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.profile-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.profile-hero {
  min-height: 138px;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.profile-identity-block {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.avatar-xl {
  width: 62px;
  height: 62px;
  font-size: 18px;
}

.profile-identity-copy {
  min-width: 0;
  display: grid;
}

.profile-identity-copy h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity-copy small {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 13px;
}

.profile-plan {
  flex: none;
}

.profile-layout {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.profile-side {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 6px;
}

.profile-side-item {
  min-height: 58px;
  padding: 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--ink-3);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.profile-side-item.active {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.profile-side-item:disabled {
  cursor: default;
  opacity: 0.55;
}

.profile-side-item .icon {
  color: var(--ink-3);
}

.profile-side-item.active .icon {
  color: var(--accent);
}

.profile-side-item strong,
.profile-side-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-side-item strong {
  font-size: 13px;
}

.profile-side-item small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
}

.profile-panel {
  min-width: 0;
  overflow: visible;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.profile-panel-head {
  min-height: 88px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.profile-panel-head h2 {
  font-size: 21px;
}

.profile-state-pill {
  min-height: 28px;
  padding: 5px 9px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-state-pill.missing {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
}

.profile-state-pill.processing {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
}

.profile-state-pill.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}

.profile-panel > .profile-default-status {
  margin: 20px 24px 0;
}

.profile-summary-grid {
  margin: 16px 24px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.profile-summary-grid > div {
  min-width: 0;
  padding: 13px 14px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}

.profile-summary-grid > div:last-child {
  border-right: 0;
}

.profile-summary-grid span,
.profile-summary-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-summary-grid span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.profile-summary-grid strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
}

.profile-editor-grid {
  padding: 22px 24px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 22px;
  align-items: start;
}

.profile-editor-main {
  min-width: 0;
}

.profile-editor-aside {
  min-width: 0;
}

.profile-info-box {
  padding: 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.profile-info-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: var(--radius-sm);
}

.profile-info-box strong,
.profile-info-box small {
  display: block;
}

.profile-facts {
  margin: 0 24px 24px;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.profile-facts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.profile-facts-head h3 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
}

.profile-facts-head > div > p:last-child {
  max-width: 68ch;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

.profile-facts-source {
  margin-top: 16px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.profile-facts-source > span,
.profile-facts-source strong,
.profile-facts-source small {
  display: block;
}

.profile-facts-source strong {
  color: var(--ink-2);
  font-size: 12px;
}

.profile-facts-source small {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 11px;
}

.profile-facts-suppress-note {
  margin-top: 12px;
  padding-left: 10px;
  color: var(--ink-3);
  border-left: 2px solid var(--accent-line);
  font-size: 12px;
  line-height: 1.5;
}

.profile-facts-groups {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.profile-facts-groups[aria-busy="true"] {
  opacity: 0.72;
}

.profile-fact-group {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.profile-fact-group > header {
  margin-bottom: 10px;
}

.profile-fact-group h4 {
  color: var(--ink);
  font-size: 13px;
}

.profile-fact-group header p {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.45;
}

.profile-fact-list,
.profile-fact-highlights {
  display: grid;
  gap: 8px;
}

.profile-fact-role {
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.profile-fact-highlights {
  margin: 6px 0 0 18px;
}

.profile-fact-item {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.profile-fact-role > .profile-fact-item,
.profile-fact-item.is-compact {
  background: transparent;
  border: 0;
}

.profile-fact-item.is-compact {
  padding: 6px 8px;
}

.profile-fact-item-value {
  min-width: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.is-suppressed .profile-fact-item-value {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.profile-fact-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.profile-fact-item-actions .text-btn {
  font-size: 11px;
}

.profile-fact-inline-editor,
.profile-fact-role-editor {
  grid-column: 1 / -1;
  width: 100%;
  padding-top: 10px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.profile-fact-role-editor {
  margin-top: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-fact-inline-editor label,
.profile-fact-role-editor label,
.profile-fact-inline-editor label > span,
.profile-fact-role-editor label > span {
  display: block;
}

.profile-fact-inline-editor label > span,
.profile-fact-role-editor label > span {
  margin-bottom: 5px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
}

.profile-fact-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.profile-fact-role-editor .profile-fact-edit-actions {
  grid-column: 1 / -1;
}

.profile-fact-empty,
.profile-fact-none,
.profile-facts-empty {
  color: var(--ink-3);
  font-size: 12px;
}

.profile-facts-empty {
  margin-top: 16px;
  padding: 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.profile-facts-actions {
  min-height: 38px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-facts-actions .note {
  margin-left: auto;
  text-align: right;
}

#profile-facts-reset-confirm {
  margin-right: 0;
  margin-left: 0;
}

.profile-info-box strong {
  color: var(--ink);
  font-size: 13px;
}

.profile-info-box small {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.profile-actions {
  min-height: 76px;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-top: 1px solid var(--line);
}

.profile-actions .note {
  text-align: right;
}

/* Subscription page */

.subscription-page {
  flex: 1;
  min-height: 0;
  padding: 30px 24px 72px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.subscription-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.subscription-head {
  min-height: 132px;
  padding: 8px 0 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.subscription-head h1 {
  margin-top: 5px;
}

.subscription-head p:last-child {
  max-width: 58ch;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.subscription-current {
  min-width: 188px;
  padding: 13px 15px;
  display: grid;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.subscription-current span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.subscription-current strong {
  color: var(--accent);
  font-size: 20px;
}

.subscription-current small {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
}

.subscription-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.subscription-card {
  min-width: 0;
  min-height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.subscription-card.featured {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 48%),
    var(--surface);
  border-color: var(--accent-line);
}

.subscription-card.current {
  border-color: var(--blue);
}

.subscription-addon {
  margin-top: 14px;
}

.addon-card {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 28px;
  align-items: center;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warn) 9%, transparent), transparent 42%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.addon-main {
  min-width: 0;
}

.addon-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.addon-heading > div {
  min-width: 0;
}

.addon-heading p {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 12px;
}

.addon-heading .subscription-label-row {
  justify-content: flex-start;
}

.addon-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  border-radius: var(--radius-sm);
}

.subscription-features.addon-features {
  flex: none;
  margin: 14px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 9px 22px;
}

.addon-buy {
  width: 210px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.addon-buy .subscription-price {
  margin-top: 0;
}

.addon-buy .btn {
  width: 100%;
  margin-top: 14px;
  white-space: normal;
}

.subscription-card-top {
  min-height: 88px;
}

.subscription-label-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subscription-label-row h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.subscription-card-top p {
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 12px;
}

.subscription-badge {
  padding: 3px 7px;
  flex: none;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}

.subscription-badge.neutral {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}

.subscription-price {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.subscription-price strong {
  font-size: 32px;
  font-weight: 760;
  line-height: 1;
}

.subscription-price span {
  color: var(--ink-3);
  font-size: 13px;
}

.subscription-usage {
  margin-top: 8px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 680;
}

.subscription-features {
  flex: 1;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  /* The list still absorbs the card's spare height so buttons stay aligned,
     but the rows must not stretch into it. Without this a 6-item Free list
     spreads to the same ink height as an 8-item Pro list, and the cheaper
     plan stops looking cheaper. */
  align-content: start;
  gap: 10px;
  list-style: none;
}

.subscription-features li {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
}

.subscription-features li span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.subscription-features .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--accent);
}

.subscription-card .btn {
  width: 100%;
  min-width: 0;
  margin-top: 18px;
  white-space: normal;
}

.subscription-footer {
  min-height: 68px;
  margin-top: 22px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.subscription-footer .note {
  text-align: right;
}

@media (max-width: 1180px) {
  .subscription-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* History page */

.history-page {
  flex: 1;
  min-height: 0;
  padding: 30px 24px 72px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.history-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.history-head {
  min-height: 116px;
  padding: 8px 0 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.history-head h1 {
  margin-top: 5px;
}

.history-head p:last-child {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.history-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.history-totals > div {
  min-width: 0;
  padding: 11px 16px;
  border-right: 1px solid var(--line);
}

.history-totals > div:last-child {
  border-right: 0;
}

.history-totals span {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}

.history-totals strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
}

.history-totals > div:last-child strong {
  color: var(--accent);
}

.history-list {
  margin-top: 20px;
  display: grid;
  gap: 22px;
}

.history-group {
  min-width: 0;
}

.history-group-head {
  padding: 0 2px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.history-group-head h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.history-group-head span {
  flex: none;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history-group-rows {
  display: grid;
  gap: 8px;
}

.history-row {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main controls"
    "notes notes";
  gap: 14px 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.history-main {
  grid-area: main;
  min-width: 0;
}

.history-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.history-title-row h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 660;
}

/* Outcome at a glance. Awaiting stays grey on purpose: an unanswered interview
   is not a result, and colouring it would read as one. */
.history-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--ink-soft);
  border-radius: 50%;
}

.history-row[data-outcome="advanced"] .history-dot {
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.history-row[data-outcome="offer"] .history-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.history-row[data-outcome="rejected"] .history-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.history-row[data-outcome="no_response"] .history-dot {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent);
}

.history-meta {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.history-controls {
  grid-area: controls;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.history-controls-label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history-outcome {
  width: 182px;
}

/* Notes toggle on the left, row actions on the right, reading as one line. The
   notes body expands inside the first column so the actions stay put. */
.history-foot {
  grid-area: notes;
  padding-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
  border-top: 1px solid var(--line);
}

.history-notes {
  min-width: 0;
}

.history-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.history-row-actions .text-btn.danger {
  color: var(--danger);
}

.history-confirm {
  color: var(--ink-2);
  font-size: 12px;
}

.history-notes > summary {
  width: fit-content;
  color: var(--blue);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

.history-notes > summary::-webkit-details-marker {
  display: none;
}

.history-notes > summary::before {
  content: "+ ";
}

.history-notes[open] > summary::before {
  content: "- ";
}

.history-notes > summary:hover {
  text-decoration: underline;
}

.history-notes-body {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.history-field {
  display: grid;
  gap: 6px;
}

.history-field > span {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history-notes-actions {
  display: flex;
  justify-content: flex-end;
}

.history-empty {
  min-height: 260px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.history-empty-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.history-empty p {
  font-size: 14px;
}

.history-empty .dim {
  max-width: 52ch;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12px;
}

.history-empty .btn {
  margin-top: 18px;
}

.history-footer {
  min-height: 52px;
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .history-head {
    flex-direction: column;
    align-items: stretch;
  }

  .history-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .history-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "controls"
      "notes";
  }

  .history-outcome {
    width: 100%;
  }

  .history-controls {
    justify-items: stretch;
  }

  .history-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-row-actions {
    justify-content: flex-start;
  }
}

/* Transcript page */

.transcript-page {
  flex: 1;
  min-height: 0;
  padding: 30px 24px 72px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.transcript-shell {
  width: min(880px, 100%);
  margin: 0 auto;
}

.transcript-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.transcript-back .icon {
  width: 15px;
  height: 15px;
}

.transcript-head {
  padding: 14px 0 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.transcript-head h1 {
  margin-top: 4px;
  font-size: 23px;
}

.transcript-head p:last-child {
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 13px;
}

.transcript-outcome {
  flex: none;
  padding: 5px 11px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}

.transcript-outcome[data-outcome="advanced"] {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}

.transcript-outcome[data-outcome="offer"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.transcript-outcome[data-outcome="rejected"] {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
}

.transcript-outcome[data-outcome="no_response"] {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
}

.transcript-summary {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.transcript-summary > div {
  min-width: 0;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}

.transcript-summary > div:last-child {
  border-right: 0;
}

.transcript-summary span {
  display: block;
  overflow: hidden;
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.transcript-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 19px;
}

.transcript-panel {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.transcript-panel-head {
  min-height: 72px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.transcript-panel-head h2 {
  font-size: 16px;
}

.transcript-panel-head p {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.transcript-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.transcript-actions .btn {
  min-height: 34px;
  padding: 6px 11px;
}

.danger-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
}

.danger-btn:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* A contained, scrollable box rather than a page that grows without end: a
   90-minute interview is a lot of words, and the actions above it should stay
   reachable while reading. */
.transcript-body {
  max-height: min(62vh, 720px);
  padding: 18px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.transcript-body .turn:last-child {
  margin-bottom: 0;
}

.transcript-answers {
  padding: 18px;
  border-top: 1px solid var(--line);
}

.transcript-answers-head h2 {
  font-size: 16px;
}

.transcript-answers-head p {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

#transcript-answers {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.transcript-answer {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.transcript-answer-question {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.transcript-answer-meta {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.transcript-answer-body {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.58;
}

.transcript-answer-body p + p {
  margin-top: 8px;
}

.transcript-notice {
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink-2);
  text-align: center;
}

.transcript-notice-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.transcript-notice p {
  font-size: 14px;
}

.transcript-notice .dim {
  max-width: 52ch;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12px;
}

.transcript-notice .btn {
  margin-top: 18px;
}

.transcript-foot {
  min-height: 40px;
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* Post-interview review.
   Shares the transcript page's shell, head, and notice card - it is the same
   object seen a second way, and a second visual language for it would just be
   two pages to keep in sync. Only the document itself is new. */

.review-body {
  padding: 22px;
}

.review-doc {
  max-width: 68ch;
}

/* The one line the user reads if they read nothing else. */
.review-headline {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.review-section {
  margin-top: 22px;
}

.review-section h3 {
  margin-bottom: 10px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.review-list li {
  margin-bottom: 7px;
}

.review-list li::marker {
  color: var(--ink-soft);
}

.review-theme {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.review-theme:last-child {
  margin-bottom: 0;
}

.review-theme-topic {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.review-theme p:not(.review-theme-topic) {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.review-theme-label {
  margin-right: 7px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.review-footnote {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}

/* The only motion on the page, and it reports one thing: a job is running.
   Reduced motion drops it to a static ring via the global rule. */
.transcript-notice-icon.is-working svg {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .review-body {
    padding: 18px 16px;
  }
}

@media (max-width: 700px) {
  .transcript-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .transcript-outcome {
    width: fit-content;
  }

  .transcript-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transcript-summary > div:nth-child(2n) {
    border-right: 0;
  }

  .transcript-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .transcript-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .transcript-body .turn {
    max-width: 100%;
  }
}

/* Live capture */

/* main.live, not .live: setState() also puts a "live" class on the status pill. */
main.live {
  flex: 1;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(320px, 0.84fr) minmax(440px, 1.16fr);
  gap: 14px;
  overflow: hidden;
}

.live-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.answers-panel {
  border-top-color: var(--accent-line);
}

.pane-head {
  min-height: 68px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.pane-head h2 {
  font-size: 17px;
}

.timer {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.timer.is-warning {
  color: var(--warn);
}

.timer.is-error {
  color: var(--danger);
}

.scroll {
  flex: 1;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

/* These carry tabindex="0" so a keyboard can scroll them at all - Chrome and
   Safari will not focus an overflow container on their own. Drawn inside
   rather than outside because the default 2px offset would be clipped by the
   panel this scroller fills edge to edge. */
.scroll:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.empty {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  text-align: center;
}

.empty p {
  font-size: 14px;
}

.empty .dim {
  max-width: 45ch;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12px;
}

.listening-bars {
  height: 32px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}

.listening-bars i {
  width: 3px;
  height: 12px;
  background: currentColor;
  border-radius: 2px;
  animation: listen 1.2s ease-in-out infinite;
}

.listening-bars i:nth-child(2) { height: 25px; animation-delay: -0.45s; }
.listening-bars i:nth-child(3) { height: 18px; animation-delay: -0.75s; }
.listening-bars i:nth-child(4) { height: 8px; animation-delay: -0.25s; }

.answer-placeholder {
  width: 110px;
  margin-bottom: 18px;
  display: grid;
  gap: 7px;
}

.answer-placeholder i {
  height: 5px;
  background: var(--surface-3);
  border-radius: 2px;
}

.answer-placeholder i:nth-child(2) { width: 84%; }
.answer-placeholder i:nth-child(3) { width: 63%; }

.turn {
  max-width: 62ch;
  margin-bottom: 14px;
}

.turn.you {
  margin-left: auto;
}

.turn-who {
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.turn.recruiter .turn-who {
  color: var(--accent);
}

.turn-text {
  padding: 10px 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.turn.recruiter .turn-text {
  color: var(--ink);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.turn.interim .turn-text {
  color: var(--ink-3);
  border-style: dashed;
}

.pending {
  min-height: 44px;
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.pending-label {
  flex: none;
  color: var(--accent);
  font-weight: 700;
}

.pending-text {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending small {
  flex-basis: 100%;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.4;
}

.answer {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: step-in 200ms var(--ease);
}

.answer-head {
  padding: 10px 13px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}

.answer-q {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer-tag {
  flex: none;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.answer-tag.predicting { color: var(--warn); }
.answer-tag.manual { color: var(--blue); }

.answer-body {
  max-width: 70ch;
  padding: 16px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

.answer-body p + p {
  margin-top: 0.8em;
}

.answer.writing .answer-body::after {
  content: "";
  width: 2px;
  height: 1em;
  margin-left: 2px;
  display: inline-block;
  vertical-align: -0.14em;
  background: var(--accent);
  animation: blink 1s steps(2, start) infinite;
}

/* Toast */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 90;
  padding: 9px 14px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 600;
  transform: translateX(-50%);
  animation: menu-in 160ms var(--ease);
}

/* -- operator console ----------------------------------------------------- */

/* Deliberately plainer than the rest of the app. This is a page for reading
   numbers off, not a product surface: dense rows, tabular figures so columns
   of money line up, and no card chrome competing with the data. */

.admin-page {
  flex: 1;
  min-height: 0;
  padding: 30px 24px 72px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.admin-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.admin-head {
  min-height: 116px;
  padding: 8px 0 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.admin-head h1 {
  margin-top: 5px;
}

.admin-head p:last-child {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.admin-alerts {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.admin-alert {
  padding: 10px 14px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
}

.admin-alert.over {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* Two rows use this: provider spend (three cards) and the funnel summary
   (four). auto-fit rather than a fixed column count so both lay out evenly and
   reflow on a narrow window instead of leaving one card stranded on its own
   row. */
.admin-spend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.admin-spend-card {
  min-width: 0;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-spend-card span {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-spend-card strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.admin-spend-card small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
}

/* A provider past its ceiling. The card is the one place an operator finds out
   why new interviews stopped, so it does not blend in with the ones that are
   merely informational. */
.admin-spend-card.bad {
  border-color: var(--danger, #d64545);
}

.admin-spend-card.bad strong {
  color: var(--danger, #d64545);
}

.admin-block {
  margin-top: 32px;
}

.admin-block-head h2 {
  font-size: 15px;
}

.admin-block-head p {
  max-width: 68ch;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.admin-block-head code {
  padding: 1px 5px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11px;
}

/* Tables are the one thing on this page allowed to be wider than the shell.
   Scrolling a table sideways beats wrapping an account's row across three
   lines, which is what makes a cost column impossible to scan. */
.admin-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-table th {
  padding: 9px 14px;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 750;
  text-align: left;
  text-transform: uppercase;
}

.admin-table td {
  padding: 9px 14px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table td:first-child {
  color: var(--ink);
  font-weight: 600;
}

/* A negative margin is the single number on this page worth interrupting for:
   it means the account costs more than it pays. */
.admin-table td.bad {
  color: var(--danger);
  font-weight: 700;
}

.admin-table td.muted {
  color: var(--ink-soft);
}

.admin-empty {
  padding: 18px 14px;
  color: var(--ink-3);
  text-align: center;
}

.admin-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-caveat {
  max-width: 70ch;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 12px;
}

@media (max-width: 760px) {
  .admin-spend {
    grid-template-columns: 1fr;
  }

  .admin-head {
    flex-direction: column;
    align-items: start;
  }
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(5px); }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(4px); }
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

@keyframes listen {
  50% { transform: scaleY(0.45); opacity: 0.5; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 272px;
    z-index: 80;
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform 200ms var(--ease);
  }

  :root[data-nav="open"] .sidebar {
    transform: none;
  }

  :root[data-nav="open"] .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;
    background: rgb(0 0 0 / 0.5);
  }

  .topbar .nav-open {
    display: grid;
  }

  .setup {
    padding-top: 28px;
  }

  .profile-page {
    padding-top: 28px;
  }

  .subscription-page {
    padding-top: 28px;
  }

  .subscription-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .subscription-current {
    width: 100%;
  }

  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-editor-grid {
    grid-template-columns: 1fr;
  }

  main.live {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 42vh) minmax(360px, 1fr);
  }

  .topbar {
    flex-wrap: wrap;
  }

  .toolbar {
    order: 3;
    width: 100%;
  }
}

@media (max-width: 620px) {
  h1 { font-size: 21px; }
  h2 { font-size: 21px; }

  .topbar {
    min-height: 58px;
    padding: 9px 12px;
    gap: 10px;
  }

  .topbar-title,
  .model-pill {
    display: none;
  }

  .app-state {
    max-width: 116px;
  }

  .app-state span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .setup {
    padding: 22px 12px 40px;
  }

  .setup-step {
    padding: 24px 18px 20px;
  }

  .profile-page {
    padding: 22px 12px 40px;
  }

  .subscription-page {
    padding: 22px 12px 40px;
  }

  .subscription-head {
    min-height: 0;
    gap: 18px;
  }

  .subscription-grid {
    grid-template-columns: 1fr;
  }

  .subscription-card {
    padding: 16px;
  }

  .addon-card {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .addon-buy {
    width: 100%;
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .subscription-footer {
    display: flex;
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .subscription-footer .btn {
    width: 100%;
  }

  .subscription-footer .note {
    min-height: 18px;
    text-align: center;
  }

  .profile-hero {
    min-height: 0;
    padding: 22px 18px;
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-identity-block {
    width: 100%;
  }

  .avatar-xl {
    width: 50px;
    height: 50px;
    font-size: 15px;
  }

  .profile-side {
    grid-template-columns: 1fr;
  }

  .profile-panel-head {
    min-height: 0;
    padding: 18px;
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-panel > .profile-default-status,
  .profile-summary-grid {
    margin-right: 18px;
    margin-left: 18px;
  }

  .profile-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-summary-grid > div:nth-child(2) {
    border-right: 0;
  }

  .profile-summary-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .profile-editor-grid {
    padding: 20px 18px;
  }

  .profile-facts {
    margin-right: 18px;
    margin-left: 18px;
    padding: 16px;
  }

  .profile-facts-head,
  .profile-facts-actions,
  .setup-facts-warning,
  .inline-confirm {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-fact-item {
    grid-template-columns: 1fr;
  }

  .profile-fact-item-actions {
    justify-content: flex-start;
  }

  .profile-fact-role-editor {
    grid-template-columns: 1fr;
  }

  .profile-fact-role-editor .profile-fact-edit-actions {
    grid-column: 1;
  }

  .profile-facts-actions .note {
    margin-left: 0;
    text-align: left;
  }

  .inline-confirm-actions {
    width: 100%;
  }

  .inline-confirm-actions .btn {
    flex: 1;
  }

  .profile-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column-reverse;
    padding: 16px 18px;
  }

  .profile-actions .btn {
    width: 100%;
  }

  .profile-actions .note {
    min-height: 18px;
    text-align: center;
  }

  .page-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }

  .privacy-note {
    display: none;
  }

  .field-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .upload-zone {
    min-height: 168px;
    padding: 18px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .compact-upload {
    min-height: 150px;
  }

  .upload-zone .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .default-profile-strip {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .default-profile-strip .text-btn {
    grid-column: 2;
    justify-self: start;
  }

  .step-footer,
  .step-footer.split {
    display: flex;
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .step-footer .btn-lg,
  .step-footer .btn-secondary {
    width: 100%;
  }

  .step-footer .note {
    min-height: 18px;
    margin: 0;
    text-align: center;
  }

  .capture-guide {
    grid-template-columns: 1fr;
  }

  .guide-icon {
    width: auto;
    justify-content: start;
  }

  main.live {
    padding: 8px;
    gap: 8px;
  }

  .compact-field > span,
  .switch > span:last-child {
    display: none;
  }

  .compact-field .select {
    width: 104px;
  }

  .toolbar {
    gap: 7px;
    overflow-x: auto;
  }

  .toolbar .btn {
    flex: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Account security: verification banner, security panel, device list */

.field-label-row .text-btn {
  padding: 0;
  font-size: 11px;
  font-weight: 650;
}

.auth-back {
  width: 100%;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-back .icon {
  width: 15px;
  height: 15px;
}

.verify-banner {
  padding: 10px 20px;
  flex: none;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line));
}

.verify-banner.is-blocking {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--danger) 42%, var(--line));
}

.verify-banner-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-3));
  border-radius: var(--radius-sm);
}

.verify-banner.is-blocking .verify-banner-icon {
  color: var(--danger);
  background: var(--danger-soft);
}

.verify-banner-copy {
  min-width: 0;
}

.verify-banner-copy strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.verify-banner-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-row {
  margin: 18px 24px 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.security-row.is-warn {
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
}

.security-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

.security-row.is-warn .security-icon {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface-3));
}

.security-copy {
  min-width: 0;
}

.security-copy strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-copy small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
}

.profile-state-pill.is-warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
}

.security-devices-head {
  margin: 26px 24px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.security-devices-head h3 {
  color: var(--ink);
  font-size: 15px;
}

.security-devices-head p {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
}

.security-devices {
  margin: 12px 24px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.device-row {
  min-height: 62px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.device-row:last-child {
  border-bottom: 0;
}

.device-row.is-current {
  background: var(--surface-2);
}

.device-copy {
  min-width: 0;
}

.device-copy strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.device-copy small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-badge {
  padding: 4px 8px;
  flex: none;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

#profile-security-panel .profile-actions {
  margin-top: 22px;
  grid-template-columns: minmax(0, 1fr);
}

#profile-security-panel .profile-actions .note {
  text-align: left;
}

@media (max-width: 900px) {
  .verify-banner {
    padding: 10px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .verify-banner-icon {
    display: none;
  }

  .verify-banner-copy small {
    white-space: normal;
  }

  .verify-banner .btn {
    grid-column: 1 / -1;
  }

  .security-row {
    margin: 14px 16px 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .security-icon {
    display: none;
  }

  .security-devices-head,
  .security-devices {
    margin-inline: 16px;
  }

  .security-devices-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Legal pages: terms.html and privacy.html */

.legal-body {
  padding: 0;
  background: var(--canvas);
  overflow-y: auto;
}

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}

.legal-back:hover {
  text-decoration: underline;
}

.legal-back .icon {
  width: 15px;
  height: 15px;
}

.legal-draft {
  padding: 13px 16px;
  margin-bottom: 30px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line));
  border-radius: var(--radius);
  font-size: 13px;
}

/* A value only a lawyer or a company registration can supply. Marked so it is
   impossible to publish this by accident and equally impossible to miss. */
.fill {
  padding: 0 4px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-bottom: 1px dashed currentColor;
  font-style: italic;
}

.legal-head {
  padding-bottom: 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.legal-head h1 {
  margin: 6px 0 8px;
  font-size: 31px;
}

.legal-head p:last-child {
  color: var(--ink-3);
  font-size: 13px;
}

.legal section {
  margin-top: 32px;
}

.legal h2 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 19px;
}

.legal h3 {
  margin: 20px 0 6px;
  color: var(--ink);
  font-size: 15px;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 12px;
}

.legal ul {
  padding-left: 20px;
  list-style: disc;
}

.legal li + li {
  margin-top: 7px;
}

.legal a {
  color: var(--blue);
}

.legal code {
  padding: 1px 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
}

.legal-callout {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-callout h2 {
  margin-top: 0;
  font-size: 16px;
}

.legal-note {
  padding: 13px 16px;
  background: var(--surface-2);
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
}

.legal-table {
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: collapse;
  overflow: hidden;
  font-size: 14px;
}

.legal-table th,
.legal-table td {
  padding: 10px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.legal-table th {
  color: var(--ink);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-foot {
  margin-top: 44px;
  padding-top: 20px;
  display: flex;
  gap: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* Recording consent, on the last setup step */

.consent-block {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.consent-block.is-accepted {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.consent-head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 680;
}

.consent-head .icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ink-3);
}

.consent-block.is-accepted .consent-head .icon {
  color: var(--accent);
}

.consent-points {
  margin: 10px 0 0;
  padding-left: 26px;
  list-style: disc;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.consent-points li + li {
  margin-top: 5px;
}

.consent-accept {
  margin-top: 14px;
  padding-top: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.consent-accept input {
  margin-top: 2px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.consent-links {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  font-size: 12px;
}

.consent-links a {
  color: var(--ink-3);
}

.consent-links a:hover {
  color: var(--blue);
}

/* Delete account */

.security-danger {
  margin: 26px 24px 0;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
  border-radius: var(--radius);
}

.security-danger h3 {
  color: var(--ink);
  font-size: 15px;
}

.security-danger p {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

/* The anti-abuse marker notice. Separated from the paragraph above it because
   it is a second, different disclosure — what survives deletion, rather than
   what deletion removes — and reading them as one paragraph blurs that. */
.delete-claim-note {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}

/* Goes / stays, side by side. Two columns rather than one list, because the
   distinction between them is the entire point of the screen and a reader
   scanning a single list will not carry the heading down it. Collapses to one
   column on a narrow viewport, where side-by-side would be two words wide. */
.delete-breakdown {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.delete-breakdown h4 {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.delete-breakdown ul {
  margin-top: 6px;
  padding-left: 16px;
  list-style: disc;
}

.delete-breakdown li {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

.delete-breakdown li + li {
  margin-top: 5px;
}

.security-danger .btn {
  margin-top: 13px;
}

.delete-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
}

.delete-form .form-block + .form-block {
  margin-top: 12px;
}

.delete-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-actions .note {
  margin-left: auto;
  text-align: right;
}

.btn.btn-danger {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}

.btn.btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 84%, #000);
}

@media (max-width: 900px) {
  .legal {
    padding: 28px 16px 64px;
  }

  .legal-table {
    display: block;
    overflow-x: auto;
  }

  .security-danger {
    margin-inline: 16px;
  }

  .delete-actions {
    flex-wrap: wrap;
  }

  .delete-actions .note {
    margin-left: 0;
    text-align: left;
  }
}

.auth-legal {
  margin-top: 14px;
  color: var(--ink-soft);
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
}

.auth-legal a {
  color: var(--ink-3);
}

.auth-legal a:hover {
  color: var(--blue);
}

.menu-legal {
  padding: 8px 12px 2px;
  display: flex;
  gap: 14px;
  font-size: 11px;
}

.menu-legal a {
  color: var(--ink-soft);
}

.menu-legal a:hover {
  color: var(--blue);
}