/* =========================================================================
   views/sites.css — the admin Sites route: the gallery of client websites
   (`sg-` prefix) and the full-screen Site Builder overlay (`sb-` prefix,
   ported from the standalone builder's app.css — already token-only). Tokens
   and primitives come from tokens/components/modal.css; nothing here is a
   literal colour except the site canvas itself (a website is white, not CRM
   chrome) and the theme-constant dark tip pill (the .app-toast recipe).
   ========================================================================= */

/* ---------- the queue --------------------------------------------------
   One bordered list (the Vercel deployments / projects list), rows grouped
   by state in priority order (Needs review → In setup → Released → Live)
   with a group header only when more than one state is present — each row
   already says its state as a dot + label. Row anatomy: thumbnail · name +
   state line · time and the state's one action. Colour is spent only on
   the state dot, an overdue review and a site switched off in the portal. */
.sg-view { padding: var(--space-5) var(--space-6) var(--space-8); }
.sg-list { padding: 0; overflow: hidden; }
.sg-group + .sg-group { border-top: 1px solid var(--border); }
.sg-group-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--surface-sunk); border-bottom: 1px solid var(--border-faint); }
.sg-group-head h2 { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: var(--leading-snug); }
.sg-count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-soft); }
.sg-group.is-attention .sg-group-head h2, .sg-group.is-attention .sg-count { color: var(--warning-700); }
.sg-rows { display: flex; flex-direction: column; }
.sg-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4) 0 0; border-bottom: 1px solid var(--border-faint);
  cursor: pointer; text-align: left; outline: none;
  transition: background var(--dur) var(--ease);
}
.sg-row:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .sg-row:hover { background: var(--surface-hover); }
}
.sg-row:focus-visible { box-shadow: inset var(--ring-primary); }
/* the thumbnail bleeds to the row's top, bottom and left edges (the card clips its corners) */
.sg-thumb { display: block; align-self: stretch; width: 100%; min-height: calc(168px * 9 / 16); border-right: 1px solid var(--border-faint); background: var(--surface-sunk); overflow: hidden; }
.sg-thumb--tile { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sg-brand, var(--primary-600)) 14%, var(--surface-sunk)); }
.sg-row-main { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; padding: var(--space-3) 0; }
.sg-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.sg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sg-site-name { font-size: var(--text-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.sg-state { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text); }
.sg-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); }
.sg-state.is-warn .sg-state-dot { background: var(--warning-600); }
.sg-state.is-info .sg-state-dot { background: var(--info-600); }
.sg-state.is-ok   .sg-state-dot { background: var(--success-600); }
.sg-due.is-late { color: var(--danger-600); font-weight: var(--fw-medium); }
.sg-row-note { margin: var(--space-0-5) 0 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--border-strong); color: var(--text); font-size: var(--text-sm); line-height: var(--leading-snug); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) 0; }
.sg-when { font-size: var(--text-xs); color: var(--text-soft); white-space: nowrap; }
.sg-row-actions { display: flex; align-items: center; gap: var(--space-2); }
.sg-row-actions .btn svg { width: 14px; height: 14px; }
.sg-row--skel { pointer-events: none; }
.sg-row--skel .sg-row-main { gap: var(--space-2-5); }
.sg-none, .sg-fail { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); font-size: var(--text-sm); color: var(--text-soft); }
.sg-fail svg { width: 18px; height: 18px; color: var(--danger-600); }
.sg-menu { position: fixed; z-index: var(--z-popover); min-width: 220px; }
.sg-menu .filter-opt > svg:first-child { margin-left: 0; color: var(--text-muted); }   /* a leading icon, not the shared trailing check */
.sg-menu .tone-pill { margin-left: auto; }
.sg-menu-label { padding: 6px 10px 2px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.filter-opt.sg-danger, .filter-opt.sg-danger > span:first-child { color: var(--danger-600); }
@media (hover: hover) and (pointer: fine) {
  .filter-opt.sg-danger:hover { background: var(--danger-bg); }
}
.filter-opt:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 640px) {
  .sg-view { padding: var(--space-4); }
  .sg-row { grid-template-columns: 96px minmax(0, 1fr); padding: 0 var(--space-3) 0 0; }
  .sg-thumb { min-height: calc(96px * 9 / 16); }
  .sg-row-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0 var(--space-3) var(--space-3); }
  .sg-row-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- builder overlay ---------------------------------------------- */
.sb-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); overflow: auto; background: var(--canvas); }
body.sb-open { overflow: hidden; }
/* a shared Modal opened over the full-screen editor (the walkthrough video) has to clear the editor's cover */
body.sb-open .modal-scrim, body.sb-open .modal-shell { z-index: var(--z-scrim); }
.sb-overlay-loading { display: flex; align-items: center; justify-content: center; height: 100%; }
.sb-overlay .hidden { display: none !important; }
.sb-overlay [hidden] { display: none !important; }   /* .btn's display beats the attribute (wizard Back on step 1) */
.sb-overlay .screen { min-height: 100%; }
/* inline host (the portal's Website page shows the wizard as its empty state):
   part of the page, centred in the view; promoted to the fixed overlay above
   the moment the wizard hands over to the build screen */
.sb-overlay.sb-inline { position: static; inset: auto; z-index: auto; overflow: visible; background: transparent; display: block; min-height: 0; }
.sb-inline #onboard { width: 100%; min-height: 0; padding: var(--space-3) 0 var(--space-6); align-items: flex-start; }
/* the Website page's column is 1100px wide; while the wizard is the page it spans the whole main area so the card is centred on screen */
.pw:has(.pw-wizard) { max-width: none; }
.sb-inline .sb-wz-foot { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border-radius: 0; }
.sb-inline .sb-overlay-loading { min-height: 40vh; }
.sb-inline .sb-wz { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.sb-inline .sb-wz-foot { background: var(--surface); }
.sb-exit { padding: 0 var(--space-2-5) 0 var(--space-1-5); gap: var(--space-1); }
.sb-save-state { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ic { display: inline-flex; flex-shrink: 0; line-height: 0; vertical-align: -0.15em; }
.ic svg { width: 16px; height: 16px; }
.btn .ic svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }

/* text-style button (the CRM has no primitive for this: mirrors .onb-info) */
.sb-link { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--primary-600); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
/* an inline sbIcon() svg (wzLogoUse, wzExit) — without a size it fills the button */
.sb-link > svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .sb-link:hover { color: var(--primary-700); text-decoration: underline; }
}
.sb-spacer { flex: 1; }

/* ---------- wizard (siteBuilderWizard) -------------------------------- */
#onboard { display: flex; align-items: flex-start; justify-content: center; padding: var(--space-8) var(--space-5) var(--space-12); }
.sb-wz {
  width: 100%; max-width: 760px;
  padding: var(--space-5) var(--space-8) 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
  animation: sbCardIn 420ms var(--ease-enter);
}
@keyframes sbCardIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
/* header: the exit link (when the wizard can be left), then the progress rail
   ("Step 3 of 9 · What you offer" over nine segments) */
.sb-wz-top { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.sb-wz-top-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sb-wz-exit { flex-shrink: 0; margin-left: -8px; padding-left: 6px; color: var(--text-muted); white-space: nowrap; }
.sb-wz-exit svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .sb-wz-exit:hover { color: var(--text-strong); text-decoration: none; } }
.sb-wz-prog { display: flex; flex-direction: column; gap: var(--space-2); }
.sb-wz-count { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: 0.02em; color: var(--text-soft); }
.sb-wz-count b { font-variant-numeric: tabular-nums; }
.sb-wz-count b { font-weight: var(--fw-semibold); color: var(--text); }
.sb-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
/* the nine steps grouped into their three chapters: each chapter labels its
   own run of segments, so "where am I" is answered by the rail itself */
.sb-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.sb-chapter { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.sb-chapter-t { font-size: var(--text-2xs, 11px); font-weight: var(--fw-semibold); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur) var(--ease); }
.sb-chapter.is-done .sb-chapter-t { color: var(--text-muted); }
.sb-chapter.is-now .sb-chapter-t { color: var(--primary-600); }
.sb-segs { display: flex; gap: 4px; }
.sb-seg { flex: 1; display: block; height: 6px; border-radius: var(--radius-full); background: var(--gray-150); overflow: hidden; }
.sb-seg-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--primary-600); transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-enter); }
.sb-seg-fill.on { transform: scaleX(1); }

.sb-wz-body { padding: var(--space-6) 0 var(--space-2); animation: sbStepIn var(--dur-slow) var(--ease-enter); }
@keyframes sbStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sb-wz-body h1 { margin-bottom: var(--space-1); font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); }
.sb-lead { margin-bottom: var(--space-6); color: var(--text-soft); line-height: var(--leading-relaxed); }
.sb-help { display: block; margin-top: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-soft); }
.sb-help svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; color: var(--success-600); }
.sb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
.sb-span2 { grid-column: span 2; }
.sb-field { display: flex; flex-direction: column; gap: var(--space-2); }
/* every field label is a question the client is answering — size it like one */
.sb-field > span { font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: var(--leading-snug); color: var(--text); }
.sb-field > span small { font-weight: var(--fw-regular); color: var(--text-soft); }
.sb-field > span b { font-weight: var(--fw-semibold); color: var(--danger-600); }
.sb-field textarea.input { min-height: 64px; }

/* footer: Back · (shortcut) · Next — sticks to the bottom of the card while a long step scrolls */
.sb-wz-foot { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-2-5); margin: var(--space-4) calc(-1 * var(--space-8)) 0; padding: var(--space-3-5) var(--space-8); border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }
.sb-cta { height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: var(--fw-semibold); }
.sb-cta--back { padding: 0 var(--space-5) 0 var(--space-4); font-weight: var(--fw-medium); }

/* 1 · industry: one search bar, matches listed underneath */
.sb-tsearch { display: flex; width: 100%; min-width: 0; height: 48px; padding: 0 var(--space-3-5); border-radius: var(--radius-lg); }
.sb-tsearch input { font-size: var(--text-base); }
.sb-tresults { display: grid; gap: var(--space-1-5); margin-top: var(--space-3); }
.sb-tresults:empty { display: none; }
.sb-tresults + .sb-help { margin-top: var(--space-3); }
.sb-tresults:not(:empty) + .sb-help { margin-top: var(--space-2); }
.sb-tres {
  display: flex; align-items: center; gap: var(--space-3-5); min-height: 64px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--btn-shadow-card);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: left; color: var(--text-strong);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* the trade icon sits in its own bordered square, like a choice card */
.sb-tres > svg { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); background: var(--surface); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sb-tres-label { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sb-tres-label small { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tres-tick { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-xs); background: var(--primary-600); color: var(--on-primary); }
.sb-tres-tick svg { width: 12px; height: 12px; stroke-width: 3; }
@media (hover: hover) and (pointer: fine) {
  .sb-tres:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .sb-tres:hover > svg { color: var(--primary-600); border-color: var(--primary-200); }
}
.sb-tres:focus-visible, .sb-tres.is-hi { outline: none; border-color: var(--primary-400); box-shadow: var(--ring-primary); }
.sb-tres.is-on { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); }
.sb-tres.is-on > svg { color: var(--primary-600); border-color: var(--primary-200); background: var(--primary-50); }
html[data-theme="dark"] .sb-tres.is-on > svg { background: rgba(255, 255, 255, 0.05); }

/* 2 · place suggestions under the city field */
.sb-place { position: relative; }
.sb-suggest { position: absolute; left: 0; right: 0; top: calc(100% - 18px); z-index: var(--z-popover); max-height: 260px; overflow: auto; }
.sb-suggest .filter-opt { display: flex; align-items: center; gap: var(--space-2-5); flex: 0 0 auto; height: 42px; }
.sb-suggest .filter-opt > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-soft); }
.sb-suggest .filter-opt > span { flex: 1; min-width: 0; text-align: left; }
.sb-suggest .filter-opt small { font-size: var(--text-xs); color: var(--text-soft); white-space: nowrap; }
.sb-suggest .filter-opt.is-hi { background: var(--nav-hover-bg); }

/* chips: soft filled pills; a chosen one gets the brand outline (a number on the first six services) */
.sb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sb-chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-sunk);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sb-chip-tick { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sb-chip:hover { background: var(--gray-100); }
  /* a picked chip only deepens on hover, so the click lands on the real
     selected state instead of a tint that looks like a near-miss */
  .sb-chip.is-on:hover { background: var(--primary-700); }
}
.sb-chip:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .sb-chip:active { transform: none; } }
.sb-chip:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.sb-chip.is-on { border-color: transparent; background: var(--primary-600); color: var(--on-primary); }
html[data-theme="dark"] .sb-chip { background: var(--gray-100); }
html[data-theme="dark"] .sb-chip.is-on { background: var(--primary-600); }
.sb-chips--lg .sb-chip { height: 40px; padding: 0 16px; }
.sb-chips--sm .sb-chip { height: 30px; padding: 0 10px; font-size: var(--text-xs); }
.sb-chip-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-right: -6px; border-radius: var(--radius-full); background: var(--primary-600); font-size: var(--text-3xs, 10px); font-weight: var(--fw-semibold); font-style: normal; color: var(--on-primary); }
.sb-chip-n--soft { background: var(--surface); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.sb-chip.is-on .sb-chip-n { background: var(--on-primary); color: var(--primary-600); }
.sb-chip.is-on .sb-chip-n--soft { background: rgba(255, 255, 255, 0.22); color: var(--on-primary); box-shadow: none; }
/* "add one" row above a chip list, with suggestions dropping from the input */
.sb-addrow { position: relative; display: flex; gap: var(--space-2); margin-bottom: var(--space-3-5); }
/* what the areas field has picked (regions first, then hand-added towns) */
.sb-picked:empty { display: none; }
.sb-picked { margin-bottom: var(--space-3); }
.sb-addrow .input { flex: 1; min-width: 0; }
.sb-addrow .btn { flex-shrink: 0; }
.sb-suggest--row { top: calc(100% + 4px); right: auto; width: min(100%, 440px); }
/* chips that only remove (typed-in extras) */
.sb-chip--x { padding-left: 12px; }
/* selected-service TAGS are light (Attio tags) — the filled-dark treatment
   belongs to active radio/checkbox chips alone, so the form keeps one
   emphasis level per control group */
.sb-chip--x.is-on { background: var(--gray-100); border-color: transparent; color: var(--text); }
.sb-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -4px; border-radius: 50%; color: currentColor; opacity: 0.7; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.sb-chip-x svg { width: 11px; height: 11px; stroke-width: 2.5; }
@media (hover: hover) and (pointer: fine) {
  /* a tag stays a light tag on hover (outranks .sb-chip.is-on:hover, which
     would otherwise paint it primary-700 under dark text) */
  .sb-chip--x.is-on:hover { background: var(--gray-50); border-color: var(--border-strong); color: var(--text); }
  .sb-chip--x:hover .sb-chip-x { opacity: 1; }
  /* the red lives on the × alone, so the chip reads "remove" only where the click removes */
  .sb-chip--x .sb-chip-x:hover { background: var(--danger-600); color: var(--text-invert); }
}

/* 4 · services: a labelled main block, then a quieter "Fine-tune" panel for the two optional questions */
.sb-block { margin-top: var(--space-7); }
.sb-block:first-of-type { margin-top: 0; }
.sb-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.sb-block-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text); }
.sb-block-meta { font-size: var(--text-xs); color: var(--text-soft); text-align: right; }
/* tag-select: chosen items as tags inside one field, a text input to filter/add, a chevron to open the list */
.sb-tagsel { position: relative; display: flex; align-items: center; height: 40px; padding: 0 40px 0 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--btn-shadow); cursor: text; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sb-tagsel:focus-within { border-color: var(--primary-400); box-shadow: var(--ring-primary); }
/* the picks sit under the field, in pick order */
.sb-tagsel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.sb-tagsel-tags:empty { display: none; }
.sb-tag { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 10px; border-radius: var(--radius-sm); background: var(--surface-sunk); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; }
html[data-theme="dark"] .sb-tag { background: var(--gray-100); }
.sb-tag-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-xs); color: var(--text-soft); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sb-tag-x svg { width: 12px; height: 12px; stroke-width: 2.5; }
@media (hover: hover) and (pointer: fine) {
  .sb-tag-x:hover { background: var(--gray-200); color: var(--text-strong); }
}
.sb-tagsel-input { flex: 1 1 140px; min-width: 140px; height: 30px; padding: 0 6px; border: 0; outline: none; background: transparent; font-size: var(--text-sm); font-family: inherit; color: var(--text); }
.sb-tagsel-input:focus, .sb-tagsel-input:focus-visible { outline: none; box-shadow: none; }
.sb-tagsel-input::placeholder { color: var(--text-soft); }
.sb-tagsel-chev { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-soft); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sb-tagsel-chev svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .sb-tagsel-chev:hover { background: var(--gray-100); color: var(--text); }
}
.sb-tagsel-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-popover); max-height: min(420px, 52vh); padding: var(--space-2); overflow: auto; }
.sb-tagsel-menu .filter-opt { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; height: 46px; padding: 0 var(--space-3); border-radius: var(--radius-md); }
.sb-tagsel-menu .filter-opt > span { flex: 1; text-align: left; }
.sb-tagsel-menu .filter-opt > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--primary-600); }
.sb-tagsel-menu .filter-opt.is-on { color: var(--primary-tint-fg); }
.sb-tagsel-menu .filter-opt.is-hi { background: var(--surface-hover); }
.sb-tagsel-menu .sb-tagsel-add > svg { color: var(--text-muted); }
.sb-tagsel-menu .menu-empty { padding: var(--space-3); font-size: var(--text-sm); color: var(--text-soft); }

/* the two standalone follow-up questions under the services */
.sb-push { margin-top: var(--space-7); }
.sb-push[hidden] { display: none; }
/* the wizard won't move on without this pick — say so without shouting */
.sb-push.is-error > span { color: var(--danger-600); }
.sb-push.is-error .sb-chip, .sb-push.is-error .sb-priority-toggle { box-shadow: inset 0 0 0 1px var(--danger-300); }
.sb-price { margin-top: var(--space-7); }
/* the live readout above the track ("Around average") */
.sb-range-value { display: block; margin-top: var(--space-1); font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--primary-600); }
.sb-block .sb-addrow { margin-bottom: var(--space-3); }
.sb-block .sb-addrow .input { height: 36px; font-size: var(--text-sm); }
.sb-block .sb-addrow .btn { height: 36px; font-size: var(--text-sm); }
.sb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: var(--space-1) 0 0; background: transparent; cursor: pointer; }
.sb-range:focus { outline: none; }
.sb-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--gray-200), var(--primary-200) 50%, var(--gray-200)); }
.sb-range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--gray-200), var(--primary-200) 50%, var(--gray-200)); }
.sb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-600); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.sb-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-600); box-shadow: var(--shadow-sm); }
.sb-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring-primary); }
.sb-range:focus-visible::-moz-range-thumb { box-shadow: var(--ring-primary); }
.sb-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.sb-range-labels { display: flex; justify-content: space-between; margin-top: 2px; font-size: var(--text-xs); color: var(--text-soft); }
.sb-range-labels span:nth-child(2) { font-weight: var(--fw-semibold); color: var(--text-muted); }

/* 3 · contact: leading icons in the fields, hours, the two switches */
.sb-inwrap { position: relative; display: block; }
.sb-inwrap > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.sb-inwrap .input { padding-left: 36px; }
.sb-hours-custom { margin-top: var(--space-2); max-width: 360px; }
.sb-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); cursor: pointer; }
.sb-switch-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.sb-switch-row b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-switch-row small { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-soft); }
/* Review badges (the section panel): the platform's mark and name, its rating (a choice, or the connected
   listing's live figures) and a switch, one quiet row per platform */
.sb-proof-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-2-5); row-gap: var(--space-1); align-items: center; padding: var(--space-2-5) var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.sb-proof-mark { grid-row: 1 / span 2; display: inline-flex; width: 20px; height: 20px; }
.sb-proof-mark svg { width: 20px; height: 20px; }
.sb-proof-name { grid-column: 2; grid-row: 1; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-proof-detail { grid-column: 2; grid-row: 2; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-soft); }
.sb-proof-rating { grid-column: 2; grid-row: 2; justify-self: start; width: auto; min-width: 0; height: 30px; padding-right: var(--space-6); font-size: var(--text-xs); }
.sb-proof-row > .switch { grid-column: 3; grid-row: 1 / span 2; }
.sb-proof-row.is-off .sb-proof-name, .sb-proof-row.is-off .sb-proof-detail, .sb-proof-row.is-off .sb-proof-rating, .sb-proof-row.is-off .sb-proof-mark { opacity: .45; }

/* 5 · service areas: area chips are the whole answer (the suburbs behind each
   one are never edited by hand) — plus a row for towns added by hand */
