/* Comfort Builder (#quiz, section 05) desktop side-by-side layout
   (round 3, 2026-09-09, codex desktop alignment unification, spec
   2026-09-09-suburbs-and-process-image.md). Robin: "side by side,
   reduced size on desktop, more aligned" -- #quizBox was CENTERED at
   l=410 w=620, ignoring the system's x=752 divide the other 3 sections
   now share; .quiz-result sat display:none until answered.

   Served from public/ like the other three round-2 files, so it never
   touches the Vite-merged bundle. HARD CONSTRAINT (conversion-critical
   live widget): zero JS changes, zero markup changes inside #quizBox,
   .quiz-result or #temperaturePreference -- every id/class main.js
   looks up stays byte-identical. The ONE markup change anywhere is a
   single new wrapper div in index.html, `.quiz-columns`, added AROUND
   #temperaturePreference and #quizBox (not inside either).

   DESIGN NOTE / deviation from the literal brief, flagged not silently
   resolved: the brief described "#quizBox fills the 528 column", which
   read literally suggests quizBox's own outer box should be exactly
   528px wide, with `.quiz-result` escaping it via `position:absolute`
   to reach the second 528px column. A first pass built exactly that
   (measured, see spec Records Round 3) and found a severe, measured bug
   with it: `.quiz-result` is position:absolute, so it does NOT
   contribute to its container's flow height -- at the "populated
   result" step every `.quiz-step` hides and quizBox itself SHRINKS to
   just its chip+progress bar (~140-200px), while the populated result
   panel (kicker/name/price/summary/blurb/5 features/note/CTA/restart)
   measured 814-913px tall depending on width. A fixed min-height large
   enough to cover the worst case at every width either wastes enormous
   space in the common (rest/shorter) states or, if trimmed to look
   reasonable, silently overlaps `.packages` below by 75-173px --
   exactly the overlap risk the brief itself flagged as a reason to skip
   sticky. No fixed CSS number is safe here because the required height
   varies with viewport width (narrower columns wrap the blurb/features
   text onto more lines) in a way plain CSS can't measure without JS,
   which is out of scope.

   Rebuilt instead so `#quizBox` itself spans the FULL content-grid
   width (both 528px columns + the 64px gutter, matching the OTHER
   round-2 sections' actual content-grid width) and becomes an internal
   2-column CSS Grid: the steps stack (chip/progress/active step) in
   its own column 1 (528px, matching the system's column width exactly)
   and `.quiz-result` sits in column 2 (528px) as a REAL grid item, not
   an escapee -- CSS Grid then auto-sizes quizBox's own height to
   whichever column is taller, at every width and every quiz state, with
   zero manual guessing and zero overlap risk. `#temperaturePreference`
   stays a separate element ABOVE quizBox, width-capped to 528px so it
   visually reads as the top of the same left column; `.quiz-result`
   necessarily starts level with quizBox's own top (chip/progress), not
   with temperaturePreference's top above it -- a small, deliberate
   trade of pixel-perfect top alignment across the whole left stack for
   an approach with no overlap failure mode. Verified in both directions
   (rest state at 900/1024/1440, and post-completion with the
   longest-text tier) -- see spec Records Round 3.

   `.builder-scenario`'s own margin (16px 0, both sides) lives in the
   Vite-merged bundle (src/scenario-hero.css) -- untouchable per the
   same rule as styles.css. Overridden here via the more specific
   `#quiz .builder-scenario` selector (ID + class beats the bundle's
   bare class), never editing the source file itself. */
