/* ═══════════════════════════════════════════════════════════════════════════
   SITE ADDITIONS (TASK B0, PHASE 2 wave 1): the rules the approved board does not have because the board is a
   one-page mockup. Loaded AFTER the vendored board sheets (public/styles/board/, never edited: check-vendored-board).
   Same system: scoped under [data-world="V5"], V1 tokens only, GSAP-only motion (no @keyframes), hover transitions
   only, never #000. Each block names why the board lacked it. A stage-2 task adds its OWN sheet
   (public/styles/site/<task>.css via BaseLayout `siteSheet`), never this file (PORTING-CONTRACT.md).
   ═══════════════════════════════════════════════════════════════════════════ */

/* required globals (tech-builder skill "Required global CSS") */
:root { --header-height: 84px; --brand-accent: #E3A93B; --color-primary-rgb: 11, 30, 36; }
body { overflow-x: clip; }

/* ---------- skip link ---------- */
.aps-skip { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 12px 18px; border-radius: 999px; background: #F5F1E8; color: #0B1E24; font: 600 16px/1.2 "Instrument Sans", system-ui, sans-serif; text-decoration: none; }
.aps-skip:focus { top: 12px; outline: 3px solid #0384A9; outline-offset: 3px; }

/* ---------- header: the GATE 1 nav inside the approved island (the board had four anchor links) ---------- */
[data-world="V5"] .v1-header__logo img.aps-logo--mark { display: none; width: 44px; height: 44px; }
[data-world="V5"] .v1-header__logo img.aps-logo--full { display: block; }
[data-world="V5"] .v1-header__island { position: relative; }
/* the desktop drop-downs (Services, Conditions) and their row: public/styles/site/nav-menu.css (TASK NAV) */
/* the menu button: below 1380 px (where the board hides .v1-nav) */
[data-world="V5"] .aps-burger { display: none; flex: none; width: 52px; height: 52px; margin-left: 6px; border: 0; border-radius: 50%; background: var(--v1-ink); color: var(--v1-paper); cursor: pointer; align-items: center; justify-content: center; }
[data-world="V5"] .aps-burger__bars { display: grid; gap: 5px; width: 20px; }
[data-world="V5"] .aps-burger__bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
@media (max-width: 1379px) {
  [data-world="V5"] .aps-burger { display: inline-flex; }
}
@media (max-width: 767px) {
  /* phones: the full logo (mark + the two-line "Advanced Pain Solutions" wordmark, the desktop artwork at the approved board's
     150 px phone width, world.css) + the menu button; Call and Book live in the mobile bar. TASK PT3 (owner 2026-10-24: the
     mark alone read strangely), so the mark-only image stays hidden at every width. */
  [data-world="V5"] .v1-header__island { justify-content: space-between; }
  [data-world="V5"] .aps-header .v1-header__tel, [data-world="V5"] .aps-header .v1-header__book { display: none; }
  [data-world="V5"] .aps-burger { width: 48px; height: 48px; }
  /* auto-hide on scroll down, back on scroll up (public/scripts/site/chrome.js sets .is-tucked) */
  [data-world="V5"].aps-header { transition: transform .4s var(--v1-ease); }
  [data-world="V5"].aps-header.is-tucked { transform: translateY(calc(-100% - 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-world="V5"].aps-header { transition: none; }
}

/* ---------- the drawer (MobileMenu.astro) ---------- */
[data-world="V5"].aps-drawer { position: fixed; inset: 0; z-index: 50; background: rgba(8, 23, 28, .55); }
[data-world="V5"].aps-drawer[hidden] { display: none; }
[data-world="V5"] .aps-drawer__in { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px calc(28px + env(safe-area-inset-bottom)); background: var(--v1-paper); color: var(--v1-ink); }
[data-world="V5"] .aps-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; margin-bottom: 12px; }
[data-world="V5"] .aps-drawer__logo { width: 150px; height: auto; }
[data-world="V5"] .aps-drawer__close { position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--v1-ink); cursor: pointer; }
[data-world="V5"] .aps-drawer__close span::before, [data-world="V5"] .aps-drawer__close span::after { content: ""; position: absolute; left: 14px; right: 14px; top: 23px; height: 2px; border-radius: 2px; background: var(--v1-paper); transform: rotate(45deg); }
[data-world="V5"] .aps-drawer__close span::after { transform: rotate(-45deg); }
[data-world="V5"] .aps-drawer__k { margin: 22px 0 6px; font: 500 12px/1.4 var(--v1-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--v1-muted-paper); }
[data-world="V5"] .aps-drawer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
[data-world="V5"] .aps-drawer__head { display: flex; align-items: center; min-height: var(--aps-tap); color: var(--v1-ink); font: 700 18px/1.15 var(--v1-display); text-decoration: none; }
[data-world="V5"] .aps-drawer__list { list-style: none; margin: 0; padding: 0; }
[data-world="V5"] .aps-drawer__list a { display: flex; align-items: center; min-height: 44px; color: var(--v1-ink); font-size: 16px; text-decoration: none; border-top: 1px solid var(--v1-line-paper); }
[data-world="V5"] .aps-drawer__pages { margin-top: 18px; }
[data-world="V5"] .aps-drawer__pages a { font: 700 20px/1.2 var(--v1-display); }
[data-world="V5"] .aps-drawer__ctas { display: grid; gap: 10px; margin-top: 26px; }
html.aps-locked, html.aps-locked body { overflow: hidden; }
@media (max-width: 420px) {
  [data-world="V5"] .aps-drawer__cols { grid-template-columns: 1fr; }
}

/* ---------- footer: the GATE 1 columns (the board footer had three) ---------- */
[data-world="V5"] .aps-footer__grid { grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr; gap: 40px; }
[data-world="V5"] .aps-footer__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
[data-world="V5"] .aps-footer__split a { display: inline-flex; align-items: center; min-height: var(--aps-tap); color: var(--v1-paper); text-decoration: none; font-size: 17px; }
[data-world="V5"] .aps-footer__split a:hover { color: var(--v1-gold); }
[data-world="V5"] .aps-footer__hours { margin: 14px 0 0; display: grid; gap: 4px; color: var(--v1-muted-ink); }
[data-world="V5"] .aps-footer__hours div { display: flex; flex-wrap: wrap; gap: 0 12px; }
[data-world="V5"] .aps-footer__hours dt { min-width: 9.5em; }
[data-world="V5"] .aps-footer__hours dd { margin: 0; color: var(--v1-paper); white-space: nowrap; }
[data-world="V5"] .aps-footer__acts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; }
[data-world="V5"] .aps-footer__acts a { display: inline-flex; align-items: center; min-height: var(--aps-tap); color: var(--v1-link-ink); }
[data-world="V5"] .aps-footer__credit { margin-top: 6px; font-size: 15px; }
@media (max-width: 1199px) {
  [data-world="V5"] .aps-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  [data-world="V5"] .aps-footer__grid .v1-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  [data-world="V5"] .aps-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- home-entity-routing: the R-18 category cards (the exact category string is the small H2, the display line large) ---------- */
[data-world="V5"] .aps-entity-kh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; }
[data-world="V5"] .aps-entity-kh > * { margin: 0; }
[data-world="V5"] .aps-entity-h2 { font: 500 13px/1.4 var(--v1-mono); letter-spacing: .14em; text-transform: uppercase; }
[data-world="V5"] .v1-regen .aps-entity-h2 { color: var(--v1-gold); }
[data-world="V5"] .v1-route .aps-entity-h2 { color: var(--v1-muted-paper); }
[data-world="V5"] .aps-entity-n { font: 500 13px/1.4 var(--v1-mono); letter-spacing: .14em; }
[data-world="V5"] .v1-regen .aps-entity-n { color: var(--v1-gold); }
[data-world="V5"] .v1-route .aps-entity-n { color: var(--v1-muted-paper); }
[data-world="V5"] .aps-entity-display { margin: 0 0 18px; }
[data-world="V5"] .v1-regen .aps-entity-display { margin-bottom: 22px; }
[data-world="V5"] span.v1-chip:hover { transform: none; }
[data-world="V5"] .v1-chips span.v1-chip:hover { background: rgba(255, 255, 255, .55); border-color: var(--v1-line-paper); }
[data-world="V5"] .v1-chips--ink span.v1-chip:hover { background: rgba(245, 241, 232, .06); color: var(--v1-paper); border-color: var(--v1-line-ink); }
[data-world="V5"] .v5-disclaimer p:first-child { margin-top: 0; }

/* ---------- home-stat-band: three verified cells in one row (the compliance list retired the two unverified counters) ---------- */
[data-world="V5"] .v1-odo.aps-odo--n3 { grid-template-rows: auto; }
[data-world="V5"] .v1-odo.aps-odo--n3 .v1-odo__cell--feat { grid-row: auto; }

/* ---------- home-insurance-strip: the Cherry link inside the featured panel ---------- */
[data-world="V5"] .aps-cherry { margin-top: 12px; }


/* ---------- column hooks (the menus, the drawer, the footer's wide column) ---------- */
[data-world="V5"] .aps-drawer__col, [data-world="V5"] .aps-footer__col--wide { display: flex; flex-direction: column; min-width: 0; }
[data-world="V5"] .aps-drawer__nav { display: block; }
/* the category cards' display line on phones: the board's entity size floor (30 px), not the 40 px section H2 phone size */
@media (max-width: 767px) {
  [data-world="V5"] .aps-entity-display { font-size: 30px; }
}

/* ── FXB (GATE 2 fix pass, 2026-10-24) ── */
/* ADJUST 2: an in-paragraph link inside the dark regenerative card reads in the board's on-ink link colour (as on every ink
   band, world.css .v1-band--ink a), underline kept */
[data-world="V5"] .v1-regen a:not(.v1-btn) { color: var(--v1-link-ink); text-decoration: underline; text-underline-offset: 3px; }
/* ADJUST 5: the journal card title is the card's own ink / cream (the mockup sets the title text, not link blue); underline kept */
[data-world="V5"] .pt-post__h a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
/* contact: the "talk it through" line on the paper booking host reads in ink (it inherited the hero's paper colour: 1.00) */
[data-world="V5"] .ct-host .v1-host__note { color: var(--v1-ink); }
/* ADJUST 4: the condition cost panel with two cells (R-24: no insurance cell) is a two-column grid, no empty third cell */
@media (min-width: 768px) {
  [data-world="V5"] .ptc-cost__rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the byline dot stays beside the first line of the byline when the text wraps (it sat alone above it at 390) */
[data-world="V5"] .ptc-byline { flex-wrap: nowrap; align-items: flex-start; }
[data-world="V5"] .ptc-byline__dot { flex: none; margin-top: calc((1.5em - 8px) / 2); }
/* ── /FXB ── */

/* ── PT (TASK PT, 2026-10-24): the Poptin booking form (R-25; CORE30-POPTIN-PLAYBOOK sections 3.1 to 3.5, binding) ── */
/* The container (ui/BookingForm.astro) on every surface: the booking rail (light plasma-gold field) and the /contact-us/ hero
   (dark ink). (1) HEIGHT, load-bearing: container 560, iframe 640 (Poptin scales the whole form to the box). (2) WIDTH,
   load-bearing: Poptin's inline form is a fixed 500 px box, so every desktop column holding it is at least 532 px (500 + 2 x 16
   padding) or the grid stacks. (3) CENTRED by the container query, scale anchored to the top. (4) TINT: the form sits on paper
   (white Poptin inputs vanish on white; on the dark contact hero the paper is the frame, never the dark panel), and the
   inherited-colour guard pins ink (the hero sets paper text). (5) Owner R-25 "no restricting frame": the approved bezel around
   the host goes, on phones the card chrome goes too (border, radius, padding, width cap) and the gutter is given back. */
[data-world="V5"] .aps-poptin { width: 100%; }
[data-world="V5"] .poptin-embedded {
  box-sizing: border-box; position: relative; container-type: inline-size;
  width: 100%; min-height: 560px; margin-inline: 0; padding: 0 16px;
  background: var(--v1-paper); border-radius: 26px; color: var(--v1-ink);
}
/* PT3 (owner 2026-10-24, uneven padding): Poptin centres its 500 px form box itself, top = (content height - 500) / 2, but
   positions it from the padding edge, so a 16 px top padding pushed the form 16 px up (27 px above the first field, 63 px
   below the button, measured headful). With no block padding the box sits at (560 - 500) / 2 = 30 and the gaps even out;
   the inline padding (the 532 px width rule) and min-height 560 (load-bearing) are unchanged. */
/* PT3: the wait. Poptin's display call took 2 to 60 s (one 504) when measured on 2026-10-24, so until the form arrives the box
   shows a static, decorative outline of the fields (no motion, no text; the step list beside it carries the phone line).
   :empty ends it the moment Poptin injects the form. Geometry = the measured form (fields 478 wide, 60 tall, 70 apart, the
   button 75 % wide and 49 tall at the foot of a 470 px stack), scaled like Poptin scales it under 500 px: v px = v / 5 cqw. */
[data-world="V5"] .poptin-embedded:empty::before {
  content: ""; position: absolute; left: 0; right: 0; margin-inline: auto; pointer-events: none;
  top: calc(30px + min(13px, 2.6cqw)); width: min(478px, 95.6cqw); height: min(470px, 94cqw); opacity: .55;
  background:
    linear-gradient(#fff, #fff) 0 0 / calc(50% - min(5px, 1cqw)) min(60px, 12cqw) no-repeat,
    linear-gradient(#fff, #fff) 100% 0 / calc(50% - min(5px, 1cqw)) min(60px, 12cqw) no-repeat,
    linear-gradient(#fff, #fff) 0 min(70px, 14cqw) / 100% min(60px, 12cqw) no-repeat,
    linear-gradient(#fff, #fff) 0 min(140px, 28cqw) / 100% min(60px, 12cqw) no-repeat,
    linear-gradient(#fff, #fff) 0 min(210px, 42cqw) / 100% min(60px, 12cqw) no-repeat,
    linear-gradient(#fff, #fff) 0 min(280px, 56cqw) / 100% min(60px, 12cqw) no-repeat,
    linear-gradient(var(--v1-gold), var(--v1-gold)) 50% 100% / 75% min(49px, 9.8cqw) no-repeat;
}
[data-world="V5"] .poptin-embedded iframe { width: 100% !important; min-height: 640px; background: transparent !important; border: 0; display: block; }
[data-world="V5"] .poptin-embedded > .poptin-popup { transform-origin: top center !important; }
@container (min-width: 500px) {
  [data-world="V5"] .poptin-embedded > .poptin-popup { left: 0 !important; right: 0 !important; margin-inline: auto !important; }
}
/* the approved bezels around the host come off (the form's own paper card is the one frame) */
[data-world="V5"] .v1-book__host-wrap:has(.poptin-embedded),
[data-world="V5"] .ct-book__host-wrap:has(.poptin-embedded) { padding: 0; background: none; border: 0; border-radius: 26px; }
[data-world="V5"] .v1-book__host-wrap:has(.poptin-embedded) .poptin-embedded { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--v1-shadow); }
/* the contact privacy line (contact-us.yaml form.fields_note) under the steps, on the ink hero */
[data-world="V5"] .ct-book__privacy { margin: 22px 0 0; max-width: 46ch; font-size: var(--aps-body); line-height: 1.5; color: var(--v1-muted-ink); }
/* desktop: the form column never drops below 532 px (1440 keeps the approved 6fr / 6fr: 608 px each) */
@media (min-width: 1200px) {
  [data-world="V5"] .v1-book__grid:has(.poptin-embedded) { grid-template-columns: minmax(0, 6fr) minmax(532px, 6fr); }
  [data-world="V5"] .ct-book__grid:has(.poptin-embedded) { grid-template-columns: minmax(0, 6fr) minmax(532px, 6fr); }
}
/* 768 to 1199: the columns would fall under 532 px, so the booking grid stacks and the form is capped at 640 and centred
   (640 - 32 = 608 >= 500: scale 1) */
@media (max-width: 1199px) {
  [data-world="V5"] .v1-book__grid:has(.poptin-embedded), [data-world="V5"] .ct-book__grid:has(.poptin-embedded) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  [data-world="V5"] .v1-book__host-wrap:has(.poptin-embedded) { position: static; }
  [data-world="V5"] .v1-book__host-wrap:has(.poptin-embedded), [data-world="V5"] .ct-book__host-wrap:has(.poptin-embedded) { width: 100%; max-width: 640px; margin-inline: auto; }
}
/* phones: CARDLESS (playbook 3.3). Border, radius, padding, shadow and the width cap come off and the gutter is given back, so
   the form is as large as the phone allows. On the light rail the background goes too (the gold field already shows the white
   inputs); on the dark contact hero the paper tint stays, edge to edge: it is what keeps the fields and the consent line legible. */
@media (max-width: 767px) {
  [data-world="V5"] .v1-book__host-wrap:has(.poptin-embedded), [data-world="V5"] .ct-book__host-wrap:has(.poptin-embedded) { max-width: none; border-radius: 0; box-shadow: none; }
  [data-world="V5"] .poptin-embedded {
    width: calc(100% + 2 * var(--aps-gutter)); max-width: none; margin-inline: calc(-1 * var(--aps-gutter));
    padding: 0; border: 0; border-radius: 0;
  }
  [data-world="V5"] .v1-book__host-wrap:has(.poptin-embedded) .poptin-embedded { background: transparent; box-shadow: none; }
  /* PT3: on the contact hero the paper panel stays, so the width-scaled form (390 / 500 = 0.78 at 390) is centred in it
     (Poptin's own centre origin) instead of top-anchored, which left about 40 px above it and 150 px below (measured
     headful); the light rails stay top-anchored, where the space below reads as section spacing. min-height 560 unchanged. */
  [data-world="V5"] .ct-book__host-wrap .poptin-embedded > .poptin-popup { transform-origin: center center !important; }
  [data-world="V5"] .ct-book__host-wrap .poptin-embedded:empty::before { top: 0; bottom: 0; margin-block: auto; }
}
/* ── /PT ── */

/* ── SB: the sticky mobile Call / Book bar about 15% shorter (owner 2026-10-24: "make the mobile sticky book and call
   buttons in that bar 15% or so more narrow, so it is not as tall"). Board .v1-mobile-bar: 8 px padding + 48 px buttons
   + 1 px rule = 65 px; now 5 + 44 + 5 + 1 = 55 px (15.4% shorter). 44 px stays the minimum tap height; the bottom
   safe-area inset is kept; the footer's page-bottom clearance (board 120 px) drops by the same 10 px. ── */
@media (max-width: 767px) {
  :root { --aps-mobile-bar-h: 54px; }
  [data-world="V5"].v1-mobile-bar { padding: 5px 16px calc(5px + env(safe-area-inset-bottom)); }
  [data-world="V5"].v1-mobile-bar a { min-height: 44px; }
  [data-world="V5"].v1-footer { padding-bottom: 110px; }
}
/* ── /SB ── */