/* ==========================================================================
   With You — Demo hub stylesheet
   ==========================================================================
   Shared by /demo, /demo-family, /demo-provider, /demo-connect. Tokens come
   from styles/design-system.css (linked separately by each page) — this file
   only adds the layout/stepper/device-frame/chip primitives the walk-throughs
   need, plus a scoped `.pv` palette for provider screens.

   The `.pv` palette below is a literal copy of the *values* used by the
   provider mockups' stylesheet (docs/mockups/provider/shared.css, main
   checkout, owned by the provider session) so provider steps read like the
   provider product. That file is never linked or @imported from here — only
   its colour values are copied, scoped under `.pv` so they can never leak
   onto family screens.

   Brand: the provider product is "WithYou Rx". Its teal and olive are the
   values the provider app itself uses (provider/app/src/lib/theme.ts, main
   checkout, sampled from the With You logo); the mark is
   images/withyou-rx-mark.png — the two figures from the logo, no wordmark.

   Contrast (checked against styles/design-system.css tokens, WCAG relative
   luminance formula):
     .demo-chip--good  var(--green-700) on var(--green-050)  → 4.79:1  (AA)
     .demo-chip--warn  var(--amber-700) on var(--amber-050)  → 4.79:1  (AA)
     .demo-chip--grey  var(--grey-600)  on var(--grey-100)   → 4.69:1  (AA)
   ========================================================================== */

/* ---- layout -------------------------------------------------------------- */

.demo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
  align-items: start;
}

@media (min-width: 900px) {
  .demo-layout {
    grid-template-columns: 18rem 1fr;
  }
}

/* ---- step list ------------------------------------------------------------ */

.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Collapsible at the top on mobile: a horizontally scrollable strip instead
     of a tall list, so the stage is reachable without scrolling past it. */
}

@media (max-width: 899px) {
  .demo-steps {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .demo-steps li { flex: 0 0 auto; }
}

.demo-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.demo-steps__item[aria-current="step"] {
  background: var(--surface-selected);
  border-color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

.demo-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.demo-steps__item[aria-current="step"] .demo-steps__num {
  background: var(--accent-primary);
  color: var(--text-on-inverse);
}

.demo-steps__item span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

/* ---- stage: nav + steps --------------------------------------------------- */

.demo-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.demo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.demo-nav [data-demo-counter] {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.demo-nav button {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.demo-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Without JS (no .demo-js on <html>) every step renders stacked, divided, in
   document order — the walk-through still reads top to bottom. */
.demo-step {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.demo-step:first-of-type { padding-top: 0; }
.demo-step:last-of-type { border-bottom: 0; }

/* With JS, stepper.js sets the `hidden` attribute on every step but the
   current one; the browser's default `[hidden] { display: none }` handles
   the rest, so no extra CSS is needed to show only one step. The nav only
   makes sense once JS can drive it. */
html:not(.demo-js) .demo-nav { display: none; }

.demo-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.demo-step__head h2,
.demo-step__head h3 {
  margin: 0;
}

/* ---- captions and sample label -------------------------------------------- */

.demo-caption {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.demo-sample {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-raised);
}

/* ---- chips ----------------------------------------------------------------
   Contrast (see header note): all three pairs are ≥ 4.5:1. */

.demo-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.demo-chip--good {
  background: var(--green-050);
  color: var(--green-700);
}

.demo-chip--warn {
  background: var(--amber-050);
  color: var(--amber-700);
}

.demo-chip--grey {
  background: var(--grey-100);
  color: var(--grey-600);
}

/* ---- device frames --------------------------------------------------------- */

.demo-phone {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  background: var(--grey-900);
  border-radius: 28px;
  padding: 10px;
}

.demo-phone__status {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--surface-raised);
  border-radius: 18px 18px 0 0;
}

.demo-phone__screen {
  background: var(--surface-raised);
  border-radius: 0 0 18px 18px;
  min-height: 480px;
  max-height: 640px;
  overflow-y: auto;
  color: var(--text-primary);
}

/* Family screens in the demo use h3/h4 (under each step's h2) where the app
   uses h1/h2; these keep the app's sizes from styles/family.css. */
.demo-phone__screen .fy-page h3 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.demo-phone__screen .fy-page h4 { font-size: var(--text-2xl); }
.demo-phone__screen .fy-page .fy-section h4 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }

.demo-browser {
  width: 100%;
  background: var(--grey-900);
  border-radius: var(--radius-md);
  padding: 8px;
}

.demo-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 6px 8px;
}

.demo-browser__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--grey-600);
  display: block;
}

.demo-browser__url {
  flex: 1;
  min-width: 0;
  background: var(--grey-800);
  color: var(--grey-400);
  border-radius: var(--radius-sm);
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-browser__body {
  display: flex;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 420px;
}

.demo-browser__sidebar {
  width: 176px;
  flex-shrink: 0;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-default);
}

.demo-browser__main {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
}

/* ---- coming card ------------------------------------------------------------ */

.demo-coming-card {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.demo-coming-card p {
  margin: 0;
  font-size: var(--text-sm);
}

/* ---- data-next affordance --------------------------------------------------
   Marks the one element in a screen that advances the story. Pulses so a
   first-time visitor knows what to tap; stops pulsing under reduced motion,
   leaving a plain static ring. */

[data-next] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  animation: demo-pulse 1.6s ease-in-out infinite;
}

@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 85, 85, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(45, 85, 85, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-next] {
    animation: none;
  }
}

