/* The reload mark on the flying prompt is phones only; desktop keeps the original two-part card. */
.cx-handoff-go,.cx-brief-go{display:none}

/* Phones: one 14px gutter from the screen edge for every section, in the story and below it.
   Loaded last; the earlier layers set 14–26px insets (some with !important), so these do too. */
@media(max-width:700px){
 .hero-copy{padding-left:14px!important;padding-right:14px!important}
 .cx-hero-kicker,.cx-hero-intro,.cx-type-a,.coordinate-left,.live-room-caption,.detail-view-controls,.story-sticky>.chapter-action{left:14px!important}
 .coordinate-right,.photo-origin,.preview-control,.editor-view-label,.cx-bignum{right:14px!important}
 .studio-context,.studio-field,.stage-tools,.room-receipt,.story-bottom,.flow-route,.chapter-track,.growth-progress,.growing-words,.detail-field,.detail-rail,
 .story-sticky .share-artifact,.story-sticky .share-artifact.active{left:14px!important;right:14px!important}
 .story-sticky .story-copy,.story-sticky[data-phase=details] .story-copy{left:14px!important;width:calc(100% - 28px)!important}
 /* Photo & render: the comparison is the subject, so the 3D is hidden and the comparison fills the
    width, centred — but kept below the section title and not so tall it covers it. */
 .story-sticky[data-phase=render] .inline-editor{opacity:0!important;visibility:hidden!important}
 .story-sticky .render-stage,.story-sticky .render-stage.active{left:50%!important;right:auto!important;top:34%!important;transform:translateX(-50%)!important;width:calc(100vw - 28px)!important;max-width:none!important}
 .story-sticky .render-comparison{aspect-ratio:1.5!important;max-height:46svh!important;margin:0 auto!important}
 .story-sticky .scene-footnote{left:14px!important}
 .cx-spot.is-prompt .cx-prompt{max-width:calc(100vw - 28px)!important}
 .cx-start,.cx-faq,.cx-legal{padding-left:14px!important;padding-right:14px!important}
 .cx-finale-copy,.cx-offer,.cx-finale-foot{left:14px!important;right:14px!important}
}

