/* ==========================================================================
   Daily Dose of Palwasha — stylesheet
   Fixed light theme. Retail pharmacy realism, warm not sterile.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, blockquote, ul, ol, li, form, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Design tokens ---------- */
:root {
  --cream: #FDF6EC;
  --white: #FFFFFF;
  --border: #E7DCC8;
  --border-strong: #D8C9AC;
  --ink: #1C1917;
  --ink-soft: #57534E;
  --warn: #B91C1C;
  --green: #166534;
  --blue: #1D4ED8;

  --amber-100: #FDE68A;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-700: #B45309;
  --amber-900: #78350F;

  --silver-50: #F3F4F6;
  --silver-100: #E5E7EB;
  --silver-300: #C7CCD3;
  --silver-400: #9CA3AF;
  --silver-600: #6B7280;

  --font-mono: "Courier New", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow-card: 0 2px 6px rgba(28, 25, 23, 0.06), 0 8px 20px rgba(28, 25, 23, 0.06);
  --shadow-pop: 0 10px 30px rgba(28, 25, 23, 0.18);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

html, body {
  background: var(--cream);
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

button, a, input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  background: var(--cream);
  min-height: 100dvh;
}
.screen[hidden] { display: none; }

.screen-scroll {
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-t) + 20px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 16px);
}

.screen-scroll--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* ---------- Masthead ---------- */
.masthead {
  text-align: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.masthead-name {
  font-weight: 800;
  letter-spacing: 0.09em;
  font-size: 15px;
  color: var(--amber-900);
}
.masthead-tag {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-style: italic;
}
.masthead-line {
  font-size: 12px;
  letter-spacing: 0.03em;
  margin-top: 8px;
  color: var(--ink);
}
.masthead-line a {
  color: var(--amber-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Cards & generic chrome ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 22px 18px;
}

.card-heading {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 10px;
}

.card-sub {
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.fine-print {
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

.gate-card, .prelaunch-card {
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 14.5px;
  cursor: pointer;
}

.btn--primary {
  background: linear-gradient(180deg, var(--amber-500), var(--amber-700));
  color: var(--white);
  box-shadow: 0 2px 0 rgba(120, 53, 15, 0.5), 0 4px 10px rgba(180, 83, 9, 0.35);
}
.btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(120,53,15,0.5); }

.btn--big { min-height: 56px; font-size: 16px; }

.btn:disabled { opacity: 0.6; }

/* ---------- Gate form ---------- */
#gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dob-input {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 12px;
}
#dob-input:focus {
  outline: 2px solid var(--amber-500);
  outline-offset: 1px;
}
#dob-input::placeholder { color: var(--silver-400); }

.gate-chip-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.gate-chip-wrap[hidden] { display: none; }

.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--silver-50);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.chip-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.chip-caption {
  font-size: 10.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gate-message {
  min-height: 20px;
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.gate-message[data-tone="error"] { color: var(--warn); }
.gate-message[data-tone="success"] { color: var(--green); }
.gate-message[data-tone="busy"] { color: var(--ink-soft); }

.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--amber-700);
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; opacity: 0.7; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pre-launch ---------- */
.status-line {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  background: var(--silver-50);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
}
.ready-line {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: var(--amber-900);
}
.remaining-line {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  margin-bottom: 6px;
}

/* ---------- Main layout ---------- */
.main-wrap {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 90px;
}

/* ---------- Rx label ---------- */
.rx-label {
  font-family: var(--font-mono);
  padding: 18px 16px;
}
.rx-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  letter-spacing: 0.01em;
}
.rx-row:last-of-type { border-bottom: none; }
.rx-row span { white-space: nowrap; }
.rx-drugname {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
}
.rx-drugname strong { display: block; font-size: 13px; }
.rx-brand {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.rx-sig {
  margin: 12px 0;
  padding: 12px 10px;
  background: var(--amber-100);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
}
.rx-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 9px 0 7px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.rx-meta-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.rx-meta-row:last-child { border-bottom: none; }

/* ---------- Patient information box ---------- */
.info-box-heading {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 12.5px;
  color: var(--amber-900);
  margin-bottom: 8px;
}
.info-box-body {
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Auxiliary sticker row ---------- */
.sticker-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 14px;
  scroll-snap-type: x proximity;
}
.sticker {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 200px;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink);
  box-shadow: 0 3px 6px rgba(28,25,23,0.15);
}
.sticker:nth-child(1) { transform: rotate(-2deg); }
.sticker:nth-child(2) { transform: rotate(1.5deg); }
.sticker:nth-child(3) { transform: rotate(-1deg); }
.sticker:nth-child(4) { transform: rotate(2deg); }
.sticker:nth-child(5) { transform: rotate(-1.5deg); }
.sticker:nth-child(6) { transform: rotate(1deg); }
.sticker:nth-child(7) { transform: rotate(-2.5deg); }
.sticker:nth-child(8) { transform: rotate(1.8deg); }

