/* ==========================================================================
   Solar Labels — customer flow v4
   A guided wizard that stands in front of Llamacoids Studio.

   v3 put a step bar and a few panels on top of the workbench and left the
   workbench showing. On a desktop that meant a customer met a CAD inspector
   (TEXT / ALIGN / SIZE / SHAPE / EDGE / CORNER R / BEVEL / MATERIAL /
   COLOURWAY), a production toolbar, a parts sidebar and rule numbers on every
   row. Jake, 2026-08-20: "just super cluttered old stuff undeed and just a
   mess … make it easy to use as if a old person could use it without being
   over stimed."

   So v4 does not decorate the workbench. It hides it and asks one question at
   a time, in plain words, at a size you can read across a desk. The app is
   still underneath — it holds the order and it still performs the send — but a
   customer never sees it. "Open the full builder" gives it back.

   Type: no terminal face anywhere a customer reads. System sans, 17px base,
   generous leading. Mono survives only in prices and plate sizes, where digits
   have to line up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — the site's palette, not this file's own

   Until now the wizard carried its own colours: white paper, a Tailwind blue
   for what is chosen, a green tick, an amber warning. That was fine when it
   was the only themed thing on the page, but the marketing site and the
   workbench underneath have both since moved to the Subframe system — a
   graphite blueprint on warm vellum, zero chromatic colour in the interface,
   depth from line weight rather than shadow. Jake, 2026-08-20: "can we get
   the same theme as the homepage on the builder". So the --w-* names stay
   (958 lines reference them) and their values become the homepage's.

   Two things do NOT come across from the homepage:

   - The type scale. The wizard is deliberately larger than the site — 17px
     base, 19px choices, 64px targets, because "a old person could use it
     without being over stimed". Nothing here changes a font-size.
   - The plate artwork, which stays white-on-red on a white ground in both
     themes, on the homepage's own reasoning: that IS the product, and a
     grey plate would misrepresent what gets cut.

   What blue used to say, the inverted pair now says: --w-pick is the
   homepage's --action-bg, so a chosen thing is graphite-on-vellum in light
   and vellum-on-graphite in dark — the same single loud element the site
   uses for its filled button.
   -------------------------------------------------------------------------- */

:root {
  --w-paper: #fafafa;   /* --canvas */
  --w-sunk: #e4e4e4;    /* a step under --card, for hovers and quiet blocks */
  --w-card: #ededed;    /* --card */
  --w-ink: #171717;     /* --ink */
  --w-ink-2: #5c5c5c;   /* --pencil */
  --w-ink-3: #6b6b6b;   /* --label — 5.1:1 on paper, 4.5:1 on card */
  --w-edge: #e5e7eb;    /* --hairline */
  --w-pick: #242424;    /* --action-bg */
  --w-on-pick: #fafafa; /* --action-fg */
  --w-pick-soft: #e0e0e0;
  --w-good: #171717;
  --w-warn: #171717;
  /* The one hue left in the interface. A wrong field has to be unmissable and
     the site has no form idiom to clash with — but it is a token now, because
     the flat #dc2626 it replaces was never restated for dark and measured
     4.3:1 against #171717. */
  --w-bad: #c0392b;

  /* The drafting grid the design system is named after, and the light that
     falls across it. Same values and same opacities as the homepage. */
  --w-gridline: rgba(23, 23, 23, .055);
  --w-glow-a: rgba(96, 132, 198, .055);
  --w-glow-b: rgba(96, 132, 198, .03);

  /* the filled button's pressed-in bevel, lifted from site.css */
  --w-bevel: inset 0 4px 4px -2px rgba(255, 255, 255, .25),
             inset 0 -4px 4px -2px rgba(0, 0, 0, .25),
             inset -2px 0 2px -2px rgba(255, 255, 255, .1);

  --w-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --w-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --w-base: 17px;
  --w-radius: 16px;
  --w-gap: 20px;
  --w-foot: 92px;
}

/* Dark. The homepage's own inversion — #171717 sheet, #212121 cards — rather
   than the app's #0a0a0b pit, which is where the "over stimulated" came from.

   There used to be a `html:not([data-theme='light'])` block above this one
   forcing white paper. It was a no-op while the base paper was also white;
   now that base paper is #fafafa its (0,1,1) would have outranked :root and
   handed every system-default visitor a white canvas under graphite cards.
   Gone — the two blocks below are the whole of the dark story. */
:root[data-theme='dark'] {
  --w-paper: #171717;
  --w-sunk: #2a2a2a;
  --w-card: #212121;
  --w-ink: #fafafa;
  --w-ink-2: #a3a3a3;
  --w-ink-3: #9a9a9a;
  --w-edge: #2e2e2e;
  --w-pick: #fafafa;
  --w-on-pick: #171717;
  --w-pick-soft: #303030;
  --w-good: #fafafa;
  --w-warn: #fafafa;
  --w-bad: #f28b82;
  --w-gridline: rgba(250, 250, 250, .05);
  --w-glow-a: rgba(148, 182, 255, .10);
  --w-glow-b: rgba(120, 158, 238, .055);
  --w-bevel: inset 0 4px 4px -2px rgba(255, 255, 255, .5),
             inset 0 -4px 4px -2px rgba(0, 0, 0, .16),
             inset -2px 0 2px -2px rgba(255, 255, 255, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --w-paper: #171717;
    --w-sunk: #2a2a2a;
    --w-card: #212121;
    --w-ink: #fafafa;
    --w-ink-2: #a3a3a3;
    --w-ink-3: #9a9a9a;
    --w-edge: #2e2e2e;
    --w-pick: #fafafa;
    --w-on-pick: #171717;
    --w-pick-soft: #303030;
    --w-good: #fafafa;
    --w-warn: #fafafa;
    --w-bad: #f28b82;
    --w-gridline: rgba(250, 250, 250, .05);
    --w-glow-a: rgba(148, 182, 255, .10);
    --w-glow-b: rgba(120, 158, 238, .055);
    --w-bevel: inset 0 4px 4px -2px rgba(255, 255, 255, .5),
               inset 0 -4px 4px -2px rgba(0, 0, 0, .16),
               inset -2px 0 2px -2px rgba(255, 255, 255, .3);
  }
}

