/*
 * THE ONBOARDING FLOW (ops D96, D97): Contact (layout A, the card stack) and the Scan (layout B, the panel), on /contact
 * and /scan and inline at the end of the service pages, Houston, About, How We Work, the home close and the Services
 * index. ONE stylesheet for every flow: the form pages link it after their heading; the inline flow loads it when the
 * visitor comes near (src/components/pieces/sheet.ts, class flow-css on <html>). The frame both share (the fields, the
 * progress bar, the first screen) is in globals.css, so the inline first screen is styled before this arrives.
 * Tokens only (tokens.css). Choice cards: a native radio or checkbox inside its label; the choice shows by border AND a
 * check mark, never colour alone. A new screen enters 1.5rem from the side it comes from, with opacity, 220 ms,
 * transform and opacity only; nothing moves under reduced motion. Cards and controls are 48px or more.
 */

/* ---- before the flow hydrates (MotionFlag sets html.js before first paint): its first screen only ---- */
html.js .flow:not(.flow--stub):not([data-enhanced]) .fs:not(:first-of-type),
html.js .flow:not(.flow--stub):not([data-enhanced]) .fl-btn--back,
html.js .flow:not(.flow--stub):not([data-enhanced]) .fl-btn--skip { display: none; }
/* Without JavaScript: every screen in order, one Send; no Next, Back, Skip, progress or trail. Keyed on the flow's own
 * mark (data-enhanced), not only html.js: the home page's layout sets no html.js, and its flow is always enhanced. */
html:not(.js) .flow:not(.flow--stub):not([data-enhanced]) .flow__nav, html:not(.js) .flow:not(.flow--stub):not([data-enhanced]) .flow__top,
html:not(.js) .flow:not([data-enhanced]) .flow__trail { display: none; }
html:not(.js) .flow:not(.flow--stub):not([data-enhanced]) .fs { padding-block: var(--s-5); border-top: 1px solid var(--line); }

/* ---- the screens ---- */
.flow__screens { display: grid; min-height: var(--fl-min, 22rem); align-content: start; }
html:not(.js) .flow:not([data-enhanced]) .flow__screens { min-height: 0; }
.fs__hint { margin: calc(var(--s-3) * -1) 0 var(--s-4); font-size: var(--t-sm); color: var(--ink-soft); }
.fl-areas { display: grid; gap: var(--s-2); } .fl-areas .fl-cards { margin-top: var(--s-2); }
.fl-hint { font-size: var(--t-sm); color: var(--ink-soft); }
.fl-field--wide textarea { min-height: 8.5rem; resize: vertical; }
@media (prefers-reduced-motion: no-preference) {
  .flow[data-enhanced] .fs[data-dir="1"] { animation: fl-in-fwd .22s var(--ease-out) both; }
  .flow[data-enhanced] .fs[data-dir="-1"] { animation: fl-in-back .22s var(--ease-out) both; }
  .flow__bar i { transition: transform .24s var(--ease-out); }
}
@keyframes fl-in-fwd { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes fl-in-back { from { opacity: 0; transform: translateX(-1.5rem); } }

/* ---- choice cards ---- */
.fl-cards { display: grid; grid-template-columns: repeat(var(--fl-cols, 2), minmax(0, 1fr)); gap: var(--s-3); }
.fl-card { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: .75rem 1rem; border: 1px solid var(--line-strong); background: var(--canvas); cursor: pointer; transition: border-color .15s, background-color .15s, transform .16s var(--ease-out); }
.fl-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.fl-card__box { flex: none; position: relative; width: 1.2rem; height: 1.2rem; border: 1.5px solid var(--line-strong); }
.fl-card input[type="radio"] ~ .fl-card__box { border-radius: 50%; }
.fl-card__box::after { content: ""; position: absolute; left: .34rem; top: .12rem; width: .3rem; height: .6rem; border: solid var(--accent-ink); border-width: 0 2px 2px 0; rotate: 45deg; opacity: 0; }
.fl-card__t { font-weight: 500; line-height: 1.3; }
.fl-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--canvas)); }
.fl-card:has(input:checked) .fl-card__box { background: var(--accent); border-color: var(--accent); }
.fl-card:has(input:checked) .fl-card__box::after { opacity: 1; }
.fl-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-card:active { transform: scale(.98); } /* press feedback: in layout A the tap itself moves the flow on */
@media (hover: hover) and (pointer: fine) { .fl-card:hover { border-color: var(--ink-soft); } }
.flow__all:disabled .fl-card { border-style: dashed; cursor: not-allowed; color: var(--ink-soft); }
/* The 17 areas: chips sized to their names (a grid of 17 runs nine rows deep on a phone). */
.fl-cards--chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fl-cards--chips .fl-card { min-height: 48px; padding: .45rem .8rem; gap: .5rem; border-radius: 999px; }
.fl-cards--chips .fl-card__t { font-size: var(--t-sm); }
.fl-cards--chips .fl-card__box { width: 1rem; height: 1rem; }
.fl-cards--chips .fl-card__box::after { left: .27rem; top: .06rem; width: .26rem; height: .52rem; }

