/* Patch Design Studio wizard (#1462 S3). Look follows the clickable mockup: 6-step pill bar, image on a checkerboard left, nudge and choices right,
   Back and a big green Next at the bottom right. One column under 760 px with 16 px gutters. */
:root {
  --bg: #EEF1F4; --ink: #16202B; --ink2: #4A5868; --ink3: #3A4756; --line: #D5DBE2; --line2: #C9D1DA;
  --blue: #0052C3; --blue-bg: #E6EFFB; --btn-r: 4px; --wordmark: #4D535D;   /* the shop's brand blue (its Get Started buttons), button radius 3.5-4 px, wordmark gray, read 2026-10-20 */ --green: #1B7A43; --green-bg: #F0F8F3; --amber: #7A4A00; --amber-bg: #FFF2DB; --red: #8A1F1F; --danger: #B3261E; --danger-ink: #fff;
  --surface: #fff; --scrim: rgba(255,255,255,.94); --check: #E6EAEE; --blue-ink: #0052C3; --ok-bg: #E5F4EA; --ok-ink: #14532D; --err-bg: #FBE7E7;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --head: 'Poppins', 'Source Sans 3', system-ui, sans-serif;
}
/* Dark theme (#1462, Gruus 2026-10-20): the same tokens redefined; the brand blue stays the fill of buttons and the active pill, links and tags read in a lighter blue.
   The step files inject their own light colors; `html .x` below wins over them without touching those files. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0E141B; --ink: #E8EDF3; --ink2: #AAB6C4; --ink3: #C2CCD8; --line: #26323F; --line2: #3A4859;
    --blue-bg: #14284A; --blue-ink: #7FAEF7; --green: #1F7F49; --green-bg: #13271C; --amber: #F0C06A; --amber-bg: #33270E; --red: #FF9C9C; --danger: #F2776F; --danger-ink: #2A0A08;
    --surface: #17212C; --scrim: rgba(23,33,44,.94); --check: #232E3A; --wordmark: #B7C0CC; --ok-bg: #163524; --ok-ink: #9BE3B5; --err-bg: #3A1B1B;
  }
  html .sa-row, html .rd-dlg, html .rd-o { background: var(--surface); }
  html .s7bar { background: var(--check); }
  html .s7chk { background: var(--bg); }
  html .s7chk.ok .m { color: var(--ok-ink); }
  html .s8row { border-bottom-color: var(--line); }
  html .s8nx { border-bottom-color: var(--line); }
  html .s8dt span, html .s8dl span { background: var(--surface); }
  html .s8ok { background: var(--ok-bg); color: var(--ok-ink); }
  .next:disabled { background: var(--line2); color: var(--ink2); }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
button { font-family: inherit; color: inherit; }
a { color: var(--blue-ink); }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand .logo { width: 32px; height: 32px; flex: none; display: block; }
.bt { display: flex; align-items: center; gap: 14px; }
.wm { font-family: var(--head); font-size: 18px; letter-spacing: .02em; color: var(--wordmark); }
.pt { margin: 0; padding-left: 14px; border-left: 1px solid var(--line2); font-family: var(--head); font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reset { flex: none; padding: 8px 14px; border-radius: var(--btn-r); border: 1px solid var(--danger); background: var(--danger); color: var(--danger-ink); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.reset:hover:not(:disabled) { filter: brightness(.92); }
.reset:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.reset:disabled { opacity: .45; cursor: not-allowed; }
.pills { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pill { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: var(--btn-r); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line2); background: var(--check); color: var(--ink2); white-space: nowrap; }   /* future: gray */
.pill .n { font-family: var(--mono); font-size: 12px; }
.pill.done { background: var(--green); border-color: var(--green); color: #fff; }   /* done: green, current: blue (S12c) */
.pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill:disabled { opacity: .55; cursor: not-allowed; }

/* Reset adds a button to the bar: below 1400 px the bar is compact so the five tabs, the design number chip and Reset still fit at 1280; what still does not fit scrolls inside the tabs, never the page. */
@media (min-width: 761px) and (max-width: 1400px) {
  .top { padding: 12px 20px; gap: 10px; }
  .bt { gap: 10px; }
  .wm { font-size: 16px; }
  .pt { padding-left: 10px; font-size: 17px; }
  .tools { gap: 8px; }
  .pills { gap: 4px; overflow-x: auto; padding: 3px 2px; min-width: 0; }
  .pill { padding: 8px 9px; gap: 5px; }
  .reset { padding: 8px 12px; }
}
.stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: minmax(0, 1fr) auto; }
.left { grid-column: 1; grid-row: 1 / span 2; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.right { grid-column: 2; grid-row: 1; background: var(--surface); border-left: 1px solid var(--line); padding: 26px 28px 8px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }
.navbar { grid-column: 2; grid-row: 2; background: var(--surface); border-left: 1px solid var(--line); padding: 8px 28px 26px; display: flex; flex-direction: column; }   /* no flex gap: the empty Turnstile slot would add one (see #turnstile) */
.navbar .block { margin-bottom: 8px; }
.nav { display: flex; gap: 10px; }

.lhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 34px; }
.lhead .lbl { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--ink2); text-transform: uppercase; }
.seg { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--btn-r); padding: 3px; }
.seg button { padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; background: var(--surface); }
.seg button.on { background: var(--blue); color: #fff; }
.linkbtn { background: none; border: none; color: var(--blue-ink); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 6px; }

.board { flex: 1; min-height: 0; border-radius: 14px; background-color: var(--surface); background-image: linear-gradient(45deg, var(--check) 25%, transparent 25%), linear-gradient(-45deg, var(--check) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--check) 75%), linear-gradient(-45deg, transparent 75%, var(--check) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 24px; overflow: hidden; }
.board.over { outline: 3px dashed var(--blue); outline-offset: -8px; }
.rs { display: flex; flex-direction: column; gap: 8px; }
.rs h2 { margin: 0; font-family: var(--head); font-size: 16px; font-weight: 500; }
.rs-cap { font-family: var(--mono); font-size: 12px; color: var(--ink2); margin: 0; }
.rs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 10px 6px 6px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer; }
.rs-row:hover:not(:disabled) { border-color: var(--blue); }
.rs-row:disabled { opacity: .6; cursor: progress; }
.rs-img { flex: none; width: 56px; height: 56px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background-color: var(--surface); background-image: linear-gradient(45deg, var(--check) 25%, transparent 25%), linear-gradient(-45deg, var(--check) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--check) 75%), linear-gradient(-45deg, transparent 75%, var(--check) 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
.rs-img img { max-width: 100%; max-height: 100%; display: block; }
.rs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-id { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-sub { font-size: 13px; color: var(--ink2); }
.rs-mark { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--blue-bg); color: var(--blue-ink); white-space: nowrap; }
.rs-cart { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); }
.bwrap { flex: 1; min-height: 0; display: flex; gap: 14px; }   /* the board, with the input figure: two equal halves from step 2 on (S12e), the input small above on a phone */
.bwrap .board { flex: 1 1 0; min-width: 0; }
.left.two .bwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }   /* a grid, not flex: the board's padding must not make its half larger */
.infig { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.infig .ib { flex: 1; min-height: 0; position: relative; overflow: hidden; border-radius: 14px; background-color: var(--surface); background-image: linear-gradient(45deg, var(--check) 25%, transparent 25%), linear-gradient(-45deg, var(--check) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--check) 75%), linear-gradient(-45deg, transparent 75%, var(--check) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.infig img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; }
.infig figcaption { display: none; font-size: 12px; font-weight: 600; color: var(--ink2); }
.infig .ob, .left.two .board::before { position: absolute; top: 10px; left: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--scrim); border: 1px solid var(--line2); font-size: 12px; font-weight: 600; color: var(--ink2); pointer-events: none; white-space: nowrap; }
.left.two .board::before { content: attr(data-label); }
.left.two #previewLabel { display: none; }
@media (min-width: 900px) { .left.two .bwrap:has(.s8pv) .board { align-items: flex-start; padding-top: 48px; padding-bottom: 244px; } .left.two .bwrap:has(.s8pv) .infig img { top: 70px; height: calc(100% - 70px - 244px); object-position: center top; } }   /* the proof (Gruus 2026-11-03): designs at the top, the edge zoom card in the space below */
.doors { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drop .dk { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-ink); }
.door { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; width: 100%; max-width: 440px; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--line2); background: var(--scrim); color: var(--ink); text-decoration: none; cursor: pointer; font-size: 13px; line-height: 1.35; }
.door b { font-family: var(--head); font-size: 15px; font-weight: 500; }
.door span { color: var(--ink2); }
.door:hover { border-color: var(--blue); }
/* #1507 option C: the two doors are ONE panel of two equal halves with an "or" between them; at 390 px the halves stack and the "or" line runs across */
.doors:has(.split) { align-items: stretch; justify-content: center; max-width: 920px; margin: 0 auto; }
.split { width: 100%; background: var(--scrim); border: 1.5px solid var(--line2); border-radius: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); text-align: left; }
.split.solo { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0 auto; }
.split .half { padding: 26px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: none; border-radius: 12px; }
.split .half.drop { margin: 10px; border: 1.5px dashed var(--line2); background: transparent; justify-content: center; }
.split .half h2 { margin: 0; font-family: var(--head); font-size: 20px; font-weight: 500; text-align: left; }
.split .half p { text-align: left; }
.split .half .dk { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-ink); }
.split .or { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding: 18px 0; }
.split .or i { width: 1px; background: var(--line2); }
.split .or span { font: 600 13px/1 var(--head); color: var(--ink2); background: var(--surface); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 10px; }
.split .ask { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.split .ask input { flex: 1 1 150px; min-width: 0; font: 400 15px var(--body); padding: 11px 12px; border: 1.5px solid var(--line2); border-radius: var(--btn-r); background: var(--surface); color: var(--ink); }
.split .ask input:focus-visible, .split .chip:focus-visible, .split .bigbtn:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.split .ask .bigbtn { padding: 11px 18px; flex: none; }
.split .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.split .chip { text-align: left; font-family: var(--body); color: var(--ink); line-height: 1.3; max-width: 100%; }
.split .chip:hover { border-color: var(--blue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .doors.has-resume .split .chips { display: none; }
  .board:has(.split) { height: auto; min-height: clamp(240px, 40vh, 480px); padding: 12px; }   /* the stacked panel is taller than the board's fixed phone height */
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .or { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; }
  .split .or i { width: auto; height: 1px; }
  .split .half { padding: 12px 14px; gap: 6px; }
  .split .half.drop { margin: 6px; }
  .split .half p { display: none; }   /* the mockup's phone drops the one-line hints so "Continue a design" stays in the first screen */
  .split .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; }   /* two per row; a long starter wraps inside its chip, never cut */
  .split .chip { padding: 4px 10px; font-size: 12px; border-radius: 18px; }
  .split .half h2 { font-size: 17px; }
}
.pickslot { display: none; }   /* a phone shows step 2's candidate pick here, right under the pictures (S10 fix 6) */
.pnote { font-family: var(--mono); font-size: 12px; color: var(--ink2); min-height: 16px; }

.drop { background: var(--scrim); border: 2px dashed var(--line2); border-radius: 14px; padding: 36px 28px; text-align: center; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drop h2 { margin: 0; font-family: var(--head); font-size: 20px; font-weight: 500; }
.drop p { margin: 0; font-size: 14px; color: var(--ink3); line-height: 1.45; }
.bigbtn { font-family: var(--head); padding: 14px 22px; border-radius: var(--btn-r); border: none; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.busy { font-size: 15px; font-weight: 600; background: var(--scrim); padding: 16px 22px; border-radius: 12px; }

.wrap { position: relative; line-height: 0; flex: none; touch-action: none; }
.wrap canvas { width: 100%; height: 100%; display: block; }
.shade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hole { position: absolute; box-shadow: 0 0 0 9999px rgba(22, 32, 43, .5); }
.cbox { position: absolute; border: 2px dashed #fff; outline: 2px solid var(--blue); cursor: move; touch-action: none; }
.hd { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); touch-action: none; display: flex; align-items: center; justify-content: center; }
.hd::after { content: ''; width: 14px; height: 14px; background: var(--surface); border: 2px solid var(--blue); border-radius: 2px; }
.hd.tl { left: 0; top: 0; cursor: nwse-resize; } .hd.tr { left: 100%; top: 0; cursor: nesw-resize; }
.hd.bl { left: 0; top: 100%; cursor: nesw-resize; } .hd.br { left: 100%; top: 100%; cursor: nwse-resize; }

.nudge { background: var(--blue-bg); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; }
.nudge svg { flex: none; margin-top: 1px; color: var(--blue-ink); }
.nudge .tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--blue-ink); }
.nudge .say { font-size: 16px; font-weight: 600; line-height: 1.35; margin-top: 4px; }
.nudge .why { font-size: 13px; line-height: 1.45; color: var(--ink3); margin-top: 4px; }
.a1rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }   /* tab 01's analysis rows: the look of step 5's checks (.s7chk in step-clean.js), on the surface color inside the blue head */
.a1row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.a1row .m { font-weight: 700; width: 16px; flex: none; text-align: center; } .a1row .w { font-weight: 600; width: 84px; flex: none; } .a1row .t { color: var(--ink3); min-width: 0; }
@media (max-width: 520px) { .a1row { gap: 8px; } .a1row .w { width: 72px; } }
.a1row.ok .m { color: var(--green); } .a1row.warn .m { color: var(--amber); } .a1row.bad .m { color: var(--red); }
.group { display: flex; flex-direction: column; gap: 10px; }
.gh { font-size: 13px; font-weight: 700; color: var(--ink2); }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; font-size: 14px; background: var(--surface); border: 2px solid var(--line); width: 100%; }
.card.on { background: var(--green-bg); border-color: var(--green); }
.card .t { display: flex; justify-content: space-between; gap: 8px; width: 100%; font-weight: 600; }
.card .sub { font-size: 12px; color: var(--ink2); }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); white-space: nowrap; align-self: flex-start; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--surface); border: 1px solid var(--line2); }
.chip.on { background: var(--green); color: #fff; border-color: var(--green); }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.todo { border: 2px dashed var(--line2); border-radius: 12px; padding: 18px; color: var(--ink2); font-family: var(--mono); font-size: 13px; }
.block { font-size: 13px; color: var(--amber); background: var(--amber-bg); border-radius: 8px; padding: 8px 12px; }
.err { font-size: 14px; color: var(--red); background: var(--err-bg); border-radius: 8px; padding: 10px 12px; }

.back { padding: 14px 20px; border-radius: var(--btn-r); border: 1px solid var(--line2); background: var(--surface); font-size: 15px; font-weight: 600; cursor: pointer; }
.next { flex: 1; padding: 14px 20px; border-radius: var(--btn-r); border: none; font-size: 16px; font-weight: 600; background: var(--blue); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 82, 195, .3); }
.next:disabled { background: var(--line2); color: var(--ink2); cursor: not-allowed; box-shadow: none; }
.back:disabled { opacity: .45; cursor: not-allowed; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 32px 10px; font-size: 11px; color: var(--ink2); }
/* Turnstile's interaction-only box shows nothing (zero height) until it challenges; then it sits in the page flow directly above Back/Next (#1462 S10r). It used to float fixed over the step panel
   and covered the AI chips, the Simplify explainer, the Checks rows and the proof options (MEASURED in production walks 2026-10-22). Turnstile puts no class on its box, so studio.js sets .live while it has
   height and the 8 px gap to the buttons comes with it; unchallenged the bar keeps its height. While the Redraw overlay is open (z-index 50) the box floats above it, bottom center, so it can still be ticked;
   on a phone the sticky bar is a stacking context (z-index 5, and a flex item keeps it even when static), so for that time it goes static with z-index auto to let the fixed box out of it. */