.sb-regions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.sb-subgrps { display: grid; gap: var(--space-2); }
.sb-subgrp { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.sb-subgrp-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.sb-subgrp-head b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-subgrp-head small { flex: 1; font-size: var(--text-xs); color: var(--text-soft); }
.sb-subgrp > .sb-chips { padding: 0 var(--space-3-5) var(--space-3); }

/* 6 · USPs: the extra fields some USPs need */
.sb-usp-extra { margin-bottom: var(--space-4); }
.sb-usp-fields { margin-top: var(--space-4); }
.sb-usp-fields[hidden] { display: none; }

/* 7 · brand: logo drop beside the palette cards */
.sb-brand-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sb-drop--logo { min-height: 200px; }
.sb-drop--logo img { max-width: 80%; max-height: 120px; object-fit: contain; }
/* the Details-row brand editor previews the logo small — never a billboard */
.sb-drop--compact { min-height: 120px; }
.sb-drop--compact img { max-width: min(60%, 280px); max-height: 88px; object-fit: contain; }
.sb-drop-remove { position: absolute; right: 6px; bottom: 4px; font-size: var(--text-xs); }
.sb-pal-group { margin-bottom: var(--space-3-5); }
.sb-pal-title { display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.sb-pal-title svg { width: 12px; height: 12px; color: var(--brand-gold); }
.sb-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.sb-pals > * { min-width: 0; }
.sb-pals--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1-5); }
/* the editor panel is narrow: smaller chip, smaller name, the ring alone marks the pick */
.sb-pals--sm .sb-pal { min-height: 36px; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); }
.sb-pals--sm .sb-sw2 { width: 24px; height: 24px; }
.sb-pals--sm .sb-sw2 i { width: 12px; height: 12px; right: -2px; bottom: -2px; }
.sb-pals--sm .sb-pal-name { font-size: var(--text-xs); }
.sb-pals--sm .sb-pal-tick { display: none !important; }
/* a palette row: swatch chip · name · tick when chosen */
.sb-pal {
  display: flex; align-items: center; gap: var(--space-2-5); min-height: 44px;
  padding: var(--space-1-5) var(--space-2-5) var(--space-1-5) var(--space-1-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sb-pal:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
}
.sb-pal:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.sb-pal.active { border-color: var(--primary-400); box-shadow: var(--ring-primary); }
.sb-pal-name { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-pal-tick { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--text-strong); color: var(--surface); flex-shrink: 0; }
.sb-pal-tick svg { width: 11px; height: 11px; }
.sb-pal.active .sb-pal-tick { display: inline-flex; }
/* the swatch chip: primary disc, accent disc over its corner (--p / --a) */
.sb-sw2 { position: relative; display: block; flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--p); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.sb-sw2 i { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--a); border: 2px solid var(--surface); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.sb-sw2.is-solid i { display: none; }

/* 8 · photo thumbs with the sorted-kind pill */
.sb-thumb-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--overlay-media); color: var(--text-invert); display: inline-flex; align-items: center; justify-content: center; }
.sb-thumb-x svg { width: 12px; height: 12px; }
.sb-ptag { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); height: 22px; padding: 0 8px; border-radius: var(--radius-full); background: var(--overlay-dark); color: #fff; font-size: var(--text-3xs, 10px); font-weight: var(--fw-semibold); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-sm); }
.sb-ptag svg { width: 11px; height: 11px; flex-shrink: 0; }
.sb-ptag .spinner { width: 10px; height: 10px; border-width: 1.5px; border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
.sb-ptag.is-hero { background: var(--brand-gold); color: #1b1b23; }
.sb-ptag--by { left: auto; right: 6px; background: var(--surface); color: var(--text-muted); }   /* "Added by Magnet" — the agency put it in from the client record */
.sb-ptag.is-unknown { background: var(--surface); color: var(--text-muted); border: 1px dashed var(--border-strong); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  button.sb-ptag:hover { filter: brightness(1.12); }
}
.sb-tagmenu { position: absolute; left: 6px; top: auto; bottom: 32px; /* .filter-menu sets top — without top:auto both apply and the box collapses */ z-index: var(--z-popover); min-width: 180px; }
.sb-tagmenu .filter-opt.is-on { color: var(--primary-tint-fg); }
.sb-tagmenu .filter-opt svg { width: 14px; height: 14px; margin-left: auto; }
.sb-drop.is-busy { opacity: 0.6; pointer-events: none; }

/* 9 · review rows */
.sb-review { display: grid; gap: var(--space-2); }
.sb-rv { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.sb-rv-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.sb-rv-ico svg { width: 15px; height: 15px; }
.sb-rv-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sb-rv-body > b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-rv-val { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-muted); overflow-wrap: anywhere; }
.sb-rv-val small { font-size: var(--text-xs); color: var(--text-soft); }
.sb-rv-none { color: var(--text-soft); font-style: italic; }
.sb-rv-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sb-rv-chips span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--text); }
.sb-rv-brand { display: inline-flex; align-items: center; gap: var(--space-2-5); }
.sb-rv-brand img { max-height: 28px; max-width: 110px; object-fit: contain; }
.sb-chips-sw { display: inline-flex; gap: 3px; }
.sb-chips-sw i { display: inline-block; width: 18px; height: 18px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.sb-rv-photos { display: inline-flex; align-items: center; gap: 4px; }
.sb-rv-photos img { width: 40px; height: 30px; border-radius: var(--radius-xs); object-fit: cover; }
.sb-rv .btn { flex-shrink: 0; margin: -2px -6px 0 0; }

/* drop zone — the portal onboarding's .onb-drop recipe */
.sb-drop {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 190px; padding: var(--space-5);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-sunk);
  cursor: pointer; outline: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sb-drop:hover { border-color: var(--primary-400); background: var(--primary-50); }
}
.sb-drop:focus-visible, .sb-drop.is-over { border-color: var(--primary-400); background: var(--primary-50); box-shadow: none; }
/* --primary-50 is a near-white tint: on dark it blows out the panel, so dark gets a subtle lift instead (as onb-drop) */
html[data-theme="dark"] .sb-drop:hover, html[data-theme="dark"] .sb-drop:focus-visible,
html[data-theme="dark"] .sb-drop.is-over { background: rgba(255, 255, 255, 0.045); }
.sb-drop--wide { min-height: 160px; }
.sb-drop--compact { min-height: 120px; }
.sb-drop-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--text-soft); }
/* an author display rule outranks the UA [hidden] rule - say it explicitly */
.sb-drop [hidden] { display: none !important; }
.sb-drop:has(> img:not([hidden])) { padding-bottom: var(--space-6); }
.sb-drop-inner b { font-weight: var(--fw-semibold); color: var(--text); }
.sb-drop-inner small { font-size: var(--text-xs); color: var(--text-soft); }
.sb-drop-ico { width: 44px; height: 44px; margin-bottom: var(--space-1-5); border-radius: 50%; background: var(--gray-100); color: var(--text-soft); display: flex; align-items: center; justify-content: center; }
.sb-drop-ico .ic svg { width: 20px; height: 20px; }
#logoPreview2 { max-width: 80%; max-height: 70px; object-fit: contain; }
#logoRemove2 { position: absolute; right: 6px; bottom: 4px; font-size: var(--text-xs); }

/* custom colour (wizard + Brand panel); the palette cards live in the wizard block below */
.sb-custom { margin-top: var(--space-3); }
/* own-colour picker: trigger button + curated grid popover */
.sb-cp-host { position: relative; }
.sb-cp-btn {
  display: inline-flex; align-items: center; gap: var(--space-2-5); max-width: 100%; min-height: 40px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .sb-cp-btn:hover { border-color: var(--border-strong); background: var(--surface-sunk); } }
.sb-cp-btn:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.sb-cp-dot { display: block; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); flex-shrink: 0; }
.sb-cp-hex { font-family: ui-monospace, Menlo, monospace; font-size: var(--text-xs); color: var(--text-soft); }
.sb-cp { position: fixed; top: auto; left: auto; width: 292px; padding: var(--space-3); gap: var(--space-3); }
.sb-cp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.sb-cp-sw { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--radius-xs); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); cursor: pointer; transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .sb-cp-sw:hover { transform: scale(1.18); z-index: 1; } }
.sb-cp-sw:focus-visible { outline: none; box-shadow: var(--ring-primary); z-index: 1; }
.sb-cp-sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-strong); z-index: 1; }
.sb-cp-row { display: flex; align-items: center; gap: var(--space-2); }
.sb-cp-hexfield { flex: 1; min-width: 0; }
.sb-cp-hexfield > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-cp-hexfield .input { font-family: ui-monospace, Menlo, monospace; height: 36px; }
.sb-cp-more { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); cursor: pointer; overflow: hidden; }
.sb-cp-more input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sb-cp-sw { transition: none; } }

/* photo thumbs (wizard photos step + the Photos panel) */
.sb-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-2-5); margin-top: var(--space-3-5); }
.sb-thumb, .sb-ph { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-200); }
.sb-thumb { overflow: visible; }
.sb-thumb img, .sb-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.sb-ph button { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--overlay-media); color: var(--text-invert); display: inline-flex; align-items: center; justify-content: center; }
.sb-ph button svg { width: 12px; height: 12px; }

/* ---------- building --------------------------------------------------- */
#building { display: flex; align-items: center; justify-content: center; padding: var(--space-10) var(--space-5); }
.sb-building {
  width: 100%; max-width: 460px; padding: var(--space-10); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
  animation: sbCardIn 420ms var(--ease-enter);
}
.sb-building .spinner { margin: 0 auto var(--space-4); }
.sb-building h2 { margin-bottom: var(--space-4); font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--text-strong); }
.sb-build-steps { display: grid; gap: var(--space-2); text-align: left; }
.sb-build-steps li { position: relative; padding-left: 26px; color: var(--text-soft); transition: color var(--dur) var(--ease); }
.sb-build-steps li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sb-build-steps li.done { color: var(--text); }
.sb-build-steps li.done::before { border-color: var(--primary-600); background: var(--primary-600); }
#skipBuild { margin-top: var(--space-4); color: var(--text-soft); }

/* ---------- editor: frame -------------------------------------------- */
#editor { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: 100%; overflow: hidden; background: var(--surface); }
/* the page-header row of the CRM shell: same height, so it lines up if the
   builder is mounted next to the sidebar */
.sb-topbar { display: flex; align-items: center; gap: var(--space-4); height: var(--shell-header-height); padding: 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.sb-tb-left { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.sb-crumb { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; font-size: var(--text-base); }
.sb-crumb .ico { display: inline-flex; color: var(--text-strong); }
.sb-crumb .ico svg { width: 19px; height: 19px; }
.sb-crumb .seg { font-weight: var(--fw-medium); color: var(--text-soft); white-space: nowrap; }
.sb-crumb .seg.cur { font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.sb-crumb .sep { color: var(--text-soft); }
.sb-tb-center { display: flex; align-items: center; gap: var(--space-3); }
.sb-tb-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); flex: 1; }
.sb-seg-icons button { display: inline-flex; align-items: center; padding: 0 9px; }
.sb-seg-icons .ic svg, .sb-seg-icons > button > svg { width: 17px; height: 17px; }
.sb-vsep { width: 1px; height: 22px; margin: 0 var(--space-2); background: var(--border); }
.sb-readout { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sb-readout small { margin-left: 2px; font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--text-soft); }
.sb-readout .sep { color: var(--border-strong); }
.sb-readout .pct { min-width: 56px; padding: 2px 6px; border-radius: var(--radius-xs); font: inherit; line-height: 1; text-align: left; color: var(--text-muted); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sb-readout .pct:hover { background: var(--gray-100); color: var(--text); }
}
.sb-readout.auto .pct { color: var(--text); }
.sb-menu { position: relative; }
.sb-menu-list { left: auto; right: 0; top: calc(100% + 6px); }
/* page switcher (Home / Services / each service / About / Contact) */
.sb-pages { flex: 0 0 auto; }
.sb-pages-btn { gap: var(--space-1-5); max-width: 220px; }
.sb-pages-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-pages-btn .ic svg { width: 16px; height: 16px; }
.sb-pages-chev { color: var(--text-soft); }
.sb-pages-list { left: 0; right: auto; min-width: 220px; max-height: 60vh; overflow-y: auto; }
.sb-pages-list .filter-opt.is-active > span:first-child { font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-pages-list .filter-opt svg { width: 14px; height: 14px; flex-shrink: 0; }
.sb-pages-list .filter-opt > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.sb-pages-sep { margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3) var(--space-1); border-top: 1px solid var(--border-faint); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.sb-pages-sep:empty { padding: 0; margin-top: var(--space-1); }
.filter-opt.sb-danger, .filter-opt.sb-danger > span:first-child { color: var(--danger-600); }
@media (hover: hover) and (pointer: fine) {
  .filter-opt.sb-danger:hover { background: var(--danger-bg); }
}

/* the right panel's width: its stylesheet width is the floor and the default; a wider choice (the grip on its
   left edge, siteBuilderCore panelGrip) rides on --sb-panel-w */
.sb-workspace { --sb-panel-min-w: 300px; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) max(var(--sb-panel-min-w), var(--sb-panel-w, var(--sb-panel-min-w))); min-height: 0; }
@media (max-width: 1280px) { .sb-workspace { --sb-panel-min-w: 268px; } }
/* "safe center" keeps the page centred while it fits, but falls back to the start edge when it is wider
   than the stage - plain `center` overflows equally both ways and the left edge becomes unreachable. */
.sb-stage {
  overflow: auto; min-height: 0; padding: var(--space-7);
  display: flex; justify-content: center; justify-content: safe center; align-items: safe flex-start;
  background-color: var(--gray-100);
  background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1px);
  background-size: 18px 18px; background-position: 9px 9px;
}
.sb-canvas-sizer { position: relative; flex: 0 0 auto; }
/* the site's own page — theme-constant white, it isn't CRM chrome */
.sb-canvas-wrap { position: absolute; top: 0; left: 0; transform-origin: top left; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.sb-canvas-wrap.switching #canvas { opacity: 0; transition: none; }
#canvas { display: block; width: 100%; height: 800px; border: 0; transition: opacity var(--dur-fast) var(--ease); }
/* a re-render loads underneath the page on screen and takes its place once styled (render() in
   siteBuilderCore.js); meanwhile the page it replaces takes no clicks, so nothing is edited into it. Stacked
   below (it comes first in the wrap, and the page on screen is positioned too, so it paints over it), not
   faded out: #canvas fades its opacity, and a swap must not fade in */
.sb-canvas-next { position: absolute; top: 0; left: 0; display: block; width: 100%; border: 0; pointer-events: none; }
#canvas.sb-canvas-stale { position: relative; pointer-events: none; }
/* the right panel's rows describe the page being replaced until the swap: no clicks into them meanwhile */
.sb-panel.sb-panel-busy .sb-rp-body { pointer-events: none; }

/* ---------- editor: right panel -------------------------------------- */
.sb-panel { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--border); }
/* drag the panel's left edge to widen it (double-click puts it back); the line lights on hover and while dragging */
.sb-panel-grip { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; z-index: var(--z-sticky); cursor: col-resize; touch-action: none; }
.sb-panel-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: var(--primary-400); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.sb-panel-grip.is-dragging::after, .sb-panel-grip:focus-visible::after { opacity: 1; }
.sb-panel-grip:focus { outline: none; }
@media (hover: hover) and (pointer: fine) { .sb-panel-grip:hover::after { opacity: 1; } }
body.sb-resizing { cursor: col-resize; user-select: none; }
body.sb-resizing .sb-stage, body.sb-resizing #canvas { pointer-events: none; }
/* Tools live at the top of the one panel: Add / Photos / Brand open over the same panel body. */
.sb-tools { display: flex; align-items: center; gap: var(--space-1); margin: 0 var(--space-4); padding: var(--space-2-5) 0; border-bottom: 1px solid var(--border-faint); flex: 0 0 auto; }
.sb-tool { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); background: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sb-tool .ic { display: inline-flex; } .sb-tool .ic svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .sb-tool:hover { color: var(--text-strong); } }
.sb-tool:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.sb-tool.active { background: var(--surface-sunk); color: var(--text-strong); font-weight: var(--fw-semibold); }
.sb-tool--ico { margin-left: auto; padding: 0 var(--space-2); }
.sb-tool--ico .ic svg { width: 16px; height: 16px; }
.sb-rp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sb-rp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 var(--space-4); padding: var(--space-3) 0 var(--space-1); }
.sb-rp-head b { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-rp-body { flex: 1; overflow: auto; padding: var(--space-3) var(--space-4) var(--space-6); }
.sb-hint { margin: 0 0 var(--space-2-5); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-soft); }
.sb-howto-label { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-hint--gap { margin-top: var(--space-3-5); }
/* What you can do here: an icon tile per action, title over a quiet one-liner. */
.sb-howto { display: grid; gap: var(--space-0-5); margin: 0; padding: 0; list-style: none; }
.sb-howto li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; padding: var(--space-3) 0; }
.sb-howto li + li { border-top: 1px solid var(--border-faint); }
.sb-howto-ico { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-sunk); color: var(--text-muted); }
.sb-howto-ico .ic svg { width: 16px; height: 16px; display: block; }
.sb-howto li > span:last-child { display: grid; gap: var(--space-1); min-width: 0; }
.sb-howto b { font-size: var(--text-sm); line-height: 20px; font-weight: var(--fw-medium); color: var(--text-strong); }
.sb-howto small { font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.sb-rp .sb-field { margin-bottom: var(--space-4); }
.sb-rp .sb-field > span { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }

.sb-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1-5); }
.sb-swatches button {
  display: flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-2-5);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--btn-shadow-card);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sb-swatches button:hover { border-color: var(--border-strong); }
}
.sb-swatches button.active { border-color: var(--primary-400); background: var(--primary-50); color: var(--primary-tint-fg); }
.sb-sw { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.sb-sw--reset { background: linear-gradient(135deg, var(--surface) 45%, var(--danger-600) 50%, var(--surface) 55%); }
.sb-wide { width: 100%; justify-content: flex-start; margin-bottom: var(--space-2); }

.sb-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-content: start; }
.sb-ph { border: 2px solid transparent; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sb-ph:hover { border-color: var(--primary-400); }
}
/* Delete sits on the thumbnail; hover-only where there is a pointer, always there on touch */
.sb-ph--pick button svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .sb-ph--pick button { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
  .sb-ph--pick:hover button, .sb-ph--pick button:focus-visible { opacity: 1; }
}
.sb-ph-add { display: flex; align-items: center; justify-content: center; gap: var(--space-1); border: 1.5px dashed var(--border-strong); background: var(--surface-sunk); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.sb-ph-add svg { width: 16px; height: 16px; }
.sb-ph-add.is-over { border-color: var(--primary-500); border-style: solid; background: var(--primary-50); color: var(--primary-600); }
html[data-theme="dark"] .sb-ph-add.is-over { background: rgba(255, 255, 255, 0.045); }

/* ---------- editor: inspector groups ----------------------------------- */
/* Collapsible group per the properties-panel pattern: title left, count + chevron right,
   a hairline between groups so the eye can find the boundaries. */
.sb-grp { border-bottom: 1px solid var(--border); }
.sb-grp:last-of-type { border-bottom: 0; }
.sb-grp > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); cursor: pointer; list-style: none; user-select: none; }
.sb-grp > summary::-webkit-details-marker { display: none; }
.sb-grp > summary:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; border-radius: var(--radius-sm); }
.sb-grp > summary > span:first-child { flex: 1; }
.sb-grp > summary .chev { width: 16px; height: 16px; color: var(--text-soft); transition: transform var(--dur-fast) var(--ease); }
.sb-grp[open] > summary .chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .sb-grp > summary:hover { color: var(--primary-600); }
}
.sb-grp-body { padding-bottom: var(--space-3); }


/* ---------- editor: section content rows ------------------------------- */
.sb-fs-title { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2-5); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.sb-fs-title:first-child { margin-top: var(--space-1); }
.sb-fs-hint { margin: -4px 0 var(--space-2-5); }
/* bulk drop at the top of a gallery's Photos group: room below it, and the hint after it sits normally */
.sb-drop--gallery { margin: 0 0 var(--space-3); }
.sb-drop--gallery + .sb-fs-hint { margin-top: 0; }
/* the landing hero's Video group: the drop shows the player's first frame once a video is in */
.sb-drop--vsl { margin: 0 0 var(--space-2); }
.sb-drop--vsl.is-uploading { cursor: progress; }
.sb-drop--vsl.is-uploading .spinner { margin-bottom: var(--space-2); }
/* a VSL is in: the frame IS the video (16:9, edge to edge), Replace / Remove on a soft bar over its foot */
.sb-drop--vsl.has-video { position: relative; display: block; aspect-ratio: 16 / 9; min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-ink); }
.sb-drop--vsl.has-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sb-vsl-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: var(--space-1-5); padding: var(--space-6) var(--space-2) var(--space-2); background: linear-gradient(to top, var(--overlay-media-strong), transparent); }
.sb-vsl-act { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--overlay-media); color: var(--text-invert); font-size: var(--text-xs); font-weight: var(--fw-medium); backdrop-filter: blur(6px); transition: background var(--dur) var(--ease); }
.sb-vsl-act svg { width: 12px; height: 12px; }
.sb-vsl-act:focus-visible { outline: 2px solid var(--text-invert); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .sb-vsl-act:hover { background: var(--overlay-media-strong); } }
.sb-drop--vsl.has-video.is-over { outline: 2px solid var(--info-600); outline-offset: 2px; }
.sb-f { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2-5); }
.sb-f > span { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.sb-f textarea.input { min-height: 0; padding: 8px 12px; font-size: var(--text-sm); line-height: var(--leading-snug); resize: none; }
/* Image field: a drop box that previews the current photo behind the prompt */
.sb-drop--field { position: relative; min-height: 104px; padding: var(--space-3); overflow: hidden; border-radius: var(--radius-lg); }
/* the photo shows at full strength under a dark media scrim with inverted type — a light wash over a
   photo was unreadable (the same rule the sites' own photo-overlay sections follow) */
.sb-drop--field .sb-drop-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-drop--field::after { content: ""; position: absolute; inset: 0; background: var(--overlay-media); transition: background var(--dur-fast) var(--ease); }
.sb-drop--field .sb-drop-inner { position: relative; z-index: 1; color: var(--text-invert); }
.sb-drop--field .sb-drop-inner svg { width: 18px; height: 18px; margin-bottom: var(--space-0-5); color: var(--text-invert); }
.sb-drop--field .sb-drop-inner b, .sb-drop--field .sb-drop-inner small { color: var(--text-invert); text-shadow: 0 1px 2px var(--overlay-media-strong); }
.sb-drop--field .sb-drop-inner small { opacity: 0.85; }
@media (hover: hover) and (pointer: fine) {
  .sb-drop--field:hover::after { background: var(--overlay-media-strong); }
}
.sb-drop--field.is-over::after { background: var(--overlay-media-strong); }
.sb-stars { display: inline-flex; gap: 2px; }
.sb-stars button { display: inline-flex; padding: 2px; color: var(--gray-300); transition: color var(--dur-fast) var(--ease); }
.sb-stars button.active { color: var(--warning-600); }
.sb-stars svg { width: 20px; height: 20px; }

/* one repeated thing (a review, a service, a step…) — a collapsible row with a drag handle */
.sb-item { margin-bottom: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--btn-shadow-card); }
.sb-item summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); padding: 9px 10px; border-radius: var(--radius-lg); font-size: var(--text-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.sb-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sb-item summary:hover { background: var(--surface-hover); }
}
.sb-item[open] summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.sb-item .k { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--gray-100); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.sb-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-medium); color: var(--text); }
/* open / close motion for the panel's accordions (groups + items): the chevron turns, the body slides
   and fades in; closing is animated from JS (a <details> closes instantly on its own) */
