/* Parcel — Your store (#/store, SPEC-autopilot §10). Owned by the store screen builder.
   ctx.el is .view-settings (the route's tab), so everything is scoped .view-settings .store-…; sheets use .store-sheet.
   Layout follows the space the page really has (a container query on .store): one column, then from 720px the phone
   storefront preview on the left (sticky) and the lists on the right. With the Desktop preview picked, the storefront
   takes the full width above two columns of lists, so the 1,200px page is readable (G015). */

.view-settings .store { container: store / inline-size; display: flex; flex-direction: column; gap: 28px; margin-top: var(--sp-2); }
.view-settings .store-empty { padding-top: 40px; }

/* ---- Brand hero */
.view-settings .store-hero {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px 24px; border-radius: var(--r-card);
  background: var(--bg-2); text-align: center;
}
.view-settings .store-hero-logo { display: flex; justify-content: center; max-width: 100%; margin-bottom: 6px; }
.view-settings .store-hero-logo .brand-logo { display: block; height: 72px; width: auto; max-width: 100%; }
.view-settings .store-hero-logo .brand-logo:is(.brand-logo--stacked, .brand-logo--emblem) { height: 104px; }
.view-settings .store-hero-tagline { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--label); text-wrap: balance; }
.view-settings .store-hero-meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: balance; }
.view-settings .store-hero-meta:focus { outline: none; }
.view-settings .store-hero-meta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@container store (min-width: 600px) {
  .view-settings .store-hero { padding: 36px 24px 30px; }
  .view-settings .store-hero-logo .brand-logo { height: 80px; }
  .view-settings .store-hero-logo .brand-logo:is(.brand-logo--stacked, .brand-logo--emblem) { height: 120px; }
}

/* ---- Two columns on wide screens */
.view-settings .store-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.view-settings .store-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.view-settings .store-col > .list-section + .list-section { margin-top: 0; }
@container store (min-width: 720px) {
  .view-settings .store-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}
/* Desktop preview: the storefront spans the page; the lists sit in two columns under it. */
.view-settings .store-wide-front { min-width: 0; }
/* The preview stays in view while the lists scroll, but only while all of it fits in the window (V098): the phone is sized
   to the window's height (a 1440×900 laptop gets a ~280px phone, so "Design your store" under it stays on screen), and
   page.js adds .is-sticky only when the whole column (its button included) fits under the nav bar. */
@container store (min-width: 720px) {
  .view-settings .store-col-preview .store-front.is-phone { --bs-max: clamp(250px, calc((100dvh - var(--navbar-h) - var(--safe-top) - 280px) / 2.1), 360px); }
  .view-settings .store-col-preview.is-sticky { position: sticky; top: calc(var(--navbar-h) + var(--safe-top) + 16px); }
}

.view-settings .store-note { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* ---- Storefront preview. The Phone | Desktop switch sits beside the title while there's room, and drops under it
   (full width) on a narrow card, so the title never truncates (G014). */
.view-settings .store-front-card { container: sfcard / inline-size; }
.view-settings .store-front-card .card-header { margin-bottom: 16px; flex-wrap: wrap; row-gap: 12px; }
.view-settings .store-front-card .card-heading { flex: 1 0 auto; min-width: 0; }
.view-settings .store-front-card .segmented { width: 168px; flex: none; }
@container sfcard (max-width: 300px) {
  .view-settings .store-front-card .segmented { flex: 1 1 100%; width: 100%; }
}
.view-settings .store-front { display: flex; justify-content: center; min-width: 0; }
.view-settings .store-front > .bs-device { width: 100%; }

/* The design under the storefront: the look and the draft's state, then "Design your store" (the page's one primary). */
.view-settings .store-design { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.view-settings .store-design-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.view-settings .store-design-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
.view-settings .store-design-btn { align-self: flex-start; }
@container sfcard (max-width: 420px) { .view-settings .store-design-btn { align-self: stretch; } }

/* ---- Shopify theme */
.view-settings .store-theme .card-header { margin-bottom: 8px; }
.view-settings .store-theme-lede { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-settings .store-theme-framed {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--accent-tint); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label); text-wrap: pretty;
}
.view-settings .store-theme-framed svg { flex: none; margin-top: 1px; color: var(--accent); }
.view-settings .store-theme-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 16px 0 20px; }
.view-settings .store-theme-steps { padding-top: 16px; border-top: var(--hairline) solid var(--sep); }

