/* Phone-mode styles for the Playground — see pg-phone.js for why and when.
 *
 * Everything here is scoped to `html.pg-phone`, never a bare media query: the
 * desktop testing harness (/iphone.html) frames these pages at a real phone
 * viewport but on a desktop, where `pointer: coarse` is false. The class is
 * the single source of truth, so the harness and a real handset render
 * byte-identically.
 *
 * The `html.pg-phone` prefix also buys specificity over tour.js's runtime
 * <style> block, which is injected after this sheet and would otherwise win.
 */

html.pg-phone {
  --pg-safe-t: env(safe-area-inset-top, 0px);
  --pg-safe-b: env(safe-area-inset-bottom, 0px);
  --pg-topbar-h: 48px;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. Entry flow (/start) — the typeform already reflows; this is the phone
      polish: notch insets, thumb-sized targets, and no iOS focus-zoom.
   ───────────────────────────────────────────────────────────────────────── */
html.pg-phone .pg-stage {
  padding: calc(var(--pg-safe-t) + 58px) 16px calc(var(--pg-safe-b) + 28px);
  /* Momentum scroll, and let the flex child start at the top when it's tall. */
  -webkit-overflow-scrolling: touch;
}
html.pg-phone .pg-q { width: 100%; }
html.pg-phone .pg-q h2 { font-size: 27px; line-height: 1.15; margin-bottom: 18px; }
html.pg-phone .pg-q .pg-sub { font-size: 15px; }
/* iOS zooms the viewport for any focused input under 16px and never zooms
   back out — the small "in your own words" box was the one offender. */
html.pg-phone .pg-inp.pg-sm { font-size: 16px; padding: 13px 15px; }
html.pg-phone .pg-inp { padding: 14px 16px; font-size: 17px; }
html.pg-phone .pg-opt { padding: 14px 16px; margin-bottom: 9px; }
html.pg-phone .pg-opt small { font-size: 12.5px; }
/* Thumb reach beats density: one EMR per row until the logos get cramped. */
html.pg-phone .pg-optgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
html.pg-phone .pg-optgrid .pg-opt { min-height: 72px; padding: 12px 10px; }
html.pg-phone .pg-optgrid .pg-opt img { max-height: 24px; max-width: 92px; }
html.pg-phone .pg-cta { padding: 14px 24px; font-size: 16px; }
html.pg-phone .pg-row { margin-top: 16px; }
html.pg-phone .pg-row .pg-cta { flex: 1; justify-content: center; }
html.pg-phone .pg-chip { padding: 10px 15px; font-size: 14px; }
html.pg-phone .pg-logo { top: calc(var(--pg-safe-t) + 12px); left: 16px; font-size: 13px; }
html.pg-phone .pg-back { top: calc(var(--pg-safe-t) + 12px); right: 16px; }
html.pg-phone .pg-lockup img { height: 30px; }
html.pg-phone .pg-badge { width: 74px; height: 74px; }
/* The dev bar is a desktop affordance. It has to stay OFF the bottom edge —
   that's where every screen's primary CTA lives on a phone. */
html.pg-phone #dbg {
  top: calc(var(--pg-safe-t) + 44px); right: 8px; left: 8px; bottom: auto;
  font-size: 11px; max-width: none; justify-content: flex-start;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. The play surface (/play, shell.html)
      Marketing chrome and the EMR switcher are desktop lead-gen furniture and
      they cost ~150px of a 852px screen. A phone gets one compact bar.
   ───────────────────────────────────────────────────────────────────────── */
html.pg-phone body { overscroll-behavior: none; }
html.pg-phone #chrome .header,
html.pg-phone #chrome #bar { display: none !important; }

/* Hidden unless phone mode is on — the element ships in shell.html always. */
#pg-topbar { display: none; }

html.pg-phone #pg-topbar {
  display: flex; align-items: center; gap: 8px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100001;
  height: calc(var(--pg-topbar-h) + var(--pg-safe-t));
  padding: var(--pg-safe-t) 10px 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pg-line, #e2ebe6);
  font-family: 'Thicccboi', system-ui, -apple-system, sans-serif;
}
html.pg-phone #pg-topbar .pg-tb-emr {
  font-size: 14px; font-weight: 700; color: #1a1e1c; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.pg-phone #pg-topbar .pg-tb-emr small {
  display: block; font-size: 10.5px; font-weight: 600; color: #8a5a00; letter-spacing: .02em;
}
html.pg-phone #pg-topbar #pg-tb-back,
html.pg-phone #pg-topbar button {
  flex: none; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--pg-line, #e2ebe6); background: #fff; color: #1a1e1c;
  font: 600 13px/1 'Thicccboi', system-ui, sans-serif; display: grid; place-items: center; cursor: pointer;
}
html.pg-phone #pg-topbar #pg-tb-back { text-decoration: none; font-size: 22px; line-height: 0; }
html.pg-phone #pg-topbar button:active { background: #f1f5f3; }
html.pg-phone #pg-topbar .pg-tb-zoom { display: flex; gap: 0; }
html.pg-phone #pg-topbar .pg-tb-zoom button { border-radius: 0; min-width: 36px; font-size: 15px; }
html.pg-phone #pg-topbar .pg-tb-zoom button:first-child { border-radius: 10px 0 0 10px; }
html.pg-phone #pg-topbar .pg-tb-zoom button:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
html.pg-phone #pg-topbar .pg-tb-fit { font-size: 11.5px !important; font-weight: 700; }