.sb-item .chev, .sb-grp > summary .chev { transition: transform var(--dur-slow) var(--ease); }
.sb-item[open] > summary .chev { transform: rotate(180deg); }
.sb-item .body, .sb-grp > .body { overflow: hidden; }
.sb-item[open] > .body, .sb-grp[open] > .body { animation: sb-acc-open var(--dur-slow) var(--ease); }
.sb-acc-closing > .body { animation: sb-acc-close var(--dur-fast) var(--ease) forwards; }
@keyframes sb-acc-open { from { opacity: 0; transform: translateY(-4px); max-height: 0; } to { opacity: 1; transform: none; max-height: 1200px; } }
@keyframes sb-acc-close { from { opacity: 1; max-height: 1200px; } to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-item .chev, .sb-grp > summary .chev { transition: none; } .sb-item[open] > .body, .sb-grp[open] > .body, .sb-acc-closing > .body { animation: none; } }
.sb-item .tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.sb-item:hover .tools, .sb-item[open] .tools, .sb-item summary:focus-within .tools { opacity: 1; }
@media (hover: none) { .sb-item .tools { opacity: 1; } }
.sb-item .grip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 22px; margin: 0 -2px 0 -4px; border-radius: var(--radius-xs); color: var(--gray-400); cursor: grab; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sb-item .grip:hover { background: var(--gray-100); color: var(--text-muted); }
}
.sb-item .grip:active { cursor: grabbing; }
.sb-item .grip svg { width: 14px; height: 14px; }
.sb-item.dragging { opacity: 0.4; }
.sb-item.drop-before { box-shadow: 0 -2px 0 0 var(--primary-600); }
.sb-item.drop-after { box-shadow: 0 2px 0 0 var(--primary-600); }
.sb-item .chev { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-soft); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sb-item[open] .chev { transform: rotate(180deg); color: var(--text); }
.sb-item .body { padding: var(--space-2-5) var(--space-2-5) 2px; }

@media (hover: hover) and (pointer: fine) {
}

/* ---------- section library (modal) ------------------------------------ */
/* Business details dialog: a small centred sheet on the builder's scrim */
.sb-dlg { position: fixed; z-index: calc(var(--z-modal) + 1); top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2 * var(--space-5))); max-height: calc(100vh - 2 * var(--space-6)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.sb-dlg-body { flex: 1; overflow: auto; padding: var(--space-5); }
.sb-dlg-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-sunk); }
.sb-dlg .sb-field span .sb-hint { margin-left: var(--space-1); font-weight: var(--fw-regular); }

.sb-dim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--sheet-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sb-lib {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: calc(var(--z-modal) + 1);
  width: min(1120px, 94vw); height: min(86vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
  animation: sbPop var(--dur) var(--ease);
}
@keyframes sbPop { from { transform: translate(-50%, -50%) scale(.98); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.sb-lib-sub { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: var(--fw-regular); color: var(--text-soft); }
.sb-lib-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1-5); padding: var(--space-3) var(--space-5) 0; }
.sb-lib-tabs .sb-chip { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .sb-lib-tabs .sb-chip:hover { border-color: var(--border-strong); color: var(--text); }
}
.sb-lib-tabs .sb-chip.active { border-color: var(--primary-200); background: var(--primary-50); color: var(--primary-tint-fg); }
.sb-lib-body { flex: 1; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-7); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); align-content: start; background: var(--surface-sunk); }
.sb-opt {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sb-opt:hover { border-color: var(--primary-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.sb-opt.is-current { border-color: var(--primary-400); box-shadow: var(--ring-primary); }
.sb-opt-shot { position: relative; height: 170px; overflow: hidden; background: var(--surface-sunk); }
.sb-opt-shot iframe { width: 1280px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; }
.sb-opt-shot > .spinner { position: absolute; inset: 0; margin: auto; }   /* live Google reviews still loading */
.sb-lib-body > .empty-state { grid-column: 1 / -1; }
.sb-opt-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); border-top: 1px solid var(--border-faint); }
.sb-opt-cap b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
/* menu bars stack full-width (fillDrawer adds is-stacked for Navbars): the
   shot is only as tall as the bar, so at ~1000px wide each option reads */
.sb-lib-body.is-stacked { grid-template-columns: 1fr; grid-auto-rows: max-content; /* auto rows collapse to one uniform height in this definite-height scroller, hiding the caption */ gap: var(--space-3); }
.sb-lib-body.is-stacked .sb-opt-shot { height: 96px; }   /* fallback until the frame reports the bar height */
.sb-lib-body.is-stacked .sb-opt-cap { padding: var(--space-2) var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .sb-wz, .sb-building, .sb-wz-body, .sb-lib, .sb-seg-fill { animation: none; transition: none; }
}

@media (max-width: 720px) {
  #onboard { padding: var(--space-4) var(--space-4) var(--space-10); }
  .sb-wz { padding: var(--space-4) var(--space-4) 0; }
  .sb-wz-foot { margin: var(--space-4) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); }
  .sb-wz-body h1 { font-size: var(--text-xl); }
  .sb-grid2 { grid-template-columns: 1fr; }
  .sb-span2 { grid-column: auto; }
  .sb-brand-grid { grid-template-columns: 1fr; }
  .sb-pals { grid-template-columns: repeat(2, 1fr); }
  .sb-rv { flex-wrap: wrap; }
  .sb-rv .btn { margin: 0; }
  .sb-tb-center { display: none; }
  .sb-workspace { grid-template-columns: 1fr; }
  .sb-panel-grip { display: none; }
  .sb-panel { display: none; }
}

/* ---------- client portal: Website page (`pw-`) ------------------------ */
.pw { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-8); max-width: 1280px; margin-inline: auto; }   /* the capped column sits centred, not hugging the left (Attio settings screens) */
.pw-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2-5); }
/* initial-load skeleton: the stage block keeps the fitted preview's shape (1440-wide page at the desktop preview height) */
.pw-skel-stage { display: block; width: 100%; aspect-ratio: 1440 / 820; border-radius: var(--radius-md); }
.pw-head h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-strong); }
.pw-head .u-ml-auto { display: flex; align-items: center; gap: var(--space-2); }
.pw-sub { font-size: var(--text-sm); color: var(--text-soft); }
.pw-preview { overflow: hidden; }
.pw-preview-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3-5); border-bottom: 1px solid var(--border); }
.pw-preview-bar .spacer { flex: 1; }
.pw-preview-bar { position: relative; }
.pw-preview-updated { position: absolute; left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) { .pw-preview-bar .pw-preview-updated { display: none; } }
.pw-stage { position: relative; overflow: hidden; background: var(--gray-100); background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1px); background-size: 18px 18px; display: flex; justify-content: center; padding: var(--space-4); }
/* a draft page rendering for the frame (a link clicked inside the preview) */
.pw-stage iframe { transition: opacity var(--dur) var(--ease); }
.pw-stage.is-busy iframe { opacity: 0.45; }
.pw-sizer { position: relative; flex: 0 0 auto; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); background: #fff; }
.pw-sizer iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.pw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 260px; color: var(--text-soft); font-size: var(--text-sm); }
.pw-decide { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-decide h3 { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-decide p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-relaxed); }
.pw-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-note { display: flex; flex-direction: column; gap: var(--space-2); }
.pw-note textarea.input { min-height: 96px; }
.pw-done { display: flex; align-items: flex-start; gap: var(--space-3); }
.pw-done-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--success-bg); color: var(--success-600); }
.pw-done-ico.is-changes { background: var(--warning-bg); color: var(--warning-700); }
.pw-done-ico svg { width: 18px; height: 18px; }
.pw-done b { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-done q { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); quotes: "“" "”"; }
.pw-done small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-soft); }
.sg-menu-note { padding: 6px 10px 8px; max-width: 260px; font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); }
.sg-menu-note b { color: var(--text-strong); font-weight: var(--fw-semibold); }
@media (max-width: 640px) {
  .pw { padding: var(--space-4); gap: var(--space-3); }
  .pw-stage { padding: var(--space-2); }
  .pw-actions .btn { flex: 1; }
}
.pw-start { min-height: 60vh; }
.pw-start-btn { margin-top: var(--space-3); height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: var(--fw-semibold); }

/* client profile → Client portal card: the Website builder package switch */
.cd-website-row { display: flex; align-items: center; gap: var(--space-2-5); cursor: pointer; }
.cd-website-note { font-size: var(--text-xs); color: var(--text-soft); }

/* builder crumb = the CRM client (logo + name), like the client-profile crumb */
.sb-crumb .seg.cur { display: inline-flex; align-items: center; gap: var(--space-2); }

/* live row thumbnail: the site's page at 1280px, scaled to the tile, inert */
.sg-thumb--live { position: relative; overflow: hidden; background: #fff; }
.sg-thumb--live iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }

/* Builder-local confirm (Start over / Rebuild / Remove section) — the CRM Modal sits
   below the overlay, so these mount on the builder's own scrim. */
.sb-dlg--details { width: min(640px, calc(100vw - 2 * var(--space-5))); }
.sb-dlg--details .sb-dlg-body { padding: var(--space-4); }
.sb-dlg--details .sb-review { gap: var(--space-2); }
.sb-dlg--details .sb-grid2 { padding: var(--space-1); }
.sb-dlg--confirm { width: min(420px, calc(100vw - 2 * var(--space-5))); }
.sb-dlg--confirm .sb-dlg-body { padding-top: var(--space-4); }

/* =========================================================================
   Section library (sectionLibrary.js) — the admin viewer for every section
   the builder can place. Shares the builder's overlay + topbar chrome; the
   three-column body is its own: category rail · list · stage.
   ========================================================================= */
.sl-overlay { display: flex; flex-direction: column; overflow: hidden; }
.sl-count { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-soft); white-space: nowrap; }
.sl-body { display: grid; grid-template-columns: 220px 300px minmax(0, 1fr); flex: 1; min-height: 0; }
.sl-sidebar { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); }
.sl-collections { flex: 0 0 auto; margin: var(--space-3) var(--space-2); }
.sl-collections button { flex: 1; white-space: nowrap; }
.sl-sidebar .sl-cats { flex: 1; border-right: 0; }
.sl-cats, .sl-list { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--surface); border-right: 1px solid var(--border); }
.sl-cats { padding: var(--space-2) 0 var(--space-4); }
/* group headings match the builder panel's "Image" / "Words" (.sb-grp > summary) */
.sl-grp { padding: var(--space-4) var(--space-4) var(--space-1-5); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sl-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-4); border-left: 2px solid transparent; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); text-align: left; }
.sl-cat.active { color: var(--text-strong); background: var(--nav-active-bg); border-left-color: var(--primary-500); }
.sl-search { flex: 0 0 auto; margin: var(--space-3); height: 36px; }
.sl-items { display: flex; flex-direction: column; }
.sl-item { display: block; width: 100%; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-faint); text-align: left; }
.sl-item.active { background: var(--nav-active-bg); box-shadow: inset 2px 0 0 var(--primary-500); }
.sl-item b { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sl-item p { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.sl-tags .tone-pill svg { width: 11px; height: 11px; }
.sl-none, .sl-empty { padding: var(--space-8) var(--space-4); font-size: var(--text-sm); color: var(--text-soft); text-align: center; }
.sl-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sl-stage { flex: 1; min-height: 0; overflow: auto; padding: var(--space-5); background-color: var(--surface-sunk); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px; display: flex; justify-content: center; align-items: flex-start; }
.sl-frame { flex-shrink: 0; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.sl-frame.is-mobile { width: 375px; } .sl-frame.is-tablet { width: 768px; } .sl-frame.is-desktop { width: 1280px; }
.sl-frame iframe { display: block; width: 100%; height: 400px; border: 0; background: #fff; }
.sl-code { flex: 1; min-height: 0; margin: 0; padding: var(--space-4) var(--space-5); overflow: auto; background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--text); white-space: pre; }
.sl-hint { display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-5); border-top: 1px solid var(--border); background: var(--surface); font-size: var(--text-2xs); color: var(--text-soft); }
.sl-hint .kbd + span, .sl-hint span + .kbd { margin-left: var(--space-1); }
.sl-overlay [data-sl-code].is-on { background: var(--seg-active); color: var(--text-strong); box-shadow: var(--seg-active-shadow); }
@media (hover: hover) and (pointer: fine) {
  .sl-cat:hover, .sl-item:hover { background: var(--surface-hover); color: var(--text); }
  .sl-cat.active:hover, .sl-item.active:hover { background: var(--nav-active-bg); }
}
.sl-cat:focus-visible, .sl-item:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
@media (max-width: 1024px) {
  .sl-body { grid-template-columns: 180px 240px minmax(0, 1fr); }
  .sl-hint { display: none; }
}
@media (max-width: 760px) {
  .sl-body { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .sl-sidebar { border-right: 0; }
  .sl-collections { align-self: flex-start; margin-bottom: 0; }
  .sl-sidebar .sl-cats { flex: 0 0 auto; }
  .sl-cats { flex-direction: row; overflow-x: auto; padding: var(--space-2) var(--space-2); border-right: 0; border-bottom: 1px solid var(--border); }
  .sl-grp { display: none; }
  .sl-cat { width: auto; flex: 0 0 auto; border-left: 0; border-radius: var(--radius-full); }
  .sl-cat.active { background: var(--nav-active-bg); }
  .sl-list { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sl-frame.is-desktop, .sl-frame.is-tablet { width: 100%; }
}

/* ---------- domain panel (`dp-`, siteDomainPanel) ------------------------- */
/* Shared by the portal's Website → Domain tab and the builder's "Domain & hosting" dialog. */
.dp { display: flex; flex-direction: column; gap: var(--space-4); }
.dp-skel { display: grid; gap: var(--space-2-5); padding: var(--space-5); }
.dp-fail { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-6); font-size: var(--text-sm); color: var(--text-soft); }
.dp-fail svg { width: 18px; height: 18px; color: var(--danger-600); }
.dp-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.dp-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.dp-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dp-head b { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.dp-head small { font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-snug); }
.dp-head .tone-pill { flex-shrink: 0; margin-top: 2px; }
.dp-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-sunk); border: 1px solid var(--border); color: var(--text-muted); }
.dp-ico svg { width: 17px; height: 17px; }
.dp-note { margin: 0; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-relaxed); }
.dp-note svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.dp-note code, .dp-table code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-xs); padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface-sunk); border: 1px solid var(--border-faint); color: var(--text-strong); }
.dp-error { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger-600) 8%, var(--surface)); font-size: var(--text-sm); color: var(--danger-600); }
.dp-error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
/* the free address row */
.dp-addr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2-5) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.dp-url { flex: 1; min-width: 0; font-weight: var(--fw-medium); color: var(--text-strong); overflow-wrap: anywhere; text-decoration: none; }
.dp-url.is-empty { font-weight: var(--fw-regular); color: var(--text-soft); }
@media (hover: hover) and (pointer: fine) { a.dp-url:hover { text-decoration: underline; } }
.dp-addr-acts { display: inline-flex; align-items: center; gap: var(--space-1); }
.dp-rename { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.dp-rename .input { flex: 1; min-width: 160px; }
.dp-prefix { font-size: var(--text-sm); color: var(--text-soft); white-space: nowrap; }
/* the two doors */
.dp-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.dp-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-4); text-align: left; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .dp-choice:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
.dp-choice:active { transform: scale(0.99); }
.dp-choice:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.dp-choice b { font-weight: var(--fw-semibold); color: var(--text-strong); }
.dp-choice small { font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-snug); }
/* forms */
.dp-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dp-form .input { flex: 1; min-width: 200px; }
.dp-result { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2-5); padding: var(--space-3) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); font-size: var(--text-sm); color: var(--text-soft); }
.dp-result b { font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.dp-result .btn { margin-left: auto; }
.dp-price { color: var(--text-muted); }
.dp-buy { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-faint); }
.dp-buy h4 { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.dp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.dp-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.dp-field > span { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); }
.dp-field > span b { color: var(--danger-600); }
.dp-field small { font-size: var(--text-xs); color: var(--text-soft); }
.dp-done { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--success-600) 10%, var(--surface)); }
.dp-done > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--success-600); margin-top: 2px; }
.dp-done b { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); }
.dp-done small { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.dp-done small b { display: inline; }
/* the connected domain: three steps, the ways to point it, the checks */
.dp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dp-step { display: flex; align-items: flex-start; gap: var(--space-2-5); font-size: var(--text-sm); color: var(--text-soft); }
.dp-step b { display: block; font-weight: var(--fw-medium); color: var(--text-muted); }
.dp-step small { display: block; font-size: var(--text-xs); color: var(--text-soft); }
.dp-step.is-done b { color: var(--text-strong); }
.dp-step.is-now b { color: var(--text-strong); }
.dp-step-dot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--on-primary); }
.dp-step-dot svg { width: 12px; height: 12px; }
.dp-step.is-done .dp-step-dot { border-color: transparent; background: var(--success-600); }
.dp-step.is-now .dp-step-dot { border-color: var(--primary-400); }
.dp-step .spinner { width: 12px; height: 12px; border-width: 1.5px; }
.dp-ways { display: flex; flex-direction: column; gap: var(--space-3); }
.dp-ways > .btn { align-self: flex-start; }
.dp-or { font-size: var(--text-sm); color: var(--text-soft); margin-top: calc(-1 * var(--space-1-5)); }
.dp-manual > summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); list-style: none; display: inline-flex; align-items: center; gap: var(--space-1-5); }
.dp-manual > summary::-webkit-details-marker { display: none; }
.dp-manual > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur) var(--ease); margin-right: 2px; }
.dp-manual[open] > summary::before { transform: rotate(45deg); }
.dp-records { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.dp-records-lead { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
.dp-records-lead a { color: var(--primary-600); font-weight: var(--fw-medium); }
.dp-records-lead a svg { width: 12px; height: 12px; vertical-align: -1px; }
.dp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dp-table th { text-align: left; padding: var(--space-1-5) var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.dp-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-faint); vertical-align: top; }
.dp-table td small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-soft); }
.dp-table td:last-child { width: 32px; text-align: right; }
.dp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.dp-actions .spacer { flex: 1; }
.dp-checked { font-size: var(--text-xs); color: var(--text-soft); }
@media (max-width: 640px) {
  .dp-card { padding: var(--space-4); }
  .dp-result .btn { margin-left: 0; width: 100%; }
}

/* ---------- client portal: Website page tabs + Details / Pages tabs ------- */
/* primary level = underline tabs on a hairline (Attio record header); the
   Details sub-tabs below use the quiet .tabs pill so the two levels never
   read as two stacked segmented tracks */
/* a website update in progress (photos sorting and placing, a change landing): the notice under the
   header while the editing actions are greyed — both go when the engine's run ends */
