/* Shared across both camera contexts — app/views/shared/_video_recorder.html.erb
   (Nathan's .nathan-shell and Barbara's .barbara-shell both render it) and
   Barbara's comfort-check screen (storyteller/camera.html.erb). Lives in its
   own file (pulled in by application.css's require_tree, same as
   gifter.css/storyteller.css) since neither rule below needs shell-specific
   sizing — .cam-preview's own dimensions stay defined per-shell. */

/* Front camera always mirrored during live preview, like every camera/
   video-call app's self-view — applied in video_recorder_controller.js /
   camera_preview_controller.js the moment the stream opens. Never applied
   to recorded playback — only the live preview — so the saved video always
   shows true orientation (unflipped), matching what everyone else will see. */
.cam-preview video.mirrored {
  transform: scaleX(-1);
}

/* Known cross-browser bug: a live getUserMedia preview can render rotated
   or mirrored the wrong way the moment a phone turns to landscape — the
   stream's own orientation metadata and the browser's auto-rotation don't
   reliably agree, and it's inconsistent enough across iOS Safari/Android
   Chrome that trying to counter-rotate in JS is fragile. Every camera
   screen in the app is a tall portrait card anyway, so the fix is to lock
   to portrait instead of chasing the rotation math: the moment landscape
   is detected, this covers the whole screen and asks for portrait back.
   (max-height: 500px) is what tells an actual rotated phone apart from a
   normal wide desktop window — a landscape *phone* screen is always short,
   a desktop window generally isn't. */
.rotate-guard {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  .rotate-guard {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    gap: 10px;
    font-family: "DM Sans", sans-serif;
  }

  .rotate-guard .rotate-guard-title {
    font-size: 18px;
    font-weight: 600;
  }

  .rotate-guard .rotate-guard-body {
    font-size: 14px;
    opacity: 0.8;
    max-width: 280px;
  }
}
/*
 * Nathan (gifter) design system, ported 1:1 from megilla_mvp_prototype_v10.html's
 * dark "Nathan" screens. Scoped under .nathan-shell so it never leaks into the
 * rest of the app, which uses the brand-blue Tailwind theme instead.
 */

/* .n-footer is position:sticky at the bottom of the page — without this,
   scrolling a button near the end of the page into view (a click, Tab focus,
   or a browser automation driver) can land it half-hidden behind the footer
   overlay. This tells the browser to always leave room for the footer. */
html {
  scroll-padding-bottom: 110px;
}

.nathan-shell {
  /* 3-tier surface system: page < card < input, each a step lighter so
     nothing sits flush against its neighbor. Warmth here comes from the
     accent colors (gold/terracotta/sage/dusty-blue), not from tinting the
     neutrals brown — the neutrals stay a whisper-warm charcoal so the
     accents have something quiet to sit against. */
  --n-bg: #1a1815;
  --n-card: #242220;
  --n-input-bg: #2c2925;
  --n-border: rgba(201, 168, 76, 0.18);
  --n-border-neutral: rgba(255, 255, 255, 0.14);
  --n-text: #f1e8d6;
  --n-sub: rgba(241, 232, 214, 0.87);
  --n-muted: rgba(241, 232, 214, 0.45);

  /* Gold — reserved for the single primary action per screen. If it's not
     the one thing we want tapped, it doesn't get gold. */
  --gold: #c9a84c;
  --gold2: #e8d5a3;
  --goldd: #a8892e;
  --gold-tint: rgba(201, 168, 76, 0.14);
  /* Softer gold reserved for the "megilla" wordmark specifically — a
     lighter touch than button-gold, which needs to stay punchy since it's
     the one thing "tap this" is supposed to mean. */
  --gold-wordmark: #d3b76a;

  /* Terracotta — the secondary accent: secondary buttons, icon backgrounds,
     card accents. Everything gold isn't. */
  --terracotta: #c1704a;
  /* A slightly deeper terracotta reserved for eyebrow/kicker labels — kept
     distinct from --terracotta so a future change to icon/button terracotta
     doesn't silently drag label text along with it. */
  --terracotta-label: #b56545;
  --terracotta-light: #dd9b78;
  --terracotta-deep: #8f4f30;
  --terracotta-border: rgba(193, 112, 74, 0.4);
  --terracotta-tint: rgba(193, 112, 74, 0.14);

  /* Sage — answered states, milestone badges, positive confirmation. Muted
     on purpose so it reads calm rather than alarming for older eyes. */
  --sage: #86a583;
  --sage-light: #a8c2a5;
  --sage-deep: #5c7a5a;
  --sage-tint: rgba(134, 165, 131, 0.16);

  /* Dusty blue — status chips, dates, secondary tags: things organizing
     information rather than calling for action. Warmer/more muted than the
     brand-blue logo mark on purpose, so it doesn't compete with it. */
  --dusty-blue: #7c96ab;
  --dusty-blue-deep: #56718a;
  --dusty-blue-tint: rgba(124, 150, 171, 0.16);

  /* Cream — warm-white surface for highlighted cards, used sparingly against
     the charcoal so it actually reads as a highlight. */
  --cream: #f2e8d6;
  --cream-ink: #2b2013;
  --cream-sub: rgba(43, 32, 19, 0.62);

  --b-record: #d94030;

  background: var(--n-bg);
  min-height: 100dvh;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  display: flex;
  justify-content: center;
}

/* The app "card" — full-bleed on mobile, a centered panel with its own
   chrome once there's room to see it's a panel and not a broken layout. */
.nathan-shell .n-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--n-bg);
}

@media (min-width: 640px) {
  .nathan-shell {
    padding: 32px 16px;
  }

  .nathan-shell .n-shell {
    min-height: calc(100dvh - 64px);
    border: 1px solid var(--n-border-neutral);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  }
}

/* Logo lives inside the card, pinned to its top — never a separate
   full-bleed navbar, never scrolls away. Fixed height (rather than
   padding-driven sizing) so .n-step-header below can line up against it
   exactly via `top`. */
.nathan-shell .n-shell-logo {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--n-bg);
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--gold-wordmark);
  text-align: center;
}

@media (min-width: 640px) {
  .nathan-shell .n-shell-logo {
    border-radius: 24px 24px 0 0;
  }
}

.nathan-shell .n-shell-logo a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Warm badge carrying the M mark, sitting to the left of the wordmark —
   this is the app's one wordmark treatment; screens that used to render a
   second, larger centered wordmark of their own (the hero) don't anymore. */
.nathan-shell .n-brand-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nathan-shell .n-brand-badge img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  display: block;
}

.nathan-shell .n-shell-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nathan-shell .n-flash {
  margin: 10px 22px 0;
}

