/* NavIQ mobile / iOS shell. Pair with elara_maps_shell.js
   Bible: 4px grid, --sp-tap, radius 0, --tr-wide.
   --phi unique positive root of x^2=x+1 (Z3: proofs/naviq_phi.smt2). */
html {
  --phi: 1.6180339887;
  --phi-inv: 0.6180339887;
  --phi-track: 1.618fr;
  --phi-wing: calc(var(--sp-tap) * var(--phi));
  --glow-cyan: color-mix(in srgb, var(--cyan) 55%, transparent);
  --glow-gold: color-mix(in srgb, var(--gold2) 62%, transparent);
}
html, body {
  width: 100%; min-width: 0; max-width: none; margin: 0;
  min-height: -webkit-fill-available;
  height: 100dvh; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh);
}
html { overflow-x: clip; }
body { overflow-x: clip; overflow-y: hidden; }
@media (max-width: 640px) {
  .panel {
    height: 100dvh;
    height: var(--vvh, 100dvh);
    max-height: var(--vvh, 100dvh);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  }
  .navbtn, .mset > summary, #onNext1, #onGo4, #onNext2, button.wzCta, .btn, .chip {
    min-height: var(--sp-tap);
  }
  #onboardCard {
    max-height: var(--vvh, 92dvh);
  }
}

/* App-wide: even tap bars, golden photos, keep cyan/gold glow. */
.navbtn, .btn:not(.gold), .poiActs .btn, .mic {
  min-height: var(--sp-tap);
  height: var(--sp-tap);
  box-sizing: border-box;
}
.btn.gold {
  min-height: var(--sp-tap);
  box-shadow: 0 0 var(--sp3) var(--glow-gold);
}
.chip {
  height: var(--sp-tap);
  min-height: var(--sp-tap);
  box-sizing: border-box;
}
.chips {
  gap: var(--sp1);
  margin-bottom: var(--sp1half);
}
.destImg img {
  aspect-ratio: var(--phi) !important;
  max-height: none;
}
.optgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.poiActs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp1);
}
.poiActs .btn { min-height: var(--sp-tap); }
.ropt {
  box-shadow: 0 0 var(--sp2) var(--glow-cyan);
}
.ropt.on {
  box-shadow: 0 0 var(--sp3) var(--glow-gold), 0 0 0 1px var(--glow-gold) inset;
}