/* --------------------------------------------------------------------------
   The app goes away
   -------------------------------------------------------------------------- */

html.sl-wizard body { background: var(--w-paper) }
html.sl-wizard #root { display: none }
html:not(.sl-wizard) #sl-wiz { display: none }

/* The holding screen.

   `sl-wizard` goes on in the head script, before the first paint, so the app
   is never seen — but the wizard itself cannot be built until the bundle has
   mounted. Without something here that gap is a blank page. It is drawn with
   ::before/::after on <body> so it needs no markup and disappears the moment
   boot() takes `sl-booting` off. */
html.sl-booting body::before {
  content: 'Solar Labels';
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 46px;
  background: var(--w-paper);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 9998;
}
html.sl-booting body::after {
  content: 'Getting the builder ready…';
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  color: var(--w-ink-3);
  font-family: var(--w-font);
  font-size: 16px;
  z-index: 9999;
  animation: sl-boot-fade 1.6s ease-in-out infinite;
}
@keyframes sl-boot-fade {
  0%, 100% { opacity: 0.45 }
  50% { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  html.sl-booting body::after { animation: none; opacity: 0.8 }
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

#sl-wiz {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background-color: var(--w-paper);
  background-image:
    radial-gradient(76% 62% at 8% -6%, var(--w-glow-a), transparent 68%),
    radial-gradient(62% 54% at 96% 14%, var(--w-glow-b), transparent 72%),
    repeating-linear-gradient(to right, var(--w-gridline) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--w-gridline) 0 1px, transparent 1px 72px);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: var(--w-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.w-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--w-edge);
}
.w-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink);
}
.w-brand span { font-weight: 400; color: var(--w-ink-3) }
.w-top-spacer { flex: 1 }

/* Progress — a sentence and a bar. Not eight numbered circles. */
.w-progress { display: flex; align-items: center; gap: 14px }
/* `bar.hidden = !step` in the JS was being ignored: [hidden] is display:none
   from the UA sheet at (0,0,0) and the rule above outranks it, so the welcome
   screen — which has no step number — still drew a track filled to 100%. It
   was a full blue bar before the retheme and a full white one after, which is
   what made it visible. */
.w-progress[hidden] { display: none }
.w-progress-text {
  font-size: 15px;
  color: var(--w-ink-2);
  white-space: nowrap;
}
.w-progress-track {
  width: 160px;
  height: 8px;
  border-radius: 999px;
  background: var(--w-sunk);
  overflow: hidden;
}
.w-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--w-pick);
  transition: width 0.3s ease;
}

.w-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 44px 28px calc(var(--w-foot) + 44px);
}
.w-inner {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
.w-inner.wide { max-width: 1000px }

/* --------------------------------------------------------------------------
   Question
   -------------------------------------------------------------------------- */

.w-q {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.w-sub {
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--w-ink-2);
  max-width: 62ch;
}
.w-sub:last-child { margin-bottom: 0 }

/* --------------------------------------------------------------------------
   Choices — one column of big targets. Nothing is smaller than 60px tall.
   -------------------------------------------------------------------------- */

.w-choices { display: grid; gap: 12px }
.w-choices.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }

.w-choice {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  min-height: 64px;
  padding: 20px 22px;
  text-align: left;
  background: var(--w-card);
  border: 2px solid var(--w-edge);
  border-radius: var(--w-radius);
  color: var(--w-ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.w-choice:hover { border-color: var(--w-ink-3); background: var(--w-sunk) }
.w-choice.on {
  border-color: var(--w-pick);
  background: var(--w-pick-soft);
}
.w-choice:focus-visible {
  outline: 3px solid var(--w-pick);
  outline-offset: 3px;
}
.w-choice[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--w-sunk);
}
.w-choice[disabled]:hover { border-color: var(--w-edge) }

/* The mark: a 30px circle or box, filled when chosen. Big enough to see from
   across a desk, which the app's 16px tick was not. */
.w-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border: 2px solid var(--w-ink-3);
  border-radius: 50%;
  background: var(--w-paper);
  font-size: 17px;
  line-height: 1;
  color: transparent;
}
.w-choice.multi .w-mark { border-radius: 8px }
.w-choice.on .w-mark {
  background: var(--w-pick);
  border-color: var(--w-pick);
  color: var(--w-paper);
}

/* Both are spans inside the button's single grid cell, so they have to be told
   to be blocks — otherwise the name and its description run together on one
   line, which is exactly the wall of words this file exists to undo. */
.w-choice > span { min-width: 0 }
.w-choice-name {
  display: block;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}
.w-choice-note {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--w-ink-2);
}
.w-choice-tag { display: inline-block }
.w-choice-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.w-choice-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--w-ink-2);
}
.w-choice-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--w-good);
  font-weight: 700;
}
.w-choice-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--w-sunk);
  font-family: var(--w-mono);
  font-size: 13.5px;
  color: var(--w-ink-2);
}

.w-group { margin-top: 34px }
.w-group:first-child { margin-top: 0 }
.w-group-head {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-ink-3);
}
.w-group-note {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--w-ink-2);
}

/* --------------------------------------------------------------------------
   Plates
   -------------------------------------------------------------------------- */