#turnstile.live { margin-bottom: 8px; }
body:has(.rd-ov) #turnstile { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 200; margin: 0; }

@media (min-width: 761px) {
  body { height: 100vh; min-height: 640px; }   /* the stage fills the window: the picture is fitted to it, the right column scrolls */
  .stage { overflow: hidden; }
}
@media (max-width: 760px) {
  .top { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 10px; }
  .brand { flex-wrap: nowrap; }
  .bt { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .wm { font-size: 10px; line-height: 1.2; }
  .pt { padding-left: 0; border-left: none; font-size: 16px; font-weight: 600; }
  .dsid { margin-left: auto; }
  .tools { gap: 8px; }
  .pills { overflow-x: auto; padding-bottom: 2px; flex: 1; min-width: 0; }
  .pill { padding: 7px 10px; font-size: 12px; }
  .pill .l { display: none; }
  .pill.on .l { display: inline; }
  .stage { display: flex; flex-direction: column; }
  .left { padding: 16px; }
  .bwrap, .left.two .bwrap { display: flex; flex: none; flex-direction: column; gap: 10px; }
  .bwrap .board { flex: none; }
  .infig { flex: none; flex-direction: row; align-items: center; gap: 10px; align-self: stretch; }
  .infig .ib { flex: none; position: static; background: none; overflow: visible; border-radius: 0; }
  .infig img { position: static; width: auto; max-width: 96px; max-height: 72px; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
  .infig .ob, .left.two .board::before { display: none; }
  .infig figcaption { display: block; }
  .left.two #previewLabel { display: block; }
  .board { flex: none; height: clamp(240px, 40vh, 480px); padding: 22px; }
  .right { border-left: none; padding: 16px 16px calc(8px + var(--navh, 0px)); overflow: visible; }   /* the sticky Back/Next bar never covers the last card (its height is set by studio.js) */
  .pickslot { display: block; }
  .pickslot:empty { display: none; }
  body:has(.rd-ov) .navbar { position: static; z-index: auto; }
  .navbar { position: sticky; bottom: 0; border-left: none; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
  .foot { padding: 6px 16px 12px; }
}
/* Phone tap targets (S10): every button, link, field and checkbox row gives a 44 px tap area at phone width; the desktop look is untouched (inside the media query only). */
@media (max-width: 760px) {
  button, [role=button], select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]) { min-height: 44px; }
  button:not(.hd):not(.card) { min-width: 44px; }
  label:has(input[type=checkbox]), label:has(input[type=radio]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .linkbtn { display: inline-flex; align-items: center; justify-content: center; }
  .sa-sw button { width: 44px; height: 44px; }
  a[href] { display: inline-flex; align-items: center; min-height: 44px; }
  .pills { gap: 4px; }
}

/* an option the page advises: the green outline and badge the product cards use */
.chip[data-advised] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.chip[data-advised]::after { content: 'Advised'; margin-left: 8px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); }

/* The merrow edge on the proof (#1462 S10m, step-merrow.js) */
.s10m{display:flex;flex-direction:column;gap:12px}.s10m fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.s10m legend{font-size:13px;font-weight:700;color:var(--ink2);padding:0;margin-bottom:6px}
.s10m .opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-radius:var(--btn-r);padding:10px 12px;cursor:pointer;font-size:14px;line-height:1.35}.s10m .opt:has(input:checked){border-color:var(--green);background:var(--ok-bg)}
.s10m .opt input{margin-top:3px;accent-color:var(--green);width:16px;height:16px;flex:none}.s10m .opt b{display:block;font-weight:600}.s10m .opt span.n{font-size:13px;color:var(--ink2)}
.s10m .badge{font:500 11px var(--mono);color:var(--green);border:1px solid var(--green);border-radius:4px;padding:0 6px;margin-left:6px}
.s10m .sl{display:flex;flex-direction:column;gap:6px;font-size:14px}.s10m .sl .row{display:flex;gap:8px;align-items:center}.s10m .sl input[type=range]{flex:1;min-width:0;accent-color:var(--blue)}
.s10m .stp{font:500 16px var(--mono);border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:var(--btn-r);width:44px;height:44px;cursor:pointer;flex:none}
.s10m .val{font:500 14px var(--mono);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}.s10m .cap{font-size:13px;color:var(--ink2)}
.s10m :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.s10aim{position:absolute;border:2px solid var(--blue);border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.7);cursor:move;touch-action:none;z-index:3}
.s10zm{position:absolute;z-index:6;background:var(--scrim);border:1px solid var(--line2);border-radius:10px;box-shadow:0 6px 22px rgba(15,23,42,.22);padding:8px 10px 10px;font-size:13px;line-height:1.3;color:var(--ink)}
.s10zm.ok{border-color:var(--green)}.s10zhd{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:grab;user-select:none;touch-action:none;margin-bottom:6px}.s10zhd:active{cursor:grabbing}
.s10zhd b{font-weight:600}
.s10zsw{width:44px;height:44px;margin:-10px -6px -10px 0;border:0;background:none;position:relative;cursor:pointer;flex:none;padding:0}
.s10zsw::before{content:"";position:absolute;left:5px;top:12px;width:34px;height:20px;border-radius:10px;background:var(--green)}
.s10zsw i{position:absolute;top:15px;left:22px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.s10zsw[aria-checked=false]::before{background:var(--line2)}.s10zsw[aria-checked=false] i{left:8px}
.s10zh{display:grid;grid-template-columns:1fr 1fr;gap:8px}.s10zh figure{margin:0;display:flex;flex-direction:column;gap:2px}
.s10zh canvas{width:100%;height:auto;border-radius:4px;border:1px solid var(--line);display:block;image-rendering:pixelated;background-color:var(--surface);background-image:conic-gradient(var(--check) 25%,transparent 0 50%,var(--check) 0 75%,transparent 0);background-size:12px 12px}
.s10zh figcaption{font-size:12px;color:var(--ink2)}.s10zg{display:flex;align-items:baseline;gap:6px;margin-top:6px}.s10zg b{font:600 18px var(--head);font-variant-numeric:tabular-nums}.s10zg span{color:var(--ink2)}
.s8pv .s10zh canvas{position:static}.s8pv .s10zm{line-height:1.3}
@media (max-width:520px){.s10zh canvas{max-height:58px;width:auto;margin:0 auto}.s10zm{padding:4px 8px 6px;font-size:12px}.s10zhd{margin-bottom:2px}.s10zg{margin-top:2px}.s10zg b{font-size:15px}}

/* The Smoother outline chip and its sliders (#1462 S10p, step-clean.js): the overlap slider's pattern of step-merrow.js, 44 px touch targets */
.smo{display:flex;flex-direction:column;gap:10px}.smo .sl{display:flex;flex-direction:column;gap:6px;font-size:14px}.smo .sl .row{display:flex;gap:8px;align-items:center}.smo .sl input[type=range]{flex:1;min-width:0;min-height:44px;accent-color:var(--blue)}
.smo .stp{font:500 16px var(--mono);border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:var(--btn-r);width:44px;height:44px;cursor:pointer;flex:none}
.smo .val{font:500 14px var(--mono);font-variant-numeric:tabular-nums;margin-left:6px}.smo .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}.smo :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width: 760px) { .drop { padding: 18px 20px; gap: 8px; } .door { padding: 10px 16px; min-height: 44px; } .door span { display: none; } }   /* a phone's board holds both doors */