.sticker--orange { background: #FDBA74; }
.sticker--yellow { background: #FDE047; }
.sticker--red    { background: #FCA5A5; }
.sticker--blue   { background: #93C5FD; }
.sticker--green  { background: #86EFAC; }
.sticker--white  { background: var(--white); border: 2px solid var(--warn); color: var(--warn); }

/* ---------- Adherence pack ---------- */
.pack-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
}
.pack-subtitle {
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin-top: 3px;
  margin-bottom: 16px;
}

#pack-weeks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.week-card {
  background: linear-gradient(180deg, #FBEED8, #F6E4C6);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.week-titlebar {
  background: var(--ink);
  color: var(--cream);
  padding: 10px 14px;
}
.week-titlebar-main {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.week-titlebar-sub {
  font-size: 11px;
  color: #D6CDBE;
  font-style: italic;
  margin-top: 1px;
}
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 14px 10px;
  padding: 18px 14px 16px;
}

.bubble-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.bubble {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bubble-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  position: relative;
  z-index: 2;
}

.bubble-caption {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.25;
  max-width: 70px;
}

/* --- SEALED: brushed silver foil, embossed number ---
   OPEN (past, never popped) shares the exact same foil look, plus a
   red corner dot added below. */
.bubble--sealed,
.bubble--open {
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,0.45) 0 1px, rgba(0,0,0,0.045) 1px 3px),
    linear-gradient(135deg, var(--silver-50) 0%, var(--silver-300) 45%, var(--silver-400) 75%, var(--silver-100) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -3px 4px rgba(55,65,81,0.35),
    0 1px 3px rgba(28,25,23,0.2);
}
.bubble--sealed .bubble-num,
.bubble--open .bubble-num {
  color: var(--silver-400);
  text-shadow: 0 1px 0 rgba(255,255,255,0.85), 0 -1px 1px rgba(31,41,55,0.45);
}

/* --- OPEN: sealed look (above) + red corner dot --- */
.bubble--open::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--white), 0 1px 2px rgba(0,0,0,0.3);
  z-index: 3;
}

/* --- TODAY: translucent amber dome, glossy highlight, slow pulse --- */
.bubble--today {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,0.9), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 42%, var(--amber-100) 0%, var(--amber-500) 55%, var(--amber-700) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.7),
    inset 0 -5px 7px rgba(120,53,15,0.55),
    0 4px 10px rgba(180,83,9,0.45),
    0 0 0 4px rgba(253,230,138,0.35);
  animation: bubblePulse 2.4s ease-in-out infinite;
}
.bubble--today .bubble-num {
  color: var(--amber-900);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
@keyframes bubblePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble--today { animation: none; }
}

