/* =========================================================================
   VIRASAT — NARRATOR WEB APP STYLES
   Consumes ../design-system/tokens.css directly. Every color, font-size,
   spacing, radius, shadow, and motion value below is a CSS custom property
   from that file — no hand-picked one-off values, per STYLE_GUIDE.md
   Section 5 ("Don'ts"). Do not introduce a second button, menu, or icon
   anywhere on first load — that is a Design conversation, not a routine
   implementation decision.
   ========================================================================= */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-narrator);
  color: var(--color-text-primary);
  /* Narrator-specific warm background. A soft two-point gradient instead of
     a flat fill — same palette, same "warm home, not software" intent, but
     with enough depth that the screen doesn't read as a bare color swatch.
     Still entirely within the token set, no new colors introduced. */
  background:
    radial-gradient(1200px 800px at 50% -10%, var(--color-warm-accent-tint-bg) 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 100%, var(--color-primary-tint-bg) 0%, transparent 55%),
    var(--color-narrator-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.screen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

/* =========================================================================
   LOGIN SCREEN (OTP)
   Large touch targets, one action per screen, no password ever.
   ========================================================================= */

.login-step {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: var(--space-3);
  /* A real card, not text floating on the background — gives the screen
     structure/depth instead of reading as a bare HTML form. */
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

@media (max-width: 480px) {
  .login-step {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }
}

.login-eyebrow {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-warm-accent-dark);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.login-heading {
  font-size: var(--font-size-narrator-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.login-subtext {
  font-size: var(--font-size-narrator-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5) 0;
  line-height: var(--line-height-relaxed);
}

.login-label {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-text-secondary);
  text-align: left;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.phone-input-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.phone-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  font-size: var(--font-size-narrator-body);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-muted);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

.login-input {
  flex: 1;
  min-height: var(--touch-target-narrator-min);
  font-size: var(--font-size-narrator-body);
  font-family: var(--font-family-base);
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-muted);
  color: var(--color-text-primary);
  width: 100%;
  margin-bottom: var(--space-4);
  box-shadow: inset 0 1px 3px rgba(var(--shadow-color), 0.06);
  transition: border-color var(--duration-fast) var(--easing-standard),
              background-color var(--duration-fast) var(--easing-standard);
}

.phone-input-row .login-input {
  margin-bottom: 0;
}

.login-input-otp {
  text-align: center;
  letter-spacing: 0.5em;
  font-weight: var(--font-weight-semibold);
}

.login-input:focus {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-focus-ring);
  background-color: var(--color-bg-surface);
}

.login-error {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-feedback-error);
  background-color: var(--color-feedback-error-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: 0 0 var(--space-4) 0;
  text-align: left;
}

.login-button {
  min-height: var(--touch-target-narrator-min);
  font-size: var(--font-size-narrator-body);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-base);
  color: var(--color-text-on-primary);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              transform var(--duration-fast) var(--easing-standard);
}

.login-button:hover {
  background-color: var(--color-primary-dark);
}

.login-button:active {
  transform: scale(0.98);
}

.login-button:disabled {
  background-color: var(--color-primary-light);
  cursor: not-allowed;
}

.login-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.login-link-button {
  min-height: var(--touch-target-narrator-min);
  margin-top: var(--space-3);
  background: none;
  border: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  color: var(--color-warm-accent-dark);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: underline;
}

.login-link-button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  text-decoration: none;
}

/* =========================================================================
   MAIN NARRATOR SCREEN — CHAT THREAD (REDESIGNED 16 Aug 2026)
   Replaces the old single-giant-button/one-reply-at-a-time screen, per
   Sam: "The UX design plans were not good at all... users are well versed
   with whatsapp, chatbots so we dont have to dumb it down so much... Full
   Material Design 3." A familiar scrolling message thread (MD3 elevation/
   shape/color roles throughout — see tokens.css Section 0), a persistent
   compose bar with both typing and voice. talk.js's file header has the
   full rationale and wire-protocol notes.
   ========================================================================= */

#screen-main.screen--chat {
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--md-sys-color-surface-container-lowest);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--md-sys-elevation-2-shadow);
  flex-shrink: 0;
  z-index: var(--z-sticky-nav);
}

.chat-header-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.history-toggle,
.language-toggle {
  flex-shrink: 0;
  position: static;
  width: var(--touch-target-comfortable);
  height: var(--touch-target-comfortable);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background-color: var(--md-sys-color-surface-container-high);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.language-toggle {
  width: auto;
  min-width: var(--touch-target-comfortable);
  padding: 0 var(--space-4);
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-medium);
}