#onboardCard {
  /* Same light paper as the panel — not a navy second app. Glow defines the card; no border chrome. */
  --panel: var(--paper);
  --navy: var(--paper);
  --navy2: var(--paper-mist);
  --ink: var(--ink-on-paper);
  --mut: var(--ink-mute);
  --faint: var(--faint-on-paper);
  --line: var(--line-on-paper);
  --line2: var(--line-on-paper);
  --cyan: var(--teal);
  /* teal2 measures 3.52:1 on paper-mist — under AA at wizard type sizes, which is
     why the light :root already refuses it. The card must not re-open that hole. */
  --cyan-soft: var(--teal);
  --gold2: var(--gold-on-light);
  /* Brand IQ: inherit page :root tokens — ZERO local colour literals. */
  --brand-gold: var(--gold2);
  /* Same cyan strength as the live panel halo (not a faint 28% wash). */
  --glow-cyan: color-mix(in srgb, var(--cyan) 55%, transparent);
  --glow-gold: color-mix(in srgb, var(--gold2) 45%, transparent);
  position: relative;
  box-sizing: border-box;
  width: min(26rem, calc(100% - var(--sp3) * 2));
  max-width: 26rem;
  margin: 0 auto;
  border-radius: 0;
  text-align: left;
  background: var(--paper);
  border: 0;
  color: var(--ink-on-paper);
  font-family: var(--ff-product);
  /* Match .panel light cyan halo — glow frames the paper; no stroke border. */
  box-shadow:
    0 18px 50px -22px color-mix(in srgb, var(--ink-on-paper) 28%, transparent),
    0 0 30px -10px var(--glow-cyan),
    0 0 0 1.5px color-mix(in srgb, var(--cyan) 20%, transparent) inset;
  animation: ecPanelHalo 5s ease-in-out infinite;
  --wz-pad-y: 13px;
  --wz-pad-x: 21px;
  padding: var(--wz-pad-y) var(--wz-pad-x);
}
@media (prefers-reduced-motion: reduce) {
  #onboardCard { animation: none; }
}
#onboardCard,
#onboardCard * {
  box-sizing: border-box;
}
#onboardCard h2,
#onboardCard p,
#onboardCard .wzH,
#onboardCard .wzP,
#onboardCard .placeBrief,
#onboardCard .prefStrip,
#onboardCard .prefMini {
  text-align: left;
}
#onboardCard .wzOrigin {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#onboardCard .wzDestChip {
  display: inline;
  max-width: 100%;
}
/* Wizard owns the journey — dim the planner so it cannot compete. */
body.onboarding .panel {
  opacity: 0.22;
  pointer-events: none;
  filter: saturate(0.55);
}
body.onboarding .leaflet-control-container,
body.onboarding .wxBtn,
body.onboarding .svBtn,
body.onboarding .mapfx {
  pointer-events: none;
  opacity: 0.35;
}
#onboardCard .wzH {
  font: var(--w-heavy) var(--fs-2xl) / var(--lh-tight) var(--ff-product);
  margin: 0 0 var(--sp-half);
  color: var(--ink);
}
#onboardCard .wzP {
  font: var(--w-regular) var(--fs-sm) / var(--lh-body) var(--ff-product);
  color: var(--mut);
  margin: 0 0 var(--sp2);
}
/* Route chips on paper — hairline only, no cyan cage. */
#onboardCard .ropt {
  background: var(--paper-mist) !important;
  border: 0 !important;
  color: var(--ink-on-paper) !important;
  box-shadow: none;
}
#onboardCard .ropt .ropt-h { color: var(--cyan) !important; }
#onboardCard .ropt .ropt-eta { color: var(--ink-on-paper) !important; }
#onboardCard .ropt .ropt-eta small, #onboardCard .ropt .ropt-note { color: var(--ink-mute) !important; white-space: normal; }
#onboardCard .ropt .ropt-km { color: var(--gold-on-light) !important; } #onboardCard .ropt .ropt-note.issue { color: var(--warn) !important; }
#onboardCard .ropt.on {
  background: color-mix(in srgb, var(--gold-on-light) 12%, var(--paper)) !important;
  border: 0 !important;
  box-shadow: none;
}
#onboardCard .ropt.on .ropt-h { color: var(--gold-on-light) !important; }
#onboardCard .wzSaved,
#onboardCard .wzSaved b,
#onboardCard .wzSaved span {
  color: var(--ink-on-paper) !important;
}
#onboardCard .wzSaved {
  border: 0;
  background: var(--paper-mist);
  box-shadow: none;
}

/* One left rail: brand · step · title · field TEXT share x=card-pad (no extra field inset). */
.wzChrome{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp1);margin:0 0 var(--sp1half);padding:0;text-align:left}
.wzBrand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-half);margin:0;padding:0;border:0;background:none;width:100%}
.wzBrand .wzCorp,.wzBrand .brandCorp,
.wzChrome .wzStep,.wzStep{
  display:block;margin:0;padding:0;padding-inline-end:calc(var(--sp-tap)*var(--phi));
  font:var(--w-heavy) var(--fs-2xs)/1 var(--ff-product);
  letter-spacing:var(--tr-wide);text-transform:uppercase;text-align:left;text-indent:0;flex:none
}
/* ELARA head: --brand-gold, which is the BRIGHT mark on dark chrome (:root) and the
   remapped --gold2 inside #onboardCard, because bright gold measures 1.88:1 on white
   paper. The comment that stood here claimed "not remapped gold-on-light", which was
   the opposite of what the card does. */
.wzBrand .wzCorp,.wzBrand .brandCorp{color:var(--brand-gold)!important;padding-inline-end:0}
.wzChrome .wzStep,.wzStep{color:var(--cyan)}
/* The IQ sweep is pinned to the DARK masthead palette, where it measures 13.0:1 and
   9.8:1 on --chrome-deep. The same pair on a light surface measures 1.42:1 and 1.88:1
   — the "-CORTEX" tail and the "IQ" of NavIQ were all but invisible on the wizard's
   white paper and on the ApproachIQ drive chip, while the "ELARA" head beside them sat
   at 5.36:1. That is the lockup "looking different" in two halves of one word.
   Light surfaces therefore take the legible end of the same cyan→gold ramp; both stops
   measure 5.36:1. Receipt artifacts/token-discipline-2026-09-06/contrast_receipt.json */