/* The EMR fills everything under the bar; the panel sheet floats over it. */
html.pg-phone #stage {
  top: calc(var(--pg-topbar-h) + var(--pg-safe-t)) !important;
  left: 0; right: 0; bottom: 0;
}
html.pg-phone #note { width: 100%; height: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   3. Tour cards become bottom sheets.
      A 410px floating card positioned beside a spotlight is a desktop idea.
      On a phone the instruction belongs at the bottom, in the thumb zone,
      with the spotlight above it.
   ───────────────────────────────────────────────────────────────────────── */
html.pg-phone #ptour-card {
  top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-width: none !important; width: 100% !important;
  border-radius: 20px 20px 0 0;
  padding: 16px 18px calc(14px + var(--pg-safe-b));
  /* An instruction, not a page. At 58vh this crushed the panel to its floor —
     the lesson was burying the product it's teaching. Capped, and it scrolls
     inside itself when a step has a lot to say. */
  max-height: 38vh; max-height: calc(var(--pg-vh, 100vh) * .38);
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .3);
  transition: transform .25s ease;
  padding-top: 20px;
}
/* Grab handle — signals "this is a sheet", matches the panel sheet below, and
   the top 26px of the card toggles collapsed (wired in tour.js). */
html.pg-phone #ptour-card::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 2px; background: #dfe6e2;
  transition: width .18s ease, background .18s ease;
}
html.pg-phone #ptour-card.ptour-collapsed::before { width: 54px; background: #bcd3c7; }

/* Collapsed: the instruction becomes a one-line coach bar so the panel it's
   pointing at is actually on screen. Title, the "what to do" line and the
   buttons survive; prose, transcripts and dots go. */
html.pg-phone #ptour-card.ptour-collapsed {
  max-height: none;
  padding-top: 18px; padding-bottom: calc(10px + var(--pg-safe-b));
  overflow: hidden;
}
html.pg-phone #ptour-card.ptour-collapsed > p,
html.pg-phone #ptour-card.ptour-collapsed .ptour-script,
html.pg-phone #ptour-card.ptour-collapsed .ptour-quote,
html.pg-phone #ptour-card.ptour-collapsed .ptour-choices,
html.pg-phone #ptour-card.ptour-collapsed .ptour-install,
html.pg-phone #ptour-card.ptour-collapsed .ptour-ack,
html.pg-phone #ptour-card.ptour-collapsed #ptour-dots { display: none !important; }
html.pg-phone #ptour-card.ptour-collapsed h3 {
  font-size: 15px; margin-bottom: 2px; padding-right: 30px;
}
html.pg-phone #ptour-card.ptour-collapsed .ptour-wait {
  margin-bottom: 8px; font-size: 12.5px;
}
/* "there's more here" affordance on the collapsed bar */
html.pg-phone #ptour-card.ptour-collapsed h3::after {
  content: " ⌃"; color: #b5bdb9; font-weight: 400;
}
html.pg-phone #ptour-card h3 { font-size: 17px; }
html.pg-phone #ptour-card .ptour-script { max-height: 30vh; font-size: 14px; }
/* The three record choices stay side by side. Stacked they ran past the
   bottom of the card and the scroll wasn't obvious, so the third option was
   effectively invisible; three columns fit the whole decision on screen at
   once, which is what it needs to be. Centred and tighter to survive ~115px
   of width each. */
html.pg-phone #ptour-card .ptour-choices { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
html.pg-phone #ptour-card .ptour-choice {
  padding: 9px 6px; gap: 3px; border-radius: 10px;
  align-items: center; text-align: center; justify-content: flex-start;
}
html.pg-phone #ptour-card .ptour-choice b { font-size: 11.5px; line-height: 1.22; }
html.pg-phone #ptour-card .ptour-choice span { font-size: 10px; line-height: 1.22; }
html.pg-phone #ptour-card .ptour-skip { top: 12px; right: 10px; font-size: 24px; padding: 6px 10px !important; }
/* Back/Next stay put while the body scrolls. A step with more to say than
   38vh would otherwise hide its own Next button below the fold, and there is
   nothing on screen to suggest the card scrolls at all. Both the actions and
   the progress dots are sticky, the dots pinned lower so the two stack. */