/* --- POPPED: torn foil, dark cavity --- */
.bubble--popped {
  background: radial-gradient(circle at 50% 40%, #57534E 0%, #292524 70%, #1C1917 100%);
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.65),
    inset 0 -1px 2px rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.2);
  overflow: visible;
}
.bubble--popped .bubble-num { display: none; }
.bubble--popped .foil-flap {
  position: absolute;
  left: -6%;
  right: -6%;
  top: -12%;
  height: 46%;
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,0.45) 0 1px, rgba(0,0,0,0.05) 1px 3px),
    linear-gradient(135deg, var(--silver-50) 0%, var(--silver-300) 55%, var(--silver-400) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 55%, 84% 78%, 70% 52%, 56% 82%, 42% 50%, 28% 80%, 14% 54%, 0% 76%);
  transform: rotate(-7deg) translate(0, -6%);
  transform-origin: 30% 100%;
  box-shadow: 0 3px 5px rgba(0,0,0,0.35);
  z-index: 2;
}

/* --- pop animation --- */
.bubble.is-popping {
  animation: bubblePop 0.35s ease-out;
}
@keyframes bubblePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.is-popping { animation: none; }
}

/* ---------- PRN floating button ---------- */
.prn-fab {
  position: fixed;
  right: calc(var(--safe-r) + 16px);
  bottom: calc(var(--safe-b) + 18px);
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 16px rgba(28,25,23,0.35);
  z-index: 20;
  cursor: pointer;
}
.prn-fab:active { transform: translateY(1px); }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  padding: 10px 0 4px;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.overlay[hidden] { display: none; }

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.52);
}

.overlay--modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: 54px 20px 20px;
  box-shadow: var(--shadow-pop);
}
.modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.claim-row {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  background: var(--silver-50);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 16px;
  color: var(--amber-900);
}

#prn-contact-btn { margin-bottom: 4px; }