@media (min-width: 900px) {
  #quiz .eyebrow { margin: 0 0 16px; }
  #quiz > .container > h2 { width: 100%; max-width: 760px; margin: 0; }
  #quiz .builder-scenario { max-width: 640px; margin: 16px 0 0; }

  .quiz-columns { margin-top: 48px; }
  /* Visually reads as the top of the left column even though it sits
     outside quizBox's own grid -- see design note above. Width is
     expressed as calc(50% - 32px) of `.quiz-columns`' own width (W),
     NOT a fixed 528px -- #quizBox's internal grid tracks are FLUID
     (minmax(0,1fr), matching the system: 440px at a 1024 container,
     528px only once the container hits its 1200px cap). A fixed 528px
     here would make temperaturePreference WIDER than quizBox's own
     left-column content at any viewport below ~1200px (measured: 528
     vs 440 at 1024) -- the exact misalignment this round exists to fix.
     Same formula as the other three sections' content-grid columns:
     column width = W/2 - 32, for an equal 1fr/1fr grid with a 64px
     gap. */
  #temperaturePreference { max-width: calc(50% - 32px); }

  /* #quizBox: was max-width:620px, centered via margin:0 auto in the
     bundle's .quiz-box rule (overridden here, never edited there). Now
     spans the full content-grid width (528+64+528=1120px at 1440) and
     becomes the actual system content grid for this section -- same
     minmax(0,1fr) minmax(0,1fr)/64px-gap shape as #process/#onsite-
     quote/#service-areas' own content grids, just owned by quizBox
     itself instead of a sibling-level wrapper (required: see the design
     note above on why .quiz-result can't be an independent grid item of
     a wrapper it isn't a DOM child of). padding trimmed modestly (was a
     clamp maxing at 3rem/48px; fixed at 1.75rem/28px, the clamp's own
     floor, so nothing shrinks below what already worked at small
     viewports) -- the room-tiles grid still gets its own unconditional
     min-height:44px tiles from styles.css, untouched.
     `.quiz-box`'s own `position:relative; overflow:hidden` (bundle) is
     left completely alone -- nothing needs to escape quizBox's box in
     this design, so there is no reason to touch either property. */
  /* Padding is VERTICAL ONLY on the grid container itself -- horizontal
     padding moves onto each content piece individually (below) instead,
     so the two grid TRACKS measure the system's exact 528px each (a
     uniform padding on #quizBox would eat into the grid's own content-
     box from both sides, narrowing both tracks below 528px and shifting
     column 2 short of x=752 -- measured and caught before shipping, see
     spec Records Round 3). */
  #quizBox {
    max-width: none;
    width: 100%;
    padding: 1.25rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }
  /* Left column: chip, progress bar, and whichever single .quiz-step is
     currently .is-active (the other two are display:none and drop out
     of grid placement entirely, so this always resolves to exactly 3
     occupied rows in column 1, regardless of which step is active).
     Horizontal padding restores the card's own inset for this content
     (was carried by #quizBox's own padding pre-round-3). Round 3b: 28px
     -> 20px, the same trimmed rhythm as #quizBox's own vertical padding
     and .quiz-result's below. */
  #quiz .quiz-chip, #quiz .quiz-progress, #quiz .quiz-step { grid-column: 1; padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Right column: ALWAYS VISIBLE on desktop (Robin's ask -- shows the
     existing empty state, "See your recommendation" + the existing
     invite-to-answer blurb, both already the DEFAULT markup content, no
     JS/markup change needed). `grid-row: 1 / 4` spans exactly the 3
     conceptual left-column rows (chip, progress, active step).

     Tried `grid-row: 1 / -1` (span-to-last-implicit-row) first -- it is
     the textbook-correct way to express this and IS what the comment
     above used to say -- but it produces a real, measured Chromium
     layout bug here: when a multi-row-spanning item's own content needs
     more space than the rows it spans naturally provide, the browser
     distributes the shortfall across those rows even when the spanning
     item's total need is SMALLER than their combined natural height (62
     + 22 + 299 = 383px of natural row height vs quiz-result's own
     342px) -- observed as a ~280px empty gap silently opening up
     between the chip and the progress bar, not anywhere near
     quiz-result itself. Reproduced consistently, fixed by spanning an
     EXPLICIT line range (1/4, matching the exactly-3-rows structure
     this component always has) instead of the open-ended "-1" --
     confirmed the gap disappears and quizBox's height returns to
     exactly its pre-round-3 495px at rest (see spec Records Round 3).

     `#quiz` prefix is load-bearing, not decorative: the bundled
     `.quiz-step, .quiz-result { display: none }` rule (src/styles.css)
     is the SAME specificity (0,1,0) a bare `.quiz-result` rule would be,
     and the bundle's own <link> is injected AFTER every public/ CSS
     file in <head> (confirmed in dist/index.html) -- with a specificity
     tie, source order decides and the bundle would win, silently
     re-hiding the panel. `#quiz .quiz-result` (1,1,0) beats it outright
     regardless of link order. `.quiz-result.is-active`'s quizIn/
     quizInBack animation is completely untouched -- it still replays
     exactly as before the instant main.js adds `.is-active`. */
  #quiz .quiz-result { display: block; grid-column: 2; grid-row: 1 / 4; padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Round 3b (2026-09-09): "1093 -> 1056 is a rounding error" -- the
     size-reduction half of Robin's original ask, delivered properly
     this round by trimming the INTERNAL spacing this component owns
     (margins/padding on chip, progress bar, quiz-q, room-tiles/hint,
     temperaturePreference-to-quizBox gap, and the result column's own
     empty-state spacing), all >=900px only, all in this file. None of
     these selectors' rules exist in styles.css -- every one below
     overrides a bundle default via a more specific `#quiz`-scoped
     selector, same pattern as every other override in this file.
     Room-tile height is NOT touched here beyond its own vertical
     padding -- styles.css's unconditional `min-height: 44px` on
     `.room-tile` is untouched and still the hard floor; only the
     PADDING that pushes single-line tiles well above that floor is
     trimmed (measured before/after in spec Records Round 3b). */

  /* temperaturePreference -> quizBox gap: was ~20px (a `<summary>`-
     driven value from src/scenario-hero.css's `.temperature-preference
     summary` rule, not #temperaturePreference's own margin -- an ID
     selector overriding it directly is simpler and more reliable than
     chasing which descendant actually produced the old gap). */
  #temperaturePreference { margin-bottom: 10px; }

  /* .quiz-chip: was padding 8px/28px (v/h) + margin-bottom 22.4px ->
     total row space ~84px. Target <=48px per Robin's own ceiling.
     Genuine floor here: `.quiz-chip-edit` (the "Change" button, a real
     tap target) carries its own unconditional `min-height: 44px`
     (styles.css, untouched -- never reduced) and `.quiz-chip` is a flex
     row with `align-items:center`, so the chip's OWN height can never
     drop below 44px + its own padding regardless of how far that
     padding is trimmed. Trimmed to the practical floor (0.15rem/2.4px
     padding, 0.25rem/4px margin-bottom) -- chip row lands at ~51px
     (44px button + ~7px combined padding), a few px over the 48px
     ceiling but the closest achievable without shrinking a genuine
     touch target below 44px (measured, see spec Records Round 3b). */
  #quiz .quiz-chip { padding-top: 0.15rem; padding-bottom: 0.15rem; margin: 0 auto 0.25rem; }
  /* .quiz-progress: margin-bottom was 2rem/32px. */
  #quiz .quiz-progress { margin-bottom: 0.5rem; }
  /* .quiz-q: margin-bottom was 1.5rem/24px. */
  #quiz .quiz-q { margin-bottom: 0.5rem; }
  /* room-tiles/hint: margin-bottom was 1rem/16px and 1.2rem/19.2px.
     Tile padding trimmed vertically only (was 0.7rem/11.2px) -- the
     unconditional min-height:44px floor (styles.css, untouched) still
     applies to every tile regardless, so single-line tiles never drop
     below 44px no matter how far padding is trimmed; two-line tiles
     (content-driven, e.g. "Kitchen and dining") shrink from the padding
     trim but stay well above 44px on their own text height alone. */
  #quiz #roomTiles { margin-bottom: 0.5rem; }
  #quiz .room-tile { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  #quiz #roomHint { margin-bottom: 0.5rem; }

  /* .quiz-result column: "pads trimmed to match the new 20px rhythm" --
     padding-left/right already moved to 1.25rem above; these are the
     VERTICAL spacing values between the result's own pieces. Blurb
     specifically called out ("empty-state blurb spacing tightened") --
     was 1.6rem/25.6px. Kicker/features/restart trimmed to match; note's
     own -0.8rem top margin is a deliberate pre-existing visual
     correction (spaces the note off the item above it precisely) and is
     left untouched, only its bottom margin is trimmed. */
  #quiz .quiz-result-kicker { margin-bottom: 0.4rem; }
  #quiz .quiz-result-blurb { margin-bottom: 0.75rem; }
  #quiz .quiz-result-features { margin-bottom: 0.75rem; }
  #quiz .quiz-result-note { margin-bottom: 0.75rem; }
  #quiz .quiz-restart { margin-top: 0.5rem; }

  /* Restart bug, found and fixed while testing this round (not asked
     for directly, but a direct consequence of making .quiz-result
     always-visible): main.js's #quizRestart handler resets the QUIZ
     STATE (answers, room tiles, dial stays -- intentional, not a quiz
     answer) but never clears #quizResultName/#quizResultPrice/
     #builderSummary/#quizResultBlurb/#quizResultFeatures' text/children
     -- harmless before this round (the whole panel was display:none
     whenever not .is-active, so stale text was invisible), but a real
     bug now: after Restart, the previous completion's name/price/
     summary/blurb/feature-list would sit there, visibly WRONG, until
     the visitor finishes the quiz again. Zero JS changes allowed, so
     this is fixed entirely in CSS: the populated-only fields are
     hidden whenever `.quiz-result` is not `.is-active` (restores the
     pristine empty look, indistinguishable from true first-visit rest,
     since price/summary/features start empty anyway); name and blurb
     use a `visibility:hidden` + absolutely-positioned `::before`
     content swap (a generated pseudo-element, not a DOM/markup change)
     to show the exact original default strings from the markup instead
     of whatever stale text main.js left there. */
  #quiz .quiz-result:not(.is-active) #quizResultPrice,
  #quiz .quiz-result:not(.is-active) #builderSummary,
  #quiz .quiz-result:not(.is-active) #quizResultFeatures {
    display: none;
  }
  #quiz .quiz-result:not(.is-active) #quizResultName,
  #quiz .quiz-result:not(.is-active) #quizResultBlurb {
    visibility: hidden;
    position: relative;
  }
  #quiz .quiz-result:not(.is-active) #quizResultName::before {
    content: "See your recommendation";
    visibility: visible;
    position: absolute;
    inset: 0;
  }
  #quiz .quiz-result:not(.is-active) #quizResultBlurb::before {
    content: "Answer the three questions above and we will match you to the right range and price.";
    visibility: visible;
    position: absolute;
    inset: 0;
  }
}