.w-plates { display: grid; gap: 12px }
.w-plate {
  display: grid;
  grid-template-columns: 208px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-plate-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #f5f6f7, #e6e8eb);
  border: 1px solid var(--w-edge);
  border-radius: 12px;
  cursor: zoom-in;
  transition: border-color 0.15s ease;
}
.w-plate-art img { max-width: 100%; max-height: 100%; display: block }
.w-plate-name { font-size: 18px; font-weight: 600; line-height: 1.35 }
.w-plate-meta {
  margin-top: 4px;
  font-family: var(--w-mono);
  font-size: 14.5px;
  color: var(--w-ink-3);
}
.w-plate-needs {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--w-pick-soft);
  border: 1px solid var(--w-pick);
  font-size: 14px;
  font-weight: 600;
  color: var(--w-pick);
}
.w-plate-right { text-align: right; display: grid; gap: 9px; justify-items: end }
.w-plate-tools { display: flex; gap: 8px; align-items: center }

/* Advanced (2026-09-10): the per-plate popdown. The toggle sits with Remove;
   the panel is a fourth grid child spanning the card, under a hairline, in
   the same fields and chips the own-plate card uses. */
.w-adv-btn {
  padding: 8px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--w-pick);
  cursor: pointer;
  white-space: nowrap;
}
.w-adv-btn span { display: inline-block; transition: transform 0.15s ease }
.w-adv-btn:hover { border-color: var(--w-pick) }
.w-adv-btn.on span { transform: rotate(180deg) }
.w-adv-btn:focus-visible { outline: 3px solid var(--w-pick); outline-offset: 2px }
.w-plate.open { border-color: var(--w-pick) }
.w-adv {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--w-edge);
  display: grid;
  gap: 18px;
}
.w-adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 26px;
  align-items: start;
}
.w-adv-grid.four { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.w-adv-holes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 26px;
}
.w-adv .w-field select,
.w-adv .w-field input { width: 100%; min-height: 48px; font-size: 16.5px }
.w-adv .w-field > label { font-size: 16.5px; margin-bottom: 7px }
.w-adv .w-hint { margin: 0; font-size: 15px; color: var(--w-ink-3) }
.w-adv-xy {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.w-adv-xy span { font-size: 15px; color: var(--w-ink-3) }
.w-remove {
  padding: 8px 14px;
  background: none;
  border: 1px solid var(--w-ink-3);
  border-radius: 9px;
  font: inherit;
  font-size: 15px;
  color: var(--w-ink-2);
  cursor: pointer;
}
.w-remove:hover { border-color: var(--w-ink-2); color: var(--w-ink) }

/* The price, shown once, on the last screen. */
.w-price {
  margin-top: 28px;
  padding: 20px 22px 18px;
  border: 2px solid var(--w-edge);
  border-radius: 12px;
  font-size: 17px;
}
.w-price-t {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w-ink-3);
  margin-bottom: 10px;
}
.w-price-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.w-price-row span:last-child { font-family: var(--w-mono); font-weight: 600 }
.w-price-row.grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--w-edge);
  font-size: 19px;
}
.w-price-row.grand span:last-child { font-size: 26px; font-weight: 700 }
.w-price-note { margin: 12px 0 0; font-size: 15px; color: var(--w-ink-3) }
.w-shipping { margin: 24px 0; }
.w-ship-policy { margin: 0 0 14px; line-height: 1.5; }
.w-ship-status { margin: 12px 0; color: var(--w-ink-3); }
.w-ship-options { display: grid; gap: 10px; margin-top: 16px; }
.w-ship-option { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 16px; border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-card); color: var(--w-ink); font: inherit; text-align: left; cursor: pointer; }
.w-ship-option.on { border: 2px solid var(--w-pick); }
.w-ship-option span { font-family: var(--w-mono); font-size: 14px; }
.w-ship-error { color: var(--w-bad); margin: 12px 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.w-fields { display: grid; gap: 22px }
.w-fields.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }

.w-field > label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 16.5px;
  font-weight: 600;
}
.w-field > label span {
  font-size: 14px;
  font-weight: 500;
  color: var(--w-ink-3);
}
.w-field input,
.w-field textarea,
.w-field select {
  width: 100%;
  padding: 15px 16px;
  background: var(--w-paper);
  border: 2px solid var(--w-ink-3);
  border-radius: 12px;
  font-family: var(--w-font);
  font-size: 17px;
  color: var(--w-ink);
}
.w-field textarea { min-height: 96px; resize: vertical }
.w-field input:focus,
.w-field textarea:focus,
.w-field select:focus {
  outline: none;
  border-color: var(--w-pick);
  box-shadow: 0 0 0 4px var(--w-pick-soft);
}
.w-field.bad input,
.w-field.bad textarea { border-color: var(--w-bad) }
.w-field .w-err { display: none; margin-top: 7px; font-size: 15px; color: var(--w-bad) }
.w-field.bad .w-err { display: block }
.w-hint { margin-top: 7px; font-size: 15px; color: var(--w-ink-3) }

.w-card-block {
  padding: 22px 24px;
  margin-bottom: 16px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-card-title { font-size: 19px; font-weight: 600; margin: 0 0 3px }
.w-card-sub {
  margin: 0 0 18px;
  font-family: var(--w-mono);
  font-size: 14.5px;
  color: var(--w-ink-3);
}

.w-note {
  padding: 16px 18px;
  margin: 24px 0 0;
  background: var(--w-sunk);
  border-left: 4px solid var(--w-ink-3);
  border-radius: 0 10px 10px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--w-ink-2);
}
.w-note.warn { border-left-color: var(--w-warn) }

.w-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* --------------------------------------------------------------------------
   Footer — Back is always here, and it is a real button
   -------------------------------------------------------------------------- */

.w-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 510;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--w-foot);
  padding: 18px 28px;
  background: var(--w-paper);
  border-top: 1px solid var(--w-edge);
}
.w-foot-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.w-foot-spacer { flex: 1 }
.w-foot-tally {
  font-size: 16px;
  color: var(--w-ink-2);
  text-align: right;
  white-space: nowrap;
}
.w-foot-tally b {
  display: block;
  font-family: var(--w-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--w-ink);
}

