/* ==========================================================================
   RxChange — static build additions (vanilla, mobile-first)
   Loaded AFTER styles.css / mockups.css / sections.css so it can refine.
   ========================================================================== */

/* injected icons render as inline flex so they sit on the text baseline */
i[data-ic] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
i[data-ic] svg { display: block; }

/* hero mock confirmation notes — keep each row on one line, truncate gracefully */
.hm-confirm__notes .row { align-items: center; }
.hm-confirm__notes .row > div:first-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-confirm__notes .row .mono { flex-shrink: 0; }

/* hero trust checks row */
.hero__checks {
  display: inline-flex;
  gap: 18px;
  margin-top: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
}
.hero__checks span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------
   Accent palettes via attribute (set by tiny head script + tweaks)
   Default teal lives in :root in styles.css
   --------------------------------------------------------------- */
[data-accent="emerald"] {
  --accent:#059669; --accent-hover:#047857; --accent-soft:#ecfdf5; --accent-tint:#f0fdf4;
  --accent-ink:#064e3b; --accent-ring:rgba(5,150,105,0.20);
  --teal-50:#ecfdf5; --teal-100:#d1fae5; --teal-200:#a7f3d0; --teal-300:#6ee7b7;
  --teal-400:#34d399; --teal-500:#10b981; --teal-600:#059669; --teal-700:#047857;
}
[data-accent="indigo"] {
  --accent:#4f46e5; --accent-hover:#4338ca; --accent-soft:#eef2ff; --accent-tint:#f5f7ff;
  --accent-ink:#312e81; --accent-ring:rgba(79,70,229,0.18);
  --teal-50:#eef2ff; --teal-100:#e0e7ff; --teal-200:#c7d2fe; --teal-300:#a5b4fc;
  --teal-400:#818cf8; --teal-500:#6366f1; --teal-600:#4f46e5; --teal-700:#4338ca;
}
[data-accent="ink"] {
  --accent:#0f172a; --accent-hover:#1e293b; --accent-soft:#f1f5f9; --accent-tint:#f8fafc;
  --accent-ink:#020617; --accent-ring:rgba(15,23,42,0.16);
  --teal-50:#f8fafc; --teal-100:#f1f5f9; --teal-200:#e2e8f0; --teal-300:#cbd5e1;
  --teal-400:#94a3b8; --teal-500:#64748b; --teal-600:#475569; --teal-700:#334155;
}
[data-theme="dark"][data-accent="ink"] {
  --accent:#e2e8f0; --accent-hover:#f1f5f9; --accent-ink:#f8fafc;
  --teal-300:#cbd5e1; --teal-400:#e2e8f0;
}

/* ---------------------------------------------------------------
   NAV — mobile menu + burger
   --------------------------------------------------------------- */
.nav__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  inset: 0 0 0 0;
  top: 0;
  z-index: 60;
  background: var(--bg);
  padding: 88px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .3s var(--ease-emph);
  visibility: hidden;
}
.nav__mobile.is-open { transform: none; visibility: visible; }
.nav__mobile a {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.nav__mobile a.is-active { color: var(--accent); }
.nav__mobile .nav__mobile-cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
}
.nav__mobile .nav__mobile-cta a { border: 0; padding: 0; font-size: 15px; }
.nav__mobile .nav__mobile-cta .btn { font-size: 16px; }

@media (max-width: 800px) {
  .nav__cta .btn:not(.btn--primary) { display: none; }
  .nav__burger { display: flex; }
  /* keep the primary CTA visible on mobile next to burger, but compact */
  .nav__cta { gap: 10px; }
}
@media (max-width: 520px) {
  .nav__cta .btn--primary { display: none; }
}

/* ---------------------------------------------------------------
   TWEAKS — floating FAB + panel (replaces React panel)
   --------------------------------------------------------------- */
.tweaks-fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 70;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-3);
  border: 1px solid var(--line-strong);
  transition: transform .2s var(--ease);
}
.tweaks-fab:hover { transform: translateY(-2px); }
.tweaks-fab svg { width: 20px; height: 20px; }
.tweaks-fab.is-open { transform: scale(0.92); }

.tweaks {
  position: fixed;
  right: 18px; bottom: 78px;
  z-index: 71;
  width: 248px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-4);
  padding: 16px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease-emph);
}
.tweaks.is-open { opacity: 1; transform: none; pointer-events: auto; }
.tweaks__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.tweaks__title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.tweaks__close {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--muted); font-size: 16px; line-height: 1;
}
.tweaks__close:hover { background: var(--panel-2); color: var(--ink); }
.tweaks__sect + .tweaks__sect { margin-top: 14px; }
.tweaks__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.tweaks__swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tw-swatch {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); font-size: 12px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tw-swatch:hover { border-color: var(--line-strong); }
.tw-swatch.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.tw-swatch__c { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.tweaks__seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px;
}
.tw-seg {
  padding: 7px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); cursor: pointer; transition: all .15s var(--ease);
}
.tw-seg.is-on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }

/* ---------------------------------------------------------------
   HERO transfer mockup — CSS-only looping animation
   (drives the status pipeline fill + sequential step completion)
   --------------------------------------------------------------- */