/* ---------- PRN dispensed dose (compact fake-iMessage thread) ---------- */
.prn-dose {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  max-height: min(44vh, 330px); /* long threads scroll; the modal never outgrows the screen */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.prn-dose[hidden] { display: none; }
.claim-row[hidden] { display: none; }

.prn-dose-label {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-align: center;
  color: var(--amber-900);
  margin-bottom: 10px;
}

.prn-thread {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prn-line {
  max-width: 84%;
  padding: 6px 11px;
  border-radius: 15px;
  font-size: 13.5px;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.prn-line--p {
  align-self: flex-end;
  background: var(--amber-100);
  color: var(--amber-900);
  border-bottom-right-radius: 5px;
}
.prn-line--a {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
/* Runs from the same voice group like a real thread: inner corners flatten,
   rows tighten, and the tail corner lands on the last bubble of the run. */
.prn-line--p + .prn-line--p { border-top-right-radius: 5px; margin-top: -2px; }
.prn-line--a + .prn-line--a { border-top-left-radius: 5px; margin-top: -2px; }
.prn-line--plain {
  align-self: center;
  max-width: 100%;
  padding: 2px 4px;
  text-align: center;
  font-style: italic;
  color: var(--ink);
}

.prn-src {
  margin-top: 10px;
  font-size: 10.5px;
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.4;
}

.prn-more { margin-bottom: 10px; }
/* .btn sets display:block, which would override the UA [hidden] rule */
.prn-more[hidden] { display: none; }

/* ---------- Dose card sheet ---------- */
.overlay--sheet .sheet {
  position: absolute;
  inset: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  z-index: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
  .overlay--sheet .sheet {
    animation: sheetUp 0.28s ease-out;
  }
  @keyframes sheetUp {
    from { transform: translateY(6%); opacity: 0.4; }
    to { transform: translateY(0); opacity: 1; }
  }
}

.sheet-close {
  flex: 0 0 auto;
  width: 100%;
  min-height: 48px;
  padding-top: var(--safe-t);
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-align: center;
  cursor: pointer;
}

.sheet-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px calc(var(--safe-r) + 18px) calc(var(--safe-b) + 40px) calc(var(--safe-l) + 18px);
}

.sheet-content { max-width: 520px; margin: 0 auto; }

.dose-daterow {
  text-align: center;
  margin-bottom: 14px;
}
.dose-no {
  display: block;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--amber-900);
}
.dose-date {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.tier-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
}
.tier-badge--loading { background: var(--amber-100); color: var(--amber-900); }
.tier-badge--scheduled { background: #E0E7FF; color: var(--blue); }
.tier-badge--maintenance { background: #DCFCE7; color: var(--green); }
.tier-badge--booster { background: #FEE2E2; color: var(--warn); }
.tier-badge--finale { background: linear-gradient(90deg, var(--amber-700), var(--amber-900)); color: var(--white); }

.banner {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 16px;
}
.banner--missed { background: #FEF2F2; border: 1px solid #FCA5A5; color: var(--warn); }
.banner--gift { background: var(--amber-100); border: 1px solid var(--border-strong); color: var(--amber-900); }

.dose-title {
  font-size: 21px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.3;
}

.dose-body p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 14px;
  white-space: pre-line;
}
.dose-body p:last-child { margin-bottom: 0; }

.photo-frame {
  background: var(--white);
  padding: 10px 10px 26px;
  margin: 20px auto 0;
  max-width: 340px;
  border-radius: 3px;
  box-shadow: var(--shadow-pop);
  transform: rotate(-1.4deg);
}
.photo-frame img {
  width: 100%;
  background: var(--silver-100);
  border-radius: 1px;
}
.photo-frame figcaption {
  text-align: center;
  font-size: 12.5px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-style: italic;
}

.audio-row {
  margin-top: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.audio-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--amber-900);
  margin-bottom: 10px;
  text-align: center;
}
.audio-row audio { width: 100%; }

.voucher {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  padding: 20px 16px 16px;
  background: var(--white);
  overflow: hidden;
}
.voucher-stamp {
  position: absolute;
  top: 10px;
  right: -6px;
  transform: rotate(11deg);
  border: 2px solid var(--warn);
  color: var(--warn);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0.85;
}
.voucher-redeem {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.55;
}
.voucher-footer {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-align: center;
}

.dose-footer {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 18px);
  transform: translate(-50%, 140%);
  max-width: min(92vw, 420px);
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  padding: 13px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 80;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.toast[hidden] { display: none; }
.toast.toast--visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}

/* ---------- Small screens: tighten a touch ---------- */
@media (max-width: 360px) {
  .bubble { width: 56px; height: 56px; }
  .card { padding: 20px 14px; }
}

/* ---------- GooseRx brand ---------- */
:root {
  --gx-yellow: #FFCF00;
  --gx-ink: #231F20;
}
.brand {
  background: var(--gx-yellow);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px 11px;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(120, 53, 15, 0.14);
}
.masthead { text-align: center; }
.brand-mark { width: 28px; height: 28px; flex: 0 0 auto; margin-top: 2px; }
.brand-word {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 29px;
  letter-spacing: -0.4px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}
.masthead-contact {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none;
}
.duty {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.duty-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gx-yellow);
  color: var(--gx-ink);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
}
.duty-avatar svg { width: 72%; height: 72%; }
.duty-avatar img { display: none; width: 100%; height: 100%; object-fit: cover; }
.duty-avatar.has-photo img { display: block; }
.duty-avatar.has-photo svg { display: none; }
.duty-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.bubble-num--dot { font-size: 1.25em; line-height: 1; text-transform: none; }
/* Gate layout: brand up top, duty under the card, tag + contact pinned to the foot */
.gate-scroll { display: flex; flex-direction: column; }
.gate-duty { margin-top: 20px; }
.gate-foot { margin-top: auto; padding-top: 28px; text-align: center; }
.gate-foot .masthead-tag { margin-top: 0; }
/* GoodRx-style primary buttons: flat brand yellow, dark bold text */
.btn--primary {
  background: var(--gx-yellow);
  background-image: none;
  color: var(--gx-ink);
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   V2 — Onboarding ceremony (landing / claim / bag label / sign / fill)
   ========================================================================== */

/* ---------- Landing ---------- */
.landing-scroll {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.landing-hero {
  flex: 0 0 auto;
  min-height: 55dvh;
  background: var(--gx-yellow);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--safe-t) + 30px) calc(var(--safe-r) + 24px) 36px calc(var(--safe-l) + 24px);
}

.landing-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.landing-mark { width: 46px; height: 46px; flex: 0 0 auto; margin-top: 4px; }
.landing-word {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 47px;
  letter-spacing: -0.8px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}
.landing-tagline {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  max-width: 17ch;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.landing-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px calc(var(--safe-r) + 20px) calc(var(--safe-b) + 18px) calc(var(--safe-l) + 20px);
}
.landing-tag { margin: 2px 0 18px; }

.landing-cta {
  max-width: 340px;
  min-height: 60px;
  background: var(--white);
  color: var(--gx-ink);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  font-size: 16.5px;
  letter-spacing: 0.07em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.10), 0 8px 20px rgba(28, 25, 23, 0.10);
}
.landing-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10); }

