/* ==========================================================================
   Serch admin. Polaris web components do the heavy lifting; this file
   only covers what they cannot: plain-HTML pieces (menu, sliders, tables,
   metric/plan cards) styled with Polaris token values.
   Scale: 4px grid. 16px between cards, 12px inside groups, 8px label to value.
   ========================================================================== */

/* ---- 1. Tokens + base type (same stack Polaris uses; never another font) ---- */
:root {
  --ss-text: #303030;
  --ss-subdued: #616161;
  --ss-border: #e3e3e3;
  --ss-surface: #fff;
  --ss-surface-subdued: #f7f7f7;
  --ss-hover: #f1f1f1;
  --ss-selected: #ebebeb;
  --ss-focus: #005bd3;
  --ss-font: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
body, #app { font: 450 13px/20px var(--ss-font); color: var(--ss-text); -webkit-font-smoothing: antialiased; }
.ss-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 2. Text roles ---- */
.ss-help { font-size: 12px; line-height: 16px; color: var(--ss-subdued); }
.ss-help-critical { color: #c70a24; font-weight: 600; }
.ss-display { font-size: 28px; line-height: 32px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ss-display-row { display: flex; align-items: baseline; gap: 4px; }
.ss-display-unit { font-size: 13px; line-height: 20px; font-weight: 450; color: var(--ss-subdued); }
.ss-link, .ss-linkbtn { color: var(--ss-focus); text-decoration: none; cursor: pointer; }
.ss-link:hover, .ss-linkbtn:hover { text-decoration: underline; }
.ss-num-cell { font-variant-numeric: tabular-nums; }
.ss-row-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; white-space: nowrap; }
.ss-empty { padding: 16px; text-align: center; color: var(--ss-subdued); background: var(--ss-surface-subdued); border-radius: 8px; }
:is(a, button, summary, .ss-handle, .ss-seg):focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }

/* ---- 3. Layout helpers ---- */
.ss-stack { display: flex; flex-direction: column; gap: 16px; }
.ss-stack > :empty { display: none; }
.ss-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.ss-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.ss-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ss-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ss-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ss-content { min-width: 0; }
.ss-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.ss-contact { max-width: 640px; }
.ss-contact .ss-form { max-width: none; }
.ss-email-group { display: flex; flex-direction: column; gap: 8px; }
.ss-email-group .ss-help:empty { display: none; }

/* ---- 4. Metric cards (Home + Analytics) ---- */
.ss-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ss-metric { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; }
.ss-metric-label { color: var(--ss-subdued); }
.ss-metric .ss-help { margin-top: -4px; }

/* ---- 5. Home: setup steps ---- */
.ss-steps { display: flex; flex-direction: column; }
.ss-step { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ss-border); }
.ss-step:first-child { border-top: 0; padding-top: 0; }
.ss-step:last-child { padding-bottom: 0; }
.ss-step-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 650; }
.ss-step-desc { margin-top: 4px; color: var(--ss-subdued); }
.ss-step-action { justify-self: end; }
@media (max-width: 600px) { .ss-step { grid-template-columns: 20px minmax(0, 1fr); } .ss-step-action { grid-column: 2; justify-self: start; } }

/* ---- 6. Contact ---- */
.ss-note { padding: 12px; background: var(--ss-surface-subdued); border: 1px solid var(--ss-border); border-radius: 8px; }
.ss-note-title { font-weight: 650; margin-bottom: 4px; }

/* ---- 7. Pricing ---- */
.ss-range-wrap { padding: 4px 0 0; }
.ss-range { width: 100%; margin: 0; height: 16px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; --fill: 0%; }
.ss-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ss-text) var(--fill), var(--ss-border) var(--fill)); }
.ss-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ss-border); }
.ss-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ss-text); }
.ss-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 1px solid #8a8a8a; }
.ss-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid #8a8a8a; }
.ss-range:focus-visible { outline: none; }
.ss-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ss-focus); outline-offset: 2px; }
.ss-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--ss-focus); outline-offset: 2px; }
.ss-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ss-subdued); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .ss-ticks span:nth-child(even) { display: none; } }

.ss-segmented { display: inline-flex; gap: 2px; height: 32px; padding: 2px; box-sizing: border-box; background: var(--ss-hover); border-radius: 8px; }
.ss-seg { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ss-subdued); font: 550 13px/20px var(--ss-font); cursor: pointer; }
.ss-seg:hover { color: var(--ss-text); }
.ss-seg[aria-checked="true"] { background: var(--ss-surface); border-color: var(--ss-border); color: var(--ss-text) }

