/* studio-finish.css — the builder in the site's finish (2026-09-25)

   Loaded after customer-flow-v4.css. The marketing pages moved to a Mac-style
   finish (assets/clean.css): a soft wash of colour behind everything and
   frosted glass on every surface. Jake: "make sure the builder matches that
   UI". The wizard is built on --w-* tokens, so most of this is new token
   values; the rest gives the main surfaces their blur and lit edge.

   Presentation only — no selector here changes layout or behaviour. The
   Solar Labels Builder inside the import step is themed in lamacoid/sl-host.css. */

:root{
  --w-paper:#e6e8eb;
  --w-sunk:rgba(255,255,255,.42);
  --w-card:rgba(255,255,255,.62);
  --w-edge:rgba(20,24,40,.09);
  --w-pick:#111111;
  --w-on-pick:#ffffff;
  --w-pick-soft:rgba(255,255,255,.88);
  --w-gridline:transparent;
  --w-glow-a:transparent;
  --w-glow-b:transparent;
  --w-bevel:none;
  --w-radius:16px;
  --wf-wash:
    radial-gradient(70% 55% at 0% 0%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(60% 55% at 100% 8%,rgba(160,172,190,.32),transparent 70%),
    radial-gradient(70% 60% at 100% 100%,rgba(120,134,152,.30),transparent 72%),
    radial-gradient(60% 50% at 0% 100%,rgba(205,210,218,.55),transparent 70%);
  --wf-glass-edge:rgba(255,255,255,.75);
  --wf-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(20,24,40,.04),
              0 12px 36px -14px rgba(30,40,90,.18);
  --wf-bar:rgba(230,232,235,.66);
  --wf-blur:saturate(1.2) blur(20px);
}
:root[data-theme='dark']{
  --w-paper:#0c0e11;
  --w-sunk:rgba(255,255,255,.05);
  --w-card:rgba(28,31,36,.55);
  --w-edge:rgba(255,255,255,.08);
  --w-pick:#f2f2f0;
  --w-on-pick:#0b0b0b;
  --w-pick-soft:rgba(48,52,60,.72);
  --wf-wash:
    radial-gradient(70% 55% at 0% 0%,rgba(96,110,132,.26),transparent 70%),
    radial-gradient(60% 55% at 100% 6%,rgba(58,68,84,.34),transparent 70%),
    radial-gradient(70% 60% at 100% 100%,rgba(34,42,54,.55),transparent 72%),
    radial-gradient(50% 40% at 50% 0%,rgba(255,138,31,.07),transparent 70%);
  --wf-glass-edge:rgba(255,255,255,.1);
  --wf-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 44px -18px rgba(0,0,0,.7);
  --wf-bar:rgba(12,14,17,.62);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']){
    --w-paper:#0c0e11;
    --w-sunk:rgba(255,255,255,.05);
    --w-card:rgba(28,31,36,.55);
    --w-edge:rgba(255,255,255,.08);
    --w-pick:#f2f2f0;
    --w-on-pick:#0b0b0b;
    --w-pick-soft:rgba(48,52,60,.72);
    --wf-wash:
      radial-gradient(70% 55% at 0% 0%,rgba(96,110,132,.26),transparent 70%),
      radial-gradient(60% 55% at 100% 6%,rgba(58,68,84,.34),transparent 70%),
      radial-gradient(70% 60% at 100% 100%,rgba(34,42,54,.55),transparent 72%),
      radial-gradient(50% 40% at 50% 0%,rgba(255,138,31,.07),transparent 70%);
    --wf-glass-edge:rgba(255,255,255,.1);
    --wf-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 44px -18px rgba(0,0,0,.7);
    --wf-bar:rgba(12,14,17,.62);
  }
}

/* the wallpaper, in place of the drafting grid: machined steel in light,
   gunmetal in dark — the same palette as assets/clean.css */
#sl-wiz{background-color:var(--w-paper);background-image:var(--wf-wash)}
html.sl-booting body::before{background:var(--wf-wash),var(--w-paper)}

/* the two bars are frosted, like the site header */
.w-top,.w-foot{background:var(--wf-bar);
  -webkit-backdrop-filter:var(--wf-blur);backdrop-filter:var(--wf-blur)}
.w-top{border-bottom-color:var(--w-edge)}
.w-foot{border-top-color:var(--w-edge)}
.w-brand{letter-spacing:.02em;text-transform:none;font-weight:600}
.w-brand span{font-weight:400}
.w-progress-track{background:var(--w-edge)}

/* headings in the site's weight and tracking */
.w-q{font-weight:600;letter-spacing:-.035em;line-height:1.1}

/* every card is glass: translucent, blurred, a lit top edge */
.w-choice,.w-card-block,.w-plate,.w-own-card,.w-logo-card,.w-imp-card,.w-imp-sheet,
.w-ship-option,.w-lmc-frame,.w-live,.w-finish-preview,.w-recap,.w-price,.w-wiz-side,
.w-imp-drop,.w-logo-drop,.w-auth{
  -webkit-backdrop-filter:var(--wf-blur);backdrop-filter:var(--wf-blur);
  border-color:var(--wf-glass-edge);box-shadow:var(--wf-shadow)}
.w-choice{border-width:1px}
.w-choice:hover{background:var(--w-pick-soft);border-color:var(--wf-glass-edge)}
.w-choice.on{border-color:var(--w-pick);background:var(--w-pick-soft)}
.w-mark{background:transparent}

/* buttons: the site's solid ink and outlined pair */
.w-btn{border-radius:12px;font-weight:500;letter-spacing:-.01em;min-height:52px}
.w-btn.back{border-width:1px;border-color:var(--w-edge);background:var(--w-card);
  -webkit-backdrop-filter:var(--wf-blur);backdrop-filter:var(--wf-blur)}
.w-btn.back:hover:not(:disabled){background:var(--w-pick-soft)}
.w-btn.plain{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* form fields sit on the glass as brighter wells */
.w-field input,.w-field select,.w-field textarea{border-radius:10px;
  background:var(--w-pick-soft);border-color:var(--w-edge)}