/* ---- the controls ---- */
.fl-btn { min-height: 48px; padding: 0 1.2rem; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); font: 600 var(--t-base)/1 var(--font-text); cursor: pointer; }
.fl-btn--skip { border-color: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: .28em; padding-inline: .6rem; }
@media (hover: hover) and (pointer: fine) { .fl-btn--back:hover { border-color: var(--ink); } .fl-btn--skip:hover { color: var(--ink); } }

/* ---- the summary ---- */
.fl-sum { margin: 0; display: grid; border-top: 1px solid var(--line); }
.fl-sum > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.fl-sum dt { font-size: var(--t-sm); color: var(--ink-soft); }
.fl-sum dd { margin: 0; overflow-wrap: anywhere; }
.fl-skipped { color: var(--ink-soft); font-style: italic; }
.fl-edit { min-height: 44px; min-width: 44px; padding: 0 .5rem; background: none; border: 0; color: var(--ink); font: 500 var(--t-sm)/1 var(--font-text); text-decoration: underline; text-underline-offset: .28em; cursor: pointer; }
.fl-sumline { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ink-soft); max-width: 60ch; }
.fl-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); }
.fl-privacy { font-size: var(--t-sm); color: var(--ink-soft); max-width: 44ch; }
.fl-status { margin-top: var(--s-4); font-weight: 500; }
.fl-status:empty { margin-top: 0; }
/* Without JavaScript: the route's 303 lands on one of these; only the one targeted shows. */
.fl-flash { display: none; }
.fl-flash:target { display: block; margin-top: var(--s-4); font-weight: 500; }

/* ---- layout B: the panel; the answers so far as a trail of chips ---- */
.flow--b .fl-cards { --fl-cols: 2; }
.flow__trail { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s-4); }
.flow__trail:empty { display: none; }
.flow__trail span { max-width: 16rem; padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inline: the panel's frame is in globals.css (a closed build never loads this sheet). */

/* ---- layout A: the card stack; each question fills the stage in big type ---- */
.flow--a { --fl-min: 26rem; max-width: 64rem; }
.flow--a .fs__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); letter-spacing: -.025em; margin-bottom: var(--s-5); max-width: 22ch; }
.flow--a .fs__hint { margin-top: calc(var(--s-4) * -1); }
.flow--a .fl-cards { --fl-cols: 3; }
.flow--a .fl-card { min-height: 72px; font-size: var(--t-lg); }
.flow--a .fl-cards--chips .fl-card { min-height: 52px; font-size: var(--t-base); }

/* ---- the home close: held while only the first screen shows; let go once the flow moves on ---- */
html:not(.rm) [data-sc-act="pin"]:has(.flow[data-started]) { height: auto !important; }
[data-sc-act="pin"]:has(.flow[data-started]) [data-sc-stage] { position: static !important; height: auto !important; transform: none !important; }