.pw-updating { display: flex; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-4); padding: var(--space-2-5) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunk); color: var(--text); font-size: var(--text-sm); }
.pw-updating .spinner { flex: 0 0 auto; }
.pw-updating b { font-weight: var(--fw-semibold); color: var(--text-strong); }
.btn.is-updating { opacity: .55; cursor: not-allowed; }
.pw-tabs { display: flex; align-items: flex-end; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.pw-tabs::-webkit-scrollbar { display: none; }
.pw-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 40px; padding: 0 var(--space-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pw-tabs button svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .pw-tabs button:hover { color: var(--text-strong); } }
.pw-tabs button:focus-visible { outline: none; box-shadow: var(--ring-primary); border-radius: var(--radius-sm); }
.pw-tabs button.active { color: var(--text-strong); border-bottom-color: var(--primary-600); }
.pw-tabs .skel { margin-bottom: var(--space-2); }
.pw-section { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-lead { margin: 0; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-relaxed); }
.pw-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.pw-card-head { display: flex; align-items: center; gap: var(--space-3); }
.pw-card-head b { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-card-head small { display: block; font-size: var(--text-sm); color: var(--text-soft); }
.pw-card-head .btn { margin-left: auto; }
.pw-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pw-page { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.pw-page-ico { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; color: var(--text-soft); }
.pw-page-ico svg { width: 16px; height: 16px; }
/* page-row thumbs: the live page in a 1440px frame scaled into a mini card
   (76/1440 = .0528; the frame height fills the 56px window at that scale).
   White stays literal — it's the SITE's canvas, theme-constant like .sg-thumb--live. */
.pw-page-thumb { position: relative; flex-shrink: 0; width: 76px; height: 56px; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--illus-paper); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 4px; padding: 6px; }
/* the skeleton mini-page (illustration palette) is the base layer: the load
   cover while the frame paints, and the whole thumb on unpublished sites */
.pw-thumb-hero { height: 20px; border-radius: 3px; background: var(--illus-paper2); border: 1px solid var(--illus-grid); }
.pw-thumb-line { height: 4px; border-radius: 2px; background: var(--illus-line2); }
.pw-thumb-line--short { width: 62%; }
.pw-page-thumb iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 1064px; border: 0; transform: scale(0.0528); transform-origin: 0 0; pointer-events: none; background: #fff; opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.pw-page-thumb.is-loaded iframe { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pw-page-thumb iframe { transition: none; } }
.pw-page-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pw-page-body b { font-weight: var(--fw-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-page-body small { font-size: var(--text-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-page-acts { display: inline-flex; align-items: center; gap: var(--space-1); }
.pw-pages-sep { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-offer-cta { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-sunk); }
.pw-offer-cta b { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-offer-cta small { display: block; font-size: var(--text-sm); color: var(--text-soft); }
.pw-offer-cta .btn { margin-left: auto; flex-shrink: 0; align-self: center; }

/* ---------- builder: offer landing-page dialog + domain dialog -------------- */
.sb-dlg--wide { width: min(720px, calc(100vw - 2 * var(--space-5))); }
.sb-dlg--domain .sb-dlg-body { background: var(--surface-sunk); }
.sb-offer { display: grid; gap: var(--space-4); }
.sb-offer .sb-field textarea.input { min-height: 84px; }
.sb-offer-photos .sb-thumbs { margin-top: var(--space-2-5); }
.sb-offer-photos .sb-thumb { aspect-ratio: 4 / 3; }
.sb-offer-photos .sb-thumb img { border-radius: var(--radius-md); }
.sb-offer-pick { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.sb-pages-list .filter-opt.is-offer > span:first-child { color: var(--text-muted); }

/* Site details list (`sd-`, siteDetailsRows): each row drops open in place — the portal's Details tab and the
   builder's settings gear. Business / Contact / Areas edit inline; the rest hand over to the editor.
   (14 Sep, Attio reference) ONE border level per composition: the card owns the
   border, rows separate with hairlines, icons are naked muted strokes. */
.sd-list { gap: 0; }
.sd-list .sb-rv { flex-direction: column; align-items: stretch; gap: 0; background: transparent; border: 0; border-radius: 0; padding: var(--space-3) 0; }   /* the closed drop must add no height: the gap lives on the wrap's open margin */
.sd-list .sb-rv + .sb-rv { border-top: 1px solid var(--border-faint); }
.sd-list .sb-rv-ico { width: auto; height: auto; background: transparent; border: 0; box-shadow: none; color: var(--text-soft); }
.sd-list .sb-rv-ico svg { width: 16px; height: 16px; }
/* the header row never changes shape: the toggle stays centred on the title + value; the form drops in underneath, full width */
.sd-head { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; border-radius: var(--radius-md); outline: none; }
/* the whole header is the control, so the hover surface fills the whole row:
   a soft pill bled slightly past the content edges (Attio list-row hover) */
.sd-list .sd-head { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2-5)); padding: var(--space-2) var(--space-2-5); transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .sd-list .sd-head:hover { background: var(--surface-hover); } }
/* hierarchy from type, not weight: rows sit quiet at 14px medium; the open row's title firms up */
.sd-head .sb-rv-body > b { font-size: var(--text-md); font-weight: var(--fw-medium); }
.sd-row.is-open .sd-head .sb-rv-body > b { font-weight: var(--fw-semibold); }
.sd-head:focus-visible { box-shadow: var(--ring-primary); }
@media (hover: hover) and (pointer: fine) { .sd-head:hover .sd-chev { color: var(--text-strong); } }
/* the only cue is the chevron; the whole header row is the control */
.sd-chev { flex-shrink: 0; margin-right: -6px; pointer-events: none; }   /* rows are single-line now — no top nudge, the flex centring does the work */
.sd-chev svg { transition: transform var(--dur) var(--ease); }
.sd-row.is-open .sd-chev svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sd-chev svg { transition: none; } }
/* closed: centred on the row's two lines; open: pinned to the top so it stays by the title while the form is out */
/* the drop animates open/closed: setOpenRow() drives `height` from the measured content (0 ↔ scrollHeight ↔ auto) */
/* the 6px side gutters (negative margin + matching padding) keep input focus
   rings and shadows visible while the drop's overflow is still clipping */
.sd-drop-wrap { height: 0; overflow: hidden; margin-top: 0; margin-inline: -6px; padding-inline: 6px; transition: height var(--dur-slow) var(--ease), margin-top var(--dur-slow) var(--ease); }
.sd-row.is-open .sd-drop-wrap { margin-top: var(--space-3); }
.sd-drop-wrap.is-settled { height: auto; overflow: visible; }
.sd-drop { visibility: hidden; }
.sd-row.is-open .sd-drop { visibility: visible; }
/* padding + rule live INSIDE the clipped item, so a closed row is exactly 0px tall */
.sd-drop-in { padding-top: var(--space-3); border-top: 1px solid var(--border-faint); }
/* (14 Sep, Attio reference) the open-row editors sit in a settings-form
   MEASURE — controls never run edge-to-edge across the wide card */
.sd-drop-in .sd-form, .sd-drop-in .sd-panel { max-width: 680px; }
.sd-form textarea.input { min-height: 120px; }
@media (prefers-reduced-motion: reduce) { .sd-drop-wrap { transition: none; } }
.sd-form { display: flex; flex-direction: column; gap: var(--space-4); }   /* field groups breathe like Attio settings sections */
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sd-span2 { grid-column: 1 / -1; }
.sd-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
/* Attio field anatomy: the label line, then its help as a muted line UNDER it
   — never squeezed inline after the label */
.sd-field > span small { display: block; margin-top: 1px; line-height: var(--leading-snug); }
.sd-field > span { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); }
.sd-field > span small { font-weight: var(--fw-regular); color: var(--text-soft); }
.sd-note { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
/* the compact logo row + photo card (the client record's Files → Client's website) — one border level, the whole card takes drops */
.sd-logo-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunk); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }   /* dashed, as the photo drop zone: it takes a dropped file */
.sd-logo-row.is-over { border-color: var(--primary-400); background: color-mix(in srgb, var(--primary-500) 5%, transparent); }
.sd-logo-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-faint); color: var(--text-soft); overflow: hidden; }
.sd-logo-tile svg { width: 20px; height: 20px; }
.sd-logo-tile.has-logo svg { display: none; }
.sd-logo-tile img { width: 100%; height: 100%; object-fit: contain; }
.sd-logo-tile img[hidden] { display: none; }   /* base.css's img { display: block } would otherwise show a broken glyph */
.sd-logo-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sd-logo-text b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sd-logo-text small { font-size: var(--text-xs); color: var(--text-soft); }
.sd-logo-acts { display: flex; gap: var(--space-1-5); flex-shrink: 0; }
.sd-photos--compact { margin-top: var(--space-2); border-radius: var(--radius-lg); transition: outline-color var(--dur) var(--ease); }   /* no box: the photos sit on the page under their heading; a drop outlines the area */
.sd-photos--compact.is-over { outline: 2px dashed var(--primary-400); outline-offset: 8px; }
.sd-photos-head { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.sd-photos-title { flex: 1; display: flex; align-items: baseline; gap: var(--space-1-5); }
.sd-photos-title b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sd-photos-title small { font-size: var(--text-xs); color: var(--text-soft); }
.sd-photos--compact .sb-thumbs { margin-top: var(--space-2-5); }
.sd-photos--compact .sd-note { margin-top: var(--space-2-5); font-size: var(--text-xs); }
/* the Website section before a site exists, when the profile still has gaps:
   the welcome flow opens for them; this is what sits behind it (and Start re-opens it) */
.pw-setup { display: grid; justify-items: center; gap: var(--space-3); max-width: 460px; margin: var(--space-10) auto; text-align: center; }
.pw-setup-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--surface-sunk); color: var(--text-muted); }
.pw-setup-ico svg { width: 20px; height: 20px; }
.pw-setup h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-setup p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
.pw-setup .btn { margin-top: var(--space-2); }
/* Straight from the welcome flow: the build screen sits in the preview stage (the
   builder's own card, in the client's voice) until the draft lands in its place. */
.pw-building { display: grid; justify-items: center; align-content: center; gap: var(--space-4); width: 100%; max-width: 460px; min-height: min(420px, 52vw); margin: var(--space-6) auto; padding: var(--space-10); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); animation: sbCardIn 420ms var(--ease-enter); }
.pw-building h3 { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--text-strong); }
.pw-building .sb-build-steps { width: 100%; max-width: 320px; font-size: var(--text-sm); }
@media (max-width: 640px) { .pw-building { min-height: 0; margin: var(--space-2) auto; padding: var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .pw-building { animation: none; } }
/* "How long have you been going?" on a phone: five chips as a 3 + 2 grid instead of a ragged wrap */
@media (max-width: 480px) {
  .sb-fields--pop #wzTenure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-fields--pop #wzTenure .sb-chip { justify-content: center; padding: 0 var(--space-2); white-space: nowrap; }
}
.sd-acts { display: flex; justify-content: flex-end; gap: var(--space-2); }
.sd-acts--start { justify-content: flex-start; margin-top: var(--space-2-5); }
@media (max-width: 640px) { .sd-grid { grid-template-columns: 1fr; } }
/* the builder's gear: the same list in a dropdown, the site-level actions under it */
/* The settings menu: two labelled groups of compact rows. Every row wears the same naked icon and indent; a
   business row opens its form in place on a soft tint (no rules between rows, one hairline between groups). */
.sb-settings { width: min(420px, calc(100vw - 2 * var(--space-4))); max-height: min(78vh, 760px); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-width: thin; padding: var(--space-1-5); gap: 0; }   /* the gutter is reserved up front, so a scrollbar arriving with a long form never squeezes the rows */
.sb-settings-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
.sb-settings .filter-opt-sep { margin: var(--space-1-5) calc(-1 * var(--space-1-5)); }
.sb-settings .filter-opt { flex-shrink: 0; gap: var(--space-2-5); height: 36px; padding: 0 var(--space-2-5); }
.sb-settings #menuDetails > .filter-opt { width: 100%; }   /* the owner's single Website details row fills the menu like the rows under it */
.sb-settings .filter-opt .ic { display: inline-flex; color: var(--text-soft); }
.sb-settings .filter-opt svg { width: 16px; height: 16px; margin-left: 0; color: inherit; }
.sb-settings .filter-opt.sb-danger .ic { color: inherit; }
.sb-settings .sd-list { gap: 2px; }
.sb-settings .sd-list .sb-rv { padding: 0; border-radius: var(--radius-sm); transition: background var(--dur) var(--ease); }
.sb-settings .sd-list .sb-rv + .sb-rv { border-top: 0; }
.sb-settings .sd-list .sd-head { margin: 0; min-height: 36px; padding: 0 var(--space-2-5); gap: var(--space-2-5); border-radius: var(--radius-sm); }
.sb-settings .sd-head .sb-rv-body > b { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text); }
.sb-settings .sd-chev { width: 24px; height: 24px; margin-right: -4px; color: var(--text-soft); }
.sb-settings .sd-chev svg { width: 14px; height: 14px; }
.sb-settings .sd-row.is-open { background: var(--surface-sunk); }
.sb-settings .sd-row.is-open .sd-head .sb-rv-body > b { color: var(--text-strong); }
.sb-settings .sd-drop-wrap { margin-inline: 0; padding-inline: var(--space-2-5); }
.sb-settings .sd-row.is-open .sd-drop-wrap { margin-top: 0; }
.sb-settings .sd-drop-in { padding: var(--space-1) 0 var(--space-3); border-top: 0; }

/* inline editors inside the rows */
.sd-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.sd-chips .sb-chip { cursor: pointer; }
/* the services TOKEN FIELD: tags and the type-to-add input share one well
   (Attio's record multi-select) — Enter adds, backspace eats the last tag,
   clicking anywhere in the well focuses the input */
.sd-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); min-height: 44px; padding: var(--space-1-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); cursor: text; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sd-tokens:focus-within { border-color: var(--primary-400); box-shadow: var(--ring-primary); }
.sd-tokens .sb-chip { min-height: 28px; cursor: default; } /* the well is cursor:text for its input; a tag is not typeable */
.sd-token-input { flex: 1 1 160px; min-width: 140px; height: 28px; border: 0; background: transparent; font: inherit; font-size: var(--text-md); color: var(--text); padding: 0 var(--space-1-5); }
.sd-token-input:focus { outline: none; }
.sd-token-input::placeholder { color: var(--text-soft); }
.sd-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.sd-suggest-k { font-size: var(--text-xs); color: var(--text-soft); margin-right: var(--space-1); }
.sd-suggest .sb-chip--add { display: inline-flex; align-items: center; gap: 4px; }
.sd-suggest .sb-chip--add > svg { width: 12px; height: 12px; flex-shrink: 0; }
.sd-range { width: 100%; accent-color: var(--primary-600); }
.sd-range-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-soft); }
.sd-field--short { max-width: 220px; }
.sd-brand, .sd-photos { display: flex; flex-direction: column; gap: var(--space-3-5); }
.sd-brand .sb-pals { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sd-photos .sb-thumbs { margin-top: 0; }
.sd-panel.is-busy, .sd-brand.is-busy, .sd-photos.is-busy { opacity: .6; pointer-events: none; transition: opacity var(--dur) var(--ease); }
/* the Photos library while photos are added: the drop zone turns into the progress (spinner in
   the icon disc + what's happening), the thumbs dim behind it */
.sd-photos .sb-drop-ico .spinner { display: none; }
.sd-photos.is-busy { opacity: 1; }
.sd-photos.is-busy .sb-thumbs, .sd-photos.is-busy .sd-note { opacity: .6; }
.sd-photos.is-busy .sb-drop-ico .ic { display: none; }
.sd-photos.is-busy .sb-drop-ico .spinner { display: block; }
/* a headless builder run (the portal's inline editors): in the DOM for the engine, never on screen */
.sb-overlay.sb-headless { position: fixed; left: -9999px; top: 0; width: 1440px; height: 900px; visibility: hidden; pointer-events: none; }
/* quiet: the editor parked off-screen while its offer brief (position: fixed) shows over the page; revealSiteBuilder() brings it up */
.sb-overlay.sb-quiet { position: fixed; left: -9999px; top: 0; width: 1440px; height: 900px; }
.sb-overlay.sb-quiet .sb-overlay-loading { display: none; }
/* ad landing page brief: the VSL switch row + video drop */
.sb-offer .sb-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); cursor: pointer; }
.sb-offer .sb-switch-row b { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-offer .sb-switch-row small { display: block; font-size: var(--text-xs); color: var(--text-soft); }
.sb-offer-video #offerVideoPreview { max-width: 100%; max-height: 220px; border-radius: var(--radius-md); }
.dp-setup > summary { color: var(--text-soft); }
.dp-fields .dp-span2 { grid-column: 1 / -1; }
/* the ad brief as a shared Modal (siteOfferBrief): title + one-liner in the head, the builder's form styles in the body */
.ob-title { display: grid; gap: 2px; }
.ob-title b { font-weight: var(--fw-semibold); color: var(--text-strong); }
.ob-title small { font-size: var(--text-sm); font-weight: var(--fw-regular); color: var(--text-soft); line-height: var(--leading-snug); }
.ob-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
/* the brief's one writing box, and the transcribed ads under the "Your ad" drop (siteAdTranscript) */
.sb-offer .sb-field textarea.ob-about { min-height: 128px; }
/* the brief's attachments: one quiet group of slim rows (ad · page video · photos); each row is a click + drop target */
.ob-adds { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.ob-adds-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text); }
.ob-adds-title small { font-weight: var(--fw-regular); color: var(--text-soft); }
.ob-adds > div { display: grid; gap: var(--space-1-5); }
.ob-adds > div:empty { display: none; }
.ob-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border: 1.5px dashed var(--border-strong);   /* the drop-target outline, as .sb-drop wears it */ border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ob-row-ico { display: inline-flex; flex-shrink: 0; color: var(--text-soft); }
.ob-row-ico svg { width: 18px; height: 18px; }
.ob-row-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ob-row-text b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.ob-row-text small { font-size: var(--text-xs); color: var(--text-soft); line-height: var(--leading-snug); }
.ob-row .btn { flex-shrink: 0; pointer-events: none; }
.ob-row.is-over { border-color: var(--info-600); background: var(--info-bg); }
.ob-row.is-full { display: none; }
.ob-row:focus-visible { outline: 2px solid var(--info-600); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ob-row:hover { background: var(--surface-sunk); } }
.ob-adds .sb-thumbs:empty { display: none; }
/* the brief's photos: one row, four across; a fifth photo makes the row scroll sideways instead of growing the form */
.ob-adds .sb-thumbs { display: flex; gap: var(--space-2-5); margin-top: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: var(--space-1-5); scrollbar-width: thin; }
.ob-adds .sb-thumb { flex: 0 0 calc((100% - 3 * var(--space-2-5)) / 4); min-width: 0; scroll-snap-align: start; }
.ob-adds .sb-thumb { overflow: hidden; }
/* a picked ad / VSL: a frame of the video with a play glyph, the file name over its size (fileRowHTML) */
.ob-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-1-5); list-style: none; }
.ob-ad.ob-file.is-busy, .ob-ad > summary.ob-file { padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-1-5); }
.ob-file-thumb { position: relative; flex-shrink: 0; width: 72px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; }
.ob-file-thumb { padding: 0; border: 0; cursor: pointer; }
.ob-file-thumb:focus-visible { outline: 2px solid var(--info-600); outline-offset: 2px; }
.ob-player { display: flex; justify-content: center; background: var(--brand-ink); border-radius: var(--radius-md); overflow: hidden; }
.ob-player video { display: block; max-width: 100%; max-height: 70vh; }
.ob-player audio { width: 100%; margin: var(--space-5); }
.ob-file-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ob-file-play { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--overlay-media); color: var(--text-invert); display: inline-flex; align-items: center; justify-content: center; }
.ob-file-play svg { width: 10px; height: 10px; fill: currentColor; }
.ob-file-glyph { display: inline-flex; color: var(--text-invert); }
.ob-file-glyph svg { width: 18px; height: 18px; }
.ob-file-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ob-file-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.ob-file-text small { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-soft); }
.ob-file-text .spinner { width: 11px; height: 11px; border-width: 1.5px; }
.ob-ad-line { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
.ob-ad-list { display: grid; gap: var(--space-1-5); }
.ob-ad-list:empty { display: none; }
.ob-ad { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); }
.ob-ad > summary:not(.ob-file), .ob-ad.is-busy:not(.ob-file) { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); list-style: none; }
.ob-ad > summary { cursor: pointer; }
.ob-ad > summary::-webkit-details-marker { display: none; }
.ob-ad.is-busy:not(.ob-file) { padding-right: var(--space-3); min-height: 40px; }
.ob-ad-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); color: var(--text-strong); }
.ob-ad small { flex-shrink: 0; font-size: var(--text-xs); color: var(--text-soft); }
.ob-ad-tick { display: inline-flex; color: var(--success-600); }
.ob-ad-tick svg { width: 15px; height: 15px; }
.ob-ad > p { margin: 0; padding: 0 var(--space-3) var(--space-3); max-height: 140px; overflow-y: auto; color: var(--text-muted); line-height: var(--leading-snug); }
.ob-ad > summary:focus-visible { outline: 2px solid var(--focus-ring, var(--info-600)); outline-offset: 2px; border-radius: var(--radius-md); }
/* Create pressed: the brief's shell shrinks into a small loading card (siteOfferBrief.morphToBuilding writes the box) */
.modal-shell.ob-morph { --ob-ease: cubic-bezier(0.32, 0.72, 0, 1); transition: width 0.44s var(--ob-ease), height 0.44s var(--ob-ease), opacity 0.2s var(--ease), transform 0.2s var(--ease); will-change: width, height; }
.modal-shell.ob-morph > :not(.ob-building) { transition: opacity 0.12s linear; }
.modal-shell.ob-morph.is-building > :not(.ob-building) { opacity: 0; }
/* growing back (a failed build): the form waits for the box before it reappears */
.modal-shell.ob-morph:not(.is-building) > :not(.ob-building) { transition: opacity 0.18s var(--ease) 0.3s; }
.ob-building { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-5); text-align: center; background: var(--surface); opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }
.is-building > .ob-building { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.28s var(--ease) 0.22s, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.22s; }
/* the loader: three hairlines, an ink stroke writing across each in turn; the title's light sweeps through its letters */
.ob-lines { display: grid; justify-items: center; gap: var(--space-1-5); width: 96px; margin-bottom: var(--space-5); }
.ob-lines i { position: relative; display: block; width: 100%; height: 3px; border-radius: var(--radius-full); background: var(--gray-200); overflow: hidden; }
.ob-lines i:nth-child(1) { width: 42%; }
.ob-lines i:nth-child(3) { width: 68%; }
.ob-lines i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--text-strong); transform: translateX(-101%); animation: ob-write 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.ob-lines i:nth-child(2)::after { animation-delay: 0.14s; }
.ob-lines i:nth-child(3)::after { animation-delay: 0.28s; }
@keyframes ob-write { 0% { transform: translateX(-101%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
.ob-building b { background: linear-gradient(100deg, var(--text-strong) 35%, var(--gray-300) 50%, var(--text-strong) 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ob-sheen 2.4s linear infinite; }
@keyframes ob-sheen { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.ob-building .ob-bg { margin-top: var(--space-4); font-size: var(--text-xs); }
.ob-building small.ob-swap { animation: ob-swap 0.28s var(--ease); }
@keyframes ob-swap { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ob-lines i::after, .ob-building b, .ob-building small.ob-swap { animation: none; } .ob-lines i::after { transform: none; opacity: 0.35; } }
.ob-building b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.ob-building small { font-size: var(--text-sm); color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) { .modal-shell.ob-morph, .modal-shell.ob-morph > *, .ob-building { transition: none; } }
.modal-body .ob .sb-field > span { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text); }
.modal-body .ob .sb-field > span small { font-weight: var(--fw-regular); color: var(--text-soft); }
.modal-body .ob [data-video-preview] { max-width: 100%; max-height: 220px; border-radius: var(--radius-md); }
/* the page row's ⋯ menu: a leading icon on every option (the base rule puts option icons at the right, for ticks) */
.pw-page-menu .filter-opt { gap: var(--space-2-5); }
.pw-page-menu .filter-opt > svg:first-child { width: 15px; height: 15px; margin-left: 0; color: var(--text-muted); }
.pw-page-menu .filter-opt.sg-danger > svg:first-child { color: var(--danger-600); }
/* .sb-field is display:flex, which outranks the UA [hidden] rule — the VSL box must actually hide while the switch is off */
.sb-field[hidden], .sb-offer-video[hidden] { display: none !important; }

/* =========================================================================
   Portal Website — 14 Sep redesign (record-style header, sectioned Details,
   Pages table; the mock set translated onto the Magnet tokens).
   ========================================================================= */
/* ---- identity header ---------------------------------------------------- */
.pw-hero { display: flex; align-items: center; gap: var(--space-3-5); }
.pw-hero-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pw-hero-ico svg { width: 20px; height: 20px; }
.pw-hero-id { min-width: 0; }
.pw-hero-id h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-hero-sub { display: flex; align-items: center; gap: var(--space-1-5); margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.pw-hero-sep { color: var(--text-soft); }
.pw-hero-acts { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); }
.pw-dot.is-ok { background: var(--success-600); }

/* ---- per-tab page head -------------------------------------------------- */
.pw-dhead { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); }
.pw-dhead h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-dhead p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.pw-dhead > span, .pw-dhead > button { margin-left: auto; flex-shrink: 0; }
.pw-saved { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--text-soft); white-space: nowrap; }
.pw-saved svg { width: 15px; height: 15px; color: var(--success-600); }
.pw-live-line { display: flex; align-items: center; gap: var(--space-1-5); margin: 3px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.pw-live-line a { color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pw-live-line a:hover { color: var(--text-strong); text-decoration: underline; } }
.pw-live-line svg { width: 13px; height: 13px; color: var(--text-soft); flex-shrink: 0; }
.pw-address-status { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
.pw-address-line a { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.pw-address-line a span { overflow: hidden; text-overflow: ellipsis; }

/* ---- preview toolbar + browser chrome ----------------------------------- */
.pw-chrome { width: fit-content; max-width: 100%; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.pw-chrome-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1-5) var(--space-3); background: var(--surface-sunk); border-bottom: 1px solid var(--border-faint); }
.pw-chrome-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.pw-chrome-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); }
.pw-chrome-url { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); min-width: 0; height: 24px; margin: 0 var(--space-6); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border-faint); font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; white-space: nowrap; }
.pw-chrome-url svg { width: 12px; height: 12px; color: var(--text-soft); flex-shrink: 0; }
.pw-chrome .pw-sizer { display: block; }

