/* Extracted verbatim from templates/onboarding.html (Foundation Stage 3B-1, 2026-09-08).
   Contiguous slice, cascade-preserved. Do not reorder relative to the other onboarding/styles/*.css files. */
/* ── Topbar: logo · compact step rail · help/save ── */
/* Global Positioning/Spacing Consistency round (2026-08-21+), §5/§17 —
   explicit min-height (matching the stepper column's own natural height:
   32px number circle + 7px gap + ~14px label) so this row reserves the
   SAME vertical space whether or not a stepper is present, keeping the
   vertically-centered KROX logo/right-controls at an IDENTICAL y on
   every screen. Business-type's own .biz-topbar (no stepper) gets the
   same min-height below for the same reason. */
.disc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1520px; margin: 0 auto; width: 100%; min-height: 54px; }
/* Flow-consolidation round (2026-08-20) — one shared Back control, used
   identically on Discover/Menu/Workspace/Ready.
   Header Line + Safe-Data Alignment round (2026-08-21+), §17 — promoted
   from a bare low-contrast text link to a real, clearly-visible bordered
   button (~40px tall, 14-18px horizontal padding) — "secondary
   navigation," not tiny text, not a large primary button. Was previously
   scoped only to Workspace (.ws-shell .ob-back-link); now the ONE base
   rule every screen shares. */
.ob-back-link {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid rgba(247,242,234,.16); border-radius: 10px;
  font-family: var(--biz-sans); font-size: 13px; font-weight: 600; color: var(--biz-ivory-70);
  padding: 11px 16px; margin: 0; transition: all .15s ease;
}
.ob-back-link svg { width: 14px; height: 14px; }
.ob-back-link:hover { border-color: rgba(247,242,234,.32); color: var(--biz-ivory); background: rgba(255,255,255,.05); }
/* State/Persistence Integrity round (2026-08-20+), §6/§8 — the paired
   Forward control, same shape/size as Back but amber (a real next-step
   action, not a passive nav link) and right-aligned via .ob-nav-row. */
/* Return Position + Scrollbar Stability round (2026-08-21+), §1/§17 — the
   Return control's own label text differs per screen ("Return to Menu" /
   "Return to Workspace" / "Return to Ready"), and since it's the LAST
   flex child in a `justify-content:space-between` row, its right edge was
   already pinned to the shared row's right edge on every screen — but its
   LEFT edge (and therefore its measured x) tracked its own label's
   natural width, so Discover's shorter "Return to Menu" sat up to ~37px
   further right than Menu's wider "Return to Workspace" at the same
   viewport (confirmed via direct measurement, not assumed). A fixed width
   (204px comfortably fits the longest real label, "Return to Workspace",
   measured at 190px, plus headroom for font-rendering variance) makes the
   button's own box — and therefore its x — identical across every screen
   regardless of label length; centering the label inside that fixed box
   keeps it looking balanced rather than stranding it in a fixed-width
   slot. This DELIBERATELY changes Discover's own Return x slightly (it
   used to hug its own shorter text) — that's required, since keeping
   Discover's box at its OLD (narrower) width while forcing Menu's longer
   label into the same width would truncate/overflow "Return to
   Workspace"; the fixed-width box is the only way for every real label to
   render in full AND land at one shared x. */
.ob-forward-link { color: var(--ready-orchid-hi); font-weight: 700; width: 204px; justify-content: center; }
.ob-forward-link:hover { color: var(--ready-orchid); }
/* Header Line + Safe-Data Alignment round (2026-08-21+), §16/§27 — ONE
   consistent vertical rhythm below the topbar on every screen: a real
   gap after the header, a compact ~40px row (matching .ob-back-link's
   own ~40px height), then a real gap before the page title. Explicit
   margins here (not per-screen values) so the "Back top edge ≈150-165px
   from viewport top" target holds regardless of which screen renders it
   — topbar (~28-36px top + ~54px row) + this margin-top lands there. */
/* margin-top tuned (via real measurement, not guessed) so Back's own top
   edge lands at the requested ≈150-165px from viewport top at 1440×900
   (confirmed 152px live) — the SAME margin-top on every screen, since
   .ob-nav-row now always sits directly after the shared topbar with no
   other per-screen spacing between them (see the topbar/#legacyTopbarMount
   comments above). */
.ob-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1520px; margin: clamp(60px,7.5vh,76px) auto clamp(14px,1.8vh,20px); }
/* Final Stability/Spacing/Selection round (2026-08-21+), §6 — this
   shared margin is correct for Discover/Menu/Workspace, where
   .ob-nav-row holds a REAL, visible Back button (untouched — do not
   reduce the base rule above, it would move Back on every other
   screen). Business-type's own instance is a hidden, non-interactive
   spacer only (renderBizTypeScreen() — reserves a header-to-content gap,
   never a real control), and was BY FAR the largest contributor to "too
   much empty space between the header and the hero" this round's brief
   names (its own ~60-76px margin-top alone dwarfs .biz-hero's own, far
   smaller, margin). Scoped down here (ID + class beats the bare class
   rule's specificity, so this wins regardless of source order) —
   business-type only, every other screen's real nav-row is completely
   unaffected. */
#bizTypeScreen .ob-nav-row { margin: clamp(10px,1.5vh,20px) auto clamp(6px,0.8vh,10px); }
.disc-toprail { display: flex; align-items: flex-start; }
.disc-toprail-step { display: flex; flex-direction: column; align-items: center; gap: 7px; width: clamp(64px,6vw,92px); }
.disc-toprail-num {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; font-family: var(--biz-sans);
  border: 1.5px solid rgba(247,242,234,.20); color: var(--biz-ivory-50); background: rgba(255,255,255,.02);
  transition: all .25s var(--biz-ease);
}
.disc-toprail-label { font-size: 11px; color: var(--biz-ivory-50); font-weight: 500; letter-spacing: .01em; }
.disc-toprail-step.is-active .disc-toprail-num {
  border-color: var(--ready-orchid); background: var(--ready-orchid); color: #1a1206;
  box-shadow: 0 0 0 4px var(--ready-orchid-16), 0 0 18px -3px var(--ready-orchid-40);
}
/* Colour-correction round (2026-09-05) — the WORD label stays black even
   while its step is active/done (only the tiny circular number/check
   marker may carry the lavender accent — "a very small active marker",
   never the text itself). Weight alone carries the active emphasis. */
.disc-toprail-step.is-active .disc-toprail-label { color: var(--biz-ivory); font-weight: 600; }
.disc-toprail-step.is-done .disc-toprail-label { color: var(--biz-ivory-70); }
.disc-toprail-step.is-done .disc-toprail-num { border-color: rgba(21,21,21,.4); color: var(--biz-ivory); background: rgba(21,21,21,.06); }
.disc-toprail-connector { width: clamp(28px,3.6vw,64px); height: 1px; background: rgba(247,242,234,.14); margin-top: 16px; }
.disc-toprail-connector.is-done { background: rgba(21,21,21,.35); }

/* ── Main 2-col area ── */
.disc-main { min-height: 0; display: flex; justify-content: center; margin-bottom: clamp(10px,1.4vh,16px); }
.disc-grid {
  width: 100%; max-width: 1520px; height: 100%; min-height: 0;
  display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(20px,2.6vw,44px);
  align-items: stretch; transition: grid-template-columns .35s var(--biz-ease);
}
/* Preview states size the two columns to their real content instead of
   stretching to the full available row height — a floating pair of
   cards reads more cinematic than one artificially tall, mostly-empty
   panel (found during this round's own visual QA). */
.disc-grid.has-preview { grid-template-columns: minmax(0,0.94fr) minmax(0,1fr); align-items: start; }
/* Discover-continues-the-collage round — the single-column (no business
   selected yet) case now renders a visible glass card (#discoverScreen
   .disc-left above), so it must hug its own content height instead of
   stretching to fill the row (which used to be invisible against the
   flat background and harmless; now it left a tall empty glass panel).
   Matches the has-preview row's own align-items: start immediately above. */
.disc-grid:not(.has-preview) { align-items: start; }
.disc-left { min-height: 0; max-height: 100%; display: flex; flex-direction: column; max-width: 640px; }
.disc-results, .disc-form-card { min-height: 0; }
/* Light onboarding theme round — a comfortable, generously-whitespaced
   centered column (no glass-card treatment; Discover has no collage
   behind it to show through one any more). */
.disc-grid:not(.has-preview) .disc-left { max-width: 620px; margin: 0 auto; width: 100%; }
.disc-eyebrow { font-size: clamp(11px,1.2vh,13px); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--ready-orchid); margin-bottom: clamp(8px,1.2vh,12px); }
.disc-headline { font-family: var(--biz-serif); font-weight: 440; letter-spacing: -.02em; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.08; color: var(--biz-ivory); margin-bottom: clamp(8px,1.2vh,12px); }
.disc-headline .biz-accent { color: var(--ready-orchid-hi); }
.disc-subtext { font-size: clamp(13px,1.5vh,15px); line-height: 1.5; color: var(--biz-ivory-70); margin-bottom: clamp(16px,2.4vh,26px); max-width: 480px; }
.disc-back-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--biz-ivory-50); padding: 0 0 clamp(12px,2vh,18px); text-align: left;
  transition: color .15s ease; width: fit-content;
}
.disc-back-link:hover { color: var(--ready-orchid-hi); }