html.pg-phone #ptour-actions {
  /* Clear of the dots' own sticky band (26px + safe area, fixed below) so the
     two stack instead of the later-painting dots clipping the button, and a
     higher z-index so a pixel of drift can't put it back. */
  position: sticky; bottom: calc(26px + var(--pg-safe-b)); z-index: 3;
  gap: 8px; background: #fff;
  /* Bleed to the card's edges so the footer is a solid band, not a stripe
     with text creeping up either side of it. */
  margin: 4px -18px 0; padding: 10px 18px 0;
}
/* Fade the body into the footer instead of guillotining a line of text. */
html.pg-phone #ptour-actions::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 20px; pointer-events: none;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}
html.pg-phone #ptour-actions button { padding: 11px 18px; font-size: 14px; }
html.pg-phone #ptour-actions .ptour-next { flex: 1; }
html.pg-phone #ptour-dots {
  position: sticky; bottom: 0; z-index: 2;
  background: #fff; margin: 0 -18px calc(-14px - var(--pg-safe-b));
  /* Height pinned so the offset above is exact: 5 + 7 + 14 = 26px + safe. */
  padding: 5px 18px calc(14px + var(--pg-safe-b));
  height: 7px; box-sizing: content-box;
}
/* Collapsed, the card is already one line — nothing to scroll past. */
html.pg-phone #ptour-card.ptour-collapsed #ptour-actions {
  position: static; box-shadow: none; padding-top: 0;
}
html.pg-phone #ptour-card input, html.pg-phone #ptour-card select.ptour-input { font-size: 16px; padding: 12px 14px; }
/* The "Comprehend is writing" strip: keep it a strip, just full-width. */
html.pg-phone #ptour-card.ptour-writing {
  max-width: none !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  padding: 12px 16px calc(10px + var(--pg-safe-b)); border-radius: 16px 16px 0 0;
}
html.pg-phone #ptour-card.ptour-wide { max-width: none !important; }

/* Home card / module picker / finish cards.

   `.pg-blur` is a flex container with `overflow: auto` and the card takes
   `margin: auto`. A card TALLER than the screen then centres, overflows both
   ends — and the top half is unreachable, because you can't scroll back past
   the start of a scroll container. Top-align it on a phone, where the card is
   routinely taller than the viewport, and the whole thing scrolls. */
html.pg-phone .pg-blur {
  align-items: flex-start;
  /* `inset: 0` puts the overlay's first 48px behind the fixed top bar, which
     is what was eating the card's heading. Clear the bar at the top and the
     checklist pill at the bottom. */
  padding: calc(var(--pg-safe-t) + var(--pg-topbar-h) + 6px) 9px calc(var(--pg-safe-b) + 46px);
  box-sizing: border-box;
}
html.pg-phone .pg-modcard {
  width: 100% !important; max-width: none !important;
  margin: 0 auto !important;
  padding: 15px 14px !important;
  border-radius: 18px !important;
}
/* Tightened so the whole checklist lands above the fold — five rows plus the
   hand-off note in ~640px, rather than making them hunt for step 4. */
html.pg-phone .pg-modcard h2 { font-size: 17px; margin-bottom: 2px; }
html.pg-phone .pg-modcard .pg-sub { font-size: 12px; margin: 0 0 7px; line-height: 1.35; }
html.pg-phone .pg-modcard .pg-foot { flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 11.5px; }
html.pg-phone .pg-modcard .pg-foot .pg-primary { width: 100%; padding: 12px 18px; font-size: 15px; }

/* Rows stack on a phone: at 393px a right-hand time column squeezes the
   description into a 3-word ribbon. Icon + title on top, description under
   it at full width, the time/tag last. */