.history-toggle:hover,
.language-toggle:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--color-primary);
}

.history-toggle:focus-visible,
.language-toggle:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Calm, explicit technical-failure recovery message. Never silent. Now a
   normal in-flow banner between the header and the thread — the chat
   screen is a real flex column top-to-bottom (not centered), so this can
   never overlap anything the way it once overlapped the old giant button. */
.mic-error-banner {
  flex-shrink: 0;
  margin: var(--space-4) auto 0;
  width: calc(100% - var(--space-8));
  max-width: 480px;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-narrator-caption);
  color: var(--color-status-gentle-note);
  background-color: var(--color-status-gentle-note-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--md-sys-elevation-2-shadow);
  text-align: center;
}

/* --- The scrolling message thread — every turn this session stays
   visible and stacks up, like a real chat. --- */
.chat-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  scroll-behavior: smooth;
}

.chat-empty-state {
  margin: auto auto;
  max-width: 420px;
  padding: 0 var(--space-4);
  text-align: center;
  font-size: var(--font-size-narrator-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.message-row {
  display: flex;
  width: 100%;
}

.message-row--narrator { justify-content: flex-end; }
.message-row--virasat { justify-content: flex-start; }
.message-row--system { justify-content: center; }

/* SYSTEM NOTE (16 Aug 2026, per Sam: "the error... is very prominent,
   interrupting the chatbot messages") — a quiet, in-thread failure note
   (e.g. "connection dropped, tap to try again"), styled to sit alongside
   the conversation rather than as a loud standalone banner above it. Small,
   centered, muted — matches how real chat apps (WhatsApp's "message not
   delivered") surface this, and scrolls with the thread instead of pinning
   above it. See appendSystemNote in talk.js. */
.system-note {
  max-width: 85%;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-narrator-caption);
  line-height: var(--line-height-relaxed);
  color: var(--color-status-gentle-note);
  background-color: var(--color-status-gentle-note-bg);
  border-radius: var(--radius-full);
  text-align: center;
}

.message-bubble-col {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.message-sender-label {
  margin: 0 0 var(--space-1) var(--space-3);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warm-accent-dark);
}

.message-bubble {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-narrator-body);
  line-height: var(--line-height-relaxed);
  border-radius: var(--radius-lg);
  box-shadow: var(--md-sys-elevation-1-shadow);
  overflow-wrap: break-word;
}

/* Narrator's own bubble — right-aligned, primary-filled, per the standard
   chat convention Sam pointed to (WhatsApp/chatbots) — no label needed,
   alignment + color already say "this is you," matching how WhatsApp
   itself never labels your own outgoing bubbles. */
.message-bubble--narrator {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-bottom-right-radius: var(--radius-sm);
}

/* Virasat's bubble — left-aligned, surface-colored, MD3 elevation-1. Kept
   a small label above it (unlike the Narrator's own bubble) since it's
   the one thing worth naming explicitly for a first-time user. */
.message-bubble--virasat {
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

/* Still-listening/not-yet-finalized caption — same treatment regardless
   of which bubble it's attached to. */
.message-bubble.is-interim {
  opacity: 0.72;
  font-style: italic;
}

/* --- Compose bar — persistent at the bottom. One text input (typing)
   plus one MD3 FAB-scale button that context-switches between mic
   (idle), stop (actively listening), and send (paper plane, once there's
   typed text) — see talk.html/talk.js. --- */
.compose-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--md-sys-color-surface-container-lowest);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--md-sys-elevation-2-shadow);
  flex-shrink: 0;
}

.compose-input {
  flex: 1;
  min-height: var(--touch-target-comfortable);
  font-size: var(--font-size-narrator-caption);
  font-family: var(--font-family-base);
  padding: 0 var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-muted);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--easing-standard),
              background-color var(--duration-fast) var(--easing-standard);
}

.compose-input:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  background-color: var(--color-bg-surface);
}

.compose-input:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.compose-action-button {
  flex-shrink: 0;
  position: relative;
  width: var(--touch-target-narrator-compose);
  height: var(--touch-target-narrator-compose);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-primary);
  background-color: var(--color-primary);
  box-shadow: var(--md-sys-elevation-3-shadow);
  transition: background-color var(--duration-fast) var(--easing-standard),
              transform var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}