.hero-anim .hm-step-track .hm-step { animation: heroStepOn 7.6s var(--ease) infinite; }
.hero-anim .hm-step-track .hm-step:nth-child(1) { animation-delay: 0.2s; }
.hero-anim .hm-step-track .hm-step:nth-child(2) { animation-delay: 1.4s; }
.hero-anim .hm-step-track .hm-step:nth-child(3) { animation-delay: 3.0s; }
.hero-anim .hm-step-track .hm-step:nth-child(4) { animation-delay: 4.2s; }
@keyframes heroStepOn {
  0%, 100% { background: var(--panel-2); border-color: var(--line); color: var(--ink-3); }
  8%, 92%  { background: var(--accent); border-color: var(--accent); color: #fff; }
}

.hero-anim .hp-rail-fill { animation: heroRail 7.6s var(--ease) infinite; }
@keyframes heroRail {
  0%   { width: 0%; }
  64%  { width: 0%; }
  72%  { width: 26%; }
  80%  { width: 52%; }
  88%  { width: 78%; }
  96%, 100% { width: 100%; }
}
.hero-anim .hp-step .hp-dot { animation: heroDot 7.6s var(--ease) infinite; }
.hero-anim .hp-step:nth-child(1) .hp-dot { animation-delay: 4.9s; }
.hero-anim .hp-step:nth-child(2) .hp-dot { animation-delay: 5.4s; }
.hero-anim .hp-step:nth-child(3) .hp-dot { animation-delay: 5.9s; }
.hero-anim .hp-step:nth-child(4) .hp-dot { animation-delay: 6.4s; }
.hero-anim .hp-step:nth-child(5) .hp-dot { animation-delay: 6.9s; }
@keyframes heroDot {
  0%, 64%  { background: var(--panel); border-color: var(--line); }
  72%, 100% { background: var(--accent); border-color: var(--accent); }
}
.hero-anim .hp-step:nth-child(5) .hp-dot {
  animation-name: heroDotOk;
}
@keyframes heroDotOk {
  0%, 90%  { background: var(--panel); border-color: var(--line); }
  96%, 100% { background: var(--ok); border-color: var(--ok); }
}
/* the moving caret on patient field */
.hero-anim .hm-caret {
  display: inline-block; width: 1.5px; height: 1em;
  background: var(--accent); margin-left: 1px;
  animation: heroBlink 1s steps(2) infinite;
  vertical-align: -2px;
}
@keyframes heroBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-anim * { animation: none !important; }
  .hero-anim .hp-rail-fill { width: 100%; }
}

/* ---------------------------------------------------------------
   MOBILE-FIRST polish across pages
   --------------------------------------------------------------- */

/* Tap targets + smoother type scaling on phones */
@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .btn { padding: 13px 18px; }
  .btn-lg { padding: 15px 20px; font-size: 15px; }
  .h-display { letter-spacing: -0.03em; }
  .lede { font-size: 16px; }

  /* hero: stack, center, breathing room */
  .hero__mock { transform: none !important; }
  .hero-mock { font-size: 12px; }

  /* feature splits already stack via styles.css; tighten gap */
  .section { padding: 56px 0; }
  .section--tight { padding: 44px 0; }

  /* stats + momentum: 2-up reads better than cramped 4-up */
  .stats-bar__cell { gap: 10px; }
}

/* Hero mock: hide internal scroll bleed on small screens */
@media (max-width: 460px) {
  .hero-mock__chrome .urlbar { font-size: 10px; }
  .hm-float { display: none; }
}

/* Compare table: make it readable on phones (stack plan emphasis) */
@media (max-width: 560px) {
  .compare-table__head, .compare-table__row { grid-template-columns: 1.3fr 0.7fr 0.7fr; }
  .compare-table__plan .px { display: none; }
  .compare-table__row .lbl { font-size: 12px; padding-right: 6px; }
}

/* Footer: stack cleanly */
@media (max-width: 600px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Waitlist hero: form first feels natural on mobile? keep copy first but
   ensure the form card has nice spacing */
@media (max-width: 960px) {
  .wl-hero__form { max-width: 520px; margin: 0 auto; width: 100%; }
}

/* Prevent any horizontal overflow site-wide */
html, body { max-width: 100%; overflow-x: hidden; }
.mini-frame, .hero-mock { max-width: 100%; }

/* CRITICAL mobile fix: let grid/flex children shrink below content min-width
   so wide mockups (admin charts, marketplace cards) don't force overflow. */
.feat-split__copy,
.feat-split__mock,
.feat-bullets li,
.feat-bullets li > div,
.hero__col,
.hero__mock,
.wl-hero__copy,
.wl-hero__form,
.wl-how__copy,
.wl-how__step > div,
.feat-deep-list .row,
.deep-section__mock { min-width: 0; }

.feat-split__mock, .deep-section__mock { overflow: hidden; }

/* Make the API endpoint rows scroll nicely on mobile */
@media (max-width: 700px) {
  .mini-frame__body { -webkit-overflow-scrolling: touch; }
}

/* Features TOC: turn into a horizontal scroller on mobile (handled in
   sections.css) — ensure it doesn't stick awkwardly */
@media (max-width: 920px) {
  .feat-toc { position: relative !important; top: 0 !important; }
}