/* ── Design-system component library
   Colors ONLY via tokens. Physical margin/padding/text-align LEFT|RIGHT are banned.
   C2 utilities: replace repetitive inline styles with token-driven classes. ── */

/* ===== Buttons (base .btn lives in base.css) ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-weight:700; text-decoration:none; font-family:inherit; }
.btn-primary{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--gold-ink); }
.btn-ghost{ background:var(--nav-ink-a08, var(--w-d08, rgba(255,255,255,.08))); color:var(--txt); border:1px solid var(--stroke); }
.btn-danger{ background:var(--danger-soft); color:var(--white); }
.btn-sm{ min-height:38px; padding:0 var(--sp-4); font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn-md{ min-height:48px; padding:0 var(--sp-5); font-size:var(--fs-md); border-radius:var(--r-md); }
.btn-lg{ min-height:52px; padding:0 var(--sp-6); font-size:1rem; font-weight:700;
         border-radius:var(--r-md); letter-spacing:-.005em; }

/* ===== Surfaces ===== */
.card{ background:var(--surface); border:1px solid var(--stroke); border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -20px rgba(0,0,0,.9); }
.glass{ background:var(--glass); border:1px solid var(--stroke); border-radius:var(--r-lg);
  /* W3 perf: NO backdrop-filter on the generic card — with 20+ cards per page
     each one is a separate compositor layer that re-rasters every scroll frame.
     The glass look = translucent bg + border + shadow (kept below). */
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -20px rgba(0,0,0,.9);
  position:relative; }
/* MASTER W12 — liquid glass depth: layered edge reflection + slow drift.
   The ::after adds a top-edge light refraction so surfaces feel physical. */

.glass > *{ position:relative; }
/* R12/P1-9 + R15-D12: no card-level drift (moving targets break automated
   clicks), no will-change:contents (anti-pattern, forces a layer). The glow
   sheen below is the only motion — and it's disabled for reduced-motion. */
.glass.glow::after{ content:''; position:absolute; inset:-40% -10%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.05), transparent 70%);
  animation:lg-sheen 9s ease-in-out infinite; }
@keyframes lg-sheen{ 0%,100%{ opacity:.35; transform:translateY(-2%);} 50%{ opacity:.8; transform:translateY(2%);} }
@media (prefers-reduced-motion: reduce){
  .glass.glow{ animation:none !important; }
  .glass::before{ display:none; }
}
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-4); }
.field > label{ margin:0; }
.badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:800; color:var(--gold-text,var(--gold)); background:var(--gold-soft); border:1px solid rgba(245,197,24,.4); }

/* ===== Skeleton loading ===== */
.skeleton{ position:relative; overflow:hidden; border-radius:var(--r-sm); background:var(--nav-ink-a08, var(--w-d08, rgba(255,255,255,.08))); }
.skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--nav-ink-a12, var(--w-d12, rgba(255,255,255,.12))), transparent); animation:sk 1.4s infinite; }
@keyframes sk{ 100%{ transform:translateX(100%); } }

/* ===== Empty state ===== */
.empty-state{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-7) var(--sp-4); text-align:center; color:var(--muted); }
.empty-state svg{ width:48px; height:48px; color:var(--muted-2); }
.empty-state b{ color:var(--txt); font-size:var(--fs-lg); }

/* ===== Locked / paywall panel ===== */
.locked-panel{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:var(--nav-ink-a05, var(--w-d05, rgba(255,255,255,.05))); padding:var(--sp-6); text-align:center; }
.locked-panel::before{ content:''; position:absolute; inset:0; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  background:rgba(13,20,48,.55); }
.locked-panel > *{ position:relative; }

/* ======================================================
   C2 UTILITIES — the ONLY sanctioned replacement for inline styles.
   Logical properties only; colors only via tokens.
   ====================================================== */
