/* Shop admin styles.
 *
 * Kept out of the :app bundle so the customer-facing storefront doesn't carry
 * admin-only CSS — the same split storefront.css uses.
 */

/* ── Theme editor: live preview panel ─────────────────────────────────────── */

/* The stage is a fixed-height window onto the real storefront. The frame is
   deliberately WIDER than the stage and scaled down, so the preview shows a
   desktop-shaped page rather than the mobile layout the storefront's own
   responsive CSS would (correctly) serve at panel width. */
/* 1100px is the narrowest width that still gets the storefront's DESKTOP layout
   (its breakpoint is 1024px), so the scale factor stays as large as possible and
   the preview text stays legible. The scale is a variable because the same stage
   is used in two places at different widths — the editor's 26rem side panel and
   the wizard's wider review column. Frame height is stage ÷ scale, so the scaled
   page fills the stage rather than leaving a band of dead grey beneath it. */
.sf-preview-stage {
  --preview-scale: 0.378; /* 416px panel ÷ 1100 */
  --preview-frame-height: 1355px; /* 512px stage ÷ scale */
  position: relative;
  height: 32rem;
  overflow: hidden;
}
.sf-preview-stage--wide {
  --preview-scale: 0.58; /* the wizard's wider column */
  --preview-frame-height: 885px;
}
.sf-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1100px;
  height: var(--preview-frame-height);
  border: 0;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
}

/* 🔴 On a phone the wizard's preview was a desktop page shrunk into a
   340px column and cut off at the right ("MONT…" with a second column
   peeking in — postcard walk, 2026-09-25). Below sm the frame is simply the
   column's own width, unscaled, so it shows the storefront's real phone
   layout: what the shop's customers will see on the same phone. */
@media (max-width: 639px) {
  .sf-preview-stage--wide .sf-preview-frame {
    width: 100%;
    height: 100%;
    transform: none;
  }
}

/* The wizard's review screen puts the preview in the editor's 26rem side
   panel on a wide screen (2026-09-26), so there it takes the editor's scale;
   below xl it's the full-width column above the options, and stays --wide. */
@media (min-width: 1280px) {
  .sf-preview-stage--review {
    --preview-scale: 0.378;
    --preview-frame-height: 1355px;
  }
}

/* Phone: a real 390px viewport, so the storefront serves its genuine mobile
   layout (category chips, sticky basket) rather than a shrunken desktop one. */
.sf-preview-stage--phone {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}
.sf-preview-stage--phone .sf-preview-frame {
  position: relative;
  width: 390px;
  height: 1500px;
  transform: scale(0.62);
  border-radius: 1.25rem;
  box-shadow: 0 6px 24px -12px rgb(0 0 0 / 0.5);
}

/* ── Narrow screens: dock the preview to the bottom ───────────────────────── */
/* Above xl the panel sits beside the form and this all switches off. */
@media (max-width: 1279px) {
  .sf-preview-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    padding: 0 0.75rem 0.75rem;
    /* Collapsed: only the title bar shows, so feedback is always to hand
       without stealing the form's width. */
    max-height: 3.25rem;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .sf-preview-dock--open { max-height: 75vh; }
  .sf-preview-dock .sf-preview-stage { height: 22rem; }

  /* Reserve room so the Save button can't hide behind the collapsed dock. */
  .sf-preview-host { padding-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-preview-dock { transition: none; }
}

/* ── Theme editor: option tiles ───────────────────────────────────────────── */
/* The tiles are diagrams — their job is showing how options DIFFER at a glance,
   which a single preview can't do without clicking each in turn. They're drawn
   from these vars so they repaint with the shop's own colours as you edit
   (theme_preview_controller#tintSamples); the fallbacks only apply before the
   controller connects. */
.sf-sample {
  --sample-primary: var(--storefront-preview-primary, #1a1a2e);
  --sample-text: var(--storefront-preview-text, #ffffff);
  --sample-bg: var(--storefront-preview-bg, #f8f8f8);
  --sample-accent: var(--storefront-preview-accent, var(--sample-primary));
  --sample-radius: var(--storefront-preview-radius, 0.6rem);
}
.sf-sample-band { background: var(--sample-primary); }
.sf-sample-page { background: var(--sample-bg); }
.sf-sample-ink { background: var(--sample-text); opacity: 0.9; }
.sf-sample-ink-soft { background: var(--sample-text); opacity: 0.6; }
.sf-sample-accent { background: var(--sample-accent); }
.sf-sample-card { border-radius: min(var(--sample-radius), 0.375rem); }

/* The layout tiles, drawn as SVG so they scale with the tile rather than
   being 8px bars stretched across 300px (Graeme, 2026-09-25: "these
   wireframes don't really explain much"). Each shows what makes its layout
   different — tabs, a basket beside the menu, a board of pictures — in the
   shop's own colours, with items that look like items: a photo, a name, a
   price. */
.sf-mock { display: block; width: 100%; height: 100%; }
.sf-mock .m-page  { fill: var(--sample-bg); }
.sf-mock .m-band  { fill: var(--sample-primary); }
.sf-mock .m-bandink { fill: var(--sample-text); }
.sf-mock .m-card  { fill: #ffffff; stroke: rgb(0 0 0 / 0.1); stroke-width: 0.5; }
.sf-mock .m-photo { fill: var(--sample-accent); opacity: 0.5; }
.sf-mock .m-ink   { fill: #262626; opacity: 0.8; }
.sf-mock .m-soft  { fill: #262626; opacity: 0.25; }
.sf-mock .m-rule  { stroke: #262626; stroke-opacity: 0.15; stroke-width: 0.6; }