.nathan-shell .nc {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Hero and How-it-works are two screens sharing "/" — only one is ever on,
   and the one showing still needs .nc's flex column to lay itself out, so
   .on restores display: flex rather than block. */
.nathan-shell .n-intro {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nathan-shell .intro-panel {
  display: none;
}

.nathan-shell .intro-panel.on {
  display: flex;
}

/* A step's <form> sits between .n-step-header and .n-footer as a normal
   flex child of .nc — it needs to be a flex column itself too, or the
   footer's margin-top: auto (which needs a flex container to push against)
   has nothing to push against and just collapses to 0. */
.nathan-shell form.n-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* The step counter + progress bar stick right below the logo — like the
   logo, they never scroll away, only the step's own body content does. */
.nathan-shell .n-step-header {
  flex-shrink: 0;
  position: sticky;
  top: 52px;
  z-index: 2;
  background: var(--n-bg);
  padding-top: 14px;
}

.nathan-shell .n-step-header .n-eyebrow {
  margin-bottom: 8px;
}

.nathan-shell .n-step-progress {
  margin: 0 0 14px;
}

/* margin-top: auto pushes the footer to the bottom of the available space
   even when a step's content is short — no per-view spacer needed, and it
   still works once content is tall enough to need scrolling. Buttons stick
   to the bottom of the viewport (not the very end of the content) so
   they're always reachable without hunting for them. */
.nathan-shell .n-footer {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  background: var(--n-bg);
  border-top: 1px solid var(--n-border-neutral);
  position: sticky;
  bottom: 0;
}

.nathan-shell .n-footer .n-btn {
  margin-bottom: 0;
}

.nathan-shell .n-footer .n-btn.n-back {
  flex: 0 0 100px;
}

.nathan-shell .n-footer .n-continue {
  flex: 1;
}

/* button_to wraps its button in a <form> — that form (not the button) is
   the flex item, so it needs the flex rule instead. */
.nathan-shell .n-footer form.n-footer-form {
  flex: 1;
  display: flex;
}

/* Per docs/Design notes — Round 2's warmth direction: "warmth should come
   from the accent colors, not from making the background itself brown." The
   base #1A1815/#242220 tokens are already correct everywhere (see --n-bg/
   --n-card above) — this is for otherwise plain, accent-light screens
   (contributor landing/confirmation screens, mostly) where the correct-but-
   dark background reads as flatter/near-black next to screens that already
   carry a terracotta-bordered card or icon circle. Same radial wash as
   .hero-wrap, decoupled from its other hero-specific layout rules so it
   composes with each screen's own centered/top-anchored treatment instead
   of dictating one. */
.nathan-shell .n-warm-wash {
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(circle at 50% 20%, var(--terracotta-tint), transparent 60%),
    var(--n-bg);
}

.nathan-shell .hero-wrap {
  align-items: center;
  border-radius: 24px;
  text-align: center;
  /* Top-anchored, not centered — centering the whole block left equal dead
     space above the headline and below the button on tall phones. Anchoring
     it near the top + generous inter-section gaps below fills the screen
     intentionally instead of floating in the middle of it. */
  justify-content: flex-start;
  padding-top: 40px;
  background:
    radial-gradient(circle at 50% 20%, var(--terracotta-tint), transparent 60%),
    var(--n-bg);
}

/* Hero headline — the biggest, boldest text on the screen; carries the
   emotional weight the old centered wordmark used to (that mark now lives
   small, in the sticky header badge, so this slot is free for copy). */
.nathan-shell .hero-h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--n-text);
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.nathan-shell .hero-tag {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--n-text);
  margin-bottom: 20px;
  line-height: 1.45;
}

/* Hero's own clarity line needs more room to breathe than the shared
   .n-caption default (tuned elsewhere to pull tight under a preceding
   input) — scoped here rather than changing .n-caption globally. */
.nathan-shell .hero-wrap .n-caption {
  font-size: 14px;
  margin: 0 0 28px;
}

/* Stat pills — each gets its own tinted surface (gold/terracotta/sage) so
   they read as three distinct, warm facts rather than identical dark
   boxes. */
.nathan-shell .hero-stats {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-bottom: 32px;
}

.nathan-shell .hero-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 12px;
  border-radius: 24px;
  text-align: center;
  /* Soft lift so the three cards read as raised, tactile objects rather
     than flat tinted rectangles — same trick premium card UIs use, no new
     color introduced. */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.nathan-shell .hero-stat-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

.nathan-shell .hero-stat-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--n-text);
  line-height: 1.35;
}

.nathan-shell .hero-stat-gold {
  background: var(--gold-tint);
  border: 1.5px solid var(--goldd);
}

.nathan-shell .hero-stat-gold .hero-stat-badge {
  background: var(--gold);
  color: var(--cream-ink);
}

.nathan-shell .hero-stat-terracotta {
  background: var(--terracotta-tint);
  border: 1.5px solid var(--terracotta-deep);
}

.nathan-shell .hero-stat-terracotta .hero-stat-badge {
  background: var(--terracotta);
  color: #fff;
}

.nathan-shell .hero-stat-sage {
  background: var(--sage-tint);
  border: 1.5px solid var(--sage-deep);
}

.nathan-shell .hero-stat-sage .hero-stat-badge {
  background: var(--sage);
  color: #fff;
}

/* Quiet emotional line directly above the CTA — smaller than the subhead,
   still in the serif/italic voice so it doesn't read as another factual
   line the way the clarity caption above it does. */
.nathan-shell .hero-cta-line {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--gold2);
  margin-bottom: 18px;
}

/* The hero's own primary button, sized up beyond the app-wide .n-btn
   default and given a gold glow so it reads as the unmistakable focal
   point of the screen — scoped to .hero-wrap so every other "Continue →"
   button in the wizard is untouched. */
.nathan-shell .hero-wrap .n-btn.n-primary {
  min-height: 58px;
  padding: 20px 16px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.35);
}

/* Same gold glow as the hero CTA, as its own opt-in class rather than
   scoped to .hero-wrap — used on shared/_in_person_landing's "Record my
   question" (IP1 and G2h both), another single-emotional-moment screen. */
.nathan-shell .n-btn.n-btn-glow {
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.35);
}

.nathan-shell .n-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-sub);
  margin-bottom: 10px;
  font-weight: 600;
}

/* Generic 13px muted caption — for reassurance lines, helper text under
   fields, anything smaller than body copy that isn't the eyebrow kicker. */
.nathan-shell .n-caption {
  font-size: 13px;
  color: var(--n-muted);
  line-height: 1.5;
  margin: -6px 0 14px;
}

.nathan-shell .n-h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--n-text);
  line-height: 1.2;
  margin-bottom: 10px;
}

.nathan-shell .n-body {
  font-size: 16px;
  color: var(--n-sub);
  line-height: 1.6;
  margin-bottom: 20px;
}

.nathan-shell .n-input {
  width: 100%;
  background: var(--n-input-bg);
  border: 1px solid var(--n-border-neutral);
  border-radius: 12px;
  padding: 17px 18px;
  color: var(--n-text);
  font-size: 16px;
  font-family: "DM Sans", sans-serif;
  margin-bottom: 12px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.nathan-shell .n-input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-tint);
}

.nathan-shell .n-input::placeholder {
  color: var(--n-muted);
}

.nathan-shell .n-textarea {
  min-height: 100px;
  resize: none;
}

.nathan-shell .n-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  min-height: 44px;
  display: block;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.1s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

.nathan-shell .n-btn:hover {
  filter: brightness(1.08);
}

.nathan-shell .n-btn:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.nathan-shell .n-btn:disabled,
.nathan-shell .n-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  filter: none;
  pointer-events: none;
}

/* Nudges attention toward the Stop button when someone tries to move on
   (Continue or Back) while a recording is still live — recording has to be
   stopped first so the camera/mic session and any pending save stay clean. */
.nathan-shell .cam-record-btn.shake {
  animation: nathan-shake 0.4s ease;
}

@keyframes nathan-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

.nathan-shell .n-primary {
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: var(--n-bg);
}

.nathan-shell .n-ghost {
  background: transparent;
  border: 1.5px solid var(--terracotta-border);
  color: var(--terracotta-light);
}

.nathan-shell .n-ghost:hover {
  background: var(--terracotta-tint);
}

.nathan-shell .n-warn {
  background: rgba(217, 64, 48, 0.1);
  border: 1px solid rgba(217, 64, 48, 0.35);
  color: #e8a79c;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.5;
}

.nathan-shell .n-sp {
  flex: 1;
}