.u-flex{ display:flex; } .u-iflex{ display:inline-flex; align-items:center; } .u-col{ display:flex; flex-direction:column; }
.u-center{ align-items:center; justify-content:center; } .u-ac{ align-items:center; }
.u-between{ justify-content:space-between; } .u-jc{ justify-content:center; }
.u-wrap{ flex-wrap:wrap; } .u-gap-1{ gap:var(--sp-1); } .u-gap-2{ gap:var(--sp-2); } .u-gap-3{ gap:var(--sp-3); } .u-gap-4{ gap:var(--sp-4); } .u-gap-5{ gap:var(--sp-5); }
.u-mt-1{ margin-top:var(--sp-1); }
.u-mb-1{ margin-bottom:var(--sp-1); }
.u-mt-2{ margin-top:var(--sp-2); }
.u-mb-2{ margin-bottom:var(--sp-2); }
.u-mt-3{ margin-top:var(--sp-3); }
.u-mb-3{ margin-bottom:var(--sp-3); }
.u-mt-4{ margin-top:var(--sp-4); }
.u-mb-4{ margin-bottom:var(--sp-4); }
.u-mt-5{ margin-top:var(--sp-5); }
.u-mb-5{ margin-bottom:var(--sp-5); }
.u-mt-6{ margin-top:var(--sp-6); }
.u-mb-6{ margin-bottom:var(--sp-6); }
.u-mt-7{ margin-top:var(--sp-7); }
.u-mb-7{ margin-bottom:var(--sp-7); }
.u-mt-8{ margin-top:var(--sp-8); }
.u-mb-8{ margin-bottom:var(--sp-8); }
.u-p-1{ padding:var(--sp-1); }
.u-p-2{ padding:var(--sp-2); }
.u-p-3{ padding:var(--sp-3); }
.u-p-4{ padding:var(--sp-4); }
.u-p-5{ padding:var(--sp-5); }
.u-p-6{ padding:var(--sp-6); }
.u-p-7{ padding:var(--sp-7); }
.u-p-8{ padding:var(--sp-8); }
.u-w-full{ width:100%; } .u-ta-c{ text-align:center; } .u-muted{ color:var(--muted); } .u-gold{ color:var(--gold-text,var(--gold)); }
.u-fs-xs{ font-size:var(--fs-xs); } .u-fs-sm{ font-size:var(--fs-sm); } .u-fs-md{ font-size:var(--fs-md); } .u-fs-lg{ font-size:var(--fs-lg); }
.u-fw7{ font-weight:700; } .u-fw8{ font-weight:800; } .u-lh-loose{ line-height:var(--lh-loose); }
@media (prefers-reduced-motion:reduce){ .skeleton::after{ animation:none; } }

/* Accent button — translucent indigo for secondary purchases (light text on dark) */
.btn-accent{ background:rgba(124,108,240,.22); border:1px solid rgba(124,108,240,.5); color:var(--txt); }

/* C3/C5: visible keyboard focus for every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--r-sm);
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } }

/* C3: small inline text links meet the ~44px touch target */
.link-tap{ display:inline-flex; align-items:center; min-height:44px; }

/* C3: compact chip button — still 40px touch target */
.btn-chip{ min-height:40px; padding:0 var(--sp-4); }

/* C4: real report progress bar (section x of 13) */
.report-progress{ margin-top:var(--sp-4); }
.report-progress--sticky{ position:sticky; top:12px; z-index:10; background:var(--surface-2); border:1px solid var(--gold-dim, rgba(212,175,55,.32)); border-radius:16px; padding:14px 16px; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.report-progress-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.report-progress-title{ font-weight:800; font-size:.9rem; color:var(--txt); }
.report-progress-pct{ font-weight:800; color:var(--gold-text,var(--gold)); font-variant-numeric:tabular-nums; }
.report-progress-sub{ margin:0 0 8px; font-size:.82rem; }
.report-progress-hint{ margin:8px 0 0; font-size:.72rem; line-height:1.7; }
.rp-track{ height:10px; border-radius:var(--r-full); background:var(--nav-ink-a09, var(--w-d09, rgba(255,255,255,.09))); overflow:hidden; }
.rp-fill{ height:100%; border-radius:var(--r-full); background:linear-gradient(135deg,var(--gold),var(--gold-deep)); transition:width 1.2s var(--ease); }
@media (prefers-reduced-motion:reduce){ .rp-fill{ transition:none; } }
/* FIX B: fixed top banner for report progress (always visible) */
.report-fixed-banner{ position:fixed; top:0; left:0; right:0; z-index:100; background:var(--surface); border-bottom:2px solid var(--gold); padding:10px 16px 12px; box-shadow:0 4px 20px rgba(0,0,0,.25); }
.report-fixed-inner{ display:flex; justify-content:space-between; align-items:center; max-width:1100px; margin:0 auto 8px; }
.report-fixed-title{ font-weight:800; font-size:.88rem; }
.report-fixed-pct{ font-weight:800; color:var(--gold-text,var(--gold)); }
.report-fixed-hint{ display:block; text-align:center; font-size:.7rem; color:var(--muted); margin-top:6px; }
.rp-track--fixed{ max-width:1100px; margin:0 auto; }
/* FIX C: explore busy as fixed overlay */
.explore-busy-overlay{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); padding:16px; }
.explore-busy-card{ max-width:520px; width:100%; padding:22px; border:1px solid var(--gold-dim, rgba(212,175,55,.32)); border-radius:18px; text-align:center; }