.w-btn {
  flex: none;
  min-height: 56px;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--w-radius);
  background: var(--w-pick);
  box-shadow: var(--w-bevel);
  /* A token, not a theme-scoped override of .w-btn. `:root:not([data-theme=
     'light']) .w-btn` is (0,3,0) and outspecifies `.w-btn.back` at (0,2,0), so
     in dark the Back button's label came out #12151d on #17171a — measured
     1.02:1, i.e. the button read as an empty outline. */
  color: var(--w-on-pick);
  font-family: var(--w-font);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.w-btn:hover:not(:disabled) { opacity: .9 }
.w-btn:disabled { opacity: 0.45; cursor: not-allowed }
.w-btn:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 3px }

.w-btn.back {
  background: none;
  border-color: var(--w-ink-3);
  color: var(--w-ink);
  padding: 15px 26px;
}
.w-btn.back, .w-btn.plain { box-shadow: none }
.w-btn.back:hover:not(:disabled) { background: var(--w-sunk); opacity: 1 }

.w-btn.plain {
  background: none;
  border-color: transparent;
  color: var(--w-ink-2);
  font-size: 16px;
  font-weight: 500;
  min-height: 44px;
  padding: 10px 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.w-btn.plain:hover:not(:disabled) { color: var(--w-ink); opacity: 1 }

/* --------------------------------------------------------------------------
   Working / done
   -------------------------------------------------------------------------- */

.w-centre { text-align: center; padding-top: 40px }
.w-spin {
  width: 46px;
  height: 46px;
  margin: 0 auto 26px;
  border: 4px solid var(--w-edge);
  border-top-color: var(--w-pick);
  border-radius: 50%;
  animation: w-spin 0.9s linear infinite;
}
@keyframes w-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .w-spin { animation-duration: 3s }
  .w-progress-fill { transition: none }
}
.w-big-tick {
  width: 66px;
  height: 66px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--w-good);
  color: var(--w-paper);
  font-size: 34px;
}
.w-steps-log { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px }
.w-steps-log li { font-size: 17px; color: var(--w-ink-3) }
.w-steps-log li.on { color: var(--w-ink); font-weight: 600 }
.w-steps-log li.was { color: var(--w-good) }
.w-steps-log li.was::before { content: '✓  ' }

.w-recap {
  margin: 26px auto 0;
  max-width: 520px;
  padding: 20px 22px;
  background: var(--w-sunk);
  border-radius: var(--w-radius);
  font-size: 16.5px;
  line-height: 1.7;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --w-base: 16px; --w-foot: 84px }
  .w-top { padding: 14px 18px }
  .w-progress-track { width: 84px }
  .w-body { padding: 30px 18px calc(var(--w-foot) + 34px) }
  .w-q { font-size: 27px }
  .w-sub { font-size: 17px }
  .w-choice { padding: 17px 18px; gap: 13px }
  .w-plate { grid-template-columns: 124px 1fr; gap: 14px }
  .w-plate-right { grid-column: 1 / -1; justify-items: start; text-align: left }
  .w-plate-tools { width: 100%; justify-content: space-between }
  .w-adv-grid, .w-adv-grid.four, .w-adv-holes { grid-template-columns: 1fr }
  .w-plate-art { height: 70px; padding: 5px 7px; border-radius: 10px }
  .w-foot { padding: 13px 16px; gap: 10px }
  .w-btn { padding: 14px 20px; font-size: 17px; min-height: 52px }
  .w-btn.back { padding: 14px 17px }
  .w-foot-tally { display: none }
  .w-fields.two { grid-template-columns: 1fr }
}

/* --------------------------------------------------------------------------
   Plate artwork, quantity, picker, finish  (added 2026-08-20)
   -------------------------------------------------------------------------- */

/* The art box holds an inline SVG now rather than an <img>, so that the corner
   radius, the bevel band and the drill holes can be drawn over the artwork. */
.w-plate-art > svg,
.w-live-art > svg,
.w-finish-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.w-plate-art:empty::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg, var(--w-sunk), var(--w-sunk) 6px, var(--w-paper) 6px, var(--w-paper) 12px
  );
  opacity: 0.5;
}

.w-plate.on { border-color: var(--w-pick); background: var(--w-pick-soft) }

/* − n + */
.w-step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--w-ink-3);
  border-radius: 10px;
  overflow: hidden;
  background: var(--w-card);
}
.w-step button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.w-step button:hover:not(:disabled) { background: var(--w-sunk) }
.w-step button:disabled { opacity: 0.35; cursor: not-allowed }
.w-step span {
  min-width: 34px;
  text-align: center;
  font-family: var(--w-mono);
  font-size: 17px;
  font-weight: 600;
}

/* Outline, not filled. `.w-btn` on its own is the homepage's filled button —
   "the single loud element" — and the picker repeats this one down 47 catalogue
   rows. Forty-seven loud elements is the wall the wizard exists to undo, and it
   would out-shout the plate artwork, which is the only thing on the page that
   is allowed to be red. So a row action looks like the Remove beside it, and
   the footer keeps the filled one. */
.w-btn.small {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 16px;
  border-radius: 10px;
  background: none;
  border-color: var(--w-ink-3);
  box-shadow: none;
  color: var(--w-ink);
}
.w-btn.small:hover:not(:disabled) { background: var(--w-sunk); opacity: 1 }

/* Live preview beside the fields it belongs to */
.w-live {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 18px;
  align-items: center;
  margin: 4px 0 20px;
  padding: 16px;
  background: var(--w-sunk);
  border-radius: 11px;
}
.w-live-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--w-edge);
  border-radius: 8px;
}
.w-live-cap { margin: 0; font-size: 15px; line-height: 1.55; color: var(--w-ink-2) }

/* The diagram is six boxes of the customer's own system — it needs the room a
   nameplate does not, so it takes the whole width of its card and keeps the
   plate's own 11 × 8.5 proportions rather than a fixed strip. A drawing the
   customer cannot read is a drawing they cannot check, and checking it is the
   only reason it is on this screen. */