.nathan-shell .n-card {
  background: var(--n-card);
  border: 1px solid var(--n-border-neutral);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  color: var(--n-text);
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  transition:
    border-color 0.15s ease,
    transform 0.1s ease;
}

.nathan-shell button.n-card {
  appearance: none;
}

.nathan-shell button.n-card:hover,
.nathan-shell a.n-card:hover {
  border-color: var(--terracotta-border);
}

.nathan-shell button.n-card:active,
.nathan-shell a.n-card:active {
  transform: scale(0.98);
}

.nathan-shell .n-card.static {
  cursor: default;
}

.nathan-shell .n-card.static:hover {
  border-color: var(--n-border-neutral);
  transform: none;
}

.nathan-shell .n-note {
  background: var(--terracotta-tint);
  border: 1px dashed var(--terracotta-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--n-sub);
  margin-bottom: 14px;
  line-height: 1.55;
}

.nathan-shell .toggle-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.nathan-shell .toggle-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--n-border-neutral);
  background: transparent;
  color: var(--n-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  text-align: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

/* Filled-but-neutral active state, with a thin terracotta border as the only
   accent — gold's one job anywhere is the primary submit button, so the
   active tab reads as "selected" through contrast, not a second gold block
   competing with it. */
.nathan-shell .toggle-btn.active {
  background: var(--n-input-bg);
  color: var(--n-text);
  border-color: var(--terracotta);
}

.nathan-shell .mode-panel {
  display: none;
}

.nathan-shell .mode-panel.on {
  display: block;
}

/* Loading screen (N3ai) — a slow pulse on the wordmark itself rather than a
   generic spinner, so the wait feels like part of Megilla rather than a
   loading indicator borrowed from anywhere else. */
.nathan-shell .n-pulse-mark {
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  color: var(--gold-wordmark);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
  animation: nathan-mark-pulse 1.8s ease-in-out infinite;
}

@keyframes nathan-mark-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.nathan-shell .cam-preview {
  background: #000;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  color: var(--gold2);
  font-size: 28px;
}

/* The audio recorder centers its play button + waveform in the middle of
   the box, with the record/stop pair overlaid at the bottom — 16:9 doesn't
   leave enough vertical room for both without the record button crowding
   into the play button, so the audio box gets more height to work with. */
.nathan-shell .cam-preview.cam-preview-audio {
  aspect-ratio: 1 / 1;
}

.nathan-shell .cam-face {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
  box-shadow: 0 0 0 8px rgba(201, 168, 76, 0.08);
}

.nathan-shell .cam-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Custom audio "stage" — a decorative waveform + one big play/pause button,
   replacing the tiny native <audio controls> that otherwise floats lost in
   the middle of this big black box. The <audio> element itself stays
   hidden; this is the only way anyone interacts with playback. */
.nathan-shell .audio-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(201, 168, 76, 0.16),
    transparent 68%
  );
}

.nathan-shell .audio-wave {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nathan-shell .audio-wave span {
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--gold), var(--terracotta));
  opacity: 0.55;
  animation: nathan-wave 1.1s ease-in-out infinite;
  animation-play-state: paused;
}

.nathan-shell .audio-wave.playing span {
  animation-play-state: running;
  opacity: 1;
}

.nathan-shell .audio-wave span:nth-child(1) {
  height: 16px;
}
.nathan-shell .audio-wave span:nth-child(2) {
  height: 28px;
  animation-delay: 0.12s;
}
.nathan-shell .audio-wave span:nth-child(3) {
  height: 42px;
  animation-delay: 0.24s;
}
.nathan-shell .audio-wave span:nth-child(4) {
  height: 28px;
  animation-delay: 0.12s;
}
.nathan-shell .audio-wave span:nth-child(5) {
  height: 16px;
}

@keyframes nathan-wave {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

.nathan-shell .audio-play-btn {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--terracotta));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(201, 168, 76, 0.4);
  transition:
    transform 0.12s ease,
    filter 0.15s ease;
}

.nathan-shell .audio-play-btn .n-icon {
  margin-left: 3px;
}

.nathan-shell .audio-play-btn.is-playing .n-icon {
  margin-left: 0;
}

.nathan-shell .audio-play-btn:hover {
  filter: brightness(1.08);
}

.nathan-shell .audio-play-btn:active {
  transform: scale(0.92);
}

/* Record/stop pair floating inside the preview box itself, camera-app
   style — this is the one control someone's thumb needs while looking at
   themselves, so it lives on the video instead of competing for attention
   below it. Only used for the audio-only recorder, whose box never shows
   native player controls to collide with (see _video_recorder.html.erb) —
   the video recorder keeps its record/stop pair below the box instead,
   since a just-stopped or already-saved video does show native controls. */
.nathan-shell .cam-record-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.nathan-shell .cam-record-btn {
  width: 100%;
  min-height: 60px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--b-record), #b8321f);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(217, 64, 48, 0.35);
}

.nathan-shell .cam-record-btn.recording {
  background: linear-gradient(135deg, #8f2617, #6e1c11);
}

/* -------------------------------------------- _in_person_recorder.html.erb
   Full-bleed two-phase record/review layout for the contributor
   video-question recorder (IP2/G2v/G2h) — the same treatment as Barbara's
   own B7/B8 (see .record-shell in storyteller.css), just with no question
   bar to re-read: she's answering a question, a contributor is asking one,
   so there's nothing to overlay at the top during recording. Toggled by
   video_recorder_controller.js's setPhase, see .phase-recording/.phase-review
   on the <form> in that partial. */

.nathan-shell .record-page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nathan-shell .record-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 24px 24px;
}

/* True full-bleed camera app layout — the live feed fills the entire fixed
   viewport, with only the record/stop control layered on top of it. Stays
   dark regardless of the surrounding light/dark theme, same as any camera
   app. */
.nathan-shell .record-shell.phase-recording {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #111;
  padding: 0;
  display: block;
}

.nathan-shell .record-shell.phase-recording .record-review-chrome {
  display: none;
}

/* This full-bleed camera view was otherwise a dead end for anyone who lands
   here (from IP1/G1/G2h) and doesn't want to record right now.
   video_recorder_controller.js already guards any ".n-back" element inside
   the form (same "please stop recording" flash the Continue button gets
   while a take is actively in progress), so this needed no JS changes —
   only phase-recording shows it; by phase-review there's already Send my
   question/Record again, so it's no longer a dead end. */
.nathan-shell .record-shell:not(.phase-recording) .rec-back-btn {
  display: none;
}

.nathan-shell .rec-back-btn {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px 9px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.nathan-shell .rec-back-btn:active {
  background: rgba(0, 0, 0, 0.65);
}

.nathan-shell .record-shell.phase-recording .video-recorder-box {
  position: absolute;
  inset: 0;
}

.nathan-shell .record-shell.phase-recording .cam-preview {
  position: absolute;
  inset: 0;
  border-radius: 0;
  margin: 0;
  aspect-ratio: auto;
}

/* Large, centered, floating record/stop control over the live feed — not a
   form button squeezed into a narrow column. Icon + label always (matches
   the rest of the app's convention, even though docs/ux-rules.md's "never
   icon-only" rule is technically scoped to Barbara's own flow). */
.nathan-shell
  .record-shell.phase-recording
  [data-video-recorder-target="startButton"],
.nathan-shell
  .record-shell.phase-recording
  [data-video-recorder-target="stopButton"] {
  position: absolute;
  /* .n-record-btn's own width: 100% (unlike Barbara's equivalent, which has
     none) would otherwise win over these left/right offsets — 100% of the
     fixed full-viewport containing block, starting 20px in from the left,
     overflowing 20px past the right edge. auto lets left/right define the
     width instead. */
  width: auto;
  left: 20px;
  right: 20px;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  min-height: 68px;
  font-size: 18px;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 8px 20px rgba(217, 64, 48, 0.35);
}

.nathan-shell .record-shell.phase-recording .rec-save-status,
.nathan-shell .record-shell.phase-recording .progress-track-dark {
  display: none;
}

.nathan-shell .record-shell.phase-recording .n-warn {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 108px;
  z-index: 2;
}

.nathan-shell .record-shell.phase-review .cam-preview {
  aspect-ratio: 3 / 4;
}

/* The partial's own startButton (relabeled "Record again" once a take
   exists) is what phase-recording uses to retake before ever stopping — but
   phase-review shows its own "Record again" link instead (see
   _in_person_recorder.html.erb), so the partial's version stays out of the
   way here rather than offering a second, no-confirmation way to overwrite
   a take. */
.nathan-shell
  .record-shell.phase-review
  [data-video-recorder-target="startButton"] {
  display: none;
}

.nathan-shell .record-review-chrome {
  padding-top: 4px;
}

.nathan-shell .rec-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 64px;
  color: var(--n-text);
  background: rgba(0, 0, 0, 0.45);
}