/* Tab 02 (#1462 S12o, Gruus 2026-11-02): four numbered sections and four text styles only, all scoped on the panel's data-step so the other tabs keep their look.
   T1 16/600 the tag and the title, T2 14/600 section titles, buttons, chips and material names, T3 14/400 body, T4 12/400 muted (notes, badges, links, small print). */
.right[data-step="2"] #panel { gap: 18px; font-size: 14px; font-weight: 400; line-height: 1.4; }
.right[data-step="2"] .nudge .tag, .right[data-step="2"] .nudge .say { font-size: 16px; font-weight: 600; }
.right[data-step="2"] .nudge .why { font-size: 14px; font-weight: 400; }
.right[data-step="2"] .nudge .why:empty { display: none; }
.right[data-step="2"] #panel .gh, .right[data-step="2"] #panel .s2h { font-size: 14px; font-weight: 600; color: var(--ink); }
.right[data-step="2"] #panel .s2h { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.right[data-step="2"] #panel .s2sec { display: flex; flex-direction: column; gap: 10px; }
.right[data-step="2"] #panel .s2txt, .right[data-step="2"] #panel .err, .right[data-step="2"] #panel .block { font-size: 14px; font-weight: 400; line-height: 1.4; }
.right[data-step="2"] #panel .chip, .right[data-step="2"] #panel .sa-row, .right[data-step="2"] #panel .s2btn { font-size: 14px; font-weight: 600; }
.right[data-step="2"] #panel .sa-sub, .right[data-step="2"] #panel .sa-note, .right[data-step="2"] #panel .badge, .right[data-step="2"] #panel .linkbtn, .right[data-step="2"] #panel .s2slot, .right[data-step="2"] #panel .card .sub.s2fit + .s2pc.s2x { font-size: 12px; font-weight: 400; }
.right[data-step="2"] #panel .badge { background: var(--ok-bg); }
.right[data-step="2"] #panel input { font-size: 14px; font-weight: 400; }
.right[data-step="2"] #panel .sa-note input[type=checkbox] { width: 16px; height: 16px; }
.right[data-step="2"] #panel .s2pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.right[data-step="2"] #panel .s2btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.right[data-step="2"] #panel .s2btn span + span { font-weight: 400; }
.right[data-step="2"] #panel .s2btn:hover:not(:disabled) { border-color: var(--blue); }
.right[data-step="2"] #panel .s2btn.on { background: var(--green-bg); border-color: var(--green); }
.right[data-step="2"] #panel .s2btn:disabled { opacity: .5; cursor: not-allowed; }
.right[data-step="2"] #panel .s2btn.s2start { align-self: flex-start; }
.right[data-step="2"] #panel .s2tiles { display: flex; flex-direction: column; gap: 10px; }
/* S12s (Gruus 2026-11-03: one step at a time): section 1 explains the three materials (close-up, Pro, Con, Limit; not controls), section 2 is three yes/no rows, an earlier section is one compact line */
.right[data-step="2"] #panel .s2info { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.right[data-step="2"] #panel .s2sum { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.right[data-step="2"] #panel .s2sumi { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 400; }
.right[data-step="2"] #panel .s2sumi img { width: 36px; height: 27px; object-fit: cover; border-radius: 4px; background: var(--bg); }
.right[data-step="2"] #panel .s2need { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.right[data-step="2"] #panel .s2yn { font-size: 12px; font-weight: 600; text-align: center; border-radius: 999px; padding: 3px 0; background: var(--bg); color: var(--ink2); }
.right[data-step="2"] #panel .s2yn.yes { background: var(--green-bg); color: var(--ink); }
.right[data-step="2"] #panel .s2nb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.right[data-step="2"] #panel .s2nl { font-size: 14px; font-weight: 600; }
.right[data-step="2"] #panel .s2nw { font-size: 14px; font-weight: 400; line-height: 1.4; }
.right[data-step="2"] #panel .s2tile { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; align-items: start; font-size: 14px; font-weight: 400; }
.right[data-step="2"] #panel .s2imgs { display: flex; flex-direction: column; gap: 6px; width: 120px; }
.right[data-step="2"] #panel .s2mat { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; background: var(--bg); }
.right[data-step="2"] #panel .s2mine { display: block; width: 120px; height: 90px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.right[data-step="2"] #panel .s2mine canvas { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; background: var(--bg); }
.right[data-step="2"] #panel .s2slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; text-align: center; color: var(--ink2); background: var(--bg); box-sizing: border-box; }
.right[data-step="2"] #panel .s2busy { background: var(--blue-bg); animation: sa-pulse 1.4s ease-in-out infinite; }
.right[data-step="2"] #panel .s2body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.right[data-step="2"] #panel .s2body .t { font-size: 14px; font-weight: 600; align-items: center; }
.right[data-step="2"] #panel .s2body .sub, .right[data-step="2"] #panel .s2pc { font-size: 14px; font-weight: 400; color: var(--ink); line-height: 1.4; }
.right[data-step="2"] #panel .s2pc b { font-weight: 600; }
.right[data-step="2"] #panel .s2more { display: flex; flex-direction: column; gap: 8px; min-height: 104px; }
.right[data-step="2"] #panel .s2hide { visibility: hidden; }
.right[data-step="2"] #panel .sa-extras { display: flex; flex-direction: column; gap: 6px; }
.right[data-step="2"] #panel .linkbtn { padding: 0; align-self: flex-start; }
@media (max-width: 760px) {
  .right[data-step="2"] #panel .s2tile, .right[data-step="2"] #panel .s2info { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; }
  .right[data-step="2"] #panel .s2imgs, .right[data-step="2"] #panel .s2mat, .right[data-step="2"] #panel .s2mine { width: 96px; }
  .right[data-step="2"] #panel .s2mat, .right[data-step="2"] #panel .s2mine { height: 72px; }
  .right[data-step="2"] #panel .s2btn { padding: 10px 12px; }
}