#onboardCard,
#aqDriveChip {
  --iq-from: var(--cyan);
  --iq-to: var(--gold2);
}
/* -CORTEX + IQ: cyan→gold via --iq-*. Immune to the light-theme teal remap at :root
   (that is the point of the primitives) but DELIBERATELY re-pointed by the
   #onboardCard / #aqDriveChip rule above — those two grounds are white. */
.wzBrand .brandTail,.brandCorp .brandTail{
  letter-spacing:var(--tr-wide);
  background:linear-gradient(90deg,var(--iq-from),var(--iq-to));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
/* Product = masthead twin: ink Nav flush-left, gradient IQ, ONE tight wordmark.
   The canonical lockup (C:/elara-route/deploy_public_html/index.html `.brand b` at :43
   and `.lbwordmark` at :386) puts tracking on the CONTAINER and none on the gradient
   span. This rule had it the other way round: --tr-wide on the inner IQ span opened a
   gap between the I and the Q and left a trailing space after the Q, so "NavIQ" read as
   "Nav I Q" — founder 2026-09-06. Tracking now lives on the container only: 0 here so
   the N stays flush with the rail, --tr-wide on the masthead, which is centred.
   receipt artifacts/token-discipline-2026-09-06/proof_receipt.json */
/* CANONICAL PRODUCT WORDMARK — the ONE owner of how "NavIQ" renders, every locus. A locus
   overrides INK COLOUR and SIZE only. Rule: docs/BRANDING.md (founder 2026-09-06) ·
   Guard: tests/test_brand_wordmark_consistency.py */
.brandProd{font-family:var(--ff-product);font-weight:var(--w-heavy);line-height:1;letter-spacing:0;text-transform:none}
.brandProd span{letter-spacing:inherit;background:linear-gradient(90deg,var(--iq-from),var(--iq-to));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.wzBrand .wzProd,.wzBrand .brandProd{
  display:block;margin:0;padding:0;width:auto;max-width:100%;
  font:var(--w-heavy) var(--fs-xl)/1 var(--ff-product);
  letter-spacing:0;text-align:left;text-indent:0;color:var(--ink);
  /* Clear the absolutely-positioned .wzSkip (top:0;right:0). The reserve used to sit on
     .wzCorp — now deleted — and on .wzStep, which is the SECOND row; .wzProd is the row
     the Skip button actually shares, and it reserved nothing. */
  padding-inline-end:calc(var(--sp-tap)*var(--phi))
}
.wzBrand .wzProd span,.wzBrand .brandProd span{
  letter-spacing:inherit;
  background:linear-gradient(90deg,var(--iq-from),var(--iq-to))!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important
}
.brandCorp{font-weight:800;letter-spacing:var(--tr-wide)}
.nsbWm .brandCorp,.idemWm .brandCorp,.cpfWm .brandCorp,.nqWm .brandCorp,.arrSign .brandCorp{display:inline}
.wzHead,.wzFoot{display:flex;align-items:center;justify-content:flex-start;gap:var(--sp1);min-height:var(--sp-tap)}
.wzHead{margin:0 0 var(--sp1half)}.wzFoot{margin-top:var(--sp1half);width:100%}
/* Title + lede + brand: only card padding insets the rail. */
#onboardCard .wzChrome,
#onboardCard .wzBrand,
#onboardCard .wzBrand > *,
#onboardCard .wzStep,
#onboardCard .wzH,
#onboardCard .wzP,
#onboardCard .wzRow,
#onboardCard .wzField,
#onboardCard .wzSec,
#onboardCard .wzFoot{
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;text-align:left!important;text-indent:0!important
}
#onboardCard .wzCta{
  margin-left:0!important;margin-right:0!important;
  padding-left:var(--sp2)!important;padding-right:var(--sp2)!important;
  text-align:center!important;text-indent:0!important
}
#onboardCard .wzH{font:var(--w-heavy) var(--fs-2xl)/var(--lh-tight) var(--ff-product);margin:0 0 var(--sp-half)!important;color:var(--ink)}
#onboardCard .wzP{font:var(--w-regular) var(--fs-sm)/var(--lh-snug) var(--ff-product);margin:0 0 var(--sp1half)!important;color:var(--mut)}
.wzChrome .wzSkip,.wzSkip{position:absolute;top:0;right:0;margin:0;border:0;background:none;font:var(--w-medium) var(--fs-xs)/1 var(--ff-product);color:var(--faint);cursor:pointer;min-height:var(--sp-tap);min-width:calc(var(--sp-tap)*var(--phi));padding:0 var(--sp-half);opacity:.85;transition:opacity var(--dur-fast,120ms) ease,color var(--dur-fast,120ms) ease}
/* Hover deepens to --cyan: 5.36:1 on --paper, 5.12:1 on --paper-mist; the audited row
   uses --paper, which is the ground .wzSkip actually sits on. --cyan-soft was teal2 in the
   card and measures 3.52:1 at 12px — under AA, which is why the light :root already
   refuses it for body copy. */