/* ── Search ── */
.disc-search-wrap { position: relative; }
.disc-search-box {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid rgba(139,115,214,.28); border-radius: 999px;
  padding: clamp(12px,1.6vh,15px) clamp(16px,1.6vw,20px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.disc-search-box:focus-within { border-color: var(--ready-orchid); box-shadow: 0 0 0 4px var(--ready-orchid-16), 0 0 22px -6px var(--ready-orchid-40); }
.disc-search-box svg { flex: none; width: 18px; height: 18px; color: var(--biz-ivory-50); }
.disc-search-box input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--biz-ivory);
  font: inherit; font-size: 14.5px; font-family: var(--biz-sans); caret-color: var(--ready-orchid);
}
.disc-search-box input::placeholder { color: var(--biz-ivory-30); }
.disc-search-clear { flex: none; background: none; border: none; cursor: pointer; color: var(--biz-ivory-50); padding: 2px; display: flex; }
.disc-search-clear:hover { color: var(--biz-ivory); }
.disc-search-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--biz-ivory-50); margin: clamp(9px,1.4vh,12px) 2px 0; }
.disc-search-hint svg { flex: none; width: 13px; height: 13px; color: var(--ready-orchid); }
.disc-search-hint b { color: var(--ready-orchid-hi); font-weight: 600; }

/* ── Result list (in-flow, not a floating dropdown) ── */
/* Discover Final Consolidation round (2026-08-21+), §4/§6/§31/§32 — root
   cause of "many Google results make the whole page scroll": this
   container had overflow-y:auto but no height CAP, so it simply grew
   with content instead of ever triggering its own scrollbar — a
   responsive max-height (not a magic fixed number) now bounds it to
   roughly 4-5 visible result rows depending on viewport height, with
   the header/search/Back/Return/manual-entry-link all staying outside
   this container and therefore always visible. Scrollbar hidden
   visually (matching .biz-cards-wrap's own established convention) —
   real wheel/trackpad/touch/keyboard scrolling is unaffected. */
.disc-results {
  display: none; flex-direction: column; gap: 12px; margin-top: clamp(14px,2vh,18px);
  overflow-y: auto; min-height: 0; padding-right: 2px;
  max-height: clamp(260px, 44vh, 430px);
  scrollbar-width: none; -ms-overflow-style: none;
}
.disc-results::-webkit-scrollbar { display: none; width: 0; height: 0; }
.disc-results.is-open { display: flex; }
/* §7 — compact result rows (was 64px thumb / 14px padding — visibly
   "large cards"); smaller thumb + tighter padding fits more rows inside
   the §6 internal-scroll region without shrinking tap targets below a
   comfortable size. */
