/* domains/cash-offer-capture-rycolston-com/page.css
 * Page styles for the cash-offer walk. Tokens + reset come from tokens.css,
 * synced from data-platforms/design-system at deploy time. Only --p-*/--s-*
 * variables here — no hard-coded brand colors.
 *
 * Constitution (DESIGN_SYSTEM.md): olive is the only CTA color; Fraunces +
 * DM Sans only; shadows are warm beige; every interactive control is a pill;
 * accents are personality, never status; NO DARK MODE (ADR-0006) — the cream
 * surface is the brand, so this file ships no prefers-color-scheme block.
 *
 * Phone-first per docs/iphone-web-app-conventions.md: svh with a vh fallback,
 * safe-area insets on the fixed chrome, 16px controls under pointer:coarse so
 * iOS never zooms on focus, 44px tap targets.
 */

html, body { height: 100%; overscroll-behavior: none; }

/* `display: flex` on a class BEATS the hidden attribute's UA `display: none`, so
   `el.hidden = true` silently did nothing to .app or .nav. Verified live on
   2026-09-19: the bottom nav sat on the record card, and the fatal-error gate
   would have rendered with the whole app shell behind it. This one line is the
   fix for every hidden toggle on the page. */
[hidden] { display: none !important; }

.app { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

button, a, [role="button"], .tappable {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
button:active { opacity: .75; }
.bar, .nav, .pill, .btn, .tile, .later, .link, .col-t { -webkit-user-select: none; user-select: none; }

/* iOS zooms any focused control whose RENDERED size is under 16px.
   The element selectors alone lose to `.ctl`, which sets 15px — specificity
   beats a media query, so this rule silently did nothing to the renovation
   notes box and it zoomed the page on focus (measured live 2026-09-19: 15px).
   `input.ctl` is (0,1,1) and wins against `.ctl` (0,1,0) at any source order. */
@media (pointer: coarse) {
  input, select, textarea,
  input.ctl, select.ctl, textarea.ctl { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- gate state */
.gate { max-width: 34rem; margin: 0 auto; padding: 22vh 20px 0; text-align: center; }
.eyebrow {
  font-size: var(--p-text-12); font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-ls-wider); text-transform: uppercase;
  color: var(--s-text-muted); margin: 0 0 10px;
}

/* ------------------------------------------------------------------- header */
.bar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: var(--s-surface-raised);
  border-bottom: 1px solid var(--s-border-muted);
  box-shadow: var(--s-shadow-sm);
}
.bar-in {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 44rem; margin: 0 auto; padding: 12px 16px 0;
}
.bar-left { flex: 1 1 auto; min-width: 0; }
.stop-n {
  margin: 0; font-size: var(--p-text-11); font-weight: var(--p-weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-text-muted);
}
.stop-t {
  margin: 2px 0 0; font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: var(--p-text-22); line-height: var(--p-lh-heading); letter-spacing: var(--p-ls-snug);
}
.stop-w {
  max-width: 44rem; margin: 2px auto 0; padding: 0 16px 10px;
  font-size: var(--p-text-13); color: var(--s-text-muted);
}
.record-link {
  flex: 0 0 auto; min-height: 44px; padding: 10px 16px;
  border-radius: var(--s-radius-control); border: 1.5px solid var(--s-border-strong);
  background: transparent; font-size: var(--p-text-14); font-weight: var(--p-weight-semibold);
  color: var(--s-text-secondary);
}
.rail { display: flex; gap: 4px; max-width: 44rem; margin: 0 auto; padding: 0 16px 10px; }
.tick { flex: 1 1 0; height: 3px; border-radius: 2px; background: var(--s-border-muted); }
.tick.on { background: var(--p-olive-700); }

/* --------------------------------------------------------------------- page */
.page { flex: 1 1 auto; max-width: 44rem; width: 100%; margin: 0 auto; padding: 20px 16px 40px; }
.h1 {
  font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: clamp(24px, 6vw, var(--p-text-30)); line-height: var(--p-lh-heading);
  letter-spacing: var(--p-ls-snug); margin: 0 0 6px;
}
.h2 {
  font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: var(--p-text-22); line-height: var(--p-lh-heading); margin: 28px 0 8px;
}
.sub { color: var(--s-text-muted); font-size: var(--p-text-15); margin: 0 0 4px; }
.foot { text-align: center; font-size: var(--p-text-13); color: var(--s-text-muted); margin-top: 16px; }

/* ---------------------------------------------------------------- questions */
.q { margin-top: 26px; }
.q-h { display: flex; align-items: baseline; gap: 12px; }
.q-t {
  flex: 1 1 auto; margin: 0 0 8px; font-size: var(--p-text-18);
  font-weight: var(--p-weight-semibold); line-height: 1.3; color: var(--s-text-primary);
}
.q-hint { font-size: var(--p-text-13); color: var(--s-text-muted); margin: 0 0 10px; font-style: italic; }
.q-n { font-size: var(--p-text-13); color: var(--s-text-muted); margin: 0 0 10px; }
.later {
  flex: 0 0 auto; min-height: 44px; padding: 10px 14px; background: transparent;
  border: 1.5px dashed var(--s-border-strong); border-radius: var(--s-radius-control);
  font-size: var(--p-text-13); font-weight: var(--p-weight-semibold); color: var(--s-text-muted);
}

/* ------------------------------------------------------- pills (rule 4: all
   interactive controls are pills; 44px target, one column on a phone) */
.pills { display: flex; flex-direction: column; gap: 10px; }
.pills.wrap { flex-direction: row; flex-wrap: wrap; }
.pill {
  min-height: 44px; padding: 12px 18px; text-align: left;
  background: var(--s-surface-raised); border: 1.5px solid var(--s-border-strong);
  border-radius: var(--s-radius-control); font-family: inherit;
  font-size: var(--p-text-15); font-weight: var(--p-weight-medium); color: var(--s-text-primary);
  transition: border-color var(--s-motion-hover), background var(--s-motion-hover);
}
.pills.wrap .pill { flex: 0 1 auto; }
.pill:hover { border-color: var(--p-olive-500); }
.pill.on {
  background: var(--p-olive-700); color: var(--s-text-inverse); border-color: var(--p-olive-700);
}
.pill.round { min-width: 52px; text-align: center; font-size: var(--p-text-20); }
.ghostchip {
  margin-top: 22px; min-height: 44px; padding: 12px 18px; background: transparent;
  border: 1.5px dashed var(--s-border-strong); border-radius: var(--s-radius-control);
  font-family: inherit; font-size: var(--p-text-15); font-weight: var(--p-weight-medium);
  color: var(--s-text-muted);
}
.toggle {
  min-height: 44px; min-width: 96px; padding: 12px 22px; background: var(--s-surface-raised);
  border: 1.5px solid var(--s-border-strong); border-radius: var(--s-radius-control);
  font-family: inherit; font-size: var(--p-text-15); font-weight: var(--p-weight-semibold);
}
.toggle.on { background: var(--p-olive-700); color: var(--s-text-inverse); border-color: var(--p-olive-700); }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper-v { font-size: var(--p-text-22); font-weight: var(--p-weight-semibold); min-width: 2ch; text-align: center; }

/* ----------------------------------------------------------------- controls */
.ctl {
  width: 100%; background: var(--s-surface-raised); border: 1.5px solid var(--s-border-strong);
  border-radius: 14px; padding: 12px 14px; font-family: inherit; font-size: var(--p-text-15);
  color: var(--s-text-primary); min-height: 44px;
}
.ctl:focus { outline: none; border-color: var(--p-olive-700); box-shadow: 0 0 0 3px rgba(63,74,40,.12); }
textarea.ctl { min-height: 88px; resize: vertical; line-height: 1.5; margin-top: 10px; }
textarea.ctl.dump { min-height: 220px; font-size: var(--p-text-13); }
.editor { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.money { position: relative; }
.money .dollar {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--s-text-muted); font-weight: var(--p-weight-semibold);
}
.money .ctl { padding-left: 28px; font-size: var(--p-text-20); }

/* ------------------------------------------------------------- record card */
.card {
  margin: 18px 0 0; background: var(--s-surface-raised);
  border: 1px solid var(--s-border-muted); border-radius: var(--s-radius-panel);
  box-shadow: var(--s-shadow-sm); padding: 4px 16px;
}
.rrow { padding: 12px 0; border-bottom: 1px solid var(--s-border-muted); }
.rrow:last-child { border-bottom: none; }
.rrow-h { display: flex; align-items: center; gap: 10px; }
.rrow-l {
  flex: 0 0 42%; font-size: var(--p-text-11); font-weight: var(--p-weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-text-muted);
}
.rrow-v {
  flex: 1 1 auto; font-size: var(--p-text-16); font-weight: var(--p-weight-medium);
  color: var(--s-text-primary); overflow-wrap: anywhere;
}
.rrow-e {
  flex: 0 0 auto; min-height: 44px; padding: 10px 14px; background: transparent;
  border: 1.5px solid var(--s-border-strong); border-radius: var(--s-radius-control);
  font-size: var(--p-text-13); font-weight: var(--p-weight-semibold); color: var(--s-text-secondary);
}
.rrow-n { margin: 6px 0 0; font-size: var(--p-text-12); color: var(--s-text-muted); font-style: italic; }
.chipline { margin: 8px 0; font-size: var(--p-text-16); font-weight: var(--p-weight-medium); }

/* ------------------------------------------------------------- room grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.tile {
  min-height: 88px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 16px; text-align: left; background: var(--s-surface-raised);
  border: 1.5px solid var(--s-border-strong); border-radius: var(--s-radius-panel);
  font-family: inherit; font-size: var(--p-text-16); font-weight: var(--p-weight-semibold);
  color: var(--s-text-primary);
}
.tile.done { background: var(--p-olive-700); color: var(--s-text-inverse); border-color: var(--p-olive-700); }
.tile-s { font-size: var(--p-text-12); font-weight: var(--p-weight-medium); opacity: .75; }
.panel {
  margin-top: 18px; padding: 18px 16px; background: var(--s-surface-raised);
  border: 1px solid var(--s-border-muted); border-radius: var(--s-radius-panel);
  box-shadow: var(--s-shadow-sm);
}
.panel .pills { margin-bottom: 4px; }
.tray {
  margin-bottom: 8px; padding: 2px 16px 16px; background: var(--s-surface-raised);
  border: 1px solid var(--s-border-muted); border-radius: var(--s-radius-panel);
}

/* --------------------------------------------------------------- stop 6 */
.warn {
  margin: 18px 0; padding: 16px 18px; border-radius: var(--s-radius-panel);
  background: var(--s-surface-raised); border: 1.5px solid var(--s-border-strong);
}
.warn-t { margin: 0 0 8px; font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); }
.warn-n { margin: 8px 0 0; font-size: var(--p-text-13); color: var(--s-text-muted); }
.misses { margin: 0; padding-left: 18px; }
.misses li { margin: 6px 0; }
/* 44px, not 32: this is the recovery path for a question Ry missed, tapped at a
   kitchen table with a seller waiting. The AA floor is 24px; the AAA target is
   44px, and the one control you use when something went wrong gets the AAA one. */
.link {
  background: none; border: none; padding: 10px 0; min-height: 44px; font-family: inherit;
  font-size: var(--p-text-15); font-weight: var(--p-weight-medium);
  color: var(--p-olive-700); text-decoration: underline; text-underline-offset: 3px;
}

.sheet { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.col {
  padding: 14px 16px; background: var(--s-surface-raised);
  border: 1px solid var(--s-border-muted); border-radius: var(--s-radius-panel);
  box-shadow: var(--s-shadow-sm);
}
.col-t {
  margin: 0 0 10px; font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: var(--p-text-18);
}
.sl { padding: 8px 0; border-bottom: 1px solid var(--s-border-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sl:last-child { border-bottom: none; }
.sl-l {
  flex: 0 0 44%; font-size: var(--p-text-11); font-weight: var(--p-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-text-muted);
}
.sl-v {
  flex: 1 1 40%; font-size: var(--p-text-15); font-weight: var(--p-weight-medium);
  color: var(--s-text-primary); overflow-wrap: anywhere;
}
.sl.gap .sl-v { color: var(--s-text-muted); font-style: italic; font-weight: var(--p-weight-regular); }
.sl-n { flex: 1 1 100%; margin: 2px 0 0; font-size: var(--p-text-12); color: var(--s-text-muted); }
/* A hairline outline, not a color-coded status: brick and yellow are
   personality in this system, never semantics (ADR-0005). */
.flagchip {
  flex: 0 0 auto; align-self: center; padding: 3px 8px; border-radius: var(--s-radius-control);
  border: 1px solid var(--s-border-strong); font-size: var(--p-text-11);
  font-weight: var(--p-weight-semibold); letter-spacing: 0.06em; color: var(--s-text-secondary);
}

.done { text-align: center; margin-top: 36px; }
.done-mark {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--s-feedback-success); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}

/* --------------------------------------------------------------- bottom nav
   Buttons only. No text input ever lives here — the iOS keyboard covers a
   fixed bottom bar and env(safe-area-inset-bottom) does not track it. */
.nav {
  position: sticky; bottom: 0; z-index: 20; display: flex; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--s-surface-raised); border-top: 1px solid var(--s-border-muted);
}
.btn {
  flex: 1 1 auto; min-height: 52px; padding: 15px 22px; border: none;
  border-radius: var(--s-radius-control); background: var(--s-action-primary-bg);
  color: var(--s-action-primary-fg); font-family: inherit; font-size: var(--p-text-16);
  font-weight: var(--p-weight-semibold); box-shadow: var(--s-shadow-md);
}
.btn:hover { background: var(--s-action-primary-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; }
.btn.ghost {
  background: transparent; color: var(--s-text-secondary);
  border: 1.5px solid var(--s-border-strong); box-shadow: none;
}
.btn.small { flex: 0 0 auto; min-height: 44px; padding: 11px 18px; font-size: var(--p-text-14); }
.btn.wide { width: 100%; }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }

/* ------------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 16px; right: 16px; z-index: 40;
  bottom: calc(84px + env(safe-area-inset-bottom));
  padding: 13px 18px; border-radius: var(--s-radius-panel);
  background: var(--s-text-primary); color: var(--s-text-inverse);
  font-size: var(--p-text-14); font-weight: var(--p-weight-medium);
  box-shadow: var(--s-shadow-md); text-align: center;
}

/* Wider than a phone: the vendor sheet earns three columns. Nothing else
   changes — this page is a phone surface first. */
@media (min-width: 720px) {
  .sheet { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  /* The bar stays FULL WIDTH and the buttons centre inside it. `max-width` +
     `margin: 0 auto` on the bar itself shrank the whole sticky element to its
     content, so at 1280 with Back hidden the lone Next button floated in the
     middle of the page with no bar behind it (seen 2026-09-19). Constrain the
     contents, never the bar. */
  .nav { justify-content: center; }
  .nav .btn { flex: 0 1 20rem; }
}