.wzSkip:hover{opacity:1;color:var(--cyan)}
.wzQuiet{display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--sp-half);font:var(--w-medium) var(--fs-2xs)/var(--lh-tight) var(--ff-product);color:var(--faint);cursor:pointer;min-height:var(--sp-tap)}

/* Controls: mist fill only — no border cages; card glow does the framing. */
.wzRow {
  display: grid;
  grid-template-columns: 1fr calc(var(--sp-tap) * var(--phi));
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  height: var(--sp-tap);
  min-height: var(--sp-tap);
  margin: 0 0 var(--sp1);
  border: 0;
  background: var(--paper-mist);
}
.wzOrigin {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 var(--sp1half) 0 0; /* left=0 so origin text shares the brand/title rail */
  font: var(--w-semi) var(--fs-xs) / var(--lh-snug) var(--ff-product);
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
/* Twin swishing bars while GPS / origin is still locking (founder 2026-09-06). */
.wzRow {
  position: relative;
}
.wzRow .wzSeek {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.wzRow .wzSeek i {
  position: absolute;
  left: -45%;
  height: 3px;
  width: 42%;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cyan) 15%, transparent) 18%,
    var(--cyan) 50%,
    color-mix(in srgb, var(--gold2) 80%, var(--cyan)) 72%,
    transparent 100%
  );
  /* Glow follows the bar's own --cyan stop, so the halo cannot drift off-brand. */
  box-shadow: 0 0 10px var(--glow-cyan);
  animation: wzSeekFwd 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.wzRow .wzSeek i:nth-child(2) {
  top: auto;
  bottom: 0;
  animation-name: wzSeekBack;
  animation-delay: 0.12s;
}
.wzRow.wzSeeking .wzSeek { display: block; }
.wzRow:not(.wzSeeking) .wzSeek { display: none; }
@keyframes wzSeekFwd {
  from { transform: translateX(0); }
  to { transform: translateX(280%); }
}
@keyframes wzSeekBack {
  from { transform: translateX(280%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wzRow .wzSeek i { animation: none; opacity: 0.55; left: 28%; width: 44%; }
}
/* Map feel dropdown — same brown-gold + cyan back-glow as Scenic / .btn (not OS grey). */
.prefMini.prefSmooth > select,
.prefSmooth select,
#wizGpsRate,
#gpsRate,
#onboardCard select#wizGpsRate {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper) !important;
  color: var(--gold-on-light) !important;
  border: 1px solid var(--cyan) !important;
  font: var(--w-bold) var(--fs-xs) / var(--lh-tight) var(--ff-product);
  padding: 0 28px 0 12px;
  min-height: var(--sp-tap);
  /* Same cyan family as the border it wraps — one token, two uses. */
  box-shadow:
    0 0 20px 0 color-mix(in srgb, var(--cyan) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent) inset !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-on-light) 50%),
    linear-gradient(135deg, var(--gold-on-light) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
.prefMini.prefSmooth > select:focus,
.prefSmooth select:focus,
#wizGpsRate:focus,
#gpsRate:focus {
  outline: none;
  border-color: var(--gold-on-light) !important;
  box-shadow:
    0 0 26px 0 color-mix(in srgb, var(--cyan) 62%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyan) 32%, transparent) inset !important;
}
.prefMini.prefSmooth > select option,
#wizGpsRate option,
#gpsRate option {
  background: var(--paper);
  color: var(--ink-on-paper);
}
.wzShare,
.wzField,
.wzGhost,
#onboardCard .wzCta,
#onboardCard .wzBack,
#onShareDest,
#onDest {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--sp-tap);
  height: var(--sp-tap);
  border-radius: 0;
}
.wzShare {
  border: 0;
  background: transparent;
  color: var(--cyan);
  font: var(--w-heavy) var(--fs-2xs) / var(--lh-tight) var(--ff-product);
  cursor: pointer;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.wzShare:hover,
.wzShare:focus-visible {
  background: color-mix(in srgb, var(--cyan) 8%, var(--paper-mist));
  box-shadow: none;
}
.wzField {
  display: block;
  margin: 0 0 var(--sp1);
  padding: 0 var(--sp2) 0 0; /* left=0 — same rail as Where to? / NavIQ */
  border: 0;
  background: var(--paper-mist);
  color: var(--ink-on-paper);
  font: var(--w-bold) var(--fs-lg) / var(--lh-tight) var(--ff-product);
  outline: none;
  text-align: left;
  box-shadow: none;
}
#onName.wzField,
#onEmail.wzField {
  font: var(--w-semi) var(--fs-md) / var(--lh-tight) var(--ff-product);
  background: var(--paper-mist);
}
.wzGhost {
  margin: 0;
  border: 0;
  background: var(--paper-mist);
  color: var(--cyan);
  font: var(--w-semi) var(--fs-xs) / var(--lh-tight) var(--ff-product);
  cursor: pointer;
  box-shadow: none;
}
.wzGhost:hover,
.wzGhost:focus-visible {
  border: 0;
  background: color-mix(in srgb, var(--cyan) 10%, var(--paper));
  box-shadow: none;
}
#onboardCard .wzSec {
  display: grid;
  grid-template-columns: minmax(0, var(--phi-track)) minmax(0, 1fr);
  gap: var(--sp1);
  margin: 0 0 var(--sp2);
}
#onboardCard .wzCta {
  border: 0;
  /* Antique brass fill + dark ink. Both stops are flat tokens so an engine without
     color-mix() still paints copper, not a dropped background. --iq-gold and
     --cta-grad-end are never remapped; --ink-on-gold on each stop clears 4.5:1.
     Cyan stays on the route line. Founder 2026-09-28: buttons are copper, not cyan.
     receipt artifacts/token-discipline-2026-09-06/contrast_receipt.json */
  background: linear-gradient(90deg, var(--iq-gold), var(--cta-grad-end));
  color: var(--ink-on-gold);
  font: var(--w-heavy) var(--fs-md) / var(--lh-tight) var(--ff-product);
  cursor: pointer;
  letter-spacing: var(--tr-none);
  box-shadow: 0 10px 28px -14px var(--glow-gold);
}
#onboardCard .wzCta:disabled {
  opacity: 0.5;
  box-shadow: none;
  color: var(--ink-mute);
  background: var(--paper-mist);
}
#onboardCard .wzField:focus {
  border: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 35%, transparent);
}
#onboardCard .wzBack {
  margin-top: var(--sp1);
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font: var(--w-semi) var(--fs-sm) / var(--lh-tight) var(--ff-product);
  cursor: pointer;
  box-shadow: none;
}