/* ---- shared foot rows --------------------------------------------------- */
.pw-foot-note, .pw-pt-meta { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
.pw-foot-note { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.pw-foot-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Details sub-tabs --------------------------------------------------- */
.pw-subtabs { align-self: flex-start; flex-wrap: wrap; }
.pw-subtabs button { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.pw-subtabs button svg { width: 14px; height: 14px; flex-shrink: 0; }
.pw-subtab-n { font-size: var(--text-2xs); color: var(--text-soft); }

/* ---- Overview: the at-a-glance card ------------------------------------- */
.pw-glance { padding: 0; overflow: hidden; }
.pw-glance-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3-5) var(--space-5); background: var(--surface-sunk); border-bottom: 1px solid var(--border-faint); }
.pw-glance-head b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-glance-head small { display: block; margin-top: 1px; font-size: var(--text-sm); color: var(--text-muted); }
.pw-glance-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3-5) var(--space-5); }
.pw-glance-row + .pw-glance-row { border-top: 1px solid var(--border-faint); }
.pw-glance-k { display: inline-flex; align-items: center; gap: var(--space-2-5); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.pw-glance-k svg { width: 16px; height: 16px; color: var(--text-soft); flex-shrink: 0; }
.pw-glance-v { min-width: 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.pw-glance-v .sb-rv-chips span { background: var(--gray-50); }
.pw-glance-edit { flex-shrink: 0; }

/* ---- section pages: form column + "Where this appears" aside ------------ */
.pw-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--space-8); align-items: start; }
.pw-detail-main { min-width: 0; }
.pw-detail-form { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-formfoot { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }
.pw-formfoot-acts { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.pw-dirty { font-size: var(--text-sm); color: var(--text-soft); }
.pw-aside { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-1) 0 0 var(--space-6); border-left: 1px solid var(--border-faint); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
.pw-aside-ico { color: var(--text-soft); }
.pw-aside-ico svg { width: 18px; height: 18px; }
.pw-aside b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-aside p { margin: 0; }
.pw-aside p b { font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-aside-list { margin: var(--space-1) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pw-aside-steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; counter-reset: pwstep; display: flex; flex-direction: column; gap: var(--space-3); }
.pw-aside-steps li { counter-increment: pwstep; position: relative; padding-left: 30px; display: flex; flex-direction: column; gap: 1px; }
.pw-aside-steps li::before { content: counter(pwstep); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.pw-aside-steps b { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--text-sm); }

/* ---- selling points: checkbox cards ------------------------------------- */
.sd-usps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.sd-usp { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2-5) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font-size: var(--text-sm); color: var(--text); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .sd-usp:hover { border-color: var(--border-strong); } }
.sd-usp:has(input:checked) { border-color: var(--primary-300); background: var(--primary-50); }
.sd-usp .checkbox { flex-shrink: 0; }
@media (max-width: 640px) { .sd-usps { grid-template-columns: 1fr; } }

/* ---- Pages table -------------------------------------------------------- */
.pw-pt-tools { display: flex; align-items: center; gap: var(--space-3); }
.pw-pt-search { width: 240px; }
.pw-pt-card { padding: 0; overflow: hidden; }
.pw-ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pw-ptable th, .pw-ptable td { text-align: left; padding: 0 var(--space-4); }
.pw-ptable thead th { height: 40px; background: var(--surface-sunk); border-bottom: 1px solid var(--border); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.pw-ptable tbody td { padding-top: var(--space-2-5); padding-bottom: var(--space-2-5); border-bottom: 1px solid var(--border-faint); font-size: var(--text-sm); vertical-align: middle; }
.pw-ptable tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) { .pw-ptable tbody tr:hover td { background: var(--gray-25); } }
.pw-ptable th:nth-child(2), .pw-ptable td.pw-pt-type { width: 180px; }
.pw-ptable th:nth-child(3), .pw-ptable td.pw-pt-status { width: 120px; }
.pw-ptable th.pw-pt-acts, .pw-ptable td.pw-pt-acts { width: 88px; }
.pw-pt-page { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pw-pt-id { min-width: 0; display: grid; gap: 1px; }
.pw-pt-id b { font-weight: var(--fw-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-pt-id small { font-size: var(--text-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-pt-kind { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.pw-pt-kind svg { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; }
.pw-pt-acts { text-align: right; }
.pw-pt-acts .icon-ghost { vertical-align: middle; }
.pw-pt-empty { text-align: center; color: var(--text-soft); padding: var(--space-6) var(--space-4); }
.pw-page-thumb--sm { width: 56px; height: 40px; padding: 4px; gap: 3px; }
.pw-page-thumb--sm .pw-thumb-hero { height: 14px; }
.pw-page-thumb--sm iframe { transform: scale(0.0389); }

.pw-back { display: none; }
.pw-push-head { display: contents; }   /* phones turn it into the sticky back / save row */
.pw-save-disc { display: none; }
/* ---- phone: a detail section pushed over the Overview (Settings motion) ---- */
.pw-push { display: none; }
@media (max-width: 640px) {
  .pw-push {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: calc(var(--z-popover) - 1);   /* under the modal layer: the Business page's section editors (bottom sheets) open on top of it */
    background: var(--surface); box-shadow: var(--shadow-lg); will-change: transform;
    animation: settingsPush var(--motion-sheet-open) var(--ease-enter);
    transition: transform var(--motion-sheet-close) var(--ease-ios);
  }
  .pw-push.is-leaving { transform: translateX(100%); }
  .pw-push-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
  /* iOS shell: UIKit animates the push, so the layer just appears in place */
  .pw-push.is-native { animation: none; transition: none; box-shadow: none; }
  /* the pushed screen's header (Settings header anatomy): a 44px raised disc
     either side — chevron Back on the left, primary check Save on the right.
     The form footer (Discard / Save changes) is gone on phones. */
  .pw-push .pw-push-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    margin: calc(-1 * var(--space-2)) 0 0; padding: var(--space-2) 0;
    background: var(--surface);
  }
  .pw-push .pw-back, .pw-push .pw-save-disc {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex-shrink: 0;
    border-radius: var(--radius-full); border: 1px solid transparent;
    background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-disc);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .pw-push .pw-save-disc { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
  .pw-push .pw-save-disc:disabled { opacity: 0.4; cursor: default; }
  .pw-push .pw-back span { display: none; }
  .pw-push .pw-back svg, .pw-push .pw-save-disc svg { width: 19px; height: 19px; }
  .pw-push .pw-back:active, .pw-push .pw-save-disc:not(:disabled):active { transform: scale(0.97); }
  .pw-push .pw-formfoot { display: none; }
  body:has(.pw-push) .mobile-bottom { display: none; }
  /* a generic pushed page (shared/lib/pushLayer): sits just under the modal layer
     (modal.css pins dialogs at --z-popover), so a section editor opened from it
     lands on top; the head centres its title */
  .pw-push--layer { z-index: calc(var(--z-popover) - 1); }
  .settings-dim.settings-dim--layer { z-index: calc(var(--z-popover) - 2); }   /* its dim stays under it too */
  .pw-push-body { padding: var(--space-2) var(--space-4) var(--space-8); }
  .pw-push-title { flex: 1; min-width: 0; text-align: center; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pw-push-spacer { width: 44px; flex-shrink: 0; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .pw-push { animation: none; transition: none; }
}

/* Phone-only callout on the portal Website tab: the builder is desktop-only */
.pw-mobile-note { display: none; align-items: flex-start; gap: var(--space-3); padding: var(--space-3-5) var(--space-4); margin-bottom: var(--space-4); background: var(--surface-sunk); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); }
.pw-mobile-note-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.pw-mobile-note-ico svg { width: 16px; height: 16px; }
.pw-mobile-note b { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-mobile-note p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1023px) {
  .pw-detail-grid { grid-template-columns: 1fr; }
  .pw-aside { display: none; }
}
@media (max-width: 720px) {
  /* the builder is desktop-only; on phones the hero keeps just the live link,
     as a 44px raised disc (icon only) on the right of the name */
  .pw-hero-acts [data-pw-edit] { display: none; }
  .pw-hero-acts:empty, .pw-hero-acts:not(:has(a)) { display: none; }
  .pw-hero-acts a.btn {
    width: 44px; height: 44px; padding: 0; justify-content: center;
    border-radius: var(--radius-full); border: 1px solid transparent;
    background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-disc);
  }
  .pw-hero-acts a.btn span { display: none; }
  .pw-hero-acts a.btn svg { width: 19px; height: 19px; }
  .pw-hero-acts a.btn:active { transform: scale(0.97); }
  .pw-mobile-note { display: flex; }
  .pw-preview-heading h3 { display: none; }
  .pw-preview-heading .pw-live-line { margin-top: 0; }
  .pw-preview-heading .pw-address-line { flex-direction: column; align-items: flex-start; gap: var(--space-1-5); }
  .pw-address-line .pw-hero-sep { display: none; }
  .pw-address-line a { max-width: 100%; white-space: normal; }
  .pw-address-line a span { overflow-wrap: anywhere; }
  .ob-cancel { display: none; }   /* the sheet header's X closes the brief */
  .ob-foot .btn-primary { flex: 1; }
  /* preview bar: the device switch is the 44px rounded pill from the mobile
     topbar; Open is dropped (the hero's View website disc covers it) */
  .pw-preview-bar .segmented { min-height: 44px; padding: 4px; border-radius: var(--radius-full); }
  .pw-preview-bar .segmented button { height: 36px; min-width: 44px; padding: 0 12px; border-radius: var(--radius-full); }
  .pw-preview-bar > .btn { display: none; }   /* the hero's View website disc already opens the live site */
  /* Details: no sub-tab pills on phones — the Overview rows' Edit icons are the navigation, and each detail screen gets a Back to Overview */
  .pw-subtabs { display: none; }
  .pw-back { display: inline-flex; align-self: flex-start; }
  /* section header: the Updated stamp drops under the title instead of overflowing */
  .pw-dhead { flex-wrap: wrap; }
  .pw-dhead > div { min-width: 0; flex: 1 1 100%; }
  .pw-dhead > span, .pw-dhead > button { margin-left: 0; }
  .pw-live-line { min-width: 0; }
  .pw-pt-tools { flex-wrap: wrap; }
  .pw-pt-search { width: 100%; }
  .pw-ptable th:nth-child(2), .pw-ptable td.pw-pt-type { display: none; }
  .pw-glance-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2-5); }
  .pw-glance-row .pw-glance-v { grid-column: 1 / -1; }
  /* Edit collapses to a naked icon pinned top-right of the row (icon-ghost look) */
  .pw-glance-edit { grid-column: 2; grid-row: 1; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-soft); }
  .pw-glance-edit span { display: none; }
  .pw-glance-edit svg { width: 16px; height: 16px; }
}

/* ---- detail-form group anatomy (the mock's sectioned forms) -------------- */
.sd-group { display: flex; flex-direction: column; gap: 2px; }
.sd-group b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sd-group p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.sd-group-sep { height: 1px; background: var(--border-faint); margin: var(--space-1) 0; }
/* slider head: label left, the live positioning readout right */
.sd-range-head { display: flex; align-items: center; }
.sd-range-head .sd-range-val { margin-left: auto; font-style: normal; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--primary-600); }

/* ---- Domain: the two own-domain option cards + footnotes ----------------- */
.dp-own { display: flex; flex-direction: column; gap: var(--space-3); }
.dp-optcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dp-optcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); }
.dp-optcard > .dp-ico { margin-bottom: var(--space-1); }
.dp-optcard b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.dp-optcard small { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
.dp-optcard-cta { width: 100%; justify-content: center; margin-top: var(--space-3); }
.dp-optcard-cta svg:last-child { width: 15px; height: 15px; }
.dp-foot-note { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
.dp-foot-note svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 640px) { .dp-optcards { grid-template-columns: 1fr; } }

/* Pages table: the two row actions sit side by side, never stacked */
.pw-ptable td.pw-pt-acts { white-space: nowrap; }
.pw-pt-status .tone-pill { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.pw-pt-status .pw-dot { width: 6px; height: 6px; }

/* aside bullets survive the global list reset; markers stay muted */
.pw-aside-list { list-style: disc; }
.pw-aside-list li::marker { color: var(--text-soft); }
/* the Suggestions caption sits on its own line above the chips (mock parity) */
.sd-suggest-k { flex-basis: 100%; margin-right: 0; }

/* ---- Details section pages read at the mock's scale ---------------------
   One size-step up from the compact accordion the builder gear keeps: a bold
   page title, 15px group heads, 14px labels/help, 44px fields, more air. */
.pw-dhead h3 { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.pw-dhead p { font-size: var(--text-md); }
.pw-detail-form { gap: var(--space-5); }   /* fills its grid track — the aside caps the line length */
.pw-detail-form .sd-group b { font-size: var(--text-base); }
.pw-detail-form .sd-group p { font-size: var(--text-md); }
.pw-detail-form .sd-group-sep { margin: var(--space-2) 0; }
.pw-detail-form .sd-field > span { font-size: var(--text-md); }
.pw-detail-form .sd-field > span small { font-size: var(--text-sm); }
.pw-detail-form .input { height: 44px; }
.pw-detail-form textarea.input { height: auto; }
.pw-detail-form .sd-tokens { min-height: 48px; padding: var(--space-2); }
.pw-detail-form .sd-token-input { height: 30px; }
.pw-detail-form .sd-suggest-k { font-size: var(--text-sm); }
.pw-detail-form .pw-formfoot { padding-top: var(--space-5); }
.pw-detail-form .sd-usp { padding: var(--space-3) var(--space-3-5); font-size: var(--text-md); }

/* Included-address: a full-bleed sunk band across the card's foot, and the
   Active pill carries its status dot (mock parity) */
.dp-card > .dp-addr { margin: var(--space-1) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); border: 0; border-top: 1px solid var(--border-faint); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.dp-addr-ico { display: inline-flex; color: var(--text-soft); }
.dp-addr-ico svg { width: 15px; height: 15px; }
.dp-pill { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.dp-pill .pw-dot { width: 6px; height: 6px; }
@media (max-width: 640px) { .dp-card > .dp-addr { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); } }

/* ---- token area, mock parity: tags-only well + an add BAR below it ------- */
.sd-add { display: flex; gap: var(--space-2); }
.sd-add .input { flex: 1; min-width: 0; }
.sd-add .btn { flex-shrink: 0; }
.pw-detail-form .sd-add .btn { height: 44px; }
.sd-tokens:empty { display: none; }
/* tags and suggestion chips are WHITE with a hairline (not grey fills) */
.sb-chip--x.is-on { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-xs); }
.sd-suggest .sb-chip--add { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
@media (hover: hover) and (pointer: fine) { .sd-suggest .sb-chip--add:hover { background: var(--gray-50); } }
/* dark: outrank `html[data-theme="dark"] .sb-chip.is-on` (primary-600 is
   near-white there, which left the tag unreadable) */
html[data-theme="dark"] .sb-chip--x.is-on { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .sb-chip--x.is-on:hover { background: var(--gray-50); border-color: var(--border-strong); }
}

/* the Add button sits INSIDE the add field (the merged-control recipe):
   the wrapper wears the input chrome, the input goes naked, the button is a
   compact soft pill at the right edge */
.sd-add { align-items: center; gap: var(--space-1); padding-right: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sd-add:focus-within { border-color: var(--primary-400); box-shadow: var(--ring-primary); }
.sd-add .input, .sd-add .input:focus { border: 0; box-shadow: none; background: transparent; }
.sd-add .btn { height: 32px; padding: 0 var(--space-2-5); font-size: var(--text-sm); border: 0; box-shadow: none; background: var(--gray-100); }
@media (hover: hover) and (pointer: fine) { .sd-add .btn:hover { background: var(--gray-150); } }
.pw-detail-form .sd-add .btn { height: 34px; }

/* the token well's "+N more / Show fewer" toggle — a quiet dashed chip pinned last */
.sd-tok-more { order: 1; background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .sd-tok-more:hover { background: var(--gray-50); color: var(--text-strong); } }
/* .sb-chip's display outranks the UA [hidden] rule (same trap as .sb-field) */
.sd-tokens > [hidden] { display: none !important; }

/* Publish button as live badge: "Published" reads as a quiet confirmation, not a call to action */
#publish.is-live { background: color-mix(in srgb, var(--success-600) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success-600) 30%, var(--surface)); color: var(--success-700); }

/* =========================================================================
   Business profile (features/sites/businessProfile) — the summary list +
   the section editor modal. Shared by Settings → Business (portal), the
   Business profile card on the admin client record, and (its screens) the
   welcome flow; the screens themselves are the wizard's `.sb-*` pieces above.
   ========================================================================= */
.bp-list { display: flex; flex-direction: column; }
.bp-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3-5) 0; border-bottom: 1px solid var(--border-faint); }
.bp-row:last-child { border-bottom: 0; }
.bp-row-ico { flex-shrink: 0; display: inline-flex; margin-top: 2px; color: var(--text-soft); }   /* naked 15px stroke (Attio) */
.bp-row-ico svg { width: 15px; height: 15px; }
.bp-row-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bp-row-body b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.bp-row-val { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-muted); overflow-wrap: anywhere; }
.bp-row-val small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-soft); }
.bp-row-val .sb-rv-chips { margin-top: 1px; }
.bp-row.is-empty .bp-row-val { color: var(--text-soft); }
.bp-row .btn { flex-shrink: 0; margin-top: -3px; }
.bp-edit { display: flex; flex-direction: column; gap: var(--space-5); }
.bp-edit-sub { margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.bp-edit-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ---- .sb-fields--pop: the wizard's business screens as plain form fields ----
   Used by the portal's welcome flow (.onb-fields) and the profile editor modal
   (.bp-edit-fields) so both look the same: one column, the industry search at
   the plain input's size, the industry matches and city suggestions floating
   under their field as popovers (only while it has focus), the wizard-only
   hints hidden. */
/* the shared business screens inside the form: one column, breathing room between groups */
.sb-fields--pop .sb-grid2 { grid-template-columns: 1fr; gap: var(--space-4); }
.sb-fields--pop .sb-span2 { grid-column: auto; }
.sb-fields--pop .sb-field > span { font-size: var(--text-sm); }
.sb-fields--pop .sb-field textarea.input { min-height: 84px; }
/* the industry matches float under the search as a popover (same surface as
   the city suggestions) while the field has focus, instead of stacking cards
   into the step; picking one moves focus to Continue, which closes it */
.sb-fields--pop .sb-field { position: relative; }
.sb-fields--pop .sb-tresults { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-popover); max-height: 260px; overflow: auto; margin: 0; padding: 6px; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: popIn var(--dur) var(--ease); }
.sb-fields--pop .sb-field:focus-within .sb-tresults:not(:empty) { display: grid; }
.sb-fields--pop .sb-tres { min-width: 0; width: 100%; overflow: hidden; min-height: 42px; padding: 0 10px; gap: var(--space-2-5); border: 0; border-radius: var(--radius-sm); box-shadow: none; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text); }
.sb-fields--pop .sb-tres > svg { width: 14px; height: 14px; padding: 0; border: 0; background: none; color: var(--text-soft); }
.sb-fields--pop .sb-tres-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; overflow: hidden; }
.sb-fields--pop .sb-tres-label small { flex: 0 1 auto; min-width: 0; max-width: 55%; text-align: right; }
.sb-fields--pop .sb-tresults { overflow-x: hidden; }
.sb-fields--pop .sb-tres-tick { width: 16px; height: 16px; background: none; color: var(--primary-600); }
.sb-fields--pop .sb-tres.is-on, .sb-fields--pop .sb-tres.is-hi, .sb-fields--pop .sb-tres:focus-visible { border: 0; box-shadow: none; background: var(--nav-hover-bg); }
.sb-fields--pop .sb-tres.is-on > svg, .sb-fields--pop .sb-tres.is-hi > svg { color: var(--text-soft); border: 0; background: none; }
@media (hover: hover) and (pointer: fine) { .sb-fields--pop .sb-tres:hover { border: 0; box-shadow: none; background: var(--nav-hover-bg); } .sb-fields--pop .sb-tres:hover > svg { color: var(--text-soft); border: 0; } }
/* the city suggestions sit under the input (the wizard's hint is hidden here) */
.sb-fields--pop .sb-suggest { top: calc(100% + 6px); max-height: 220px; }
.sb-fields--pop .sb-tresults { max-height: 220px; }
.sb-fields--pop .sb-tagsel-menu { max-height: min(300px, 40dvh); }
/* the shared business screens: the industry search sits at the plain input's
   size, and the wizard-only hints under industry / city stay hidden here */