html.pg-phone .pg-mrow {
  display: grid; grid-template-columns: 30px 1fr; gap: 2px 9px;
  align-items: center; padding: 8px 10px; text-align: left;
  border-radius: 11px; margin-bottom: 5px;
}
html.pg-phone .pg-mrow .pg-ic {
  grid-row: 1; grid-column: 1;
  width: 30px; height: 30px; border-radius: 9px; font-size: 13px;
}
html.pg-phone .pg-mrow > div { grid-row: 1; grid-column: 2; }
html.pg-phone .pg-mrow .pg-nm { font-size: 13.5px; }
html.pg-phone .pg-mrow .pg-ds { font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
html.pg-phone .pg-mrow .pg-tm { grid-row: 2; grid-column: 2; margin-left: 0; white-space: normal; font-size: 11.5px; }
/* A finished step already says so with a green check — the second "done" is
   a whole grid row of nothing, and the budget here is the fold. */
html.pg-phone .pg-mrow.pg-done .pg-tm { display: none; }

/* A step the phone genuinely cannot do — say so instead of dimming it. */
html.pg-phone .pg-mrow.pg-needs-desktop { opacity: 1; }
html.pg-phone .pg-mrow.pg-needs-desktop .pg-ic { background: #eef2f6; color: #8a928f; border-color: #dfe5ea; }
html.pg-phone .pg-mrow.pg-needs-desktop .pg-nm,
html.pg-phone .pg-mrow.pg-needs-desktop .pg-ds { color: #8a928f; }
.pg-desktop-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 0;
  background: #eef2f6; color: #6b736f; border-radius: 999px;
  padding: 2px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; vertical-align: 1px; white-space: nowrap;
}

/* The phone hand-off banner on the module home card. */
.pg-phone-note {
  background: #f3faf6; border: 1.5px solid #cfeadd; border-radius: 11px;
  padding: 9px 11px; margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: #1a1e1c;
}
.pg-phone-note b { color: #1a1e1c; }
.pg-phone-note p { margin: 6px 0 0; }
.pg-phone-note--done { background: #ebfff7; border-color: #2dce8f; }
.pg-phone-note-url { color: #6b736f; font-size: 11.5px; }
.pg-phone-copy {
  margin-top: 10px; border: 1.5px solid #2dce8f; background: #fff; color: #1a9e69; border-radius: 999px; padding: 9px 16px; font: 700 13px/1 inherit;
  font-family: inherit; cursor: pointer;
}
.pg-phone-copy:active { background: #ebfff7; }

/* Checklist pill: keep it clear of the panel sheet and the home indicator. */
html.pg-phone #pg-ck { bottom: calc(var(--pg-safe-b) + 10px) !important; left: 10px !important; right: 10px !important; }
html.pg-phone #pg-ck .pg-panel { width: auto !important; max-width: none !important; }

/* Toasts are a centred 'left: 50%; transform: translateX(-50%)' card sized
   for a laptop — at 393px that hangs off both edges. Pin it to the top
   instead, clear of the notch and of both bottom sheets. */
html.pg-phone .pg-toast {
  left: 10px !important; right: 10px !important;
  top: calc(var(--pg-safe-t) + var(--pg-topbar-h) + 10px) !important;
  transform: none !important;
  width: auto !important; max-width: none !important;
  padding: 14px 16px !important;
  box-sizing: border-box;
}
html.pg-phone .pg-toast h3 { font-size: 17px; }
html.pg-phone .pg-toast p { font-size: 13.5px; }
html.pg-phone .pg-toast .pg-e { font-size: 28px; }

/* ─────────────────────────────────────────────────────────────────────────
   4. Landing page (/) — the EMR picker, single column.
   ───────────────────────────────────────────────────────────────────────── */
html.pg-phone .hero { padding: calc(var(--pg-safe-t) + 28px) 18px 24px; }
html.pg-phone .hero h1 { font-size: 30px; line-height: 1.15; }

/* ── Desktop hand-off on the post-Magic card ──────────────────────────────
   Four digits read off a phone at arm's length, then the three ways to get
   them onto a laptop. Sized against the bottom sheet, not the desktop card. */
.pg-hcode { display: flex; gap: 7px; justify-content: center; margin: 10px 0 8px; }
.pg-hcode i {
  flex: 0 0 auto; min-width: 46px; padding: 10px 0; border-radius: 11px;
  background: #fff; border: 1.5px solid var(--pg-line, #e3e8e5);
  font: 800 25px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal;
  text-align: center;
}
.pg-hshare { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
/* Two classes deep on purpose: the card sits inside a container whose generic
   `button` reset (border: 0; background: none) out-specifies a lone
   .pg-phone-copy, which left these rendering as bare text. */
.pg-hshare .pg-phone-copy {
  flex: 1 1 calc(50% - 4px); min-width: 0; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px solid #2dce8f; background: #fff; color: #1a9e69;
  border-radius: 999px; padding: 10px 14px; font: 700 13px/1 inherit; font-family: inherit;
}
.pg-hshare .pg-phone-copy:not(.pg-phone-copy--ghost) { flex-basis: 100%; }
.pg-hshare .pg-phone-copy--ghost {
  border-color: var(--pg-line, #e3e8e5); color: var(--pg-ink, #1a1e1c);
}
.pg-hshare .pg-phone-copy:active { background: #ebfff7; }
.pg-hnote { margin: 8px 0 0; font-size: 12px; color: var(--pg-ink3, #7b8b83); text-align: center; }