.w-live:has(.w-live-art.wide) { grid-template-columns: 1fr }
.w-live-art.wide {
  height: auto;
  aspect-ratio: 11 / 8.5;
  max-height: 62vh;
}

/* How big the lettering actually came out.
 *
 * Said on every plate, not only the ones in trouble: a number that is always
 * there is read as a fact about the plate, where one that appears only when
 * something is wrong is read as an alarm — and the whole point is that a
 * customer can tell, before they buy it, that what they typed fits. */
.w-fit {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--w-ink-3);
}
.w-fit:empty { display: none }
/* `--w-bad` is the interface's one hue and it is already what a wrong field
   uses. Lettering too small to engrave is the same kind of fact: something the
   customer has to change before this can be made. */
.w-fit.bad { color: var(--w-bad); font-weight: 600 }

/* The same answer on a plate the customer worded themselves, where it sits
   under the picture rather than beside it. */
.w-fit-warn {
  margin: 9px 0 0;
  padding: 9px 11px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  font-weight: 600;
  color: var(--w-bad);
  background: var(--w-sunk);
  border-radius: 8px;
}

/* Finish */
.w-finish { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start }
.w-finish-preview { position: sticky; top: 8px }
.w-finish-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-finish-cap {
  margin: 12px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.w-finish-cap span { display: block; font-weight: 400; color: var(--w-ink-3) }
.w-finish-opts .w-group:first-child { margin-top: 0 }
.w-finish .w-choices { gap: 10px }
.w-finish .w-choice { padding: 15px 18px; min-height: 0 }

@media (max-width: 900px) {
  .w-finish { grid-template-columns: 1fr; gap: 22px }
  .w-finish-preview { position: static }
  .w-finish-art { height: 168px }
  .w-live { grid-template-columns: 1fr; gap: 12px }
  .w-live-art { height: 132px }
  /* on a phone it keeps its proportions too — it simply gets narrower */
  .w-live-art.wide { height: auto; max-height: none }
}

/* The welcome screen's two choices are actions, not a selection — the mark is
   an arrow that leads somewhere rather than a tick that has been set. */
#sl-wiz .w-choice[data-start] .w-mark {
  border-color: var(--w-pick);
  color: var(--w-pick);
  font-size: 15px;
}
#sl-wiz .w-choice[data-start]:hover {
  border-color: var(--w-pick);
  background: var(--w-pick-soft);
}

/* --------------------------------------------------------------------------
   Plates the customer words themselves  (added 2026-08-20, v4.3)

   One card per plate: numbered lines on the left, the plate as it will be
   engraved on the right, and its size, finish and quantity underneath. Every
   control is at least 44px so it works on a phone, and the card never becomes
   narrower than one column of readable fields.
   -------------------------------------------------------------------------- */

.w-own-card {
  padding: 20px 22px 18px;
  margin-bottom: 16px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-own-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.w-own-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.w-own-body { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start }
.w-own-fields { display: grid; gap: 14px }

/* A line and how big it is, side by side — the size belongs to that line and
   reads as part of it rather than as another control further down. */
.w-line { display: grid; grid-template-columns: 1fr 132px; gap: 12px; align-items: end }
.w-line-size select { padding-left: 12px; padding-right: 12px }
.w-own-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--w-edge);
  border-radius: 10px;
}
.w-own-art > svg { display: block; max-width: 100%; max-height: 100% }
.w-own-cap {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--w-ink-3);
}

/* A quiet text button — "+ Add another line" is a small action inside a form,
   not a decision, so it does not get a filled button's weight. */
.w-linkbtn {
  justify-self: start;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--w-pick);
  font-family: var(--w-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.w-linkbtn:hover { text-decoration: underline }

.w-own-opts {
  display: grid;
  /* lettering · plate size · finish · how many. The finish chips need the most
     room, so they get the loose column; the two selects get enough to show
     their longest option rather than clipping it. */
  grid-template-columns: minmax(210px, 1fr) minmax(180px, 0.8fr) minmax(280px, 1.5fr) auto;
  gap: 20px 26px;
  align-items: start;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--w-edge);
}
.w-own-optlabel {
  display: block;
  margin-bottom: 7px;
  font-size: 16.5px;
  font-weight: 600;
}
.w-chips { display: flex; flex-wrap: wrap; gap: 8px }
.w-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  background: var(--w-card);
  border: 2px solid var(--w-ink-3);
  border-radius: 12px;
  font-family: var(--w-font);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--w-ink);
  cursor: pointer;
}
.w-chip:hover { border-color: var(--w-pick) }
.w-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--w-ink-3);
  border-radius: 6px;
  font-size: 13px;
  color: transparent;
}
.w-chip.on { border-color: var(--w-pick); background: var(--w-pick-soft) }
.w-chip.on .w-chip-mark {
  border-color: var(--w-pick);
  background: var(--w-pick);
  /* the same token the picked tick uses — a light mark in dark and the
     other way round; see the note by .w-btn.back */
  color: var(--w-on-pick);
}

@media (max-width: 1180px) {
  .w-own-opts { grid-template-columns: repeat(2, minmax(200px, 1fr)) }
  .w-own-finish { grid-column: 1 / -1 }
}

@media (max-width: 900px) {
  .w-own-body { grid-template-columns: 1fr; gap: 16px }
  .w-own-art { height: 132px }
  .w-own-opts { grid-template-columns: 1fr; gap: 18px; align-items: start }
}

@media (max-width: 560px) {
  /* 132px for the size plus a readable line will not fit a phone; stack them
     rather than squeeze both. */
  .w-line { grid-template-columns: 1fr; gap: 8px }
}

/* --------------------------------------------------------------------------
   8 · The plate that could not be drawn

   `tagSvg()` and `plateSvg()` return '' rather than throwing, so a renderer
   that chokes on one plate does not take the screen down with it. That left an
   empty art box — and a blank white rectangle is indistinguishable from a plate
   that is not in the order, which on the review screen is the one thing this
   wizard must never say. Every art box now falls back to the wording as text.

   Red on white in both themes, like the artwork it stands in for: the art boxes
   are `background:#fff` on purpose, because that IS the product.
   -------------------------------------------------------------------------- */