.compose-action-button:hover {
  box-shadow: var(--md-sys-elevation-4-shadow);
}

.compose-action-button:active {
  transform: scale(0.94);
}

.compose-action-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Listening: color shifts to marigold + a gentle pulse — same "color AND
   motion, never color alone" principle the old single button used. */
.compose-action-button.state-listening {
  background-color: var(--color-narrator-button-listening);
  animation: listening-pulse var(--duration-listening-pulse) var(--easing-gentle) infinite;
}

/* Disabled (16 Aug 2026 — see talk.js's refreshComposeActionButton doc
   comment): STATE.SPEAKING (waiting for Virasat's reply) reuses the mic
   icon so the layout doesn't jump, but is genuinely non-interactive —
   dimmed and a "not allowed" cursor so it doesn't visually promise a tap
   will do something, unlike before this fix. */
.compose-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: var(--md-sys-elevation-1-shadow);
}
.compose-action-button:disabled:hover,
.compose-action-button:disabled:active {
  box-shadow: var(--md-sys-elevation-1-shadow);
  transform: none;
}

/* Send (typed text ready): tertiary MD3 role, visually distinct from both
   mic states so "this will send text" vs "this will start/stop voice" is
   never ambiguous. */
.compose-action-button.state-send {
  background-color: var(--md-sys-color-tertiary);
}

.compose-action-icon {
  display: none;
}

.compose-action-button.state-mic .compose-icon-mic,
.compose-action-button.state-listening .compose-icon-stop,
.compose-action-button.state-send .compose-icon-send {
  display: flex;
}

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

@media (prefers-reduced-motion: reduce) {
  .compose-action-button.state-listening {
    animation: none !important;
  }
}

/* =========================================================================
   GOOGLE SIGN-IN BUTTON
   Google's own brand guidelines call for a light/white button with the
   full-color "G" mark and dark text — not filled with Virasat's brand
   color — since it's recognized as a system affordance, not a themed CTA.
   Kept to the same size/radius/touch-target rhythm as .login-button so it
   still feels native to this screen.
   ========================================================================= */
.login-button-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.login-button-google:hover {
  background-color: var(--color-bg-muted);
}

.login-button-google:active {
  transform: scale(0.98);
}

.google-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =========================================================================
   HISTORY TOGGLE (corner icon, opposite the language toggle)
   Same quiet-corner-control treatment as .language-toggle, but circular
   (icon-only) rather than a text pill.
   ========================================================================= */
.history-toggle {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.history-toggle:hover {
  background-color: var(--color-bg-muted);
  color: var(--color-primary);
}

.history-toggle:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* =========================================================================
   HISTORY SCREEN ("Purani Baatein" / old stories)
   A genuine reversal of "never show the Narrator a persistent transcript"
   (Sam, 16 Aug 2026) — built warm and audio-first, not a cold call-log
   table. Reuses the same card/gradient visual language as the login screen
   rather than introducing a new pattern.
   ========================================================================= */
.screen-history {
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--space-6) var(--space-5) var(--space-9);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.history-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.history-back-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
}

.history-back-button:hover {
  background-color: var(--color-bg-muted);
}