/* ---- Autopilot's design proposal */
.view-settings .store-prop .card-header { margin-bottom: 6px; }
.view-settings .store-prop-title { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); text-wrap: balance; }
.view-settings .store-prop-text { margin-top: 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-settings .store-prop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }

/* ---- Go-live (DECISIONS §31): not live until the one-time setup is done */
.view-settings .store-golive .card-header { margin-bottom: 6px; }
.view-settings .store-golive-title { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); text-wrap: balance; }
.view-settings .store-golive-text { margin: 4px 0 14px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-settings .store-golive-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.view-settings .store-golive-next {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text); border-radius: 4px;
}
.view-settings .store-golive-next:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .view-settings .store-golive-next:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---- Pages */
.view-settings .store-page-row .list-row-subtitle { white-space: normal; text-wrap: pretty; }

/* ---- Domain + DNS */
.view-settings .store-domain-wrap { display: flex; flex-direction: column; gap: 28px; }
.view-settings .store-domain .card-header { margin-bottom: 8px; }
.view-settings .store-domain-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.view-settings .store-domain-name {
  min-width: 0; overflow-wrap: anywhere;
  font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--w-bold); letter-spacing: var(--ls-title2);
}
.view-settings .store-domain-text { margin-top: 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-settings .store-buy { margin-top: 16px; }
.view-settings .store-dns-row .list-row-main { padding-block: 10px; }
.view-settings .store-dns-title { display: inline-flex; align-items: baseline; gap: 8px; }
.view-settings .store-dns-type { font-weight: var(--w-semibold); }
.view-settings .store-dns-host { font-size: var(--fs-subhead); color: var(--label-2); }
.view-settings .store-dns-value {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; color: var(--label);
  -webkit-user-select: all; user-select: all;
}
.view-settings .store-dns .list-row-subtitle { white-space: normal; overflow-wrap: anywhere; }

/* ---- Brand kit */
/* Five labelled swatches in one row: an even grid instead of the component's fixed cells. On a narrow card (a 320pt
   phone) 3 + 2, so names and hex codes never run into each other (G006). */
.view-settings .store-kit .brand-swatches--labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 6px; }
.view-settings .store-kit .brand-swatches--labels .brand-swatch { width: auto; min-width: 0; }
@container kit (max-width: 340px) {
  .view-settings .store-kit .brand-swatches--labels { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
}
.view-settings .store-kit { container: kit / inline-size; }
.view-settings .store-kit .card-header { margin-bottom: 8px; }
.view-settings .store-kit-sub {
  margin: 22px 0 10px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-regular);
  color: var(--label-2); text-transform: uppercase; letter-spacing: 0;
}
.view-settings .store-kit .card-body > .store-kit-sub:first-child { margin-top: 4px; }
.view-settings .store-variants { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container kit (min-width: 440px) { .view-settings .store-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.view-settings .store-variant { min-width: 0; }
/* Tiles are pictures of the real logo: the brand's own background (set inline), the same in light and dark (G020). */
.view-settings .store-variant-tile {
  display: grid; place-items: center;
  height: 92px; padding: 14px; border-radius: 14px;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 var(--hairline) var(--sep);
  overflow: hidden;
}
.view-settings .store-variant-tile .brand-logo { display: block; height: 34px; width: auto; max-width: 100%; }
.view-settings .store-variant-tile.is-mark .brand-logo { height: 56px; }
.view-settings .store-variant-tile.is-stacked .brand-logo { height: 64px; }
.view-settings .store-kit-row + .store-kit-sub { margin-top: 24px; }
.view-settings .store-variants + .store-kit-hint { margin-top: 8px; }
.view-settings .store-variant-label { margin-top: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-align: center; }
.view-settings .store-kit-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.view-settings .store-kit-hint { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-settings .store-font { display: flex; align-items: center; gap: 14px; }
.view-settings .store-font-sample {
  display: grid; place-items: center; flex: none;
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--bg-3); color: var(--label);
  font-size: 30px; line-height: 1;
}
.view-settings .store-font-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-settings .store-font-name { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); }
.view-settings .store-font-note { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }

/* ---- Name checks, details, GST watch */
.view-settings .store-check-row .list-row-leading { align-self: flex-start; margin-top: 10px; }
.view-settings .store-check-mark { display: grid; place-items: center; width: 29px; height: 29px; }
.view-settings .store-check-mark.is-ok { color: var(--green); }
.view-settings .store-check-mark.is-warn { color: var(--orange); }
.view-settings .store-check-row .list-row-subtitle,
.view-settings .store-detail-row .list-row-subtitle { white-space: normal; text-wrap: pretty; }
.view-settings .store-details-wrap { display: flex; flex-direction: column; gap: 28px; }
.view-settings .store-gst .card-header { margin-bottom: 8px; }
.view-settings .store-gst-value {
  font-family: var(--font-rounded); font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--w-bold);
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.view-settings .store-gst-sub { margin-bottom: 12px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }

/* ================================================================== SHEETS: page preview + page editor + logo picker */
/* A page preview: a browser window that grows with the page (the sheet is the only scroller); on a phone the page
   itself runs edge to edge with no device frame (DECISIONS §47). The note sits in the scrolling body. */
.store-sheet .store-preview-sheet { display: flex; flex-direction: column; gap: 16px; }
.store-sheet .store-preview-sheet.is-bare { margin: -8px -16px 0; gap: 0; }
.store-sheet .store-preview-sheet.is-bare .store-preview-meta { padding: 16px 20px 8px; }
.store-sheet .store-preview-frame { display: flex; justify-content: center; min-width: 0; }
.store-sheet .store-preview-frame > * { width: 100%; }
.store-sheet .store-preview-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 4px 4px; }
.store-sheet .store-preview-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.store-sheet .store-preview-note svg { flex: none; margin-top: 1px; color: var(--label-3); }