.sb-fields--pop .sb-tsearch { height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); }
.sb-fields--pop .sb-tsearch input { font-size: var(--text-md); }
.sb-fields--pop #wzTradeHint, .sb-fields--pop #wzCityHint { display: none; }
.sb-fields--pop .sb-usp-extra { margin-bottom: var(--space-3); }
/* the "why you" chips sit at the same height as the hours / tenure chips */
.sb-fields--pop .sb-chips--lg .sb-chip { height: 36px; padding: 0 14px; }
.sb-fields--pop .sb-block { margin-bottom: var(--space-4); }
.sb-fields--pop .sb-push, .sb-fields--pop .sb-price { margin-top: var(--space-4); }
.sb-fields--pop .sb-regions { margin-bottom: var(--space-3); }

/* inside a modal an open popover escapes the dialog instead of being clipped by
   its scrolling body — only while a popover field has focus, so the body still
   scrolls the rest of the time */
/* "a popover is open": the industry matches show on focus, the city / address /
   area suggestions and the services menu drop their hidden attribute */
.modal-shell:has(.sb-fields--pop .sb-field:focus-within),
.modal-shell:has(.sb-fields--pop .sb-suggest:not([hidden])),
.modal-shell:has(.sb-fields--pop .sb-tagsel-menu:not([hidden])) { overflow: visible; }
.modal-shell:has(.sb-fields--pop .sb-field:focus-within) .modal-body,
.modal-shell:has(.sb-fields--pop .sb-suggest:not([hidden])) .modal-body,
.modal-shell:has(.sb-fields--pop .sb-tagsel-menu:not([hidden])) .modal-body { overflow: visible; }
/* with overflow off, the shell no longer clips its corners — the head and foot round their own */
.modal-shell:has(.sb-fields--pop .sb-field:focus-within) .modal-head,
.modal-shell:has(.sb-fields--pop .sb-field:focus-within) .modal-foot,
.modal-shell:has(.sb-fields--pop .sb-suggest:not([hidden])) .modal-head,
.modal-shell:has(.sb-fields--pop .sb-suggest:not([hidden])) .modal-foot,
.modal-shell:has(.sb-fields--pop .sb-tagsel-menu:not([hidden])) .modal-head,
.modal-shell:has(.sb-fields--pop .sb-tagsel-menu:not([hidden])) .modal-foot { border-radius: inherit; }

/* quick mode: the wizard's rail is the one "Your website" chapter */
.sb-chapters--one { grid-template-columns: 1fr; }
/* thumb-sized chips on touch — the welcome flow and the wizard are answered on phones */
@media (pointer: coarse) {
  .sb-chip { height: 40px; }
  .sb-chips--sm .sb-chip { height: 34px; }
  .sb-tres { min-height: 60px; }
}

/* Website → Details → Overview: the pointer to Settings → Business (the facts' one home) */
.pw-biz-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.pw-biz-ico { flex-shrink: 0; display: inline-flex; margin-top: 2px; color: var(--text-soft); }
.pw-biz-ico svg { width: 16px; height: 16px; }
.pw-biz-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pw-biz-body b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-biz-body p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.pw-biz-body small { font-size: var(--text-xs); color: var(--text-soft); }
.pw-biz-card .btn { flex-shrink: 0; }
@media (max-width: 640px) { .pw-biz-card { flex-wrap: wrap; } .pw-biz-card .btn { width: 100%; justify-content: center; } }

.bp-google-choice { display: inline-flex; align-items: center; gap: var(--space-2); }
.bp-google-choice img { flex: 0 0 16px; width: 16px; height: 16px; }
.bp-manual-reviews { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.bp-manual-reviews > .btn { justify-self: start; }
.bp-manual-reviews > .bp-list:empty { display: none; }
.bp-manual-reviews .sb-stars button { width: var(--space-8); height: var(--space-8); align-items: center; justify-content: center; }

/* Reviews: choose a source, confirm a business, then preview only when needed. */
.rv-google-flow, .rv-results, .rv-matches { display: grid; gap: var(--space-4); }
.rv-results:empty, .rv-results[hidden], .bp-manual-reviews[hidden] { display: none; }
.rv-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rv-source { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); min-height: 48px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-muted); }
.rv-source > img, .rv-source > svg { width: 20px; height: 20px; flex: 0 0 20px; }
.rv-source > span { display: grid; gap: var(--space-0-5); flex: 1; min-width: 0; }
.rv-source b { color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.rv-source small { font-size: var(--text-xs); line-height: var(--leading-snug); }
.rv-source > svg:last-child { width: 14px; height: 14px; flex-basis: 14px; }
.rv-source[aria-pressed="true"] { background: var(--gray-50); border-color: var(--text-strong); }
.rv-result-heading { display: grid; gap: var(--space-1); }
.rv-result-heading b, .rv-business-copy b, .rv-manual-heading b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.rv-result-heading > span, .rv-business-copy > span, .rv-business-copy p { font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--text-muted); margin: 0; }
.rv-match { width: 100%; display: flex; align-items: center; gap: var(--space-3); text-align: left; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.rv-business-copy { display: grid; flex: 1; min-width: 0; gap: var(--space-1); overflow-wrap: anywhere; }
.rv-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radius-full); overflow: hidden; background: var(--gray-100); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.rv-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-avatar--business { flex-basis: 48px; width: 48px; height: 48px; border-radius: var(--radius-md); }
.rv-match-arrow { display: inline-flex; color: var(--text-soft); }
.rv-match-arrow svg { width: 18px; height: 18px; }
.rv-photo-credit { display: block; margin-top: var(--space-1-5); color: var(--text-soft); font-size: var(--text-xs); line-height: var(--leading-snug); }
.rv-photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rv-google-attribution { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.rv-google-attribution img, .rv-review-head > img { width: 16px; height: 16px; flex-shrink: 0; }
.rv-search-edit { border-top: 1px solid var(--border-faint); padding-top: var(--space-3); }
.rv-search-edit summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); }
.rv-search-fields { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.rv-search-fields > .btn { justify-self: start; }
.rv-connected { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.rv-business-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.rv-connected > .rv-photo-credit { margin: calc(-1 * var(--space-2)) var(--space-4) var(--space-3); }
.rv-ready { display: flex; align-items: flex-start; gap: var(--space-2-5); margin: 0 var(--space-4) var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success-700); }
.rv-ready > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.rv-ready > span { display: grid; gap: var(--space-1); }
.rv-ready b { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.rv-ready small { font-size: var(--text-xs); line-height: var(--leading-snug); }
.rv-review-disclosure { border-top: 1px solid var(--border-faint); }
.rv-review-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); list-style: none; }
.rv-review-disclosure > summary::-webkit-details-marker { display: none; }
.rv-disclosure-tail { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-soft); font-size: var(--text-xs); }
.rv-disclosure-tail svg { width: 16px; height: 16px; }
.rv-review-disclosure[open] .rv-disclosure-tail svg { transform: rotate(180deg); }
.rv-review-list { display: grid; gap: var(--space-3); padding: 0 var(--space-4); }
.rv-review { padding: var(--space-4); border: 1px solid var(--border-faint); border-radius: var(--radius-md); }
.rv-review-head { display: flex; align-items: center; gap: var(--space-2-5); }
.rv-review-person { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }
.rv-review-person > a { color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.rv-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-soft); font-size: var(--text-xs); }
.rv-stars, .rv-business-copy > .rv-stars { color: var(--warning-600); letter-spacing: 1px; }
.rv-review-text { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-review-text.is-expanded { display: block; }
.rv-text-action { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 28px; color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--fw-medium); text-align: left; text-underline-offset: 3px; }
.rv-fineprint { margin: var(--space-3) var(--space-4); color: var(--text-soft); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.rv-connected-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-faint); }
.rv-loading { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); color: var(--text-muted); font-size: var(--text-sm); }
.rv-notice { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.rv-notice p { margin: 0; color: var(--text-muted); line-height: var(--leading-relaxed); }
.rv-notice > .btn { justify-self: start; }
.rv-manual-list { display: grid; gap: var(--space-3); }
.rv-manual-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.rv-manual-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.rv-manual-fields { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-2); }
.rv-manual-fields .input:not(:focus) { box-shadow: none; }
.rv-manual-fields .sb-stars { gap: 0; }
.rv-manual-fields .sb-stars button { width: var(--space-7); height: var(--space-7); }
.rv-manual-fields .sb-stars svg { width: var(--space-4); height: var(--space-4); }
.rv-manual-fields .sb-span2 { grid-column: auto; }
.rv-manual-fields > .btn { justify-self: end; }
.rv-rating-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.rv-manual-summary { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: left; background: var(--surface); }
.rv-manual-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-source:focus-visible, .rv-match:focus-visible, .rv-text-action:focus-visible, .rv-manual-summary:focus-visible, .rv-review-disclosure > summary:focus-visible, .rv-search-edit > summary:focus-visible, .rv-rating-row button:focus-visible { outline: none; box-shadow: var(--ring-primary); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .rv-source:hover, .rv-match:hover, .rv-manual-summary:hover { background: var(--gray-50); border-color: var(--border-strong); }
  .rv-text-action:hover, .rv-review-person > a:hover, .rv-google-attribution:hover { color: var(--text-strong); text-decoration: underline; }
}
@media (max-width: 480px) {
  .rv-source { padding: var(--space-3); gap: var(--space-2); }
  .rv-source > svg:last-child { display: none; }
  .rv-source small { font-size: var(--text-xs); }
  .rv-business-head { flex-wrap: wrap; }
}

.rv-review[hidden] { display: none; }
.rv-review-carousel:focus-visible { outline: none; box-shadow: inset var(--ring-primary); }
.rv-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); color: var(--text-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.rv-carousel-arrows { display: flex; gap: var(--space-2); }
.rv-carousel-arrows .btn svg { width: 16px; height: 16px; }

.pw-global-reviews { display:flex; flex-direction:column; gap:var(--space-5); }

.pw-root > [data-website-review-prompt]:not([hidden]) { max-width:1280px; margin-inline:auto; padding:var(--space-5) var(--space-6) 0; }
@media(max-width:640px) { .pw-root > [data-website-review-prompt]:not([hidden]) { padding:var(--space-4) var(--space-4) 0; } }

/* First website: a concrete destination and honest readiness, not an empty screen. */
.website-start { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); align-items:center; padding:var(--space-10); border:1px solid var(--border); border-radius:var(--radius-xl); background:linear-gradient(120deg,var(--surface) 45%,var(--surface-sunk)); overflow:hidden; }
.website-start-eyebrow { font-size:var(--text-2xs); letter-spacing:.12em; font-weight:var(--fw-semibold); color:var(--text-soft); }
.website-start-copy h2 { margin:var(--space-4) 0; font-size:clamp(24px,2.6vw,38px); line-height:1.1; letter-spacing:-.045em; font-weight:var(--fw-semibold); color:var(--text-strong); }
.website-start-copy h2 em { font-style:normal; color:var(--text-muted); }
.website-start-copy > p { max-width:360px; color:var(--text-muted); font-size:var(--text-base); line-height:1.6; }
.website-start-readiness { display:grid; gap:var(--space-2); margin:var(--space-5) 0; color:var(--text-muted); font-size:var(--text-xs); }
.website-start-readiness > div { display:flex; gap:var(--space-1); max-width:150px; }
.website-start-readiness i { height:4px; flex:1; border-radius:var(--radius-full); background:var(--border); }
.website-start-readiness i.is-ready { background:var(--success-600); }
.website-start-copy > small { display:block; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--text-soft); }
.website-start-points { display:grid; gap:var(--space-2); padding:0; margin:var(--space-6) 0 0; list-style:none; color:var(--text-muted); font-size:var(--text-sm); }
.website-start-points li { display:flex; gap:var(--space-2); align-items:center; }
.website-start-points svg { width:14px; height:14px; }
.website-start-visual { min-width:0; transform:rotate(-2deg); }
.website-start-browser { border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden; }
.website-start-chrome { display:flex; align-items:center; gap:var(--space-1); height:32px; padding:0 var(--space-3); background:var(--surface-sunk); border-bottom:1px solid var(--border); }
.website-start-chrome i { width:6px; height:6px; border-radius:var(--radius-full); background:var(--border); }
.website-start-chrome span { margin-left:var(--space-3); font-size:var(--text-2xs); color:var(--text-soft); }
.website-start-nav { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4); font-size:var(--text-xs); }
.website-start-nav svg { width:14px; height:14px; }
.website-start-hero { display:grid; justify-items:start; gap:var(--space-3); padding:var(--space-8) var(--space-5); background:var(--info-bg); color:var(--text-strong); }
.website-start-hero > span:first-child { font-size:9px; letter-spacing:.1em; }
.website-start-hero h3 { margin:0; font-size:clamp(22px,2vw,30px); line-height:1.1; letter-spacing:-.035em; }
.website-start-mock-button { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); background:var(--text-strong); color:var(--surface); font-size:var(--text-2xs); }
.website-start-mock-button svg { width:12px; height:12px; }
.website-start-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); padding:var(--space-4); }
.website-start-gallery > div { display:grid; justify-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-1); border-radius:var(--radius-md); background:var(--surface-sunk); color:var(--text-muted); font-size:var(--text-2xs); }
.website-start-gallery svg { width:22px; height:22px; }
.website-start-preview-note { padding:0 var(--space-4) var(--space-4); color:var(--text-soft); font-size:var(--text-2xs); }
@media(max-width:850px) { .website-start { gap:var(--space-6); padding:var(--space-6); } }
@media(max-width:640px) { .website-start { grid-template-columns:1fr; padding:var(--space-5); } .website-start-visual { transform:none; } }

/* Review saving stays reachable inside the phone details sheet. */
@media (max-width: 700px) {
  .pw-push .pw-global-reviews .pw-formfoot { display: flex; position: sticky; bottom: 0; z-index: 4; background: var(--surface); padding: 12px 0 max(12px, env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .pw-global-reviews .pw-formfoot-acts { margin-left: auto; }
}

.website-sync-notice { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; margin-bottom:20px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.website-sync-notice p { margin:4px 0 0; color:var(--text-muted); }
.website-activation--compact .activation-head p,
.website-activation--compact .activation-photo-art,
.website-activation--compact .activation-review-art,
.website-activation--compact .activation-eyebrow,
.website-activation--compact .activation-copy small { display:none; }
.website-activation--compact .activation-card { min-height:0; padding:16px; }
.website-activation--compact .activation-copy h3 { font-size:16px; }
.website-activation--compact .activation-copy { max-width:none; }
@media(max-width:700px) { .website-sync-notice { align-items:flex-start; flex-direction:column; } }

.pw-launch { display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin:0 0 20px; background:var(--surface); }
.pw-launch p { margin:5px 0 0; font-size:13px; color:var(--text-muted); max-width:70ch; }
@media(max-width:700px) { .pw-launch { align-items:flex-start; flex-direction:column; } }

.rv-curation { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--border); padding-top:12px; margin-top:12px; font-size:12px; }
.rv-curation label { display:flex; align-items:center; gap:6px; }

.photo-detail-action { position:absolute; bottom:6px; right:6px; border:1px solid var(--border); background:var(--surface); color:var(--text-strong); border-radius:6px; padding:4px 8px; font-size:11px; cursor:pointer; }
.photo-detail-panel { display:grid; gap:14px; }
.photo-detail-panel label { display:grid; gap:6px; font-size:13px; }
.photo-crop-preview { width:100%; max-height:240px; aspect-ratio:16/9; object-fit:cover; border-radius:10px; background:var(--surface); }
.photo-detail-panel p { margin:0; font-size:13px; color:var(--text-muted); }
.photo-detail-actions { display:flex; gap:8px; flex-wrap:wrap; }
.photo-quality-note { padding:10px; border:1px solid var(--border); border-radius:8px; }

/* Single-select companion to the service tag picker. */
.sb-priority { position: relative; }
.sb-priority-toggle { display:flex; align-items:center; gap:var(--space-2); width:100%; text-align:left; cursor:pointer; }
.sb-priority-toggle > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-priority-toggle > svg { width:16px; height:16px; flex:none; color:var(--text-soft); }
.sb-priority-toggle[aria-expanded="true"] { border-color:var(--primary-400); box-shadow:var(--ring-primary); }
.sb-priority .sb-tagsel-menu { box-sizing:border-box; max-height:240px; padding:var(--space-1-5); overscroll-behavior:contain; }
.sb-priority .sb-tagsel-menu.is-above { top:auto; bottom:calc(100% + 4px); }
.sb-priority .sb-tagsel-menu .filter-opt { width:100%; min-height:0; height:36px; padding:0 var(--space-2-5); border-radius:var(--radius-sm); font-size:var(--text-sm); }

/* Agency handoff: the release / launch-mode dialogs (the queue itself is above). */
.pw-review-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.sg-review-dialog { display:grid; gap:var(--space-4); }
.sg-review-dialog p { margin:0; color:var(--text-muted); line-height:1.6; }
.sg-review-checks { display:grid; gap:var(--space-3); }
.sg-review-checks label { display:flex; align-items:flex-start; gap:var(--space-2); line-height:1.5; }
.sg-review-checks input { margin-top:var(--space-1); accent-color:var(--primary-600); }
.sg-review-checks label:has(.checkbox) { gap:var(--space-3); cursor:pointer; }
.pw-review-wait { max-width:760px; margin:var(--space-6) auto; padding:var(--space-8); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.pw-review-eyebrow { display:flex; gap:var(--space-2); align-items:center; color:var(--text-muted); font-size:var(--text-sm); }
.pw-review-wait h2 { color:var(--text-strong); font-size:var(--text-2xl); margin:var(--space-4) 0; }
.pw-review-wait p { color:var(--text-muted); line-height:1.7; max-width:60ch; }
.pw-review-wait small { display:block; color:var(--text-muted); margin-top:var(--space-4); }
.pw-review-steps { display:grid; gap:var(--space-4); margin:var(--space-6) 0; padding:0; list-style:none; }
.pw-review-steps li { display:flex; align-items:center; gap:var(--space-3); color:var(--text-muted); }
.pw-review-steps svg { width:20px; height:20px; }
.pw-review-steps .is-current { color:var(--text-strong); font-weight:600; }
@media (max-width:640px) { .pw-review-wait { padding:var(--space-5); } }

.pw-review-eyebrow svg { width:18px; height:18px; flex-shrink:0; }

/* One composition: a softly lit hero glimpse and a quiet, readable handover. */
.pw-review-handover { --pw-review-accent:var(--primary-500); width:100%; max-width:680px; margin:var(--space-6) auto; border:1px solid var(--border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-md); overflow:hidden; }
.pw-review-teaser { height:320px; position:relative; overflow:hidden; isolation:isolate; background:color-mix(in srgb, var(--pw-review-accent) 7%, var(--surface)); }
.pw-review-teaser::before { content:""; position:absolute; inset:-30%; background:radial-gradient(ellipse at 25% 45%, color-mix(in srgb, var(--pw-review-accent) 65%, transparent), transparent 45%), radial-gradient(ellipse at 80% 35%, color-mix(in srgb, var(--pw-review-accent) 30%, var(--surface)), transparent 55%); filter:blur(45px); opacity:.65; }
.pw-review-teaser::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 65%, var(--surface)); }
.pw-review-teaser-frame { position:absolute; inset:var(--space-8) var(--space-12) var(--space-10); border:1px solid color-mix(in srgb, var(--surface) 65%, transparent); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); pointer-events:none; user-select:none; transform:rotate(-2deg); background:var(--surface); }
.pw-review-teaser iframe { display:block; width:1200px; height:850px; border:0; transform-origin:top left; filter:blur(5px); opacity:.85; }
.pw-review-teaser-frame:not(.pw-review-teaser-mobile) { left:9%; right:16%; }
.pw-review-teaser-mobile { inset:auto auto var(--space-8) 84%; width:17%; height:228px; transform:translateX(-50%) rotate(5deg); border:3px solid var(--surface); }
.pw-review-teaser-mobile iframe { width:390px; filter:blur(3px); }
.pw-review-teaser-label { position:absolute; bottom:var(--space-5); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:var(--space-2); white-space:nowrap; padding:var(--space-2) var(--space-4); border:1px solid color-mix(in srgb, var(--surface) 70%, var(--border)); border-radius:var(--radius-full); background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:var(--text); font-size:var(--text-xs); box-shadow:var(--shadow-sm); z-index:var(--z-sticky); }
.pw-review-teaser-label svg { width:14px; height:14px; }
.pw-review-teaser-fallback { display:grid; gap:var(--space-6); padding:var(--space-8); font-size:var(--text-2xl); color:var(--text-strong); filter:blur(5px); }
.pw-review-handover .pw-review-wait { margin:0; max-width:none; padding:var(--space-5) var(--space-10) var(--space-8); border:0; border-radius:0; text-align:center; background:transparent; }
.pw-review-handover .pw-review-eyebrow { justify-content:center; font-size:var(--text-xs); gap:var(--space-1-5); }
.pw-review-handover .pw-review-eyebrow svg { width:15px; height:15px; }
.pw-review-handover h2 { font-size:clamp(24px, 2.5vw, 30px); letter-spacing:-.035em; line-height:1.2; margin:var(--space-3) 0; }
.pw-review-handover .pw-review-wait > p { margin:0 auto; max-width:52ch; font-size:var(--text-sm); line-height:1.7; }
.pw-review-countdown { display:grid; justify-items:center; gap:var(--space-2); margin:var(--space-6) 0 0; padding:var(--space-5) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pw-review-countdown > span { font-size:var(--text-xs); color:var(--text-muted); }
.pw-review-countdown strong { font-size:clamp(32px, 4vw, 42px); line-height:1.15; font-weight:500; letter-spacing:.035em; font-variant-numeric:tabular-nums; color:var(--text-strong); white-space:nowrap; }
.pw-review-countdown p { margin:0; font-size:var(--text-xs); }
.pw-review-handover .pw-review-steps { grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; margin:var(--space-6) 0; }
.pw-review-handover .pw-review-steps li { position:relative; display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-xs); font-weight:500; }
.pw-review-handover .pw-review-steps li:not(:last-child)::after { content:""; position:absolute; top:18px; left:calc(50% + 25px); width:calc(100% - 50px); height:1px; background:var(--border); }
.pw-review-step-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--surface); }
.pw-review-step-icon svg { width:16px; height:16px; }
.pw-review-steps .is-done .pw-review-step-icon { background:var(--surface-hover); color:var(--text); }
.pw-review-steps .is-current .pw-review-step-icon { background:var(--btn-primary-bg); border-color:var(--btn-primary-bg); color:var(--on-primary); box-shadow:0 0 0 5px var(--surface-hover); }
.pw-review-handover .pw-review-actions { justify-content:center; }
.pw-review-handover .pw-review-actions svg { width:16px; height:16px; }
.pw-review-handover .pw-review-wait small { font-size:var(--text-xs); line-height:1.5; }
@media(max-width:640px) { .pw-review-handover { margin:var(--space-3) auto; } .pw-review-teaser { height:210px; } .pw-review-teaser-frame { inset:var(--space-6) var(--space-5) var(--space-8); } .pw-review-handover .pw-review-wait { padding:var(--space-4) var(--space-5) var(--space-6); } .pw-review-handover .pw-review-steps { margin:var(--space-5) 0; } }