/* Choice rows: square tap glyph, copy in the remaining 1fr. Height = tap × φ. */
.wzList {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp1);
  margin: 0 0 var(--sp3);
}
.wzChoice {
  display: grid;
  grid-template-columns: var(--sp-tap) 1fr;
  align-items: center;
  gap: var(--sp2);
  min-height: calc(var(--sp-tap) * var(--phi));
  padding: var(--sp2);
  border: 0;
  background: var(--paper-mist);
  cursor: pointer;
  user-select: none;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
}
button.wzChoice { background: var(--paper-mist); }
.wzChoice b {
  display: block;
  font: var(--w-bold) var(--fs-body) / var(--lh-tight) var(--ff-product);
  color: var(--ink);
}
.wzChoice i {
  display: block;
  font: var(--w-regular) var(--fs-xs) / var(--lh-snug) var(--ff-product);
  font-style: normal;
  color: var(--faint);
  margin-top: var(--sp-half);
}
.wzChoice input[type="checkbox"] {
  width: var(--sp3);
  height: var(--sp3);
  margin: 0 auto;
  accent-color: var(--gold2);
}
.wzLvl {
  width: var(--sp-tap);
  height: var(--sp-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--w-heavy) var(--fs-lg) / var(--lh-tight) var(--ff-product);
  background: var(--navy2);
  border: 1px solid var(--line2);
  color: var(--mut);
}