.disc-result-item {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: linear-gradient(165deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border: 1px solid rgba(247,242,234,.10); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; transition: all .18s ease; font: inherit; color: inherit;
}
.disc-result-item:hover { border-color: rgba(139,115,214,.34); background: rgba(139,115,214,.05); transform: translateY(-1px); }
.disc-result-item.is-selected { border-color: var(--ready-orchid); background: rgba(139,115,214,.1); box-shadow: 0 0 0 1px rgba(139,115,214,.4), 0 0 26px -8px var(--ready-orchid-40); }
.disc-result-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--ready-orchid-hi); opacity: .9; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 70% at 30% 20%, rgba(139,115,214,.22), transparent 70%),
    linear-gradient(155deg,#20170c,#0c0904);
}
.disc-result-thumb svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.disc-result-body { flex: 1; min-width: 0; }
.disc-result-name { font-size: 15px; font-weight: 600; color: var(--biz-ivory); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-result-sub { font-size: 12.5px; color: var(--biz-ivory-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-result-chev { flex: none; width: 16px; height: 16px; color: var(--biz-ivory-30); }

/* Selected-Business Visual Composition round (2026-08-22+), §3/§18 — a
   compact "Selected business" summary for the LEFT column, replacing the
   full open results list once a business is selected. Gives the left
   column real visual weight (instead of just search box + a mostly-
   empty void beneath a tall Preview panel) without introducing a second
   sidebar or a large new card — reuses .disc-result-thumb for the
   thumbnail so it stays visually consistent with the results list it
   replaces. */
.disc-selected-summary { margin-top: clamp(14px,2vh,18px); }
.disc-selected-summary-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--biz-ivory-50); margin-bottom: 8px;
}
.disc-selected-summary-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(139,115,214,.07); border: 1px solid var(--ready-orchid);
  box-shadow: 0 0 0 1px rgba(139,115,214,.25), 0 0 22px -10px var(--ready-orchid-40);
}
.disc-selected-summary-body { flex: 1; min-width: 0; }
.disc-selected-summary-name { font-size: 15px; font-weight: 600; color: var(--biz-ivory); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-selected-summary-sub { font-size: 12px; color: var(--biz-ivory-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-selected-summary-check {
  flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  color: var(--biz-green);
}
.disc-selected-summary-check svg { width: 13px; height: 13px; }

.disc-manual-cta {
  display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--biz-ivory-70); padding: clamp(10px,1.6vh,14px) 2px 0; text-align: left; width: fit-content;
}
.disc-manual-cta svg { flex: none; width: 15px; height: 15px; color: var(--biz-ivory-50); }
.disc-manual-cta b { color: var(--ready-orchid-hi); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.disc-manual-cta:hover b { color: var(--ready-orchid); }

/* ── Trust footer note ── */
/* Header Line + Safe-Data Alignment round (2026-08-21+), §7-10 — was a
   large, full-shell-width (1680px) strip; the brief's own explicit
   complaint ("takes too much space... do not keep it as a large footer
   box spanning a huge width"). Now a small, content-width, centered
   badge — bottom-center placement (§8's "alternative option", chosen
   over upper-left-under-logo since the shared topbar/nav-row is common
   to every screen and a page-specific trust message stacked there would
   either force one-size-fits-all copy or add per-screen positioning
   logic to a component this round explicitly wants to stay uniform;
   bottom-center needs no such per-page accommodation and cannot disturb
   the nav row per §28). Fits its own content, never full page width. */
.disc-trust {
  width: fit-content; max-width: 92%; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(247,242,234,.08); border-radius: 999px;
  padding: 7px 16px 7px 12px;
}
.disc-trust svg { flex: none; width: 13px; height: 13px; color: var(--ready-orchid); }
.disc-trust-title { font-size: 11px; font-weight: 600; color: var(--biz-ivory); white-space: nowrap; }
.disc-trust-sub { font-size: 10px; color: var(--biz-ivory-50); white-space: nowrap; }
/* Colour/Menu-panel correction round (2026-09-05) — the nowrap trust-strip
   text is short enough to fit its pill at normal widths, but at narrow
   phone widths (esp. the Workspace screen, whose #app shell has no
   overflow:hidden ancestor to silently absorb it the way #discoverScreen's
   own already-fixed grid-blowout bug did) the un-wrapped sentence forced a
   real, visible page-level horizontal overflow. Letting it wrap here is
   strictly safer than nowrap at this width, on every screen that reuses
   this component. */
@media (max-width: 480px) {
  .disc-trust { max-width: 100%; }
  .disc-trust-title, .disc-trust-sub { white-space: normal; }
}

/* ── Preview / form panel shell (glass card) ── */
.disc-panel {
  background: linear-gradient(165deg, rgba(28,22,14,.62), rgba(9,7,4,.72));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(139,115,214,.20); border-radius: clamp(14px,1.4vw,20px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(139,115,214,.04) inset;
  display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden;
}
.disc-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* ── Global Preview semantic (3-Screen Visual Reconstruction round,
   2026-08-21+) — GOLD = action/navigation, GREEN = ready/success,
   RED-ORANGE = attention, PURPLE = preview. Every right-side read-only
   surface across Discover/Menu/Workspace gets this ONE shared treatment
   — layered on top of the existing .disc-panel/.build-panel glass-card
   shell via a modifier class (never a second panel system), reusing the
   SAME --ready-orchid*/--ready-blush tokens the Ready page already
   introduced (one shared purple family, not a new one). ── */
.disc-panel.is-preview, .build-panel.is-preview {
  border-color: rgba(139,115,214,.24);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(139,115,214,.05) inset;
}
.preview-label {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ready-orchid-hi);
  padding: clamp(14px,1.8vh,18px) clamp(16px,1.6vw,20px) 2px;
}
.preview-label svg { width: 14px; height: 14px; }
.preview-note {
  display: flex; align-items: flex-start; gap: 9px; margin: 4px clamp(14px,1.6vw,20px) clamp(14px,1.8vh,18px);
  padding: 11px 13px; border-radius: 11px; background: rgba(185,138,240,.06); border: 1px solid rgba(185,138,240,.18);
  font-size: 11.5px; line-height: 1.5; color: var(--biz-ivory-70);
}
.preview-note svg { flex: none; width: 14px; height: 14px; color: var(--ready-orchid-hi); margin-top: 1px; }

/* Hero photo + fallback — Visual Fidelity round (2026-08-20), updated by
   the Discover Final Consolidation round (2026-08-21+), §10/§19/§20: real
   merchant-uploaded photos are now durably persisted (bp.logo_url — see
   uploadDiscBizPhoto()) and rendered here whenever present. This
   codebase still has no Google-photo proxy (a raw Places photo resource
   name isn't a fetchable URL — see the audit note on
   renderDiscResultItem()), so the fallback below still matters for that
   case. §10 — no giant reserved photo region when there's genuinely no
   photo: .is-empty shrinks the hero to a slimmer band instead of the
   full photo-sized height, which also helps one-viewport fit (§4/§31).
   The fallback itself is a full-bleed layered "warm lit scene" — soft
   scattered amber bokeh (evoking string lights) + a horizon glow + a
   large low-opacity storefront watermark — so it carries comparable
   visual WEIGHT/color to a real photo without pretending to be one.
   Never a literal building illustration/photo. */
.disc-hero-media { position: relative; flex: none; height: clamp(170px,27vh,280px); background: linear-gradient(155deg,#1b140b,#0a0704); overflow: hidden; transition: height .18s ease; }
.disc-hero-media.is-empty { height: clamp(110px,17vh,180px); }
.disc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disc-hero-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 14% 22% at 22% 30%, rgba(244,201,137,.30), transparent 70%),
    radial-gradient(ellipse 10% 16% at 68% 22%, rgba(139,115,214,.24), transparent 70%),
    radial-gradient(ellipse 16% 24% at 84% 46%, rgba(244,201,137,.22), transparent 72%),
    radial-gradient(ellipse 12% 18% at 38% 62%, rgba(139,115,214,.18), transparent 72%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(139,115,214,.16), transparent 68%),
    linear-gradient(155deg,#1c1409,#0a0704 60%);
}
.disc-hero-fallback svg { width: 64px; height: 64px; color: rgba(139,115,214,.22); position: relative; z-index: 1; }
.disc-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(6,4,2,.88) 100%); pointer-events: none; }
.disc-hero-upload {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,4,2,.55); backdrop-filter: blur(6px); border: 1px solid rgba(139,115,214,.35); border-radius: 999px;
  padding: 7px 13px; font-size: 11.5px; font-weight: 600; color: var(--ready-orchid-hi); cursor: pointer; font-family: var(--biz-sans);
  transition: all .15s ease;
}
.disc-hero-upload:hover { background: rgba(139,115,214,.14); border-color: var(--ready-orchid); }
.disc-hero-upload svg { width: 12px; height: 12px; }
.disc-hero-upload:disabled { cursor: default; opacity: .85; }
/* Photo Persistence + Preview Binding round (2026-08-22+), §6 — a
   compact loading spinner (no new SVG asset needed) for the upload
   button's real "Uploading…" state. */
.disc-spinner {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 1.6px solid rgba(139,115,214,.3); border-top-color: var(--ready-orchid-hi);
  animation: disc-spin .7s linear infinite;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }
/* §0/§6 — a real, visible upload-failure line (never silent), restrained
   (no full-red panel), consistent with this file's existing error-
   treatment palette. Positioned absolutely INSIDE .disc-hero-media
   (which is already position:relative) rather than in normal flow — a
   real layout bug was found and fixed here: .disc-identity's own -34px
   negative top-margin (deliberately overlapping the hero's bottom edge)
   would otherwise overlap and visually collide with this message if it
   sat between the hero and identity blocks in the document flow. */
.disc-photo-err {
  position: absolute; left: 10px; right: 10px; top: 50px; z-index: 2;
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 10px; border-radius: 10px; background: rgba(10,7,4,.88); backdrop-filter: blur(6px);
  border: 1px solid var(--biz-danger-40); font-size: 11px; line-height: 1.4; color: var(--biz-danger-hi);
}
.disc-photo-err svg { flex: none; width: 13px; height: 13px; color: var(--biz-danger); margin-top: 1px; }
/* §17 — compact-hours expand toggle */
.disc-hours-toggle {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: inherit; color: var(--ready-orchid-hi); font-weight: 600; text-decoration: underline;
}

/* Identity row: badge + name + chip — deliberately overlaps the hero's
   own bottom edge (negative margin) so identity reads as PART of the
   photo/scene beneath it, matching the approved mockups, not a separate
   block stacked below a gap. */
.disc-identity { position: relative; padding: 0 clamp(18px,1.8vw,26px); margin-top: -34px; display: flex; align-items: flex-end; gap: 16px; }
.disc-badge {
  flex: none; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(155deg,#241a0d,#0d0904);
  border: 3px solid var(--biz-ink); box-shadow: 0 0 0 1px rgba(139,115,214,.45), 0 10px 22px -10px rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.disc-badge span { font-family: var(--biz-serif); font-size: 26px; font-weight: 500; color: var(--ready-orchid-hi); }
.disc-badge-dot { position: absolute; bottom: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--biz-green); border: 2px solid var(--biz-ink); }
.disc-identity-text { min-width: 0; padding-bottom: 4px; }
.disc-biz-name { font-family: var(--biz-serif); font-size: clamp(20px,1.9vw,26px); font-weight: 500; color: var(--biz-ivory); line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.disc-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: rgba(139,115,214,.12); border: 1px solid rgba(139,115,214,.32); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--ready-orchid-hi); }
.disc-chip svg { width: 11px; height: 11px; }

/* Details — a distinct nested surface (darker, bordered, its own
   radius) sitting inside the outer panel, matching the mockups' clear
   "card within a card" depth instead of details floating directly on
   the panel's own background. */
.disc-details {
  margin: clamp(16px,1.8vh,20px) clamp(18px,1.8vw,26px) 4px;
  padding: clamp(14px,1.7vh,18px) clamp(16px,1.6vw,20px);
  background: rgba(0,0,0,.24); border: 1px solid rgba(247,242,234,.07); border-radius: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px 22px;
}
.disc-detail-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.disc-detail-row svg { flex: none; width: 15px; height: 15px; color: var(--ready-orchid); margin-top: 2px; }
.disc-detail-label { font-size: 11px; color: var(--biz-ivory-50); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.disc-detail-value { font-size: 13px; color: var(--biz-ivory-70); line-height: 1.45; word-break: break-word; }
.disc-detail-value a { color: var(--ready-orchid-hi); text-decoration: none; }
.disc-detail-value a:hover { text-decoration: underline; }
.disc-detail-row.is-wide { grid-column: 1 / -1; }
.disc-edit-link {
  grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 1px solid rgba(139,115,214,.28); border-radius: 999px; padding: 6px 13px; font-size: 11.5px; font-weight: 600;
  color: var(--ready-orchid-hi); cursor: pointer; font-family: var(--biz-sans); margin-top: 2px;
}
.disc-edit-link:hover { background: rgba(139,115,214,.1); border-color: var(--ready-orchid); }
.disc-edit-link svg { width: 11px; height: 11px; }
/* Selected-Business Visual Composition round (2026-08-22+), §6/§7 —
   superseded the old "read-only body + appended editable form" pattern
   (.disc-edit-panel, an inline block sitting inside .disc-details) with
   a genuine mode switch: renderDiscSelectedEditBody() replaces the ENTIRE
   .disc-panel-scroll body (reusing that same class/flex:1;min-height:0;
   overflow-y:auto — the identical internal-scroll mechanism the read-only
   body already used, not a second implementation), so the form body
   scrolls internally while the header/actions stay stable, and the
   read-only details are never visible at the same time as the form. */
.disc-edit-header {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: clamp(14px,1.8vh,18px) clamp(16px,1.6vw,20px) 2px;
}
.disc-edit-header-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ready-orchid-hi); }
.disc-edit-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--biz-ivory-70); transition: color .15s ease;
}
.disc-edit-back:hover { color: var(--biz-ivory); }
.disc-edit-back svg { width: 12px; height: 12px; }

/* Action row */
.disc-panel-actions { flex: none; display: flex; gap: 10px; padding: clamp(14px,1.8vh,18px) clamp(18px,1.8vw,26px); border-top: 1px solid rgba(247,242,234,.07); margin-top: auto; }
.disc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--biz-sans); font-size: 13.5px; font-weight: 600; padding: 13px 18px; border-radius: 11px; cursor: pointer; transition: all .18s ease; border: none; }
.disc-btn svg { width: 14px; height: 14px; }
.disc-btn-primary { background: var(--biz-ivory); color: var(--biz-ink); box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); }
.disc-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -12px rgba(139,115,214,.7); transform: translateY(-1px); }
.disc-btn-secondary { background: rgba(255,255,255,.03); color: var(--biz-ivory-70); border: 1px solid rgba(247,242,234,.16); }
.disc-btn-secondary:hover { border-color: rgba(247,242,234,.32); color: var(--biz-ivory); background: rgba(255,255,255,.05); }