.w-plate-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 4px 6px;
  overflow: hidden;
  color: #b3261e;
  font-family: var(--w-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.w-plate-text .lead { font-size: 13px; font-weight: 700 }
.w-plate-text span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w-finish-art .w-plate-text { font-size: 15px }
.w-finish-art .w-plate-text .lead { font-size: 19px }
.w-own-art .w-plate-text,
.w-live-art .w-plate-text { font-size: 13px }
.w-own-art .w-plate-text .lead,
.w-live-art .w-plate-text .lead { font-size: 16px }

/* --------------------------------------------------------------------------
   9 · "It may be in your junk folder"

   Quotes leave a Microsoft 365 mailbox with two PDFs attached, which is the
   shape of message a filter holds back. Sits above the reference on the sent
   screen, quiet but not ignorable — a hairline and a mark rather than a filled
   warning box, which is the site's own idiom (see the claim note in the job
   dialog). Not an error colour: nothing has gone wrong.
   -------------------------------------------------------------------------- */

.w-junk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 520px;
  margin: 24px auto 0;
  padding: 15px 18px;
  border: 1px solid var(--w-ink-3);
  border-radius: var(--w-radius);
  font-size: 15.5px;
  line-height: 1.6;
  text-align: left;
  color: var(--w-ink-2);
}
.w-junk b { color: var(--w-ink) }
.w-junk-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--w-ink-3);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--w-ink);
}

@media (max-width: 560px) {
  .w-junk { font-size: 15px; padding: 14px 15px; gap: 10px }
}

/* --------------------------------------------------------------------------
   The door (2026-09-15) — sign in with Google, or an email and password.
   Jake: "make it so they have to sign into google or make an account to use
   the solarlabels builder". Same fields and buttons as the details screen; the
   only new shapes are the Google button's box, the "or" rule and the account
   chip in the header.
   -------------------------------------------------------------------------- */

.w-auth { max-width: 460px; margin-top: 28px }
.w-gsi { min-height: 44px; display: flex; justify-content: flex-start }
.w-gsi > div { max-width: 100% }
.w-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--w-ink-3);
  font-size: 15px;
}
.w-or::before, .w-or::after { content: ''; flex: 1; height: 1px; background: var(--w-edge) }
.w-auth-go { width: 100%; margin-top: 22px }
.w-auth-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 2px solid var(--w-bad);
  border-radius: 12px;
  color: var(--w-bad);
  font-size: 16px;
  line-height: 1.45;
}
.w-auth-notice {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 460px;
}
.w-auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 12px 0 0 -14px;
}

.w-account[hidden] { display: none }
.w-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 15px;
  color: var(--w-ink-2);
}
.w-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.w-account-out {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--w-ink-3);
  border-radius: 999px;
  background: none;
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.w-account-out:hover { background: var(--w-sunk) }
@media (max-width: 640px) {
  .w-account-name { display: none }
}

/* The downloads on the last screens (2026-09-17): the quote and the proof,
   saved from the browser whether or not the email went out. */
.w-dl { max-width: 520px; margin: 26px auto 0; text-align: center }
.w-dl-lead { margin: 0 0 12px; font-size: 15px; color: var(--w-ink-2) }
.w-dl-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.w-dl-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none }
.w-dl-mark { font-weight: 700 }
@media (max-width: 480px) {
  .w-dl-row { flex-direction: column }
  .w-dl-btn { justify-content: center }
}

/* ------------------------------------------------------------------ *
 * The single-line diagram wizard — ported from the lamacoid builder's
 * "Solar kit" guided wizard (2026-09-21). A question badge and its own
 * bar above the question, the plate so far beside it, in the wizard's
 * own chips, cards and fields.
 * ------------------------------------------------------------------ */

.w-wiz-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
}
.w-wiz-step {
  font-size: 15px;
  font-weight: 600;
  color: var(--w-ink-2);
  white-space: nowrap;
}
.w-wiz-track {
  flex: 1 1 120px;
  height: 8px;
  border-radius: 999px;
  background: var(--w-sunk);
  overflow: hidden;
}
.w-wiz-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--w-pick);
  transition: width 0.3s ease;
}
.w-wiz-head .w-linkbtn { margin-left: auto }

.w-wiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}
.w-wiz .w-q { font-size: 28px }
.w-wiz .w-sub { margin-bottom: 22px }
.w-wiz-side { position: sticky; top: 8px }
.w-wiz-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-wiz-art > svg { display: block; width: 100%; height: auto }
.w-wiz-cap {
  margin: 12px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
}
.w-wiz-cap span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  color: var(--w-ink-3);
}
.w-field .w-chips,
.w-field .w-choices { margin-top: 2px }

/* the full form's picture is a whole drawing, not a strip */
.w-live.diagram { grid-template-columns: 1fr }
.w-live.diagram .w-live-art { height: auto; min-height: 200px }
.w-live.diagram .w-live-art > svg { height: auto }

@media (max-width: 900px) {
  .w-wiz { grid-template-columns: 1fr }
  .w-wiz-side { position: static }
}

/* --------------------------------------------------------------------------
   Logo (2026-09-22) — the customer's own mark on their plates
   -------------------------------------------------------------------------- */