.nathan-shell .rec-timer {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--n-text);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nathan-shell .rec-timer::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b-record);
  animation: nathan-mark-pulse 1.4s ease-in-out infinite;
}

/* Bigger, warmer record CTA for the video-message panel — this is the
   emotionally central screen, so the record action should feel inviting
   rather than like a routine form button. */
.nathan-shell .n-record-btn {
  width: 100%;
  min-height: 60px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--b-record), #b8321f);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(217, 64, 48, 0.25);
  margin-bottom: 12px;
  transition:
    transform 0.12s ease,
    filter 0.15s ease;
}

.nathan-shell .n-record-btn:hover {
  filter: brightness(1.06);
}

.nathan-shell .n-record-btn:active {
  transform: scale(0.98);
}

.nathan-shell .progress-track-dark {
  height: 8px;
  background: #3a3836;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}

.nathan-shell .progress-fill-dark {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  border-radius: 99px;
  transition: width 0.2s ease;
}

/* Saving -> Saved: a spinner that pops into a checkmark once the browser's
   PUT to Mux has actually finished — that's the one signal the person
   waiting on it should care about, not whether Mux has finished
   transcoding in the background afterward. */
.nathan-shell .rec-save-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-sub);
  margin: 4px 0 12px;
}

.nathan-shell .rec-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--n-border-neutral);
  border-top-color: var(--gold);
  animation: nathan-spin 0.8s linear infinite;
}

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

.nathan-shell .rec-save-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nathan-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nathan-shell .rec-save-check .n-icon {
  width: 12px;
  height: 12px;
  color: #1a1815;
}

@keyframes nathan-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.nathan-shell .badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.03em;
}

.nathan-shell .badge-invited {
  background: var(--dusty-blue-tint);
  color: var(--dusty-blue);
}

.nathan-shell .badge-submitted {
  background: var(--sage-tint);
  color: var(--sage);
}

.nathan-shell .n-resend-form {
  text-align: center;
  margin-top: 12px;
}

/* Deliberately no display/width here — .n-link is also used as a flex-row
   sibling (contributor row's "Remove," the Skip/Save-draft pair) where it
   needs to shrink to its own content width so gap+justify-content can
   position it correctly. A standalone link that should center itself as its
   own full-width block adds display:block;width:100% inline at that call
   site instead (see e.g. shared/_in_person_landing.html.erb's "← Back") —
   this was a real bug once (a block-level default here broke both flex
   contexts above), so don't reintroduce it here. */
.nathan-shell .n-link {
  text-align: center;
  font-size: 13px;
  color: var(--n-muted);
  margin-top: 12px;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "DM Sans", sans-serif;
}

.nathan-shell .rname {
  color: inherit;
}

/* Inline icon — sits before a word of text (button label, link, note) at
   the text's own baseline, rather than floating above/below it. */
.nathan-shell .n-icon {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Standalone icon in a soft tinted circle — the big centered icon on an
   interstitial/confirmation screen, replacing what used to be a large
   emoji character. */
.nathan-shell .n-icon-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

/* Gold-bordered callout card — a dark surface (not a light one, unlike the
   cream-highlight pattern this replaced elsewhere) that still reads as "pay
   attention here" via its outline rather than by breaking from the dark
   theme. Used for a single emotionally-important offer the gifter shouldn't
   skim past. */
.nathan-shell .n-callout-card {
  width: 100%;
  background: var(--n-card);
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  padding: 28px 22px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nathan-shell .n-callout-card .n-h1 {
  margin-top: 16px;
}

.nathan-shell .n-callout-card .n-body {
  margin-bottom: 0;
}

/* Centered icon-wrapper contexts — the icon is the only content, so the
   inline-with-text margin/baseline offset above would just push it off
   center. */
.nathan-shell .n-icon-circle .n-icon,
.nathan-shell .hero-stat-badge .n-icon,
.nathan-shell .n-choice-icon .n-icon,
.nathan-shell .cam-preview .n-icon,
.nathan-shell .n-timeline-icon .n-icon {
  margin-right: 0;
  vertical-align: 0;
}

/* Tint-badge color modifiers — decoupled from any particular shape so the
   same three accents can color a big standalone icon circle, a small
   timeline marker, or anything else built the same way. */
.nathan-shell .n-icon-terracotta {
  background: var(--terracotta-tint);
  color: var(--terracotta);
}

.nathan-shell .n-icon-sage {
  background: var(--sage-tint);
  color: var(--sage);
}

.nathan-shell .n-icon-dusty-blue {
  background: var(--dusty-blue-tint);
  color: var(--dusty-blue);
}

/* "How it works" explainer — the most crafted screen in the set. A proper
   vertical timeline: each step gets its own colored icon (cycling through
   the accent palette so the sequence has rhythm, not four identical dark
   circles) linked by a soft spine down to the next one. */
/* Frames the whole 4-step sequence as one designed piece, matching the
   bordered-card language used for the other "pay attention here" moment in
   the flow (the hand-phone offer) — terracotta here since that's the accent
   already carried by every marker inside it. */
.nathan-shell .n-timeline-card {
  background: var(--n-card);
  border: 1.5px solid var(--terracotta);
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 20px;
}

.nathan-shell .n-timeline {
  display: flex;
  flex-direction: column;
}

.nathan-shell .n-timeline-item {
  display: flex;
  gap: 18px;
}

.nathan-shell .n-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.nathan-shell .n-timeline-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--n-card);
}

.nathan-shell .n-timeline-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: linear-gradient(var(--terracotta-border), transparent);
  margin: 6px 0;
}

.nathan-shell .n-timeline-item:last-child .n-timeline-line {
  display: none;
}

.nathan-shell .n-timeline-text {
  /* padding-top: 10px; */
  padding-bottom: 28px;
  font-size: 15px;
  color: var(--n-sub);
  line-height: 1.6;
}

.nathan-shell .n-timeline-item:last-child .n-timeline-text {
  padding-bottom: 0;
}

/* Relationship picker — icon + label inside an .n-card button. */
.nathan-shell .n-choice {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nathan-shell .n-choice-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--terracotta-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Icon-only swap control under each of the 25 questions — a text link
   repeated 25 times is a lot of visual weight for a secondary action, so
   this is a small tappable circle instead. <summary> gets a default
   disclosure marker in every browser; suppress it since the icon already
   communicates "tap to expand." */
.nathan-shell .n-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terracotta-tint);
  cursor: pointer;
  list-style: none;
}