/* ── Manual entry form ── */
/* Visual Fidelity round (2026-08-20) — .disc-form-card is now a flex
   column with its OWN internal scroll region (.disc-form-rows-scroll)
   separate from the action row, mirroring .disc-panel/.disc-panel-scroll/
   .disc-panel-actions' already-correct pattern. Root cause fixed: at a
   shorter viewport (e.g. 1440x900) the old single-scrollable-card design
   could bury "Search on Google instead"/"Preview details" below the
   fold with no visible affordance that more content existed — the real
   primary actions must always stay visible, never require discovering a
   scroll first. */
.disc-form-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(139,115,214,.16); border-radius: 16px;
  padding: 4px clamp(16px,1.8vw,22px) 0; flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.disc-form-rows-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.disc-form-row { display: flex; align-items: center; gap: 12px; padding: clamp(11px,1.6vh,14px) 2px; border-bottom: 1px solid rgba(247,242,234,.07); }
.disc-form-row:last-child { border-bottom: none; }
.disc-form-row > .disc-icon { color: var(--ready-orchid); }
.disc-form-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.disc-form-field label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--biz-ivory-50); }
.disc-form-field input, .disc-form-field select {
  background: none; border: none; outline: none; color: var(--biz-ivory); font: inherit; font-size: 14px;
  font-family: var(--biz-sans); padding: 0; width: 100%; appearance: none; -webkit-appearance: none;
}
.disc-form-field select { cursor: pointer; }
.disc-form-field select option { background: #17120a; color: var(--biz-ivory); }
.disc-form-field input::placeholder { color: var(--biz-ivory-30); }
.disc-form-field.has-error input { color: #ff9b8a; }
.disc-form-err { font-size: 11px; color: #ff9b8a; margin-top: 2px; }
.disc-form-row.is-split { gap: 20px; }
.disc-form-actions { display: flex; gap: 10px; padding: clamp(14px,1.8vh,18px) 2px clamp(6px,1vh,10px); flex: none; }

/* Visual Fidelity round (2026-08-20) — a shorter laptop viewport (e.g.
   1440x900) has less room than the reference's own 1024px-tall canvas;
   tightening row padding/hero height here closes most of the resulting
   internal form-card scroll without shrinking type past the point of
   feeling cramped (a real, minor scroll on a genuinely dense 8-row
   summary is still an acceptable fallback per this round's own §10, not
   eliminated at all costs). */
@media (max-height: 920px) {
  .disc-hero-media { height: clamp(105px,14.5vh,170px); }
  .disc-hero-media.is-empty { height: clamp(80px,11vh,120px); }
  .disc-form-row { padding: clamp(8px,1.3vh,11px) 2px; }
  .disc-identity { margin-top: -26px; }
  .disc-badge { width: 54px; height: 54px; }
  .disc-badge span { font-size: 19px; }
  /* Selected-Business Visual Composition round (2026-08-22+), §11/§21 —
     root cause of a real ~54px outer-page overflow found at 1366×768
     with a full selected-business Preview (photo/fallback + identity +
     address/phone/website/hours/rating + Edit details): .disc-panel's
     own max-height:100% only ever resolves against its intrinsic-height
     grid row (no viewport-relative cap exists above it — that's global-
     shell territory, frozen this round), so the read-only body's natural
     content height was the actual bottleneck, not a missing internal-
     scroll rule. This query already compacts the hero/identity/badge at
     ≤920px height; extending it to the details card/actions bar (both
     Discover-only classes, never shared with Menu/Workspace) closes the
     gap without touching the outer grid math. */
  .disc-details { margin: 6px clamp(18px,1.8vw,26px) 4px; padding: 7px clamp(16px,1.6vw,20px); gap: 6px 20px; }
  .disc-panel-actions { padding: 8px clamp(18px,1.8vw,26px) 10px; }
}

@media (max-width: 1080px) {
  .disc-grid.has-preview { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; }
  .disc-grid.has-preview .disc-left { max-width: 640px; margin: 0 auto; width: 100%; }
  .disc-panel { max-width: 640px; margin: 0 auto; width: 100%; height: auto; }
  #discoverScreen.is-active { height: auto; min-height: 100dvh; max-height: none; overflow-y: auto; row-gap: 18px; }
  body:has(#discoverScreen.is-active) { overflow: visible; }
  .disc-panel-scroll { overflow-y: visible; }
}
@media (max-width: 640px) {
  .disc-toprail-label { display: none; }
  .disc-toprail-connector { width: 20px; }
  .disc-headline { font-size: clamp(24px,7vw,30px); }
  .disc-details { grid-template-columns: 1fr; }
  .disc-panel-actions, .disc-form-actions { flex-direction: column; }
}
/* Visual Fidelity round (2026-08-20) — real horizontal-overflow fix
   found during required mobile QA: the compact top rail (4 circles + 3
   connectors) plus the logo and Save & exit button structurally cannot
   fit in one row under ~480px even with the 640px tightening above.
   "STEP 1 OF 4" (already shown in the eyebrow, right below the topbar)
   already conveys the same progress information, so the rail simply
   steps aside here rather than clipping/forcing page-level horizontal
   scroll — logo/help/save stay, matching the business-type screen's own
   topbar at the same width. */
@media (max-width: 480px) {
  .disc-toprail { display: none; }
  .disc-topbar { justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════════════════
   Workspace Step (App.step === 3, "Account") — Reference-Driven
   Implementation round (2026-08-21+). Two-column premium layout: login/
   security (left) + prefilled business details + operational settings
   (right). Reuses .disc-panel/.disc-form-row/.disc-icon/.disc-btn (the
   SAME shared glass-card/row/button system Discover already uses)
   wholesale — only what's genuinely new here (bordered credential
   inputs, read/edit detail rows, pure-veg/service-mode toggles) gets new
   .ws-* classes.
   ══════════════════════════════════════════════════════════════════════ */
/* Workspace Strict Reference Matching round, PASS 2 (2026-08-21+) — a
   real screen recording at the user's own actual browser window size
   (shorter than any of the 3 official test viewports, once real Chrome
   tab-strip/address-bar chrome is subtracted from the window height)
   showed the bottom reassurance strip silently CLIPPED — proof that a
   fixed height:100dvh + overflow:hidden is exactly the "fake it" failure
   mode the brief warns against: it hides genuine overflow instead of
   admitting it. Fixed: min-height:100dvh (not height/max-height), no
   overflow:hidden — the page still TARGETS one viewport (and the compact
   clamp()s below make it actually fit at all 3 official sizes), but if a
   real browser is ever shorter than that, the frame grows and the
   document scrolls normally (a visible, honest scrollbar) instead of
   invisibly eating content. `position:relative; isolation:isolate;`
   still gives real content a guaranteed-above stacking context.
   PASS 1's floor-light effect is REMOVED ENTIRELY per this round's own
   explicit §17 instruction, not merely re-tucked behind content — no
   ::before/::after glow layers at all; only the existing, already very
   subtle near-black gradient background remains. */
/* Global Positioning/Spacing Consistency round (2026-08-21+), §2/§3/§17 —
   #app.ws-glow now carries the SAME shared shell padding
   (--ob-shell-x/--ob-shell-top) every other onboarding screen's outer
   container uses, applied ONCE here so both #legacyTopbarMount (the
   topbar: KROX/stepper/Need help/Save & exit/Start over) and
   #stepContent (.ws-shell's own content) inherit an IDENTICAL left/right
   inset — the previous padding:0 here (relying entirely on .ws-shell's
   own, narrower, horizontally-different padding) is exactly why
   Workspace's KROX logo sat flush against the viewport edge instead of
   matching Discover/Menu/business-type. */
#app.ws-glow {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: stretch;
  padding: var(--ob-shell-top) var(--ob-shell-x) clamp(16px,2.2vh,22px);
  background: linear-gradient(180deg, #050505 0%, #080706 55%, #080604 100%);
  position: relative; isolation: isolate;
}
#app.ws-glow #legacyTopbarMount { flex: none; }
#app.ws-glow #stepContent { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* max-width now matches Discover/Menu/business-type's own 1680px (was
   1400px) — §17's "page left content boundary identical": at a viewport
   wide enough to trigger either max-width (>=1680px, e.g. 1920×1080),
   .ws-shell now centers within the exact same width .disc-topbar/
   .build-shell do, so Workspace's Back/panels align with the topbar's
   own KROX/right-controls instead of drifting narrower. The .ws-grid
   panel split is proportional (fr units), so this only widens the
   panels proportionally — it does not change their 47/53 ratio. */
.ws-shell {
  flex: 1; min-height: 0; width: 100%; max-width: 1520px; margin: 0 auto;
  /* top padding removed (was clamp(6px,.9vh,16px), same value as
     bottom) — .ob-nav-row's own margin-top is now the ONE source of
     "gap after header" on every screen; a nonzero top padding here was
     an extra, Workspace-only addition on top of it, the reason Back sat
     lower here than on Menu. Bottom padding (space before the trust
     strip) is preserved. */
  padding: 0 0 clamp(6px,.9vh,16px);
  display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: clamp(5px,.7vh,14px);
  position: relative; z-index: 1;
}
/* Same implicit-grid-column blowout class of bug the Discover screen had
   (#discoverScreen > *'s own min-width:0 fix, Colour/Menu-panel correction
   round 2026-09-05) — .ws-shell is a single-column grid too, so a
   non-shrinkable descendant anywhere inside a row can force that row (and
   the whole grid track) wider than the 272px-at-320px-viewport container,
   silently or visibly overflowing depending on the ancestor's own overflow
   setting. */
.ws-shell > * { min-width: 0; }
/* Header Line + Safe-Data Alignment round (2026-08-21+) — the Workspace-
   scoped bordered Back treatment from the prior round is now the GLOBAL
   .ob-back-link base rule (see its own definition) — this screen no
   longer needs its own override. .disc-trust's own compaction is also
   now global (see its own rule) — Workspace no longer needs a scoped
   thinner variant either. */

/* Header Line + Safe-Data Alignment round (2026-08-21+), §18/§20 — now a
   flex row so the ordinary "Continue to Ready" CTA can sit structurally
   separate from .ob-nav-row's own conditional Return control (previously
   shared one flex container — both could render simultaneously and read
   as duplicate "Ready"-ish controls once furthestStep passed Ready). */
.ws-title-block { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ws-title-block > div:first-child { min-width: 0; }
.ws-eyebrow { font-size: clamp(11px,1.2vh,13px); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--ready-orchid); margin-bottom: 10px; }
.ws-headline { font-family: var(--biz-serif); font-weight: 440; letter-spacing: -.02em; font-size: clamp(22px,2.6vw,36px); line-height: 1.1; color: var(--biz-ivory); margin-bottom: 4px; }
.ws-headline .biz-accent { color: var(--ready-orchid-hi); }
.ws-subtext { font-size: clamp(12.5px,1.4vh,15px); line-height: 1.45; color: var(--biz-ivory-70); max-width: 760px; }

/* §3 — "do not leave large dead spaces": the panels size to their own
   natural content height (never forced to stretch across a much-taller
   viewport, e.g. 1920×1080, which would otherwise leave a big empty
   lower region inside each card) and the pair centers vertically within
   the row's own available space. max-height still caps growth against a
   genuinely short viewport (1366×768) as a safety net — the real fix
   there is the compact clamp()s on every field/row inside both panels. */
.ws-grid { display: grid; grid-template-columns: minmax(0,0.89fr) minmax(0,1fr); gap: clamp(20px,2.6vw,40px); min-height: 0; max-height: 100%; align-self: center; align-items: start; }
/* Workspace-scoped compaction of the shared global Preview label/note
   (§34/scope discipline — Discover and Menu's own use of .preview-label/
   .preview-note is untouched; these overrides apply ONLY inside
   .ws-grid, never the shared base rule). */
.ws-grid .preview-label { padding: clamp(10px,1.4vh,16px) clamp(16px,1.6vw,20px) 2px; }
.ws-grid .preview-note { margin: 3px clamp(14px,1.6vw,20px) clamp(10px,1.3vh,16px); padding: 9px 12px; }
@media (max-width: 900px) { .ws-grid { grid-template-columns: minmax(0,1fr); height: auto; } }

.ws-panel-head { display: flex; align-items: center; gap: 14px; padding: clamp(16px,2vh,20px) clamp(16px,1.8vw,22px) clamp(12px,1.6vh,16px); }
.ws-panel-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(139,115,214,.10); border: 1px solid rgba(139,115,214,.28); color: var(--ready-orchid-hi);
}
.ws-panel-icon svg { width: 19px; height: 19px; }
.ws-panel-title { font-family: var(--biz-serif); font-size: 18px; font-weight: 500; color: var(--biz-ivory); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ws-panel-title .ws-tag { font-family: var(--biz-sans); font-size: 11.5px; font-weight: 600; color: var(--biz-ivory-50); }
.ws-panel-sub { font-size: 12px; color: var(--biz-ivory-50); line-height: 1.5; margin-top: 2px; }
.ws-panel-body { padding: 0 clamp(16px,1.8vw,22px) clamp(18px,2vh,22px); }
/* Strict Reference Matching round (2026-08-21+) — the login card's own
   body, used WITHOUT a .ws-panel-head above it (the reference has no
   header/title inside this panel at all — it starts directly at the
   Google button), so this owns its own top padding. Wrapped in
   .disc-panel-scroll (flex:1;min-height:0;overflow-y:auto — the same
   primitive Discover's manual form already uses) so a genuinely tight
   viewport (1366×768) scrolls WITHIN this one card as a last resort,
   never the whole page. */
.ws-login-body { padding: clamp(10px,1.4vh,20px) clamp(16px,1.8vw,22px) clamp(8px,1.1vh,18px); }

/* ── Google button + divider ── */
#wsGoogleBtn { margin-bottom: 2px; }
.ws-or-divider { display: flex; align-items: center; gap: 10px; margin: clamp(6px,1vh,13px) 0; color: var(--biz-ivory-50); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.ws-or-divider::before, .ws-or-divider::after { content: ''; flex: 1; height: 1px; background: rgba(247,242,234,.10); }

/* ── Bordered credential fields (§29 — dark surface / soft border / amber
   focus / good height / eye icon / clear error state) ── */
.ws-field { margin-bottom: clamp(6px,.9vh,12px); }
.ws-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--biz-ivory-70); margin-bottom: clamp(4px,.7vh,6px); }
.ws-field-input-wrap { position: relative; display: flex; align-items: center; }
.ws-field input {
  width: 100%; height: clamp(40px,4.9vh,46px); background: rgba(255,255,255,.025); border: 1px solid rgba(247,242,234,.12); border-radius: 10px;
  padding: 0 14px; color: var(--biz-ivory); font: inherit; font-size: 14px; font-family: var(--biz-sans);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.ws-field input::placeholder { color: var(--biz-ivory-30); }
.ws-field input:focus { border-color: var(--ready-orchid); box-shadow: 0 0 0 3px var(--ready-orchid-16); }
.ws-field input.error-input { border-color: rgba(232,97,63,.55); }
.ws-field-err { font-size: 11.5px; color: #ff9b8a; margin-top: 5px; }
.ws-field-input-wrap .pw-toggle { position: absolute; right: 12px; background: none; border: none; color: var(--biz-ivory-50); cursor: pointer; font-size: 15px; padding: 4px; display: flex; }
.ws-field-input-wrap .pw-toggle:hover { color: var(--biz-ivory); }
.ws-field-input-wrap input { padding-right: 40px; }

/* ── Business detail rows (mirrors .disc-form-row's read-only cousin,
   renderDiscManualSummary()) ── */
.ws-detail-rows { border: 1px solid rgba(139,115,214,.14); border-radius: 12px; background: rgba(255,255,255,.015); }
.ws-detail-row { display: flex; align-items: center; gap: 12px; padding: clamp(7px,1vh,12px) 14px; border-bottom: 1px solid rgba(247,242,234,.06); }
.ws-detail-row:last-child { border-bottom: none; }
.ws-detail-row > .disc-icon { flex: none; width: 15px; height: 15px; color: var(--ready-orchid); }
.ws-detail-label { flex: none; width: 118px; font-size: 11.5px; font-weight: 600; color: var(--biz-ivory-50); }
.ws-detail-value { flex: 1; min-width: 0; font-size: 13.5px; color: var(--biz-ivory); overflow-wrap: break-word; }
/* PASS 2 — root cause of the "giant full-width stacked service-mode
   boxes" defect: .ws-mode-chip sets display:flex, which makes each chip
   a BLOCK-level flex container; as bare children of .ws-detail-value
   (not itself a flex row), each chip stacked on its own full-width line
   instead of sitting side by side. .ws-preview-modes-row gives them an
   explicit horizontal flex/wrap row (the same real compact-chip pattern
   the reference shows), scoped to the Preview panel's use only — the
   editable LEFT panel's own .ws-modes-row is untouched. */
.ws-preview-modes-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-detail-value.is-empty { color: var(--biz-ivory-30); font-style: italic; }
/* Strict Correction round (2026-08-21+), §3 — compact hours + a real
   expand toggle, never seven raw lines dumped into the row. */
.ws-hours-toggle { background: none; border: none; color: var(--ready-orchid-hi); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; margin-top: 3px; text-decoration: underline; text-underline-offset: 2px; display: block; }
.ws-hours-all { font-size: 11.5px; color: var(--biz-ivory-50); margin-top: 6px; line-height: 1.6; }
.ws-detail-row input, .ws-detail-row select {
  flex: 1; min-width: 0; background: rgba(255,255,255,.03); border: 1px solid rgba(247,242,234,.14); border-radius: 8px;
  padding: 7px 10px; color: var(--biz-ivory); font: inherit; font-size: 13px; outline: none;
}
.ws-detail-row input:focus, .ws-detail-row select:focus { border-color: var(--ready-orchid); box-shadow: 0 0 0 3px var(--ready-orchid-16); }

.ws-edit-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(139,115,214,.28);
  border-radius: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--ready-orchid-hi);
  cursor: pointer; transition: all .15s ease; flex: none;
}
.ws-edit-link:hover { background: rgba(139,115,214,.1); border-color: var(--ready-orchid); }
.ws-edit-link svg { width: 11px; height: 11px; }
.ws-edit-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── Pure veg / service mode toggle rows (§30 — ON is green, never
   amber; amber stays reserved for selection/active-nav elsewhere in this
   app, matching the same discipline the Post-Parse Clarity Pass round
   established for Menu) ── */
.ws-field-divider { height: 1px; background: rgba(247,242,234,.08); margin: clamp(6px,1vh,13px) 0; }
/* Early Account Screen round — replaces the Google/name/email/password
   block once account creation already happened at the earlier gate. */
.ws-signed-in-as {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(9px,1.3vh,13px) clamp(10px,1.4vw,14px);
  border: 1px solid rgba(52,211,153,.28); border-radius: 12px;
  background: rgba(52,211,153,.07); color: var(--biz-ivory);
}
.ws-signed-in-as svg { flex: none; width: 16px; height: 16px; color: var(--biz-green); }
.ws-signed-in-title { font-size: 13px; font-weight: 600; }
.ws-signed-in-sub { font-size: 12px; color: var(--biz-ivory-50); }
.ws-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(7px,1vh,13px); border: 1px solid rgba(139,115,214,.14); border-radius: 12px; background: rgba(255,255,255,.015); }
.ws-toggle-text { flex: 1; min-width: 0; }
.ws-toggle-title { font-size: 13.5px; font-weight: 600; color: var(--biz-ivory); display: flex; align-items: center; gap: 8px; }
.ws-toggle-title svg { width: 15px; height: 15px; color: var(--ready-orchid); }
.ws-toggle-sub { font-size: 11.5px; color: var(--biz-ivory-50); margin-top: 3px; line-height: 1.4; }
.ws-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex: none; }
.ws-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ws-switch-track {
  position: absolute; inset: 0; background: rgba(247,242,234,.14); border: 1px solid rgba(247,242,234,.18);
  border-radius: 999px; cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.ws-switch-track::before {
  content: ''; position: absolute; left: 2px; top: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--biz-ivory-70); transition: transform .18s ease, background .18s ease;
}
.ws-switch input:checked + .ws-switch-track { background: rgba(62,207,106,.22); border-color: var(--biz-green); }
.ws-switch input:checked + .ws-switch-track::before { transform: translateX(19px); background: var(--biz-green); }
.ws-switch input:disabled + .ws-switch-track { opacity: .55; cursor: default; }
.ws-toggle-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--biz-ivory-50); flex: none; width: 32px; text-align: right; }
.ws-toggle-row.is-on .ws-toggle-state { color: var(--biz-green); }