/* A store page as it reads on the site: the brand's own colours in both themes (a picture of the website). */
.store-doc {
  display: flex; flex-direction: column; min-height: 100%;
  background: var(--doc-bg); color: var(--doc-ink);
  font-size: 15px; line-height: 1.45; letter-spacing: 0; text-align: left;
}
.store-doc-bar { display: flex; justify-content: center; padding: 12px 16px; border-bottom: 1px solid var(--doc-line); }
.store-doc-bar .brand-logo { display: block; height: 26px; width: auto; }
.store-doc-main { flex: 1 0 auto; width: 100%; max-width: 640px; margin: 0 auto; padding: 22px 18px 28px; }
.device--desktop .store-doc-main { padding: 32px 28px 40px; }
.store-doc-title {
  margin-bottom: 6px;
  font-family: var(--doc-head); font-weight: var(--doc-head-w); font-size: 26px; line-height: 1.15; letter-spacing: -0.01em;
}
.store-doc-summary { margin-bottom: 18px; color: var(--doc-muted); }
.store-doc-section + .store-doc-section { margin-top: 18px; }
.store-doc-heading { margin-bottom: 4px; font-family: var(--doc-head); font-weight: 700; font-size: 17px; line-height: 1.3; }
.store-doc-p + .store-doc-p { margin-top: 8px; }
.store-doc-list { margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.store-doc-list li + li { margin-top: 4px; }
.store-doc-list li::marker { color: var(--doc-accent); }
.store-doc-foot { padding: 14px 18px; border-top: 1px solid var(--doc-line); font-size: 12px; line-height: 1.4; color: var(--doc-muted); text-align: center; }

/* Editor */
.store-edit-sheet .store-edit-intro { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.store-edit-sheet .store-edit-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.store-edit-sheet .store-edit-legend {
  margin-bottom: 8px; padding: 0 4px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-transform: uppercase;
}

/* Logo picker (Regenerate logo): the current logo and new marks as choice cards, each on the brand's own background. */
.store-logo-sheet-root .store-logo-intro,
.store-logo-sheet-root .store-logo-note,
.store-logo-sheet-root .store-logo-end { padding: 0 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.store-logo-sheet-root .store-logo-intro { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.store-logo-sheet-root .store-logo-choice { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-logo-sheet-root .store-logo-tile {
  display: grid; place-items: center; height: 96px; margin-top: 12px; padding: 14px; border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 0 0 var(--hairline) var(--sep);
}
.store-logo-sheet-root .store-logo-tile .brand-logo { display: block; height: 40px; width: auto; max-width: 100%; }
.store-logo-sheet-root .store-logo-name { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
.store-logo-sheet-root .store-logo-sub { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.store-logo-sheet-root .store-logo-more-row { display: flex; justify-content: center; }
.store-logo-sheet-root .store-logo-more { min-width: 180px; }

@media (forced-colors: active) {
  .view-settings :is(.store-variant-tile, .store-font-sample, .store-hero) { border: 1px solid CanvasText; }
  .store-logo-sheet-root .store-logo-tile { border: 1px solid CanvasText; }
}

/* ================================================================== THE SHOPIFY THEME (Your store card + the Publish sheet) */
/* .tx-… is shared by Your store's Theme card (in .view-settings) and the designer's Publish sheet (.tx-sheet-root). */
:is(.view-settings, .tx-sheet-root) .tx-note {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
:is(.view-settings, .tx-sheet-root) .tx-note svg { flex: none; margin-top: 3px; color: var(--label-3); }
:is(.view-settings, .tx-sheet-root) .tx-publish-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
:is(.view-settings, .tx-sheet-root) .tx-steps { display: flex; flex-direction: column; gap: 10px; }
:is(.view-settings, .tx-sheet-root) .tx-steps-head {
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-transform: uppercase; padding: 0 4px;
}
:is(.view-settings, .tx-sheet-root) .tx-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
:is(.view-settings, .tx-sheet-root) .tx-step { display: flex; align-items: flex-start; gap: 12px; }
:is(.view-settings, .tx-sheet-root) .tx-step-n {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-text);
  font-size: 13px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums;
}
:is(.view-settings, .tx-sheet-root) .tx-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
:is(.view-settings, .tx-sheet-root) .tx-step-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; overflow-wrap: anywhere; }
:is(.view-settings, .tx-sheet-root) .tx-step-sub { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* Publish sheet */
.tx-sheet-root .tx-status {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-list); background: var(--bg-2);
}
.tx-sheet-root .tx-status-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--green); }
.tx-sheet-root .tx-status-dot.is-draft { background: var(--orange); }
.tx-sheet-root .tx-status-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-sheet-root .tx-status-title { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); }
.tx-sheet-root .tx-status-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.tx-sheet-root .tx-actions { display: flex; flex-direction: column; gap: 8px; }
.tx-sheet-root .tx-file { justify-content: center; text-align: center; }
.tx-sheet-root .tx-framed {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--accent-tint); color: var(--label); font-size: var(--fs-subhead); line-height: var(--lh-subhead); text-wrap: pretty;
}
.tx-sheet-root .tx-framed svg { flex: none; margin-top: 2px; color: var(--accent); }
.tx-sheet-root .tx-shopify { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }

/* ================================================================== THE DESIGNER (#/store/design) */
.view-settings .dz { display: flex; flex-direction: column; gap: 20px; margin-top: var(--sp-2); min-width: 0; }
.view-settings .dz-empty { padding-top: 40px; }
.view-settings .dz-flip, .dz-flip { transform: scaleX(-1); }
.view-settings .dz-hint { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: balance; }

/* Autopilot's proposal (Needs your OK) */
.view-settings .dz-prop .card-header { margin-bottom: 6px; }
.view-settings .dz-prop-title { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); text-wrap: balance; }
.view-settings .dz-prop-text { margin-top: 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-settings .dz-prop-actions, .dz-prop-sheet-root .dz-prop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.dz-prop-sheet-root .dz-prop-title { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); text-wrap: balance; padding: 0 4px; }
.dz-prop-sheet-root .dz-prop-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--label-2); text-wrap: pretty; padding: 0 4px; }
.dz-prop-sheet-root .dz-prop-actions { margin-top: 4px; padding: 0 0 8px; }
.view-settings .dz-prop-row .list-row-subtitle { white-space: normal; }

