/* =============================================================
   ENROLLMENT-MODAL — V29 v0.6.1 Fix #6
   Lemon-themed inline modal styles. No external deps; matches
   the rest of the V27.1 component palette via lemon.css tokens.
   ============================================================= */

html.em-open, html.em-open body { overflow: hidden; }

.em-root { position: fixed; inset: 0; z-index: 2200; }

/* DAV-170 — Phase 6: BundledCard host inside enrollment modal */
.em-bundled-card-host { margin: 0 0 16px; }
.em-bundled-card-host:empty { display: none; }

.em-veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: em-fadein .14s ease-out;
}

@keyframes em-fadein { from { opacity: 0; } to { opacity: 1; } }

.em-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--lemon-paper, #fdf8e8);
  color: var(--lemon-ink, #1a1a1a);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.18);
  padding: 32px 32px 24px;
  font-family: var(--lemon-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  animation: em-pop .18s cubic-bezier(.22,.61,.36,1);
}

@keyframes em-pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.em-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--lemon-ink, #1a1a1a);
  cursor: pointer;
}
.em-close:hover { background: rgba(0,0,0,.06); }

.em-title {
  font-family: var(--lemon-serif, "Fraunces", Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.em-sub {
  font-size: 14px;
  line-height: 1.45;
  color: var(--lemon-mute, #4a4a4a);
  margin: 0 0 20px;
}

/* "What happens next" — sits between the title and the plan banner so the
   answer to "what am I signing up for" arrives before the first field.
   Reuses the mint accent already carrying the same promise at .em-terms-pay,
   so the reassurance reads as one idea top and bottom. */
.em-next {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--em-rule, #DDE9EE);
  border-left: 3px solid var(--em-mint-ink, #0d5c46);
  border-radius: 12px;
  background: #fff;
}
/* The eyebrow + pill measure ~324px against a ~324px column in the dual-pane
   layout — exactly at the wrap boundary, so this row flips between one and
   two lines on tiny width changes. space-between (rather than margin-left:auto
   on the pill) makes BOTH outcomes look deliberate: side by side when it fits,
   and left-aligned under the eyebrow when it wraps, instead of an orphaned
   pill floating against the right edge. */
.em-next-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.em-next-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--em-mute, #4A6678);
}
.em-next-flag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--em-mint-ink, #0d5c46);
  background: var(--em-mint-2, #E2F5EE);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.em-next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: em-next;
}
.em-next-steps li {
  position: relative;
  counter-increment: em-next;
  padding-left: 30px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--em-mute, #4A6678);
}
.em-next-steps li + li { margin-top: 9px; }
.em-next-steps li b {
  font-weight: 600;
  color: var(--em-ink, #0E2A3A);
}
/* Not-ACA disclosure. Sits inside the same block as the steps, above the
   first field — a shopper cannot reach submit without passing it. */
.em-next-disclosure {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--em-rule, #DDE9EE);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--em-mute, #4A6678);
}
.em-next-disclosure b {
  font-weight: 700;
  color: var(--em-ink, #0E2A3A);
}
.em-next-steps li::before {
  content: counter(em-next);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--em-mint-2, #E2F5EE);
  color: var(--em-mint-ink, #0d5c46);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
@media (max-width: 480px) {
  .em-next { padding: 12px 14px; }
}

.em-form { display: flex; flex-direction: column; gap: 14px; }

.em-row { display: flex; flex-direction: column; gap: 4px; }
.em-row--triple { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 10px; }
.em-cell { display: flex; flex-direction: column; gap: 4px; }
.em-cell--wide { grid-column: span 1; }

.em-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lemon-mute, #4a4a4a);
  font-weight: 600;
}

.em-form input,
.em-form select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid rgba(0,0,0,.16);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.em-form input:focus,
.em-form select:focus {
  outline: none;
  border-color: var(--lemon-yellow, #f5c518);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
}

.em-form input:invalid:not(:placeholder-shown) {
  border-color: #d23a3a;
}

.em-error {
  min-height: 18px;
  font-size: 13px;
  color: #b81f1f;
  margin: 2px 0 -6px;
}

/* Terms line above the submit action. Carries the live monthly total, the
   date coverage actually starts, and the fact that nothing is due yet, so
   the amount stays visible without the button implying a charge. */
.em-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--em-rule, #DDE9EE);
  font-size: 13px;
  color: var(--em-mute, #4A6678);
}
.em-terms-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--em-ink, #0E2A3A);
}
.em-terms-when { flex: 1 1 auto; }
.em-terms-pay {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--em-mint-ink, #0d5c46);
  background: var(--em-mint-2, #E2F5EE);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .em-terms-when { flex-basis: 100%; }
}

/* v1.9 · TCPA marketing consent — single checkbox, unchecked by default,
   compact disclosure text. Deliberately quiet styling (small, muted) so it
   reads as an optional aside, not a gate the shopper has to clear. */
.em-consent {
  margin-top: 14px;
}
.em-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.em-consent-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--em-ink, #0E2A3A);
}
.em-consent-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--em-mute, #4A6678);
}

.em-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.em-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .08s, box-shadow .12s, background .12s;
}
.em-btn:active { transform: translateY(1px); }
.em-btn:disabled { opacity: .6; cursor: not-allowed; }

.em-btn--ghost {
  background: transparent;
  border-color: rgba(0,0,0,.18);
  color: inherit;
}
.em-btn--ghost:hover { background: rgba(0,0,0,.04); }

.em-btn--primary {
  background: var(--lemon-yellow, #f5c518);
  color: #1a1a1a;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.em-btn--primary:hover { box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.em-btn--primary:active { box-shadow: 0 2px 0 rgba(0,0,0,.18); }

.em-fine {
  font-size: 11px;
  color: var(--lemon-mute, #4a4a4a);
  margin: 14px 0 0;
  line-height: 1.5;
}

@media (max-width: 540px) {
  .em-modal { padding: 22px 20px 18px; border-radius: 14px; }
  .em-title { font-size: 22px; }
  .em-row--triple { grid-template-columns: 1fr 1fr 1fr; }
  .em-actions { flex-direction: column-reverse; }
  .em-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .em-veil, .em-modal { animation: none; }
}

/* =============================================================
   V31 Task 3.2 — Inline takeover mode. Originally desktop-only
   (>=768px); mobile fell back to the fixed-overlay rules above.
   V38 Fix Agent 3 — enroll-step.js (the Stage identity/enroll step
   used by 38a/38c/38d) always mounts EnrollmentModal with
   mountMode:'inline', at every viewport, not just desktop. Gating
   this reset behind min-width:768px left mobile on the base
   .em-root/.em-modal overlay rules (position:fixed + max-height:
   calc(100vh - 48px) + overflow:auto) — and that .em-root sits
   inside the Stage's translateX-transformed .stage-track, where a
   transformed ancestor becomes the containing block for any
   position:fixed descendant, so the "fixed" modal wasn't pinned to
   the viewport at all: it rendered off-position and clipped to a
   stale max-height, hiding the name/email/address fields entirely
   (walkthrough-evidence 38c D3 — required fields off-screen after
   the tobacco question). Making the in-flow reset viewport-
   independent fixes both the mispositioning and the clipping; the
   only genuinely desktop-only concern (capping the inner column's
   reading width) stays scoped below.
   ============================================================= */
/* Root wrapper of an inline-mounted modal — no fixed positioning. */
.em-root[data-em-mount="inline"] {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: 100%;
}
.em-modal.em-modal--inline {
  position: relative;        /* NOT fixed */
  width: 100%;
  max-width: none;
  margin: 0 auto;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 24px;
  inset: auto;
  top: auto;
  left: auto;
  transform: none;
  max-height: none;
  overflow: visible;
}
/* Defang the veil in inline mode — strip its absolute positioning,
   backdrop dimming, blur, and flex centering. The veil is a PARENT of
   .em-modal, so `display: none` would hide the modal too (bug found via
   puppeteer end-to-end test post-SHIPPED). */
.em-root[data-em-mount="inline"] .em-veil {
  position: static;
  inset: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  padding: 0;
}
@media (max-width: 540px) {
  .em-modal.em-modal--inline { padding: 22px 4px; }
}
@media (min-width: 768px) {
  /* The inner card retains its visual identity but caps width so it
     reads comfortably inside the main pane. (.em-card is currently
     unused by the markup; kept for forward-compat with a future
     inner-card wrapper.) */
  .em-modal.em-modal--inline .em-card {
    margin: 0 auto;
    max-width: 720px;
  }
}

/* =============================================================
   v0.8 D — Addon section above the form. NOT sneaky:
   • visible "Pre-selected · uncheck to skip" badge
   • running total updates live (data-em-total)
   • clear price per item
   ============================================================= */
.em-addons {
  margin: 0 0 18px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, rgba(255, 200, 87, 0.10) 0%, transparent 100%);
  border: 1px dashed var(--ink, #0E2A3A);
  border-radius: 14px;
}
.em-addons-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.em-addons-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink, #0E2A3A);
}
.em-addons-pre {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute, #4A6678);
  background: rgba(255, 255, 255, 0.7);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule, #DDE9EE);
  transition: opacity 240ms ease;
}
.em-addons-sub {
  font-size: 13px;
  color: var(--mute, #4A6678);
  margin: 0 0 14px;
  line-height: 1.45;
}
.em-addons-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
/* V36 UX Phase 5 / DAV-N17 — AddonRow host. Stacked rows with gentle gap
 * so the always-open layout breathes between options. The [hidden] attr
 * (set when AddonRow isn't loaded) defaults to display:none. */
.em-addons-host[data-em-addons-host] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.em-addons-host[data-em-addons-host][hidden] {
  display: none;
}
/* When AddonRow has mirrored selection state, the legacy grid is kept in
 * the DOM as the POST source of truth but visually hidden. */
.em-addons-grid--mirror[hidden] {
  display: none;
}
.em-addon {
  display: block;
  cursor: pointer;
  position: relative;
}
.em-addon input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.em-addon-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--rule, #DDE9EE);
  border-radius: 10px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.em-addon:hover .em-addon-tile {
  border-color: var(--ink, #0E2A3A);
  transform: translateX(1px);
}
.em-addon input:focus-visible + .em-addon-tile {
  outline: 2px solid var(--lemon, #FFC857);
  outline-offset: 2px;
}
.em-addon input:checked + .em-addon-tile {
  background: var(--lemon, #FFC857);
  border-color: var(--ink, #0E2A3A);
  box-shadow: 2px 2px 0 var(--ink, #0E2A3A);
  transform: translate(-1px, -1px);
}
.em-addon-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.em-addon-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.em-addon-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #0E2A3A);
}
.em-addon-sub {
  font-size: 12.5px;
  color: var(--mute, #4A6678);
  line-height: 1.3;
}
.em-addon-price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink, #0E2A3A);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.em-addon-price small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--mute, #4A6678);
  margin-left: 1px;
}
.em-addons-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--ink, #0E2A3A);
  border-radius: 10px;
}
.em-addons-total-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute, #4A6678);
}
.em-addons-total-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--ink, #0E2A3A);
  font-variant-numeric: tabular-nums;
}
.em-addons-total-amount small {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute, #4A6678);
  margin-left: 2px;
}
@media (max-width: 480px) {
  .em-addons { padding: 14px 14px 10px; }
  .em-addon-tile { padding: 10px; gap: 10px; }
  .em-addon-icon { font-size: 20px; width: 28px; }
}

/* =============================================================
   V33A F8 / DAV-36 + DAV-37 / R3 + R11 — Confirmation banner +
   Edit-details panel + Mailing-address fieldset
   ============================================================= */

.em-banner {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.em-banner-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.em-banner-title {
  font-family: var(--lemon-serif, "Fraunces", Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--lemon-ink, #1a1a1a);
}

.em-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}

.em-banner-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.em-banner-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lemon-mute, #4a4a4a);
  font-weight: 600;
}

.em-banner-value {
  font-size: 14px;
  color: var(--lemon-ink, #1a1a1a);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v1.9 · name-split — the inline first/last name ask spans the full banner
   grid width and lays its two halves out side by side (row, not the default
   column every other .em-banner-row uses). */
.em-banner-row--inline-name {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 10px;
}
.em-name-part {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

@media (max-width: 480px) {
  .em-banner-grid { grid-template-columns: 1fr; gap: 6px; }
  .em-banner { padding: 14px; }
  .em-banner-row--inline-name { flex-direction: row; }
}

.em-fieldset {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.em-legend {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--lemon-mute, #4a4a4a);
  padding: 0 6px;
}

/* =============================================================
   DAV-195 — "Your details" always-visible confirmable rows.
   Replaces the old collapsed "Edit details" <details> accordion.
   Neo-brutalist: ink 2px borders, lemon accent, hard 2px shadows,
   uppercase tracked micro-labels, 44px touch targets.
   ============================================================= */

.em-details-note {
  font-size: 12px;
  color: var(--mute, #4A6678);
  margin: 0;
  line-height: 1.4;
}

.em-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.em-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.em-detail-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 2px solid var(--rule, #DDE9EE);
}

.em-detail-view[hidden] { display: none; }

.em-detail-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #0E2A3A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.em-detail-editbtn {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink, #0E2A3A);
  background: transparent;
  border: 2px solid var(--ink, #0E2A3A);
  border-radius: 8px;
  padding: 0 12px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.em-detail-editbtn:hover,
.em-detail-editbtn:focus-visible {
  background: var(--lemon, #FFC857);
  box-shadow: 2px 2px 0 var(--ink, #0E2A3A);
  transform: translate(-1px, -1px);
}
.em-detail-editbtn:active {
  box-shadow: none;
  transform: translate(0, 0);
}

.em-detail-editor {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.em-detail-editor[hidden] { display: none; }
.em-detail-editor input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
}

.em-detail-confirm {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink, #0E2A3A);
  background: var(--lemon, #FFC857);
  border: 2px solid var(--ink, #0E2A3A);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink, #0E2A3A);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.em-detail-confirm:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink, #0E2A3A); }
.em-detail-confirm:active { transform: translate(1px, 1px); box-shadow: none; }

@media (max-width: 480px) {
  .em-details-grid { grid-template-columns: 1fr; }
}