/* Pricing plans page (docs/PRICING_V2.md; the owner's design) */
.ss-pr-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ss-pr-tab { text-align: left; padding: 14px 16px; border: 0; border-radius: 12px; cursor: pointer; color: var(--ss-text); background: var(--ss-surface-subdued); box-shadow: 0 0 0 1px var(--ss-border); display: flex; flex-direction: column; gap: 2px; font: inherit; }
.ss-pr-tab:hover { background: #fafafa; }
.ss-pr-tab[aria-pressed="true"] { background: var(--ss-surface); box-shadow: 0 0 0 2px var(--ss-text); }
.ss-pr-tab-name { font-size: 15px; line-height: 24px; font-weight: 650; }
.ss-pr-period { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: var(--ss-selected); align-self: flex-start; }
.ss-pr-period button { min-height: 44px; padding: 0 12px 0 14px; border: 0; border-radius: 8px; cursor: pointer; font: 550 13px/20px var(--ss-font); color: var(--ss-text); display: inline-flex; align-items: center; gap: 8px; background: transparent; }
.ss-pr-period button[aria-pressed="true"] { background: var(--ss-surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ss-pr-chip { display: inline-block; padding: 0 6px; border-radius: 8px; background: #cdfee1; color: #0c5132; font-size: 12px; line-height: 20px; font-weight: 550; white-space: nowrap; }
/* scroll-padding: a card snapped to the start keeps its 2 px ring in view (without it the snap hides the row's padding) */
.ss-pr-row { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 4px; padding: 16px 4px 12px; }
.ss-pr-card { position: relative; flex: 0 0 224px; width: 224px; box-sizing: border-box; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border-radius: 12px; background: var(--ss-surface); box-shadow: 0 0 0 1px var(--ss-border), 0 1px 0 rgba(26,26,26,.07); }
.ss-pr-card[data-fits="true"] { box-shadow: 0 0 0 2px var(--ss-text); }
.ss-pr-fits { position: absolute; top: -11px; left: 12px; }
.ss-pr-limit { font-size: 14px; line-height: 20px; font-weight: 650; }
.ss-pr-price { font-size: 28px; line-height: 36px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ss-pr-custom { font-size: 20px; line-height: 36px; font-weight: 650; }
.ss-pr-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.ss-pr-btn { width: 100%; min-height: 44px; padding: 0 8px; border-radius: 10px; font: 550 13px/20px var(--ss-font); cursor: pointer; border: 1px solid #c9cccf; background: var(--ss-surface); color: var(--ss-text); }
.ss-pr-btn:hover:not(:disabled) { background: var(--ss-surface-subdued); }
.ss-pr-btn.primary { background: var(--ss-text); border-color: var(--ss-text); color: #fff; }
.ss-pr-btn.primary:hover:not(:disabled) { background: #1a1a1a; }
.ss-pr-btn:disabled { background: var(--ss-hover); color: #8a8a8a; cursor: not-allowed; }
.ss-pr-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.ss-pr-current { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-weight: 550; }
.ss-pr-tab:focus-visible, .ss-pr-period button:focus-visible, .ss-pr-btn:focus-visible, .ss-pr-row:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 2px; }
.ss-pr-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 24px; }
.ss-pr-list.one { grid-template-columns: 1fr; gap: 10px; }
.ss-pr-list li { display: flex; gap: 8px; align-items: flex-start; }
.ss-pr-list svg { flex: none; margin-top: 2px; }
.ss-pr-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--ss-surface-subdued); border-radius: 10px; }
.ss-pr-rule { border-top: 1px solid var(--ss-border); padding-top: 16px; font-weight: 650; }
.ss-pr-foot { margin: 4px 0 0; text-align: center; }
.ss-pr-sub { font-size: 13px; line-height: 20px; color: var(--ss-subdued); }

@media (max-width: 600px) { .ss-grid-2 { grid-template-columns: 1fr; } }

/* ---- 8. Search page: menu ---- */
.ss-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ss-menu { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; }
.ss-menu-head { padding: 4px 8px 8px; }
.ss-menu-title { font-weight: 650; font-size: 15px; line-height: 22px; }
.ss-menu-wrap { display: flex; flex-direction: column; gap: 2px; }
.ss-menu-wrap-g { margin-top: 8px; }
.ss-menu-wrap-g > .ss-menu-group { margin-top: 0; }
.ss-menu-group { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-top: 8px; padding: 0 8px; }
/* group titles: a step larger than the items; every item has its small icon */
.ss-menu-group { min-height: 36px; }
.ss-menu-group-label { font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ss-text); }
.ss-menu-label { gap: 8px; }
.ss-menu-icon { display: inline-flex; flex: none; color: var(--ss-subdued); }
.ss-menu-icon svg { display: block; }
.ss-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; box-sizing: border-box; padding: 0 8px; border-radius: 4px; color: var(--ss-text); text-decoration: none; font-size: 13px; line-height: 20px; }
.ss-menu-item:hover { background: var(--ss-hover); text-decoration: none; }
.ss-menu-item[aria-current="page"] { background: var(--ss-selected); font-weight: 650; }

/* ---- 9. Search page: panes, rows, sortable ---- */
.ss-area-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-sortable { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ss-row { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 8px; }
.ss-row-body { flex: 1; min-width: 0; }
.ss-row-grid { display: grid; grid-template-columns: 1fr 110px auto; gap: 12px; align-items: center; }
.ss-row-grid-2 { grid-template-columns: 1fr auto; }
.ss-cell-toggle { display: flex; justify-content: flex-end; }
/* A section count that cannot be saved (0, empty, over 20): "1-20" sits to the LEFT of the box, in the row's own
   empty space (search-areas.js). Absolutely positioned on purpose: it never changes the row's height or any
   column's width in either direction (a line added below the box grew the row and broke its layout, owner Oct 21).
   The red border on the box itself is Polaris' own (flat.js only hides its text block under the box).
   #8e0b21 is that SAME red, measured straight from the box's own error border (not a guessed token): the box,
   the icon (recoloured in flat.js) and this text all use the one literal value, so none of the three looks
   different from the others (owner Oct 21: "border, icon, red color is not same... look wired"). */
.ss-cell-count { position: relative; }
.ss-count-hint { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; display: flex; align-items: center; gap: 2px; white-space: nowrap; font-size: 12px; font-weight: 600; color: #8e0b21; pointer-events: none; }
.ss-count-hint[hidden] { display: none; }
.ss-count-hint s-icon { flex: none; }
.ss-handle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--ss-subdued); cursor: grab; touch-action: none; }
.ss-handle:hover, .ss-handle[aria-pressed="true"] { background: var(--ss-selected); }
.ss-row.ss-dragging { opacity: .5; background: #f1f8f5; }
/* the drag picture: one row (dots + name), drawn off-screen for the browser to copy (src/admin/sortable.js) */
.ss-drag-ghost { position: fixed; top: -1000px; left: 0; z-index: -1; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--ss-surface, #fff); border: 1px solid var(--ss-border, #e3e3e3); border-radius: 8px; box-shadow: 0 4px 12px rgba(26, 26, 26, .12); color: var(--ss-text, #303030); font: 14px/20px var(--ss-font, system-ui, sans-serif); pointer-events: none; }
.ss-drag-ghost-dots { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ss-subdued, #616161); }
.ss-drag-ghost-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-savebar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; background: var(--ss-surface); color: var(--ss-text); border: 1px solid var(--ss-border); border-radius: 12px; box-shadow: none; }
.ss-savebar[hidden] { display: none; }
.ss-savebar-label { color: var(--ss-text); font-weight: 650; }
.ss-savebar-actions { display: flex; gap: 8px; }

/* ---- 10. Search page: Look & layout ---- */
.ss-layout-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ss-layout-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface); cursor: pointer; font-size: 13px; line-height: 20px; }
.ss-layout-card svg { width: 100%; height: auto; }
.ss-layout-card:hover { border-color: #b5b5b5; }
.ss-layout-card:has(input:checked) { border-color: var(--ss-focus); outline: 1px solid var(--ss-focus); outline-offset: -2px; background: #f3f8ff; }
.ss-layout-card:has(input:focus-visible) { outline: 2px solid var(--ss-focus); outline-offset: 2px; }
.ss-card-radio { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* Ready-made styles: "Your store" is one full-width card on top, Default and Dark two equal cards side by side below it; one per row on a phone. */
.ss-presets { display: grid; align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ss-presets > .ss-preset-store, .ss-presets > .ss-try { grid-column: 1 / -1; }
@media (max-width: 560px) { .ss-presets { grid-template-columns: minmax(0, 1fr); } }
.ss-preset { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 4px; padding: 12px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface); cursor: pointer; font: 450 13px/20px var(--ss-font); color: var(--ss-text); }
.ss-preset:hover { background: var(--ss-surface-subdued); }
/* "Your store": the first card of the ready-made grid, same size as Default (see store-style.js) */
.ss-preset-store { position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface); }
.ss-preset-store > .ss-preset { border: 0; background: transparent; border-radius: 8px; }
.ss-preset-store > .ss-preset:hover { background: var(--ss-surface-subdued); }
.ss-preset-store > .ss-preset-on { outline: none; background: transparent; }
.ss-preset-store:has(> .ss-preset-on) { border-color: var(--ss-focus); outline: 1px solid var(--ss-focus); outline-offset: -2px; background: #f3f8ff; }
.ss-preset-store > .ss-linkbtn, .ss-preset-store > [data-testid="store-limit"] { padding: 0 12px 10px; }
.ss-preset-store > .ss-store-pwbox { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 12px; }
.ss-store-pw > .ss-linkbtn { flex: none; align-self: center; padding: 0; }
.ss-preset-store[hidden] { display: none; }
.ss-preset-store > .ss-preset { flex: 1 1 auto; width: 100%; box-sizing: border-box; min-width: 0; }
.ss-preset-static { cursor: default; }
.ss-preset-static .ss-linkbtn { padding: 0; align-self: flex-start; }
.ss-preset-static:hover { background: var(--ss-surface); }
.ss-preset-store[data-state="disabled"] > .ss-preset { opacity: .55; }
.ss-preset-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ss-preset-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: #e0f0ff; color: #00527c; font-size: 12px; line-height: 16px; font-weight: 550; }
.ss-swatches { display: flex; gap: 6px; margin: 2px 0; }
.ss-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); flex: none; }
.ss-preset-font { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 100%; overflow-wrap: anywhere; }
.ss-preset-aa { font-size: 18px; line-height: 24px; }
.ss-store-working { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 20px; font-weight: 550; margin-top: 4px; }
.ss-store-working .ss-spinner { width: 16px; height: 16px; border-width: 2px; flex: none; }
/* the automatic theme (made on install): loader / slow / failed, at the top of the Search design panel */
.ss-gen { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #eaf4ff; color: #00284d; font-size: 13px; line-height: 20px; }
.ss-gen > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-gen strong { font-weight: 600; }
.ss-gen .ss-help { color: inherit; opacity: .8; }
.ss-gen .ss-spinner { width: 18px; height: 18px; border-width: 2px; flex: none; margin-top: 1px; border-color: rgba(0, 40, 77, .2); border-top-color: #00284d; }
.ss-gen[data-state="failed"] { background: #fee9e8; color: #8e1f0b; }
.ss-gen[data-state="slow"] { background: #fff1c2; color: #4f3c00; }
.ss-gen .ss-linkbtn { align-self: flex-start; color: inherit; padding-left: 0; margin-left: 0; }
.ss-store-error { font-size: 13px; line-height: 20px; color: var(--ss-critical, #8e1f0b); }
.ss-store-stale, .ss-preview-stale { color: var(--ss-critical, #8e1f0b); }
.ss-preview-stale { margin-top: 8px; }
.ss-store-pw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 4px; width: 100%; }
.ss-store-pw > s-password-field { flex: 1 1 220px; min-width: 0; }
.ss-store-pw > s-button { flex: none; }
/* "Try another website": full-width box under the "Your store" card (nothing is saved by it) */
.ss-try { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface-subdued); font-size: 13px; line-height: 20px; }
.ss-try[hidden] { display: none; }
.ss-try-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ss-try-input { flex: 1 1 220px; min-width: 0; box-sizing: border-box; height: 32px; padding: 0 8px; border: 1px solid #8a8a8a; border-radius: 8px; background: var(--ss-surface); font: 450 13px/20px var(--ss-font); color: var(--ss-text); }
@media (max-width: 768px) { .ss-try-input { font-size: 16px; } }
.ss-try-row > s-button { flex: none; }
.ss-try-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; }
.ss-try-msg[hidden] { display: none; }
.ss-try-msg .ss-linkbtn { padding: 0; }
/* "Match again" sits inside the card, top right; the card's title row leaves room for it */
.ss-preset-store > .ss-linkbtn { align-self: flex-start; }

.ss-group { border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface); }
.ss-group summary { display: flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 12px; cursor: pointer; list-style: none; font-size: 13px; line-height: 20px; font-weight: 650; }
.ss-group summary::-webkit-details-marker { display: none; }
.ss-chevron { transition: transform .15s; transform: rotate(-90deg); }
.ss-group[open] .ss-chevron { transform: none; }
.ss-group-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 12px 16px; }
.ss-group-tools { display: flex; justify-content: flex-end; }
.ss-warnflag { font-size: 12px; line-height: 16px; color: #8a6116; background: #fff5ea; border-radius: 4px; padding: 2px 6px; font-weight: 450; }
.ss-linkbtn { border: 0; background: none; font: 450 13px/20px var(--ss-font); padding: 0 4px; }
.ss-opt-label { font-size: 13px; line-height: 20px; font-weight: 550; padding: 0; }
.ss-opt { display: flex; flex-direction: column; gap: 4px; }
.ss-opt > .ss-help { margin-top: 0; }
/* Option rows on a grid: label column / control column. */
.ss-opt:has(> .ss-slider, > .ss-choice, > .ss-color) { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; }
.ss-opt > :is(.ss-slider, .ss-color), .ss-color-native { display: contents; }
.ss-color > :not(.ss-opt-label):not(.ss-color-native) { grid-column: 2; }
.ss-color > .ss-opt-label { grid-column: 1; }
s-badge[hidden], s-button[hidden] { display: none; }
.ss-opt > .ss-choice { display: contents; }
.ss-opt > .ss-choice > legend { grid-column: 1; float: none; padding: 0; }
.ss-opt > .ss-slider > .ss-opt-label, .ss-color-native > .ss-opt-label { grid-column: 1; }
.ss-opt > .ss-choice > .ss-picks { grid-column: 2; margin: 0; }
.ss-opt > .ss-help { grid-column: 2; }
.ss-slider-row { display: flex; align-items: center; gap: 12px; grid-column: 2; }
.ss-slider-row .ss-range { flex: 1; min-width: 80px; }
.ss-num, .ss-hex { box-sizing: border-box; height: 32px; padding: 0 8px; border: 1px solid #8a8a8a; border-radius: 8px; font: 450 13px/20px var(--ss-font); color: var(--ss-text); }
.ss-num { width: 76px; }
.ss-hex { width: 96px; }
.ss-unit { font-size: 13px; color: var(--ss-subdued); }
.ss-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.ss-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-pick { position: relative; }
.ss-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-pick-face { display: inline-flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; padding: 0 12px; border: 1px solid #c9c9c9; border-radius: 8px; background: var(--ss-surface); cursor: pointer; font-size: 13px; line-height: 20px; }
.ss-pick input:checked + .ss-pick-face { border-color: var(--ss-focus); background: #f3f8ff; font-weight: 650; }
.ss-pick input:focus-visible + .ss-pick-face { outline: 2px solid var(--ss-focus); outline-offset: 2px; }
.ss-glyph { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--ss-subdued); background: var(--ss-border); }
.ss-glyph-round, .ss-glyph-circle { border-radius: 50%; }
.ss-glyph-rounded { border-radius: 5px; }
.ss-glyph-square, .ss-glyph-none { border-radius: 0; }
.ss-glyph-list { height: 6px; margin-block: 5px; width: 18px; border-radius: 2px; }
.ss-glyph-grid { background: repeating-linear-gradient(90deg, var(--ss-subdued) 0 5px, transparent 5px 7px); border: 0; height: 14px; width: 16px; }
.ss-glyph-left { width: 20px; height: 10px; border-inline-start-width: 8px; }
.ss-glyph-top { width: 12px; height: 18px; border-block-start-width: 8px; }
.ss-glyph-soft { border-bottom-width: 4px; }
.ss-glyph-strong { border-bottom-width: 7px; border-inline-end-width: 5px; }
/* Font picker (combobox: button + search + grouped list) and the Fonts card */
.ss-opt:has(> .ss-fontpick) { display: block; }
.ss-fontpick { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.ss-fontpick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px 0 12px; border: 1px solid #8a8a8a; border-radius: 8px; background: var(--ss-surface); color: var(--ss-text); font: 450 13px/20px var(--ss-font); text-align: start; cursor: pointer; }
.ss-fontpick-btn:hover { background: var(--ss-surface-subdued); }
.ss-fontpick-btn:focus-visible, .ss-fontpick-search:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
.ss-fontpick-value { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-fontpick-cat { font-size: 12px; line-height: 16px; color: var(--ss-subdued); font-weight: 450; }
.ss-fontpick-pop { position: absolute; z-index: 30; top: 52px; inset-inline: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; }
.ss-fontpick-pop[hidden] { display: none; }
.ss-fontpick-search { box-sizing: border-box; width: 100%; height: 32px; padding: 0 8px; border: 1px solid #8a8a8a; border-radius: 8px; font: 450 13px/20px var(--ss-font); color: var(--ss-text); }
.ss-fontpick-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.ss-fontpick-head { padding: 8px 8px 4px; font-size: 12px; line-height: 16px; font-weight: 650; color: var(--ss-subdued); }
.ss-fontpick-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 32px; box-sizing: border-box; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 20px; }
.ss-fontpick-opt:hover, .ss-fontpick-opt.ss-active { background: var(--ss-hover); }
.ss-fontpick-opt[aria-selected="true"] { background: var(--ss-selected); font-weight: 650; }
.ss-fontpick-opt.ss-active { outline: 2px solid var(--ss-focus); outline-offset: -2px; }
.ss-fontpick-empty { padding: 4px 8px 8px; font-size: 12px; line-height: 16px; color: var(--ss-subdued); }
.ss-fontpick-sample { padding: 8px 12px; border-radius: 8px; background: var(--ss-surface-subdued); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.ss-fontpick-note { margin: -4px 0 0; }
.ss-fontrows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ss-border); border-radius: 8px; }
.ss-fontrow { display: flex; align-items: center; gap: 12px; min-height: 48px; box-sizing: border-box; padding: 8px 12px; }
.ss-fontrow + .ss-fontrow { border-top: 1px solid var(--ss-border); }
.ss-fontrow-name { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-fontrow-meta { display: flex; align-items: center; gap: 8px; }
.ss-fontform { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface-subdued); max-width: 480px; }
.ss-fontform[hidden], s-button[hidden] { display: none !important; }
.ss-filein { font: 450 13px/20px var(--ss-font); max-width: 100%; }
.ss-field-error { color: #8e1f0b; font-size: 13px; line-height: 20px; }
.ss-field-error[hidden] { display: none; }

/* ---- 11. Small screens ---- */
@media (max-width: 767px) {
  .ss-layout { grid-template-columns: 1fr; }
  .ss-menu { position: static; }
  /* Phone: name + switch on one line, the item count underneath at a compact width. */
  .ss-row-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .ss-row-grid > .ss-cell-count { grid-column: 1; grid-row: 2; max-width: 140px; }
  .ss-row-grid > .ss-cell-toggle { grid-column: 2; grid-row: 1; }
  /* the box is narrow and flush with the card's left edge here: the hint goes to its RIGHT instead, still in the
     row's own empty space, never below it */
  .ss-count-hint { right: auto; left: 100%; margin-right: 0; margin-left: 8px; }
  .ss-opt:has(> .ss-slider, > .ss-choice, > .ss-color) { grid-template-columns: 1fr; }
  .ss-opt > .ss-help, .ss-slider-row, .ss-opt > .ss-choice > .ss-picks { grid-column: 1; }
}

/* ---- 12. Look & layout editor: top bar, controls + sticky preview, narrow dock ---- */
.ss-nav-host { display: contents; }
.ss-layout.ss-layout-editor { grid-template-columns: minmax(0, 1fr); }
.ss-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 8px 12px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; }
.ss-crumb { display: flex; align-items: center; gap: 8px; margin-inline-end: auto; color: var(--ss-subdued); }
.ss-crumb strong { color: var(--ss-text); font-weight: 650; }
/* "Search settings" is the way back: a back arrow and the dashboard's link colour, so it reads as clickable */
.ss-crumb-back { display: inline-flex; align-items: center; gap: 2px; color: var(--ss-focus); font-weight: 500; text-decoration: none; padding: 2px 6px 2px 2px; margin-inline-start: -2px; border-radius: 6px; }
.ss-crumb-back:hover { background: var(--ss-surface-subdued); text-decoration: underline; }
.ss-crumb-back:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
/* The chevron is drawn in the lower-middle of its 16px box and with spare room on its right. Its centre is lined up with
   the centre of the letters (cap height to baseline, not the "g" tail; measured at 4x: it sat 1.7px low) and the text is
   pulled closer. A transform is used because the browser rounds margins and offsets of the icon. */
.ss-crumb-arrow { --s-icon-size: 16px; width: 16px; height: 16px; flex: none; margin-inline-end: -3px; transform: translateY(-1.7px); }
.ss-topbar-jump { width: 220px; max-width: 100%; }
.ss-topbar-switch { display: flex; align-items: center; gap: 8px; }

.ss-look { min-width: 0; }
.ss-look-controls { min-width: 0; }
.ss-look-preview { min-width: 0; }
.ss-look[data-mode="wide"] { display: grid; grid-template-columns: clamp(340px, 34%, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ss-look[data-mode="wide"] .ss-look-preview { position: sticky; top: 16px; align-self: start; height: calc(100vh - var(--ss-fit-top, 16px) - 16px); }
/* The fallback save bar (sticky, bottom) is inside the frame: leave room so it never covers the preview. */
body:has(.ss-savebar:not([hidden])) .ss-look[data-mode="wide"] .ss-look-preview { height: calc(100vh - var(--ss-fit-top, 16px) - 16px - 72px); }
.ss-look[data-mode="dock"] { display: flex; flex-direction: column; gap: 16px; }
.ss-look[data-mode="dock"] .ss-look-preview { position: sticky; top: 0; z-index: 20; height: max(40vh, 240px); }
.ss-look[data-mode="dock"] .ss-look-preview:has(.ss-preview[data-collapsed="true"]) { height: 44px; }

.ss-preview { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; height: 100%; padding: 12px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px }
.ss-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-preview-spacer { flex: 1; }
.ss-preview-break { display: none; }
.ss-preview-toggle { display: none; height: 28px; padding: 0 12px; border: 1px solid #c9c9c9; border-radius: 8px; background: var(--ss-surface); color: var(--ss-text); font: 550 13px/20px var(--ss-font); cursor: pointer; }
.ss-preview-toggle:hover { background: var(--ss-surface-subdued); }
.ss-preview-toggle:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
.ss-preview-stage { flex: 1; min-height: 0; display: flex; justify-content: center; box-sizing: border-box; padding: 8px; background: var(--ss-hover); border-radius: 8px; }
.ss-preview-frame { box-sizing: border-box; display: block; width: 100%; height: 100%; min-height: 0; border: 1px solid #d9d9d9; border-radius: 8px; background: #f6f6f7; }
/* the frame is laid out at its device width and scaled to fit the stage (see fit() in preview.js) */
.ss-preview-frame { position: absolute; inset-block-start: 8px; inset-inline-start: 50%; transform-origin: top center; max-width: none; }
.ss-preview[data-mode="dock"] .ss-preview-frame { inset-block-start: 4px; }
.ss-preview-note { display: block; flex: none; font-size: 12px; line-height: 16px; }
.ss-preview[data-mode="modal"] { height: 100%; min-height: 0; padding: 0; border: 0; }

.ss-preview[data-mode="dock"] { padding: 8px 12px; gap: 6px; }
.ss-preview[data-mode="dock"] .ss-preview-toggle { display: inline-block; }
.ss-preview[data-mode="dock"] .ss-preview-break { display: block; flex-basis: 100%; height: 0; }
.ss-preview[data-mode="dock"] .ss-seg { height: 24px; padding: 0 8px; font-size: 12px; line-height: 16px; }
.ss-preview[data-mode="dock"] .ss-segmented { height: 28px; }
.ss-preview[data-mode="dock"] .ss-preview-stage { padding: 4px; }
.ss-preview[data-mode="dock"] .ss-preview-note:not([data-state="error"]) { display: none; }
.ss-preview[data-mode="dock"][data-collapsed="true"] { padding-block: 6px; }
.ss-preview[data-mode="dock"][data-collapsed="true"] :is(.ss-preview-break, .ss-segmented, .ss-preview-stage, .ss-preview-note) { display: none; }

/* Wide editor: the controls column is narrow, so stack option rows and use compact cards. */
.ss-look[data-mode="wide"] .ss-opt:has(> .ss-slider, > .ss-choice, > .ss-color) { grid-template-columns: minmax(0, 1fr); }
.ss-look[data-mode="wide"] :is(.ss-opt > .ss-help, .ss-slider-row, .ss-opt > .ss-choice > .ss-picks, .ss-color > :not(.ss-opt-label):not(.ss-color-native)) { grid-column: 1; }

.ss-look .ss-layout-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ss-look .ss-layout-card { padding: 8px; gap: 4px; font-size: 12px; line-height: 16px; }
.ss-look .ss-layout-card svg { max-height: 48px; }
.ss-look .ss-card-caption { display: none; }
@media (max-width: 767px) { .ss-topbar-jump { width: 100%; } .ss-crumb { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ss-chevron { transition: none; } }

/* ---- 11. Look & layout: Basic / Advanced ---- */
.ss-advanced { gap: 16px; }
.ss-advanced-body[hidden] { display: none; }
.ss-basic-opts { gap: 16px; }

/* Page loader: centred in the space below the nav, so it does not sit in the top-left corner. */
.ss-loading { display: flex; align-items: center; justify-content: center; min-height: 60vh; }

.dev-nav-logo { display: block; width: 28px; height: 28px; margin-right: 8px; border-radius: 7px; }

/* Shop by category picker + Featured products lists */
.ss-add-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ss-add-select { flex: 0 1 360px; min-width: 0; }
.ss-list { display: flex; flex-direction: column; gap: 8px; }
.ss-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 8px; }
.ss-list-info { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ss-list-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-list-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ss-cell-name { min-width: 0; overflow-wrap: anywhere; }
.ss-syn-row { display: flex; flex-direction: column; gap: 6px; }

/* Tick-list chooser (Collections, product groups, Featured lists): search box, scrollable checkboxes, count + Add selected */
.ss-check { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ss-check-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface); }
.ss-check-list[hidden] { display: none; }
.ss-check-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 12px; border-bottom: 1px solid var(--ss-border); }
.ss-check-row:last-child { border-bottom: 0; }
.ss-check-thumb { flex: none; width: 32px; height: 32px; object-fit: cover; border-radius: 6px; background: var(--ss-hover); }
.ss-check-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ss-check-detail, .ss-check-done { flex: none; max-width: 40%; text-align: end; overflow-wrap: anywhere; }
.ss-check-empty { padding: 12px; color: var(--ss-subdued); }
.ss-check-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ss-check-count { margin-inline-end: auto; font-weight: 550; }
.ss-check-note:empty { display: none; }
.ss-list-inline { flex: 1 1 100%; min-width: 0; padding-top: 8px; border-top: 1px solid var(--ss-border); }
@media (max-width: 520px) { .ss-check-row { flex-wrap: wrap; } .ss-check-detail, .ss-check-done { max-width: none; text-align: start; margin-inline-start: 0; } .ss-check-count { flex: 1 1 100%; } }

.ss-row-grid-1 { grid-template-columns: 1fr; }

/* Ready-made styles: the one in use is outlined and says so. */
.ss-preset-on { border-color: var(--ss-focus); outline: 1px solid var(--ss-focus); outline-offset: -2px; background: #f3f8ff; }
.ss-preset-from { border-color: var(--ss-focus); border-style: dashed; }
.ss-preset-store > .ss-preset-from { border-style: none; }
.ss-preset-store:has(> .ss-preset-from) { border-color: var(--ss-focus); border-style: dashed; }
.ss-preset-state { font-size: 12px; line-height: 16px; font-weight: 550; color: var(--ss-focus); }

/* Plain drop-down (Featured list to show): label above, the list opens under the button. */
.ss-dd { max-width: none; }
.ss-dd-label { font-size: 13px; line-height: 20px; color: var(--ss-text); }
.ss-dd .ss-fontpick-pop { top: 60px; }

/* Live preview: spinner over the stage while a change is being drawn (fonts can take a moment to arrive). */
.ss-preview-stage { position: relative; }
.ss-preview-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .72); border-radius: inherit; font-size: 13px; font-weight: 550; color: var(--ss-text); }
.ss-preview-loading[hidden] { display: none; }
.ss-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ss-border); border-top-color: var(--ss-text); animation: ss-spin .8s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-spinner { animation-duration: 2.4s; } }

/* Unit picker next to a size option (px / rem / em / pt): a compact button, and a short white list in the Polaris look. */
.ss-unit-select { position: relative; display: inline-block; flex: none; }
.ss-unit-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; box-sizing: border-box; width: 58px; height: 32px; padding: 0 8px 0 10px; border: 1px solid #8a8a8a; border-radius: 8px; background: var(--ss-surface); color: var(--ss-text); font: 450 13px/20px var(--ss-font); cursor: pointer; }
.ss-unit-btn svg { flex: none; color: var(--ss-subdued); }
.ss-unit-btn:hover { background: var(--ss-surface-subdued); }
.ss-unit-btn[aria-expanded="true"] { border-color: var(--ss-focus); }
.ss-unit-btn:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
.ss-unit-pop { z-index: 60; box-sizing: border-box; padding: 4px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .14), 0 0 1px rgba(0, 0, 0, .2); }
.ss-unit-pop[hidden] { display: none; }
.ss-unit-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; box-sizing: border-box; padding: 4px 12px 4px 8px; border-radius: 8px; font: 450 13px/20px var(--ss-font); color: var(--ss-text); cursor: pointer; }
.ss-unit-opt:hover, .ss-unit-opt:focus-visible { background: var(--ss-hover); outline: 0; }
.ss-unit-opt[aria-selected="true"] { background: var(--ss-selected); font-weight: 650; }
.ss-unit-tick { width: 14px; font-size: 12px; text-align: center; visibility: hidden; }
.ss-unit-opt[aria-selected="true"] .ss-unit-tick { visibility: visible; }

/* ---- Compact Advanced panel (Webflow-style): property name + one small field, no sliders ---- */
.ss-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.ss-opt-compact { min-width: 0; }
.ss-prop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; position: relative; }
.ss-prop-label { margin: 0; font-size: 12px; line-height: 16px; font-weight: 550; color: var(--ss-subdued); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 1 / -1; }
.ss-prop-label::after { content: ""; }
.ss-field { display: inline-flex; align-items: center; box-sizing: border-box; height: 30px; border: 1px solid #c9c9c9; border-radius: 8px; background: var(--ss-surface); min-width: 0; }
.ss-field:hover { border-color: #8a8a8a; }
.ss-field:focus-within { border-color: var(--ss-focus); outline: 2px solid var(--ss-focus); outline-offset: -1px; }
.ss-field .ss-num { width: 100%; min-width: 0; height: 28px; border: 0; border-radius: 8px; background: transparent; padding: 0 4px 0 8px; font-size: 13px; text-align: start; outline: 0; -moz-appearance: textfield; }
.ss-field .ss-num::-webkit-outer-spin-button, .ss-field .ss-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-field .ss-unit { padding: 0 8px 0 2px; font-size: 12px; color: var(--ss-subdued); }
.ss-field .ss-unit-btn { width: auto; height: 28px; border: 0; background: transparent; padding: 0 6px 0 2px; gap: 3px; font-size: 12px; color: var(--ss-subdued); border-radius: 0 7px 7px 0; }
.ss-field .ss-unit-btn:hover { color: var(--ss-text); background: transparent; }
/* a value you set is marked: accent name and a reset dot; one that follows another option is muted */
.ss-prop[data-state="set"] .ss-prop-label { color: var(--ss-focus); }
.ss-prop[data-state="inherited"] .ss-num, .ss-prop[data-state="inherited"] .ss-fontpick-value { color: var(--ss-subdued); }
/* a weight drop-down in the compact grid: the name sits above (the drop-down's own label is hidden), the button fills the cell */
.ss-prop-dd .ss-dd { grid-column: 1 / -1; min-width: 0; }
.ss-prop-dd .ss-dd-label { display: none; }
.ss-prop-dd .ss-fontpick-btn { height: 32px; padding: 0 6px 0 10px; font-size: 13px; }
.ss-prop-dd .ss-fontpick-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-prop-dot { position: absolute; inset-block-start: -1px; inset-inline-end: 0; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ss-prop-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ss-focus); }
.ss-prop-dot[hidden] { display: none; }
.ss-prop-bare { grid-template-columns: minmax(0, 1fr); }
.ss-prop-bare .ss-field { width: 100%; }
/* padding box and radius corners */
.ss-box4 { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface-subdued); }
.ss-box4-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-box4-title { font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--ss-subdued); }
.ss-box4-all { display: inline-flex; align-items: center; gap: 6px; width: 124px; }
/* phones: 16 px numbers and a 36 px link button need more room, or "10" is cut to "1(" */
@media (max-width: 768px) { .ss-box4-all { width: 152px; } }
.ss-link-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid #c9c9c9; border-radius: 8px; background: var(--ss-surface); color: var(--ss-subdued); cursor: pointer; }
.ss-link-btn[aria-pressed="true"] { color: var(--ss-focus); border-color: var(--ss-focus); background: #f3f8ff; cursor: default; }
.ss-link-btn:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
.ss-box4-diagram { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: ". t ." "l c r" ". b ."; gap: 6px; justify-items: center; align-items: center; }
.ss-box4-t { grid-area: t; } .ss-box4-l { grid-area: l; } .ss-box4-r { grid-area: r; } .ss-box4-b { grid-area: b; }
.ss-box4-c { grid-area: c; width: 100%; height: 30px; border: 1px dashed #b5b5b5; border-radius: 6px; background: var(--ss-surface); }
.ss-box4-diagram .ss-prop { width: 100%; max-width: 92px; }
.ss-corners-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ss-corner { display: grid; gap: 2px; min-width: 0; }
.ss-corner-name { font-size: 11px; line-height: 14px; color: var(--ss-subdued); }
@media (max-width: 440px) { .ss-props { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .ss-field { height: 36px; } .ss-field .ss-num { height: 34px; font-size: 16px; } .ss-field .ss-unit-btn { height: 34px; } .ss-link-btn { height: 36px; width: 36px; } }

/* ---- Spacing box (margin ring around padding ring), Webflow style ---- */
.ss-sp-single { display: block; }
.ss-sp-margin { display: grid; grid-template-columns: minmax(46px, 0.55fr) minmax(0, 3fr) minmax(46px, 0.55fr); grid-template-areas: "lab lab lab" ". t ." "l c r" ". b ."; gap: 5px; padding: 6px; border: 1px dashed #c4c4c4; border-radius: 10px; background: #efefef; }
.ss-sp-margin > .ss-sp-ring-label { grid-area: lab; display: flex; align-items: center; justify-content: space-between; }
.ss-sp-margin > .ss-sp-t { grid-area: t; } .ss-sp-margin > .ss-sp-l { grid-area: l; } .ss-sp-margin > .ss-sp-r { grid-area: r; } .ss-sp-margin > .ss-sp-b { grid-area: b; }
.ss-sp-margin > .ss-sp-inner { grid-area: c; }
.ss-sp-ring-label { font-size: 11px; font-weight: 650; letter-spacing: .04em; color: var(--ss-subdued); text-transform: uppercase; }
.ss-sp-padding { display: grid; grid-template-columns: minmax(44px, 1fr) minmax(74px, 1.6fr) minmax(44px, 1fr); grid-template-areas: "lab lab lab" ". t ." "l c r" ". b ."; gap: 5px; padding: 6px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface); }
.ss-sp-padding > .ss-sp-ring-label { grid-area: lab; }
.ss-sp-padding > .ss-sp-t { grid-area: t; } .ss-sp-padding > .ss-sp-l { grid-area: l; } .ss-sp-padding > .ss-sp-r { grid-area: r; } .ss-sp-padding > .ss-sp-b { grid-area: b; }
.ss-sp-c { grid-area: c; min-height: 26px; border: 1px dashed #b5b5b5; border-radius: 6px; background: var(--ss-surface-subdued); }
.ss-sp-cell { min-width: 0; display: flex; justify-content: center; }
.ss-sp-cell .ss-prop { width: 100%; }
.ss-sp-cell .ss-field { width: 100%; }
.ss-subgroup { margin-block: 4px 8px; border: 1px solid var(--ss-border); border-radius: 10px; padding: 0 10px; }
.ss-subgroup-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 0; border: 0; background: transparent; cursor: pointer; font: 650 12px/16px var(--ss-font); color: var(--ss-subdued); text-align: start; }
.ss-subgroup-toggle[aria-expanded="false"] .ss-chevron { transform: rotate(-90deg); }
.ss-subgroup-body { padding-bottom: 10px; }
.ss-subgroup-body[hidden] { display: none; }

/* in the narrow side cells only the number and the chevron fit: the unit is still chosen from the list */
.ss-sp-l .ss-unit-text, .ss-sp-r .ss-unit-text { display: none; }
.ss-sp-l .ss-unit-btn, .ss-sp-r .ss-unit-btn { padding: 0 4px 0 0; }
.ss-sp-l .ss-num, .ss-sp-r .ss-num { padding-inline-start: 6px; }
.ss-sp-l .ss-field, .ss-sp-r .ss-field { height: 28px; }

/* ---- Spacing frame, Webflow style: MARGIN ring around PADDING ring, values on the edges. Fixed cell sizes: nothing shifts. ---- */
.ss-wf { display: block; max-width: 300px; }
.ss-wf-ring { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; grid-template-rows: 24px auto 24px; grid-template-areas: "t t t" "l c r" "b b b"; gap: 0; padding: 4px; border-radius: 8px; }
.ss-wf-margin { background: #ececec; border: 1px dashed #bdbdbd; padding-top: 18px; }
.ss-wf-padding { background: #fafafa; border: 1px solid #d4d4d4; padding-top: 18px; }
.ss-wf-lab { position: absolute; inset-block-start: 4px; inset-inline-start: 6px; font-size: 9.5px; line-height: 12px; font-weight: 700; font-style: italic; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8a; pointer-events: none; }
.ss-wf-link { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; }
.ss-wf-t { grid-area: t; } .ss-wf-l { grid-area: l; } .ss-wf-r { grid-area: r; } .ss-wf-b { grid-area: b; } .ss-wf-c { grid-area: c; }
.ss-wf-cell { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ss-wf-bar { min-height: 22px; border: 1px dashed #b5b5b5; border-radius: 5px; background: var(--ss-surface); margin-block: 2px; }
.ss-wf-auto { font-size: 12px; color: #9a9a9a; }
/* the numbers are plain and all the same size; a box shows only on hover / focus. The unit shows when it is not px. */
.ss-wf .ss-prop { grid-template-columns: auto; width: auto; max-width: none; }
.ss-wf .ss-field { height: 22px; border-color: transparent; background: transparent; border-radius: 5px; padding: 0 3px; width: auto; justify-content: center; }
.ss-wf .ss-field:hover { background: rgba(0, 0, 0, .06); }
.ss-wf .ss-field:focus-within { background: var(--ss-surface); border-color: var(--ss-focus); outline: 0; }
.ss-wf .ss-num { width: 3.4ch; min-width: 0; padding: 0; text-align: center; font-size: 12px; font-weight: 450; color: var(--ss-text); }
.ss-wf .ss-unit-btn { padding: 0; width: auto; height: 20px; font-size: 11px; color: #8a8a8a; gap: 0; }
.ss-wf .ss-unit-btn svg { display: none; }
.ss-wf .ss-unit-select[data-base="true"] { display: none; }
.ss-wf .ss-field:hover .ss-unit-select[data-base="true"], .ss-wf .ss-field:focus-within .ss-unit-select[data-base="true"] { display: inline-block; }
.ss-wf .ss-prop[data-state="set"] .ss-num { color: var(--ss-focus); }
.ss-wf .ss-prop[data-state="inherited"] .ss-num { color: var(--ss-text); }
.ss-wf .ss-link-btn { width: 22px; height: 22px; border-radius: 6px; }
@media (max-width: 768px) { .ss-wf .ss-field { height: 30px; } .ss-wf .ss-num { font-size: 16px; } .ss-wf-ring { grid-template-rows: 32px auto 32px; } }

/* "Expand" preview: 90 % of the window wide and tall */
.ss-expand { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
.ss-expand[hidden] { display: none; }
.ss-expand-card { display: flex; flex-direction: column; width: 90vw; height: 90vh; background: var(--ss-surface); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .35); overflow: hidden; }
.ss-expand-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ss-border); }
.ss-expand-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; }
.ss-expand-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ss-subdued); }
.ss-expand-x:hover { background: var(--ss-hover); }
.ss-expand-x:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
.ss-expand-body { flex: 1; min-height: 0; padding: 12px 16px; }
.ss-expand-foot { display: flex; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--ss-border); }
@media (max-width: 520px) { .ss-expand-card { width: 100vw; height: 100vh; border-radius: 0; } }

/* icon-only choices (Align items / Justify content): small square buttons, the name is the tooltip */
.ss-pick-icon .ss-pick-face { width: 36px; padding: 0; justify-content: center; }
.ss-pick-icon .ss-pick-face svg { display: block; }

/* ==========================================================================
   Analytics page (all rules prefixed ss-an-; nothing else changes)
   ========================================================================== */
.ss-an { display: flex; flex-direction: column; gap: 16px; }
.ss-an-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ss-an-title { display: flex; align-items: center; gap: 8px; }
.ss-an-title h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.ss-an-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ss-an-period .ss-fontpick { width: 160px; }
.ss-an-period .ss-dd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss-an-switch { display: flex; align-items: center; }
.ss-an-body, .ss-an-bodywrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ss-an-bodywrap { transition: opacity .15s; }
.ss-an-refreshing { opacity: .55; pointer-events: none; }
.ss-an-card { background: var(--ss-surface); border-radius: 12px; box-shadow: 0 1px 0 rgba(26,26,26,.07), 0 0 0 1px rgba(26,26,26,.07); padding: 16px; min-width: 0; box-sizing: border-box; }
.ss-an-flush { padding: 0; overflow: hidden; }
.ss-an-soon { border: 1px dashed #b5b5b5; background: #fafafa; box-shadow: none; }
.ss-an-h { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; }
.ss-an-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--ss-subdued); }
.ss-an-gap { margin-bottom: 12px; }
.ss-an-pad { padding: 12px 16px; }
.ss-an-pad-top { padding: 16px 16px 8px; }
.ss-an-muted { color: #6d7175; }
.ss-an-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ss-an-cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ss-an-flush .ss-an-cardhead { margin-bottom: 0; }

.ss-an-btn { font: 550 13px/20px var(--ss-font); border-radius: 8px; padding: 5px 12px; min-height: 32px; box-sizing: border-box; border: 0; cursor: pointer; background: #fff; color: var(--ss-text); box-shadow: inset 0 -1px 0 #b5b5b5, 0 0 0 1px #e3e3e3; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ss-an-btn:hover:not(:disabled) { background: var(--ss-hover); }
.ss-an-btn:disabled { opacity: .55; cursor: default; }
.ss-an-back { padding: 5px 8px; }
.ss-an-primary { background: #303030; color: #fff; box-shadow: inset 0 -1px 0 #000; }
.ss-an-primary:hover:not(:disabled) { background: #1a1a1a; }
.ss-an-plain { box-shadow: none; background: none; color: var(--ss-focus); padding: 5px 4px; }
.ss-an-plain:hover:not(:disabled) { background: none; text-decoration: underline; }
.ss-an-btn:focus-visible, .ss-an-tab:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 1px; }
.ss-an-loading { position: relative; }
.ss-an-loading::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ss-an-spin .7s linear infinite; }
@keyframes ss-an-spin { to { transform: rotate(360deg); } }

.ss-an-badge { display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 550; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.ss-an-badge-ok { background: #cdfee1; color: #0c5132; } .ss-an-badge-warn { background: #fff1e3; color: #5e4200; }
.ss-an-badge-info { background: #eaf4ff; color: #00527c; } .ss-an-badge-neutral { background: #e3e3e3; color: #303030; }

.ss-an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ss-an-kpicard { display: flex; flex-direction: column; gap: 0; }
.ss-an-kpirow { display: flex; align-items: baseline; gap: 8px; }
.ss-an-kpi { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.3px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ss-an-chg { font-size: 12px; font-weight: 600; white-space: nowrap; }
.ss-an-chg-good { color: #0c5132; } .ss-an-chg-bad { color: #8e0b21; } .ss-an-chg-flat { color: var(--ss-subdued); }

.ss-an-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ss-subdued); align-items: center; }
.ss-an-legend span, .ss-an-key { display: inline-flex; gap: 6px; align-items: center; }
.ss-an-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ss-an-c-hit { background: #2c6ecb; } .ss-an-c-miss { background: #e8892f; } .ss-an-c-few { background: #9bbcf0; }
.ss-an-chart { display: flex; gap: 8px; }
.ss-an-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: 11px; line-height: 14px; color: var(--ss-subdued); text-align: right; min-width: 16px; font-variant-numeric: tabular-nums; }
.ss-an-plot { flex: 1; min-width: 0; height: 180px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid #d4d4d4; background: linear-gradient(#ebebeb 1px, transparent 1px) 0 0 / 100% 90px; }
.ss-an-day { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ss-an-seg-miss { background: #e8892f; border-radius: 2px 2px 0 0; } .ss-an-seg-hit { background: #2c6ecb; }
.ss-an-day .ss-an-seg-hit:only-child { border-radius: 2px 2px 0 0; }
.ss-an-xaxis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ss-subdued); padding: 6px 0 0 24px; }

.ss-an-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ss-an-tab { font: 550 13px/20px var(--ss-font); padding: 6px 12px; border-radius: 8px; border: 0; background: none; color: var(--ss-subdued); cursor: pointer; }
.ss-an-tab.on { background: #e3e3e3; color: var(--ss-text); }
.ss-an-scroll { overflow-x: auto; }
.ss-an-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.ss-an-table th { text-align: left; font-weight: 550; color: var(--ss-subdued); background: var(--ss-surface-subdued); padding: 8px 12px; white-space: nowrap; }
.ss-an-table td { padding: 10px 12px; border-top: 1px solid #ebebeb; vertical-align: middle; }
.ss-an-table .ss-an-r { text-align: right; }
.ss-an-term { font-weight: 600; overflow-wrap: anywhere; min-width: 90px; }
.ss-an-struck { text-decoration: line-through; color: #6d7175; font-weight: 600; }
.ss-an-num { font-variant-numeric: tabular-nums; }
.ss-an-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; white-space: nowrap; }
.ss-an-links { display: inline-flex; gap: 12px; font-size: 12px; }
.ss-an-pick { position: relative; display: inline-block; }
.ss-an-pop { text-align: left; white-space: normal; }
.ss-an-upnote { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 16px 12px; padding: 10px 12px; background: var(--ss-surface-subdued); border-radius: 10px; }
/* what the last one-click fix did (review M11): live = green (Polaris success surface), draft = the info surface */
.ss-an-outcome { margin: 0 16px 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 20px; }
.ss-an-outcome-live { background: #cdfee1; color: #0c5132; }
.ss-an-outcome-draft { background: #eaf4ff; color: #003a5a; }
.ss-an-empty { padding: 24px 16px; text-align: center; color: var(--ss-subdued); border-top: 1px solid #ebebeb; }
.ss-an-volcell { min-width: 160px; }
.ss-an-vol { display: flex; align-items: center; gap: 8px; }
.ss-an-track { flex: 1; height: 8px; border-radius: 4px; background: #ebebeb; min-width: 60px; }
.ss-an-fill { height: 8px; border-radius: 4px; background: #2c6ecb; }
.ss-an-volnum { min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

.ss-an-split { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ss-an-wide { flex: 999 1 520px; min-width: 0; }
.ss-an-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ss-an-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: #ebebeb; }
.ss-an-qlist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; }
.ss-an-week { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.ss-an-wk { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.ss-an-wkbar { width: 100%; background: #2c6ecb; border-radius: 3px 3px 0 0; min-height: 1px; }
.ss-an-wkday, .ss-an-wknum { font-size: 11px; line-height: 14px; color: var(--ss-subdued); }
.ss-an-soons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ss-an-skel { height: 12px; border-radius: 6px; background: #ebebeb; margin: 8px 0; animation: ss-an-pulse 1.2s ease-in-out infinite; }
.ss-an-skel-tall { height: 150px; border-radius: 8px; }
@keyframes ss-an-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ss-an-skel, .ss-an-loading::after { animation: none; } }
@media (max-width: 520px) { .ss-an-xaxis { padding-left: 24px; } .ss-an-legend { flex-wrap: wrap; gap: 8px 16px; } }
.ss-an-table td[data-col="fix"] { min-width: 220px; }
.ss-an-scroll { position: relative; }
/* Analytics on a phone: the two tables become stacked rows, so the fix and pin buttons are never off-screen */
@media (max-width: 600px) {
  .ss-an-table[data-testid="failed-table"] thead, .ss-an-table[data-testid="top-table"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ss-an-table[data-testid="failed-table"] tr, .ss-an-table[data-testid="top-table"] tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 12px 16px; border-top: 1px solid #ebebeb; }
  .ss-an-table[data-testid="failed-table"] tr { grid-template-columns: minmax(0, 1fr) auto; }
  .ss-an-table[data-testid="failed-table"] td, .ss-an-table[data-testid="top-table"] td { padding: 0; border: 0; min-width: 0; }
  .ss-an-table[data-testid="failed-table"] td[data-col="fix"] { min-width: 0; grid-column: 1 / -1; }
  .ss-an-table[data-testid="failed-table"] td[data-col="action"] { grid-column: 1 / -1; text-align: left; }
  .ss-an-table[data-testid="failed-table"] td[data-col="action"] .ss-an-actions { justify-content: flex-start; flex-wrap: wrap; }
  .ss-an-table[data-testid="failed-table"] td.ss-an-num::before { content: "Times "; color: var(--ss-subdued); }
  .ss-an-table[data-testid="top-table"] td.ss-an-volcell { grid-column: 1 / -1; grid-row: 2; }
  .ss-an-table[data-testid="top-table"] td:nth-child(4)::before { content: "Results "; }
  .ss-an-table[data-testid="top-table"] td:nth-child(5) { grid-column: 1 / -1; text-align: left; }
  .ss-an-table[data-testid="top-table"] td:nth-child(5) .ss-an-plain { padding-left: 0; }
}
/* the design's header buttons: [calendar] period, Compare toggle (pressed = on), Export */
.ss-an-iconbtn { display: inline-flex; align-items: center; gap: 6px; }
.ss-an-iconbtn svg { flex: none; }
.ss-an-btn[aria-pressed="false"] { color: var(--ss-subdued); }
.ss-an-pop .ss-fontpick-opt.on { font-weight: 600; }
/* Analytics header: only the tools, on the right (the title is the page heading like other pages) */
.ss-an-head-tools { justify-content: flex-end; }
.ss-an-tools > .ss-an-pick, .ss-an-tools > s-button { flex: none; }
/* a button label with a plan pill (Export CSV · Essential): centred on one line, the pill no taller than Polaris' 16px
   button text line, so the button keeps the same height as Last 30 days / Compare */
.ss-an-btnlabel { display: inline-flex; align-items: center; gap: 8px; vertical-align: top; height: 16px; line-height: 16px; white-space: nowrap; }
.ss-an-btnlabel > .ss-an-badge { padding: 0 8px; line-height: 16px; height: 16px; box-sizing: border-box; border-radius: 6px; }
/* Home "Storefront search" row: the first row of its section has no top border */
.ss-step-first { border-top: 0; padding-top: 4px; }
/* Home (the owner's design): status line, one card of rows, last 30 days, found-nothing alert, help line */
.ss-home-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* banner text + button: centred on the Y axis with a real gap; on narrow widths the button wraps under the text */
.ss-banner-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.ss-banner-row > .ss-banner-text { flex: 1 1 240px; min-width: 0; }
.ss-banner-row > s-button { flex: none; margin-inline-start: auto; }
.ss-home-rows > .ss-step:first-child { border-top: 0; padding-top: 4px; }
.ss-home-rows > .ss-step:last-child { padding-bottom: 4px; }
.ss-home-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ss-home-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.ss-home-h { margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }
.ss-home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ss-home-tile { padding: 12px; border-radius: 8px; background: #f7f7f7; min-width: 0; }
.ss-home-tile-label { font-size: 13px; line-height: 20px; color: var(--ss-subdued); }
.ss-home-tile-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ss-home-kpi { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 32px; overflow-wrap: anywhere; }
.ss-home-up { color: #0c5132; font-size: 12px; font-weight: 600; }
.ss-home-down { color: #8e0b21; font-size: 12px; font-weight: 600; }
.ss-home-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ss-subdued); }
.ss-home-tile-skel .ss-an-skel { height: 24px; margin-top: 8px; }
.ss-home-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: #fff8ef; border: 1px solid var(--ss-border); }
.ss-home-alert-text { flex: 999 1 360px; min-width: 0; display: grid; gap: 4px; }
.ss-home-foot { display: flex; justify-content: flex-end; gap: 4px; font-size: 13px; color: var(--ss-subdued); padding: 0 4px; }
@media (max-width: 600px) { .ss-home-actions { justify-content: flex-start; } }
/* Home, exactly as the design: 960 px column, title + pill, 24 px icons, 14/650 titles, 13/1.45 grey text */
.ss-home { max-width: 960px; margin-inline: auto; width: 100%; }
.ss-home-titlewrap { display: flex; align-items: center; gap: 8px; }
.ss-home-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ss-text); }
.ss-home-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 550; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.ss-home-pill-ok { background: #cdfee1; color: #0c5132; }
.ss-home-pill-warn { background: #fff1e3; color: #5e4200; }
.ss-home-pill-off { background: #e3e3e3; color: #303030; }
.ss-home-row.ss-step { grid-template-columns: 24px minmax(0, 1fr) auto; }
.ss-home-ico { display: block; flex: none; }
.ss-home-row .ss-step-title { font-size: 14px; line-height: 20px; font-weight: 650; }
.ss-home-row .ss-step-desc { font-size: 13px; line-height: 1.45; color: #616161; }
.ss-home-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 550; }
.ss-home-alert { border: 0; box-shadow: 0 1px 0 rgba(26, 26, 26, .07), 0 0 0 1px rgba(26, 26, 26, .07); }
@media (max-width: 600px) { .ss-home-row.ss-step { grid-template-columns: 24px minmax(0, 1fr); } }

/* ---- Draft / publish (docs/DRAFT_PUBLISH.md section 6): header badge, draft banner, orange dots, publish dialog ---- */
.ss-pub-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ss-border); }
.ss-pub-titlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ss-pub-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ss-text); }
.ss-pub-badge { display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.ss-pub-badge-draft { background: #fff1e3; color: #5e4200; }
.ss-pub-badge-live { background: #cdfee1; color: #0c5132; }
.ss-pub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-pub-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; background: var(--ss-surface); box-shadow: 0 1px 0 rgba(26, 26, 26, .07), 0 0 0 1px rgba(26, 26, 26, .07); }
.ss-pub-card-warn { background: #fff8ef; }
.ss-pub-card .ss-pub-ico { flex: none; }
.ss-pub-card-text { flex: 999 1 320px; min-width: 0; }
.ss-pub-card-title { font-size: 14px; line-height: 20px; font-weight: 650; }
.ss-pub-card-sub { font-size: 13px; line-height: 1.5; color: var(--ss-subdued); }
.ss-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: 50%; background: #e8892f; vertical-align: middle; }
.ss-menu-label { display: inline-flex; align-items: center; }
.ss-crumb .ss-dot { margin-inline-start: 6px; }
/* Home: the "N changes not published" row, under the first row */
.ss-home-row.ss-home-draft { background: #fff8ef; box-shadow: -16px 0 0 #fff8ef, 16px 0 0 #fff8ef; clip-path: inset(0 -16px); }
/* the publish dialog */
.ss-pub-body { display: flex; flex-direction: column; gap: 4px; }
.ss-pub-sub { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--ss-subdued); }
.ss-pub-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #ebebeb; }
.ss-pub-tag { font-size: 11px; line-height: 16px; font-weight: 600; padding: 2px 8px; border-radius: 8px; background: #ebebeb; white-space: nowrap; }
.ss-pub-row-text { flex: 1; min-width: 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.ss-pub-more { color: var(--ss-subdued); }
.ss-pub-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ss-surface-subdued); font-size: 13px; }
.ss-pub-check .ss-pub-ico { flex: none; }
.ss-pub-check-text { flex: 1; min-width: 0; }
[data-testid="publish-preview-btn"] .ss-pub-ico { display: inline-block; vertical-align: -2px; margin-inline-end: 6px; }
[data-testid="publish-preview-btn"] .ss-pub-ico * { stroke: #303030; fill: none; }
[data-testid="publish-preview-btn"] .ss-pub-ico circle { fill: #303030; }

/* Home: "Finish setting up" card after Skip setup (docs/ONBOARDING.md; Polaris setup guide pattern) */
.ss-home-reminder { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 44px 16px 16px; border-radius: 12px; background: var(--ss-surface, #fff); box-shadow: 0 1px 0 rgba(26, 26, 26, .07), 0 0 0 1px rgba(26, 26, 26, .07); }
.ss-home-reminder-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-home-reminder-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ss-home-reminder-top .ss-onb-dots { display: inline-flex; gap: 6px; }
.ss-home-reminder-actions { flex: none; }
.ss-home-reminder-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #616161; font: 20px/1 var(--ss-font, inherit); cursor: pointer; }
.ss-home-reminder-x:hover { background: #f1f1f1; color: #303030; }
.ss-home-reminder-x:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
.ss-home-foot-extra:empty { display: none; }

/* Picture shape ratio: "Custom" opens two compact number fields (width : height) under the picks */
.ss-ratio-fields { display: flex; align-items: center; gap: 6px; margin-block-start: 8px; }
.ss-ratio-fields[hidden], .ss-ratio-err[hidden] { display: none; }
.ss-ratio-fields .ss-ratio-num { width: 72px; }
.ss-ratio-sep { color: var(--ss-subdued); font-weight: 600; }
.ss-ratio-err { margin-block-start: 4px; color: var(--ss-critical, #8e1f0b); }

/* Desktop = the base breakpoint: a small star; hovering it (or focusing Desktop with the keyboard) explains the cascade */
.ss-seg-base { position: relative; gap: 4px; }
.ss-base-star { display: inline-flex; color: #b98900; font-size: 11px; line-height: 1; cursor: help; }
/* anchored to the Desktop button's start so it never runs off the left edge (the button sits at the start of the preview bar) */
.ss-base-tip { position: absolute; z-index: 30; inset-block-start: calc(100% + 8px); inset-inline-start: 0; inline-size: max-content; max-inline-size: min(260px, calc(100vw - 40px));
  padding: 8px 10px; border-radius: 8px; background: #303030; color: #fff; font: 450 12px/16px var(--ss-font); text-align: start; white-space: normal; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.ss-base-tip::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline-start: 70px; border: 5px solid transparent; border-block-end-color: #303030; }
.ss-base-star:hover .ss-base-tip, .ss-seg-base:focus-visible .ss-base-tip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .ss-base-tip { transition: none; } }

/* Button-group options (Picture shape ratio, Badge corner, Title lines…): the same blue label + reset dot as the compact number fields */
.ss-choice-label { position: relative; display: flex; align-items: center; inline-size: 100%; padding-inline-end: 18px; box-sizing: border-box; }
.ss-choice[data-state="set"] > .ss-choice-label { color: var(--ss-focus); }
.ss-choice-dot { inset-block-start: 50%; transform: translateY(-50%); }
.ss-warn-list { margin: 4px 0 0; padding-left: 18px; }