.landing-foot { margin-top: auto; padding-top: 28px; }
.landing-fineprint { margin-top: 9px; }

/* ---------- Claim processing ---------- */
/* Centering via auto margins (not justify-content) so short landscape
   viewports scroll instead of clipping the top. */
#screen-claim .screen-scroll--center,
#screen-sign .screen-scroll--center,
#screen-fill .screen-scroll--center { justify-content: flex-start; }

.claim-card {
  width: 100%;
  max-width: 420px;
  margin: auto;
}
.claim-heading {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.claim-spinner { margin-left: 10px; margin-right: 0; vertical-align: -2.5px; }
.claim-card.is-done .claim-spinner { display: none; }

.claim-lines {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
  letter-spacing: 0.01em;
  color: var(--ink);
  min-height: 12em; /* room for all 6 lines — the card doesn't grow line by line */
}
.claim-line--approved { font-weight: 700; color: var(--green); }
.claim-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  vertical-align: -0.15em;
  margin-left: 2px;
  background: var(--ink);
  animation: cursorBlink 1.06s steps(1) infinite;
}
@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .claim-cursor { animation: none; }
}

/* ---------- Bag label ---------- */
.baglabel-scroll {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--safe-b) + 110px); /* clear the fixed CTA dock */
}
.pickup-heading {
  margin-top: auto;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--amber-900);
}

/* Denser than the in-app Rx label — same field content, bag-stapled vibes. */
.bag-label {
  width: 100%;
  max-width: 420px;
  margin: 0 auto auto;
  padding: 16px 16px 0;
}
.bag-label .rx-row { padding: 5px 0; font-size: 10.5px; }
.bag-label .rx-drugname { padding: 5px 0; font-size: 11px; }
.bag-label .rx-drugname strong { font-size: 12px; }
.bag-label .rx-brand { padding: 5px 0; font-size: 9.5px; }
.bag-label .rx-sig { margin: 9px 0; padding: 9px 8px; font-size: 13px; }
.bag-label .rx-fields { padding: 7px 0 5px; gap: 3px 14px; font-size: 10px; }
.bag-label .rx-meta-row { padding: 4.5px 0; font-size: 10px; }