/* Dashboard handover banner shares the website's ambient brand glow. */
@media(max-width:640px) { .pw-review-teaser-frame:not(.pw-review-teaser-mobile) { left:9%; right:16%; } .pw-review-teaser-mobile { inset:auto auto var(--space-6) 84%; width:17%; height:142px; } }
.pw-review-banner { animation:pw-review-banner-enter var(--dur-slow) var(--ease-enter) both; }
@keyframes pw-review-banner-enter { from { opacity:0; transform:translateY(var(--space-1-5)); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .pw-review-banner { animation:none; } }
.pw-review-banner { --pw-review-accent:var(--primary-500); display:grid; grid-template-columns:260px minmax(180px,1fr) auto auto; align-items:center; gap:var(--space-6); min-height:148px; padding:0 var(--space-6) 0 0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); }
.pw-review-banner-art { position:relative; align-self:stretch; min-height:148px; overflow:hidden; isolation:isolate; background:color-mix(in srgb, var(--pw-review-accent) 4%, var(--surface)); }
.pw-review-banner-art::before { content:""; position:absolute; inset:-15%; background:radial-gradient(ellipse at 45% 75%, color-mix(in srgb, var(--pw-review-accent) 40%, transparent), transparent 65%), radial-gradient(ellipse at 15% 95%, color-mix(in srgb, var(--pw-review-accent) 22%, transparent), transparent 70%); filter:blur(16px); opacity:.8; }
.pw-review-banner-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,var(--surface)); pointer-events:none; }
.pw-review-banner-preview { position:absolute; top:var(--space-4); bottom:auto; left:var(--space-4); width:78%; height:auto; aspect-ratio:7 / 4; overflow:hidden; transform:rotate(-4deg); border:1px solid color-mix(in srgb,var(--surface) 70%,var(--border)); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-md); pointer-events:none; }
.pw-review-banner-preview { z-index:var(--z-sticky); }
.pw-review-banner-preview iframe { width:1200px; height:850px; border:0; display:block; transform-origin:top left; filter:blur(12px); opacity:.96; }
.pw-review-banner-placeholder { display:grid; place-items:center; height:100%; color:var(--text-muted); background:var(--surface-hover); }
.pw-review-banner-placeholder svg { width:32px; height:32px; }
.pw-review-banner-kicker { display:flex; align-items:center; gap:var(--space-1-5); font-size:var(--text-xs); color:var(--text-muted); }
.pw-review-banner-kicker svg { width:14px; height:14px; }
.pw-review-banner-copy h2 { margin:var(--space-2) 0 var(--space-1); font-size:var(--text-xl); font-weight:600; letter-spacing:-.025em; line-height:1.25; color:var(--text-strong); }
.pw-review-banner-copy p { margin:0; font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); max-width:48ch; }
.pw-review-banner-time { display:grid; gap:var(--space-1); border-left:1px solid var(--border); padding-left:var(--space-6); }
.pw-review-banner-time span, .pw-review-banner-time small { color:var(--text-muted); font-size:var(--text-xs); }
.pw-review-banner-time strong { color:var(--text-strong); font-size:var(--text-2xl); font-weight:500; letter-spacing:.025em; font-variant-numeric:tabular-nums; line-height:1.3; }
.pw-review-banner > .btn { white-space:nowrap; }
.pw-review-banner > .btn svg { width:14px; height:14px; }
@media(max-width:1100px) { .pw-review-banner { grid-template-columns:180px minmax(0,1fr) auto; gap:var(--space-4); padding-right:var(--space-4); } .pw-review-banner-art { grid-row:span 2; } .pw-review-banner-preview { top:50%; left:var(--space-3); width:78%; height:auto; transform:translateY(-50%) rotate(-4deg); } .pw-review-banner-copy { grid-row:span 2; } .pw-review-banner-time { border:0; padding:var(--space-4) 0 0; } .pw-review-banner > .btn { justify-self:start; margin-bottom:var(--space-4); } }
@media(max-width:640px) { .pw-review-banner { grid-template-columns:120px minmax(0,1fr); gap:var(--space-4); padding:0; } .pw-review-banner-art { grid-row:1; min-height:140px; } .pw-review-banner-preview { top:50%; bottom:auto; left:var(--space-2); width:78%; height:auto; } .pw-review-banner-copy { grid-row:1; padding:var(--space-4) var(--space-4) var(--space-4) 0; } .pw-review-banner-copy h2 { font-size:var(--text-lg); } .pw-review-banner-copy p { font-size:var(--text-xs); } .pw-review-banner-time { grid-column:1/-1; grid-row:2; padding:var(--space-4); margin:0 var(--space-4); border-top:1px solid var(--border); } .pw-review-banner > .btn { grid-column:1/-1; grid-row:3; margin:0 var(--space-4) var(--space-4); justify-self:stretch; justify-content:center; } }

/* Shared skeletons preserve the final handover dimensions while data arrives. */
.pw-review-loading { pointer-events:none; }
.pw-review-loading-hero { display:block; width:100%; height:100%; }
.pw-review-loading-eyebrow { width:105px; height:15px; }
.pw-review-loading-label { width:155px; height:14px; }
.pw-review-loading-title { width:90%; height:1.2em; }
.pw-review-loading-copy { display:grid; justify-items:center; gap:var(--space-2); padding:var(--space-1) 0; }
.pw-review-loading-copy .skel { width:95%; height:15px; }
.pw-review-loading-copy .skel:last-child { width:75%; }
.pw-review-loading-clock { width:210px; height:48px; }
.pw-review-loading-note { width:min(100%, 340px); height:14px; }
.pw-review-loading-step { width:80px; max-width:90%; height:14px; }
.pw-review-loading-button { width:160px; height:38px; }
.pw-review-loading-banner-clock { width:120px; height:30px; }
.pw-review-preview-loader { display:none; position:absolute; inset:0; padding:var(--space-4); background:var(--surface-hover); color:var(--text-muted); font-size:var(--text-xs); }
.is-loading > .pw-review-preview-loader, .is-unavailable > .pw-review-preview-loader { display:flex; flex-direction:column; gap:var(--space-3); justify-content:center; }
.pw-review-preview-nav { width:100%; height:12%; margin-bottom:auto; }
.pw-review-preview-line { width:65%; height:12%; }
.pw-review-preview-line--short { width:45%; }
.pw-review-preview-cta { width:25%; height:14%; margin-top:var(--space-2); }
.pw-review-teaser iframe, .pw-review-banner-preview iframe { transition:opacity var(--dur-slow) var(--ease); }
.is-loading > iframe, .is-unavailable > iframe { opacity:0; }
@media(prefers-reduced-motion:reduce) { .pw-review-teaser iframe, .pw-review-banner-preview iframe { transition:none; } }

/* Keep one proportional frame; the rendered hero scales to cover it. */
@media(max-width:640px) {
  .pw-review-banner-art { background:var(--surface); }
  .pw-review-banner-art::before { inset:-15%; background:radial-gradient(ellipse 100% 120% at 10% 10%, color-mix(in srgb, var(--pw-review-accent) 45%, transparent), transparent 90%); }
  .pw-review-banner-art::after { background:linear-gradient(90deg,transparent 55%,var(--surface)), linear-gradient(180deg,transparent 65%,var(--surface) 100%); }
}

/* The mobile dashboard shows the same hero in a phone-sized viewport. */
@media(max-width:640px) {
  .pw-review-banner-art { min-height:176px; }
  .pw-review-banner-preview { left:var(--space-6); width:72px; aspect-ratio:1 / 2; border:3px solid var(--surface); border-radius:var(--radius-xl); }
  .pw-review-banner-preview iframe { width:390px; filter:blur(10px); }
}

/* Domain setup is the next clear step after the website handover. */
.pw-domain-launch { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-radius:var(--radius-xl); background:linear-gradient(110deg,var(--surface-hover),var(--surface) 55%); box-shadow:var(--shadow-sm); }
.pw-domain-launch-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); color:var(--text-strong); box-shadow:var(--shadow-sm); }
.pw-domain-launch-icon svg { width:22px; height:22px; }
.pw-domain-launch-eyebrow { color:var(--text-muted); font-size:var(--text-xs); }
.pw-domain-launch h3 { margin:var(--space-1) 0 0; font-size:var(--text-lg); font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.pw-domain-launch p { margin-top:var(--space-1); max-width:70ch; font-size:var(--text-sm); line-height:1.5; }
.pw-domain-launch > .btn { white-space:nowrap; }
.pw-domain-launch > .btn svg { width:16px; height:16px; }
@media(max-width:700px) {
  .pw-domain-launch { grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-4); }
  .pw-domain-launch-icon { width:44px; height:44px; }
  .pw-domain-launch-icon svg { width:22px; height:22px; }
  .pw-domain-launch > .btn { grid-column:1/-1; justify-content:center; }
}

/* One identity, status and action surface for every editable website state. */
.pw-website-header { padding:var(--space-5); border:1px solid var(--border); border-radius:var(--radius-xl); background:linear-gradient(110deg,var(--surface-hover),var(--surface) 55%); box-shadow:var(--shadow-sm); gap:var(--space-4); }
.pw-website-header .pw-hero-id { flex:1; min-width:0; }
.pw-website-next { margin:var(--space-2) 0 0; font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); max-width:65ch; }
.pw-website-header .pw-hero-acts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); flex-shrink:0; }
.pw-website-header .pw-hero-acts .btn { white-space:nowrap; }
@media(max-width:1000px) { .pw-website-header { flex-wrap:wrap; } .pw-website-header .pw-hero-acts { width:100%; } }
@media(max-width:640px) { .pw-website-header { padding:var(--space-4); } .pw-website-header .pw-hero-acts { justify-content:stretch; } .pw-website-header .pw-hero-acts .btn { flex:1; justify-content:center; } }
.pw-website-header--before-live .pw-hero-id h2 { font-size:var(--text-lg); }
.pw-website-header--before-live .pw-website-next { margin-top:var(--space-1); }
.pw-website-header[data-header-state="ready"] .pw-hero-ico { color:var(--warning-600); }
.pw-website-header[data-header-state="issue"] .pw-hero-ico { color:var(--warning-600); }

/* Same travelling ink border as the collapsed setup indicator. */
.pw-website-header[data-header-state="connecting"] {
  border-color: transparent;
  background: linear-gradient(110deg, var(--surface-hover), var(--surface) 55%) padding-box,
    conic-gradient(from var(--gs-a), var(--text-strong) 0 5%, var(--border) 5% 100%) border-box;
  animation: gsOrbit 3.6s linear infinite;
}
.pw-website-header[data-header-state="connecting"] .pw-hero-ico { color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) {
  .pw-website-header[data-header-state="connecting"],
  .pw-website-header[data-header-state="connecting"] .spinner { animation: none; }
}

/* ---- the site editor's walkthrough video (editorWalkthrough.js): the player fills the shared Modal under its
   header, flush to the sides and bottom (the frame carries the shell's bottom corners itself, so the video's own
   snapshot keeps that shape as it flies into its card) ---- */
.modal-shell[aria-label="Website editor walkthrough"] .modal-body { padding: 0; }
/* a video wants the room: as wide as the screen allows, capped so the whole 16:9 player and the header fit its height */
.modal-shell.modal-lg[aria-label="Website editor walkthrough"] { width: min(1280px, calc(100vw - 32px), calc((100vh - 160px) * 16 / 9)); }
.walkthrough-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px); background: var(--overlay-media-strong); }
.walkthrough-frame iframe, .walkthrough-frame video { display: block; width: 100%; height: 100%; border: 0; }
/* closing (editorWalkthrough.js dockInto): a view transition flies the player into the card's thumbnail. The
   frame holds the paused video for most of the flight and hands over to the thumbnail as it lands; the modal
   chrome eases back and fades, the scrim lifts. Scoped by html.wt-docking so other view transitions keep theirs. */
html.wt-docking::view-transition-group(wt-video) { animation-duration: 440ms; animation-timing-function: var(--ease); }   /* eases out of the modal and into the card: in motion the whole way, no long hang at the end */
html.wt-docking::view-transition-old(wt-video) { animation: wt-video-out 440ms linear both; }
html.wt-docking::view-transition-new(wt-video) { animation: wt-video-in 440ms linear both; }
@keyframes wt-video-out { 0%, 50% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes wt-video-in { 0%, 40% { opacity: 0; } 85%, 100% { opacity: 1; } }
html.wt-docking::view-transition-old(wt-shell) { animation: wt-shell-out 140ms var(--ease) both; }   /* the emptied modal goes quickly, so the flight reads on its own */
@keyframes wt-shell-out { to { opacity: 0; transform: scale(0.97); } }
html.wt-docking::view-transition-old(root), html.wt-docking::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease); }
/* the card: the video's home, at the top of the right panel above the tips */
.sb-tour { display: grid; width: 100%; margin-bottom: var(--space-4); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sb-tour:focus-visible { outline: 2px solid var(--focus-ring, var(--primary-600)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sb-tour:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .sb-tour:hover .sb-tour-play { transform: scale(1.06); } }
.sb-tour-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: var(--overlay-media-strong); }
.sb-tour-thumb video, .sb-tour-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sb-tour-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: var(--radius-full); background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease); }
.sb-tour-play svg { width: 14px; height: 14px; margin-left: 2px; }
.sb-tour-text { display: grid; gap: 2px; padding: var(--space-2-5) var(--space-3) var(--space-3); }
.sb-tour-text b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-tour-text small { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-soft); }
/* the card takes the landing: lifted a touch, then set down (no ring) */
.sb-tour.is-landed { animation: sb-tour-land 520ms var(--ease-enter); }
@keyframes sb-tour-land { from { box-shadow: var(--shadow-md); border-color: var(--border-strong); } }
@media (prefers-reduced-motion: reduce) { .sb-tour.is-landed { animation: none; } .sb-tour, .sb-tour-play { transition: none; } }

/* ---- Generation lab — permanent generation quality workbench ----------------------------
   The Section library's overlay, stage and frame, with a controls/runs rail on the left and the
   run's report (verdict, checks, copy, sections, the random answers) on the right. */
.gl-status { font-size: var(--text-sm); color: var(--text-muted); }
.gl-body { display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; flex: 1; min-height: 0; }
.gl-side, .gl-report { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--surface); }
.gl-side { border-right: 1px solid var(--border); }
.gl-report { border-left: 1px solid var(--border); padding: var(--space-3); gap: var(--space-3); }
.gl-controls { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); }
.gl-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.gl-field > span, .gl-kv > span { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.gl-seg { display: flex; }
.gl-seg button { flex: 1; }
.gl-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text); }
.gl-go { justify-content: center; }
.gl-runs-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) var(--space-1); }
.gl-runs-head b { font-size: var(--text-sm); color: var(--text-strong); }
.gl-runs { display: flex; flex-direction: column; }
.gl-run { display: flex; flex-direction: column; gap: var(--space-0-5); width: 100%; padding: var(--space-2-5) var(--space-4); border-bottom: 1px solid var(--border-faint); text-align: left; }
.gl-run b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.gl-run > span { font-size: var(--text-xs); color: var(--text-muted); }
.gl-run-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.gl-run.is-active { background: var(--nav-active-bg); box-shadow: inset 2px 0 0 var(--primary-500); }
.gl-empty, .gl-placeholder { padding: var(--space-6) var(--space-4); font-size: var(--text-sm); color: var(--text-soft); text-align: center; }
.gl-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gl-pages { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-4); overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.gl-page { flex-shrink: 0; padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap; }
.gl-page.is-active { background: var(--seg-active); color: var(--text-strong); box-shadow: var(--seg-active-shadow); }
.gl-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gl-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.gl-card h3 small { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-soft); }
.gl-verdict, .gl-actions { display: flex; gap: var(--space-1-5); flex-wrap: wrap; }
.gl-verdict .btn.is-active { background: var(--seg-active); border-color: var(--primary-400); color: var(--text-strong); }
.gl-notes { resize: vertical; min-height: 72px; font-size: var(--text-sm); }
.gl-flags { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text); }
.gl-flags b { font-weight: var(--fw-semibold); color: var(--warning-700); }
.gl-flags code, .gl-heads code, .gl-secs code { font-size: var(--text-2xs); color: var(--text-muted); }
.gl-ok { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; font-size: var(--text-xs); color: var(--success-700); }
.gl-ok svg { width: 14px; height: 14px; }
.gl-hero { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2-5); border-radius: var(--radius-md); background: var(--surface-sunk); }
.gl-hero small { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.gl-hero b { font-size: var(--text-base); line-height: var(--leading-snug); color: var(--text-strong); }
.gl-hero p, .gl-heads p { margin: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-muted); }
.gl-heads, .gl-secs { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gl-heads li { display: flex; flex-direction: column; gap: var(--space-0-5); }
.gl-heads b { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.gl-secs li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text); }
.gl-secs li span:first-child { flex: 1; }
.gl-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text); }
.gl-kv small { color: var(--text-soft); }
@media (hover: hover) and (pointer: fine) {
  .gl-run:hover:not(.is-active), .gl-page:hover:not(.is-active) { background: var(--gray-100); }
}
.gl-run:focus-visible, .gl-page:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.gl-frame { flex-shrink: 0; }   /* JS sets its scaled width/height (fitFrame) */
.gl-frame iframe { display: block; border: 0; }

/* ---- Details → Overview: the standing "what your website shows" panel (22 Sep 2026) ---- */
.pw-show-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-faint); }
.pw-show-head b { display: block; font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-show-head small { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.pw-show-progress { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2-5); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.pw-show-progress i { display: inline-block; width: 96px; height: 6px; border-radius: var(--radius-full); background: var(--gray-200); overflow: hidden; }
.pw-show-progress i::after { content: ""; display: block; height: 100%; width: var(--pct, 0%); background: var(--success-600); border-radius: inherit; }
.pw-show-row { display: grid; grid-template-columns: 28px 168px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); }
.pw-show-row + .pw-show-row { border-top: 1px solid var(--border-faint); }
.pw-show-row .pw-glance-k { padding-top: 2px; }
.pw-show-row .btn { flex-shrink: 0; }
.pw-show-tick { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); color: transparent; margin-top: 1px; }
.pw-show-tick svg { width: 13px; height: 13px; }
.pw-show-row.is-done .pw-show-tick { background: var(--success-600); border-color: var(--success-600); color: var(--text-invert, #fff); }
.pw-show-row.is-gap .pw-show-tick { border-color: var(--warning-600); color: var(--warning-600); }
.pw-show-v { min-width: 0; font-size: var(--text-sm); color: var(--text); }
.pw-show-now { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; min-height: 22px; }
.pw-show-now .sb-rv-photos img { width: 34px; height: 26px; }
.pw-show-note { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-soft); line-height: var(--leading-snug); }
.pw-show-row.is-gap .pw-show-note { color: var(--warning-700); }
.pw-show-google { display: inline-flex; align-items: center; gap: 6px; }
.pw-show-google i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); }
@media (max-width: 800px) {
  .pw-show-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .pw-show-row .pw-glance-k { grid-column: 2; }
  .pw-show-v { grid-column: 2; }
  .pw-show-row .btn { grid-column: 3; grid-row: 1; }
  .pw-show-progress i { width: 60px; }
}
.pw-aside-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-1-5); }
.pw-aside-list li::marker { color: var(--text-soft); }