.nathan-shell .n-swap-btn::-webkit-details-marker {
  display: none;
}

.nathan-shell .n-swap-btn .n-icon {
  margin-right: 0;
  vertical-align: 0;
}

/* Question list — small neutral numbering so the full 1-25 scope is
   scannable without competing with the amber primary action. */
.nathan-shell .n-q-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--terracotta-tint);
  color: var(--n-sub);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/*
 * Barbara (storyteller) design system — light/cream theme, locked since the
 * very first build doc and never changed: warm cream background, dark text,
 * gold/terracotta/sage/dusty-blue accents. Deliberately the opposite polarity
 * of gifter.css's dark .nathan-shell — light backgrounds are easier on older
 * eyes with cataracts or glare sensitivity than light-text-on-dark, which is
 * why this was chosen for her specifically. Scoped under .barbara-shell so
 * the two flows never collide.
 *
 * Every type/button size here directly encodes docs/ux-rules.md's
 * senior-first minimums (18px body, 22px headings, 60px buttons).
 *
 * This stylesheet also carries the light-theme styling for every class
 * app/views/shared/_video_recorder.html.erb renders (.cam-preview,
 * .n-record-btn, .rec-save-status, .n-warn, etc.) — that partial is shared
 * with the gifter flow (dark there); the declarations here re-scope the same
 * recipes under .barbara-shell, tuned for a light surface. The one place
 * that deliberately stays dark regardless of theme is the camera viewfinder
 * itself (.cam-preview, .record-shell.phase-recording) — a live camera box
 * is black in every camera app, light or dark themed.
 */

.barbara-shell {
  --b-bg: #fffdf9;
  --b-card: #fff8ee;
  --b-input-bg: #fff3dd;
  --b-border: rgba(201, 168, 76, 0.28);
  --b-border-neutral: rgba(26, 18, 8, 0.12);
  --b-text: #1a1208;
  --b-sub: #4a3d2a;
  --b-muted: #7a6b52;

  --gold: #c9a84c;
  --gold2: #e8d5a3;
  --goldd: #a8892e;
  --gold-tint: rgba(201, 168, 76, 0.14);
  --gold-wordmark: #a8892e;

  --terracotta: #c1704a;
  --terracotta-light: #dd9b78;
  --terracotta-deep: #8f4f30;
  --terracotta-border: rgba(193, 112, 74, 0.4);
  --terracotta-tint: rgba(193, 112, 74, 0.14);

  --sage: #86a583;
  --sage-light: #a8c2a5;
  --sage-deep: #5c7a5a;
  --sage-tint: rgba(134, 165, 131, 0.16);

  --dusty-blue: #7c96ab;
  --dusty-blue-deep: #56718a;
  --dusty-blue-tint: rgba(124, 150, 171, 0.16);

  /* "CTA" text/icon color for the one place that needs it on its own (the
     home bar) rather than as a button fill — a dark-enough gold to stay
     legible on the gold-tint pill and on cream generally. */
  --b-cta: var(--goldd);
  --b-record: #d94030;
  --b-green: var(--sage);
  --b-greend: var(--sage-deep);

  /* Elevation system — warm-toned (not harsh black) 3-tier shadows, used
     consistently instead of ad-hoc box-shadow values: sm for resting cards,
     md for primary buttons and active states, lg for modals and the
     completion moment. Cards keep a thin border alongside the shadow
     (see .b-card) rather than relying on the shadow alone. */
  --shadow-sm: 0 1px 3px rgba(26, 18, 8, 0.06), 0 1px 2px rgba(26, 18, 8, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 18, 8, 0.1), 0 2px 4px rgba(26, 18, 8, 0.06);
  --shadow-lg: 0 12px 32px rgba(26, 18, 8, 0.14), 0 4px 8px rgba(26, 18, 8, 0.08);

  background: var(--b-bg);
  min-height: 100dvh;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  display: flex;
  justify-content: center;
}

.barbara-shell .b-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--b-bg);
}

@media (min-width: 640px) {
  .barbara-shell {
    padding: 32px 16px;
  }

  .barbara-shell .b-shell {
    min-height: calc(100dvh - 64px);
    border: 1px solid var(--b-border-neutral);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
  }
}

.barbara-shell .b-shell-logo {
  flex-shrink: 0;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--b-bg);
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--gold-wordmark);
  text-align: center;
}

@media (min-width: 640px) {
  .barbara-shell .b-shell-logo {
    border-radius: 24px 24px 0 0;
  }
}

/* public/Meg Logo .png is a full lockup (mark + wordmark) with its own
   background baked in, not a transparent icon — shown whole rather than
   split into a badge chip + separately-typed "megilla" text. */
.barbara-shell .b-logo-img {
  height: 64px;
  width: auto;
  border-radius: 8px;
  display: block;
}

.barbara-shell .b-flash {
  margin: 10px 22px 0;
}

/* Screen-to-screen motion — a plain Rails/Turbo app re-renders a fresh DOM
   on every visit (no SPA transition layer to hook), so this rides on the
   fact that .bc is a brand-new element each time: the animation just plays
   on mount, no JS needed. Not applied to .record-shell.phase-recording —
   that's position:fixed on itself, and animating a transform on a container
   around it would make it a new containing block for that fixed element,
   shifting the full-bleed camera view. .phase-review isn't fixed, so it's
   safe to include below. */
@keyframes b-page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spacing follows a defined scale (4/8/12/16/24/32/48/64px) throughout this
   file — generous gaps between major content zones (section-level margins
   in the 24-48px range), tighter spacing within a single card's own
   elements (8-12px, see .b-card-h etc below). */
.barbara-shell .bc {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: b-page-enter 320ms ease-out;
}

.barbara-shell .bc.centered {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.barbara-shell .b-sp {
  flex: 1;
}

/* Barbara's landing page (B3, the first thing she sees after tapping her
   text) — a soft warm wash behind the top of the screen (subtler than the
   dark-theme version, since a light page doesn't need the glow to read),
   a lifted message card with curvier top corners (like a sheet dropping
   in), and a CTA with a warm gold glow. Scoped to .b-hero-wrap so every
   other screen's cards/buttons stay as they are. */
.barbara-shell .b-hero-wrap {
  background:
    radial-gradient(circle at 50% 15%, var(--terracotta-tint), transparent 65%),
    var(--b-bg);
  padding-top: 36px;
}

.barbara-shell .b-hero-wrap .b-icon-circle {
  width: 104px;
  height: 104px;
}

.barbara-shell .b-hero-wrap .b-h1 {
  font-size: 32px;
}

.barbara-shell .b-hero-wrap .b-card {
  border-radius: 28px 28px 18px 18px;
  box-shadow: var(--shadow-md);
}

.barbara-shell .b-hero-wrap .b-btn.b-primary {
  box-shadow: var(--shadow-lg), 0 8px 20px rgba(201, 168, 76, 0.3);
}

/* ------------------------------------------------------------- typography */

/* ux-rules.md: headings 22px minimum. 28px is the default "this screen's
   main point" size; .sm is used for secondary/interstitial headings, right
   at the 22px floor. */
.barbara-shell .b-h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--b-text);
  line-height: 1.25;
  margin-bottom: 16px;
}

.barbara-shell .b-h1.sm {
  font-size: 22px;
}

/* ux-rules.md: body text 18px minimum. */
.barbara-shell .b-body {
  font-size: 18px;
  color: var(--b-sub);
  line-height: 1.65;
  margin-bottom: 24px;
}

.barbara-shell .b-eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: var(--b-sub);
  margin-bottom: 12px;
}