/* The page picker: a pill with the page's name over a native menu (the system picker on iOS, a menu on a Mac). */
.view-settings .dz-page {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  height: 36px; padding: 0 12px 0 11px; border-radius: var(--r-full);
  background: var(--fill-3); color: var(--label);
  font-size: var(--fs-subhead); font-weight: var(--w-semibold); letter-spacing: -0.1px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-press) linear;
}
.view-settings .dz-page svg { flex: none; color: var(--label-2); }
.view-settings .dz-page-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-settings .dz-page-select {
  position: absolute; inset: -4px 0; width: 100%; height: calc(100% + 8px); opacity: 0; cursor: pointer;
  font-size: 16px; /* iOS: no zoom when the menu opens */
  -webkit-appearance: none; appearance: none; border: 0; background: none; color: var(--label);
}
.view-settings .dz-page:has(.dz-page-select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-settings .dz-page:active { background: var(--fill-2); }
@media (hover: hover) and (pointer: fine) { .view-settings .dz-page:hover { background: var(--fill-hover); } }

/* ---- wide: toolbar, then the preview (left) and the page's sections, Look and Versions (right) */
.view-settings .dz-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; min-width: 0; }
.view-settings .dz-toolbar .dz-device { width: 168px; flex: none; }
.view-settings .dz-toolbar .dz-hint { margin-left: auto; text-align: right; }
.view-settings .dz-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 24px; align-items: start; }
.view-settings .dz-canvas { min-width: 0; }
.view-settings .dz-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.view-settings .dz-side .list-section { margin-top: 0; }
.view-settings .dz.is-wide .dz-stage {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 24px; border-radius: var(--r-card); background: var(--bg-2);
}
.view-settings .dz.is-wide .dz-stage > .bs-device { width: 100%; }
/* The browser window uses the height the window has (a taller canvas to edit in than its default 16:9-ish frame). */
.view-settings .dz.is-wide .dz-stage.is-desktop { padding: 16px; }
.view-settings .dz.is-wide .dz-stage.is-desktop .bs-device--scroll .bs-viewport { height: clamp(340px, calc(100vh - 240px), 960px); }
/* The phone frame fits the window's height, so the whole phone stays in view. */
.view-settings .dz.is-wide .dz-stage.is-phone { --bs-max: clamp(260px, calc((100vh - 230px) / 2.1), 360px); }
@media (min-height: 700px) {
  .view-settings .dz.is-wide .dz-canvas { position: sticky; top: calc(var(--navbar-h) + var(--safe-top) + 12px); }
}