/* Phones, the story chapters: the words start just under the bar, and a title fills the line before it wraps. */
@media(max-width:700px){
 .story-sticky .story-copy,.story-sticky[data-phase] .story-copy{top:28px!important}
 .story-sticky .story-copy h2,.story-sticky[data-phase] .story-copy h2{max-width:none!important;text-wrap:wrap}
 /* The room dimensions card sits low, just above the two-line footnote, which rests just above the dock;
    its padding and figures are no larger than the card needs. */
 .story-sticky .scene-footnote{bottom:70px!important}
 .story-sticky .stage-tools{bottom:116px!important}
 .story-sticky .phase-tool.space-tools.active:not(.shopping-tools){padding:14px 16px!important;border-radius:22px!important}
 .story-sticky .space-tools>.mono{margin:0 0 8px!important}
 .story-sticky .space-metrics{row-gap:10px!important;column-gap:16px!important}
 .story-sticky .space-metrics>span{gap:4px!important;padding-top:8px!important}
 .story-sticky .space-metrics b{font-size:19px!important}
 .story-sticky .space-metrics b em{font-size:11px!important}
 /* Shopping: the favourites card is only its total, so the room above stays in view. */
 .story-sticky .shopping-tools.active>.mono,.story-sticky .shopping-tools.active #shopping-summary{display:none!important}
 .story-sticky .shopping-tools.active .shopping-rail-total{padding-top:0!important;border-top:0!important}
 /* story-phone.js places the room: offset and scale per chapter. */
 .story-sticky .inline-editor{translate:var(--cx-room-x,0px) var(--cx-room-y,0px);scale:var(--cx-room-s,1);transition:translate .6s cubic-bezier(.4,0,.2,1),scale .6s cubic-bezier(.4,0,.2,1)}
 /* Auto design: the prompt card sits under the room, full width, its words wrapping; spark, words and button share one centre line. */
 /* Until the room fit has landed (and --cx-prompt-y is known) the prompt stays hidden, so it never
    flashes over the 3D at its raw projected point before snapping below the room. */
 .story-sticky[data-phase=auto]:not(.cx-room-fit) .cx-spot.is-prompt{opacity:0!important;visibility:hidden!important;pointer-events:none}
 .story-sticky.cx-room-fit .cx-spot.is-prompt{left:0!important;top:var(--cx-prompt-y)!important;transition:opacity .5s,top .6s cubic-bezier(.4,0,.2,1)}
 .story-sticky.cx-room-fit .cx-spot.is-prompt .cx-prompt{left:50vw!important;top:0!important;width:calc(100vw - 28px)!important;max-width:none!important;height:auto!important;min-height:48px;align-items:center!important;gap:10px!important;padding:6px 6px 6px 16px!important;border-radius:24px!important;text-align:left}
 .story-sticky.cx-room-fit .cx-spot.is-prompt .cx-prompt:before,.story-sticky.cx-room-fit .cx-spot.is-prompt .cx-prompt:after{display:none}
 .story-sticky.cx-room-fit .cx-prompt-spark{flex:none;line-height:1}
 .story-sticky.cx-room-fit .cx-prompt-text{flex:1 1 auto;min-width:0!important;padding:4px 0;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3!important}
 .story-sticky.cx-room-fit .cx-prompt-go{flex:none!important;width:36px!important;height:36px!important}
 /* Room details: the list shows one mapped row at a time, so the card is content-height and the
    3D room keeps the rest of the screen. The rail hugs its single row just under the room. */
 .story-sticky.cx-room-fit[data-phase=details] .detail-rail{top:var(--cx-rail-top)!important;bottom:auto!important;height:auto!important;max-height:calc(100svh - var(--cx-rail-top) - 48px)!important;transition:top .6s cubic-bezier(.4,0,.2,1)}
 /* No floating dock through Empty 3D / Floor plan / Elevations / Auto design / Room details, so the
    footnote rests at the very bottom and the dimensions card drops down to use the reclaimed height. */
 .story-sticky[data-phase=empty] .scene-footnote,.story-sticky[data-phase=floorplan] .scene-footnote,.story-sticky[data-phase=elevations] .scene-footnote,.story-sticky[data-phase=auto] .scene-footnote,.story-sticky[data-phase=details] .scene-footnote{bottom:16px!important}
 .story-sticky[data-phase=empty] .stage-tools,.story-sticky[data-phase=floorplan] .stage-tools,.story-sticky[data-phase=elevations] .stage-tools{bottom:64px!important}
 /* Change chapters (Adjust / Furniture / Colour / Materials): the swatches float over the room, so
    the 3D fills more of the screen height and is centred across the full width. */
 .story-sticky[data-phase=adjust] .inline-editor,.story-sticky[data-phase=furniture] .inline-editor,.story-sticky[data-phase=colour] .inline-editor,.story-sticky[data-phase=materials] .inline-editor{left:0!important;right:0!important;top:18%!important;bottom:15%!important;transform-origin:50% 50%!important}
 /* The lines from the room to the list appear once the Design details card is in place. */
 .story-sticky.cx-mapping-wait .detail-leaders{opacity:0;pointer-events:none}
 /* Each row: name, then dimensions, then the finish with its colour dot, always stacked so a switch does not jump. */
 .detail-callout{grid-template-columns:26px minmax(0,1fr)!important;column-gap:12px!important;row-gap:3px!important;align-items:start!important}
 .detail-callout .detail-description{display:contents}
 .detail-callout .detail-number{grid-column:1;grid-row:1/span 3;align-self:center}
 .detail-callout .detail-name{grid-column:2;grid-row:1}
 .detail-callout .detail-dimensions{grid-column:2;grid-row:2;max-width:none!important;text-align:left!important}
 .detail-callout .detail-finish{grid-column:2;grid-row:3;max-height:none!important;overflow:visible!important;opacity:1!important;margin-top:2px!important}
 /* The line sits over the list and fades from one row to the next. */
 .story-sticky .detail-leaders{z-index:4}
 .detail-leader,.detail-dot,.detail-pin-number,.detail-dimension,.detail-measure{transition:opacity .45s ease}
 .detail-leader.is-selected{stroke-dasharray:none;animation:none}
 /* The landed brief is the thin Design details bar; the quote has already become it in flight. */
 .cx-brief{align-items:center;gap:10px;min-height:0;padding:10px 12px!important;border-radius:16px!important;background:var(--cx-ink)!important;color:#f6f5f2!important;box-shadow:none}
 .cx-brief-spark{width:28px;height:28px;font-size:13px}
 .cx-brief-copy{flex:1 1 auto;min-width:0}
 .cx-brief-copy em{display:none}
 .cx-brief-copy small{font-size:12px;letter-spacing:.14em;color:#d8d3cb}
 /* The list comes in as the flying card arrives — the real brief stays hidden until the ghost lands. */
 .story-sticky[data-phase=details]:not(.cx-list-in) .detail-callouts,.story-sticky[data-phase=details]:not(.cx-list-in) .detail-filters{opacity:0;transform:translateY(14px);pointer-events:none}
 .story-sticky.cx-list-in .detail-callouts,.story-sticky.cx-list-in .detail-filters{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
 /* Same flying card as desktop: quote at rest, Design details at the end, readable over the chapter screen. */
 .cx-handoff{display:flex!important;z-index:62;align-items:center;gap:10px;white-space:normal;padding:6px calc(6px + var(--k) * 6px) 6px calc(16px - var(--k) * 4px);border-radius:calc(24px - var(--k) * 8px)}
 .cx-handoff-copy{flex:1 1 auto;min-width:0}
 .cx-handoff em{display:block;max-height:calc((1 - var(--k)) * 5em);margin:0;overflow:hidden;opacity:calc(1 - var(--k));white-space:normal;text-overflow:clip;font:italic 400 16px/1.3 var(--serif)}
 .cx-handoff small{font-size:12px;letter-spacing:.14em}
 .cx-handoff-go{display:grid;place-items:center;flex:none;width:calc((1 - var(--k)) * 36px);height:calc((1 - var(--k)) * 36px);margin:0;overflow:hidden;opacity:calc(1 - var(--k));border-radius:50%;background:var(--cx-ink);color:#f6f5f2;font-size:17px}
 .detail-callout{transition:background-color .35s ease!important}
}
/* Tablets: the Design details list rows stack as on phones. */
@media(min-width:701px) and (max-width:1050px){
 .detail-callout{flex:0 0 auto!important;max-height:none!important;grid-template-columns:26px minmax(0,1fr)!important;column-gap:12px!important;row-gap:3px!important;align-items:start!important}
 .detail-callout .detail-description{display:contents}
 .detail-callout .detail-number{grid-column:1;grid-row:1/span 3;align-self:center}
 .detail-callout .detail-name{grid-column:2;grid-row:1}
 .detail-callout .detail-dimensions{grid-column:2;grid-row:2;max-width:none!important;text-align:left!important}
 .detail-callout .detail-finish{grid-column:2;grid-row:3;max-height:none!important;overflow:visible!important;opacity:1!important;margin-top:2px!important}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.story-sticky .inline-editor,.story-sticky.cx-room-fit .cx-spot.is-prompt,.story-sticky.cx-room-fit[data-phase=details] .detail-rail,.detail-leader,.detail-dot,.detail-pin-number{transition:none}}

/* While a numbered chapter owns the scroll, everything else waits.
   06 keeps only the Design details card; the list waits under the veil until the number lifts. */
html.cx-breaking:not(.cx-break-details) .cx-handoff{visibility:hidden!important}
html.cx-breaking .inline-editor{transition:none}
html.cx-break-details .detail-callouts,html.cx-break-details .detail-filters,html.cx-break-details .detail-leaders,html.cx-break-details .detail-rail-heading,html.cx-break-details .detail-rail-foot,html.cx-break-details .detail-table-heading{display:none!important}
@media(max-width:700px){html.cx-break-details .detail-rail{position:fixed!important;z-index:62;top:var(--cx-rail-top)!important;bottom:auto!important;height:auto!important;left:14px!important;right:14px!important;width:auto!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}}
html.cx-break-details .cx-brief,html.cx-break-details .cx-handoff{visibility:visible!important;z-index:63}

/* A chapter without a button shows none. */
.story-copy .chapter-action[hidden]{display:none!important}