.bag-barcode {
  height: 46px;
  max-width: 300px;
  margin: 14px auto 0;
  background-image: linear-gradient(90deg, #000 0.00% 0.92%, #fff 0.92% 2.86%, #000 2.86% 4.59%, #fff 4.59% 5.61%, #000 5.61% 6.53%, #fff 6.53% 9.39%, #000 9.39% 12.55%, #fff 12.55% 14.49%, #000 14.49% 17.65%, #fff 17.65% 20.51%, #000 20.51% 22.24%, #fff 22.24% 25.10%, #000 25.10% 26.84%, #fff 26.84% 27.86%, #000 27.86% 28.78%, #fff 28.78% 29.80%, #000 29.80% 32.96%, #fff 32.96% 34.90%, #000 34.90% 35.82%, #fff 35.82% 38.67%, #000 38.67% 40.41%, #fff 40.41% 43.27%, #000 43.27% 44.18%, #fff 44.18% 45.20%, #000 45.20% 46.12%, #fff 46.12% 47.14%, #000 47.14% 48.06%, #fff 48.06% 49.08%, #000 49.08% 50.00%, #fff 50.00% 52.86%, #000 52.86% 54.59%, #fff 54.59% 56.53%, #000 56.53% 59.69%, #fff 59.69% 62.55%, #000 62.55% 63.47%, #fff 63.47% 65.41%, #000 65.41% 68.57%, #fff 68.57% 69.59%, #000 69.59% 71.33%, #fff 71.33% 72.35%, #000 72.35% 73.27%, #fff 73.27% 74.29%, #000 74.29% 75.20%, #fff 75.20% 76.22%, #000 76.22% 77.96%, #fff 77.96% 78.98%, #000 78.98% 80.71%, #fff 80.71% 83.57%, #000 83.57% 84.49%, #fff 84.49% 85.51%, #000 85.51% 87.24%, #fff 87.24% 88.27%, #000 88.27% 90.00%, #fff 90.00% 91.94%, #000 91.94% 92.86%, #fff 92.86% 93.88%, #000 93.88% 94.80%, #fff 94.80% 95.82%, #000 95.82% 98.98%, #fff 98.98% 100.00%);
}
.bag-barcode-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  margin-top: 7px;
}
.bag-warnbar {
  margin: 14px -16px 0;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-align: center;
  border-radius: 0 0 15px 15px;
}

.cta-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 26px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  background: linear-gradient(180deg, rgba(253, 246, 236, 0), var(--cream) 46%);
  pointer-events: none;
}
.cta-dock .btn {
  pointer-events: auto;
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- Signature ---------- */
.sign-wrap {
  width: 100%;
  max-width: 420px;
  margin: auto;
}

.sig-pad {
  position: relative;
  height: min(46vw, 220px);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-card), inset 0 1px 3px rgba(28, 25, 23, 0.05);
  margin-bottom: 14px;
  overflow: hidden;
}
#sig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none; /* scrolling must never fight drawing */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}
.sig-baseline {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 38px;
  border-top: 1.5px solid var(--silver-300);
  pointer-events: none;
}
.sig-x {
  position: absolute;
  left: 2px;
  top: -22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--silver-400);
}
.sig-placeholder {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-70%);
  text-align: center;
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--silver-400);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sig-pad.has-ink .sig-placeholder { opacity: 0; }

.sig-actions {
  display: flex;
  gap: 10px;
}
#sig-clear-btn { flex: 0 0 34%; }
#sig-accept-btn { flex: 1 1 auto; }

.btn--ghost {
  background: var(--white);
  color: var(--gx-ink);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
}
.btn--ghost:active { transform: translateY(1px); }

/* ---------- Fill animation ---------- */
.fill-stage {
  position: relative;
  width: 130px;
  height: 224px;
  margin: auto auto 0;
}

/* White child-proof cap, floating above the vial, off. */
.fill-cap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 124px;
  height: 30px;
  margin-left: -62px;
  background:
    repeating-linear-gradient(90deg, rgba(28, 25, 23, 0.07) 0 2px, rgba(255, 255, 255, 0) 2px 6px),
    linear-gradient(180deg, #FFFFFF 0%, #F1EEE9 62%, #E2DED7 100%);
  border: 1px solid var(--silver-300);
  border-radius: 8px 8px 6px 6px;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -4px 6px rgba(28, 25, 23, 0.10),
    0 3px 7px rgba(28, 25, 23, 0.22);
  transform: rotate(-6deg);
  z-index: 3;
}
.fill-cap::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 4px;
  border-radius: 3px;
  background: rgba(28, 25, 23, 0.08);
}