/* ---- narrow (phones): Look + Versions, Phone | Desktop, the page itself, then the bottom toolbar */
.view-settings .dz.is-narrow { gap: 16px; }
.view-settings .dz.is-narrow .dz-design-rows { margin-top: 0; }
.view-settings .dz-canvas-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.view-settings .dz-canvas-head .dz-device { width: 220px; max-width: 100%; }
.view-settings .dz.is-narrow .dz-stage { display: flex; justify-content: center; }
.view-settings .dz.is-narrow .dz-stage > .bs-device { width: 100%; }
.view-settings .dz.is-narrow .dz-stage.is-phone:not(.is-bare) { --bs-max: 360px; }
/* Desktop at a readable size (V019): the browser window at about two-thirds size (820px for the 1,200px page, so body text is
   about 11px, not 4 to 6) in a sideways scroller. On phones, and in a wide stage that would leave the window under 560px
   (tablets, laptops up to about 1,300px wide; designer.js PAN_ROOM). */
.view-settings .dz:is(.is-narrow, .is-wide) .dz-stage.is-pan {
  display: flex; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.view-settings .dz:is(.is-narrow, .is-wide) .dz-stage.is-pan > .bs-device { flex: none; width: 820px; max-width: none; }
/* Phones: it runs to the screen's edges, and the page still scrolls up and down as usual. */
.view-settings .dz.is-narrow .dz-stage.is-pan {
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
}
/* Wide: inside the stage's card; the window scrolls up and down inside its frame, as it does at full width. */
.view-settings .dz.is-wide .dz-stage.is-pan { scroll-padding-inline: 16px; }
/* On a phone the page runs as a card of its own: rounded, a hairline, a soft shadow (no device frame inside a phone). */
.view-settings .dz-stage.is-bare {
  border-radius: 22px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 var(--hairline) var(--sep), 0 8px 28px rgba(0, 0, 0, .08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view-settings .dz-stage.is-bare { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } }
:root[data-theme="dark"] .view-settings .dz-stage.is-bare { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

.view-settings .dz-bar {
  position: sticky; bottom: 0; z-index: 6;
  margin: 4px calc(-1 * var(--gutter)) calc(-1 * (var(--tabbar-space) + var(--sp-8)));
  padding: 4px max(8px, var(--safe-left)) calc(4px + var(--tabbar-space)) max(8px, var(--safe-right));
  background: var(--material-thick); -webkit-backdrop-filter: var(--material-filter); backdrop-filter: var(--material-filter);
  box-shadow: 0 calc(-1 * var(--hairline)) 0 var(--sep);
}
.view-settings .dz-bar-inner { display: flex; align-items: center; gap: 2px; max-width: 520px; margin: 0 auto; }
.view-settings .dz-bar .dz-page { flex: 0 1 auto; margin: 0 auto; }
.view-settings .dz-bar-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md);
  color: var(--accent-text); transition: opacity var(--dur-press) linear, background-color var(--dur-press) linear;
}
.view-settings .dz-bar-btn:disabled { color: var(--label-3); }
.view-settings .dz-bar-btn:not(:disabled):active { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .view-settings .dz-bar-btn:not(:disabled):hover { background: var(--fill-4); } }

/* ---- the page's sections (outline), Look + Versions */
.view-settings .dz-outline-wrap, .dz-outline-sheet .dz-outline-wrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:is(.view-settings, .dz-out-sheet) .dz-row .list-row-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.view-settings, .dz-out-sheet) .dz-row.is-hidden .list-row-title { color: var(--label-2); }
:is(.view-settings, .dz-out-sheet) .dz-row .list-row-value { font-size: var(--fs-subhead); }
:is(.view-settings, .dz-out-sheet) .dz-add-title { display: inline-flex; align-items: center; gap: 12px; color: var(--accent-text); }
:is(.view-settings, .dz-out-sheet) .dz-add-title svg { flex: none; color: var(--green); margin-left: 3px; }
:is(.view-settings, .dz-out-sheet) .dz-legal {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-list); background: var(--bg-2);
}
:is(.view-settings, .dz-out-sheet) .dz-legal-icon {
  display: grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 7px; background: var(--gray); color: #fff;
}
:is(.view-settings, .dz-out-sheet) .dz-legal-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
:is(.view-settings, .dz-out-sheet) .dz-legal-text { margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-settings .dz-design-rows .list-row-value { font-size: var(--fs-subhead); }

/* ================================================================== DESIGNER SHEETS */
.dz-sheet .dz-note {
  display: flex; align-items: flex-start; gap: 6px; padding: 0 4px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.dz-sheet .dz-note svg { flex: none; margin-top: 2px; color: var(--label-3); }
.dz-sheet .dz-working { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--label-2); font-size: var(--fs-subhead); }
.dz-sheet .dz-failed { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; color: var(--label-2); font-size: var(--fs-subhead); }
.dz-sheet .dz-failed > svg { color: var(--orange); }

/* Section editor: a live preview of the section, what it is, the form, its blocks, its actions */
.dz-sec-sheet .dz-sec-head { display: flex; flex-direction: column; gap: 10px; }
.dz-sec-sheet .dz-mini-wrap { display: flex; justify-content: center; }
.dz-sec-sheet .dz-mini {
  position: relative; width: 100%; max-height: 300px; overflow: hidden; border-radius: 14px;
  background: #fff; box-shadow: 0 0 0 var(--hairline) var(--sep), 0 2px 10px rgba(0, 0, 0, .06);
}
.dz-sec-sheet .dz-mini.is-phone { max-width: 390px; }
.dz-sec-sheet .dz-mini.is-clipped { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
.dz-sec-sheet .dz-mini .tp-root { pointer-events: none; }
.dz-sec-sheet .dz-sec-desc { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.dz-sec-sheet .dz-sec-note { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.dz-sec-sheet .dz-sec-note svg { flex: none; color: var(--accent); }
.dz-sec-sheet .dz-ideas { align-self: flex-start; margin-top: 2px; }
.dz-sec-sheet .dz-blocks { display: flex; flex-direction: column; gap: 12px; }
.dz-sec-sheet .dz-blocks[hidden] { display: none; }
.dz-sec-sheet .dz-group-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-regular); color: var(--label-2); text-transform: uppercase;
}
.dz-sec-sheet .dz-group-count { text-transform: none; }
.dz-sec-sheet .dz-blocks-list { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; }
.dz-sec-sheet .dz-block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dz-sec-sheet .dz-block { display: flex; flex-direction: column; gap: 12px; padding: 10px 14px 16px; border-radius: var(--r-list); background: var(--bg-2); }
.dz-sec-sheet .dz-block .sform { gap: 14px; }
/* "Question 1" heads the card, so its first field doesn't repeat "Question". */
.dz-sec-sheet .dz-block.is-named .sform > .field:first-child > .field-label,
.dz-sec-sheet .dz-block.is-named .sform > .field:first-child .sform-label-row { display: none; }
.dz-sec-sheet .dz-block.is-named .sform > .field:first-child:has(.sform-label-row) { gap: 0; }
.dz-sec-sheet .dz-block .sform .list-section { margin-inline: -4px; }
.dz-sec-sheet .dz-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.dz-sec-sheet .dz-block-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
.dz-sec-sheet .dz-block-remove { margin: -6px -10px -6px 0; color: var(--red); }
.dz-sec-sheet .dz-block-remove .icon-btn-face { color: var(--red); }
.dz-sec-sheet .dz-block-add { align-self: flex-start; }
.dz-sec-sheet .dz-block-add svg { color: var(--green); }
.dz-sec-sheet .dz-block-form { padding: 0; }
.dz-sec-sheet .dz-act-title { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); }
.dz-sec-sheet .dz-act-row.is-remove .dz-act-title { color: var(--red-text); }
.dz-sec-sheet .dz-act-row.is-disabled .dz-act-title { color: var(--label-3); }
.dz-sec-sheet .dz-sec-list .list-footer.is-flash { color: var(--label); }

/* Rewrite / hero ideas */
.dz-rw-sheet .dz-rw { display: flex; flex-direction: column; gap: 16px; }
.dz-rw-sheet .dz-rw-now { padding: 12px 14px; border-radius: var(--r-lg); background: var(--fill-4); }
.dz-rw-sheet .dz-rw-label { font-size: 13px; line-height: 18px; font-weight: var(--w-medium); color: var(--label-2); }
.dz-rw-sheet .dz-rw-current { margin-top: 2px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.dz-rw-sheet .dz-rw-text { padding-right: 28px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--label); text-wrap: pretty; }
.dz-rw-sheet .dz-rw-more { display: flex; justify-content: center; }
.dz-rw-sheet .dz-idea { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dz-rw-sheet .dz-idea-head { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); text-wrap: balance; }
.dz-rw-sheet .dz-idea-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.dz-rw-sheet .dz-idea-btn {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-full);
  background: var(--fill-3); font-size: 13px; font-weight: var(--w-semibold); color: var(--label);
}
.dz-rw-sheet .dz-idea-why { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.dz-rw-sheet .dz-idea-why svg { flex: none; margin-top: 2px; color: var(--purple); }

/* Add section */
.dz-lib-sheet .dz-lib-list .list-row-subtitle { white-space: normal; text-wrap: pretty; }
.dz-lib-sheet .dz-lib-plus { color: var(--green); }
.dz-lib-sheet .dz-lib-row.is-unavailable .list-row-title { color: var(--label-2); }
.dz-lib-sheet .dz-after .list-section, .dz-lib-sheet .dz-after { margin-top: 0; }
.dz-lib-sheet .dz-after-select { field-sizing: content; min-width: 9.5em; }

/* Look: the 3 directions, each a large picture of the look (the hero and what follows it), its name and trait chips.
   Shared by the Look sheet and launch step 4 (.launch-look sets --dz-bleed to its gutter). */
.dz-look-sheet .dz-look-intro { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.dz-look-sheet .dz-look-why { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; min-height: 1em; }
.dz-look-sheet { --dz-bleed: 16px; }
.dz-dirs .choice-group { position: relative; }
.dz-dirs .dz-dir { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* A phone page is 414 design pixels wide; the hero and the section after it fit in about 640 of them. */
.dz-dirs .dz-thumb {
  position: relative; aspect-ratio: 414 / 640; overflow: hidden; border-radius: 14px; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 var(--hairline) var(--sep), 0 2px 10px rgba(0, 0, 0, .06);
}
.dz-dirs .dz-thumb > .tp-root { position: absolute; inset: 0 0 auto 0; }
.dz-dirs .dz-dir-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-dirs .dz-dir-name { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); }
.dz-dirs .dz-dir-summary { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
/* What differs, as small labels (not buttons: the whole card is the control). */
.dz-dirs .dz-traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dz-dirs .dz-trait {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--fill-4); color: var(--label-2);
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium); letter-spacing: 0;
}
.dz-dirs .choice.is-selected .dz-trait { background: var(--accent-tint); color: var(--accent-text); }
/* Three across once there's room (a wide sheet, the launch step on a desktop). */
@container (min-width: 600px) {
  .dz-dirs .choice-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A card without the "Recommended" badge keeps the badge's row, so the pictures line up and the check never sits on one. */
  .dz-dirs .choice-mark + .choice-body .dz-dir { padding-top: 32px; }
}
/* Narrower (phones, the launch column on a tablet): a sideways pager of large cards, the next one peeking in. Arrow keys
   move the pick and bring it into view; the page itself never scrolls sideways (the pager bleeds to the edges and scrolls). */
@container (max-width: 599px) {
  .dz-dirs .choice-group {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(76%, 290px); gap: 12px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: -8px calc(-1 * var(--dz-bleed, 16px)); padding: 8px var(--dz-bleed, 16px) 12px;
    scroll-padding-inline: var(--dz-bleed, 16px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dz-dirs .choice-group::-webkit-scrollbar { display: none; }
  .dz-dirs .choice { scroll-snap-align: start; }
  .dz-dirs .choice-mark + .choice-body .dz-dir { padding-top: 32px; }
}

/* Versions */
.dz-ver-sheet .list-row-subtitle { white-space: normal; text-wrap: pretty; overflow-wrap: anywhere; }

@media (forced-colors: active) {
  .view-settings :is(.dz-page, .dz-stage, .dz-legal) { border: 1px solid CanvasText; }
  .dz-sheet :is(.dz-mini, .dz-block, .dz-thumb, .dz-rw-now) { border: 1px solid CanvasText; }
  .tx-sheet-root .tx-status { border: 1px solid CanvasText; }
}