/* ---- Web address (client): Framer's two cards — status top right, label / value rows ---- */
[data-domain-host] { display: flex; flex-direction: column; gap: var(--space-4); }
.dp-fr { padding: 0; overflow: hidden; }
.dp-fr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 var(--space-6); padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--border-faint); }
.dp-fr-head b { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-strong); }
.dp-fr-state { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.dp-fr-state .pw-dot { width: 8px; height: 8px; }
.pw-dot.is-wait { background: var(--warning-600); animation: dpWaitPulse 2s ease-in-out infinite; }   /* still connecting: a soft breath, not a blink */
@keyframes dpWaitPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-600) 45%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning-600) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pw-dot.is-wait { animation: none; } }
.pw-dot.is-bad { background: var(--danger-600); }
.dp-fr-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-6); }
.dp-fr > .dp-fr-row:first-of-type { padding-top: var(--space-5); }
.dp-fr > .dp-fr-row:last-child { padding-bottom: var(--space-6); }
.dp-fr-row + .dp-fr-row, .dp-fr-row + .dp-opt, .dp-opt + .dp-opt { position: relative; }   /* inset rules between rows, like the header's */
.dp-fr-row + .dp-fr-row::before, .dp-fr-row + .dp-opt::before, .dp-opt + .dp-opt::before { content: ""; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); border-top: 1px solid var(--border-faint); }
.dp-fr-k { font-size: var(--text-sm); color: var(--text-muted); padding-top: 2px; }
.dp-fr-v { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-strong); }
.dp-fr-v > a { color: var(--text-strong); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); overflow-wrap: anywhere; }
.dp-fr-v small { font-size: var(--text-xs); color: var(--text-soft); line-height: var(--leading-snug); }
.dp-fr-v .dp-free { margin-top: 0; }
.dp-fr-cta { align-self: flex-start; }
.dp-fr-row--status { position: relative; grid-template-columns: 112px minmax(0, 1fr); }   /* the refresh sits top right; the records run the full width under it */
.dp-fr-row--status > .icon-ghost { position: absolute; top: var(--space-3); right: var(--space-5); }
.dp-fr-row--status .dp-fr-v > span:first-child { padding-right: 44px; }
.dp-fr-row--status .table-wrap { width: 100%; margin: 0; padding: 0; }
.dp-fr-row--status .dp-table--pend { width: 100%; margin: var(--space-1) 0 0; }
.dp-fr-row--status .dp-manual { width: 100%; }
.dp-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-6); cursor: pointer; }
.dp-opt-radio { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); position: relative; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.dp-opt.is-on .dp-opt-radio { border-color: var(--text-strong); background: var(--text-strong); }
.dp-opt.is-on .dp-opt-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.dp-opt-body { display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; }
.dp-opt-body > b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.dp-opt-body > small { margin-top: calc(-1 * var(--space-1-5)); font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); }
.dp-opt:not(.is-on) .dp-opt-body > b { color: var(--text-muted); }
.dp-opt .dp-free { margin-top: var(--space-1); cursor: auto; }
.dp-opt .dp-free-ok .spinner { width: 14px; height: 14px; }
.dp-opt:focus-visible { outline: none; box-shadow: inset var(--ring-primary); }
.dp-table--pend { border: 1px solid var(--border-faint); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-sm); }
.dp-table--pend th { background: var(--surface-sunk); padding: var(--space-2-5) var(--space-3-5); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.dp-table--pend td { padding: var(--space-3) var(--space-3-5); vertical-align: middle; color: var(--text-strong); }
.dp-table--pend td:last-child { width: auto; text-align: left; }
.dp-table--pend tr:last-child td { border-bottom: 0; }
.dp-copy { display: inline-grid; min-width: max-content; margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.dp-copy > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity var(--dur) var(--ease); }
.dp-copy-alt { display: inline-flex; align-items: center; gap: 4px; opacity: 0; color: var(--info-600); font-weight: var(--fw-medium); }   /* "Copy" and "Copied" share the link blue (Framer) */
.dp-copy-alt svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .dp-copy:hover .dp-copy-v { opacity: 0; } .dp-copy:hover .dp-copy-alt { opacity: 1; } }
.dp-copy:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.dp-copy.is-copied .dp-copy-v { opacity: 0; }
.dp-copy.is-copied .dp-copy-alt { opacity: 1; }
.dp-rec-state { display: inline-flex; margin-right: var(--space-2); vertical-align: -3px; }
.dp-rec-state svg { width: 15px; height: 15px; }
.dp-rec-state svg circle:first-child { fill: currentColor; }
.dp-rec-state.is-ok { color: var(--success-600); }
.dp-rec-state.is-wait { color: var(--gray-400); }
.dp-strip { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunk); font-size: var(--text-sm); color: var(--text-muted); }
.dp-strip > span { flex: 1; min-width: 0; }
.dp-strip b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.dp-strip .pw-dot, .dp-strip .btn { flex-shrink: 0; }
@media (max-width: 640px) { .dp-fr-row { grid-template-columns: minmax(0, 1fr) auto; } .dp-fr-k { grid-column: 1 / -1; padding-top: 0; } }
/* the tutorial slot beside a tab: a poster with a play disc until it's clicked */
.pw-video { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-bottom: var(--space-3); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pw-video-poster { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--gray-900, #111) center / cover no-repeat; overflow: hidden; }
.pw-video-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--text-strong); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease); }
.pw-video-play svg { width: 16px; height: 16px; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) { .pw-video:hover .pw-video-play { transform: scale(1.06); } }
.pw-video:focus-visible { outline: none; } .pw-video:focus-visible .pw-video-poster { box-shadow: var(--ring-primary); }
.pw-video-cap b { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.pw-video-cap small { display: block; font-size: var(--text-xs); color: var(--text-soft); }
.pw-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-md); overflow: hidden; }
.pw-video-frame iframe, .pw-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dp-free { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2-5); }
.dp-free-field { flex: 1 1 0; min-width: 0; display: flex; align-items: center; height: 36px; padding: 0 var(--space-3) 0 0; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-field); color: var(--text-soft); cursor: text; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.dp-free-field:focus-within { border-color: var(--primary-400); box-shadow: var(--ring-primary); }
.dp-free-field > .dp-free-input { flex: 1 1 0; width: 1px; min-width: 0; height: 100%; margin: 0; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; font: inherit; font-size: var(--text-md); color: var(--text-strong); text-overflow: ellipsis; outline: none; }
.dp-free-field > .dp-free-input::placeholder { color: var(--text-soft); }
.dp-free-suffix { flex-shrink: 0; font-size: var(--text-md); color: var(--text-muted); white-space: nowrap; user-select: none; }
.dp-free-ok, .dp-free-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0; border: 0; border-radius: var(--radius-md); font: inherit; cursor: pointer; transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.dp-free-ok { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.dp-free-ok:disabled { opacity: 0.45; cursor: default; }
.dp-free-x { background: var(--surface-field); color: var(--text-muted); }
.dp-free-ok svg, .dp-free-x svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .dp-free-ok:not(:disabled):hover { background: var(--primary-700, var(--btn-primary-bg)); } .dp-free-x:hover { background: var(--surface-hover); } }
.dp-free-ok:focus-visible, .dp-free-x:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.dp-free-err { display: flex; align-items: center; gap: var(--space-1-5); margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--danger-600); }
.dp-free-err svg { width: 14px; height: 14px; flex-shrink: 0; }
.dp-strip { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunk); font-size: var(--text-sm); color: var(--text-muted); }
.dp-strip > span { flex: 1; min-width: 0; }
.dp-strip b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.dp-strip .pw-dot { flex-shrink: 0; }
.dp-strip .btn { flex-shrink: 0; }
[data-domain-host] { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 640px) {
  .dp-row { flex-wrap: wrap; }
  .dp-row > div { flex-basis: calc(100% - 44px); }
  .dp-row .tone-pill { margin-left: 44px; }
}
.dp-alts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dp-shops { display: flex; flex-direction: column; border: 1px solid var(--border-faint); border-radius: var(--radius-md); overflow: hidden; }
.dp-shop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3-5); }
.dp-shop + .dp-shop { border-top: 1px solid var(--border-faint); }
.dp-shop b { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); min-width: 120px; }
.dp-shop-logo { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; border-radius: var(--radius-xs); }
.dp-shop span { flex: 1; font-size: var(--text-sm); color: var(--text-muted); }
.dp-shop .btn { flex-shrink: 0; }
@media (max-width: 640px) { .dp-shop { flex-wrap: wrap; } .dp-shop span { flex-basis: 100%; order: 3; } }
.dp-ends { display: flex; flex-direction: column; border: 1px solid var(--border-faint); border-radius: var(--radius-md); overflow: hidden; }
.dp-end { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3-5); }
.dp-end + .dp-end { border-top: 1px solid var(--border-faint); }
.dp-end b { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.dp-end .btn { flex-shrink: 0; }
.dp-busy { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.dp-free-ok .spinner { width: 14px; height: 14px; border-color: color-mix(in srgb, var(--btn-primary-fg) 35%, transparent); border-top-color: var(--btn-primary-fg); }

/* ---- the editor's Publish card (Framer's): address, last publish, changes by page, Add domain / Update ---- */
.sb-pub { position: relative; display: inline-flex; }
.sb-pub-card { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-popover); width: min(340px, calc(100vw - 2 * var(--space-4))); padding: var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.sb-pub-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 38px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: var(--text-sm); color: var(--text-strong); text-align: left; }
.sb-pub-row > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-soft); }
.sb-pub-row > a { color: var(--text-strong); font-weight: var(--fw-medium); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-pub-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-pub-row .is-muted { color: var(--text-muted); }
.sb-pub-row--btn { cursor: pointer; }
.sb-pub-row--btn:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .sb-pub-row--btn:not(:disabled):hover { background: var(--surface-sunk); } .sb-pub-row > a:hover { text-decoration: underline; } }
.sb-pub-chev { display: inline-flex; color: var(--text-soft); } .sb-pub-chev svg { width: 15px; height: 15px; }
.sb-pub-acts { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) var(--space-1) 0; }
.sb-pub-acts .btn { width: 100%; justify-content: center; height: 34px; }
.sb-pub-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: var(--space-1) var(--space-1) var(--space-2); border-bottom: 1px solid var(--border-faint); margin-bottom: var(--space-1); }
.sb-pub-head b { text-align: center; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sb-pub-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.sb-pub-item { display: flex; align-items: center; gap: var(--space-2-5); min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: var(--text-sm); color: var(--text-strong); text-align: left; cursor: pointer; }
.sb-pub-item svg { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .sb-pub-item:hover { background: var(--surface-sunk); } }
.sb-pub-empty { margin: 0; padding: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
#publish.is-open { box-shadow: var(--ring-primary); }
/* the toolbar's eye and gear sit on a soft fill at rest (Framer's), the undo pair stay bare */
.sb-tb-right #menuBtn { background: var(--surface-sunk); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .sb-tb-right #menuBtn:hover { background: var(--gray-100); } }

/* the Customer reviews manager in the editor's right panel: single column, no page title or aside */
#rpReviews .pw-dhead h3 { display: none; }
#rpReviews .pw-dhead p { margin-top: 0; }
#rpReviews .pw-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
#rpReviews .pw-aside, #rpReviews .pw-push-head { display: none; }
#rpReviews .rv-sources { grid-template-columns: minmax(0, 1fr); }
/* the connected business at panel width: small square mark, one line each for name and address, Change on the right */
#rpReviews .rv-business-head { gap: var(--space-2-5); padding: var(--space-3); }
#rpReviews .rv-avatar--business { flex-basis: 36px; width: 36px; height: 36px; border-radius: var(--radius-sm); }
#rpReviews .rv-business-copy { gap: 1px; overflow-wrap: normal; }
#rpReviews .rv-business-copy b, #rpReviews .rv-business-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rpReviews .rv-business-copy b { font-size: var(--text-sm); }
#rpReviews .rv-business-copy p { font-size: var(--text-xs); }
#rpReviews .rv-ready { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2) var(--space-2-5); gap: var(--space-2); }
#rpReviews .rv-ready > svg { width: 15px; height: 15px; flex-basis: 15px; }
#rpReviews .rv-ready b { font-size: var(--text-xs); }
#rpReviews .rv-connected-foot { padding: var(--space-2) var(--space-3); }
/* the save bar: the two buttons share the row, the status line goes */
#rpReviews .pw-formfoot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
#rpReviews .pw-formfoot .pw-dirty { display: none; }
#rpReviews .pw-formfoot-acts { display: contents; }
#rpReviews .pw-formfoot-acts .btn { width: 100%; justify-content: center; }
/* the details page inside a side sheet: no page title, rows stack their action to the right of the title */
.modal-side .pw-sheet-details { padding: 0; gap: var(--space-4); }
.modal-side .pw-sheet-details .pw-dhead h3 { display: none; }
.modal-side .pw-sheet-details .pw-dhead p { margin-top: 0; }
.modal-side .pw-show-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
.modal-side .pw-show-row .pw-glance-k { grid-column: 2; }
.modal-side .pw-show-v { grid-column: 2; }
.modal-side .pw-show-row .btn { grid-column: 3; grid-row: 1; }
.modal-side .set-page { padding: 0; max-width: none; }
.modal-side .set-section-head h2 { display: none; }
/* an editor panel lent to a side sheet: shown as the sheet's body, its own head folded into the sheet title */
.pw-sheet-panel .sb-rp { display: flex; }
.pw-sheet-panel .sb-rp-head { display: none; }
.pw-sheet-panel .sb-rp-body { padding: 0; overflow: visible; }

/* ---- desktop: a Details section (or the Business page) slides in over the Website page's column, starting under
   the page header (JS sets its top), with a plain Back link pinned to the frame's left gutter (22 Sep 2026) ---- */
.pw-push--desk { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: calc(var(--z-popover) - 1);   /* under the modal layer, like .pw-push--layer: the Business page's section editors open on top of it */ background: var(--surface); will-change: transform; animation: settingsPush var(--motion-sheet-open) var(--ease-enter); transition: transform var(--motion-sheet-close) var(--ease-ios); }
.pw-push--desk.is-leaving { transform: translateX(100%); }
.pw-push--desk .pw-push-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--space-8); }
.pw-push--desk .pw-push-head { display: flex; align-items: center; position: absolute; top: var(--space-4); left: var(--space-5); z-index: 1; margin: 0; padding: 0; }
.pw-push--desk .pw-back { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 32px; padding: 0 var(--space-2-5) 0 var(--space-1-5); margin-left: -6px; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-semibold); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.pw-push--desk .pw-back span { display: inline; }
.pw-push--desk .pw-back svg { width: 16px; height: 16px; position: relative; top: 1px; }   /* optical: the chevron reads high against Figtree's x-height */
@media (hover: hover) and (pointer: fine) { .pw-push--desk .pw-back:hover { background: var(--gray-100); color: var(--text-strong); } }
.pw-push--desk .pw-back:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.pw-push--desk .pw-save-disc { display: none; }
.pw-push--desk .set-page { padding: 0; max-width: none; }
@media (prefers-reduced-motion: reduce) { .pw-push--desk { animation: none; transition: none; } }
.sb-page-off { margin-left: var(--space-2); padding: 1px 6px; border-radius: var(--radius-full); background: var(--surface-sunk); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-muted); }

/* Supplier and certification picker; shared by the client and admin editors. */
.sb-brand-inspector { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.sb-brand-inspector > .btn { white-space: normal; min-height: 44px; }
.sb-brand-chosen { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sb-brand-chosen > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; box-sizing: border-box; padding: 9px 10px; font-size: var(--text-sm); line-height: 22px; cursor: pointer; list-style: none; }
.sb-brand-chosen > summary::-webkit-details-marker { display: none; }
.sb-brand-chosen > summary > span { margin-left: auto; color: var(--text-soft); white-space: nowrap; }
.sb-brand-chosen > summary svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.sb-brand-chosen[open] > summary svg { transform: rotate(180deg); }
.sb-brand-chosen > .sb-hint { padding: 0 var(--space-4) var(--space-4); }
.sb-brand-order { position: relative; list-style: none; margin: 0; padding: 0 var(--space-2); max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.sb-brand-order li, .sb-brand-drag-preview { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) 0; box-sizing: border-box; color: var(--text); }
.sb-brand-order li { border-top: 1px solid var(--border-faint); }
.sb-brand-order li > span, .sb-brand-drag-preview > span { min-width: 0; flex: 1; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.sb-brand-order .drag-handle, .sb-brand-drag-preview .drag-handle { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 38px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); touch-action: none; cursor: grab; }
.sb-brand-order .drag-handle svg, .sb-brand-drag-preview .drag-handle svg { width: 16px; height: 24px; }
.sb-brand-order.is-sorting { user-select: none; }
.sb-brand-order .is-drag-placeholder { background: var(--surface-sunk); border-radius: var(--radius-sm); }
.sb-brand-order .is-drag-placeholder > * { visibility: hidden; }
.sb-brand-drag-preview { position: fixed; top: 0; z-index: var(--z-lightbox); pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-size: var(--text-sm); will-change: transform; }
.sb-brand-scrim { z-index: var(--z-sheet); }
.sb-brand-picker.modal-shell { z-index: var(--z-sheet-high); width: min(780px, calc(100vw - 32px)); }
.sb-brand-body { display: grid; gap: var(--space-4); min-width: 0; }
.sb-brand-body .sb-hint { margin: 0; }
.sb-brand-search { display: flex; align-items: center; gap: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-1); background: var(--surface); }
.sb-brand-search:focus-within { outline: 2px solid var(--primary-300); outline-offset: 2px; }
.sb-brand-search > .input { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; outline: none; }
.sb-brand-search > .btn { flex-shrink: 0; }
.sb-brand-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sb-brand-filters [aria-pressed="true"] { color: var(--text-invert); background: var(--text-strong); border-color: var(--text-strong); }
.sb-brand-result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sb-brand-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.sb-brand-card { position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; }
.sb-brand-card[aria-pressed="true"] { border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600); }
.sb-brand-art { display: flex; width: 100%; height: 120px; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-5); background: #f5f7fa; color: #183850; }
.sb-brand-art--dark { background: #183850; color: #fff; } /* preserve reversed supplier artwork */
.sb-brand-art img { height: var(--logo-height,32px); width: auto; max-width: 100%; object-fit: contain; }
.sb-brand-tick { position: absolute; right: var(--space-3); top: var(--space-3); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: transparent; }
.sb-brand-tick svg { width: 14px; height: 14px; }
.sb-brand-card[aria-pressed="true"] .sb-brand-tick { background: var(--primary-600); color: var(--text-invert); border-color: var(--primary-600); }
.sb-brand-copy { display: grid; gap: var(--space-1); padding: var(--space-4); overflow-wrap: anywhere; }
.sb-brand-copy small { color: var(--text-muted); line-height: var(--leading-normal); }
.sb-brand-text-mark { display: grid; gap: var(--space-1); }
.sb-brand-text-mark > svg { width: 22px; height: 22px; }
.sb-brand-help { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.sb-brand-help[hidden], .sb-brand-picker [hidden] { display: none !important; }
.sb-brand-help a, .sb-brand-credits a { text-decoration: underline; text-underline-offset: 3px; }
.sb-brand-help a svg { width: 14px; height: 14px; vertical-align: middle; }
.sb-brand-fallback { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.sb-brand-footer { display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.sb-brand-footer > span { margin-right: auto; color: var(--text-muted); }
@media (hover:hover) and (pointer:fine) {
 .sb-brand-order .drag-handle:hover { background: var(--surface-hover); color: var(--text); }
 .sb-brand-card:hover { border-color: var(--border-strong); }
}
@media (max-width:600px) {
 .sb-brand-results { grid-template-columns: minmax(0,1fr); }
 .sb-brand-search { flex-wrap: nowrap; }
 .sb-brand-search > .btn { padding-inline: var(--space-2); font-size: var(--text-xs); }
 .sb-brand-search > .btn svg { display: none; }
 .sb-brand-footer { flex-wrap: wrap; }
 .sb-brand-footer > span { width: 100%; }
}
@media (prefers-reduced-motion:reduce) { .sb-brand-chosen > summary svg { transition: none; } }

.sb-brand-award-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sb-brand-award-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.sb-brand-award .sb-brand-art { height: 96px; }
.sb-brand-award .sb-brand-art img { width: auto; height: auto; max-width: 100%; max-height: 80px; object-fit: contain; }
@media (max-width: 480px) { .sb-brand-award-fields { grid-template-columns: 1fr; } }
.sb-brand-inspector > .sb-wide { height: auto; min-height: var(--btn-height); padding-block: var(--space-2); white-space: normal; text-align: left; }
.sb-brand-inspector > .sb-wide svg { flex-shrink: 0; }

/* ---------- Sites / Usage tabs and the Usage tab ------------------------
   Usage (`su-` prefix): four KPI tiles (the dashboard's .kpi), spend by day as
   one-series bars, and two tables. Colour is spent on nothing but the bars'
   ink; every other tone is the app's text and border tokens. */
.main-toolbar .sg-tabs { margin-right: auto; }   /* the tabs sit left in the toolbar, the actions right */
.su-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.su-title { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.su-sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-soft); }
.su-kpis { margin-bottom: var(--space-4); }
.su-card { padding: var(--space-4) var(--space-5) var(--space-5); }
.su-card + .su-card, .su-kpis + .su-card { margin-top: var(--space-4); }
.su-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-faint); margin-bottom: var(--space-3); }
.su-card-head h3 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.su-meta { font-size: var(--text-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.su-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.su-cols .su-card { margin-top: 0; }
.su-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.su-table th { text-align: left; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); padding: var(--space-1-5) 0; border-bottom: 1px solid var(--border-faint); }
.su-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-faint); color: var(--text); }
.su-table tr:last-child td { border-bottom: 0; }
.su-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.su-empty { padding: var(--space-6) 0; text-align: center; font-size: var(--text-sm); color: var(--text-soft); }
.su-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--text); }
.su-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-muted); margin-top: 2px; }
.su-note p { margin: var(--space-1) 0 0; color: var(--text-soft); }
.su-foot { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-soft); line-height: 1.5; }
/* the chart: geometry lives in the SVG, ink here */
.su-chart { position: relative; }
.su-chart svg { display: block; width: 100%; height: auto; }
.su-grid { stroke: var(--border-faint); stroke-width: 1; }
.su-axis { stroke: var(--border); }
.su-tick { font-size: 11px; fill: var(--text-soft); font-variant-numeric: tabular-nums; }
.su-bar path { fill: var(--primary-500); transition: fill var(--dur) var(--ease); }
.su-bar.is-hot path { fill: var(--primary-700); }
.su-hit { fill: transparent; }
.su-tip { position: absolute; top: 0; left: 0; z-index: var(--z-popover); pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: var(--space-1-5) var(--space-2-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-xs); color: var(--text-soft); white-space: nowrap; }
.su-tip b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.su-tip[hidden] { display: none; }   /* the class's display would beat the attribute */
@media (max-width: 900px) { .su-cols { grid-template-columns: 1fr; } .su-head { flex-direction: column; } }