.ws-modes-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(6px,.9vh,10px); }
.ws-mode-chip {
  display: flex; align-items: center; gap: 7px; padding: clamp(7px,1.1vh,9px) 13px; border-radius: 999px; font: inherit;
  border: 1px solid rgba(247,242,234,.14); background: rgba(255,255,255,.02); font-size: 12px; font-weight: 600; color: var(--biz-ivory-70);
}
.ws-mode-chip.is-locked-on { border-color: rgba(62,207,106,.35); color: var(--biz-green); background: rgba(62,207,106,.08); }
.ws-mode-chip.is-on { border-color: rgba(62,207,106,.35); color: var(--biz-green); background: rgba(62,207,106,.08); cursor: pointer; }
.ws-mode-chip.is-off { cursor: pointer; }
.ws-mode-chip.is-off:hover { border-color: rgba(139,115,214,.3); color: var(--biz-ivory); }
/* 3-Screen Visual Reconstruction round (2026-08-21+) — the read-only
   Preview's own "off" service-mode chip (a <span>, never clickable) gets
   the plain neutral base style with no pointer cursor, distinct from the
   editable LEFT side's interactive .is-off (which IS clickable). */
.ws-mode-chip.is-readonly-off { cursor: default; }
.ws-mode-chip svg { width: 13px; height: 13px; }