/* Translucent amber vial, same plastic family as the blister domes. */
.vial {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 112px;
  height: 158px;
  margin-left: -56px;
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, rgba(253, 230, 138, 0.55) 0%, rgba(245, 158, 11, 0.42) 42%, rgba(180, 83, 9, 0.5) 100%);
  box-shadow:
    inset 0 0 0 3px rgba(251, 191, 36, 0.6),
    inset 0 8px 10px rgba(255, 255, 255, 0.4),
    inset 0 -10px 16px rgba(120, 53, 15, 0.3),
    0 10px 22px rgba(180, 83, 9, 0.22);
  overflow: hidden; /* falling pills appear at the neck */
  z-index: 1;
}
.vial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(180, 83, 9, 0.25);
}
.vial-gloss {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 9px;
  width: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06));
  pointer-events: none;
  z-index: 4;
}
/* Soft amber mass rising behind the pile so the fill level reads. */
.vial-fill {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 64px;
  border-radius: 4px 4px 15px 15px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.35), rgba(217, 119, 6, 0.5));
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: 1;
}
.vial-pills {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.vial-pill {
  position: absolute;
  width: 21px;
  height: 8.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFFFFF 0 50%, var(--amber-500) 50% 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 -1.5px 2px rgba(120, 53, 15, 0.4),
    0 1px 1.5px rgba(120, 53, 15, 0.3);
  transform: rotate(var(--r1, 0deg));
}
.vial-pill--flip {
  background: linear-gradient(90deg, var(--amber-500) 0 50%, #FFFFFF 50% 100%);
}

.fill-stage.is-filling .vial-pill {
  animation: pillDrop var(--dur, 0.4s) var(--delay, 0s) both;
}
.fill-stage.is-filling .vial-fill {
  animation: fillRise 2.15s linear 0.15s both;
}
@keyframes pillDrop {
  0%   { transform: translate(var(--dx, 0px), var(--dy, -170px)) rotate(var(--r0, 0deg)); animation-timing-function: cubic-bezier(0.5, 0.03, 0.86, 0.4); }
  74%  { transform: translate(0, 0) rotate(var(--r1, 0deg)); animation-timing-function: ease-out; }
  87%  { transform: translate(0, -2.5px) rotate(var(--r1, 0deg)); animation-timing-function: ease-in; }
  100% { transform: translate(0, 0) rotate(var(--r1, 0deg)); }
}
@keyframes fillRise {
  to { transform: scaleY(1); }
}

/* The cap arrives with a little authority: fast drop, seat, press-turn. */
.fill-stage.is-capping .fill-cap {
  animation: capDrop 0.52s both;
}
.fill-stage.is-capping .vial {
  animation: vialNudge 0.26s 0.25s ease-out;
}
@keyframes capDrop {
  0%   { transform: translateY(0) rotate(-6deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  55%  { transform: translateY(48px) rotate(1deg); animation-timing-function: ease-out; }
  70%  { transform: translateY(44.5px) rotate(0.5deg); animation-timing-function: ease-in; }
  84%  { transform: translateY(48px) rotate(2.5deg); animation-timing-function: ease-out; }
  100% { transform: translateY(48px) rotate(0deg); }
}
@keyframes vialNudge {
  0%, 100% { transform: translateY(0); }
  38% { transform: translateY(2px); }
}

/* Reduced motion: static vial — pills resting, veil full, cap seated. */
.fill-stage--static .fill-cap { transform: translateY(48px) rotate(0deg); }
.fill-stage--static .vial-fill { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .fill-stage.is-filling .vial-pill,
  .fill-stage.is-filling .vial-fill,
  .fill-stage.is-capping .fill-cap,
  .fill-stage.is-capping .vial { animation: none; }
  .fill-stage.is-capping .fill-cap { transform: translateY(48px) rotate(0deg); }
  .fill-stage.is-filling .vial-fill { transform: scaleY(1); }
}

.fill-caption {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-soft);
  min-height: 3.2em; /* two lines — the caption never shifts the stage */
  margin-top: 22px;
  margin-bottom: auto;
  padding: 0 8px;
}
.fill-caption--cap { color: var(--ink); }
.fill-num {
  display: inline-block;
  color: var(--ink);
  animation: numPop 0.24s ease-out;
}
@keyframes numPop {
  from { transform: scale(1.45); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fill-num { animation: none; }
}