/* Branded section label (e.g. "HOW THIS WORKS") — distinct from .b-eyebrow's
   plain small-label use (e.g. "From Nathan:") — bigger than gifter.css's own
   11px .n-eyebrow per ux-rules.md, since this is still meant to be read, not
   just decorative. */
.barbara-shell .b-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------- buttons */

/* ux-rules.md: 60px minimum height, full width where possible. */
.barbara-shell .b-btn {
  width: 100%;
  padding: 18px;
  border-radius: 16px;
  font-size: 19px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.12s ease,
    filter 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.12s ease;
}

.barbara-shell .b-btn:hover {
  filter: brightness(1.05);
}

/* Scale + a slight elevation drop (see the filled variants' :active rule
   below) — the shadow compressing toward --shadow-sm on press, before
   returning to its resting elevation on release, is what sells "this is a
   real, responsive surface" rather than just a flat color swap. */
.barbara-shell .b-btn:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.barbara-shell .b-btn:disabled,
.barbara-shell .b-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  filter: none;
  pointer-events: none;
}

/* Gold — the single primary-action-per-screen accent (docs' --b-accent).
   Dark text on gold for contrast. --shadow-md is the token system's
   resting elevation for filled buttons; the second, colored shadow layered
   alongside it is what gives each variant its own warmth rather than all
   three reading as the same gray-shadowed button. */
.barbara-shell .b-primary {
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #1a1208;
  box-shadow: var(--shadow-md), 0 6px 16px rgba(201, 168, 76, 0.25);
}

/* "Use this answer" — sage as the positive/confirm accent, distinct from
   the red record button and the gold primary CTA. */
.barbara-shell .b-green {
  background: linear-gradient(135deg, var(--sage), var(--sage-deep));
  color: #fff;
  box-shadow: var(--shadow-md), 0 6px 16px rgba(92, 122, 90, 0.22);
}

/* Toggled by video_recorder_controller.js's showRetryLabel — a positive
   sage green next to "technology isn't perfect" reads as a mismatched
   signal, so a failed upload swaps the button to the same warm terracotta
   the error panel above it already uses, rather than staying green. */
.barbara-shell .b-green.btn-retry {
  background: linear-gradient(
    135deg,
    var(--terracotta),
    var(--terracotta-deep)
  );
  box-shadow: var(--shadow-md), 0 6px 16px rgba(143, 79, 48, 0.25);
}

.barbara-shell .b-record,
.barbara-shell .n-record-btn {
  background: linear-gradient(135deg, var(--b-record), #b8321f);
  color: #fff;
  box-shadow: var(--shadow-md), 0 6px 16px rgba(217, 64, 48, 0.25);
}

/* B5: press compresses the elevation toward --shadow-sm, then springs back
   to the resting --shadow-md (+ color glow) on release — only the filled
   variants have real elevation to compress in the first place. */
.barbara-shell .b-primary:active,
.barbara-shell .b-green:active,
.barbara-shell .b-record:active,
.barbara-shell .n-record-btn:active {
  box-shadow: var(--shadow-sm);
}

.barbara-shell .b-ghost {
  background: transparent;
  border: 1.5px solid var(--terracotta-border);
  color: var(--terracotta-deep);
}

.barbara-shell .b-ghost:hover {
  background: var(--terracotta-tint);
}

/* Never icon-only (ux-rules.md's Recording rule) — every button using this
   set always pairs an icon with a text label. */
.barbara-shell .b-btn .n-icon {
  margin-right: 0;
  vertical-align: 0;
}

/* button_to renders a real <button> (unlike link_to's <a>) — some browsers
   size a bare <button> to its content even with display:block, so it needs
   an explicit width to actually center within its form wrapper. */
.barbara-shell .b-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: var(--b-muted);
  margin-top: 16px;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "DM Sans", sans-serif;
  padding: 10px;
}

/* ---------------------------------------------------------------- inputs */

/* Save & Backup's lost-link recovery (Piece 2) is the first place Barbara's
   own flow ever needs a real text field — everything before this was
   taps/recording only. --b-input-bg was already reserved above for exactly
   this. ux-rules.md's 60px/18px minimums apply here same as buttons. */
.barbara-shell .b-input {
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1.5px solid var(--b-border);
  background: var(--b-input-bg);
  color: var(--b-text);
  font-size: 19px;
  font-family: "DM Sans", sans-serif;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.barbara-shell .b-input::placeholder {
  color: var(--b-muted);
}

.barbara-shell .b-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}

/* OTP code entry — wide letter-spacing on the typed digits (Piece 2's
   verify-your-number screen) reads nicely once a code is entered, but
   applied to the whole element it also stretches the placeholder text
   itself, clipping "4-digit code" against the input's width. The
   placeholder needs its own un-stretched spacing back. */
.barbara-shell .b-otp-input {
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 28px;
}

.barbara-shell .b-otp-input::placeholder {
  letter-spacing: normal;
  font-size: 18px;
}

.barbara-shell .b-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--b-sub);
  margin-bottom: 8px;
  text-align: left;
}

/* ------------------------------------------------------------------ cards */

/* B1: a thin border stays (softer than before — rgba(201,168,76,0.15)ish),
   but the shadow now does most of the depth work instead of the border
   alone. B2: a brief brightness dip on tap (rather than a hard color swap)
   gives cards the same "this responded to my touch" feedback the buttons
   have, without needing a different treatment per tinted variant below. */
.barbara-shell .b-card {
  background: var(--b-card);
  border: 1px solid rgba(201, 168, 76, 0.16);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: filter 150ms ease, box-shadow 150ms ease;
}

.barbara-shell .b-card:active {
  filter: brightness(0.97);
}

.barbara-shell .b-card-h {
  font-size: 18px;
  font-weight: 700;
  color: var(--b-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.barbara-shell .b-card-b {
  font-size: 18px;
  color: var(--b-sub);
  line-height: 1.6;
}

/* Tinted card variants for Bwhy's three cards — soft washes on cream,
   each with its own solid-color icon badge (see .b-card-icon below) so the
   badge stays a distinct shape rather than blending into its own card's
   tint. */
.barbara-shell .b-card-terracotta {
  background: var(--terracotta-tint);
  border-color: var(--terracotta-border);
}

.barbara-shell .b-card-sage {
  background: var(--sage-tint);
  border-color: rgba(134, 165, 131, 0.4);
}

.barbara-shell .b-card-dusty {
  background: var(--dusty-blue-tint);
  border-color: rgba(124, 150, 171, 0.4);
}

.barbara-shell .b-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.barbara-shell .b-card-terracotta .b-card-icon {
  background: var(--terracotta);
  color: #fff;
}

.barbara-shell .b-card-sage .b-card-icon {
  background: var(--sage);
  color: #fff;
}

.barbara-shell .b-card-dusty .b-card-icon {
  background: var(--dusty-blue);
  color: #fff;
}

/* Big centered icon in a soft tinted circle, replacing what used to be a
   large emoji on hero/interstitial screens (welcome, celebration...). */
.barbara-shell .b-icon-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 24px;
  background: var(--terracotta-tint);
}

/* shared/_icon.html.erb's default .n-icon carries margin-right/vertical-align
   meant for sitting inline before a word of text — inside a centered circle
   (or a centered card-icon badge) that offset just pushes the glyph off
   center. */
.barbara-shell .b-icon-circle .n-icon,
.barbara-shell .b-card-icon .n-icon,
.barbara-shell .b-timeline-icon .n-icon {
  margin-right: 0;
  vertical-align: 0;
}

/* Tint-badge color modifiers — decoupled from any one shape so the same
   three accents can color a timeline marker, a standalone icon circle, or
   anything else built the same way. */
.barbara-shell .b-icon-terracotta {
  background: var(--terracotta-tint);
  color: var(--terracotta-deep);
}

.barbara-shell .b-icon-sage {
  background: var(--sage-tint);
  color: var(--sage-deep);
}

.barbara-shell .b-icon-dusty {
  background: var(--dusty-blue-tint);
  color: var(--dusty-blue-deep);
}

/* "How it works" — a vertical timeline: each step gets its own colored
   icon, cycling through the accent palette for rhythm, linked by a soft
   spine down to the next one, the whole sequence framed as one bordered
   card. */
.barbara-shell .b-timeline-card {
  background: var(--b-card);
  border: 1.5px solid var(--terracotta);
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}

.barbara-shell .b-timeline {
  display: flex;
  flex-direction: column;
}

.barbara-shell .b-timeline-item {
  display: flex;
  gap: 18px;
}

.barbara-shell .b-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.barbara-shell .b-timeline-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--b-card);
}