html h2.wzH {
  font-size: var(--fs-xl) !important;
}
html #onboardCard .destImg.hasimg,
html #onboardCard .destImg:has(img) {
  display: block;
  position: relative;
  min-height: 168px;
  overflow: hidden;
  background: var(--navy2);
  border-color: var(--cyan);
  box-shadow: 0 0 var(--sp2) var(--glow-cyan);
}
#onboardCard .destImg img,
#onboardCard .destImg img.a,
#onboardCard .destImg img.b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}
#onboardCard .destImg .dcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  align-items: end;
  gap: var(--sp1);
  padding: calc(var(--sp3) + var(--sp-half)) var(--sp1half) var(--sp1);
  /* Scrim over a photograph, so it uses the never-remapped --scrim-deep, not --navy
     (which the light :root turns to paper). Alpha-identical to the rgba() it replaces;
     receipt artifacts/token-discipline-2026-09-06/literal_audit_progress.json */
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--scrim-deep) 55%, transparent) 28%,
    color-mix(in srgb, var(--scrim-deep) 94%, transparent) 100%
  );
  color: var(--chrome-ink-soft);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 95%, transparent);
}
#onboardCard .destImg .dpin {
  z-index: 4;
  opacity: 1;
  transition: opacity 382ms cubic-bezier(0.22, 1, 0.36, 1);
}
#onboardCard .destImg .dpin.off {
  opacity: 0;
}
#onboardCard .destImg img.a,
#onboardCard .destImg img.b {
  transition: opacity 618ms cubic-bezier(0.22, 1, 0.36, 1);
}
#onboardCard .placeBrief {
  background: var(--paper-mist) !important;
  color: var(--ink-on-paper) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left;
}

/* Prefs: smoothness 1:φ; three avoid cells equal. */
.prefStrip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp1);
  margin: var(--sp1) 0 var(--sp2);
  font: var(--w-medium) var(--fs-xs) / var(--lh-snug) var(--ff-product);
  color: var(--mut);
  text-align: left;
}
.prefMini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-half);
  min-height: var(--sp-tap);
  margin: 0;
  text-align: left;
  padding: 0 var(--sp1);
  color: var(--ink);
}
.prefAvoid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp1);
  align-items: stretch;
  width: 100%;
}
.prefAvoid .prefMini {
  border: 1px solid var(--line);
  background: var(--navy2);
}
.prefMini.prefSmooth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--phi-track));
  flex-direction: row;
  align-items: center;
  gap: var(--sp1);
  min-height: var(--sp-tap);
  width: 100%;
}
.prefMini.prefSmooth > span {
  width: 100%;
  text-align: left;
  padding: 0 var(--sp1);
}
.prefMini.prefSmooth > select {
  width: 100%;
  min-width: 0;
  min-height: var(--sp-tap);
  font-size: 16px;
}
.prefSmooth select {
  width: 100%;
  min-height: var(--sp-tap);
  font-size: 16px;
}
.prefMini input { font-size: 16px; }

/* Masthead: geometric center — mark + lockup + account share one mid-line. */
.ph > a,
.ph > a.phBrand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  height: var(--sp-tap);
  min-height: var(--sp-tap);
  line-height: 1;
  overflow: visible;
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.ph .wm {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;   /* canonical: see .brandProd. --tr-wide split the IQ pair here. */
  overflow: visible;
  white-space: nowrap;
  font-size: var(--fs-xl);
  line-height: 1;
  margin: 0;
  padding: 0;
  color: var(--chrome-ink-soft) !important;
  -webkit-text-fill-color: var(--chrome-ink-soft);
}
/* `.ph .wm span` deleted 2026-09-06: it restated the canonical .brandProd span sweep. */