.w-logo-drop {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 24px;
  background: var(--w-card);
  border: 2px dashed var(--w-edge);
  border-radius: var(--w-radius);
}
.w-logo-drop p { margin: 0; font-size: 16px; color: var(--w-ink-2) }
.w-logo-drop.busy { font-size: 16px; color: var(--w-ink-2) }
.w-logo-pick { display: inline-flex; align-items: center; cursor: pointer }
.w-logo-pick:focus-within { outline: 3px solid var(--w-ink); outline-offset: 3px }
.w-logo-have {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-logo-mark svg { display: block; width: 100%; height: auto; max-height: 140px }
.w-logo-have-text { display: grid; gap: 6px; min-width: 0 }
.w-logo-have-text b { overflow-wrap: anywhere }
.w-logo-have-text > span { font-size: 15px; color: var(--w-ink-3) }
.w-logo-have-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.w-logo-have-acts .w-btn { min-height: 44px; padding: 10px 18px }
.w-logo-err { margin: 12px 0 0; font-size: 16px; color: var(--w-bad) }
.w-logo-range { width: 100%; margin: 6px 0 0; accent-color: var(--w-pick) }
.w-logo-head { margin-top: 30px }
.w-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.w-logo-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-logo-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--w-edge);
  border-radius: 10px;
}
.w-logo-art > svg { display: block; width: 100%; height: 100% }
.w-logo-card.off .w-logo-art { opacity: .6 }
.w-logo-meta { display: grid; gap: 3px; font-size: 15px; line-height: 1.4 }
.w-logo-meta > span { color: var(--w-ink-3) }
.w-logo-fit.none { color: var(--w-ink-2); font-style: italic }
.w-logo-card .w-btn.small { justify-self: start }
/* 2026-09-25: the chosen plate, large, with its controls beside it; the
   cards below are buttons that choose which plate that is */
.w-logo-stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
  gap: 22px;
  align-items: start;
  margin-top: 24px;
  padding: 18px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-logo-art.big { height: 300px }
.w-logo-side { display: grid; gap: 14px; align-content: start }
.w-logo-side .w-btn { justify-self: start }
.w-logo-side .w-logo-meta b { font-size: 18px }
.w-logo-size .w-group-head { margin: 0 }
button.w-logo-card {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.w-logo-card:hover { border-color: var(--w-ink-3) }
button.w-logo-card:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 3px }
.w-logo-card.cur { border: 2px solid var(--w-pick); padding: 13px }
@media (max-width: 900px) {
  .w-logo-stage { grid-template-columns: 1fr }
  .w-logo-art.big { height: 220px }
}
@media (max-width: 600px) {
  .w-logo-have { grid-template-columns: 1fr }
  .w-logo-mark svg { max-width: 220px }
  .w-logo-grid { grid-template-columns: 1fr }
}

/* --------------------------------------------------------------------------
   Import & make your own labels (2026-09-24) — a spreadsheet, arranged and
   put up to code, and the LLamacoid Builder in a frame of its own
   -------------------------------------------------------------------------- */
.w-imp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}
.w-imp-card { display: grid; align-content: start; gap: 14px; margin: 0 }
.w-imp-card .w-sub { margin: 0; font-size: 16px }
.w-imp-card .w-note { margin: 0 }
.w-imp-card .w-btn { justify-self: start }
.w-imp-drop {
  display: grid;
  gap: 6px;
  padding: 26px 22px;
  background: var(--w-paper);
  border: 2px dashed var(--w-edge);
  border-radius: var(--w-radius);
  cursor: pointer;
  text-align: center;
}
.w-imp-drop:hover,
.w-imp-drop.over { border-color: var(--w-ink-3); background: var(--w-sunk) }
.w-imp-drop:focus-within { outline: 3px solid var(--w-ink); outline-offset: 3px }
.w-imp-drop.busy { cursor: progress; color: var(--w-ink-2); font-size: 16px }
.w-imp-drop-name { font-size: 19px; font-weight: 600 }
.w-imp-drop-note { font-size: 15px; color: var(--w-ink-3); overflow-wrap: anywhere }

.w-imp-sum {
  margin: 22px 0 14px;
  padding: 16px 18px;
  font-size: 17px;
  line-height: 1.5;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-left: 4px solid var(--w-pick);
  border-radius: var(--w-radius);
}
.w-imp-sheet { max-width: 420px; margin-bottom: 14px }

.w-imp-colbox { margin: 0 0 16px }
.w-imp-colbox > summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 0;
}
.w-imp-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.w-imp-col {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
  min-width: 0;
}
.w-imp-col label { display: grid; gap: 2px; font-size: 15px; min-width: 0 }
.w-imp-col label b { overflow-wrap: anywhere }
.w-imp-col label span {
  font-family: var(--w-mono);
  font-size: 13px;
  color: var(--w-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-imp-col select,
.w-imp-row select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--w-ink);
  /* background-color, not the shorthand: the studio's select rule draws its
     arrow as a background-image */
  background-color: var(--w-paper);
  border: 1px solid var(--w-edge);
  border-radius: 10px;
}
.w-imp-card a,
.w-imp-card a:visited { color: var(--w-ink); text-underline-offset: 3px }
.w-imp-again { margin-bottom: 12px }

.w-imp-rows {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.w-imp-row {
  display: grid;
  grid-template-columns: 44px 1fr 220px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--w-card);
  border: 1px solid var(--w-edge);
  border-radius: var(--w-radius);
}
.w-imp-row.off { opacity: .55 }
.w-imp-n {
  font-family: var(--w-mono);
  font-size: 14px;
  color: var(--w-ink-3);
  text-align: right;
}
.w-imp-text { min-width: 0 }
.w-imp-text b { font-size: 17px; overflow-wrap: anywhere }
.w-imp-qty { font-family: var(--w-mono); font-size: 15px; color: var(--w-ink-2) }
.w-imp-text p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--w-ink-2) }

.w-imp-drawn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.w-imp-drawn li { font-size: 16px; overflow-wrap: anywhere }
.w-imp-drawn span { color: var(--w-ink-3); font-size: 15px }