.sk-line{ height:14px; margin-bottom:var(--sp-2); }

/* C4: onboarding 3-step strip */
.onboard{ margin-top:var(--sp-5); }
.onboard-title{ font-size:var(--fs-lg); margin:0 0 var(--sp-3); }
.onboard-grid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.onb-card{ display:flex; flex-direction:column; gap:6px; padding:var(--sp-4); border:1px solid var(--stroke);
  border-radius:var(--r-md); background:var(--nav-ink-a04, var(--w-d04, rgba(255,255,255,.04))); color:var(--txt); text-decoration:none; min-height:44px;
  transition:border-color .2s var(--ease), transform .15s var(--ease); }
.onb-card:hover{ border-color:var(--gold-text,var(--gold)); transform:translateY(-1px); }
.onb-card span{ color:var(--muted); font-size:var(--fs-sm); line-height:var(--lh-normal); }
.onb-card--primary{ border-color:var(--gold-text,var(--gold)); background:var(--gold-soft,rgba(180,122,6,.14)); }
.onb-card--primary b{ color:var(--gold-text,var(--gold)); }

/* Big Three — two-layer cards: plain-language hook + technical data */
.bt3-intro{ font-size:var(--fs-sm); line-height:var(--lh-normal); margin:2px 0 var(--sp-3); }
.bt3-cards{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
@media (max-width:640px){ .bt3-cards{ grid-template-columns:1fr; } }
.bt3-card{ border:1px solid var(--stroke); border-top:4px solid var(--bt-color,var(--gold));
  border-radius:var(--r-md); padding:var(--sp-4); background:var(--w-d04,rgba(255,255,255,.04)); display:flex; flex-direction:column; gap:var(--sp-3); }
.bt3-card__head{ display:flex; align-items:center; gap:10px; }
.bt3-card__glyph{ font-size:1.5rem; color:var(--bt-color,var(--gold)); line-height:1; }
.bt3-card__title{ display:flex; flex-direction:column; gap:1px; }
.bt3-card__title b{ font-size:var(--fs-lg); }
.bt3-card__role{ font-size:var(--fs-sm); color:var(--muted-3,var(--muted)); font-weight:600; }
.bt3-card__plain{ font-size:var(--fs-md); line-height:1.85; color:var(--txt); margin:2px 0; text-align:start; }
.bt3-card__tech{ display:flex; flex-wrap:wrap; gap:6px; }
.bt3-chip{ font-size:var(--fs-xs); padding:3px 11px; border-radius:999px; background:var(--w-d08,rgba(255,255,255,.08)); color:var(--txt); border:1px solid var(--stroke); }
.bt3-chip--tone{ background:var(--bt-color,var(--gold)); color:var(--white); border-color:transparent; }
/* element color-coding — Fire/Earth/Air/Water each recognizable at a glance */
.bt3-chip--fire{ background:var(--el-fire-soft); color:var(--el-fire); border-color:var(--el-fire-line); }
.bt3-chip--earth{ background:var(--el-earth-soft); color:var(--el-earth); border-color:var(--el-earth-line); }
.bt3-chip--air{ background:var(--el-air-soft); color:var(--el-air); border-color:var(--el-air-line); }
.bt3-chip--water{ background:var(--el-water-soft); color:var(--el-water); border-color:var(--el-water-line); }
.bt3-card__gc{ display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--muted); margin-top:auto; padding-top:4px; }
.bt3-card__gc b{ color:var(--txt); font-weight:700; }
.bt3-noasc{ font-size:var(--fs-sm); line-height:var(--lh-normal); border:1px dashed var(--stroke); border-radius:var(--r-md); padding:var(--sp-3); margin-top:var(--sp-3); }
.bt3-noasc a{ color:var(--gold-text,var(--gold)); font-weight:700; }

/* G2: claim banner */
.claim-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:14px 16px;border:1px solid var(--gold-dim, rgba(212,175,55,.35));border-radius:16px;}
.claim-banner .claim-text b{font-size:.95rem;}
.claim-banner .claim-text p{margin:4px 0 0;font-size:.82rem;line-height:1.7;}
@media (max-width:520px){.claim-banner{flex-direction:column;text-align:center;} .claim-banner .btn{width:100%;min-height:44px;}}