.barbara-shell .b-timeline-line {
  width: 2px;
  flex: 1;
  min-height: 28px;
  background: linear-gradient(var(--terracotta-border), transparent);
  margin: 6px 0;
}

.barbara-shell .b-timeline-item:last-child .b-timeline-line {
  display: none;
}

.barbara-shell .b-timeline-text {
  padding-top: 8px;
  padding-bottom: 32px;
  font-size: 18px;
  color: var(--b-sub);
  line-height: 1.6;
}

.barbara-shell .b-timeline-item:last-child .b-timeline-text {
  padding-bottom: 0;
}

/* ------------------------------------------------------------------- home */

/* margin-top:auto pushes this to the bottom of whatever flex column it's
   the last item in even when the screen's own content is short —
   position:sticky then keeps it pinned there through scrolling on screens
   where content runs long. */
.barbara-shell .b-homebar {
  display: flex;
  justify-content: center;
  padding: 14px;
  margin-top: auto;
  border-top: 1px solid var(--b-border);
  background: var(--b-bg);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
}

.barbara-shell .b-homebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--b-cta);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 99px;
  background: var(--gold-tint);
  text-decoration: none;
  min-height: 48px;
}

/* --------------------------------------------------------------- progress */

.barbara-shell .b-progress-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--b-sub);
  margin-bottom: 8px;
}

.barbara-shell .progress-track {
  /* Explicit width, not just a block default — .bc.centered (B9's/B10's
     hero-style screens) sets align-items:center, which makes flex children
     shrink to their own content width instead of stretching, and this
     track's only content is a 0-width-until-filled percentage bar. */
  width: 100%;
  height: 10px;
  background: rgba(26, 18, 8, 0.08);
  border-radius: 99px;
  overflow: hidden;
  margin: 4px 0 20px;
}

.barbara-shell .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------- shared video-recorder
   (light-theme re-declarations of classes app/views/shared/_video_recorder
   renders — see that partial and video_recorder_controller.js. The camera
   viewfinder itself — .cam-preview and the full-bleed recording phase below
   — stays dark regardless of Barbara's own light theme, same as any camera
   app.) */

.barbara-shell .n-icon {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
  flex-shrink: 0;
}

.barbara-shell .cam-preview {
  background: #000;
  border-radius: 18px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.barbara-shell .cam-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barbara-shell .cam-face {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
  box-shadow: 0 0 0 8px rgba(201, 168, 76, 0.08);
}

.barbara-shell .rec-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 72px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

.barbara-shell .rec-timer {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 12px 5px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.barbara-shell .rec-timer::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--b-record);
  animation: barbara-pulse 1.4s ease-in-out infinite;
}

@keyframes barbara-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.barbara-shell .progress-track-dark {
  height: 8px;
  background: rgba(26, 18, 8, 0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}

.barbara-shell .progress-fill-dark {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  border-radius: 99px;
  transition: width 0.2s ease;
}

.barbara-shell .rec-save-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--b-sub);
  margin: 6px 0 14px;
}

.barbara-shell .rec-spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--b-border);
  border-top-color: var(--gold);
  animation: barbara-spin 0.8s linear infinite;
}

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

.barbara-shell .rec-save-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barbara-shell .rec-save-check .n-icon {
  width: 13px;
  height: 13px;
  color: #fff;
  margin: 0;
}

.barbara-shell .n-warn {
  background: rgba(217, 64, 48, 0.08);
  border: 1px solid rgba(217, 64, 48, 0.3);
  color: #a8402e;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 18px;
  margin-top: 12px;
  margin-bottom: 12px;
  line-height: 1.55;
}

.barbara-shell .n-btn {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  min-height: 48px;
}

.barbara-shell .n-ghost {
  background: transparent;
  border: 1.5px solid var(--b-border);
  color: var(--b-text);
}

/* A "gentle confirmation screen" (the spec's own words), not a small inline
   card — a dim backdrop over the whole viewport with a centered card, so it
   reads as its own moment rather than something easy to miss while scrolled
   past. The backdrop stays dark regardless of Barbara's light theme — a
   dimmed background is what signals "modal" in either theme. [hidden]
   alone would normally lose to this rule's own `display` once un-hidden,
   which is exactly the point — confirm-dialog#show/hide toggles the hidden
   attribute and this display value takes it from there. */
.barbara-shell .confirm-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 18, 8, 0.55);
}

.barbara-shell .confirm-panel:not([hidden]) {
  display: flex;
}

.barbara-shell .confirm-panel-card {
  width: 100%;
  max-width: 380px;
  background: var(--b-card);
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: var(--shadow-lg);
}

.barbara-shell .confirm-panel p {
  font-size: 18px;
  color: var(--b-text);
  line-height: 1.6;
  margin-bottom: 18px;
}

.barbara-shell .confirm-panel .b-btn {
  margin-bottom: 10px;
}

.barbara-shell .confirm-panel form {
  margin: 0 0 10px;
}

/* -------------------------------------------------------- record.html.erb
   two-phase recording/review layout. B7 (recording) is full-bleed camera
   with the current question overlaid in a solid dark bar (so she can
   re-read it while recording without leaving the screen) — no home bar. B8
   (review) is a normal cream card screen with the home bar back. Toggled
   by video_recorder_controller.js's setPhase, see .phase-recording /
   .phase-review on this same <form>. */

.barbara-shell .record-page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.barbara-shell .record-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 24px 24px;
}

/* True full-bleed camera app layout — the live feed fills the entire fixed
   viewport, with only the record/stop control layered on top of it. Stays
   dark regardless of Barbara's light theme (a camera viewfinder is black
   in every camera app), and deliberately carries no question text — see
   question.html.erb (B6) for that; B7 is camera-only so legibility never
   depends on whatever's behind her in the room. */
.barbara-shell .record-shell.phase-recording {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #111;
  padding: 0;
  display: block;
}

.barbara-shell .record-shell.phase-recording .record-review-chrome,
.barbara-shell .record-shell.phase-recording .b-homebar {
  display: none;
}

.barbara-shell .record-shell.phase-recording .video-recorder-box {
  position: absolute;
  inset: 0;
}

.barbara-shell .record-shell.phase-recording .cam-preview {
  position: absolute;
  inset: 0;
  border-radius: 0;
  margin: 0;
  aspect-ratio: auto;
}

.barbara-shell .record-recording-chrome {
  display: none;
}