.history-back-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.history-heading {
  font-size: var(--font-size-narrator-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.history-subtext {
  font-size: var(--font-size-narrator-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-6) 0;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.history-card {
  /* Column now (was the flex row itself) — holds .history-card-row plus
     the optional .history-edit-form below it, added 16 Aug 2026 for
     editing. See .history-card-row for the row layout this used to have. */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.history-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.history-card-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}

.history-card-text {
  flex: 1;
  min-width: 0;
}

.history-card-title {
  font-size: var(--font-size-narrator-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.history-card-excerpt {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.history-card-audio-status {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-status-gentle-note);
  margin: var(--space-2) 0 0 0;
}

.history-play-button {
  flex-shrink: 0;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-primary);
  background: linear-gradient(160deg, var(--color-narrator-button-fill) 0%, var(--color-primary-dark) 100%);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.history-play-button:hover {
  box-shadow: var(--shadow-sm);
}

.history-play-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.history-empty,
.history-loading {
  font-size: var(--font-size-narrator-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  text-align: center;
  padding: var(--space-7) var(--space-5);
}

.history-error {
  font-size: var(--font-size-narrator-body);
  color: var(--color-feedback-error);
  background-color: var(--color-feedback-error-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

/* =========================================================================
   HISTORY — EDIT AFFORDANCE (16 Aug 2026)
   "Both narrator and sponsor could edit the output" — a plain, secondary
   action next to Play, not a prominent one; the inline form matches the
   card's own visual weight rather than opening a separate page/modal.
   ========================================================================= */

.history-edit-button {
  flex-shrink: 0;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.history-edit-button:hover {
  background-color: var(--color-bg-surface);
}

.history-edit-button:focus-visible,
.history-save-button:focus-visible,
.history-cancel-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.history-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.history-edit-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: left;
}

.history-edit-input,
.history-edit-textarea {
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  line-height: var(--line-height-relaxed);
}

.history-edit-input:focus-visible,
.history-edit-textarea:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.history-edit-textarea {
  resize: vertical;
}

.history-edit-status {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-status-warm);
  margin: 0;
}

.history-edit-status-error {
  color: var(--color-feedback-error);
}

.history-edit-actions {
  display: flex;
  gap: var(--space-3);
}

.history-save-button {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-primary);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.history-save-button:hover {
  background-color: var(--color-primary-dark);
}

.history-save-button:disabled {
  background-color: var(--color-primary-light);
  cursor: default;
}

.history-cancel-button {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-family-base);
  font-size: var(--font-size-narrator-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.history-cancel-button:hover {
  background-color: var(--color-bg-muted);
}

/* =========================================================================
   WELCOME PAGE (welcome.html) — THREE-STEP ONBOARDING (17 Aug 2026)
   Reuses .login-step/.login-eyebrow/.login-heading/.login-subtext/.login-button
   — same card/typography language as the sign-in page, deliberately, so
   the first screens a Narrator ever sees feel like one continuous moment
   rather than different apps. .welcome-question gets a touch more visual
   weight since it's the one line asking something of them. Redesigned from
   a single wall-of-text screen into three one-idea-per-screen steps (see
   welcome.html's header comment for the full rationale) — welcome.js swaps
   which .login-step is [hidden] rather than navigating pages, so it stays
   one lightweight page load, not three.
   ========================================================================= */

.welcome-question {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.welcome-caption {
  font-size: var(--font-size-narrator-caption);
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-2));
}

/* Small fixed-position step dots above the card — enough for a Narrator to
   sense "there's more, and I'm partway through" without reading numbers or
   percentages. Purely decorative (role="progressbar" on the parent carries
   the real semantics for assistive tech); kept intentionally understated
   so it doesn't compete with the card's own content for attention. */
.welcome-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.welcome-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  transition: background-color var(--duration-normal) var(--easing-standard),
              transform var(--duration-normal) var(--easing-standard);
}

.welcome-progress-dot[data-active="true"] {
  background-color: var(--color-primary);
  transform: scale(1.2);
}

.welcome-progress-dot[data-done="true"] {
  background-color: var(--color-primary-light);
}

/* Step 2/3's Back+Next row — Back is a lower-emphasis link-style button
   (never the same visual weight as the primary action) sitting beside the
   full-width primary button, not stacked above it, so the PRIMARY action a
   Narrator should take stays the biggest, most obvious thing on screen. */
.welcome-step-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.welcome-step-actions .login-button {
  flex: 1;
}

.welcome-step-actions .login-link-button {
  flex: 0 0 auto;
  margin-top: 0;
  min-height: var(--touch-target-narrator-min);
  padding: 0 var(--space-4);
}

/* FIXED 16 Aug 2026 (per Sam: not happy with the narrator screens — live-
   tested this page and found the four required consent paragraphs (who
   sent this / what it is / optional & stoppable / opening question), all
   at the Narrator type scale's 28px floor, run to roughly two full
   viewport heights before "Let's begin" ever appears. A first-time,
   possibly-anxious elderly Narrator would have to scroll past a wall of
   text with no visible action in sight to even know there IS a button.
   tokens.css is explicit that these font sizes are a floor, not something
   to shrink to fit — "resize the layout instead" is literally its own
   guidance — so the fix here is layout, not smaller text: the button
   sticks near the bottom of the viewport as the Narrator scrolls, so it's
   visible (and reachable) from the very first moment, without touching
   any of the reviewed consent copy. */
.login-button--sticky-cta {
  position: sticky;
  bottom: var(--space-4);
  z-index: var(--z-raised);
  box-shadow: var(--shadow-lg);
}