/* ============================================================================
   Provider palette — `.pv` scope (WithYou Rx)
   ----------------------------------------------------------------------------
   Neutral values copied from docs/mockups/provider/shared.css (read on the
   main checkout, never linked), except --pv-text-3 and --pv-good, darkened
   to meet WCAG AA 4.5:1. The mockups' placeholder blue accent is replaced by
   the WithYou Rx brand teal. Scoped so nothing family-side inherits it.

   Contrast (WCAG relative luminance), every pair this scope introduces:
     --pv-accent  #14595c on #ffffff          8.04:1  (text, links)
     --pv-accent  #14595c on --pv-bg #f4f5f7  7.37:1
     #ffffff on --pv-accent (primary button)  8.04:1
     --pv-accent on --pv-accent-tint #e3eeee  6.78:1  (info chip, current nav)
     --pv-olive   #a8a878 on #ffffff          2.46:1  — FAILS for text, even
                  large (3:1). Decorative marks only (divider, rules).
     --pv-olive-text #6b6b45 on #ffffff       5.51:1  (tagline, small text)
     --pv-olive-text on --pv-bg #f4f5f7       5.05:1
     #ffffff on --pv-good #17803f             5.00:1  (unchanged)
   ========================================================================== */

.pv {
  --pv-bg:        #f4f5f7;
  --pv-surface:   #ffffff;
  --pv-surface-2: #f8f9fb;
  --pv-line:      #dfe3e8;
  --pv-text:      #1b1f24;
  --pv-text-2:    #5c6670;
  --pv-text-3:    #646d76;   /* darkened from the mockup's #8b949e for 4.5:1 (5.3:1 on white, 4.8:1 on --pv-bg) */

  --pv-accent:      #14595c; /* WithYou Rx teal: title, primary action, done states */
  --pv-accent-dark: #0e4144; /* pressed / hover */
  --pv-accent-tint: #e3eeee; /* selected rows, info chips; teal text on it 6.8:1 */
  --pv-olive:       #a8a878; /* WithYou Rx olive: decorative only (2.5:1 on white) */
  --pv-olive-text:  #6b6b45; /* darker olive for text: 5.5:1 on white, 5.0:1 on --pv-bg */
  --pv-recording: #d1384a;   /* the recording state, and only that */
  --pv-good:      #17803f;   /* darkened from the mockup's #1f9d55: white on it is 5.0:1; as text on --pv-bg 4.6:1 */
  --pv-warn:      #d98324;

  /* Indic scripts need a font stack that will not fall back to tofu. */
  --indic: "Noto Sans Telugu", "Noto Sans Devanagari", "Nirmala UI", var(--font-sans);

  background: var(--pv-bg);
  color: var(--pv-text);
}

/* ---- WithYou Rx brand treatment --------------------------------------------
   App bar: a brand row (26px mark + "WithYou Rx" in teal) above the screen
   title. Console header: the same brand row across the top of a browser
   frame. The mark is decorative (alt="") because the name sits beside it. */

.pv .pv-appbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  padding: 10px 14px 12px;
  background: var(--pv-surface);
  border-bottom: 1px solid var(--pv-line);
}

.pv .pv-appbar h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--pv-text);
}

.pv-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pv-accent);
  white-space: nowrap;
}

.pv .pv-appbar .pv-brand { flex-basis: 100%; }

.pv-brand__mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}

.pv-consolebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--pv-surface);
  border-bottom: 1px solid var(--pv-line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.pv-consolebar__note {
  font-size: 12px;
  color: var(--pv-text-2);
}

/* When a console header is present, the body below it squares its top. */
.pv-consolebar + .demo-browser__body { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* Brand line outside the .pv scope (page intros, hub cards, split-screen
   labels): the mark beside "WithYou Rx" in the surrounding text colour, so it
   keeps the page's own light/dark contrast. */
.demo-rx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.demo-rx__mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

/* ---- launch screen (mirrors provider/app on the main checkout) ------------- */

.pv .pv-launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px 24px;
  background: var(--pv-surface);
  min-height: 480px;
}

.pv .pv-launch__mark { width: 112px; height: 112px; display: block; }

.pv .pv-launch__title {
  margin: 14px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--pv-accent);
}

.pv .pv-launch__tagline {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--pv-olive-text);
}

.pv .pv-launch__divider {
  width: 48px;
  height: 2px;
  border: 0;
  margin: 22px auto;
  background: var(--pv-olive);
}

.pv .pv-launch__section {
  align-self: stretch;
  text-align: left;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pv-text-3);
}

.pv .pv-launch__card {
  align-self: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  border: 1px solid var(--pv-line);
  border-radius: 12px;
  background: var(--pv-surface-2);
}

.pv .pv-launch__card li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--pv-text);
  border-bottom: 1px solid var(--pv-line);
}

.pv .pv-launch__card li:last-child { border-bottom: 0; }

.pv .pv-launch__card li.is-next { color: var(--pv-text-2); }

.pv .pv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--pv-accent);
}

.pv .pv-dot--todo {
  background: transparent;
  border: 2px solid var(--pv-text-3);
  box-sizing: border-box;
}

.pv .rec-bar {
  background: var(--pv-recording);
  color: #fff;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.pv .rec-bar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  margin-right: 7px;
}

.pv .rec-bar button {
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  color: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  font: inherit;
  font-size: 12px;
}

.pv .provenance {
  background: var(--pv-surface-2);
  border-left: 3px solid var(--pv-accent);
  border-radius: 0 8px 8px 0;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--pv-text-2);
}

.pv .provenance .ts {
  font-family: var(--font-numeric);
  font-size: 11px;
  color: var(--pv-text-3);
}