/* Elevation sparkline: bitmap 340×80 = 4.25 ≈ φ³ (Z3: φ³ = 2φ+1). Cyan stroke, gold stats. */
#elevProfile {
  display: none;
  margin: var(--sp1) 0;
  padding: var(--sp1half) var(--sp2);
  border: 1px solid var(--line2);
  background: var(--map-canvas);
  box-shadow: 0 0 var(--sp2) var(--glow-cyan);
}
#elevProfile.is-on { display: block; }
.elevHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp1);
  min-height: var(--sp-tap);
  margin-bottom: var(--sp1);
}
.elevLbl {
  font: var(--w-semi) var(--fs-sm)/1 var(--ff-product);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--cyan);
}
#elevStats {
  font: var(--w-semi) var(--fs-xs)/1 var(--ff-product);
  color: var(--gold2);
  font-variant-numeric: tabular-nums;
}
#elevCanvas {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: calc(var(--phi) * var(--phi) * var(--phi));
  background: var(--paper);
  border: 1px solid var(--cyan);
  box-sizing: border-box;
}

/* Heading ladder (26 / 20 / 15 / 13). Shell loads before page <style>, so
   html + descendant + !important beats .24em, fitness --fs-xs, 18.5px hero. */
html .ph {
  display: flex !important;
  align-items: center !important;
}
html .ph > a,
html .ph > a.phBrand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  height: var(--sp-tap) !important;
  min-height: var(--sp-tap) !important;
  line-height: 1 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}
html .ph > a .mkimg {
  display: block !important;
  width: var(--sp4) !important;
  height: var(--sp4) !important;
  margin: 0 !important;
  flex: none !important;
  transform-origin: 50% 50% !important;
}
html .ph > a .wm,
html .ph .wm {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--fs-xl) !important;
  /* 0, not --tr-wide: this !important rule is the specificity winner on the panel, so it
     is where the split IQ pair actually came from. Canonical owner: .brandProd. */
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip;
  font-weight: var(--w-heavy);
}
html .ph .acct {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--sp-tap) !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html .ph .acct svg { display: block !important; margin: 0 !important; }
html .wzChrome,
html .wzStep { text-align: left !important; }
html .wzBrand .brandProd,
html .wzBrand .wzProd {
  font-size: var(--fs-xl) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important; /* N flush with ELARA / STEP / Where to? */
}
html .wzBrand .brandProd span,
html .wzBrand .wzProd span {
  letter-spacing: inherit !important; /* tracking belongs to the container, not the IQ */
  background: linear-gradient(90deg, var(--iq-from), var(--iq-to)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html h2.wzH,
html .wzH,
html #onboardCard .wzH,
html .arrH {
  font-size: var(--fs-2xl) !important;
  line-height: var(--lh-tight);
  text-align: left !important;
}
html .heroband .herop,
html .herop {
  font-size: var(--fs-xl) !important;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
/* Heroband = white paper (not chrome-deep navy) on the light panel */
html .heroband {
  background-color: var(--paper) !important;
  background-image:
    radial-gradient(680px 320px at 50% -14%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--paper), var(--paper-mist)) !important;
  border-bottom: 1px solid var(--line-on-paper) !important;
  color: var(--ink-on-paper);
}
html .heroband .herop { color: var(--ink-on-paper) !important; }
html .heroband .herop i { color: var(--cyan) !important; }
html .heroband .herop b,
html .heroband .herosub b { color: var(--gold-on-light) !important; }
html .heroband .herosub { color: var(--ink-mute) !important; }
html h2.idemH,
html .idemH {
  font-size: var(--fs-xl) !important;
  line-height: var(--lh-tight);
}
html .scroll .lbl,
html .sect .lbl,
html .lbl.lblrow {
  font-size: var(--fs-md) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}
html .ropt-h,
html .rhistH,
html .elevLbl,
html #elevStats,
html .grip .gt,
html #arrive .arrK,
html .wzStep,
html #summary > .routehdr,
html .routehdr,
html .dvAheadHd,
html .evScHd,
html .nqSec,
html .scard .k,
html #aqCard .aqKnowCap {
  font-size: var(--fs-sm) !important;
}
html .nqHd b,
html body.panelmin .peekcta,
html #arrive .arrD { font-size: var(--fs-xl) !important; }
html .wzChoice b { font-size: var(--fs-md) !important; }
@media (max-width: 640px) {
  html .ph { min-width: 0 !important; max-width: 100% !important; }
  html .ph > a, html .ph > a.phBrand { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  html .ph .wm, html .ph > a .wm { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html .ph .acct { flex: 0 1 auto !important; max-width: 46% !important; overflow: hidden !important; }
  html .ph .pmin { flex: none !important; }
}