.barbara-shell .record-shell.phase-recording .record-recording-chrome {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

/* B7 was otherwise a dead end for anyone who lands here and doesn't want to
   record right now — floats above the (opaque) question bar so it's always
   reachable. video_recorder_controller.js already guards any ".n-back"
   element inside the form (blocks it with the same "please stop recording"
   flash the Continue button gets while a take is actively in progress), so
   this needed no JS changes — only phase-recording shows it; by phase-review
   there's already Use this answer/Record again, so it's no longer a dead
   end. */
.barbara-shell .record-shell:not(.phase-recording) .rec-back-btn {
  display: none;
}

.barbara-shell .rec-back-btn {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px 9px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.barbara-shell .rec-back-btn:active {
  background: rgba(0, 0, 0, 0.65);
}

/* Solid, not a gradient fading into the live feed — legibility can't
   depend on whatever's behind her in the room, so the bar is fully opaque
   rather than semi-transparent. Same placement (top) and large serif type
   as before; just the fill changed. */
.barbara-shell .rec-qbar {
  background: #1a1208;
  /* Top padding clears the floating .rec-back-btn pill (top: max(14px, safe
     area), ~36px tall) plus a small gap — otherwise the question label
     renders directly under it. */
  padding: calc(max(14px, env(safe-area-inset-top)) + 48px) 20px 24px;
}

.barbara-shell .rec-qlabel {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 8px;
  font-weight: 700;
}

.barbara-shell .rec-qtext {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  color: #fff;
  line-height: 1.35;
}

/* Large, centered, premium-feeling record/stop control floating over the
   live feed near the bottom — not a form button squeezed into a narrow
   column. Still icon + label (ux-rules.md: never icon-only). */
.barbara-shell
  .record-shell.phase-recording
  [data-video-recorder-target="startButton"],
.barbara-shell
  .record-shell.phase-recording
  [data-video-recorder-target="stopButton"] {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  min-height: 68px;
  font-size: 20px;
  box-shadow: var(--shadow-lg), 0 8px 20px rgba(217, 64, 48, 0.35);
}

/* Not relevant before a take exists — these only matter once she's stopped
   and moved into phase-review. */
.barbara-shell .record-shell.phase-recording .rec-save-status,
.barbara-shell .record-shell.phase-recording .progress-track-dark {
  display: none;
}

/* Quiet in-recording cue for the 3-minute cap (see video_recorder_controller.js's
   updateTimer) — a thin bar above the stop button instead of a numeric
   clock, so the button stays the visual center of the screen rather than
   competing with a countdown. Fills gold -> terracotta over the full 3
   minutes, and turns fully terracotta in the last 30 seconds as the only
   "time's running low" signal. */
.barbara-shell .record-shell.phase-recording .rec-progress-cue {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(max(28px, env(safe-area-inset-bottom)) + 78px);
  z-index: 2;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.barbara-shell .rec-progress-cue-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--gold);
  transition:
    width 0.25s linear,
    background 0.6s ease;
}

.barbara-shell .rec-progress-cue-fill.near-end {
  background: var(--terracotta);
}

.barbara-shell .record-shell.phase-recording .n-warn {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 108px;
  z-index: 2;
}

.barbara-shell .record-shell.phase-review {
  animation: b-page-enter 320ms ease-out;
}

.barbara-shell .record-shell.phase-review .cam-preview {
  aspect-ratio: 1;
}

/* The partial's own startButton (relabeled "Record again" once a take
   exists) is what B7 uses to retake before ever stopping — but B8's
   "Record again" is the external, confirmation-gated button in
   record-review-chrome instead (see record.html.erb), so the partial's own
   version needs to stay out of the way here rather than offering a second,
   no-confirmation way to overwrite a take. */
.barbara-shell
  .record-shell.phase-review
  [data-video-recorder-target="startButton"] {
  display: none;
}

.barbara-shell .record-review-chrome {
  padding-top: 4px;
}

/* --------------------------------------------------- question.html.erb (B6)
   inline contributor video question */

.barbara-shell .b-contributor-video {
  margin-bottom: 20px;
}

.barbara-shell .b-contributor-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--terracotta-deep);
  margin-bottom: 10px;
}

.barbara-shell .b-contributor-video video {
  width: 100%;
  border-radius: 18px;
  background: #000;
  display: block;
}

/* --------------------------------------------------------- home.html.erb
   (B-HOME) replay thumbnail + play button — see story_replay_controller.js.
   A real thumbnail (not a blank black box) with a large, unmistakable play
   button overlaid, rather than relying on a bare <video controls> to read
   as "tap here to watch yourself." */
.barbara-shell .b-replay-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.barbara-shell .b-replay-box video {
  background: #000;
}

.barbara-shell .b-replay-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--terracotta));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg), 0 0 0 6px rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, filter 0.15s ease;
}

.barbara-shell .b-replay-play:hover {
  filter: brightness(1.06);
}

.barbara-shell .b-replay-play:active {
  transform: translate(-50%, -50%) scale(0.94);
}

.barbara-shell .b-replay-play .n-icon {
  margin-right: 0;
  vertical-align: 0;
  /* Optically center the play triangle in its circle — it isn't visually
     centered within its own glyph bounds, same nudge the button icons use
     elsewhere. */
  margin-left: 3px;
}

/* -------------------------------------------------- celebrate.html.erb (B11)
   The completion moment — deliberately given more than the routine
   milestone-screen treatment: a bigger heart with a soft gold-to-terracotta
   glow behind it (--shadow-lg), a gentle "bloom" entrance (slight
   overshoot, not just a fade), a handful of drifting particles, and text
   that arrives in a short stagger rather than all at once. */

.barbara-shell .b-celebrate {
  background: linear-gradient(160deg, var(--gold-tint), var(--b-bg));
}

.barbara-shell .b-celebrate-glow {
  position: relative;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 24px;
}

.barbara-shell .b-celebrate-heart {
  width: 96px;
  height: 96px;
  margin: 0;
  position: relative;
  z-index: 2;
  background: radial-gradient(
    circle,
    var(--gold-tint) 0%,
    var(--terracotta-tint) 75%
  );
  box-shadow: var(--shadow-lg), 0 0 46px 12px rgba(201, 168, 76, 0.3);
  animation: b-heart-bloom 800ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes b-heart-bloom {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* A handful of small dots drifting up from behind the heart and fading out
   — pure CSS, looping gently while she's on the screen rather than firing
   once and stopping. */
.barbara-shell .b-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  bottom: 44%;
  left: 50%;
  opacity: 0;
  animation: b-particle-float 3.6s ease-in-out infinite;
}

.barbara-shell .b-particle-gold {
  background: var(--gold);
  margin-left: -46px;
  animation-delay: 0s;
}

.barbara-shell .b-particle-terracotta {
  background: var(--terracotta);
  margin-left: 34px;
  animation-delay: 0.9s;
}

.barbara-shell .b-particle-sage {
  background: var(--sage);
  margin-left: -6px;
  animation-delay: 1.8s;
}

.barbara-shell .b-particle-late {
  animation-delay: 2.7s;
}

.barbara-shell .b-particle-gold.b-particle-late {
  margin-left: 14px;
}

.barbara-shell .b-particle-terracotta.b-particle-late {
  margin-left: -30px;
}

@keyframes b-particle-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-64px) scale(0.5);
    opacity: 0;
  }
}

/* Headline first, then each body line ~150ms after — see the inline
   animation-delay on each .b-celebrate-text element in the view — rather
   than the whole block appearing at once. */
.barbara-shell .b-celebrate-text {
  opacity: 0;
  animation: b-text-fade-in 500ms ease-out both;
}

@keyframes b-text-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect the OS-level "reduce motion" preference — relevant for this
   audience specifically (vestibular sensitivity is more common with age),
   and cheap to support: every animation/transition on the page collapses
   to effectively instant rather than being removed piecemeal. */
@media (prefers-reduced-motion: reduce) {
  .barbara-shell * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */