/* Verbatim design system — deliberately NOT Talyxion's fintech palette.
   Warm, reading-focused: this is a listening/typing product, not a trading
   terminal. See ~/.claude/plans/ui-t-qu-b-n-proud-knuth.md for the design
   rationale (Literata + Source Sans 3, terracotta accent, no sidebar). */

:root {
  --color-bg: #1c1815;
  --color-surface: #241f1b;
  --color-surface-raised: #2c2621;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-text: #f2ece4;
  --color-text-soft: #cbbfb2;
  --color-text-muted: #93867a;
  --color-accent: #e2694a;
  --color-accent-text: #1c1815;
  --color-success: #7fb069;
  --color-warning: #e0a458;
  --color-danger: #d9614f;
  --color-info: #6ea3c9;

  --font-heading: "Literata", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-1: 0.375rem;
  --radius-2: 0.625rem;
  --radius-3: 1rem;

  --focus-ring: 0 0 0 3px rgba(226, 105, 74, 0.45);

  /* Compatibility shim: dictation/static/dictation/css/{exercise,pages}.css
     was written against Talyxion's design-tokens.css token names. Rather
     than rewrite every rule in those two files (carried over verbatim from
     Talyxion, ~700 lines), map their token names onto Verbatim's own
     values here — same trick those files already use for their own
     --dp-* alias block, one level up. */
  --color-bg-canvas: var(--color-bg);
  --color-bg-muted: var(--color-surface);
  --color-bg-raised: var(--color-surface-raised);
  --color-bg-surface: var(--color-surface);
  --color-primary: var(--color-accent);
  --color-primary-strong: #c8543a;
  --color-primary-text: var(--color-accent-text);
  --color-text-base: var(--color-text);
  --color-text-faint: rgba(242, 236, 228, 0.5);
  --motion-fast: 150ms ease;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --surface-border: var(--color-border);
  --surface-border-strong: rgba(255, 255, 255, 0.18);
  --surface-card: var(--color-surface);
  --surface-card-strong: var(--color-surface-raised);

  color-scheme: dark;
}

/* Light theme — the same warm terracotta product in daylight, not a second
   design system: paper-cream grounds instead of the dark browns, and a
   deeper terracotta (#b0472a) so the accent still clears 4.5:1 against
   them. Every token redefined here already exists in :root above; nothing
   new is introduced, so component rules never need a light-mode branch.
   Set by templates/_theme_boot.html before first paint. */
:root[data-theme="light"] {
  --color-bg: #f7f1e8;
  --color-surface: #fdf9f3;
  --color-surface-raised: #efe5d7;
  --color-border: rgba(44, 34, 26, 0.14);
  --color-text: #2a231d;
  --color-text-soft: #56493f;
  --color-text-muted: #7b6c5e;
  --color-accent: #b0472a;
  --color-accent-text: #fdf9f3;
  --color-success: #4a7534;
  --color-warning: #96631a;
  --color-danger: #a83c2a;
  --color-info: #2b5f80;

  --focus-ring: 0 0 0 3px rgba(176, 71, 42, 0.35);

  --color-primary-strong: #93381f;
  --color-text-faint: rgba(42, 35, 29, 0.5);
  --shadow-1: 0 1px 3px rgba(44, 34, 26, 0.12);
  --surface-border-strong: rgba(44, 34, 26, 0.26);

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-accent);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-1);
}

.vb-shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.vb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.vb-wordmark {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.vb-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.vb-lang-switch {
  display: flex;
  gap: var(--space-2);
}

.vb-lang-switch a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1);
}

.vb-lang-switch a.vb-active {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

.vb-streak {
  font-size: 0.875rem;
  color: var(--color-text-soft);
}

.vb-btn-link {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.vb-main {
  padding: var(--space-8) 0;
  min-height: calc(100vh - 200px);
}

.vb-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Account/auth pages — django-allauth layout + element overrides live in */
/* templates/allauth/. Scoped under .vb-auth-page so raw Django form.as_p */
/* output (allauth's "fields" element bypasses per-field styling for a    */
/* couple of forms) still picks up input/label styling via the tag       */
/* selectors below, without leaking into dictation's own input styling.  */
/* ---------------------------------------------------------------------- */

.vb-auth-page {
  max-width: 28rem;
  margin: 0 auto;
}

.vb-auth-page p {
  color: var(--color-text-soft);
}

.vb-account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.vb-account-nav a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 0.85rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.vb-account-nav a:hover {
  color: var(--color-text);
  border-color: var(--surface-border-strong);
}

.vb-messages {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vb-alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.vb-alert--success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.vb-alert--warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.vb-alert--danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.vb-alert--info {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-info) 35%, transparent);
}

.vb-auth-page form {
  margin: 0 0 var(--space-5);
}

.vb-auth-page p:has(label) {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
}

.vb-auth-page p:has(input[type="checkbox"]),
.vb-auth-page p:has(input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.vb-auth-page label {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.vb-auth-page p:has(input[type="checkbox"]) label,
.vb-auth-page p:has(input[type="radio"]) label {
  font-size: 1rem;
  color: var(--color-text);
}

.vb-auth-page input[type="text"],
.vb-auth-page input[type="email"],
.vb-auth-page input[type="password"],
.vb-auth-page textarea {
  font: inherit;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.vb-auth-page input:focus-visible,
.vb-auth-page textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-accent);
}

.vb-field-help {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.vb-field-errors,
.vb-auth-page .errorlist {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--color-danger);
  font-size: 0.85rem;
}

.vb-btn {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.vb-btn:hover {
  background: var(--color-surface-raised);
  border-color: var(--surface-border-strong);
}

.vb-btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: transparent;
}

.vb-btn--primary:hover {
  background: var(--color-primary-strong);
}

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

.vb-btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.vb-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent);
  padding-left: 0;
  padding-right: 0;
}

.vb-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.vb-btn-group--vertical {
  flex-direction: column;
  align-items: stretch;
}

.vb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-left: var(--space-2);
  background: var(--color-surface-raised);
  color: var(--color-text-soft);
}

.vb-badge--success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.vb-badge--warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.vb-badge--accent {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.vb-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  margin: 0 0 var(--space-5);
}

.vb-panel h2 {
  font-size: 1.05rem;
  margin: 0 0 var(--space-3);
}

.vb-hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.vb-provider-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vb-provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.vb-provider-btn:hover {
  background: var(--color-surface-raised);
  border-color: var(--surface-border-strong);
}

/* ---------------------------------------------------------------------- */
/* Top-nav controls — theme toggle + the two <details> dropdowns          */
/* (in-progress, account) in templates/base.html. <details> because the   */
/* open/close state needs no JS at all; the only script involved is the   */
/* theme boot in templates/_theme_boot.html.                              */
/* ---------------------------------------------------------------------- */

.vb-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}

.vb-theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--surface-border-strong);
}

.vb-theme-toggle__moon {
  display: none;
}

:root[data-theme="light"] .vb-theme-toggle__sun {
  display: none;
}

:root[data-theme="light"] .vb-theme-toggle__moon {
  display: block;
}

.vb-menu {
  position: relative;
}

.vb-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  border-radius: var(--radius-1);
}

.vb-menu__trigger::-webkit-details-marker {
  display: none;
}

.vb-menu__trigger--text {
  padding: var(--space-1) var(--space-2);
}

.vb-menu__trigger:hover {
  color: var(--color-text);
}

.vb-menu[open] > .vb-menu__trigger--text {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

.vb-menu__count {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0 0.35rem;
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
}

.vb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  object-fit: cover;
}

.vb-avatar--initial {
  background: var(--color-surface-raised);
  color: var(--color-text-soft);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.vb-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
}

.vb-menu__panel--wide {
  min-width: 18rem;
  max-width: 22rem;
}

.vb-menu__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.vb-menu__name {
  font-size: 0.9rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.vb-menu__header .vb-badge {
  margin-left: 0;
}

.vb-menu__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-1);
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.vb-menu__item:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.vb-menu__item--accent {
  color: var(--color-accent);
}

.vb-menu__item-title {
  display: block;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.vb-menu__item-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.vb-menu__empty {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (max-width: 32rem) {
  .vb-topbar {
    flex-wrap: wrap;
  }

  .vb-menu__panel--wide {
    min-width: 0;
    width: calc(100vw - var(--space-5) * 2);
  }
}

/* ---------------------------------------------------------------------- */
/* Premium checkout page                                                   */
/* ---------------------------------------------------------------------- */

.vb-premium-code-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-1);
}

.vb-premium-code {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}