/* Workspace Preview identity row (no hero photo to overlap, unlike
   Discover's — a plain badge + name row). */
.ws-preview-identity { display: flex; align-items: center; gap: 16px; padding: clamp(2px,.5vh,6px) clamp(16px,1.6vw,20px) 0; }
.ws-preview-badge {
  flex: none; width: clamp(48px,6vh,60px); height: clamp(48px,6vh,60px); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg,#241a0d,#0d0904); border: 2px solid rgba(139,115,214,.35);
  box-shadow: 0 0 0 1px rgba(139,115,214,.12); font-family: var(--biz-serif); font-size: clamp(19px,2.2vh,24px); font-weight: 500; color: var(--ready-orchid-hi);
}
.ws-preview-identity-text { min-width: 0; }
.ws-preview-name { font-family: var(--biz-serif); font-size: clamp(21px,2vw,27px); font-weight: 500; color: var(--biz-ivory); line-height: 1.2; }
.ws-preview-identity-text .disc-chip { margin-top: 6px; }

.ws-section-label { font-size: 12.5px; font-weight: 700; color: var(--biz-ivory-70); margin-top: clamp(7px,1.1vh,12px); margin-bottom: 2px; }

/* Final Compact One-Page + Submit CTA + Form State Preservation round
   (2026-08-22+), §15/§17-§25 — real measured overflow (document.
   documentElement.scrollHeight - window.innerHeight, headless Chromium,
   real Sorano-shaped seed data, fonts settled) before this block: 1920×
   1080 = 0px, 1536×864 = 39px, 1440×900 = 21px, 1366×768 = 97px. Every
   rule below is height-responsive (max-height, not max-width — §25
   explicitly requires this) and scoped to .ws-* classes only — never a
   shared/global rule (.disc-trust/--ob-shell-x/--ob-shell-top/the
   topbar/stepper stay completely untouched, per §2's frozen-positions
   rule) and never Discover's own already-scoped 920px block above (its
   own comment already says its rules are Discover-only). Global shell
   position is unaffected: only vertical breathing room WITHIN the
   Workspace panels shrinks. Target: 0px overflow (or functionally
   negligible sub-pixel rounding) at all four required viewports —
   verified after this change, see the round's own report. */
@media (max-height: 920px) {
  .ws-shell { padding-bottom: clamp(4px,.6vh,10px); gap: clamp(3px,.5vh,10px); }
  .ws-headline { margin-bottom: 2px; }
  .ws-login-body { padding: clamp(8px,1vh,14px) clamp(16px,1.8vw,22px) clamp(6px,.8vh,12px); }
  .ws-or-divider { margin: clamp(4px,.7vh,9px) 0; }
  .ws-field { margin-bottom: clamp(4px,.6vh,8px); }
  .ws-field label { margin-bottom: 3px; }
  .ws-field input { height: clamp(36px,4.2vh,42px); }
  .ws-field-divider { margin: clamp(4px,.6vh,9px) 0; }
  .ws-toggle-row { padding: clamp(5px,.7vh,10px); }
  .ws-modes-row { margin-top: clamp(4px,.6vh,7px); }
  .ws-section-label { margin-top: clamp(5px,.8vh,9px); }
  .ws-panel-head { padding: clamp(10px,1.4vh,14px) clamp(16px,1.8vw,22px) clamp(8px,1.1vh,11px); }
  .ws-panel-body { padding: 0 clamp(16px,1.8vw,22px) clamp(12px,1.5vh,16px); }
  .ws-preview-identity { padding: 0 clamp(16px,1.6vw,20px) 0; }
  .ws-detail-row { padding: clamp(5px,.7vh,9px) 14px; }
}
/* A genuinely short viewport (1366×768, the shortest required size)
   needs a second pass beyond the 920px block above — trims the same
   properties further rather than introducing new ones, plus the two
   remaining fixed-size elements (the Google button row and the trust
   strip, scoped to inside .ws-shell only) that the 920px pass didn't
   already reach. */
