@patientos/website-kit 0.1.0

package/dist/website-kit.css

@@ -0,0 +1,3580 @@
+/* ============================================================================
+ * @patientos/website-kit — compiled stylesheet
+ *
+ * Self-contained. NO Tailwind, NO shadcn, NO dashboard app.css. Hand-authored
+ * so the generated clinic websites are fully styleable from the kit alone (D2).
+ * Every rule reads `--sk-*` tokens with inline fallbacks, so the kit looks
+ * reasonable even before <ThemeProvider>/<WebsiteShell> injects a theme.
+ * ==========================================================================*/
+
+/* ── token slots + fallbacks ──────────────────────────────────────────────*/
+:where([data-sk-theme]),
+:root {
+  --sk-brand: #1f6feb;
+  --sk-brand-foreground: #ffffff;
+  --sk-neutral: #f4f6f8;
+  --sk-neutral-foreground: #1b2733;
+  --sk-accent: #0fb39a;
+  --sk-background: #ffffff;
+  --sk-foreground: #1b2733;
+  --sk-muted: #5b6b7a;
+  /* Destructive intent (cancel an appointment, a failed write). NOT clinic-supplied:
+   * `patientSurfaceTheme` allow-lists brand/accent/radius/font only, and "the colour
+   * that means danger" is not a branding decision on a patient surface. */
+  --sk-danger: #b3261e;
+
+  --sk-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
+  --sk-font-heading: var(--sk-font);
+  --sk-font-size-base: 1rem;
+  --sk-font-size-sm: 0.875rem;
+  --sk-font-size-lg: 1.25rem;
+  --sk-font-size-h2: 2rem;
+  --sk-font-size-h1: 3rem;
+
+  --sk-space: 0.5rem;
+  --sk-radius: 0.625rem;
+}
+
+/* ── base ──────────────────────────────────────────────────────────────────*/
+[data-sk-theme] {
+  color: var(--sk-foreground);
+  background: var(--sk-background);
+  font-family: var(--sk-font);
+  font-size: var(--sk-font-size-base);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* `.sk-flow` is listed alongside the theme root because an ISLAND does not require one:
+   the funnel mounts into a clinic-authored page, and the Pocket Doc funnel page has no
+   `[data-sk-theme]` wrapper at all. It looked fine only because that site imports
+   Tailwind, whose preflight sets this globally — i.e. the island's layout depended on a
+   reset the host happened to ship. A clinic page without one had every padded input
+   overflow its grid column. An island pays for its own reset. */
+[data-sk-theme] *,
+[data-sk-theme] *::before,
+[data-sk-theme] *::after,
+.sk-flow,
+.sk-flow *,
+.sk-flow *::before,
+.sk-flow *::after {
+  box-sizing: border-box;
+}
+
+[data-sk-theme] h1,
+[data-sk-theme] h2,
+[data-sk-theme] h3,
+.sk-flow h1,
+.sk-flow h2,
+.sk-flow h3 {
+  font-family: var(--sk-font-heading);
+  line-height: 1.15;
+  margin: 0;
+}
+
+/* The rest of the island's element reset, for the same reason as `box-sizing` above:
+   `[data-sk-theme]` never reaches an island, so the funnel inherited the UA's
+   `line-height: normal` (≈1.21 against the kit's own 1.55) and every `<p>` and `<h2>`
+   kept its UA `margin-block`. That unmanaged margin — not the declared gaps — is what
+   set the spacing between the heading, its subheading and the consent paragraphs, so
+   the vertical rhythm was the browser's, not ours. */
+.sk-flow {
+  font-family: var(--sk-font);
+  font-size: var(--sk-font-size-base);
+  line-height: 1.55;
+}
+/* ANCHOR the funnel's column. The step heading was landing anywhere from 203px to 389px
+   down the page depending on how tall the step happened to be — walking identity→intake
+   it dropped 186px and then climbed back, which reads as the page breaking rather than
+   advancing. `.sk-flow` never centred anything itself; the clinic's page was centring a
+   short island. The kit cannot edit clinic markup (islands are themed, not
+   restructurable), so the lever it does have is to stop being a short box.
+   SCOPED to the funnel's own mount point on purpose: `.sk-flow` is shared with
+   `<BookingBlock/>`, which is embedded mid-page and must NOT become viewport-tall. */
+.sk-certificate-funnel .sk-flow {
+  /* All-AUTO rows, overriding the shell's `auto 1fr auto`. That `1fr` body track and the
+     `min-block-size` below were in direct conflict: an `fr` track eats the column's free
+     space during TRACK SIZING, before `align-content` ever runs, so `start` was a no-op
+     and the whole slack of a viewport-tall column opened up between the last field and
+     the CTA — ~280px on the medicare step, ~420px on the confirmation, where the primary
+     link was exiled to the bottom of an otherwise blank screen. With auto rows the tracks
+     pack to the top and the min-height goes back to doing only its stated job above.
+     THREE explicit tracks, not `none`: the railed rules below place the rail by line
+     number and need an explicit grid to resolve against. */
+  grid-template-rows: auto auto auto;
+  align-content: start;
+  min-block-size: calc(100dvh - 8rem);
+  /* 2×, not the 6× this shipped with. MEASURED: on a 390×844 phone the step heading's
+     first ink sat at 179px, of which the clinic's own 000 bar was 62 — the other 117 was
+     this inset (48), the back/progress row (36), the shell's row gap (16) and the eyebrow
+     line (17), i.e. a sixth of the fold spent before the screen says what it is asking.
+     The 000 bar directly above already carries its own 14px of air and a hairline, so 16px
+     here still reads as a gap rather than a collision, and every one of the fourteen
+     screens starts 32px higher. The BOTTOM stays 3× — that edge is against the page, not
+     against a bar. */
+  padding-block: calc(var(--sk-space) * 2) calc(var(--sk-space) * 3);
+
+  /* The HORIZONTAL twin of the `min-block-size` above, and the same root cause. This
+     column lives inside a host box that is SHRINK-TO-FIT — PocketDoc's FunnelShell
+     centres the island with `md:items-center` on a column flex box, and any wrapper in
+     between (a React root, a `.container` div) is shrink-to-fit for the same reason.
+     Against such a parent `max-width` only CAPS a width the CONTENT picks, so every step
+     sized itself to its own content. Measured at 1440, walking forward: identity 848 (reading
+     column 496) → confirm-identity 822 (470) → intake 777 (425) → slot 764 (412), then back
+     to 848 on medicare — the card's left edge sliding 296→309→332→338 and the column
+     narrowing 17% mid-intake, which reads as the page breaking rather than advancing.
+     A DEFINITE inline-size is the only lever that survives shrink-to-fit: it raises the
+     max-content contribution, so the host box resolves to this width and the step's own
+     content can no longer set it. `max-inline-size: 100%` is what keeps that safe — it
+     out-specifies the `max-width` caps below (logical and physical cascade as one
+     property), so a host column NARROWER than the cap still wins and the island shrinks
+     to fit it rather than overflowing into a horizontal scrollbar.
+     NOT on `.sk-flow` itself: `<BookingBlock/>` is embedded mid-page and must stay
+     shrink-to-fit. NOT on `.sk-certificate-funnel`: widening the mount point also widens
+     the full-bleed escalate screen, whose pixels are fixed. */
+  inline-size: 34rem;
+  max-inline-size: 100%;
+}
+.sk-flow p,
+.sk-flow ul,
+.sk-flow ol,
+.sk-flow dl,
+.sk-flow dd,
+.sk-flow figure {
+  /* TRAP, read before adding a rule below: this is (0,1,1) — HIGHER than a single
+     component class, and `[data-sk-theme] p` at the same strength backs it up. Any block
+     margin authored on a <p>/<ul>/<dl> in this flow must therefore be written as
+     `.sk-flow .sk-whatever { … }` or it is silently dead. That is not hypothetical: a
+     whole round of section spacing (`.sk-identity__section`, `.sk-cf__body`, …) was
+     zeroed by this rule, which is how "Residential address" ended up captioning the
+     wrong field and the exclusion list ended up welded to the prose around it. */
+  margin: 0;
+}
+.sk-flow ul,
+.sk-flow ol {
+  padding-inline-start: 0;
+  list-style: none;
+}
+/* `[hidden]` is only a UA `display: none`, so ANY author `display` beats it. That is not
+   hypothetical here: `.sk-cf__consent-full` sets `display: grid`, so the "Read the full
+   consent text" disclosure never hid anything — the full legal text was always on screen
+   while its own button offered to reveal it. One guard, so no future disclosure in the
+   kit can be defeated the same way. */
+[hidden] {
+  display: none !important;
+}
+
+[data-sk-theme] p {
+  margin: 0;
+}
+
+[data-sk-theme] img {
+  max-width: 100%;
+  display: block;
+}
+
+[data-sk-theme] a {
+  color: var(--sk-brand);
+}
+
+/* ── layout primitives ─────────────────────────────────────────────────────*/
+.sk-container {
+  width: 100%;
+  max-width: 72rem;
+  margin-inline: auto;
+  padding-inline: calc(var(--sk-space) * 3);
+}
+
+.sk-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sk-space) * 3);
+}
+
+.sk-stack {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space) * 3);
+}
+
+/* ── Hero ───────────────────────────────────────────────────────────────────*/
+.sk-hero {
+  padding: calc(var(--sk-space) * 12) calc(var(--sk-space) * 3);
+  background: var(--sk-neutral);
+  color: var(--sk-neutral-foreground);
+  text-align: center;
+}
+
+.sk-hero--image {
+  background-image:
+    linear-gradient(rgba(10, 18, 28, 0.55), rgba(10, 18, 28, 0.55)),
+    var(--sk-hero-image);
+  background-size: cover;
+  background-position: center;
+  color: #ffffff;
+}
+
+.sk-hero__inner {
+  max-width: 48rem;
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space) * 3);
+  align-items: center;
+}
+
+.sk-hero__heading {
+  font-size: var(--sk-font-size-h1);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.sk-hero__subheading {
+  font-size: var(--sk-font-size-lg);
+  max-width: 38rem;
+  opacity: 0.92;
+}
+
+.sk-hero__cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sk-space) * 2);
+  justify-content: center;
+}
+
+/* ── Section ────────────────────────────────────────────────────────────────*/
+.sk-section {
+  padding: calc(var(--sk-space) * 10) calc(var(--sk-space) * 3);
+}
+
+.sk-section__inner {
+  max-width: 72rem;
+  margin-inline: auto;
+}
+
+.sk-section__title {
+  font-size: var(--sk-font-size-h2);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.sk-section__intro {
+  color: var(--sk-muted);
+  font-size: var(--sk-font-size-lg);
+  margin-top: calc(var(--sk-space) * 2);
+  max-width: 44rem;
+}
+
+.sk-section__title + .sk-service-grid,
+.sk-section__title + .sk-team-grid,
+.sk-section__intro + .sk-service-grid,
+.sk-section__intro + .sk-team-grid,
+.sk-section__intro + .sk-faq,
+.sk-section__title + .sk-faq {
+  margin-top: calc(var(--sk-space) * 6);
+}
+
+/* ── ServiceGrid ────────────────────────────────────────────────────────────*/
+.sk-service-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: calc(var(--sk-space) * 4);
+}
+
+.sk-service-grid__item {
+  background: var(--sk-neutral);
+  color: var(--sk-neutral-foreground);
+  border-radius: var(--sk-radius);
+  padding: calc(var(--sk-space) * 4);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space) * 1.5);
+}
+
+.sk-service-grid__icon {
+  width: calc(var(--sk-space) * 6);
+  height: calc(var(--sk-space) * 6);
+  object-fit: contain;
+}
+
+.sk-service-grid__title {
+  font-size: var(--sk-font-size-lg);
+  font-weight: 650;
+}
+
+.sk-service-grid__desc {
+  color: var(--sk-muted);
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ── TeamGrid ───────────────────────────────────────────────────────────────*/
+.sk-team-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: calc(var(--sk-space) * 4);
+}
+
+.sk-team-grid__item {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space) * 1);
+}
+
+.sk-team-grid__photo {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: var(--sk-radius);
+  background: var(--sk-neutral);
+}
+
+.sk-team-grid__photo--placeholder {
+  background: linear-gradient(135deg, var(--sk-neutral), #e2e8ee);
+}
+
+.sk-team-grid__name {
+  font-weight: 650;
+}
+
+.sk-team-grid__role {
+  color: var(--sk-muted);
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ── Hours ──────────────────────────────────────────────────────────────────*/
+.sk-hours {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 32rem;
+}
+
+.sk-hours__row {
+  display: flex;
+  justify-content: space-between;
+  gap: calc(var(--sk-space) * 4);
+  padding: calc(var(--sk-space) * 1.5) 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--sk-muted) 20%, transparent);
+}
+
+.sk-hours__row:last-child {
+  border-bottom: 0;
+}
+
+.sk-hours__day {
+  font-weight: 600;
+  margin: 0;
+}
+
+.sk-hours__time {
+  color: var(--sk-muted);
+  margin: 0;
+}
+
+/* ── MapEmbed ───────────────────────────────────────────────────────────────*/
+.sk-map {
+  width: 100%;
+  height: var(--sk-map-height, 320px);
+  border-radius: var(--sk-radius);
+  overflow: hidden;
+  background: var(--sk-neutral);
+}
+
+.sk-map__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+/* ── FAQ ────────────────────────────────────────────────────────────────────*/
+.sk-faq {
+  display: flex;
+  flex-direction: column;
+  max-width: 48rem;
+}
+
+.sk-faq__item {
+  border-bottom: 1px solid color-mix(in srgb, var(--sk-muted) 20%, transparent);
+}
+
+.sk-faq__q {
+  cursor: pointer;
+  font-weight: 600;
+  padding: calc(var(--sk-space) * 2.5) 0;
+  list-style: none;
+}
+
+.sk-faq__q::-webkit-details-marker {
+  display: none;
+}
+
+.sk-faq__q::after {
+  content: "+";
+  float: right;
+  color: var(--sk-muted);
+  font-weight: 400;
+}
+
+.sk-faq__item[open] .sk-faq__q::after {
+  content: "\2212"; /* minus */
+}
+
+.sk-faq__a {
+  color: var(--sk-muted);
+  padding: 0 0 calc(var(--sk-space) * 2.5);
+}
+
+/* ── Button ─────────────────────────────────────────────────────────────────*/
+.sk-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--sk-space) * 1);
+  padding: calc(var(--sk-space) * 1.5) calc(var(--sk-space) * 3);
+  border-radius: var(--sk-radius);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+
+.sk-button:focus-visible {
+  outline: 2px solid var(--sk-brand);
+  outline-offset: 2px;
+}
+
+.sk-button--solid {
+  background: var(--sk-brand);
+  color: var(--sk-brand-foreground);
+}
+
+.sk-button--solid:hover {
+  filter: brightness(0.94);
+}
+
+.sk-button--outline {
+  background: transparent;
+  color: var(--sk-brand);
+  border-color: var(--sk-brand);
+}
+
+.sk-button--outline:hover {
+  background: color-mix(in srgb, var(--sk-brand) 8%, transparent);
+}
+
+.sk-button--ghost {
+  background: transparent;
+  color: var(--sk-foreground);
+}
+
+.sk-button--ghost:hover {
+  background: color-mix(in srgb, var(--sk-muted) 12%, transparent);
+}
+
+/* ── BookingBlock placeholder (D8 seam, inert in v1) ────────────────────────*/
+.sk-booking {
+  border: 1px dashed color-mix(in srgb, var(--sk-muted) 40%, transparent);
+  border-radius: var(--sk-radius);
+  padding: calc(var(--sk-space) * 4);
+  text-align: center;
+}
+
+.sk-booking__placeholder {
+  color: var(--sk-muted);
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ── responsive ─────────────────────────────────────────────────────────────*/
+@media (max-width: 900px) {
+  .sk-service-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sk-team-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  :where([data-sk-theme]),
+  :root {
+    --sk-font-size-h1: 2.25rem;
+    --sk-font-size-h2: 1.625rem;
+  }
+}
+
+@media (max-width: 560px) {
+  .sk-service-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .sk-team-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sk-hero {
+    padding-block: calc(var(--sk-space) * 8);
+  }
+  .sk-section {
+    padding-block: calc(var(--sk-space) * 7);
+  }
+}
+
+/* ── ISLAND STYLES (PAT-774) ─────────────────────────────────────────────────
+ * One section per island, so the four parallel workstreams filling in the
+ * implementations append inside their OWN block and never touch each other's.
+ * Each island's CSS reads the patient-surface theme vars off its own mount point
+ * (see `patient-surface-theme.ts`) — brand/accent/radius/font only; neutrals stay
+ * on the kit's tuned values.
+ * ------------------------------------------------------------------------- */
+
+/* ── booking (PAT-765) ───────────────────────────────────────────────────── */
+.sk-booking {
+  /* The inert dashed placeholder is gone — this is a real flow surface now. */
+  border: 0;
+  padding: 0;
+  text-align: left;
+}
+.sk-booking__heading {
+  font-size: var(--sk-font-size-h2);
+  line-height: 1.2;
+}
+.sk-booking__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: calc(var(--sk-space) * 1.5);
+}
+.sk-booking__option {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: calc(var(--sk-space) * 2);
+  width: 100%;
+  padding: calc(var(--sk-space) * 2) calc(var(--sk-space) * 2.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 30%, transparent);
+  border-radius: var(--sk-island-radius);
+  background: none;
+  /* `font: inherit` is not enough: a <button> does NOT inherit colour, so a bare
+     transparent one falls back to the UA's `buttontext` (near-black) and vanishes on
+     a dark clinic canvas. Every see-through control in this sheet must say so. */
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.sk-booking__option:hover {
+  border-color: var(--sk-island-primary);
+}
+.sk-booking__option-label {
+  font-weight: 600;
+}
+.sk-booking__option-meta,
+.sk-booking__empty,
+.sk-booking__body,
+.sk-booking__aside {
+  color: var(--sk-muted);
+  font-size: var(--sk-font-size-sm);
+}
+.sk-booking__link {
+  color: var(--sk-island-primary);
+}
+
+/* NOTE: `.sk-booking` + `.sk-booking__placeholder` predate this split and live
+ * with the other primitives above. */
+
+/* ── certificate-funnel (PAT-764) ────────────────────────────────────────── */
+/* The shared FLOW frame (shell, buttons, fields) + the funnel's own screens. Neutral
+ * by default; the four allow-listed clinic values arrive as `--sk-island-*` custom
+ * properties on the island's OWN mount point (see `patient-surface-theme.ts`), so a
+ * clinic brand reaches these components without the clinic being able to restyle them. */
+.sk-certificate-funnel,
+.sk-booking {
+  /* The kit's OWN default, deliberately NOT `var(--sk-primary, …)`. `--sk-primary` is a
+     value the clinic's site stylesheet publishes, and reading it here handed a raw,
+     unchecked brand colour to the island under the hardcoded white below — the one route
+     in that skips `derivePrimaryPair` entirely, so the CTA's label could land at any
+     ratio at all (PocketDoc's own #e92095 is 4.11:1 under white). The two tokens are a
+     PAIR: `themeStyle()` overrides both inline together after deriving the foreground,
+     or neither moves. #0f766e is 5.47:1 under #ffffff. */
+  --sk-island-primary: #0f766e;
+  --sk-island-primary-fg: #ffffff;
+  --sk-island-accent: var(--sk-island-primary);
+  --sk-island-radius: var(--sk-radius, 10px);
+  --sk-island-font: inherit;
+  font-family: var(--sk-island-font);
+}
+
+/* Screen-reader-only text. Used for required markers + hidden labels. */
+.sk-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── flow shell ─────────────────────────────────────────────────────────────*/
+.sk-flow {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: calc(var(--sk-space) * 2);
+  max-width: 34rem;
+  margin-inline: auto;
+  /* The island pays for its OWN inset. It used to inherit one from the host page, so a
+     site that padded its funnel canvas only from `md:` up shipped a mobile flow whose
+     heading and cards touched the left edge of the phone (PAT-853). An island that is
+     unreadable unless its host remembers to pad it is a contract nobody can keep. */
+  padding-inline: calc(var(--sk-space) * 3);
+  padding-block: calc(var(--sk-space) * 3);
+  text-align: left;
+
+  /* ── Ink DERIVED from the surface, not taken from the token bag ────────────────
+     `--sk-muted` is one absolute colour, but this island mounts on a background the
+     CLINIC chose: PocketDoc's funnel canvas is #121936, where the bridged muted
+     (#626884) lands at 3.1:1 and fails AA on every subheading, Back link and help
+     line. Mixing the surface's OWN `currentColor` instead means secondary ink is
+     always a softened version of whatever ink already reads there — ~8:1 on that dark
+     canvas, ~7:1 on white — without the kit needing to know which it is. Same rule the
+     island's foreground already follows (`deriveForeground`), same lesson as the
+     slots-confirm bar (PAT-834/838): pair the ink with the surface it sits on. */
+  --sk-flow-muted: color-mix(in srgb, currentColor 68%, transparent);
+  /* Hairlines and card edges, same derivation. A 30%-of-mid-grey border was ~1.2:1 on
+     the dark canvas — a card you can only see if you already know it is there. */
+  --sk-flow-line: color-mix(in srgb, currentColor 24%, transparent);
+  /* A barely-there raised surface for cards, again relative to the page. */
+  --sk-flow-raised: color-mix(in srgb, currentColor 6%, transparent);
+
+  /* Brand colour as TEXT ink, pulled toward the surface's own readable ink until it
+     clears AA. The raw brand is tuned to be a BUTTON FILL (where the kit derives a
+     contrasting foreground for it), not small text on a canvas the clinic also chose:
+     PocketDoc's #e92095 on #121936 is 4.14:1, which fails for the 11px uppercase
+     eyebrow and the inline policy links. Mixing `currentColor` in pulls it back toward
+     whatever the canvas is, in one declaration, without the kit knowing which it is.
+     Fills are untouched — only ink.
+
+     44%, not the 64% this shipped with. MEASURED, not estimated: the policy links on the
+     preflight screen sit inside a 6%-white card, and against that real background 64%
+     gave 4.07:1 — already under AA before the CTA was AA-floored, and 3.76:1 after. The
+     probe that reported "all passes" was comparing them to the page canvas instead of the
+     card they sit on. 44% measures 4.55:1 over the card and 5.17:1 on the bare canvas. */
+  --sk-flow-accent-ink: color-mix(in srgb, var(--sk-island-primary) 44%, currentColor);
+
+  /* Error INK, same derivation. `#b3261e` is tuned as a red on white — on PocketDoc's
+     #121936 canvas it is 2.64:1, so "Enter your date of birth" is a message the patient
+     literally cannot read on the screen that is blocking them. Pulling a brighter red
+     toward the surface's own ink gives 6.58:1 there and 5.94:1 on white: still
+     unmistakably red, readable either way. Text AND the `[aria-invalid]` field border —
+     the field no longer paints its own white fill, so that border sits on the clinic's
+     canvas too and needs the same derivation. */
+  --sk-flow-danger: color-mix(in srgb, #ef4444 70%, currentColor);
+}
+.sk-flow__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space) * 2);
+}
+.sk-flow__back,
+.sk-flow__back-spacer {
+  min-height: 2.25rem;
+}
+.sk-flow__back {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font: inherit;
+  font-size: var(--sk-font-size-sm);
+  cursor: pointer;
+}
+.sk-flow__back:hover {
+  /* Transparent over the page → full-strength means the PAGE's text colour. */
+  color: inherit;
+}
+/* The position group: the words and the dots, on the bar's own row (PAT-853 fold pass).
+   `min-width: 0` + a nowrap label so a long eyebrow ("Question 6 of 6") shrinks the group
+   rather than wrapping the bar onto a second line — a bar that grows is the opposite of
+   what this move was for. */
+.sk-flow__place {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sk-space) * 1.5);
+  min-width: 0;
+}
+.sk-flow__progress {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.sk-flow__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 35%, transparent));
+}
+.sk-flow__dot--done {
+  background: color-mix(in srgb, var(--sk-island-primary) 45%, transparent);
+}
+.sk-flow__dot--current {
+  width: 20px;
+  background: var(--sk-island-primary);
+}
+.sk-flow__head {
+  margin-bottom: calc(var(--sk-space) * 2);
+}
+/* Lives in the bar beside the dots now, not above the heading — see the note in
+   `flow-shell.tsx`. `nowrap` because it shares a 342px row on a phone with the Back
+   control and up to eight dots. */
+.sk-flow__eyebrow {
+  white-space: nowrap;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--sk-flow-accent-ink, var(--sk-island-accent));
+}
+.sk-flow__heading {
+  margin-top: calc(var(--sk-space) * 0.5);
+  font-size: var(--sk-font-size-h2);
+  /* WEIGHT 500, not the UA's bold 700. The heading was never given a weight, so every
+     step title rendered at the browser's default — heavy and untracked, which is what
+     made the funnel read as an unstyled document rather than an authored one. */
+  font-weight: 500;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+/* NO ring on the step heading. Earlier reasoning here was that "the heading is focused
+   on every step change, so a visible ring is the point" — but the heading is
+   `tabindex="-1"`, so no keyboard user can ever Tab to it. The focus is purely
+   programmatic, to make assistive tech announce the new step; the ring therefore marks
+   something nobody navigated to, and Chrome still matches `:focus-visible` after a
+   click-advance. At desktop it painted a 508×90 outlined rectangle around the question —
+   which reads as an empty text input sitting above the real one. The focus move and its
+   announcement are unchanged; only the paint is suppressed. */
+.sk-flow__heading:focus {
+  outline: none;
+}
+/* READING copy, so it sits at the base size. 14px is for subordinate metadata — a
+   back link, a slot's "1 left" — not for the sentence explaining what this step is. */
+.sk-flow__sub {
+  margin-top: calc(var(--sk-space) * 1.5);
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+/* Announced, never shown — the heading already carries it visually. */
+.sk-flow__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+/* 1×, not 2×: the shell's own grid `gap` already puts 2× between the body and this row, so
+   the declared 2× here was a second helping of the same air — 32px between the last field
+   and the button the patient came to press, on every step that has one. */
+.sk-flow__footer {
+  padding-top: calc(var(--sk-space));
+}
+/* NO PINNED CTA BAR (PAT-867 — this REPLACES the PAT-853/865 sticky footer).
+   The fold problem was real; bottom-sticky was the wrong answer to it. A pinned bar is a
+   floating rectangle over a scrolling column, so it needs a veil to occlude what passes
+   behind — and a veil an island is allowed to paint can only be derived from
+   `currentColor` (the clinic's canvas is unknowable here, PAT-834/838), which means it is
+   TRANSLUCENT by construction. The preflight step's own 000 link read straight through
+   the glass, under the secondary button, as one garbled line. Two sentences sharing a
+   rectangle is a worse defect than a button one scroll away.
+   So the footer sits in the column like every other row, and a step that does not fit is
+   made to FIT — see `.sk-pf__statements` for the density preflight now runs at. Where a
+   step genuinely cannot (identity's nine fields), scrolling is the honest answer.
+   The slot picker's `.sk-slots__confirm` is a different case and stays: it pins a
+   selection summary over a LIST that is unbounded by nature, and it paints no veil
+   because its content is one opaque full-width fill. */
+.sk-flow__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--sk-space));
+  width: 100%;
+  min-height: 2.75rem;
+  padding-inline: calc(var(--sk-space) * 3);
+  border: 1px solid transparent;
+  border-radius: var(--sk-island-radius);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  /* Declared HERE, not inherited: the `box-sizing` reset above is scoped to
+     `[data-sk-theme]`, and an island's mount point need not sit inside one. A `<button>`
+     gets border-box from the UA stylesheet and looked fine anyway — an `<a>` styled as a
+     button did not, and overflowed the viewport by its own padding. */
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+}
+/* A disabled button must not wear the accent. Two reasons, and the second is measurable:
+   the accent is the single signal telling the patient which control is the one to press,
+   so spending it on something inert lies about affordance; and `opacity: .55` over the
+   primary fill dragged the label to 3.25:1 — under AA on the very screens where the
+   patient is trying to work out why they cannot continue. Repainted as a neutral surface
+   derived from the canvas, so it tracks whatever clinic colour the island landed on. */
+.sk-flow__btn[disabled] {
+  cursor: not-allowed;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  border-color: transparent;
+  color: color-mix(in srgb, currentColor 62%, transparent);
+}
+.sk-flow__btn--primary {
+  background: var(--sk-island-primary);
+  color: var(--sk-island-primary-fg);
+}
+.sk-flow__btn--secondary {
+  background: transparent;
+  border-color: var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 40%, transparent));
+  color: inherit;
+}
+.sk-flow__btn--quiet {
+  background: none;
+  border: 0;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-weight: 500;
+}
+/* A standalone quiet action has no adjacent button to align against, so its label follows
+   the left-set reading column. Keep the full-width 44px row as the phone tap target; slot
+   cancellation and the submitted confirmation pair are not only children and stay centred. */
+.sk-flow__footer > .sk-flow__btn--quiet:only-child,
+.sk-cf__after > .sk-flow__btn--quiet:only-child {
+  justify-content: flex-start;
+  padding-inline: 0;
+  text-align: start;
+}
+.sk-flow__btn:focus-visible {
+  outline: 2px solid var(--sk-island-accent);
+  outline-offset: 2px;
+}
+.sk-flow__error {
+  margin-top: calc(var(--sk-space));
+  color: var(--sk-flow-danger, #b3261e);
+  font-size: var(--sk-font-size-sm);
+}
+.sk-flow__loading {
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ── trust rail (PAT-853) ───────────────────────────────────────────────────
+   Standing context — who reviews the request, who regulates them, what it costs, where
+   the data lives. LAST in the DOM, so on a phone it reads after the CTA; the desktop
+   rule below moves it into the empty column beside the flow with grid placement only,
+   never by reordering the markup. */
+.sk-flow__rail {
+  display: grid;
+  gap: calc(var(--sk-space) * 1.5);
+  /* A grid item defaults to `min-width: auto`, so one unbreakable string (a URL a clinic
+     pastes into its policy label) would widen the whole track and give the phone a
+     horizontal scrollbar. The island's own inset cannot save a track that is too wide. */
+  min-width: 0;
+  overflow-wrap: break-word;
+  margin-top: calc(var(--sk-space) * 3);
+  padding-top: calc(var(--sk-space) * 3);
+  border-top: 1px solid var(--sk-flow-line, color-mix(in srgb, currentColor 24%, transparent));
+  font-size: var(--sk-font-size-sm);
+}
+/* Ink on the CHILDREN, not on the rail itself, so `currentColor` in this mix is still the
+   PAGE's ink rather than an already-softened copy of it — nesting the same mix twice is
+   how "quiet" becomes "unreadable". 74% of the surface's own ink is ~7:1 on PocketDoc's
+   near-black canvas and ~6:1 on white; below ~65% neither clears AA.
+   NOT `--sk-flow-accent-ink`: the accent marks the one thing the patient is meant to
+   press, and a rail that borrows it competes with the button for that meaning. */
+.sk-flow__rail > * {
+  color: color-mix(in srgb, currentColor 74%, transparent);
+}
+.sk-flow__rail-clinic {
+  font-weight: 600;
+}
+.sk-flow__rail-policies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sk-space) * 2);
+}
+.sk-flow__rail-link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.sk-flow__rail-link:hover {
+  text-decoration-thickness: 2px;
+}
+.sk-flow__rail-link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+/* Reusing the sheet's existing breakpoint scale (900/720/600/560/480), not a new one.
+   Below this the rail stays where the markup puts it: under the step. */
+@media (min-width: 900px) {
+  /* 53rem = the flow's own 34rem (border-box: 31rem of content inside its 1.5rem insets)
+     + a 2rem gutter + the 17rem rail. The content column is therefore EXACTLY as wide as
+     it is today — only the empty canvas beside it is claimed. The three shell rows are
+     pinned to column 1 because grid auto-placement fills ACROSS first, which would
+     otherwise drop the step body into the rail's column. */
+  .sk-flow--railed {
+    position: relative;
+    --sk-rail-w: 17rem;
+    grid-template-columns: minmax(0, 1fr) var(--sk-rail-w);
+    column-gap: calc(var(--sk-space) * 4);
+    max-width: 53rem;
+  }
+  /* The railed width, said as a DEFINITE size for the reason spelt out on
+     `.sk-certificate-funnel .sk-flow` above: a `max-width` alone lets each step shrink to
+     its own content, so the reading column changed width and left edge between steps.
+     `max-inline-size: 100%` up there still caps this against a narrow host. */
+  .sk-certificate-funnel .sk-flow--railed {
+    inline-size: 53rem;
+  }
+  .sk-flow--railed > .sk-flow__bar,
+  .sk-flow--railed > .sk-flow__body,
+  .sk-flow--railed > .sk-flow__footer {
+    grid-column: 1;
+  }
+  /* Starts in row 2, level with the heading. A spanning in-flow grid item still feeds its
+     height into every intrinsic track it crosses, so the rail's leftover height used to
+     set the body/footer rhythm. An absolutely-positioned grid child keeps this grid area
+     as its anchor but contributes nothing to track sizing. The explicit inline start and
+     width exclude the container's inline-end padding from the rail's resolved box. */
+  .sk-flow--railed > .sk-flow__rail {
+    grid-column: 2;
+    grid-row: 2 / -1;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: var(--sk-rail-w);
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+    padding-inline-start: calc(var(--sk-space) * 4);
+    border-inline-start: 1px solid
+      var(--sk-flow-line, color-mix(in srgb, currentColor 24%, transparent));
+  }
+}
+
+/* ── questions ──────────────────────────────────────────────────────────────*/
+.sk-q {
+  margin-block: calc(var(--sk-space) * 2);
+  border: 0;
+  padding: 0;
+}
+.sk-q__label,
+.sk-q__legend {
+  display: block;
+  margin-bottom: calc(var(--sk-space));
+  font-size: var(--sk-font-size-sm);
+  font-weight: 600;
+}
+.sk-q__help {
+  margin-bottom: calc(var(--sk-space));
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: var(--sk-font-size-sm);
+}
+/* ── quick-pick dates (PAT-873) ──────────────────────────────────────────────
+   Chips over real date inputs. The chip row is the shortcut; the inputs below are
+   the control, and stay visible so the patient can SEE the date a chip chose and
+   adjust it. Sized for a thumb (44px min target) and wrapping, because five chips
+   never fit one phone line. Surfaces derive from `currentColor` (the clinic canvas
+   is unknowable to an island — PAT-834/838); the pressed chip is the ONE place the
+   clinic's own accent is spent, so "which did I pick" reads at a glance. */
+.sk-qd__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sk-space));
+  margin-bottom: calc(var(--sk-space) * 1.5);
+}
+.sk-qd__chip {
+  min-height: 2.75rem;
+  padding-inline: calc(var(--sk-space) * 2);
+  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 6%, transparent);
+  color: inherit;
+  font: inherit;
+  font-size: var(--sk-font-size-sm);
+  font-weight: 600;
+  cursor: pointer;
+}
+.sk-qd__chip:hover:not(:disabled) {
+  border-color: var(--sk-island-primary);
+}
+/* `aria-pressed` IS the state — styling it means the visual and the accessible
+   answer can never disagree, which a separate `.is-selected` class routinely does. */
+.sk-qd__chip[aria-pressed='true'] {
+  border-color: var(--sk-island-primary);
+  background: var(--sk-island-primary);
+  color: var(--sk-island-primary-fg);
+}
+.sk-qd__chip:focus-visible {
+  outline: 2px solid var(--sk-island-accent);
+  outline-offset: 2px;
+}
+.sk-qd__chip:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+/* Two columns for a range, one for a single date — `auto-fit` does both with no
+   modifier class, and collapses to one column on a narrow phone. */
+.sk-qd__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: calc(var(--sk-space) * 1.5);
+}
+.sk-flow .sk-qd__sublabel {
+  display: block;
+  margin-bottom: calc(var(--sk-space) * 0.5);
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+.sk-q__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sk-space) * 1.5);
+}
+.sk-q__option {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--sk-space));
+  padding: calc(var(--sk-space) * 1.5) calc(var(--sk-space) * 2.5);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 35%, transparent));
+  border-radius: var(--sk-island-radius);
+  cursor: pointer;
+}
+.sk-q__option:has(input:checked) {
+  border-color: var(--sk-island-primary);
+  background: color-mix(in srgb, var(--sk-island-primary) 8%, transparent);
+}
+/* The funnel's last two UA widgets — the intake radios and the consent tick. `accent-color`
+   tints only the CHECKED box; unchecked, with no `color-scheme` to go on, the UA paints its
+   light-scheme default: a solid #ffffff square with a grey hairline and a ~3px radius. On
+   PocketDoc's #121936 that made the single brightest object on the screen where the patient
+   signs a legal consent an unstyled browser control — a larger continuous white mass than
+   the 32px heading's strokes, wearing a corner radius that contradicts every other box on
+   the step. The kit CANNOT answer this with `color-scheme`: the canvas belongs to the
+   clinic and the island must never guess it. So the same recipe the fields took at
+   `.sk-q__input` below — derive the resting state from the SURFACE — and pay for the
+   checked state with the `--sk-island-primary` / `-fg` PAIR the primary CTA already ships,
+   so the tick's contrast is guaranteed by the same derivation that guarantees the button's
+   label rather than by `accent-color`'s per-spec glyph. These stay real `<input>`s: the
+   checked state, the label association and Space/arrow-key operation are still the
+   platform's, and the focus ring still lives on the card (`:has(input:focus-visible)`). */
+.sk-cf__check input,
+.sk-q__option input[type='radio'] {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  flex: none;
+  margin: 0;
+  display: grid;
+  place-content: center;
+  /* NOT `--sk-flow-line` (currentColor 24%) — that is a hairline BETWEEN cards, and 24%
+     measures 2.2:1 on that dark canvas, under the 3:1 a UI component's boundary owes
+     (WCAG 1.4.11). 55% of the surface's own ink clears it on a dark canvas and on white. */
+  border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
+  /* 6px, deliberately NOT `--sk-island-radius`: 10-12px on a 20px box renders as a circle,
+     which is the radio idiom, and the two would stop being tellable apart. */
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  cursor: pointer;
+}
+.sk-q__option input[type='radio'] {
+  border-radius: 50%;
+}
+.sk-cf__check input:checked,
+.sk-q__option input[type='radio']:checked {
+  background: var(--sk-island-primary);
+  border-color: var(--sk-island-primary);
+}
+.sk-cf__check input:checked::before {
+  content: '';
+  inline-size: 0.7rem;
+  block-size: 0.7rem;
+  background: var(--sk-island-primary-fg);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+.sk-q__option input[type='radio']:checked::before {
+  content: '';
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--sk-island-primary-fg);
+}
+/* `appearance: none` also drops the UA's disabled greying, and both controls are disabled
+   while a step's write is in flight. Same 0.55 the fields use. */
+.sk-cf__check input:disabled,
+.sk-q__option input[type='radio']:disabled {
+  opacity: 0.55;
+}
+/* …and it erases the control ENTIRELY under a forced-colours OS theme, where the native
+   widget is the only thing the user can see. Hand it straight back there: a consent tick
+   nobody can find is a worse defect than a white one. */
+@media (forced-colors: active) {
+  .sk-cf__check input,
+  .sk-q__option input[type='radio'] {
+    appearance: auto;
+  }
+  .sk-cf__check input:checked::before,
+  .sk-q__option input[type='radio']:checked::before {
+    content: none;
+  }
+}
+.sk-q__input,
+.sk-identity__input,
+.sk-cf__input,
+.sk-pay__input {
+  width: 100%;
+  /* A DEFINITE box, not a `min-height`. A minimum let `<input type=text>`, `<input
+     type=date>` and `<select>` each resolve their own intrinsic height, so one row of the
+     identity form shipped three of them: Suburb 43px beside State 40px, Phone 43px beside
+     Date of birth 45px — ragged bottom edges on the screen that asks for name, DOB and
+     home address, which is exactly where a patient decides whether this is a real clinic.
+     2.75rem rather than 2.5 also lifts every control to the 44px touch-target floor
+     (WCAG 2.2 SC 2.5.8) on mobile. Safe as a fixed size because none of these four classes
+     is ever on a `<textarea>` — every consumer is a single-line input or a select. The
+     explicit `line-height` is the other half: without it a date input's UA line box, not
+     ours, sets where the text sits inside the box. */
+  block-size: 2.75rem;
+  line-height: 1.2;
+  padding: calc(var(--sk-space)) calc(var(--sk-space) * 1.5);
+  /* Same surface-derived boundary recipe as the unchecked checkbox/radio above. Fields
+     need a 3:1 component edge; the shared `--sk-flow-line` remains a decorative hairline. */
+  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
+  border-radius: var(--sk-island-radius);
+  /* Derived from the SURFACE, not taken from the token bag — same rule as
+     `--sk-flow-raised` above and the slots-confirm scrim below (PAT-834/838).
+     `--sk-background` is the kit's own LIGHT token and says nothing about the canvas the
+     island was dropped on: painting it here laid NINE opaque white slabs down the dark
+     identity step, so the loudest thing on the screen where the patient hands over their
+     name, DOB and address was a wall of empty rectangles, out-competing both the question
+     and the CTA. A translucent tint of the page's own ink darkens a light canvas and
+     lightens a dark one, and `color: inherit` means the fill and the ink can never split. */
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  font: inherit;
+}
+/* A <select>'s options are their own painting surface on Firefox and on Windows
+   Chrome — declaring the ink without the fill there hands the popup back to the
+   system colours. Same token pair as the field, so they can never diverge. */
+.sk-q__input option,
+.sk-identity__input option,
+.sk-cf__input option,
+.sk-pay__input option {
+  background: var(--sk-background, #fff);
+  color: var(--sk-foreground, #1b2733);
+}
+.sk-q__input[aria-invalid='true'],
+.sk-identity__input[aria-invalid='true'],
+.sk-cf__input[aria-invalid='true'],
+.sk-pay__input[aria-invalid='true'] {
+  /* Derived, not absolute: the field no longer paints its own white fill, so this
+     border now sits on the clinic's canvas, where `#b3261e` is 2.64:1 on PocketDoc's
+     #121936 — an "this one is wrong" marker you cannot see. */
+  border-color: var(--sk-flow-danger, #b3261e);
+}
+.sk-q__input:focus-visible,
+.sk-identity__input:focus-visible,
+.sk-cf__input:focus-visible,
+.sk-pay__input:focus-visible {
+  /* Same ring as `.sk-flow__btn:focus-visible` — and load-bearing now, because a
+     see-through field has no opaque fill left to mark "you are typing here". */
+  outline: 2px solid var(--sk-island-accent);
+  outline-offset: 2px;
+  border-color: var(--sk-island-accent);
+}
+.sk-q__input::placeholder,
+.sk-identity__input::placeholder,
+.sk-cf__input::placeholder,
+.sk-pay__input::placeholder {
+  /* The UA's placeholder grey is tuned for a white field. Say it in the surface's own
+     ink instead, or "MM"/"YYYY" go near-invisible on a dark canvas. */
+  color: var(--sk-flow-muted, var(--sk-muted));
+  opacity: 1;
+}
+/* `::placeholder` above CANNOT reach `input[type=date]` — no engine matches it there. The
+   UA paints the empty `dd/mm/yyyy` through its own datetime sub-fields, which inherit our
+   `color: inherit`, so an UNANSWERED date was rendered in full-strength value ink: on the
+   identity step the blank DOB read as already filled while the fields beside it read blank.
+   Colour the PSEUDO, not the input — the field's fill is `currentColor 8%`, so recolouring
+   the control itself would also re-tint the box away from its neighbours in the same grid.
+   `:not(:focus)` hands full ink back the moment the patient starts typing, so a
+   half-entered date is never mistaken for placeholder text. */
+.sk-q__input[type='date'][data-empty]:not(:focus)::-webkit-datetime-edit,
+.sk-identity__input[type='date'][data-empty]:not(:focus)::-webkit-datetime-edit {
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+/* Firefox has no `::-webkit-datetime-edit` and paints the same placeholder, so it needs the
+   colour on the control. Scoped so Chrome/Safari never take this branch and never shift the
+   fill; Safari without `selector()` support falls through to the pseudo rule above. */
+@supports not selector(::-webkit-datetime-edit) {
+  .sk-q__input[type='date'][data-empty]:not(:focus),
+  .sk-identity__input[type='date'][data-empty]:not(:focus) {
+    color: var(--sk-flow-muted, var(--sk-muted));
+  }
+}
+/* A `<select>` still on its empty option is an UNANSWERED question, not a chosen value. */
+select.sk-identity__input[data-empty] {
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+/* The UA calendar glyph is a fixed dark SVG — legible on the old white fill, all but
+   invisible once the field is a tint of a dark page. `invert(0.5)` flattens ANY source
+   luminance to mid grey, so it reads on both without the island guessing the canvas. */
+.sk-q__input::-webkit-calendar-picker-indicator,
+.sk-identity__input::-webkit-calendar-picker-indicator {
+  filter: invert(0.5);
+}
+/* Chrome repaints an autofilled field with an opaque pale slab, which would put the
+   white rectangles straight back on the name, address and card fields. There is no
+   opaque colour we could hand it, so defer its paint indefinitely and keep our own.
+
+   THE INK COMES FROM `--sk-flow-ink`, WHICH ONLY SCRIPT CAN SUPPLY. This rule shipped
+   as `currentColor`, which is self-referential: `currentColor` resolves against the
+   element the value lands on, and that element is the one the UA has just recoloured
+   for the autofill paint. So the override dutifully re-read the UA's black and painted
+   the patient's autofilled name, email, phone and street address in it, on a dark
+   canvas. The declared colour on the field stays `rgb(255,255,255)` throughout, which
+   is why this survived every contrast probe — nothing in the cascade is wrong, the
+   value is just read off the wrong element.
+
+   Every CSS way of saying "the colour around me" fails the same way here, measured in
+   Chromium and WebKit rather than assumed: `inherit` inherits the KEYWORD and
+   re-resolves it, an unregistered custom property substitutes it as a token, an
+   `@property <color>` one keeps it late-resolved, and `color-mix(… currentColor …)`
+   yields `color(srgb 0 0 0)`. Only a concrete `rgb(…)` survives, so `useResolvedInk`
+   in `flow-shell.tsx` reads the flow root's own computed colour and publishes it here.
+   The fallback is the old behaviour, for a form that has not been autofilled yet.
+
+   Two blocks, not one selector list: `:autofill` is the standard and `:-webkit-autofill`
+   the legacy alias, and a selector list is discarded WHOLE by any engine that fails to
+   parse one member. Split, each engine keeps the rule it understands — which is also
+   what finally covers Firefox, whose autofill paints its own black-on-yellow and which
+   never matched the `-webkit-` selector at all. */
+.sk-q__input:-webkit-autofill,
+.sk-identity__input:-webkit-autofill,
+.sk-cf__input:-webkit-autofill,
+.sk-pay__input:-webkit-autofill {
+  -webkit-text-fill-color: var(--sk-flow-ink, currentColor);
+  caret-color: var(--sk-flow-ink, currentColor);
+  transition: background-color 600000s 0s;
+}
+.sk-q__input:autofill,
+.sk-identity__input:autofill,
+.sk-cf__input:autofill,
+.sk-pay__input:autofill {
+  -webkit-text-fill-color: var(--sk-flow-ink, currentColor);
+  caret-color: var(--sk-flow-ink, currentColor);
+  transition: background-color 600000s 0s;
+}
+/* Payment disables its fields while the pre-auth is in flight; with an author-set fill
+   the UA no longer greys them out, so the disabled state has to be said explicitly. */
+.sk-q__input:disabled,
+.sk-identity__input:disabled,
+.sk-cf__input:disabled,
+.sk-pay__input:disabled {
+  opacity: 0.55;
+}
+/* Fallback kept: these classes can render outside a `.sk-flow` subtree, where the
+   derived token is undefined. */
+.sk-q__error {
+  margin-top: calc(var(--sk-space));
+  color: var(--sk-flow-danger, #b3261e);
+  font-size: var(--sk-font-size-sm);
+}
+.sk-q__required {
+  color: var(--sk-flow-danger, #b3261e);
+}
+
+/* ── identity ───────────────────────────────────────────────────────────────*/
+.sk-identity__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: calc(var(--sk-space) * 2);
+}
+.sk-identity__field--wide {
+  grid-column: 1 / -1;
+}
+.sk-identity__label {
+  display: block;
+  margin-bottom: calc(var(--sk-space) * 0.75);
+  font-size: var(--sk-font-size-sm);
+  font-weight: 500;
+}
+/* `.sk-flow`-prefixed, here and below, purely to out-specify the block-margin reset at
+   the top of this sheet — see the TRAP note there. Without it these three margins were
+   dead and identity read as one undifferentiated column: the RESIDENTIAL ADDRESS eyebrow
+   sat flush against the date-of-birth hint above it and the "Street address" label below,
+   so a group heading appeared to caption a field it does not belong to, and the sign-in
+   shortcut looked like part of the first-name field. Every one of these classes only ever
+   renders inside FlowShell's `.sk-flow` root, so the prefix always matches. */
+.sk-flow .sk-identity__help {
+  margin-top: calc(var(--sk-space) * 0.5);
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.75rem;
+}
+.sk-flow .sk-identity__section {
+  margin-top: calc(var(--sk-space) * 3);
+  margin-bottom: calc(var(--sk-space));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+/* Caption for the group heading above, NOT a field hint — so it does not reuse
+   `.sk-identity__help`, whose id is an aria-describedby contract. `.sk-flow`-prefixed for
+   the same reason as the rules above it: the `.sk-flow p` reset near the top of this sheet
+   is (0,1,1) and silently zeroes any bare block margin here. The negative top margin
+   collapses against the eyebrow's 1×space bottom margin to ~0.25rem, so the note reads as
+   the eyebrow's caption rather than the first field's hint. */
+.sk-flow .sk-identity__section-note {
+  margin-top: calc(var(--sk-space) * -0.5);
+  margin-bottom: calc(var(--sk-space) * 2);
+  max-inline-size: 44ch;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+.sk-flow .sk-identity__ramp {
+  margin-bottom: calc(var(--sk-space) * 2);
+  font-size: var(--sk-font-size-sm);
+}
+.sk-identity__ramp-link {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--sk-flow-accent-ink, var(--sk-island-primary));
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.sk-identity__ramp--open {
+  display: grid;
+  gap: calc(var(--sk-space));
+  padding: calc(var(--sk-space) * 2);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 30%, transparent));
+  border-radius: var(--sk-island-radius);
+}
+.sk-identity__confirm {
+  padding: calc(var(--sk-space) * 2.5);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 30%, transparent));
+  border-radius: var(--sk-island-radius);
+}
+.sk-flow .sk-identity__confirm-title {
+  font-weight: 600;
+  margin-bottom: calc(var(--sk-space) * 1.5);
+}
+/* The RETURNING-patient screen, so the one that must feel effortless — and it was the
+   only screen in the funnel that scrolled sideways. A `<dd>` carries a UA
+   `margin-inline-start: 40px`, and neither cell could shrink, so an ordinary
+   24-character email pushed the card to 442px inside a 390px phone and took the only
+   button on the screen off the right edge with it. */
+.sk-identity__confirm-row {
+  display: flex;
+  gap: calc(var(--sk-space) * 2);
+  padding-block: calc(var(--sk-space) * 0.5);
+}
+.sk-identity__confirm-row dt {
+  flex: 0 0 6.5rem;
+  min-width: 0;
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+.sk-identity__confirm-row dd {
+  min-width: 0;
+  /* An email has no break opportunity, so without this it sets the card's width. */
+  overflow-wrap: anywhere;
+}
+.sk-identity__confirm-actions {
+  display: grid;
+  gap: calc(var(--sk-space));
+  margin-top: calc(var(--sk-space) * 2.5);
+}
+
+/* ── funnel screens ─────────────────────────────────────────────────────────*/
+.sk-cf__services,
+.sk-cf__list,
+.sk-cf__links,
+.sk-cf__consent-summary {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  /* 1× not 1.5×: on the confirm screen these five bullets sit between the review block
+     and the button, and the extra half-space pushed the button below the fold. The
+     bullets are still separated by more than their own line-height, so they read as a
+     list rather than a paragraph. */
+  gap: var(--sk-space);
+}
+/* These two lists FOLLOW reading copy, unlike `.sk-cf__services` / `.sk-cf__consent-summary`
+   which lead their screens — and with the reset zeroing them they sat flush against the
+   sentence that introduces them. On `unavailable` the tightest gap on the page fell
+   exactly on the list's boundary, so the first exclusion read as the next line of the
+   paragraph; on `blocked` "Nothing has been charged." ran straight into the 000 line.
+   `.sk-flow` prefix is load-bearing — see the TRAP note on the reset. Outer air is
+   deliberately WIDER than the 12px item gap, so the set groups against the prose. */
+.sk-flow .sk-cf__list,
+.sk-flow .sk-cf__links {
+  margin-top: calc(var(--sk-space) * 2.5);
+}
+.sk-flow .sk-cf__list {
+  /* Only `.sk-cf__list` has copy after it (the "see your regular GP" close), which
+     otherwise read as a sixth exclusion. */
+  margin-bottom: calc(var(--sk-space) * 2.5);
+}
+/* A marker, because `.sk-flow ul { list-style: none }` outranks any `list-style` we
+   could set here — a pseudo-dot is the only route. NEVER `--sk-island-accent`: accent is
+   a press signal and a list marker is not pressable. The consent button deliberately
+   stays neutral until the patient ticks and signs, so its bullets must not out-shout it.
+   Deliberately NOT on `.sk-cf__links`, whose first item is `.sk-cf__emergency` —
+   decoration beside the 000 affordance competes with the one thing that must shout. */
+.sk-cf__list li {
+  position: relative;
+  padding-left: calc(var(--sk-space) * 2.5);
+}
+.sk-cf__list li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 55%, transparent);
+}
+.sk-cf__service {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space) * 2);
+  width: 100%;
+  padding: calc(var(--sk-space) * 2) calc(var(--sk-space) * 2.5);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 30%, transparent));
+  border-radius: var(--sk-island-radius);
+  background: var(--sk-flow-raised, none);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.sk-cf__service:hover:not(:disabled) {
+  border-color: var(--sk-island-primary);
+}
+.sk-cf__service:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.sk-cf__service:focus-visible {
+  outline: 2px solid var(--sk-island-accent);
+  outline-offset: 2px;
+}
+/* WHAT was booked, on the screen that says it was booked (PAT-853). */
+.sk-flow .sk-cf__booked {
+  display: grid;
+  gap: calc(var(--sk-space) * 0.5);
+  margin-top: calc(var(--sk-space) * 2);
+  padding: calc(var(--sk-space) * 2);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 30%, transparent));
+  border-radius: var(--sk-island-radius);
+  background: var(--sk-flow-raised, none);
+}
+.sk-cf__booked-label {
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.sk-cf__booked-when {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+/* The call the patient is waiting for. Same block as `.sk-cf__booked` so the two read
+   as one pair of facts, but carrying the island accent on its leading edge — this is
+   the next thing that HAPPENS, and it was previously losing the page to an email
+   address in a bordered box. Accent only on the rule, never a fill: the primary button
+   owns the filled accent, and a confirmation screen must not have two of them. */
+.sk-flow .sk-cf__call {
+  margin-top: var(--sk-space);
+  border-left: 3px solid var(--sk-island-primary);
+}
+
+/* The review rows on the confirm screen — label above value, PAIRED into two columns
+   so six facts cost three rows rather than six. That is the difference between the
+   "Agree and confirm" button sitting above the fold and 175px below it, which is the
+   whole point of a confirmation screen: you should be able to see what you are
+   confirming AND the button that confirms it without scrolling.
+
+   `auto-fit` + a 10rem floor collapses to ONE column on a narrow phone, where two
+   columns of truncated text would be worse than a longer scroll. The natural field
+   order already pairs well — Name|Date of birth, Email|Phone, Request|Fee — so no
+   row needs to span and no hole opens up. `dl`/`dt`/`dd` are reset because the kit
+   ships no UA-margin reset for them. */
+.sk-flow .sk-cf__review {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: var(--sk-space) calc(var(--sk-space) * 1.5);
+  margin: 0 0 calc(var(--sk-space) * 1.5);
+  padding: calc(var(--sk-space) * 1.25) calc(var(--sk-space) * 1.5);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 30%, transparent));
+  border-radius: var(--sk-island-radius);
+  background: var(--sk-flow-raised, none);
+}
+.sk-flow .sk-cf__review-row {
+  display: grid;
+  gap: calc(var(--sk-space) * 0.25);
+}
+.sk-flow .sk-cf__review-label {
+  margin: 0;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.sk-flow .sk-cf__review-value {
+  margin: 0;
+  font-size: 1rem;
+  /* An email or a long service label must wrap rather than widen the flow column. */
+  overflow-wrap: anywhere;
+}
+
+/* The sentence that says what the button means. Sits WITH the button, so it is read at
+   the moment of pressing rather than remembered from further up the page. */
+.sk-flow .sk-cf__agree-note {
+  margin: var(--sk-space) 0 0;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+/* Quiet actions under the content — deliberately not a row of equal-weight buttons. */
+.sk-cf__after {
+  display: grid;
+  gap: calc(var(--sk-space) * 0.5);
+  margin-top: calc(var(--sk-space) * 3);
+}
+.sk-cf__service-body {
+  display: grid;
+  gap: calc(var(--sk-space) * 0.5);
+  min-width: 0;
+}
+.sk-cf__service-label {
+  font-weight: 600;
+}
+/* The price on the picker (PAT-853). Muted, NOT accent-coloured: the accent is the
+   primary action's alone, and a price that shouts reads as a sales page rather than a
+   fact. Muted here still clears AA — it derives from the same currentColor ramp. */
+.sk-cf__service-delivery,
+.sk-cf__service-fee {
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: var(--sk-font-size-sm);
+}
+/* THE accent on this screen, and the only one. The four cards are what the patient is
+   meant to press, and they were painted entirely in neutral ink while the "I need a
+   different type of certificate" escape hatch below them carried the clinic's accent and
+   an underline — so the loudest thing on the first screen of the funnel was the way out.
+   Marking the chevron is enough to claim the affordance without four accent-filled slabs
+   competing with each other. Scoped INSIDE `.sk-cf__service`: the same chevron class is
+   reused by the preflight decline list, which is a different screen's decision. Accent
+   INK, not the raw brand — the derived mix is what clears AA on a clinic's own canvas. */
+.sk-cf__service .sk-cf__service-chevron {
+  color: var(--sk-flow-accent-ink, var(--sk-island-accent));
+}
+/* The hold rule, said ONCE for the whole priced list (PAT-853). It replaces the same
+   12-word sentence repeated verbatim on every paid row, so it belongs to the list rather
+   than to the copy below it: 1× gap above (against the list's own 1.5× between rows) and
+   the same muted ink as the prices it footnotes. `.sk-flow` prefix is load-bearing — see
+   the TRAP note on the `<p>` margin reset. */
+.sk-flow .sk-cf__services-note {
+  margin-top: calc(var(--sk-space) * 1.5);
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: var(--sk-font-size-sm);
+}
+/* An emergency affordance on a NON-emergency screen (the blocked exit). Absolute
+   colours for the same reason `.sk-pf__emergency` uses them — a way to call an
+   ambulance must not change appearance with the clinic's brand. */
+.sk-cf__emergency {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.75rem;
+  color: color-mix(in srgb, #ef4444 70%, currentColor);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.sk-cf__emergency:focus-visible {
+  outline: 2px solid #ef4444;
+  outline-offset: 2px;
+}
+.sk-cf__row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: calc(var(--sk-space) * 2);
+}
+.sk-cf__field {
+  margin-block: calc(var(--sk-space) * 1.5);
+}
+.sk-cf__label {
+  display: block;
+  margin-bottom: calc(var(--sk-space) * 0.75);
+  font-size: var(--sk-font-size-sm);
+  font-weight: 500;
+}
+.sk-flow .sk-cf__help {
+  margin-top: calc(var(--sk-space) * 0.5);
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.75rem;
+}
+.sk-cf__expiry {
+  display: flex;
+  gap: calc(var(--sk-space));
+  border: 0;
+  padding: 0;
+  margin-inline: 0;
+  min-inline-size: 0;
+}
+.sk-cf__expiry > legend {
+  padding-inline: 0;
+}
+.sk-cf__actions {
+  display: grid;
+  gap: calc(var(--sk-space));
+}
+.sk-cf__link {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--sk-flow-accent-ink, var(--sk-island-primary));
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.sk-flow .sk-cf__aside,
+/* Also reading copy — and on the exit screens it is the ONLY copy, telling a blocked
+   patient what to do next. It was the smallest text on the screen. */
+.sk-flow .sk-cf__body,
+.sk-flow .sk-cf__notice {
+  margin-top: calc(var(--sk-space) * 2);
+}
+/* The disclosure is a <button>, so no reset ever touched it — it simply never had any
+   spacing, and sat welded to the last consent bullet above and the "I agree" card below,
+   reading as a fifth bullet on the screen that captures binding consent. */
+.sk-cf__consent-summary + .sk-cf__link {
+  display: block;
+  margin-block: calc(var(--sk-space) * 2);
+}
+.sk-cf__consent-summary li {
+  padding-left: calc(var(--sk-space) * 2.5);
+  position: relative;
+}
+.sk-cf__consent-summary li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 55%, transparent);
+}
+.sk-cf__consent-full {
+  margin-top: calc(var(--sk-space) * 2);
+  display: grid;
+  gap: calc(var(--sk-space) * 1.5);
+  font-size: var(--sk-font-size-sm);
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+.sk-cf__consent-form {
+  margin-top: calc(var(--sk-space) * 3);
+  /* The tick and the signature are one act. `.sk-cf__field`'s own 12px margin left them
+     as two loose rows under the now-taller consent card. */
+  display: grid;
+  gap: calc(var(--sk-space) * 2.5);
+}
+.sk-cf__consent-form .sk-cf__field {
+  margin-block: 0;
+}
+/* The one control on this island that legally BINDS the patient, and it was the only
+   browser-default thing on the screen: a ~13px UA checkbox with a 14px label — smaller
+   than the bullets it agrees to — inside a ~20px hit target. Same authored card recipe
+   as `.sk-q__option`, so the whole 44px row is the target (WCAG 2.2 SC 2.5.8). */
+.sk-cf__check {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sk-space) * 1.5);
+  min-height: 2.75rem;
+  padding: calc(var(--sk-space) * 1.5) calc(var(--sk-space) * 2);
+  border: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 35%, transparent));
+  border-radius: var(--sk-island-radius);
+  font-size: var(--sk-font-size-base);
+  cursor: pointer;
+}
+/* The box itself is authored up with `.sk-q__option`'s radio — one recipe for both, so the
+   island cannot ship two "you ticked this" idioms. */
+/* The same selected-state language as `.sk-q__option:has(input:checked)` — two "you
+   picked this" idioms on one island is how an authored surface starts to look assembled. */
+.sk-cf__check:has(input:checked) {
+  border-color: var(--sk-island-primary);
+  background: color-mix(in srgb, var(--sk-island-primary) 8%, transparent);
+}
+/* The card is the control now, so the ring belongs on the card, not on a 20px box
+   floating inside it. */
+.sk-cf__check:has(input:focus-visible) {
+  outline: 2px solid var(--sk-island-accent);
+  outline-offset: 2px;
+}
+.sk-cf__check input:focus-visible {
+  outline: none;
+}
+.sk-cf__signature {
+  font-style: italic;
+}
+.sk-cf__cancel {
+  margin-top: calc(var(--sk-space) * 3);
+  padding-top: calc(var(--sk-space) * 3);
+  border-top: 1px solid var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 25%, transparent));
+}
+
+/* ── preflight (the safety check) ───────────────────────────────────────────*/
+/* THE DENSITY THAT REPLACED THE PINNED BAR (PAT-867).
+   This step's job is to be READ, and it was losing that job twice over: five cards at
+   card-comfortable padding ran ~180px past the fold on a laptop, so the two buttons that
+   answer them were off screen — and the fix for that (a sticky footer) put a translucent
+   bar over the step's own 000 link. The step is the thing that had to give. Every number
+   below is tighter than the kit's default card rhythm on purpose; the READING measures
+   (`line-height`, font size) are untouched, because compressing those would trade a
+   layout problem for a comprehension one on the only screen in the funnel that decides
+   whether an online consult is safe. */
+.sk-pf__statements {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--sk-space);
+}
+/* Each statement is a card, not a bullet: it is a thing being ATTESTED to, and it
+   should carry the visual weight of one. */
+.sk-pf__statement {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--sk-space) * 1.5);
+  padding: calc(var(--sk-space) * 1.25) calc(var(--sk-space) * 1.5);
+  border: 1px solid var(--sk-flow-line);
+  border-radius: var(--sk-island-radius);
+  background: var(--sk-flow-raised);
+}
+.sk-pf__num {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.1em;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--sk-island-primary) 22%, transparent);
+  color: inherit;
+  font-size: 0.75rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.sk-pf__statement-body {
+  min-width: 0;
+}
+.sk-pf__statement-title {
+  font-weight: 600;
+  line-height: 1.35;
+}
+.sk-flow .sk-pf__statement-detail {
+  margin-top: calc(var(--sk-space) * 0.375);
+  color: var(--sk-flow-muted);
+  font-size: var(--sk-font-size-sm);
+  line-height: 1.5;
+}
+
+.sk-pf__declines {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: calc(var(--sk-space) * 1.5);
+}
+.sk-pf__decline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space) * 2);
+  width: 100%;
+  padding: calc(var(--sk-space) * 2) calc(var(--sk-space) * 2.5);
+  border: 1px solid var(--sk-flow-line);
+  border-radius: var(--sk-island-radius);
+  background: var(--sk-flow-raised);
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.sk-pf__decline:hover {
+  border-color: var(--sk-island-primary);
+}
+.sk-pf__decline:focus-visible {
+  outline: 2px solid var(--sk-island-accent);
+  outline-offset: 2px;
+}
+
+/* The 000 escape hatch. Danger colours are ABSOLUTE, never derived: an emergency
+   affordance must look the same on every clinic's canvas, and "reads as urgent" is
+   not something to hand to a brand token. It is a link, not a button, because the
+   only correct outcome is a phone call. */
+.sk-pf__emergency {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 44px — the touch-target floor, matching `.sk-flow__btn`. The one control on this
+     screen a patient may be reaching for while unwell must not be the smallest. */
+  min-height: 2.75rem;
+  margin-top: calc(var(--sk-space) * 1.5);
+  padding-inline: calc(var(--sk-space) * 2);
+  border: 1px solid color-mix(in srgb, #ef4444 55%, transparent);
+  border-radius: var(--sk-island-radius);
+  background: color-mix(in srgb, #ef4444 12%, transparent);
+  color: inherit;
+  font-size: var(--sk-font-size-sm);
+  font-weight: 700;
+  text-align: center;
+  text-decoration: none;
+}
+.sk-pf__emergency:hover {
+  background: color-mix(in srgb, #ef4444 20%, transparent);
+}
+.sk-pf__emergency:focus-visible {
+  outline: 2px solid #ef4444;
+  outline-offset: 2px;
+}
+/* The prerendered no-JS fallback: real content, always visible. Never opacity-0. */
+.sk-certificate-funnel__services,
+.sk-booking__types {
+  list-style: none;
+  padding: 0;
+  margin: calc(var(--sk-space) * 2) 0;
+  display: grid;
+  gap: calc(var(--sk-space));
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ── the escalation alert — full-bleed and unmissable by design ─────────────*/
+.sk-cf__escalate {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--sk-space) * 2);
+  padding: calc(var(--sk-space) * 6);
+  overflow-y: auto;
+  /* Self-painted overlay: pair the ink with the surface (a dark site would
+     otherwise inherit white onto white — unacceptable on a safety surface). */
+  background: var(--sk-background, #fff);
+  color: var(--sk-foreground, #1b2733);
+  text-align: center;
+}
+/* This surface is a bare <div> OUTSIDE `.sk-flow`, so the UA heading/paragraph margins
+   the funnel resets everywhere else survive here — the one screen where they must not.
+   With a flat 16px gap plus an h2's 0.83em UA margin, "EMERGENCY" sat ~70px above the
+   headline it labels, further from "Call 000" than "Call 000" was from the instruction,
+   so three fragments of ONE instruction read as three unrelated things. Zero the UA
+   margins, then author the rhythm: eyebrow tight to its heading, one step of air before
+   the body. */
+.sk-cf__escalate > * {
+  margin: 0;
+}
+.sk-cf__escalate-eyebrow {
+  margin-bottom: calc(var(--sk-space) * -1);
+}
+.sk-cf__escalate-eyebrow {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #b3261e;
+}
+.sk-cf__escalate-heading {
+  font-size: clamp(2.5rem, 8vw, 4rem);
+  line-height: 1;
+}
+/* Same programmatic focus as the step heading, and this screen especially must never
+   show a browser default: it was painting a flat UA-BLUE box around "Call 000" on the
+   one canvas whose colours are absolute and authored on purpose. */
+.sk-cf__escalate-heading:focus {
+  outline: none;
+}
+.sk-cf__escalate-body,
+.sk-cf__escalate-note {
+  max-width: 28rem;
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+.sk-cf__escalate-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3.5rem;
+  padding-inline: calc(var(--sk-space) * 5);
+  border-radius: 999px;
+  background: #b3261e;
+  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+.sk-cf__escalate-alt {
+  color: inherit;
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ── payment ────────────────────────────────────────────────────────────────*/
+.sk-pay__form {
+  display: grid;
+  gap: calc(var(--sk-space) * 1.5);
+}
+.sk-pay__row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: calc(var(--sk-space) * 1.5);
+}
+.sk-pay__label {
+  display: block;
+  margin-bottom: calc(var(--sk-space) * 0.75);
+  font-size: var(--sk-font-size-sm);
+  font-weight: 500;
+}
+.sk-pay__mock {
+  padding: calc(var(--sk-space) * 2);
+  border: 1px dashed var(--sk-flow-line, color-mix(in srgb, var(--sk-muted) 40%, transparent));
+  border-radius: var(--sk-island-radius);
+  font-size: var(--sk-font-size-sm);
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+/* The "who takes your card" line (PAT-853). No `margin-top`: it is a `.sk-pay__form`
+   grid child and already sits on the field gap — adding one double-spaced it. Muted via
+   `--sk-flow-muted` rather than the flat `--sk-muted` the status line uses, because this
+   sits on the CLINIC's canvas and a fixed grey is unreadable on half of them (8.47:1 at
+   14px on the dark canvas, measured). */
+/* The timezone qualifier on the slot day heading (PAT-853). Its own rule so it does not
+   inherit the heading's 600 — the DATE is the heading, the zone is the fine print that
+   stops a Perth patient reading "09:00" as their own 09:00. */
+.sk-slots__heading-tz {
+  font-weight: 500;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: var(--sk-font-size-sm);
+}
+.sk-pay__secure {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--sk-space) * 0.75);
+  font-size: var(--sk-font-size-sm);
+  line-height: 1.45;
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+.sk-pay__secure-icon {
+  flex: none;
+  margin-top: 0.2em;
+}
+.sk-pay__status,
+.sk-pay__loading {
+  margin-top: calc(var(--sk-space));
+  font-size: 0.75rem;
+  /* `--sk-muted` is a FIXED grey (#5b6b7a) — 3.14:1 on the PocketDoc canvas, i.e. the
+     "Placing hold…" microcopy on the money screen was under AA. Derived like every other
+     secondary ink in the flow so it tracks whatever canvas the island landed on. */
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+.sk-pay__actions {
+  margin-top: calc(var(--sk-space) * 2);
+}
+.sk-turnstile {
+  margin-top: calc(var(--sk-space) * 2);
+}
+
+/* ── slots ──────────────────────────────────────────────────────────────────*/
+.sk-slots__days {
+  display: flex;
+  gap: calc(var(--sk-space));
+  overflow-x: auto;
+  padding-bottom: calc(var(--sk-space));
+}
+.sk-slots__day {
+  flex-shrink: 0;
+  padding: calc(var(--sk-space)) calc(var(--sk-space) * 2);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 35%, transparent);
+  border-radius: 999px;
+  background: none;
+  /* See `.sk-booking__option` — without this the day chips render `buttontext` on the
+     clinic's canvas, i.e. invisible on a dark site, on the screen where the patient
+     picks their appointment. */
+  color: inherit;
+  font: inherit;
+  font-size: var(--sk-font-size-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.sk-slots__day--active {
+  border-color: var(--sk-island-primary);
+  background: color-mix(in srgb, var(--sk-island-primary) 10%, transparent);
+}
+.sk-slots__heading {
+  margin-top: calc(var(--sk-space) * 2);
+  font-size: var(--sk-font-size-sm);
+  font-weight: 600;
+}
+.sk-slots__grid {
+  margin-top: calc(var(--sk-space) * 1.5);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: calc(var(--sk-space));
+}
+.sk-slots__time {
+  padding: calc(var(--sk-space) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 30%, transparent);
+  border-radius: var(--sk-island-radius);
+  background: none;
+  /* Same as `.sk-slots__day`: every time label inherits from here. */
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.sk-slots__time--selected {
+  border-color: var(--sk-island-primary);
+  background: color-mix(in srgb, var(--sk-island-primary) 12%, transparent);
+}
+/* An advisory hold: dimmed as a hint, still clickable — the booking call decides. */
+.sk-slots__time--held {
+  opacity: 0.5;
+}
+.sk-slots__time-label {
+  display: block;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.sk-slots__time-note {
+  display: block;
+  margin-top: 2px;
+  font-size: 0.6875rem;
+  color: var(--sk-flow-muted, var(--sk-muted));
+}
+.sk-slots__confirm {
+  /* Sticky at EVERY width: a long diary (10+ times = 4+ grid rows) pushes this CTA
+     below the fold on a 900px-tall desktop viewport too. What is width-conditional is
+     the SCRIM, below — at 1440 the whole step fits, the bar is never stuck, and the
+     veil painted a square-cornered slab across the column with an 8px halo round the
+     button on the last screen before the patient commits a time and a card hold. When
+     it IS stuck at desktop width the full-width opaque `.sk-flow__btn--primary` fill
+     does the occluding on its own. */
+  position: sticky;
+  bottom: 0;
+  margin-top: calc(var(--sk-space) * 2);
+  padding-block: calc(var(--sk-space) * 1.5);
+  color: inherit;
+}
+/* Below the rail breakpoint (`@media (min-width: 900px)`, line 868) the rail is stacked
+   under the step, so the bar owns the full column and is a genuine bottom bar: it bleeds
+   to the flow's own 1.5rem inset (`.sk-flow { padding-inline: calc(var(--sk-space) * 3) }`,
+   line ~628 — `.sk-flow__body` adds none, so this lands exactly on the flow's border box)
+   and carries a hairline so its top edge reads as an edge rather than a seam. NOT above
+   900px: the flow is railed there (`minmax(0, 1fr) 17rem` + a 2rem gap), so the same bleed
+   would poke into the gutter and stop ~8px short of the rail's divider.
+   The veil is still derived from `currentColor`, never from `--sk-background`: the island
+   cannot know the clinic's canvas (PAT-834/838). */
+@media (max-width: 899.98px) {
+  .sk-slots__confirm {
+    margin-inline: calc(var(--sk-space) * -3);
+    padding-inline: calc(var(--sk-space) * 3);
+    border-top: 1px solid
+      var(--sk-flow-line, color-mix(in srgb, currentColor 24%, transparent));
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+}
+.sk-slots--empty {
+  padding: calc(var(--sk-space) * 4);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 25%, transparent);
+  border-radius: var(--sk-island-radius);
+  text-align: center;
+}
+/* The escapes on an empty diary (PAT-853). Stacked, not a row: on a 390px screen a row
+   of three would each be too narrow to read, and they are not equal-weight choices. */
+.sk-slots__empty-actions {
+  display: grid;
+  gap: calc(var(--sk-space));
+  margin-top: calc(var(--sk-space) * 2);
+  text-align: left;
+}
+.sk-slots__empty-note {
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: var(--sk-font-size-sm);
+}
+.sk-slots__empty-title {
+  font-weight: 600;
+}
+.sk-slots__empty-body {
+  margin-top: calc(var(--sk-space));
+  color: var(--sk-muted);
+  font-size: var(--sk-font-size-sm);
+}
+
+@media (max-width: 560px) {
+  .sk-identity__grid,
+  .sk-cf__row,
+  .sk-pay__row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .sk-identity__field--wide {
+    grid-column: auto;
+  }
+  /* Stacked, the row's 16px row-gap ADDS to the 12px `margin-block` each `.sk-cf__field`
+     already carries (grid item margins never collapse), so the Expiry group sat 40px below
+     the Reference number group against 24px everywhere else in the form. One column needs
+     no row-gap — the fields' own margins are the rhythm. Scoped to `.sk-cf__row`, not the
+     group above: `.sk-identity__grid` / `.sk-pay__row` children space themselves differently. */
+  .sk-cf__row {
+    row-gap: 0;
+  }
+  /* Stack the label above the value: at phone width a 104px label column leaves too
+     little for an address line, and a side-by-side row is what forced the overflow. */
+  .sk-identity__confirm-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+}
+
+
+/* ── portal controls, shared by portal-panel + portal-account (PAT-783) ───── */
+/* ONE label / input / button style across both portal islands. They render the
+ * same kinds of control on the same origin, and two sets of styles is how a
+ * patient starts to feel the seam between "the clinic's site" and "the portal" —
+ * which is the exact seam one-origin exists to remove. */
+.sk-portal-label {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  font-weight: 600;
+}
+
+.sk-portal-input {
+  font: inherit;
+  width: 100%;
+  padding: var(--sk-space, 0.5rem);
+  border: 1px solid color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 20%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-background, #ffffff);
+  color: var(--sk-foreground, #1b2733);
+}
+
+.sk-portal-button {
+  display: inline-block;
+  font: inherit;
+  font-weight: 600;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--sk-space, 0.5rem) calc(var(--sk-space, 0.5rem) * 2);
+  border: 1px solid transparent;
+  border-radius: var(--sk-radius, 0.625rem);
+  /* `--sk-brand-foreground` is DERIVED by contrast (`resolveTheme`), never taken
+   * from the clinic — see contrast.ts. */
+  background: var(--sk-brand, #1f6feb);
+  color: var(--sk-brand-foreground, #ffffff);
+}
+
+.sk-portal-button--ghost {
+  background: transparent;
+  color: var(--sk-brand, #1f6feb);
+  border-color: color-mix(in srgb, var(--sk-brand, #1f6feb) 40%, transparent);
+}
+
+.sk-portal-button--danger {
+  background: var(--sk-danger, #b3261e);
+  color: #ffffff;
+  border-color: transparent;
+}
+
+.sk-portal-button[disabled] {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.sk-portal-link {
+  color: var(--sk-brand, #1f6feb);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.sk-portal-error {
+  margin: var(--sk-space, 0.5rem) 0;
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-danger, #b3261e);
+}
+
+/* The sign-in ramp. One field + one button — anything more belongs in the portal. */
+.sk-portal-ramp {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-ramp__intro,
+.sk-portal-ramp__sent {
+  margin: 0;
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+/* ── portal-panel (PAT-767) ──────────────────────────────────────────────── */
+.sk-portal-panel {
+  background: var(--sk-neutral, #f4f6f8);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 3);
+  font-family: var(--sk-font, system-ui, sans-serif);
+  color: var(--sk-neutral-foreground, #1b2733);
+}
+
+.sk-portal-panel__heading {
+  font-family: var(--sk-font-heading, var(--sk-font, system-ui, sans-serif));
+  font-size: var(--sk-font-size-lg, 1.25rem);
+  line-height: 1.3;
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+}
+
+.sk-portal-panel__placeholder,
+.sk-portal-panel__empty {
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-panel__link {
+  color: var(--sk-brand, #1f6feb);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+/* The summary list: metadata only (title · date · status). Never bytes, never
+ * clinical narrative — the panel is a teaser that links into the real portal. */
+.sk-portal-panel__list {
+  list-style: none;
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-panel__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: calc(var(--sk-space, 0.5rem) * 0.75);
+  padding-bottom: var(--sk-space, 0.5rem);
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+}
+
+.sk-portal-panel__item:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.sk-portal-panel__item-title {
+  font-weight: 600;
+}
+
+.sk-portal-panel__item-meta {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-panel__item-status {
+  margin-left: auto;
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  text-transform: capitalize;
+  color: var(--sk-muted, #5b6b7a);
+}
+
+/* ── portal-account (PAT-783) ────────────────────────────────────────────── */
+/* The FULL account surface, living inside the clinic's own page. Calm and dense:
+ * this is a patient managing their care, not a marketing band, so it reads as a
+ * quiet card rather than competing with the page around it. Controls come from
+ * the shared `.sk-portal-*` primitives above. */
+.sk-portal-account {
+  background: var(--sk-neutral, #f4f6f8);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 3);
+  font-family: var(--sk-font, system-ui, sans-serif);
+  color: var(--sk-neutral-foreground, #1b2733);
+}
+
+.sk-portal-account__heading {
+  font-family: var(--sk-font-heading, var(--sk-font, system-ui, sans-serif));
+  font-size: var(--sk-font-size-lg, 1.25rem);
+  line-height: 1.3;
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+}
+
+.sk-portal-account__placeholder,
+.sk-portal-account__empty,
+.sk-portal-account__note,
+.sk-portal-account__hint {
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+/* ── the /account/book launcher (PAT-899) ───────────────────────────────────
+ * Rows that LEAVE for the funnel, so they are anchors and styled as such. They live in
+ * the light account panel and must not borrow the funnel's dark canvas — the two
+ * surfaces are deliberately different places, which is the whole reason the funnel was
+ * not mounted here. Colours come from the same `--sk-*` slots as the rest of the panel,
+ * so a clinic's theme reaches them without a second vocabulary. */
+.sk-portal-launcher {
+  list-style: none;
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-launcher__service {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  width: 100%;
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+  border: 1px solid var(--sk-border, #dce3ea);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-surface, #fff);
+  color: inherit;
+  text-decoration: none;
+}
+
+.sk-portal-launcher__service:hover,
+.sk-portal-launcher__service:focus-visible {
+  border-color: var(--sk-primary, #0f766e);
+}
+
+.sk-portal-launcher__body {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.5);
+  /* The row can hold a long service name; let it wrap rather than push the chevron out. */
+  min-width: 0;
+}
+
+.sk-portal-launcher__label {
+  font-weight: 600;
+}
+
+.sk-portal-launcher__fee {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-launcher__chevron {
+  flex: none;
+  color: var(--sk-muted, #5b6b7a);
+}
+
+/* The "already signed in on the last page" placeholder (PAT-797) — inert bars in the
+ * shape of the rows about to land, shown INSTEAD of "Checking your sign-in…" when this
+ * tab already knows. Deliberately UNANIMATED: a pulse would need a reduced-motion guard
+ * to earn its keep, and it buys nothing here — this is on screen for a few hundred ms.
+ * This is NOT the no-JS fallback below; that one is real content and must stay real. */
+.sk-portal-account__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 2);
+}
+
+.sk-portal-account__skeleton-row {
+  height: 2.75rem;
+  border-radius: var(--sk-radius, 0.625rem);
+  background: color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 7%, transparent);
+}
+
+/* The build-time no-JS fallback: REAL visible content, never a hidden skeleton. */
+.sk-portal-account__signin-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sk-space, 0.5rem);
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+  border: 1px solid color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-background, #ffffff);
+}
+
+.sk-portal-account__signin-card .sk-portal-account__placeholder {
+  margin: 0;
+}
+
+/* Who you are + the way out, on one line. Always visible while signed in: a
+ * patient looking at their own records on a clinic's marketing page must never
+ * have to wonder whose session they are in. */
+.sk-portal-account__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sk-space, 0.5rem);
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 2);
+  padding-bottom: var(--sk-space, 0.5rem);
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+}
+
+.sk-portal-account__who {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-account__group {
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 3);
+}
+
+.sk-portal-account__group-title {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--sk-muted, #5b6b7a);
+  margin: 0 0 var(--sk-space, 0.5rem);
+}
+
+.sk-portal-account__list {
+  list-style: none;
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+}
+
+.sk-portal-account__item {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.5);
+  padding: calc(var(--sk-space, 0.5rem) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-background, #ffffff);
+}
+
+.sk-portal-account__item-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sk-space, 0.5rem);
+}
+
+/* An order row is a disclosure control, so it is a real <button>: keyboard and
+ * screen-reader reachable, styled back down to look like the row it is. */
+.sk-portal-account__item-toggle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sk-space, 0.5rem);
+  width: 100%;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+}
+
+.sk-portal-account__item-title {
+  font-weight: 600;
+}
+
+.sk-portal-account__item-meta {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-account__status {
+  margin-left: auto;
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  text-transform: capitalize;
+  padding: 0 calc(var(--sk-space, 0.5rem) * 0.75);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 8%, transparent);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-account__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sk-space, 0.5rem);
+  margin-top: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-account__actions .sk-portal-button {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  padding: calc(var(--sk-space, 0.5rem) * 0.5) var(--sk-space, 0.5rem);
+}
+
+/* The inline cancel confirm. Expands in place rather than opening a dialog: the
+ * patient is on the clinic's own page and a modal over a marketing layout is a
+ * shape we cannot control. */
+.sk-portal-account__confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+  margin-top: var(--sk-space, 0.5rem);
+  padding: calc(var(--sk-space, 0.5rem) * 1.5);
+  border-radius: var(--sk-radius, 0.625rem);
+  border: 1px solid color-mix(in srgb, var(--sk-danger, #b3261e) 30%, transparent);
+  background: color-mix(in srgb, var(--sk-danger, #b3261e) 5%, transparent);
+}
+
+/* The SAME expanding block, without the danger tint: booking a time and moving a
+ * time are ordinary things a patient does, and a red-edged card would read as a
+ * warning about a decision that has nothing to warn about (PAT-789). */
+.sk-portal-account__confirm--neutral {
+  border-color: color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 15%, transparent);
+  background: var(--sk-neutral, #f4f6f8);
+}
+
+.sk-portal-account__confirm-title {
+  margin: 0;
+  font-weight: 600;
+}
+
+/* Back + what you are booking, on one line above the slot grid. The step label is
+ * the answer to "a time for what?", which is otherwise off the top of the screen
+ * once the grid scrolls. */
+.sk-portal-account__step-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sk-space, 0.5rem);
+  margin-bottom: var(--sk-space, 0.5rem);
+}
+
+/* "No times available" and the like: a bordered card, not a bare grey line — an
+ * empty grid is a dead end and should look like a considered answer. */
+.sk-portal-account__note-card {
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+  border: 1px solid color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-background, #ffffff);
+  text-align: center;
+}
+
+.sk-portal-account__note-card .sk-portal-account__empty {
+  margin: var(--sk-space, 0.5rem) 0 0;
+}
+
+/* The booked confirmation. It carries `role="status"`, so it is announced as well
+ * as shown — a patient using a screen reader must not have to hunt for whether
+ * the booking actually happened. */
+.sk-portal-account__done {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+  border: 1px solid color-mix(in srgb, var(--sk-brand, #1f6feb) 35%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: color-mix(in srgb, var(--sk-brand, #1f6feb) 6%, transparent);
+}
+
+.sk-portal-account__done .sk-portal-account__fields,
+.sk-portal-account__done .sk-portal-account__empty {
+  margin-bottom: 0;
+}
+
+/* The slot grid inside a portal card. The board's own `.sk-slots__*` rules do the
+ * work; this only gives it room and stops the sticky confirm bar of the funnel
+ * variant (which the portal does not render) from being missed. */
+.sk-portal-account__confirm .sk-slots,
+.sk-portal-account__body .sk-slots {
+  margin: var(--sk-space, 0.5rem) 0;
+}
+
+.sk-portal-account__reasons {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.5);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.sk-portal-account__reason {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sk-space, 0.5rem) * 0.75);
+  font-size: var(--sk-font-size-sm, 0.875rem);
+}
+
+.sk-portal-account__confirm-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-account__detail {
+  margin-top: var(--sk-space, 0.5rem);
+  padding-top: var(--sk-space, 0.5rem);
+  border-top: 1px dashed
+    color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 15%, transparent);
+}
+
+.sk-portal-account__lines {
+  list-style: none;
+  margin: 0 0 var(--sk-space, 0.5rem);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.5);
+}
+
+.sk-portal-account__line {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sk-space, 0.5rem);
+  font-size: var(--sk-font-size-sm, 0.875rem);
+}
+
+.sk-portal-account__total {
+  margin: 0;
+  font-weight: 700;
+  text-align: right;
+}
+
+/* The profile read view. A description list, so the label→value pairing is real
+ * structure a screen reader can use rather than two spans that look aligned. */
+.sk-portal-account__fields {
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 2);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-account__field {
+  display: grid;
+  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-portal-account__field-label {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: var(--sk-muted, #5b6b7a);
+}
+
+.sk-portal-account__field-value {
+  margin: 0;
+}
+
+.sk-portal-account__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+}
+
+@media (max-width: 560px) {
+  .sk-portal-account__field {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+}
+
+/* ── store (PAT-766) ─────────────────────────────────────────────────────── */
+/* The app-served store shell (`/store` · `/cart` · `/checkout`). It lives in the
+ * kit, not the dashboard's app.css, so a shopper crossing from the clinic's own
+ * brochure into a page we serve does not feel like they left the clinic's site. */
+.sk-store-shell {
+  min-height: 100vh;
+  padding: calc(var(--sk-space, 0.5rem) * 3);
+}
+.sk-store-shell__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  max-width: 68rem;
+  margin: 0 auto calc(var(--sk-space, 0.5rem) * 4);
+  padding-bottom: calc(var(--sk-space, 0.5rem) * 2);
+  border-bottom: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+}
+.sk-store-shell__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+  color: inherit;
+  font-weight: 700;
+  text-decoration: none;
+}
+.sk-store-shell__logo {
+  height: 2rem;
+  width: auto;
+}
+.sk-store-shell__nav {
+  display: flex;
+  gap: calc(var(--sk-space, 0.5rem) * 3);
+}
+.sk-store-shell__nav a {
+  color: var(--sk-brand, #1f6feb);
+  text-decoration: none;
+}
+.sk-store-shell__nav a:hover {
+  text-decoration: underline;
+}
+.sk-store-shell__main {
+  max-width: 68rem;
+  margin: 0 auto;
+}
+.sk-store__breadcrumb {
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 2);
+  font-size: 0.875rem;
+}
+.sk-store__breadcrumb a {
+  color: var(--sk-brand, #1f6feb);
+  text-decoration: none;
+}
+.sk-store__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 3);
+}
+.sk-store__cart-link {
+  color: var(--sk-brand, #1f6feb);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.sk-store__cart-link:hover {
+  text-decoration: underline;
+}
+.sk-store__grid {
+  display: grid;
+  gap: calc(var(--sk-space, 0.5rem) * 3);
+  grid-template-columns: repeat(var(--sk-store-columns, 3), minmax(0, 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.sk-store__card {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+}
+.sk-store__card-link {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+  color: inherit;
+  text-decoration: none;
+}
+.sk-store__image {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  border-radius: var(--sk-radius, 0.625rem);
+  object-fit: cover;
+  background: color-mix(in oklab, color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent) 40%, transparent);
+}
+.sk-store__image--empty {
+  display: block;
+}
+.sk-store__title {
+  font-weight: 600;
+  line-height: 1.3;
+}
+.sk-store__price {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+.sk-store__gst {
+  font-size: 0.8125rem;
+  font-weight: 400;
+  opacity: 0.7;
+}
+.sk-store__variant {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.5);
+  font-size: 0.875rem;
+}
+.sk-store__variant select {
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 1);
+  font: inherit;
+  background: transparent;
+  /* Form controls do not inherit colour either — a transparent one must name its ink
+     or it renders the UA's `fieldtext` over whatever the theme painted behind it. */
+  color: inherit;
+}
+.sk-store__add {
+  margin-top: auto;
+  border: 0;
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-brand, #1f6feb);
+  color: var(--sk-brand-foreground, #fff);
+  padding: calc(var(--sk-space, 0.5rem) * 1.25) calc(var(--sk-space, 0.5rem) * 2);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.sk-store__add:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+@media (max-width: 720px) {
+  .sk-store__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 480px) {
+  .sk-store__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+
+/* ── cart (PAT-766) ──────────────────────────────────────────────────────── */
+.sk-cart__problems {
+  margin: 0 0 calc(var(--sk-space, 0.5rem) * 3);
+  padding: calc(var(--sk-space, 0.5rem) * 1.5) calc(var(--sk-space, 0.5rem) * 2)
+    calc(var(--sk-space, 0.5rem) * 1.5) calc(var(--sk-space, 0.5rem) * 4);
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-left-width: 3px;
+  border-radius: var(--sk-radius, 0.625rem);
+  font-size: 0.9375rem;
+}
+.sk-cart__lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.sk-cart__line {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
+  align-items: center;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  padding: calc(var(--sk-space, 0.5rem) * 2) 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+}
+.sk-cart__line-title {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: none;
+}
+.sk-cart__line-unit {
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+.sk-cart__qty {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--sk-space, 0.5rem) * 1);
+}
+.sk-cart__qty button {
+  min-width: 2rem;
+  min-height: 2rem;
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: transparent;
+  /* See `.sk-booking__option`: a see-through <button> must name its ink. */
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.sk-cart__line-total {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+.sk-cart__remove {
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  opacity: 0.75;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.sk-cart__totals {
+  margin: calc(var(--sk-space, 0.5rem) * 3) 0 0;
+  margin-left: auto;
+  max-width: 22rem;
+}
+.sk-cart__totals > div {
+  display: flex;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 3);
+  padding: calc(var(--sk-space, 0.5rem) * 0.75) 0;
+}
+.sk-cart__totals dt,
+.sk-cart__totals dd {
+  margin: 0;
+}
+.sk-cart__totals dd {
+  font-variant-numeric: tabular-nums;
+}
+.sk-cart__gst-row {
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+.sk-cart__total-row {
+  border-top: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.sk-cart__note {
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+.sk-cart__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  margin-top: calc(var(--sk-space, 0.5rem) * 3);
+}
+.sk-cart__continue {
+  color: var(--sk-brand, #1f6feb);
+  text-decoration: none;
+}
+.sk-cart__continue:hover {
+  text-decoration: underline;
+}
+.sk-cart__checkout {
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-brand, #1f6feb);
+  color: var(--sk-brand-foreground, #fff);
+  padding: calc(var(--sk-space, 0.5rem) * 1.5) calc(var(--sk-space, 0.5rem) * 3);
+  font-weight: 600;
+  text-decoration: none;
+}
+@media (max-width: 600px) {
+  .sk-cart__line {
+    grid-template-columns: 1fr auto;
+  }
+}
+
+
+/* ── checkout (PAT-766) ──────────────────────────────────────────────────── */
+.sk-checkout__summary {
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 3);
+}
+.sk-checkout__lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.sk-checkout__lines li {
+  display: flex;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  padding: calc(var(--sk-space, 0.5rem) * 0.75) 0;
+}
+.sk-checkout__totals {
+  margin: calc(var(--sk-space, 0.5rem) * 2) 0 0;
+  border-top: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  padding-top: calc(var(--sk-space, 0.5rem) * 1.5);
+}
+.sk-checkout__totals > div {
+  display: flex;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  padding: calc(var(--sk-space, 0.5rem) * 0.5) 0;
+}
+.sk-checkout__totals dt,
+.sk-checkout__totals dd {
+  margin: 0;
+}
+.sk-checkout__totals dd {
+  font-variant-numeric: tabular-nums;
+}
+.sk-checkout__total-row {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.sk-checkout__form {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 3);
+}
+.sk-checkout__fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+}
+.sk-checkout__fieldset legend {
+  font-weight: 600;
+  padding-inline: calc(var(--sk-space, 0.5rem) * 0.5);
+}
+.sk-checkout__fieldset label {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.5);
+  font-size: 0.9375rem;
+}
+.sk-checkout__fieldset input[type='text'],
+.sk-checkout__fieldset input:not([type]),
+.sk-checkout__fieldset select {
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 1.25);
+  font: inherit;
+  background: transparent;
+  /* See `.sk-store__variant select`. */
+  color: inherit;
+}
+.sk-checkout__ship {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+  padding-top: calc(var(--sk-space, 0.5rem) * 1);
+}
+.sk-checkout__pay {
+  border: 0;
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-brand, #1f6feb);
+  color: var(--sk-brand-foreground, #fff);
+  padding: calc(var(--sk-space, 0.5rem) * 1.75) calc(var(--sk-space, 0.5rem) * 3);
+  font: inherit;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.sk-checkout__pay:disabled {
+  cursor: progress;
+  opacity: 0.6;
+}
+.sk-checkout__error {
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-left: 3px solid currentColor;
+  border-radius: var(--sk-radius, 0.625rem);
+  padding: calc(var(--sk-space, 0.5rem) * 1.5) calc(var(--sk-space, 0.5rem) * 2);
+  margin-bottom: calc(var(--sk-space, 0.5rem) * 2);
+}
+.sk-checkout__note {
+  font-size: 0.875rem;
+  opacity: 0.8;
+}
+.sk-checkout__link,
+.sk-checkout__signin {
+  display: inline-block;
+  margin-top: calc(var(--sk-space, 0.5rem) * 2);
+  color: var(--sk-brand, #1f6feb);
+  font-weight: 600;
+  text-decoration: none;
+}
+.sk-checkout__link:hover,
+.sk-checkout__signin:hover {
+  text-decoration: underline;
+}
+/* The 3DS challenge frame. Fixed minimum height because the issuer's page is
+   arbitrary and cross-origin — we cannot measure it, and a collapsed frame is a
+   payment the shopper cannot complete. */
+.sk-checkout__3ds {
+  width: 100%;
+  min-height: 26rem;
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+}
+
+/* ── the telehealth consult room (PAT-792) ────────────────────────────────── */
+/* Styled HERE rather than in the lazy chunk, deliberately: the room's markup ships
+ * in a separately-fetched bundle, but a patient must never watch an unstyled video
+ * call assemble itself while that bundle lands. These rules are already in the
+ * site's compiled `/app.css`, so the panel is dressed the instant it opens.
+ *
+ * The stage deliberately does NOT read `--sk-background`/`--sk-foreground`: it sits
+ * over arbitrary video, and a clinic that themed its site light-on-light would make
+ * the controls disappear. It is a fixed dark surface with white controls — the same
+ * call the app's room makes on the dashboard's dark scrim. */
+.sk-consult {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-space, 0.5rem);
+  width: 100%;
+  margin-top: var(--sk-space, 0.5rem);
+  padding: calc(var(--sk-space, 0.5rem) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: var(--sk-neutral, #f4f6f8);
+}
+
+.sk-consult__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sk-space, 0.5rem);
+}
+
+.sk-consult__title {
+  font-weight: 600;
+}
+
+.sk-consult__head .sk-portal-button {
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  padding: calc(var(--sk-space, 0.5rem) * 0.5) var(--sk-space, 0.5rem);
+}
+
+/* The chunk's own React root mounts here. Sized by its contents. */
+.sk-consult__host:empty {
+  display: none;
+}
+
+.sk-consult__room {
+  display: flex;
+  flex-direction: column;
+}
+
+.sk-consult__notice {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sk-space, 0.5rem);
+  padding: calc(var(--sk-space, 0.5rem) * 2) 0;
+}
+
+.sk-consult__placeholder {
+  color: var(--sk-muted, #5b6b7a);
+  font-size: var(--sk-font-size-sm, 0.875rem);
+}
+
+.sk-consult__body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The video area. `aspect-ratio` (not a fixed height) so it stays sane from a phone
+ * to a desktop; `max-height: 70vh` so a wide viewport can't push the controls below
+ * the fold on a page whose header we do not control. */
+.sk-consult__stage {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  max-height: 70vh;
+  overflow: hidden;
+  border-radius: var(--sk-radius, 0.625rem);
+  background: #10161d;
+  color: #ffffff;
+}
+
+.sk-consult__stage .sk-consult__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 calc(var(--sk-space, 0.5rem) * 2);
+  text-align: center;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.sk-consult__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sk-consult__video--mirrored {
+  transform: scaleX(-1);
+}
+
+.sk-consult__remotes {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+}
+
+.sk-consult__remotes--many {
+  grid-template-columns: 1fr 1fr;
+}
+
+.sk-consult__remote {
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+  background: #10161d;
+}
+
+/* The mirrored self-view. Small, out of the way, and labelled — an unlabelled second
+ * tile reads as another person in the room. */
+.sk-consult__self {
+  position: absolute;
+  right: calc(var(--sk-space, 0.5rem) * 1.5);
+  bottom: calc(var(--sk-space, 0.5rem) * 7);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 7rem;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: calc(var(--sk-radius, 0.625rem) * 0.6);
+  background: #10161d;
+}
+
+.sk-consult__self-starting {
+  font-size: 0.6875rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.sk-consult__self-label {
+  position: absolute;
+  left: 0.25rem;
+  bottom: 0.25rem;
+  padding: 0 0.25rem;
+  border-radius: 0.1875rem;
+  background: rgba(0, 0, 0, 0.55);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #ffffff;
+}
+
+/* "Waiting for your clinician to join…" over the patient's own camera. */
+.sk-consult__pill {
+  position: absolute;
+  left: var(--sk-space, 0.5rem);
+  top: var(--sk-space, 0.5rem);
+  z-index: 10;
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.55);
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  color: #ffffff;
+}
+
+/* A fixed amber, not a token: this chip sits over arbitrary video where a themed
+ * colour can land at any contrast. Colour is never alone — the word carries it. */
+.sk-consult__reconnecting {
+  position: absolute;
+  left: 50%;
+  top: var(--sk-space, 0.5rem);
+  z-index: 30;
+  transform: translateX(-50%);
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  background: #f0a202;
+  font-size: var(--sk-font-size-sm, 0.875rem);
+  font-weight: 600;
+  color: #1b2733;
+}
+
+/* ALWAYS visible, unlike the app's hover-reveal bar: this is a patient on a touch
+ * device who has never seen this surface before, and a control they must discover by
+ * hovering is a control they do not have. */
+.sk-consult__controls {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: calc(var(--sk-space, 0.5rem) * 3) var(--sk-space, 0.5rem) var(--sk-space, 0.5rem);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 45%, transparent);
+}
+
+.sk-consult__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--sk-radius, 0.625rem) * 0.6);
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.95);
+  cursor: pointer;
+}
+
+.sk-consult__control:hover {
+  background: rgba(255, 255, 255, 0.24);
+}
+
+.sk-consult__control:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.85);
+  outline-offset: 2px;
+}
+
+/* Muted / camera-off. The GLYPH changes too — never colour alone. */
+.sk-consult__control.is-off {
+  color: #ffb4ab;
+}
+
+.sk-consult__control--leave {
+  margin-inline-start: auto;
+  background: var(--sk-danger, #b3261e);
+  color: #ffffff;
+}
+
+.sk-consult__control--leave:hover {
+  background: color-mix(in srgb, var(--sk-danger, #b3261e) 85%, #000000);
+}
+
+/* The device menu — a plain absolutely-positioned panel inside the stage, never a
+ * portal: a portal renders into the clinic page's own <body>, escaping the island's
+ * subtree and landing under whatever z-index that template happens to use. */
+.sk-consult__devices {
+  position: absolute;
+  left: var(--sk-space, 0.5rem);
+  bottom: calc(var(--sk-space, 0.5rem) * 7);
+  z-index: 30;
+  width: 15rem;
+  max-height: 70%;
+  overflow-y: auto;
+  padding: 0.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: calc(var(--sk-radius, 0.625rem) * 0.6);
+  background: rgba(0, 0, 0, 0.85);
+  color: #ffffff;
+}
+
+.sk-consult__device-group {
+  padding: 0.25rem 0;
+}
+
+.sk-consult__device-label {
+  padding: 0 0.5rem 0.125rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.sk-consult__device-empty {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.sk-consult__device {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  border-radius: 0.25rem;
+  background: transparent;
+  font: inherit;
+  font-size: 0.75rem;
+  text-align: start;
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+}
+
+.sk-consult__device:hover,
+.sk-consult__device:focus-visible {
+  background: rgba(255, 255, 255, 0.15);
+  outline: none;
+}
+
+.sk-consult__device-tick {
+  flex: none;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.sk-consult__device-tick.is-off {
+  opacity: 0;
+}
+
+.sk-consult__device-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Autoplay blocked the remote audio (a patient who arrived from a magic link gave the
+ * document no gesture). One tap, centred over the stage. */
+.sk-consult__unblock {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.sk-consult__unblock .sk-portal-button {
+  pointer-events: auto;
+}
+
+/* ── Address picker (PAT-850) ─────────────────────────────────────────────────
+   Address entry is Google-only: the visitor searches and CHOOSES, there are no
+   street/suburb/state/postcode inputs left to style. Deliberately built from the
+   same tokens as .sk-identity__* so a picker sitting inside the identity grid or
+   the checkout form reads as one of its fields rather than a bolted-on widget. */
+.sk-address {
+  position: relative;
+  grid-column: 1 / -1;
+}
+.sk-address__label {
+  display: block;
+  margin-bottom: calc(var(--sk-space) * 0.75);
+  font-size: var(--sk-font-size-sm);
+  font-weight: 500;
+}
+.sk-address__input {
+  width: 100%;
+  min-height: 2.5rem;
+  padding: calc(var(--sk-space)) calc(var(--sk-space) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 40%, transparent);
+  border-radius: var(--sk-island-radius);
+  background: var(--sk-background, #fff);
+  color: var(--sk-foreground, inherit);
+  font: inherit;
+}
+.sk-address__input[aria-invalid='true'] {
+  border-color: #b3261e;
+}
+/* The popup is positioned against the input's own box, not the field group. */
+.sk-address__box {
+  position: relative;
+}
+/* The suggestion list overlays following fields rather than shoving them down —
+   the form must not reflow under the visitor mid-type. */
+.sk-address__list {
+  position: absolute;
+  z-index: 20;
+  inset-inline: 0;
+  top: calc(100% + var(--sk-space) * 0.5);
+  max-height: 15rem;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: calc(var(--sk-space) * 0.5);
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-radius: var(--sk-island-radius);
+  /* OPAQUE, in two layers, and this is the whole point of the rule (PAT-867).
+     `--sk-flow-canvas` is the page's own backdrop, resolved to a concrete colour by
+     `useResolvedSurface` in `flow-shell.tsx` — the island is still reading the clinic's
+     canvas rather than inventing one, and it is NOT `--sk-background` (the kit's own
+     light-theme token, which would paint white down a dark page — PAT-834/838). The
+     `currentColor` tint on top is what lifts the popup off that canvas, and it is
+     layered ONTO an opaque base rather than being the base: as the base it was
+     translucent by construction, and the content underneath read straight through the
+     list. A popup covers unrelated content — it may not share it. `white` is the
+     fallback for a no-JS render, where no popup exists yet anyway. */
+  background:
+    linear-gradient(
+      color-mix(in srgb, currentColor 10%, transparent),
+      color-mix(in srgb, currentColor 10%, transparent)
+    ),
+    var(--sk-flow-canvas, white);
+  box-shadow: 0 8px 24px color-mix(in srgb, currentColor 25%, transparent);
+}
+.sk-address__option {
+  padding: calc(var(--sk-space) * 1.25) calc(var(--sk-space) * 1.5);
+  border-radius: calc(var(--sk-island-radius) * 0.75);
+  font-size: var(--sk-font-size-sm);
+  line-height: 1.4;
+  cursor: pointer;
+}
+/* Keyboard and pointer land on the SAME visual state — `aria-activedescendant` moves
+   no real focus, so without this the arrow keys would move an invisible cursor. */
+.sk-address__option--active,
+.sk-address__option:hover {
+  background: color-mix(in srgb, currentColor 16%, transparent);
+}
+/* Reading copy, so it takes the muted ink rather than a dimmer of the field's. */
+.sk-flow .sk-address__status {
+  margin-top: calc(var(--sk-space) * 0.75);
+  min-height: 1.2em;
+  color: var(--sk-flow-muted, var(--sk-muted));
+  font-size: 0.8125rem;
+  line-height: 1.2;
+}
+.sk-address__empty {
+  margin-top: calc(var(--sk-space) * 0.75);
+  font-size: var(--sk-font-size-sm);
+}
+.sk-address__check {
+  margin-top: calc(var(--sk-space) * 0.5);
+  padding: calc(var(--sk-space) * 0.75) calc(var(--sk-space) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 40%, transparent);
+  border-radius: var(--sk-island-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+/* A picked address is settled text, not a field — the visual difference between
+   "chosen" and "still editable" is the whole point of the control. */
+.sk-address--picked {
+  padding: calc(var(--sk-space)) calc(var(--sk-space) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted) 30%, transparent);
+  border-radius: var(--sk-island-radius);
+  background: color-mix(in srgb, var(--sk-muted) 8%, transparent);
+}
+.sk-address__chosen {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.sk-address__change {
+  margin-top: calc(var(--sk-space) * 0.5);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--sk-primary, inherit);
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.sk-address__error {
+  margin-top: calc(var(--sk-space));
+  color: #b3261e;
+  font-size: var(--sk-font-size-sm);
+}