/* G4: onboarding checklist */
.onboard-card{margin:14px 0;padding:16px;}
.onboard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.onboard-x{background:none;border:none;color:var(--muted-2);font-size:1rem;min-width:40px;min-height:40px;cursor:pointer;}
.onboard-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:step;}
.onboard-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.88rem;}
.onboard-list li::before{counter-increment:step;content:counter(step);width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--bg);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0;}
.onboard-list li span{flex:1;text-align:start;}
.btn-sm{min-height:40px;padding:6px 14px;font-size:.82rem;}

/* G8b: breadcrumb links are touch targets too */
.st-5f258b10 a{ display:inline-flex; align-items:center; min-height:40px; }

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL — iOS Human Interface
   Client-side navigation (hx-boost) + View Transitions. The point is that a
   page change should feel like a screen change in a native app: the chrome
   stays put, only the content crossfades, and the user is never shown a
   white flash or a repainted tab bar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── page transition ─────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-base);
  animation-timing-function: cubic-bezier(.32, .72, 0, 1); /* iOS ease */
}
/* Outgoing screen recedes, incoming screen rises — the iOS push feel, but
   subtle enough to survive being seen fifty times a session. */
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }

@keyframes vt-out { to   { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* The chrome must not participate in the transition — that is what separates
   an app from a website. */
.appbar, .bottomnav, .drawer, .nav-progress { view-transition-name: none; }

/* ── navigation progress ─────────────────────────────────────────────────── */
.nav-progress {
  position: fixed; inset-inline: 0; top: 0; height: 2px;
  z-index: 1200; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) ease;
}
.nav-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  box-shadow: 0 0 8px rgba(245, 197, 24, .6);
}
/* htmx toggles .htmx-request on the hx-indicator target for the whole request */
.nav-progress.htmx-request { opacity: 1; }
.nav-progress.htmx-request > i { animation: nav-load 1.4s cubic-bezier(.2,.8,.2,1) forwards; }

/* Deliberately never reaches 100%: the bar is honest about not knowing how
   long the server will take, and completion is the page actually arriving. */
@keyframes nav-load {
  0%   { width: 0; }
  40%  { width: 62%; }
  100% { width: 88%; }
}

/* ── installed (standalone) mode ─────────────────────────────────────────── */
@media (display-mode: standalone) {
  /* No browser URL bar, so the app bar is the top edge and owns the status
     area. Pad it by the notch inset or the title collides with the clock. */
  .appbar { padding-top: env(safe-area-inset-top, 0px); }
  /* Links out to the marketing footer are noise inside an installed app. */
  .footer-grid { display: none; }
}
.is-standalone .appbar { padding-top: env(safe-area-inset-top, 0px); }

/* Install button stays hidden until beforeinstallprompt actually fires —
   offering an install that cannot happen is worse than not offering one. */
#installApp[hidden] { display: none !important; }

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .nav-progress.htmx-request > i { animation: none; width: 88%; }
}

.drawer-install { width: 100%; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.drawer-install svg { width: 18px; height: 18px; }

/* relocation destination picker */
.reloc-city { margin-top: var(--sp-2); }
.reloc-city-row { display: flex; gap: var(--sp-2); align-items: center; }

/* ── chat bubbles ─────────────────────────────────────────────────────────
   The Alpine :class expression for these was swept into utilities.css by the
   st- -> u- rename and sat there as a JavaScript ternary inside a rule body,
   so every declaration was dropped and both speakers rendered identically.
   Real classes, bound from the template. */
.chat-bubble { max-width: 82%; }
.chat-bubble.is-me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  color: var(--gold-ink);
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
}
.chat-bubble.is-them {
  align-self: flex-start;
  background: var(--glass);
  border: 1px solid var(--stroke);
  color: var(--txt);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
}

/* content_cta - closing conversion block on SEO/content pages (F10c) */
.content-cta{ text-align:center; margin:32px auto 8px; padding:26px 20px; max-width:640px; }
.content-cta__icon{ width:30px; height:30px; color:var(--gold); }
.content-cta__title{ margin-top:8px; }
.content-cta__text{ margin:8px auto 0; max-width:44ch; line-height:1.75; }
.content-cta__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
@media (max-width:520px){ .content-cta__actions .btn{ width:100%; } }