@media (max-height: 820px) {
  .ws-shell { gap: clamp(2px,.4vh,6px); }
  .ws-login-body { padding: clamp(6px,.8vh,10px) clamp(16px,1.8vw,22px) clamp(4px,.6vh,8px); }
  #wsGoogleWrap { margin-bottom: -2px; }
  .ws-field { margin-bottom: clamp(2px,.4vh,6px); }
  .ws-field label { margin-bottom: 2px; }
  .ws-field input { height: clamp(32px,3.7vh,38px); }
  .ws-toggle-row { padding: clamp(4px,.6vh,7px); }
  .ws-shell .disc-trust { padding: 5px 14px 5px 10px; }
  .ws-panel-head { padding-top: 8px; padding-bottom: 6px; }
  .ws-detail-row { padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 640px) {
  .ws-panel-title { font-size: 16px; }
  .ws-detail-row { flex-wrap: wrap; }
  .ws-detail-label { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Ready Page — recomposed in the Strict Correction round (2026-08-21+).
   App.step === 5, the FINAL completion experience. §10's own explicit
   balance: ~75% black/charcoal, ~15% amber/warm gold, ~10% orchid/blush
   — purple/pink appears ONLY as light (a completion halo, ambient bloom,
   card-edge reflection, CTA edge glow, a couple of tiny decorative
   points), never as a page-wide wash or a solid card surface. §11's
   3-part composition: TOP (stepper + compact hero) / MIDDLE (ONE
   dominant completion card + ONE compact business summary — no more
   than these two elements, no scattered floating boxes) / BOTTOM (one
   next-actions strip + the dominant CTA).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Off-white light theme (2026) — darkened for contrast on off-white. */
  /* Business-onboarding light-theme rounds (2026-09-03+) — the ONE
     shared purplish-lavender accent token, used selectively (never a
     flood colour) across Discover/Menu/Workspace/Ready: Step 1 of 3,
     Add it manually, the data-safety shield icon, search-result
     icons, Setup menu later, and small selected/focus micro-accents.
     Retuned from the previous darker orchid/violet to this lighter,
     more sophisticated lavender family — the dominant colour on
     these screens is now BLACK/charcoal (--biz-ivory below), never
     this accent. --ready-blush/--ready-plum kept for any leftover
     decorative Ready-card CSS (no longer rendered by renderReady()
     — kept, not deleted, matching this file's own precedent). */
  --ready-orchid: #A594E0;
  --ready-orchid-hi: #8B73D6;
  --ready-orchid-16: rgba(139,115,214,.16);
  --ready-orchid-40: rgba(139,115,214,.40);
  --ready-blush: #d1477f;
  --ready-plum: #6a3d80;
}

/* Global Positioning/Spacing Consistency round (2026-08-21+), §2/§3/§17 —
   #app fell back to .ob-shell's base padding (24px 16px 60px) here,
   whose 16px horizontal inset is nowhere close to the shared
   --ob-shell-x every other onboarding screen now uses — a second,
   independent confirmed source of the "KROX drifts per screen" defect
   (the first being Workspace's own former padding:0). Ready's own
   internal .ready-shell width/behavior is untouched — only the outer
   shell padding now matches. */
#app.ready-glow {
  background: linear-gradient(180deg, #050506 0%, #07070a 55%, #060608 100%);
  padding: var(--ob-shell-top) var(--ob-shell-x) 60px;
}
/* Two restrained layers — a small completion-halo bloom high on the page
   (behind the hero/check badge) and a faint low-page spill. Both capped
   at low opacity/small radius on purpose: the page must read as
   charcoal FIRST, purple/pink second, per §10's own 75/15/10 target —
   the previous round's version covered far more surface area than this. */
#app.ready-glow::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 32% 26% at 50% 6%, rgba(139,115,214,.09) 0%, transparent 68%),
    radial-gradient(ellipse 24% 20% at 84% 4%, rgba(139,115,214,.04) 0%, transparent 65%);
}
#app.ready-glow::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(216,115,214,.07), transparent 58%),
    radial-gradient(ellipse at 90% 100%, rgba(139,115,214,.045), transparent 55%),
    linear-gradient(to bottom, transparent 0%, rgba(4,3,6,.12) 40%, rgba(3,2,5,.5) 100%);
  filter: blur(2px);
}

/* Horizontal padding moved to the shared #app.ready-glow shell above (one
   source, matching the topbar) — max-width/vertical spacing unchanged,
   a disclosed exception to the 1680px width every other screen now
   shares: Ready is a completion/summary screen, deliberately narrower
   per its own established "3-part composition" design (Ready Page Final
   Completion round), not a working two-column form like Discover/
   Workspace — widening it wasn't asked for and risks that design's own
   tuned proportions for no requested benefit. */
.ready-shell { max-width: 1180px; margin: 0 auto; padding: clamp(12px,1.8vh,20px) 0 40px; position: relative; z-index: 1; width: 100%; }

.ready-hero { text-align: center; max-width: 620px; margin: clamp(4px,1vh,10px) auto clamp(18px,2.2vh,24px); }
.ready-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ready-orchid-hi); margin-bottom: 8px;
}
.ready-hero-eyebrow svg { width: 12px; height: 12px; }
.ready-headline { font-family: var(--biz-serif); font-weight: 440; letter-spacing: -.02em; font-size: clamp(26px,3.2vw,38px); line-height: 1.1; color: var(--biz-ivory); }
.ready-headline .ready-accent {
  background: linear-gradient(120deg, var(--ready-orchid-hi) 0%, var(--ready-blush) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ready-hero-sub { font-size: clamp(12.5px,1.4vh,14px); line-height: 1.5; color: var(--biz-ivory-70); margin-top: 10px; max-width: 460px; margin-left: auto; margin-right: auto; }

/* ── Middle zone: ONE dominant card + ONE compact summary — §11 ── */
.ready-main-row { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: clamp(14px,1.6vw,20px); align-items: stretch; }
@media (max-width: 980px) { .ready-main-row { grid-template-columns: 1fr; } }

.ready-main-card {
  position: relative; overflow: hidden; border-radius: 20px; display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(20,17,16,.95), rgba(9,8,8,.98));
  border: 1px solid rgba(196,126,38,.22);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(139,115,214,.03) inset;
  padding: clamp(20px,2.6vh,28px) clamp(20px,2.4vw,28px);
}
/* §13 — an abstract KROX completion visual (soft architectural glow +
   an oversized, barely-visible brand mark), built as background texture
   CONTAINED inside the dominant card — never a separate floating/empty-
   looking box. When a real, resolvable business photo exists
   (bp.logo_url — the merchant-uploaded photo persisted since the
   Discover Final Consolidation round, 2026-08-21+), .ready-main-card-photo
   replaces this exact layer as a dimmed, masked cover image at the same
   footprint (see renderReadyMainCard()), never a "cutout." */
.ready-main-card::before {
  content: ''; position: absolute; top: -25%; right: -8%; width: 55%; height: 85%; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 60% 30%, rgba(139,115,214,.11), transparent 70%);
}
.ready-main-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 36% 46% at 6% 104%, rgba(139,115,214,.05), transparent 62%);
}
.ready-main-card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.85) 55%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.85) 55%, transparent 100%);
}
.ready-main-card-body { position: relative; z-index: 1; }

.ready-badge-check {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,159,207,.07); border: 1.5px solid rgba(255,159,207,.32);
  box-shadow: 0 0 0 5px rgba(139,115,214,.05); color: var(--ready-orchid-hi); margin-bottom: 14px;
}
.ready-badge-check svg { width: 19px; height: 19px; }
.ready-welcome-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ready-welcome-title { font-family: var(--biz-serif); font-size: clamp(19px,1.9vw,24px); font-weight: 500; color: var(--biz-ivory); }
.ready-welcome-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--biz-green); background: rgba(62,207,106,.10); border: 1px solid rgba(62,207,106,.32);
  padding: 6px 12px; border-radius: 999px;
}
.ready-welcome-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--biz-green); }
.ready-welcome-sub { font-size: 13px; line-height: 1.6; color: var(--biz-ivory-70); margin-top: 10px; max-width: 460px; }

/* Ready Completion Simplification round (2026-08-22+), §14 — 3 real
   setup stages (Business profile/Menu/Workspace), not 4 — Settings is
   always-editable-later, not a completed onboarding milestone. */