/* ---- Contact's drawn Houston (ContactMap) ---- */
.fp-art--map { position: relative; }
.cmap { display: block; width: 100%; height: auto; max-height: 70svh; overflow: visible; }
.cmap__bay-in { stop-color: #16232b; stop-opacity: 1; } .cmap__bay-out { stop-color: #16232b; stop-opacity: 0; }
.cmap__bay { fill: url(#cmap-bay); }
.cmap__ring { fill: none; stroke: var(--line); stroke-dasharray: 3 7; }
.cmap__road { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 2 6; }
.cmap__town circle { fill: var(--canvas); stroke: var(--accent); stroke-width: 2.5; }
.cmap__town text { font: 500 16px var(--font-text); fill: var(--ink-soft); }
.cmap__pin { fill: var(--accent); } .cmap__pin-e { fill: var(--canvas); }
@media (prefers-reduced-motion: no-preference) {
  html.js .cmap__town { opacity: 0; translate: 0 6px; animation: cmap-in .5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 45ms + 150ms); }
}
@keyframes cmap-in { to { opacity: 1; translate: 0 0; } }
.fp-art__photo { margin-top: var(--s-4); }

/* ---- the Scan's top graphic (ScanGraphic): three windows, one sweep, a check on each ---- */
.sgr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.sgr__win { position: relative; display: grid; align-content: start; gap: .5rem; min-height: 8.5rem; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.sgr__row { display: block; height: 7px; border-radius: 4px; background: #2a2521; }
.sgr__row--short { width: 60%; }
.sgr__row--you { background: var(--accent); width: 72%; }
.sgr__q { display: flex; align-items: center; gap: .45rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 999px; }
.sgr__q svg { width: 13px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.sgr__q i { display: block; height: 6px; width: 60%; border-radius: 3px; background: #3a332d; }
.sgr__map { position: relative; height: 3.2rem; border-radius: 6px; background: linear-gradient(90deg, #2c2723 2px, transparent 2px) 0 0 / 30px 100%, linear-gradient(#2c2723 2px, transparent 2px) 0 0 / 100% 24px, #16130f; }
.sgr__map b { position: absolute; left: 46%; top: 14%; width: 1.2rem; height: 1.2rem; background: var(--accent); border-radius: 50% 50% 50% 0; rotate: -45deg; }
.sgr__chip { justify-self: start; width: 58%; height: 1.4rem; border: 1.5px solid var(--accent); border-radius: 999px; }
.sgr__tick { position: absolute; right: .7rem; top: .7rem; width: 1.4rem; height: 1.4rem; border: 2px solid var(--accent); border-radius: 50%; }
.sgr__tick::after { content: ""; position: absolute; left: .36rem; top: .16rem; width: .3rem; height: .62rem; border: solid var(--accent); border-width: 0 2px 2px 0; rotate: 45deg; }
.sgr__beam { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .sgr__tick { opacity: 0; scale: .6; animation: sgr-tick .35s var(--ease-out) forwards; animation-delay: calc(.75s + var(--i, 0) * .62s); }
  html.js .sgr__win:nth-child(2) .sgr__tick { --i: 1; } html.js .sgr__win:nth-child(3) .sgr__tick { --i: 2; }
  html.js .sgr__beam { display: block; position: absolute; top: -6px; bottom: -6px; left: 0; width: 3px; background: var(--accent); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--accent) 35%, transparent); opacity: 0; pointer-events: none; animation: sgr-sweep 2.2s cubic-bezier(.45, 0, .2, 1) .4s both; }
}
@keyframes sgr-tick { to { opacity: 1; scale: 1; } }
@keyframes sgr-sweep { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; translate: calc(var(--sgr-w, 100cqw) - 3px) 0; } }
.sgr { container-type: inline-size; --sgr-w: 100cqw; }

/* ---- phones ---- */
@media (max-width: 860px) {
  .flow--a { --fl-min: 22rem; }
  .flow--a .fs__title { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.4rem); }
  .flow--a .fl-cards, .flow--b .fl-cards { --fl-cols: 1; }
  .flow--a .fl-card { min-height: 60px; font-size: var(--t-base); }
  .fl-cards--chips { gap: .4rem; } .fl-cards--chips .fl-card { padding: .45rem .7rem; gap: .45rem; }
  .fl-sum > div { grid-template-columns: minmax(0, 1fr) auto; } .fl-sum dt { grid-column: 1 / -1; }
  .cmap { max-width: 22rem; margin-inline: auto; }
  .cmap__town text { display: none; } /* too small on a phone; the area cards in the flow carry the names */
  .sgr { grid-template-columns: minmax(0, 1fr); } .sgr__win { min-height: 0; }
  html.js .sgr__beam { display: none; }
}