@media (max-width: 900px) {
  .w-imp-grid { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .w-imp-row { grid-template-columns: 1fr; gap: 8px }
  .w-imp-n { text-align: left }
}

/* the LLamacoid Builder, full screen over the wizard */
html.sl-lmc-open,
html.sl-lmc-open body { overflow: hidden }
.w-lmc {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #0d0d0d;
}
.w-lmc-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  font-family: var(--w-font);
  color: var(--w-ink);
  background: var(--w-paper);
  border-bottom: 1px solid var(--w-edge);
}
.w-lmc-title { font-size: 18px; font-weight: 600 }
.w-lmc-hint { font-size: 15px; color: var(--w-ink-2) }
.w-lmc-frame { width: 100%; height: 100%; border: 0; background: #0d0d0d }

/* which province's plates an import was checked against — shown, never asked */
.w-imp-jur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 16px;
}
.w-imp-jur p { margin: 0; flex: 1 1 320px; font-size: 16px; color: var(--w-ink-2) }
.w-imp-jur .w-field { margin: 0; flex: 0 1 280px }
.w-imp-jur select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--w-ink);
  background-color: var(--w-paper);
  border: 1px solid var(--w-edge);
  border-radius: 10px;
}
.w-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Phone: two long buttons in the foot (the sent screen's "Back to
   solarlabels.ca" and "Build another kit") ran off the right edge at 390 px
   (2026-09-25). They share the row and shrink to fit, text wrapping inside. */
@media (max-width: 480px) {
  .w-foot-inner .w-btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; padding-left: 12px; padding-right: 12px }
  .w-foot-inner .w-foot-spacer { display: none }
}

/* --------------------------------------------------------------------------
   The single-line diagram from the builder's Solar kit setup (2026-09-25)
   -------------------------------------------------------------------------- */
.w-ol-done { display: grid; gap: 10px; justify-items: start; max-width: 640px }
.w-ol-done .w-ol-art { width: 100%; max-width: 640px }
.w-ol-done .w-card-title, .w-ol-done .w-card-sub { margin: 0 }

/* --------------------------------------------------------------------------
   Plate thumbnails and the plate preview  (added 2026-09-25)

   Jake asked for the list's plates to "look a little bit better" and to open
   "a mini preview … that they can click off or zoom in". The thumbnail is a
   bench the plate sits on — a quiet neutral well, not a white card — and the
   plate itself is drawn dressed (shadow and sheen, see plateSvg) in the same
   finish as the site's illustrations. Red stays on the plate only.
   -------------------------------------------------------------------------- */

:root[data-theme='dark'] .w-plate-art {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .w-plate-art {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  }
}
.w-plate-art:hover { border-color: var(--w-ink-3) }
.w-plate-art:focus-visible { outline: 3px solid var(--w-pick); outline-offset: 2px }
/* a magnifier hanging off the corner — never over the lettering — says "this opens" — on hover, and always on touch */
.w-plate-art:not(:empty)::before {
  content: '';
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M15 15l4.5 4.5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E")
    center / 15px no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.w-plate-art:hover::before,
.w-plate-art:focus-visible::before { opacity: 1 }
@media (hover: none) {
  .w-plate-art:not(:empty)::before { opacity: 0.85; width: 22px; height: 22px; background-size: 13px }
}
/* the preview — always dark, like any lightbox, in either theme */
html.w-pv-open { overflow: hidden }
.w-pv {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(8, 10, 12, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f2f2f0;
  font-family: var(--w-font);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.w-pv.in { opacity: 1 }
.w-pv-stage {
  overflow: auto;
  touch-action: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.w-pv-stage::-webkit-scrollbar { display: none }
.w-pv-pan {
  box-sizing: border-box;
  width: max-content;
  height: max-content;
  min-width: 100%;
  min-height: 100%;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.w-pv-art { flex: none; cursor: zoom-in; transform: scale(0.97); transition: transform 0.18s ease }
.w-pv.in .w-pv-art { transform: none }
.w-pv-art > svg { display: block; width: 100%; height: 100% }
.w-pv-stage.zoomed .w-pv-art { cursor: grab }
.w-pv-stage.zoomed ~ .w-pv-hint { opacity: 0 }
.w-pv-stage.dragging .w-pv-art { cursor: grabbing }
.w-pv-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.w-pv-cap { min-width: 0 }
.w-pv-cap b { display: block; font-size: 17px; font-weight: 600; line-height: 1.35 }
.w-pv-cap span {
  display: block;
  margin-top: 2px;
  font-family: var(--w-mono);
  font-size: 13.5px;
  color: rgba(242, 242, 240, 0.62);
}
.w-pv-tools { display: flex; align-items: center; gap: 6px }
.w-pv-tools button,
.w-pv-close {
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.w-pv-tools .w-pv-fit { padding: 0 15px; font-size: 15px; font-weight: 600 }
.w-pv-tools button:hover:not(:disabled),
.w-pv-close:hover { background: rgba(255, 255, 255, 0.13) }
.w-pv-tools button:disabled { opacity: 0.35; cursor: default }
.w-pv-tools button:focus-visible,
.w-pv-close:focus-visible { outline: 3px solid #f2f2f0; outline-offset: 2px }
.w-pv-pct {
  min-width: 54px;
  text-align: center;
  font-family: var(--w-mono);
  font-size: 14px;
  color: rgba(242, 242, 240, 0.7);
}
.w-pv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 28px;
  background: rgba(20, 22, 26, 0.7);
}
.w-pv-hint {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 13.5px;
  white-space: nowrap;
  color: rgba(242, 242, 240, 0.62);
  pointer-events: none;
  transition: opacity 0.15s ease;
}
@media (hover: none), (max-width: 720px) {
  .w-pv-hint { display: none }
  .w-pv-pan { padding: 12px }
  .w-pv-bar { padding: 12px 16px 16px }
}
@media (prefers-reduced-motion: reduce) {
  .w-pv, .w-pv-art { transition: none }
}

/* 2026-09-26 — the example-figures check sits above the diagram plate, so
   a Continue that will not press always has its reason in view */
.w-ol-check { margin: 0 0 18px; max-width: 760px }
.w-ol-check.ok { border-left-color: #1f9d55 }
.w-ol-done { max-width: 520px }
.w-ol-done .w-ol-art { max-width: 520px }