.ready-checklist { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(247,242,234,.07); }
@media (max-width: 720px) { .ready-checklist { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ready-check-item { display: flex; align-items: flex-start; gap: 9px; }
.ready-check-dot {
  flex: none; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(139,115,214,.08); border: 1px solid rgba(139,115,214,.24); color: var(--ready-orchid-hi); margin-top: 1px;
}
.ready-check-dot svg { width: 12px; height: 12px; }
.ready-check-title { font-size: 12px; font-weight: 700; color: var(--biz-ivory); line-height: 1.3; }
.ready-check-sub { font-size: 10.5px; color: var(--biz-ivory-50); margin-top: 2px; line-height: 1.35; }
.ready-check-sub.is-attention { color: var(--biz-danger-hi); font-weight: 600; }

/* ── Compact business summary (right) — §15: summarize, don't replay
   Discover. No address/phone/website/hours here (already shown in full
   at Workspace) — business identity + operational state only. ── */
.ready-summary-card {
  background: linear-gradient(165deg, rgba(18,16,17,.86), rgba(8,7,7,.92));
  border: 1px solid rgba(139,115,214,.13); border-radius: 18px; padding: clamp(18px,2vh,22px) clamp(18px,1.8vw,22px);
  display: flex; flex-direction: column;
}
.ready-summary-title { font-family: var(--biz-serif); font-size: 15.5px; font-weight: 500; color: var(--biz-ivory); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.ready-summary-title svg { width: 15px; height: 15px; color: var(--ready-orchid-hi); flex: none; }
.ready-summary-rows { display: flex; flex-direction: column; }
.ready-summary-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(247,242,234,.06); }
.ready-summary-row:last-child { border-bottom: none; }
.ready-summary-row > svg { flex: none; width: 13px; height: 13px; color: var(--ready-orchid); margin-top: 2px; }
.ready-summary-label { flex: none; width: 88px; font-size: 10.5px; font-weight: 600; color: var(--biz-ivory-50); }
.ready-summary-value { flex: 1; min-width: 0; font-size: 12px; color: var(--biz-ivory); line-height: 1.45; overflow-wrap: break-word; }
.ready-summary-value.is-empty { color: var(--biz-ivory-30); font-style: italic; }
/* Ready Completion Simplification round (2026-08-22+), §18 — the ONE
   business-verification note now lives here, inside the summary card,
   as a single subtle inline line — never its own dedicated footer
   section/action card (the previous round's .ready-footer-note, removed
   below along with the collapsed tenant-ID "support details" disclosure
   — both were exactly the "low-value footer clutter" this round's brief
   asks to remove; Need help? already exists globally in the topbar). */
.ready-summary-note { display: flex; align-items: flex-start; gap: 8px; font-size: 10.5px; line-height: 1.5; color: var(--biz-ivory-50); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(247,242,234,.06); }
.ready-summary-note svg { flex: none; width: 12px; height: 12px; color: var(--ready-orchid); margin-top: 1px; }

/* ── Bottom zone: dominant CTA row — §5/§20/§21: primary + secondary
   only, no next-actions chip strip. ── */
.ready-bottom { margin-top: clamp(14px,1.8vh,20px); }
.ready-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* §17 — amber base with a VERY subtle blush/orchid edge light (a small
   secondary box-shadow on one side only) and a soft warm shadow —
   deliberately NOT a diagonal 3-stop candy gradient across the whole
   button face (the previous round's version). */
.ready-cta-primary {
  flex: 1 1 240px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--biz-sans); font-size: 14.5px; font-weight: 700; padding: 15px 22px; border-radius: 13px;
  border: none; cursor: pointer; color: var(--biz-ink); text-decoration: none;
  background: var(--biz-ivory);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.4);
  transition: all .18s ease;
}
.ready-cta-primary:hover { filter: brightness(1.12); box-shadow: 0 16px 32px -14px rgba(0,0,0,.45); transform: translateY(-1px); }
.ready-cta-primary svg { width: 16px; height: 16px; }
.ready-cta-secondary {
  flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--biz-sans); font-size: 13px; font-weight: 600;
  color: var(--biz-ivory-70); background: rgba(255,255,255,.03); border: 1px solid rgba(247,242,234,.14);
  border-radius: 13px; padding: 14px 20px; cursor: pointer; text-decoration: none; transition: all .18s ease;
}
.ready-cta-secondary:hover { border-color: rgba(139,115,214,.28); color: var(--biz-ivory); }
.ready-cta-secondary svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .ready-welcome-title-row { flex-direction: column; align-items: flex-start; }
  .ready-summary-row { flex-wrap: wrap; }
  .ready-summary-label { width: 100%; }
  .ready-next-chip { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Build/Menu Screen (2026-08-20) — App.step === 1. Reference-driven
   implementation; see this round's own report for the mockup-vs-live
   comparison. Reuses .disc-topbar/.disc-toprail* (generic, not scoped to
   #discoverScreen) for the identical KROX/step-rail/help/save chrome.
   Unlike #discoverScreen, this screen allows normal PAGE scrolling (§17
   of the brief) — no 100dvh grid lock, no forced single-viewport fit.
   ══════════════════════════════════════════════════════════════════════ */
#buildScreen {
  display: none; background: var(--biz-ink); color: var(--biz-ivory);
  font-family: var(--biz-sans); position: relative; isolation: isolate;
}
#buildScreen > * { position: relative; z-index: 1; }
/* Return Position + Scrollbar Stability round (2026-08-21+), §2/§3 — the
   padding that positions the topbar/nav-row now lives HERE, on the
   full-width outer screen container, instead of on .build-shell below —
   root cause of the confirmed Return/KROX-logo x drift at wide viewports
   (>=1648px, i.e. 1520+128): .build-shell used to carry BOTH its own
   max-width:1520 cap AND this padding on the SAME element, so at a
   viewport wide enough for the cap to actually bind (e.g. 1920x1080),
   .build-shell's own box first centers itself (auto margin) within the
   full viewport, THEN applies its padding INSIDE that already-centered,
   already-capped box — shrinking the real content/topbar/nav-row width
   to 1520-128=1392px with an extra, compounding 64px of left offset
   relative to Discover/Workspace, which each apply padding on a
   FULL-WIDTH outer (uncapped) container and let their topbar/.ob-nav-row
   do their OWN, separate max-width:1520+margin:auto centering — never
   two width-constraints compounding on one element. This screen now
   matches that same two-layer pattern exactly. */
#buildScreen.is-active { display: block; min-height: 100dvh; padding: var(--ob-shell-top) var(--ob-shell-x) 60px; }
body:has(#buildScreen.is-active) { overflow: visible; }

/* ── Layer 1 (base), Layer 2 (::before ambient), Layer 3 (::after floor/
   vignette) — exactly three layers, per this round's own explicit spec.
   No grids, no diagonals, no mirrored/duplicated imagery, no decorative
   SVGs, no page-level backdrop-filter.
   Global Positioning/Spacing Consistency round (2026-08-21+), §14 — both
   layers were position:fixed (viewport-pinned), the same root cause
   confirmed and fixed on Workspace this session: as Menu's real content
   grows taller than one viewport and the page scrolls, a fixed glow
   stays pinned to the screen's own bottom 35% and can paint over
   whatever content has scrolled into that region. Now position:absolute
   (scoped to #buildScreen itself, anchored to the whole screen/shell,
   not any individual panel — never moves because one state is taller
   than another) with isolation:isolate on #buildScreen guaranteeing its
   real children (z-index:1 already) stay above it regardless. ── */
#buildScreen {
  background: linear-gradient(180deg, #050505 0%, #080706 55%, #080604 100%);
}
#buildScreen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 22% 92%, rgba(237,146,34,.13) 0%, rgba(165,92,19,.055) 28%, transparent 58%),
    radial-gradient(ellipse at 78% 88%, rgba(203,117,20,.075) 0%, transparent 52%);
}
#buildScreen::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 25% 100%, rgba(243,154,48,.14), rgba(176,90,18,.035) 35%, transparent 63%),
    radial-gradient(ellipse at 75% 100%, rgba(220,128,25,.075), transparent 58%),
    linear-gradient(to bottom, transparent 0%, rgba(5,4,3,.10) 25%, rgba(3,3,3,.55) 100%);
  filter: blur(2px);
}

/* padding moved to #buildScreen.is-active (above) — this element now only
   caps/centers its OWN remaining content (title row + table/list), the
   same role .disc-topbar/.disc-grid already play inside Discover's own
   full-width, already-padded outer container. */
.build-shell { max-width: 1520px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════
   Review Screen (2026-08-20) — App.step === 2. Same shell/background/
   token system as #buildScreen immediately above (§25 of the brief: no
   new gradient/layout experiments this round) — reuses .build-shell/
   .build-title-row/.build-headline/etc. wholesale. The only thing new
   here is the outer #reviewScreen container itself; renderReview()'s own
   card markup (rendered inside #reviewStepContent) is completely
   untouched.
   ══════════════════════════════════════════════════════════════════════ */
#reviewScreen {
  display: none; background: var(--biz-ink); color: var(--biz-ivory);
  font-family: var(--biz-sans); position: relative;
}
#reviewScreen > * { position: relative; z-index: 1; }
#reviewScreen.is-active { display: block; min-height: 100dvh; }
body:has(#reviewScreen.is-active) { overflow: visible; }
#reviewScreen {
  background: linear-gradient(180deg, #050505 0%, #080706 55%, #080604 100%);
}
#reviewScreen::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 22% 92%, rgba(237,146,34,.13) 0%, rgba(165,92,19,.055) 28%, transparent 58%),
    radial-gradient(ellipse at 78% 88%, rgba(203,117,20,.075) 0%, transparent 52%);
}
#reviewScreen::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 35%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 25% 100%, rgba(243,154,48,.14), rgba(176,90,18,.035) 35%, transparent 63%),
    radial-gradient(ellipse at 75% 100%, rgba(220,128,25,.075), transparent 58%),
    linear-gradient(to bottom, transparent 0%, rgba(5,4,3,.10) 25%, rgba(3,3,3,.55) 100%);
  filter: blur(2px);
}