/* FitMyFace — an optician's fitting room: optician navy, tortoiseshell amber, lens white.
   One typeface (Archivo): the wide cut for headlines, like eye-chart and shop signage; normal cut for text.
   The millimetre ruler is the one recurring device, and it always marks a real measurement. */
/* Archivo, served from this site (OFL licence: /fonts/OFL.txt): no wait for a Google Fonts stylesheet before the first paint.
   One variable file holds every weight and width used here; index.html preloads it. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --page:#F4F6F8; --card:#FFFFFF; --ink:#1B2340; --ink-2:#2B3663; --steel:#5B6478; --line:#DCE1E9;
  --amber:#C9822F; --amber-tint:#F7EBDD; --focus:#B06A1E; --good:#1F7A55; --warn:#9A5B12;
  --font:'Archivo',system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --ruler:repeating-linear-gradient(90deg,var(--amber) 0 1px,transparent 1px 6px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* A link straight to a tool: no home page before app.js starts (the inline script in index.html; tools/qa/pro-path-speed.mjs). */
html.deep #home{display:none}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit;color:inherit}
a{color:var(--ink)}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* 3.9:1 on the page, 3.6:1 on navy (WCAG 1.4.11) */
h1[tabindex="-1"]:focus{outline:none} /* screen titles take focus when the screen changes; they are not buttons */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- header / footer ---------- */
.top,main,footer{width:100%;max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
.top{display:flex;align-items:center;justify-content:space-between;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:6px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:800;font-stretch:125%;font-size:19px;letter-spacing:-.01em}
.mark{width:38px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.mark .lens2{stroke:var(--amber)}
.top-actions{display:flex;gap:8px}
@media (max-width:359px){.top .brand{font-size:16px;gap:6px}.top .mark{width:30px}.top-actions{gap:4px}.top-actions .chip-btn{padding:7px 10px;white-space:nowrap}} /* 320 px: brand + Install + language must fit one row */
.lang-pick{position:relative}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;min-width:150px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.lang-menu[hidden]{display:none}
.lang-menu button{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.lang-menu button[aria-checked="true"]{font-weight:700;background:var(--amber-tint)}
.lang-menu button[aria-checked="true"]::after{content:" ✓"}
.chip-btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;min-height:44px;font-size:14px;cursor:pointer}
footer{padding-top:40px;padding-bottom:calc(32px + env(safe-area-inset-bottom));color:var(--steel);font-size:14px}
footer p{margin:4px 0}
footer p a,.home-fixes a{display:inline-flex;align-items:center;min-height:44px}
footer p a{padding:0 6px}
footer p a+a{margin-left:4px}
/* Guide pages that load this file: the home link at the top, the footer links and the Related guides links are 44 px tall tap targets. */
body > header:not(.top) > a,main > footer a,nav[aria-label="Related guides"] a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
nav[aria-label="Related guides"] li{margin:0}
.guide-links ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:0 16px}
.guide-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.guide-links p{font-weight:700}

/* ---------- type ---------- */
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(36px,6.4vw,62px);font-weight:800;font-stretch:125%}
h2,:where(#scan,#glasses,#hair) h1,h2[data-screen-title]{font-size:clamp(24px,3.4vw,32px);font-weight:800;font-stretch:118%;margin:6px 0 14px}
.lead{font-size:clamp(17px,2vw,19px);color:var(--steel);max-width:34em;margin:16px 0 0}
.note{font-size:14px;color:var(--steel);max-width:40em}

/* ---------- buttons ---------- */
button.primary,button.secondary,a.buy,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;border:1.5px solid transparent;transition:background .15s,color .15s}
button.primary,a.buy{background:var(--ink);color:#fff}
button.primary:hover,a.buy:hover{background:var(--ink-2)}
button.primary:disabled,button.secondary:disabled{opacity:.35;cursor:default}
button.secondary{background:var(--card);color:var(--ink);border-color:var(--ink)}
button.secondary:hover{background:#E9EDF3}
.ghost{background:none;color:var(--ink);padding:0 12px}
.ghost:hover{background:#E6EAF0}
.link{background:none;border:0;padding:12px 0;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.beauty-toggle{min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line,#d9d4cc);background:#fff;color:var(--steel);font-size:14px;cursor:pointer}
.beauty-toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.beauty-toggle::before{content:"\2728\00a0"}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:none;border:0;color:var(--steel);font-size:15px;padding:8px 0;cursor:pointer}
.back::before{content:'';width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
/* Share and invite results: on their own line right under their buttons. While empty they take no room, but stay
   in the page (display:none would stop screen readers reading out the first message). */
.share-status{flex:1 0 100%;margin:0;overflow-wrap:anywhere}
.share-status:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
button.wide{display:flex;width:100%;padding:6px 14px;line-height:1.25}

/* ---------- home ---------- */
#home{display:grid;gap:24px;padding-top:18px}
.hero-text{max-width:620px}
.fitting{position:relative;margin:0;border-radius:28px;overflow:hidden;background:var(--ink);box-shadow:0 40px 70px -40px rgba(27,35,64,.55)}
.fitting canvas{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.fitting-pd{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px 6px 10px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.fitting-pd::before{content:'';width:22px;height:9px;background:var(--ruler);border-bottom:1.5px solid var(--amber)}
.fitting-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 16px;color:#fff}
.fitting-cap b{display:block;font-size:15px;line-height:1.25}
.fitting-cap small{color:#AEB6CC;font-size:13px;font-variant-numeric:tabular-nums}
.fitting-cap .price{font-size:24px;font-weight:800;font-stretch:112%;white-space:nowrap;color:#E9A957}

.paths{display:grid;gap:14px}
.path{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;width:100%;text-align:left;padding:18px;border-radius:20px;cursor:pointer;font-size:15px;line-height:1.4}
.path b{display:block;font-size:20px;font-weight:800;font-stretch:115%;margin-bottom:3px}
.path-glasses{position:relative;overflow:hidden;background:var(--ink);color:#DDE3F2;border:0;padding-bottom:26px}
.path-glasses b{color:#fff}
.path-glasses::after{content:'';position:absolute;left:18px;right:18px;bottom:10px;height:8px;background:var(--ruler);opacity:.9}
.path-glasses svg{width:58px;height:34px;fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round}
.path-hair{background:var(--card);color:var(--steel);border:1.5px solid var(--line)}
.path-hair b{color:var(--ink)}
.path-hair:hover{border-color:var(--ink)}
.path-pics{display:flex;width:84px;height:62px;border-radius:12px;overflow:hidden}
.path-pics img{width:50%;height:100%;object-fit:cover}
.path-pics img+img{border-left:2px solid #fff}
/* Useful, existing guide paths reachable from the opening screen. */
.intent-answers{margin:14px 0 0;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.intent-answers-title{margin:0 0 5px;font-size:14px;font-weight:700;color:var(--ink)}
.intent-answers ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.intent-answers a{display:inline-flex;align-items:center;min-height:44px;line-height:1.3;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.hero-actions > .wide{margin-top:14px}
.trust{margin:18px 0 0;font-size:15px;color:var(--steel)}
.trust-free{font-weight:700;color:var(--ink);margin-bottom:-10px}
.how-measure{margin:0;font-size:15px;color:var(--steel);border-left:3px solid var(--amber);padding:2px 0 2px 14px}
.why-title{font-size:20px;margin:22px 0 10px}
.why{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.why li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px 12px 40px;font-size:15px}
.why li::before{content:'';position:absolute;left:15px;top:19px;width:12px;height:6px;border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);transform:rotate(-45deg)}
.steps{list-style:none;counter-reset:step;padding:0;margin:8px 0 0;display:grid;gap:12px}
.steps li{counter-increment:step;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline;font-size:16px}
.steps li::before{content:counter(step);font-weight:800;font-stretch:125%;font-size:26px;color:var(--amber);line-height:1}
.hook{background:var(--amber-tint);border-radius:16px;padding:16px 18px;margin:0;font-size:16px}
/* Phones: the before and after (js/app.js startDemo), then the two start buttons, on the first screen down to 320 x 568 */
.demo{margin:0;max-width:460px}
.demo-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-shot{position:relative;overflow:hidden;margin:0;border-radius:16px;aspect-ratio:1/1;background:var(--ink)}
/* = DEMO.crop [70, 32, 340, 340] of the 480 px photo */
.demo-shot img{display:block;width:100%;height:100%;object-fit:cover}
.demo-tag{position:absolute;left:8px;top:8px;border-radius:999px;padding:1px 10px;font-size:13px;font-weight:700;background:rgba(255,255,255,.94);color:var(--ink)}
.demo-after .demo-tag{background:var(--ink);color:#fff}
.demo:not(.ready) .demo-after .demo-tag{visibility:hidden}
.demo:not(.ready) .demo-after{animation:demo-wait 1.4s ease-in-out infinite alternate}
@keyframes demo-wait{to{background:var(--ink-2)}}
.demo-cap{margin:8px 0 0;font-size:13px;line-height:1.35;color:var(--steel)}
@media (max-width:899px){
  #home{gap:12px;padding-top:8px}
  .hero-text{display:contents}
  #home h1{order:0;font-size:clamp(24px,7.6vw,36px);text-wrap:balance}
  .demo{order:1} .hero-actions{order:2} .lead{order:3;margin:0} .fitting{order:4} .home-why{order:5} .home-more{order:6}
  .paths{gap:10px}
  .path{gap:12px;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.3}
  .path b{font-size:18px;margin-bottom:1px}
  .path-glasses{padding-bottom:21px}
  .path-glasses::after{left:14px;right:14px;bottom:8px;height:7px}
  .path-glasses svg{width:46px;height:27px}
  .path-pics{width:60px;height:46px;border-radius:10px}
}
/* Phone sideways: buttons first */
@media (max-width:899px) and (max-height:500px){.hero-actions{order:1} .demo{order:2}}
@media (min-width:900px){
  .demo{display:none}
  #home{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:56px;row-gap:28px;align-items:start;padding-top:36px}
  .hero-text{grid-column:1;grid-row:1}
  .hero-actions{grid-column:1;grid-row:2}
  .home-why{grid-column:1;grid-row:3}
  .fitting{grid-column:2;grid-row:1 / span 3}
  .fitting canvas{aspect-ratio:1/1}
  .home-more{grid-column:1 / -1;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;margin-top:12px}
}

/* ---------- scan ---------- */
#scan,.narrow{max-width:560px;margin:0 auto}
.stage{position:relative;border-radius:24px;overflow:hidden;background:var(--ink);aspect-ratio:3/4;width:100%}
/* The live camera is a real, visible <video> (iPhones stop hidden videos); canvases draw on top of it. */
.stage video,.studio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage canvas{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
.scan-stage{background:linear-gradient(160deg,#2B3663,#1B2340)}
.scan-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;color:#C9D0E2;font-size:16px;text-align:center}
.empty svg{width:56px;height:56px;fill:none;stroke:#C9D0E2;stroke-width:2;stroke-linecap:round}
.scan-stage:has(#scanEmpty:not([hidden])){aspect-ratio:auto;min-height:0}
/* Before the camera or a photo (own-photo drop-off, 2026-11-07): the tips are a slim strip, not a tall empty box, so the
   agreement and both "I agree" buttons fit on the first screen of a small phone (iPhone SE: 375 x 548 in Safari). */
.scan-stage:has(#scanEmpty:not([hidden])) #scanEmpty{position:relative;inset:auto;display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:12px;padding:12px 16px;font-size:14px;line-height:1.4}
.scan-stage:has(#scanEmpty:not([hidden])) #scanEmpty svg{width:34px;height:34px;flex:none}
/* With the strip, a message ("Starting the camera…") flows under the tips instead of covering them. */
.scan-stage:has(#scanEmpty:not([hidden])) #scanStatus{position:relative;left:auto;bottom:auto;transform:none;width:auto;max-width:none;margin:0 12px 12px}
.scan-stage:has(#scanEmpty:not([hidden])) #scanStatus.empty{position:absolute} /* empty: out of the flow, still a live region */
@media (max-height:700px){#scan > [data-screen-title]{margin-bottom:10px}#scan .note.hair-privacy{margin:8px 0}#scan .consent-text{margin-top:8px}#scan .scan-actions{margin-top:8px;gap:8px}#scan .scan-stage:has(#scanEmpty:not([hidden])) #scanEmpty{padding:10px 16px}}
/* A 375x548 phone (Safari bars showing): the longer Spanish and Korean agreement still leaves "open camera" on screen.
   Spacing only; the words are the same. */
@media (max-height:600px){#scan > [data-screen-title]{margin:2px 0 8px}#scan .note.hair-privacy,#scan .consent-text{line-height:1.35}}
.scan-stage:has(#scanEmpty:not([hidden])) svg.guide,#scan:has(#scanEmpty:not([hidden])) > .tips{display:none}
.scan-stage .empty{gap:10px;padding:16px 20px;font-size:15px;line-height:1.45}
svg.guide{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
svg.guide .track{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;transition:stroke .2s}
svg.guide .prog{fill:none;stroke:var(--amber);stroke-width:1.9;stroke-linecap:round;stroke-dasharray:0 100;opacity:0;transition:stroke-dasharray .15s linear}
svg.guide .prog.on{opacity:1}
.scan-stage.loading svg.guide .track{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{stroke:rgba(255,255,255,1)}}
.stage.has-face svg.guide .track{stroke:#E9A957;stroke-dasharray:none}
.flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.done{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:6px;background:rgba(16,20,38,.55);color:#fff;text-align:center;font-size:16px}
.done .tick{width:88px;height:88px;border-radius:50%;background:var(--good);display:grid;place-items:center;margin-bottom:8px;animation:pop .35s ease-out}
.done .tick svg{width:46px;height:46px;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.done b{font-size:26px;font-weight:800;font-stretch:115%}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.consent-text{font-size:14px;line-height:1.5;color:var(--steel);margin:12px 0 0;max-width:42em}
#sampleBtn{margin-top:0}
.scan-actions > button{flex:1 1 220px}
.upload-first #uploadBtn{order:-1} /* the camera failed: the photo upload is the main way in */
.scan-help{background:var(--amber-tint);border-radius:14px;padding:12px 16px;margin:12px 0 0;font-size:15px}
.scan-help p{margin:0}
.scan-help button{margin-top:10px;min-height:44px}
.trouble{margin:10px 0 0;font-weight:600;color:var(--ink)}

canvas.mirror,video.mirror{transform:scaleX(-1)}
/* Mirror view (js/mirror-view.js): one more flip of the picture only, never the buttons or words on it. `scale` adds to
   the selfie's transform above, so a mirrored selfie flipped again shows as others see it. */
.flip-view > :is(canvas,video,img){scale:-1 1}
.view-flip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:12px}
@media (max-width:899px){.view-flip{margin-top:0}} /* phones: the column gap spaces it */
.view-flip .seg button{min-height:44px;padding:6px 12px;font-size:14px}
.view-flip .note{flex:1 1 180px;margin:0;font-size:13px}
/* Scan tips: a solid pill readable on any camera picture; the live region inside it only changes with the words. */
.scan-stage .status{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);margin:0;padding:9px 16px;border-radius:16px;background:rgba(16,20,38,.9);color:#fff;font-size:17px;font-weight:600;line-height:1.35;text-align:center}
.scan-stage .status.empty{padding:0;background:none}
#scanPct{font-variant-numeric:tabular-nums}
.tips{font-size:15px;color:var(--steel);margin:12px 0 0}
.check{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0;cursor:pointer;font-size:15px}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--ink)}

/* ---------- results layout ---------- */
.results{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.col-stage,.col-list{min-width:0}
.sample-banner{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0;padding:0 14px;border-radius:14px;background:var(--amber-tint);font-size:14px}
.sample-banner .link{padding:0;min-height:44px}
.sample-banner .try-mine{min-height:44px;margin:6px 0;padding:0 18px;font-size:15px} /* a sample face's next step: the visitor's own photo */
.sample-banner > span:first-child{padding-top:10px}
.sample-banner .in-app-sample{flex:1 1 100%;margin:0 0 8px;font-size:13px} /* in-app browsers only: how to open the page in the phone's browser */
.sample-banner .in-app-sample.flag{margin:0 -8px 10px;padding:6px 8px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 2px var(--amber);scroll-margin-bottom:16px} /* after a tap on "Try it on my photo" in an in-app browser */
.sample-banner .banner-consent{flex:1 1 100%;margin:4px 0 0;font-size:13px} /* the scan agreement, word for word, above "Try it on my photo" */
.pick-banner{grid-column:1 / -1;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--amber-tint);font-size:14px}
.results > .pick-banner{margin:0}
@media (min-width:900px){
  .results{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .col-stage{position:sticky;top:16px}
  /* Never taller than the screen: the arrows and the store link at the foot of the try-on must stay in view
     (16px top + the Scan again button + the try-on <= the viewport). */
  .stage.result{max-height:calc(100vh - 90px);max-height:calc(100svh - 90px)}
}
.stage.result{aspect-ratio:3/4}
/* The hair picture keeps its own shape inside the studio box (letterboxed), so a finger on the screen still
   lands on the same spot of the hair; the live video sits in the same box as the overlay canvas. */
.results .studio{display:grid;grid-template:100% / 100%;place-items:center}
.results .studio canvas,.results .studio video{grid-area:1 / 1;position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:100%}
/* Same cap for the hair picture; it must come after the rule above, which would otherwise win. */
@media (min-width:900px){.results .studio canvas,.results .studio video{max-height:calc(100vh - 90px);max-height:calc(100svh - 90px)}}
#glassesStage{touch-action:pan-y pinch-zoom} /* sideways swipes change the frame; up and down still scroll */
.true-size{margin:10px 0 0}
.rate{margin:12px 0;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.rate-q{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}
.rate-btns{display:flex;gap:6px}
.rate-btns button{flex:1;min-width:0;min-height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.rate-ends{display:flex;justify-content:space-between;gap:12px;margin:6px 0 0;font-size:12px;color:var(--steel)}
.rate-thanks{margin:12px 0}
/* One share prompt per visit after a 4 or 5 (js/share-ask.js): gentle, under the thanks, closed with "Not now". */
.share-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--amber-tint);font-size:15px}
.share-ask .secondary{min-height:44px;padding:0 18px}
.share-ask .link{min-height:44px;padding:0}
/* "Ask a friend which one" sat flush under the "Send them this" line (v102 review): a small top gap. The id outranks the mobile margin:0 reset. */
#friendAskH{margin-top:10px}
/* "Bring this to your barber": the main next step after an own-photo hair result; opens the barber card. */
.barber-step{justify-content:center;min-height:52px;margin:12px 0 0;font-size:17px}
.note-row{display:flex;gap:6px;margin:12px 0 0}
.note-row[hidden]{display:none}
.note-row input{flex:1;min-width:0;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:var(--card);color:var(--ink)}
.note-row button{min-height:44px;flex:none;padding:0 16px}
.note-status{margin:4px 0 0;font-size:14px}
.note-status:empty{display:none}
.note-thanks{margin:12px 0}
.home-fixes{margin:14px 0 0;font-size:15px}
/* Glasses-wearer note and side-by-side frames (js/frame-compare.js) */
.g-tools{display:grid;gap:8px;margin:12px 0 0}
.g-tools > [hidden]{display:none}
.wearer{padding:10px 14px;border-radius:14px;background:var(--amber-tint);font-size:15px}
.wearer p{margin:0 0 8px;font-weight:600}
.wearer-btns{display:flex;flex-wrap:wrap;gap:8px}
.degls{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.degls .note{margin:0}
.degls button[aria-pressed="true"]{border-style:dashed}
.wearer-btns button{min-height:44px;padding:0 14px}
.cmp-open{width:100%;min-height:44px}
.cmp-dialog{width:min(760px,calc(100vw - 16px));padding:16px}
.cmp-grid{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-grid[data-n="3"] li:first-child{grid-column:1 / -1}
.cmp-grid[data-n="3"] li:first-child .cmp-tile{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
.cmp-tile{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.cmp-tile:hover{border-color:var(--ink)}
.cmp-tile canvas{display:block;width:100%;height:auto;aspect-ratio:6/5;background:#E9EDF3}
.cmp-tile.loading canvas{animation:sh 1.2s infinite;background:linear-gradient(90deg,#E9EDF3,#F7F8FA,#E9EDF3);background-size:200% 100%}
.cmp-cap{display:grid;gap:1px;padding:6px 8px 8px;font-size:12.5px;line-height:1.3;color:var(--steel)}
.cmp-cap b{font-size:14px;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
#cmpStatus{font-size:15px;padding:4px 0}
.cmp-num{display:flex;flex-wrap:wrap;gap:0 8px}
.cmp-num i{font-style:normal;white-space:nowrap}
.cmp-num i.at-store{white-space:normal}
.cmp-cap .cmp-store{font-weight:700;color:var(--ink-2)}
.cmp-picker{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cmp-opt{display:grid;text-align:left;min-height:44px;max-width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.cmp-opt b{font-size:14px}
.cmp-opt span{color:var(--steel)}
.cmp-opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--card)}
.cmp-actions{position:sticky;bottom:-16px;margin:10px -16px -16px;padding:8px 16px 12px;background:#fff;border-top:1px solid var(--line);justify-content:flex-end}
@media (min-width:700px){.cmp-grid[data-n="4"]{grid-template-columns:repeat(4,1fr)}}
/* Phones: a short try-on stays pinned at the top while the list scrolls under it. Held sideways (a short
   viewport) the pin shrinks with the screen instead of holding 250px, so the list keeps room. */
@media (max-width:899px){
  /* Hair on phones: the picture comes before the sample banner and its consent paragraph, so the photo, the full consent and "Try it on my photo" all fit on one screen. HTML order (consent read just before the button) is unchanged. */
  #hair .hair-top{order:-5} #hair .top-row{order:-4} #hair .studio{order:-3} #hair.results > .sample-banner{order:-2}
  /* Short screens (iPhone SE in Safari): on a sample face the "Scan again" and Beauty row gives way, so "Try it on my photo"
     is on the first screen ("Use the camera instead" is in the banner). Taller phones keep the row. */
  @media (max-height:600px){#hair:has(> .sample-banner:not([hidden])) .top-row{display:none}}
  #hair .barber-step{order:-2} /* right under the try-on, before the filters */
}
@media (max-width:899px){
  .results{gap:14px}
  .results .col-stage{display:contents}
  .results .back{justify-self:start}
  .stage.result,.results .studio{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;width:auto;height:42vh;height:42svh;min-height:250px;min-height:min(250px,45svh);aspect-ratio:auto;margin:0 -20px;border-radius:0 0 22px 22px}
  .true-size{margin:0}
  /* The column's 14px gap already spaces these; their own margins added on top left a ~38px hole under "Thanks for rating." */
  .results .rate-thanks,.results .note-row,.results .note-status,.results .note-thanks,.results .share-ask,.results .barber-step{margin:0}
  /* Glasses: Save, Share, "Try this on a friend" stay right under the try-on, as on hair (2026-11-12 funnel audit: with order:2 they sat
     after the whole frame list, about 8,250 px down on an iPhone 14). */
  .share-row{margin:0}
  /* Hair: the "Show haircuts for" question, then the two filters, come before the try-on; the rest of the list after it. */
  .results > .sample-banner,.results > .pick-banner{order:-3}
  .results .back{order:-2}
  #hair .col-list{display:contents}
  #hair .col-list > *{margin-top:0;margin-bottom:0}
  #hair .hair-top{order:-1}
}
/* Phones held sideways: too short to pin anything without the bar covering the glasses, so the try-on scrolls
   with the page and takes the screen's height instead. */
@media (max-width:899px) and (max-height:500px){
  .stage.result,.results .studio{position:relative;top:auto;height:calc(100vh - 16px);height:calc(100svh - 16px);min-height:0}
}
.now-bar{position:absolute;z-index:3;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px}
.nav{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(16,20,38,.2);cursor:pointer;display:grid;place-items:center}
.nav::before{content:'';width:10px;height:10px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateX(2px) rotate(45deg)}
.nav.next::before{transform:translateX(-2px) rotate(-135deg)}
.nav.next{margin-left:auto}
.now{flex:1;min-width:0;margin:0;padding:6px 12px;border-radius:14px;background:rgba(255,255,255,.95);font-size:14px;line-height:1.35;font-weight:600}
.now:empty{display:none}
.now .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.now .pos{color:var(--steel);font-variant-numeric:tabular-nums}
.now .pick{margin-right:8px;padding:1px 8px;border-radius:999px;background:#E3F2EA;color:var(--good);font-size:12px;font-weight:700}
.now a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;white-space:nowrap;font-weight:700;color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px} /* a 44px tap target without growing the pill */
.now .nowwarn{display:block;font-size:12px;font-weight:400;color:var(--warn)}
.seg{display:inline-flex;background:#E4E8EF;border-radius:12px;padding:3px}
.seg button{border:0;background:none;min-height:44px;padding:8px 14px;border-radius:9px;cursor:pointer;font-size:15px;font-weight:600;color:var(--steel)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.live-toggle{position:absolute;z-index:3;top:12px;right:12px;background:rgba(255,255,255,.92)}
.l3d-toggle{position:absolute;z-index:3;top:70px;right:12px;min-height:44px;padding:8px 14px;border:0;border-radius:12px;background:rgba(255,255,255,.92);color:var(--steel);font-size:15px;font-weight:600;cursor:pointer}
.l3d-toggle[aria-pressed=true]{background:var(--ink);color:#fff}

/* measurement slip */
.slip{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 18px 16px;margin:16px 0}
.slip::before{content:'';position:absolute;left:18px;right:18px;top:0;height:9px;background:var(--ruler);border-top:1.5px solid var(--amber)}
.slip h2{font-size:15px;font-weight:700;font-stretch:100%;color:var(--steel);letter-spacing:0;margin:0 0 8px} /* h2 under the screen's h1, same look as before */
.shapes{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.shapes button{border:1.5px solid var(--line);background:var(--card);border-radius:999px;min-height:44px;padding:6px 13px;cursor:pointer;font-size:15px}
.shapes button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.shapes button small{opacity:.7;margin-left:5px;font-variant-numeric:tabular-nums}
.hint{font-size:13px;color:var(--steel);margin:2px 0 0}
/* "My fit numbers": on phones one summary line until tapped; on wider screens always open (summary hidden). */
.facebox > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:-8px 0;cursor:pointer;list-style:none;font-weight:700;font-size:16px}
.facebox > summary::-webkit-details-marker,.more > summary::-webkit-details-marker{display:none}
.facebox > summary::after,.more > summary::after{content:'';flex:none;width:9px;height:9px;margin:0 6px 4px 0;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg)}
.facebox[open] > summary{margin-bottom:12px}
.facebox[open] > summary::after,.more[open] > summary::after{transform:rotate(-135deg);margin-bottom:-4px}
@media (min-width:900px){.facebox > summary{display:none}}
.slip h2.fit-title{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px}
.stats > div{padding:0 10px;border-left:1px solid var(--line)}
.stats > div:first-child{padding-left:0;border-left:0}
.stats b{display:block;font-size:clamp(17px,4.8vw,22px);white-space:nowrap;font-weight:800;font-stretch:105%;font-variant-numeric:tabular-nums;line-height:1.15}
.stats span{display:block;margin-top:3px;font-size:13px;line-height:1.3;color:var(--steel)}
.stats .mono-pd{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--steel);font-variant-numeric:tabular-nums}
/* Chinese: short data lines and labels wrap only at spaces, so a word like 镜腿, 毫米 or 框宽 is never split; text avoids a one-character last line. */
:lang(zh) .card .sub,:lang(zh) .card .size,:lang(zh) .fitting-cap small,:lang(zh) .facebox > summary,:lang(zh) .stats span,:lang(zh) [data-t="lowBridgeQ"]{word-break:keep-all;overflow-wrap:break-word}
:lang(zh) p,:lang(zh) li{text-wrap:pretty}
.look-for{margin:12px 0 0;font-size:15px}
.more{border-top:1px solid var(--line);margin-top:12px}
.more > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;font-weight:600;font-size:15px}
.tips-list{margin:0 0 10px;padding-left:20px;font-size:14px;display:grid;gap:6px}
.pd-form{margin:0 0 10px}
.pd-form label{display:grid;gap:6px;font-size:14px;color:var(--steel)}
.pd-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink)}
.pd-row input{width:96px;min-height:44px;padding:0 12px;border:1px solid #808A9C;border-radius:10px;background:var(--card);font-weight:700;font-variant-numeric:tabular-nums}
.pd-form .note{margin:8px 0 0}
.pd-form .link{padding:0 0 0 4px}
.copy-row{margin:14px 0 0}
.warn{color:var(--warn);font-size:14px}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}
.filters label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--steel)}
/* 16px: iPhone Safari zooms the whole page in when a menu under 16px is tapped, and leaves it zoomed */
.filters select{min-height:44px;padding:9px 12px;border-radius:10px;border:1px solid #808A9C;background:var(--card);color:var(--ink);font-weight:600;font-size:16px}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 14px}
.list-head .note{margin:0 0 12px}
.frame-kind{margin:0 0 12px}
.goal{border-left:3px solid var(--amber);padding:2px 0 2px 14px;margin:6px 0 14px;font-size:16px}

/* ---------- cards ---------- */
.cards{list-style:none;padding:0;margin:14px 0;display:grid;gap:12px}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:16px}
.card.on{border-color:var(--ink)}
.card .head{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center}
.card canvas{width:118px;height:52px;background:var(--page);border-radius:12px}
.card h2{margin:0;font-size:17px;line-height:1.25;font-weight:700;font-stretch:100%;letter-spacing:normal}
.card .sub{margin:2px 0 0;font-size:14px;color:var(--steel)}
.card .row-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
.card .price{font-size:24px;font-weight:800;font-stretch:112%;font-variant-numeric:tabular-nums}
.match{font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.match.is-top{background:var(--good);color:#fff}
.match.is-good{background:#E3F2EA;color:var(--good)}
.match.is-pick{background:var(--amber-tint);color:var(--warn)}
.fit-banner{background:var(--amber-tint);border-left:3px solid var(--amber);border-radius:12px;padding:12px 14px;margin:0 0 12px;font-size:15px}
.card .size{margin:2px 0 0;font-size:14px;font-variant-numeric:tabular-nums}
.card .pnote{margin:2px 0 0;font-size:13px;color:var(--steel)}
.card .storenote{color:var(--warn)}
/* ?shop=: one optical shop's own frames */
.shop-head{border-left:3px solid var(--good);background:var(--card);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:15px}
.shop-head p{margin:0}
.shop-head .shop-name{font-weight:700;font-size:17px}
.shop-head .shop-sample{color:var(--warn);font-weight:700;margin-top:2px}
.shop-head .note{margin-top:4px}
.shop-head.is-missing{border-left-color:var(--amber);background:var(--amber-tint)}
.card .stock{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--good)}
.card .stock.is-low{color:var(--warn)}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.swatch{width:36px;height:36px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--line);box-shadow:inset 0 0 0 2px var(--card);cursor:pointer}
.swatch[aria-pressed="true"]{border-color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fit{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:3px;font-size:14px}
.fit li{display:grid;grid-template-columns:16px 1fr;gap:6px}
.fit li::before{content:'✓';font-weight:800;color:var(--good)}
.fit li.warn::before{content:'!';color:var(--warn);text-align:center}
.fit li.near::before{content:'≈';color:var(--steel);text-align:center}
.card .actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:14px}
.card .actions > *{min-height:44px;font-size:15px;padding:0 12px}
/* Hair cards: the picture and name are one button that tries the cut; the AI preview and barber card are small links. */
.hair-card{padding:0;overflow:hidden}
.hc-main{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;width:100%;padding:14px 16px 4px;border:0;background:none;text-align:left;cursor:pointer;font-size:15px}
.hc-main img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--page)}
.hc-text{display:block;min-width:0}
.hc-name{display:block;font-size:17px;line-height:1.25}
.hc-text .zh{display:block}
.hc-links{display:flex;flex-wrap:wrap;gap:0 18px;padding:0 16px 4px 94px}
.hc-links .link{min-height:44px;padding:8px 0;font-size:15px}
.thumb-credit{margin:0 0 6px;font-size:13px}
.zh{color:var(--steel);font-size:14px;margin:2px 0 0}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.badge{font-size:13px;padding:3px 10px;border-radius:999px;background:#E9EDF4;color:var(--ink-2);font-weight:600}
.badge.good{background:#E3F2EA;color:var(--good)}

/* ---------- hair studio ---------- */
.studio{position:relative;border-radius:24px;overflow:hidden;background:var(--ink);user-select:none;-webkit-user-select:none}
.studio canvas{position:relative;z-index:1;display:block;width:100%;height:auto;cursor:grab;touch-action:pan-y} /* hairstudio.js takes the touches that land on the hair */
.studio canvas:active{cursor:grabbing}
.studio .ai-real{position:absolute;inset:0;z-index:2;display:block;width:100%;height:auto;cursor:pointer}
.results .studio .ai-real{grid-area:1 / 1;position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:100%}
@media (min-width:900px){.results .studio .ai-real{max-height:calc(100vh - 90px);max-height:calc(100svh - 90px)}}
.auto-ai{margin-top:12px}
.stage .ai-real{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.studio .live-toggle{top:auto;bottom:62px}
/* Before / after and "Face kept from your photo" on the AI hair picture (js/aiproof.js). The chips sit on the picture's top
   corners; the comparison covers the studio with the AI's square, the photo on the left of the divider (--at). */
.proof-chip{position:absolute;z-index:5;top:10px;min-height:36px;padding:6px 12px;border:0;border-radius:999px;background:rgba(16,20,38,.78);color:#fff;font-size:13px;font-weight:700;line-height:1.2;cursor:pointer}
.proof-badge{left:10px;max-width:calc(55% - 14px);text-align:left;background:rgba(31,122,85,.92)}
.proof-badge::after{content:'\00a0\24D8';font-weight:400}
.proof-open{right:10px}
.proof-how{position:absolute;z-index:5;top:52px;left:10px;right:10px;margin:0;padding:8px 12px;border-radius:12px;background:rgba(16,20,38,.9);color:#fff;font-size:13px;line-height:1.4}
.proof-view{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;background:var(--ink);container-type:size}
.proof-fig{position:relative;flex:none;width:min(100cqw,calc(100cqh - 60px));aspect-ratio:1/1;border-radius:14px;overflow:hidden;touch-action:pan-y;cursor:ew-resize;--at:50%}
.proof-view:has(.proof-note) .proof-fig{width:min(100cqw,calc(100cqh - 112px))}
/* specific enough to beat .results .studio canvas (the studio's own picture) */
.studio .proof-fig canvas.proof-pic{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;max-height:none;display:block;cursor:inherit;touch-action:pan-y}
.proof-before{clip-path:inset(0 calc(100% - var(--at)) 0 0)}
.proof-handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--at);width:44px;margin-left:-22px;outline:none}
.proof-handle::before{content:'';position:absolute;top:0;bottom:0;left:21px;width:2px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.5)}
.proof-handle::after{content:'\2039\00a0\203A';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);font-size:20px;font-weight:800;line-height:38px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.proof-handle:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}
.proof-fig.peek .proof-before{transition:clip-path .35s ease}
.proof-fig.peek .proof-handle{transition:left .35s ease}
.proof-fig.held .proof-handle{visibility:hidden}
.proof-tag{position:absolute;z-index:2;top:8px;left:8px;padding:1px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;font-weight:700;pointer-events:none}
.proof-tag-after{left:auto;right:8px;background:var(--ink);color:#fff}
.proof-note{margin:0;max-width:min(100%,520px);color:#fff;font-size:12px;line-height:1.35;text-align:center;opacity:.9}
.proof-bar{display:flex;gap:8px}
.proof-bar .proof-chip{position:static;background:rgba(255,255,255,.14);min-height:40px;padding:8px 16px;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.proof-bar .proof-chip[aria-pressed="true"]{background:#fff;color:var(--ink)}
.drag-hint{position:absolute;z-index:3;top:12px;left:50%;transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:999px;background:rgba(16,20,38,.72);color:#fff;font-size:14px;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.drag-hint.gone{opacity:0}
/* Why the AI picture is not coming, on the picture itself, with a Retry (audit 2026-11-11: it used to sit below the fold) */
.ai-pill{position:absolute;z-index:6;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;padding:8px 12px;border-radius:14px;background:rgba(16,20,38,.92);color:#fff;font-size:14px;font-weight:600;line-height:1.35;text-align:center}
.ai-pill[hidden]{display:none}
/* The daily AI limit: the instant try-on is already on the picture, so the note sits low, over the shoulders, not over the hair (activation audit 2026-11-13) */
.ai-pill.limit{top:auto;bottom:64px;flex-wrap:nowrap;justify-content:space-between;text-align:left;font-size:13px;padding:6px 8px 6px 12px}
.ai-pill.limit button{flex:none}
.results .studio > .ai-pill.limit,.results .stage > .ai-pill.limit{align-self:end;margin-bottom:6px}
.ai-pill button{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:#fff;color:var(--ink);font-weight:700;cursor:pointer}
.results .studio > .ai-pill,.results .stage > .ai-pill{grid-area:1 / 1;align-self:start}
.studio:has(> .ai-pill:not([hidden])) .drag-hint{visibility:hidden}
.scan-choose{display:block;margin:8px auto 0;min-height:44px;padding:0 16px;border-radius:12px;border:0;background:#fff;color:var(--ink);font-size:15px;font-weight:700;cursor:pointer;pointer-events:auto}
.scan-choose[hidden]{display:none}
.customize{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.customize > summary{display:flex;align-items:center;min-height:48px;padding:0 14px;font-weight:700;font-size:15px;cursor:pointer;list-style:none}
.customize > summary::-webkit-details-marker{display:none}
.customize > summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.customize[open] > summary::after{transform:rotate(-135deg)}
.customize[open]{padding-bottom:12px}
.customize > :not(summary){margin-left:14px;margin-right:14px}
.customize > summary + *{margin-top:4px}
.path-studio{margin-top:12px;text-decoration:none;color:inherit;border:2px solid var(--amber)}
.path-studio svg{width:40px;height:40px;flex:0 0 40px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.studio-btn{border:2px solid var(--amber);font-weight:700}
/* While the AI picture of this look is on its way the studio says so on the picture itself (showAutoAI in app.js): the line
   under the studio is below the fold on a phone, and "Drag to move" would point at a drawing that is not there. Above the
   shimmer, so the words stay clean. The rule at the top of this file cannot reach a ::before, so reduced motion has its own
   line here. */
.hair-wait{z-index:4}
.hair-wait::before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;box-sizing:border-box;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:hair-wait 1s linear infinite}
.hair-wait:not([hidden]) ~ .drag-hint{visibility:hidden}
@keyframes hair-wait{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hair-wait::before{animation:none}}
@media (max-width:899px){.drag-hint{white-space:normal;width:max-content;max-width:calc(100% - 24px);text-align:center;border-radius:14px}}
/* All 12 colours in view: two rows of six, nothing hidden off to the side. */
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 4px;padding:14px 0 6px}
.swatches button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;border:0;background:none;padding:0;cursor:pointer;font-size:12px;line-height:1.2;text-align:center;color:var(--steel)}
.swatches i{width:38px;height:38px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.swatches .more-colors i{display:grid;place-items:center;font-style:normal;font-size:20px;color:var(--steel);background:var(--card)}
.results .studio.ai-wait::after{content:"";grid-area:1 / 1;align-self:stretch;justify-self:stretch;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:250% 100%;animation:aiwait 1.6s linear infinite}
@keyframes aiwait{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.results .studio.ai-wait::after{animation:none;background:rgba(255,255,255,.12)}}
.swatches button[aria-checked=true] i{box-shadow:0 0 0 2.5px var(--ink)}
.swatches button[aria-checked=true]{color:var(--ink);font-weight:700}
@media (max-width:340px){.swatches{grid-template-columns:repeat(5,minmax(0,1fr))}}
.hair-top{margin:0 0 12px}
.hair-ask{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;padding:14px 16px}
.ask-q{margin:0 0 10px;font-weight:700;font-size:17px}
.ask-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ask-btns button{padding:0 8px}
.hair-filters{display:grid;gap:8px}
.seg-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.seg-label{min-width:72px;font-size:15px;color:var(--steel)}
.seg-row .seg button{padding:8px 10px}
.sliders{display:grid;gap:8px;margin:8px 0}
.sliders label{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;font-size:15px;color:var(--steel)}
.sliders input{width:100%;height:44px;margin:0;accent-color:var(--amber)}
.sliders label.check{grid-template-columns:auto 1fr;gap:10px;color:var(--ink-2)}
.sliders label.check input{width:22px;height:22px}

/* ---------- dialogs ---------- */
/* svh: an iPhone's vh is the screen with Safari's bars hidden, and a dialog opens with them showing, so a vh cap let its
   bottom buttons run under the toolbar instead of scrolling. .no-dialog: Safari before iOS 15.4 has no <dialog> (app.js). */
dialog{border:0;border-radius:22px;padding:20px;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow:auto;color:var(--ink)}
.no-dialog{display:none}
.no-dialog[open]{display:block;position:fixed;top:12px;left:0;right:0;margin:0 auto;z-index:50;background:#fff;box-shadow:0 0 0 100vmax rgba(16,20,38,.55)}
dialog::backdrop{background:rgba(16,20,38,.55)}
dialog h3{font-size:22px;font-stretch:115%;margin-bottom:12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair figure{margin:0}
.pair img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#E9EDF3}
.pair figcaption{text-align:center;font-size:14px;color:var(--steel);margin-top:4px}
dialog .status{margin:0;color:var(--ink);padding:8px 0;font-size:17px;font-weight:600}
dialog .status:empty{display:none}
.spinner{width:100%;aspect-ratio:1;border-radius:14px;background:linear-gradient(90deg,#E9EDF3,#F7F8FA,#E9EDF3);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
#cardCanvas,#saveImg{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
/* Barber card: the 9:16 picture is a preview that never fills a phone screen; the controls sit in a compact two-column grid,
   and Save / Share / Copy link / Close stay pinned to the bottom of the dialog however far it scrolls (375 px iPhone). */
#cardCanvas{display:block;width:auto;max-width:100%;max-height:40vh;max-height:40svh;margin:0 auto}
.card-edit{margin:10px 0 0;border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.card-edit summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:6px 0 4px}
.spec-grid label{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--steel);min-width:0}
.spec-grid select,.card-fix select,.card-fix textarea{width:100%;min-height:40px;padding:6px 8px;border-radius:10px;border:1px solid #808A9C;background:var(--card);color:var(--ink);font-size:16px}
.spec-grid select:disabled{opacity:.45}
.spec-top{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--steel)}
.spec-top span{flex:1}
.spec-top button.secondary{min-height:40px;min-width:48px;padding:0;font-size:22px}
.spec-top output{min-width:64px;text-align:center;font-weight:700;color:var(--ink);font-size:17px}
/* The card's one feedback box, right under the card: a question and three role chips, so one tap starts it. */
.card-ask{margin:10px 0 0;padding:10px 12px;border-radius:14px;background:var(--amber-tint);border:1px solid var(--amber)}
.card-ask-q{margin:0 0 6px;font-weight:700;font-size:16px;line-height:1.3}
.role-chips{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.role-lead{font-size:14px;color:var(--steel);margin-right:2px}
.role-chips .chip-btn{min-height:44px;padding:6px 10px;font-size:14px;font-weight:600}
.role-chips .chip-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.card-nudge{margin:8px 0 0;font-size:14px;color:var(--warn);font-weight:600}
.card-redo{width:100%;margin-top:8px;min-height:44px}
.card-fix{display:grid;gap:6px;margin:8px 0 0;font-size:14px}
.card-fix .note{margin:0}
#cardDialog .card-actions{position:sticky;bottom:-20px;z-index:1;margin:10px -20px -20px;padding:10px 20px 14px;background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
#cardDialog .card-actions button{min-height:44px;padding:0 10px}

/* Clearly mark AI-only hairstyles without inventing unrenderable cutout thumbnails. */
.hair-ai-thumb{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border-radius:10px;background:#ece8ef;color:#1b2340;font-weight:800;letter-spacing:.04em}

/* Hair-first exploration: touch-friendly controls and a compact visit-only shortlist. */
.hair-play-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.hair-play-controls button{min-height:44px;flex:1 1 125px}
.hair-play-controls [aria-pressed="true"]{outline:2px solid var(--amber);outline-offset:1px}
.ref-cut{margin-top:12px}
.ref-cut button{min-height:44px;width:100%}
.ref-cut .note{margin:6px 0 0}
.sb-row{margin-top:12px}
.sb-row .sb-open{min-height:44px;width:100%}
.sb-row .note{margin:6px 0 0}
.sb-row .row button{min-height:44px;flex:1}
.sb-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sb-fig{margin:0;text-align:center;font-size:.85rem}
.sb-fig img,.sb-none{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--line,#eee)}
.sb-fig img.mirror{transform:scaleX(-1)}
.sb-none{font-size:.75rem;padding:4px;box-sizing:border-box}
.card-sb{margin:8px 0}
.beta-tag{display:inline-block;margin:0 0 6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--amber-tint);color:var(--warn)}
.beta-tag[hidden]{display:none}
.hair-play-status:empty{display:none}
.hair-shortlist{padding:12px 14px;border:1px solid var(--line);border-radius:16px;margin:14px 0;background:var(--card)}
.hair-shortlist h2{font-size:17px;margin:0 0 4px}
.hair-shortlist .note{margin:4px 0 10px}
.hair-shortlist-items{display:flex;gap:8px;flex-wrap:wrap}
.hair-shortlist-items button{min-height:44px;display:flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--page);color:var(--ink);cursor:pointer}
.hair-shortlist-items button[aria-pressed="true"]{border-color:var(--amber)}
.hair-shortlist-items img{width:36px;height:36px;object-fit:contain;border-radius:7px}

/* Five hairstyle vibes wrap on narrow phones rather than clipping outside the viewport. */
.hair-vibes{display:flex;flex-wrap:wrap;max-width:100%;gap:2px}
.hair-vibes button{white-space:normal;min-height:44px}

.hair-shortlist #hairCompare,.hair-shortlist #hairMyLooks{margin-top:10px;min-height:44px;width:100%}


/* Hair-first discovery: emphasize what testers found fun while keeping glasses available.
   The on-face preview remains clearly identified as an AI-made sample. */
.paths .path-hair{position:relative;overflow:hidden;background:var(--ink);color:#DDE3F2;border:0;padding-bottom:26px}
.paths .path-hair b{color:#fff}
.paths .path-hair::after{content:'';position:absolute;left:18px;right:18px;bottom:10px;height:5px;border-radius:4px;background:var(--amber)}
.paths .path-hair:hover{outline:2px solid var(--amber);outline-offset:2px}
.paths .path-glasses{background:var(--card);border:1.5px solid var(--line);color:var(--steel);padding-bottom:18px}
.paths .path-glasses b{color:var(--ink)}
.paths .path-glasses::after{content:none}
.paths .path-glasses:hover{border-color:var(--ink)}
/* Sunglasses lens tint chooser (lens-tint.js) and the colour dots on a frame card: the hair studio's .swatches grid stays its own. */
.lens-tint{margin:10px 0 0}
.lens-tint .lt-head{margin:0 0 6px;font-weight:700;font-size:14px}
.lens-tint .lt-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.lens-tint .lt-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:18px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;cursor:pointer}
.lens-tint .lt-chip i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.lens-tint .lt-chip[aria-pressed="true"]{border-color:var(--ink);font-weight:700}
.lens-tint .lt-note{margin:2px 0 0}
.card .swatches{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0}
.card .swatches .swatch{width:36px;height:36px;border:2px solid var(--line);border-radius:50%;box-shadow:inset 0 0 0 2px var(--card)}
.card .swatches .swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--card),0 0 0 1.5px var(--ink)}

/* ---------- size marking and the optician's frame brief (js/frame-brief.js) ---------- */
.size-key{margin:-4px 0 10px;font-size:14px}
.now .mk{font-variant-numeric:tabular-nums;white-space:nowrap}
.brief-frames .mk{font-variant-numeric:tabular-nums;white-space:nowrap} /* 56□18-148 stays on one line: the string an optician reads first */
.card .brief-add{display:block;width:100%;margin-top:8px;min-height:44px;border:1px dashed var(--line);border-radius:12px;background:none;font-size:15px;font-weight:600;color:var(--ink-2);cursor:pointer}
.card .brief-add[aria-pressed="true"]{border:1px solid var(--good);color:var(--good);background:#E3F2EA}
#briefDialog{width:min(640px,calc(100vw - 24px))}
/* "Measure more precisely with a card" (js/card-scale.js): the photo crop with two edge lines, all on the phone */
.card-scale .card-steps{margin:0 0 10px;padding-left:20px;display:grid;gap:6px}
.card-scale label.file-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;font-weight:700;font-size:16px;cursor:pointer;background:var(--ink);color:#fff}
.card-scale label.file-btn:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.card-scale .card-view{display:block;width:100%;height:auto;border-radius:12px;touch-action:none;background:#222;margin:8px 0}
.card-scale .card-sliders{display:grid;gap:4px;margin:4px 0}
.card-scale .card-sliders label{display:grid;grid-template-columns:7em 1fr;align-items:center;gap:8px;font-size:15px}
.card-scale .card-sliders input{width:100%;min-height:36px}
.card-vs{margin:8px 0 4px;font-size:15px;line-height:1.5}
.brief-head h3{margin:0 0 2px}
.brief-head .note{margin:0 0 10px}
.brief-caveat{margin:0 0 12px;padding:10px 12px;border-left:4px solid var(--amber);background:var(--amber-tint);border-radius:8px;font-weight:600;font-size:15px;line-height:1.4}
.brief-sample{margin:0 0 8px;color:var(--warn);font-weight:700;font-size:15px}
.brief-sheet table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
.brief-sheet th,.brief-sheet td{text-align:left;vertical-align:top;padding:7px 6px;border-bottom:1px solid var(--line)}
.brief-facts th{width:42%;font-weight:400;color:var(--steel)}
.brief-sheet td small{display:block;font-size:13px;color:var(--steel)}
.brief-sheet td b{font-variant-numeric:tabular-nums}
.brief-sheet h4{margin:16px 0 4px;font-size:17px}
.brief-frames thead th{font-size:13px;color:var(--steel);font-weight:600}
.brief-frames{table-layout:fixed}
.brief-frames th:first-child{width:36%}.brief-frames th:nth-child(2){width:28%}
.brief-frames td:last-child{font-size:14px}
.brief-frames td{overflow-wrap:break-word}
.brief-frames a{font-weight:700;text-decoration-color:var(--amber);text-decoration-thickness:2px}
.brief-url{display:none!important}
.brief-key{margin-top:10px;font-size:13px}
.brief-local{margin:8px 0 0;font-size:13px}
.brief-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}
.brief-actions button{min-height:44px;padding:0 10px}
/* Print: only the brief, on one letter or A4 page. The store links print as their full address. */
.cut-upkeep{margin:6px 0 0;font-size:13px;color:var(--steel)}
.cut-script{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.cut-script-h{margin:0 0 4px;font-weight:700;font-size:14px}
.cut-script-say{margin:0;font-size:15px;line-height:1.45}
.cut-script-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--steel);margin-top:6px}
.cut-script-foot .ghost{min-height:40px;padding:0 12px;font-size:14px;flex:none}
/* Barber card: "say it" box and beard controls (js/card-tools.js) */
.card-say{margin:6px 0 8px;border:1px dashed var(--line);border-radius:12px;padding:6px 10px}
.card-say summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center}
.card-say label{display:block;font-size:14px;color:var(--steel);margin-top:4px}
.card-say textarea{width:100%;min-height:72px;padding:8px;border-radius:10px;border:1px solid #808A9C;background:var(--card);color:var(--ink);font-size:16px;box-sizing:border-box}
.say-actions{gap:8px;flex-wrap:wrap;margin-top:6px}
.say-h{margin:8px 0 4px;font-size:14px;font-weight:700}
.say-chips,.say-missed{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.say-chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 10px;font-size:14px;max-width:100%;overflow-wrap:anywhere}
.say-chip::before{content:"\2713\00a0";color:#2d8a73;font-weight:800}
.say-missed li{border-radius:999px;padding:4px 10px;font-size:13px;background:#f6e7e3;color:#7a2e1b;overflow-wrap:anywhere}
.card-beard,.card-cut{border:0;margin:8px 0 0;padding:0;min-width:0}
.card-beard legend,.card-cut legend{font-weight:700;font-size:15px;padding:0;margin-bottom:2px}
.say-ask{gap:8px;flex-wrap:wrap;margin-top:4px}
.say-choice{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media print{
  @page{margin:12mm}
  body.print-brief{background:#fff}
  body.print-brief > *:not(#briefDialog){display:none!important}
  body.print-brief #briefDialog{position:static!important;inset:auto;transform:none;margin:0;padding:0;width:auto;max-width:none;max-height:none;overflow:visible;border:0;border-radius:0;box-shadow:none;color:#000;font-size:11pt}
  body.print-brief #briefDialog::backdrop{background:none}
  body.print-brief .brief-actions,body.print-brief #briefStatus,body.print-brief .brief-budget{display:none!important}
  body.print-brief .brief-lens{display:none!important}
  body.print-brief .brief-look{border:2px solid #000;background:none}body.print-brief .brief-look-main{font-size:15pt}
  body.print-brief .brief-qr{width:28mm;height:28mm}body.print-brief .brief-link-url{font-size:8.5pt}
  body.print-brief .brief-sheet table{font-size:10.5pt}
  body.print-brief .brief-sheet th,body.print-brief .brief-sheet td{padding:4px 5px}
  body.print-brief .brief-url{display:block!important;font-size:8.5pt}
  body.print-brief .brief-caveat{border:1px solid #000;border-left:4px solid #000;background:none}
  body.print-brief tr{break-inside:avoid}
  body.print-brief .brief-frames th:first-child{width:38%}body.print-brief .brief-frames th:nth-child(2){width:24%}
  body.print-brief .brief-sheet h3{font-size:18pt}body.print-brief .brief-local{margin:4px 0 0}
}

/* The cut from four sides (js/card-views.js): a compact strip under the card, a larger view, and a one-page print. */
.card-views{margin:10px 0 0}
.cut-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;padding:4px;border:1px solid var(--line);border-radius:14px;background:#fbfaf8;cursor:zoom-in;min-height:0}
.cut-strip .cut-fig{margin:0}
.cut-fig svg{display:block;width:100%;height:auto}
.cut-fig figcaption{font-size:12px;font-weight:700;text-align:center;color:var(--ink);margin-top:2px}
.cut-strip-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--steel);margin-top:4px}
.cut-strip-foot .ghost{min-height:40px;padding:0 10px;font-size:14px}
.views-dialog{width:min(96vw,760px);max-width:none}
.views-dialog .cut-h{margin:0 0 8px;font-size:18px}
.cut-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cut-grid .cut-fig{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fbfaf8}
.cut-grid .cut-fig figcaption{padding:3px 0 5px}
.cut-legend{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:8px 0;font-size:13px;color:var(--steel)}
.cut-legend li{display:flex;align-items:center;gap:6px}
.cut-legend i{display:inline-block;width:18px;height:12px;border-radius:3px}
.cut-legend i.dash{height:0;border-top:3px dashed;border-radius:0}
@media (min-width:640px){.views-dialog .cut-grid{grid-template-columns:repeat(4,1fr)}}
#cardPrint{display:none}
@media print{
  @page{size:auto;margin:9mm}
  body.print-card{background:#fff!important}
  body.print-card>*:not(#cardPrint),body.print-card dialog{display:none!important}
  body.print-card #cardPrint{display:block;color:#000;font:11pt/1.35 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
  #cardPrint *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  #cardPrint header{border-bottom:3px solid #ff7a59;padding-bottom:4mm;margin-bottom:4mm}
  #cardPrint .cp-kicker{margin:0;font-weight:700;color:#9a3d1f}
  #cardPrint h1{margin:1mm 0 0;font-size:22pt}
  #cardPrint h2{margin:0;font-size:16pt}
  #cardPrint .cp-sug{margin:2mm 0 0;font-weight:700;background:#fdeee6;padding:1.5mm 3mm;display:inline-block}
  #cardPrint .cp-main{display:grid;grid-template-columns:1fr 46mm;gap:5mm;align-items:start}
  #cardPrint .cut-grid{grid-template-columns:repeat(2,minmax(0,56mm));gap:3mm;break-inside:avoid}
  #cardPrint .cut-fig{border:1px solid #ccc;border-radius:2mm}
  #cardPrint .cut-fig figcaption{font-size:9pt}
  #cardPrint aside p{margin:0 0 2mm;font-weight:700;font-size:9pt}
  #cardPrint aside .cp-small{font-weight:400;color:#444;font-size:8pt}
  #cardPrint .cut-qr{width:44mm;height:44mm;display:block;margin-bottom:2mm}
  #cardPrint .cut-legend{font-size:8pt;margin:1mm 0;gap:1mm 3mm}
  #cardPrint .cp-text{display:grid;grid-template-columns:1fr 1fr;gap:6mm;margin-top:4mm;font-size:9.5pt;break-inside:avoid}
  #cardPrint .cp-text ol{margin:0;padding-left:5mm}
  #cardPrint.cp-has-plan .cp-main{grid-template-columns:1fr;gap:3mm}
  #cardPrint.cp-has-plan .cut-grid{grid-template-columns:repeat(4,minmax(0,32mm));justify-content:space-between;gap:2mm}
  #cardPrint.cp-has-plan .cut-fig figcaption{font-size:8pt}
  #cardPrint.cp-has-plan aside{display:grid;grid-template-columns:28mm 1fr 1fr;gap:1mm 4mm;align-items:start}
  #cardPrint.cp-has-plan aside .cut-qr{width:26mm;height:26mm;margin:0;grid-row:1/4}
  #cardPrint.cp-has-plan aside p,#cardPrint.cp-has-plan aside .cp-small{font-size:7.5pt;margin:0}
  #cardPrint.cp-has-plan aside .cut-legend{grid-column:2/4;font-size:7.5pt}
  #cardPrint.cp-has-plan header{margin-bottom:2mm;padding-bottom:2mm}#cardPrint.cp-has-plan h1{font-size:18pt}#cardPrint.cp-has-plan h2{font-size:13pt}
  #cardPrint.cp-has-plan .cp-text{font-size:7.5pt;margin-top:1.5mm;gap:4mm;line-height:1.15}
  #cardPrint.cp-has-plan .cp-small{font-size:8pt}
  #cardPrint .cp-plan{margin-top:2mm;border-top:1px solid #999;padding-top:2mm;break-inside:avoid}
  #cardPrint .cp-plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:5mm;font-size:7.5pt;line-height:1.15}
  #cardPrint .cp-plan .cp-sum{margin:0 0 1mm}#cardPrint .cp-plan h3{margin:0 0 1mm;font-size:9.5pt}#cardPrint .cp-plan ol{margin:0;padding-left:5mm}#cardPrint .cp-plan p{margin:1mm 0 0}
}

/* Progressive chip and "My glasses say 52□18-140" (js/frame-size.js) */
.prog-row{margin:0 0 8px}
#progChip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
#progChip[aria-pressed="true"]::before{content:"✓ "}
.size-find{margin:4px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 14px}
.size-find > summary{min-height:48px;display:flex;align-items:center;font-weight:700;font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums}
.size-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:6px 0 4px}
.size-form label{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--steel);flex:1 1 72px;min-width:64px}
.size-form input{min-height:44px;width:100%;padding:8px 10px;border-radius:10px;border:1px solid #808A9C;background:var(--card);color:var(--ink);font:600 17px/1.2 var(--font);font-variant-numeric:tabular-nums}
.size-sep{padding-bottom:10px;color:var(--steel);font-weight:700}
.size-form button{flex:1 0 100%}
.size-status.is-err{color:var(--warn);font-weight:600}
.size-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.card .size-vs{margin:2px 0 0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--steel)}
.card .size-vs.is-close b{color:var(--good)}
.card .size-vs.is-far b{color:var(--warn)}
.rx-form select{min-height:44px;width:100%;padding:8px 10px;border-radius:10px;border:1px solid #808A9C;background:var(--card);color:var(--ink);font:600 17px/1.2 var(--font);font-variant-numeric:tabular-nums}
.rx-form label{flex:1 1 130px}
.rx-form button{flex:0 0 auto}
.rx-note{margin:2px 0 4px}
.card .lens-thick{margin:4px 0 0;font-size:13px;font-variant-numeric:tabular-nums;color:var(--steel)}
.card .lens-thick.is-thin b{color:var(--good)}
.card .lens-thick.is-thick b{color:var(--warn)}
.card .prog-badge{display:inline-block;margin:4px 0 0;padding:1px 9px;border-radius:999px;background:var(--amber-tint);color:var(--ink);font-size:13px}
/* Colour technique layer (js/hairtechnique.js): same box as the picture, above it, never takes a touch */
.studio canvas.tech-layer{z-index:3;pointer-events:none;cursor:default}
.studio canvas.tech-layer[hidden]{display:none}
.hair-tex,.hair-tech{flex-wrap:wrap;max-width:100%}
.hair-tex button,.hair-tech button{padding:8px 11px}
.tech-row{margin-top:10px}
/* My cuts (js/my-cuts.js): "Save this cut" on the barber card, and the list of cards kept on this phone */
.card-mycut{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.card-mycut label{display:block;font-size:14px;color:var(--steel);margin-bottom:4px}
.card-mycut .mycut-row{gap:8px;margin:0}
.card-mycut input{flex:1 1 200px;min-width:0;min-height:44px;padding:0 10px;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:10px}
.card-mycut .note{margin:6px 0 0}
.mycuts{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.mycut{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mycut-text{display:grid;gap:2px;overflow-wrap:anywhere}
.mycut-label{font-size:15px;font-weight:600;color:var(--ink-2);font-style:italic}
.mycut-text small{color:var(--steel);font-size:13px}
.mycut-actions{margin:8px 0 0;gap:8px}
.mycut-actions button{min-height:44px}

/* Optician brief: optional budget (js/frame-brief.js), not printed: its value is on the sheet itself. */
.brief-budget{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.brief-budget input{width:8em;min-height:44px;font:inherit;padding:0 10px;border:1px solid var(--line);border-radius:10px}
.brief-budget small{flex-basis:100%}
/* Barber's booking link on the card (js/booking-link.js) */
.card-book{margin:10px 0 0}
.card-book-link{margin:0 0 6px;font-weight:700}
.card-book-link a{overflow-wrap:anywhere}
.card-book-edit summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.card-book-edit label{display:block;font-size:14px;margin:4px 0}
.card-book-edit input{width:100%;min-height:44px;font:inherit;padding:0 10px;border:1px solid var(--line);border-radius:10px}
.card-book-edit .row{margin-top:8px}
/* "Know someone deciding on a cut? Send them this." under a result: a quiet line, its button the same Share as above */
.share-nudge{margin:10px 0 0;font-size:14px;color:var(--steel);display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.share-nudge .link{min-height:44px;padding:0 4px;font-size:inherit}
.share-nudge .link:disabled{opacity:.45;cursor:default;text-decoration:none}

/* Plain-words frame search (js/frame-search.js) */
.fs-form{margin:4px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:12px 14px}
.fs-label{display:block;font-weight:700;font-size:15px;margin:0 0 6px}
.fs-row{display:flex;gap:8px;align-items:stretch}
.fs-row input{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid #808A9C;background:var(--card);color:var(--ink);font:500 17px/1.2 var(--font)}
.fs-row button{flex:0 0 auto;min-height:44px}
.fs-help{margin:6px 0 0}
.fs-status{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--amber-tint);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.fs-status #fsLine{margin:0;flex:1 1 200px;font-weight:600;font-size:15px}
.fs-status #fsMissed{margin:0;flex:1 0 100%}
.fs-status #fsClear{min-height:44px}

/* Korean breaks lines between words (spaces), not inside them; a very long word may still wrap. */
:lang(ko){word-break:keep-all;overflow-wrap:break-word}

/* Barber client list (js/client-list.js): the same box as My cuts, with the nickname warning in plain sight. */
.card-client .client-warn{color:var(--ink,inherit);font-weight:600;margin:6px 0 0}
.mycut .client-rename{width:100%;min-height:44px;padding:0 10px;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:10px}
/* The store widget (/embed, built from index.html by scripts/build-embed.mjs): the same app, compact, in an iframe. */
[data-embed] .top{padding-top:8px;padding-bottom:4px}
[data-embed] #install,[data-embed] #scan>.back,[data-embed] #iosHint{display:none!important}
[data-embed] footer.embed-foot{padding-top:16px;padding-bottom:12px;font-size:13px}
.visit-history{margin-top:8px}.visit-history summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.visits{list-style:none;margin:0;padding:0}.visits .visit{padding:8px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.visit-photos{gap:8px}.visit-photos img{height:auto;border-radius:8px;max-width:45%}
.card-mycut textarea{width:100%;box-sizing:border-box;min-height:56px;padding:8px 10px;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:10px;resize:vertical}
/* Shop mode (js/shop-local.js): the shop's own list on its tablet, frame codes, New client, closest on the board */
.shop-mode{border:1.5px solid var(--ink);border-radius:14px;padding:12px 14px;margin:0 0 14px;background:var(--card)}
.shop-mode h2{margin:0 0 6px;font-size:19px}
.shop-mode p{margin:6px 0}
.shop-name-row{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:15px}
.shop-name-row input{min-height:44px;font-size:16px;padding:0 10px;border-radius:10px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink)}
.shop-file:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.shop-report{margin:6px 0;padding-left:20px;font-size:14px;max-height:220px;overflow:auto}
.new-client{min-height:56px;font-size:18px}
.shop-stale{color:var(--warn);font-weight:700}
.shop-tools{margin:0 0 12px}
.shop-tools .new-client{margin:0 0 10px}
.board-list{padding-left:20px}
.board-list li{margin:8px 0}
.board-list p{margin:2px 0}
.card .sku{margin:2px 0;font-weight:700;letter-spacing:.02em}
.buy.is-code{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font-weight:700}

/* Optician-first brief (research/OPTICIAN_WORKFLOW_STUDY_2026-11-07.md item 1): the "Look for" line first, in large type.
   Each part (a size range, a front width, the PD estimate) is one unbreakable string; lines break only between parts. */
.nw{white-space:nowrap}
.brief-look{margin:0 0 12px;padding:10px 12px;border-left:6px solid var(--good);background:#E3F2EA;border-radius:10px;color:var(--ink)}
.brief-look-main{margin:0;font-size:20px;line-height:1.35;font-weight:800;font-variant-numeric:tabular-nums}
.brief-look-k{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);font-weight:700}
.brief-look .sep{color:var(--steel);font-weight:400}
.brief-own{margin:6px 0 0;font-size:15px}
.brief-facts-f{color:var(--ink-2)!important}
.brief-notmeasured{margin:12px 0 8px;font-size:14px;font-weight:600;color:var(--warn)}
.brief-link{display:flex;gap:12px;align-items:center;margin:12px 0 0;padding:10px;border:1px solid var(--line);border-radius:10px}
.brief-link p{margin:0;min-width:0;font-size:14px}
.brief-link small{display:block;color:var(--steel);font-size:13px;margin:2px 0}
.brief-link-url{display:block;font-size:12px;overflow-wrap:anywhere}
.brief-qr{flex:none;width:96px;height:96px;background:#fff}
.brief-frames th:first-child{width:40%}.brief-frames th:nth-child(2){width:30%}
.brief-lens{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.brief-lens select{min-height:44px;font:inherit;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
/* Size-only list (#sizes, item 4): no photo, no camera. */
.sizes{max-width:760px;margin:0 auto}
.sz-look{margin:6px 0;padding:8px 12px;border-left:6px solid var(--good);background:#E3F2EA;border-radius:10px;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sizes .size-form{margin:8px 0}
.sizes #szKind{margin:8px 0}
.sz-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.sz-acts button{min-height:44px}
.sz-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:12px}
.sz-facts{color:var(--ink-2)}

/* ---------- barber view (js/barber-view.js): the card full screen, one huge number per zone, read at arm's length ---------- */
dialog.bv{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border-radius:0;background:#10142a;color:#fff;overflow:hidden;
  display:flex;flex-direction:column}
dialog.bv:not([open]){display:none}
.bv-top{padding:max(8px,env(safe-area-inset-top)) 16px 6px;flex:none}
.bv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bv-name{margin:0;font-size:20px;line-height:1.2;font-weight:800;color:#fff}
.bv-name2{display:block;font-size:16px;font-weight:600;color:#cfd5e6}
.bv-close,.bv-tab,.bv-lang,.bv-step,.bv-fix{min-height:44px;border-radius:12px;border:1px solid #47507a;background:#1b2340;color:#fff;font-weight:700;padding:0 12px;cursor:pointer}
.bv-close{flex:none}
.bv-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.bv-langs{display:flex;gap:4px;align-items:center;margin-right:6px}
.bv-langs-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bv-lang{padding:0 10px;min-width:44px}
.bv-lang[aria-pressed="true"],.bv-tab[aria-pressed="true"]{background:#F2B66B;border-color:#F2B66B;color:#10142a}
.bv-sug{margin:6px 0 0;font-size:13px;color:#cfd5e6;line-height:1.35}
.bv-body{flex:1;min-height:0;display:flex;flex-direction:column}
.bv-zones{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;outline-offset:-3px}
.bv-zones::-webkit-scrollbar{display:none}
.bv-zone{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:10px 16px;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;
  background:#fff;color:#111;border-left:8px solid #10142a;border-right:8px solid #10142a;box-sizing:border-box}
.bv-zone>*{flex-shrink:0}
.bv-label{margin:0;font-size:26px;line-height:1.15;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8a4a12}
.bv-label2{display:block;font-size:20px;text-transform:none;letter-spacing:0;color:#5b6478;font-weight:700}
.bv-val{margin:6px 0 2px;font-weight:900;line-height:1;white-space:nowrap;overflow:hidden;color:#0b0b12;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bv-arrow{font-size:.6em;padding:0 .08em;vertical-align:.2em;color:#5b6478}
.bv-units{margin:4px 0 0;font-size:24px;font-weight:800;color:#1b2340}
.bv-words{margin:8px 0 0;font-size:20px;line-height:1.3;color:#2b3663;font-weight:600}
.bv-words2{display:block;margin-top:4px;color:#5b6478}
.bv-fade-title{margin:4px 0 0;font-size:22px;font-weight:800}
.bv-fade svg{width:100%;height:auto;max-height:52vh;margin-top:6px}
.bv-fade{justify-content:flex-start}
.bv-nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 16px}
.bv-step{min-width:64px;font-size:28px;line-height:1}
.bv-pos{font-weight:700;color:#cfd5e6}
.bv-full,.bv-talk{flex:1;min-height:0;overflow:auto;padding:12px 16px;background:#fff;color:#111}
.bv-full-text ol{margin:0 0 14px;padding-left:22px;font-size:20px;line-height:1.4}
.bv-full-text li{margin-bottom:6px}
.bv-rule{font-size:15px;color:#5b6478}
.bv-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:6px 16px max(10px,env(safe-area-inset-bottom))}
.bv-awake{font-size:13px;color:#cfd5e6}
@media (min-width:900px){
  .bv-zones{display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:none;padding:6px 16px 12px;align-content:start}
  .bv-zones{grid-auto-rows:max-content}
  .bv-zone{border:0;border-radius:18px;padding:16px 22px;justify-content:flex-start;overflow:visible}
  .bv-fade{grid-column:1 / -1}
  .bv-fade svg{max-height:46vh}
  .bv-nav{display:none}
  .bv-label{font-size:30px}
  .bv-units{font-size:28px}
  .bv-words{font-size:22px}
  .bv-name{font-size:24px}
}
/* "Point to answer" (js/chair-talk.js): big buttons, the client's language big and English under it */
.talk-hint{margin:0 0 8px;font-size:15px;color:#5b6478}
.talk-group{border:0;margin:0 0 10px;padding:0}
.talk-group legend{font-size:15px;font-weight:800;color:#8a4a12;margin-bottom:6px;padding:0}
.talk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.talk-btn{min-height:72px;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border-radius:14px;border:2px solid #1b2340;background:#f4f6f8;color:#111;cursor:pointer}
.talk-icon{flex:none;width:40px;height:40px;border-radius:50%;background:#1b2340;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.talk-words{display:flex;flex-direction:column;line-height:1.2}
.talk-l2{font-size:20px;font-weight:800}
.talk-en{font-size:16px;font-weight:600;color:#2b3663}
.talk-btn .talk-en:first-child{font-size:20px;font-weight:800;color:#111}
.talk-big{position:fixed;inset:0;z-index:5;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;margin:0}
.talk-big-icon{margin:0;font-size:72px;line-height:1}
.talk-big-l2{margin:0;font-size:clamp(44px,12vw,96px);font-weight:900;line-height:1.1}
.talk-big-en{margin:0;font-size:clamp(28px,7vw,56px);font-weight:800;color:#2b3663;line-height:1.15}
.talk-back{min-height:56px;min-width:140px;margin-top:16px;border-radius:14px;border:0;background:#1b2340;color:#fff;font-weight:800;font-size:20px}
/* the card dialog's own way in */
.card-bv{width:100%;min-height:48px;margin:10px 0 0;font-weight:800}
/* barber station (js/station.js, /?station=1): a tablet at the chair; one big Scan button over the page */
body.station-on{overflow:hidden}
.station{position:fixed;inset:0;z-index:40;overflow:auto;background:var(--page);padding:max(20px,env(safe-area-inset-top)) 20px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.station h1{margin:12px 0 0;font-size:32px;font-stretch:115%}
.station-lead{margin:0;font-size:20px}
.station .station-scan{min-height:96px;min-width:min(520px,100%);font-size:28px;font-weight:800;border-radius:20px}
.station-notice{max-width:640px;margin:0;font-size:15px;color:var(--steel)}
.station-cam{position:relative;width:min(640px,100%)}
.station-cam video{width:100%;border-radius:16px;background:#000;display:block}
.station-cam .station-stop{margin-top:10px;min-height:48px;min-width:160px}
.station-status{font-weight:700;font-size:18px;margin:0}
.station-paste{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:640px;width:100%}
.station-paste label{width:100%;font-weight:700}
.station-paste input{flex:1;min-width:220px;min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--line)}
.station-paste button,.station-next{min-height:48px}

/* Studio (for stylists, js/studio.js): a full-screen design panel; tablet landscape from 900px, one column on a phone. */
.stylist-studio[hidden],.ss-compare-sheet[hidden]{display:none}
.stylist-studio{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg,#fff);color:var(--ink,#1d1b26);overflow:hidden}
.ss-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 16px;border-bottom:1px solid var(--line,#d8d6df)}
.ss-title{margin:0;font-size:20px}
.ss-nick{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;font-size:14px}
.ss-nick input,.ss-rename input,.ss-search,.ss-quick,.ss-scratch{min-height:48px;font:inherit;padding:6px 10px;border:1px solid var(--line,#c9c6d4);border-radius:8px;background:var(--card,#fff);color:inherit;min-width:0;width:100%;box-sizing:border-box}
.ss-nick input{max-width:260px}
.ss-main{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:12px 16px}
.ss-left,.ss-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.ss-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ss-tab{min-height:48px;min-width:48px;padding:0 14px;border:2px solid var(--line,#c9c6d4);border-radius:10px;background:var(--card,#fff);color:inherit;font:inherit;font-weight:600}
.ss-tab[aria-selected="true"]{border-color:var(--brand,#3a56d4);background:var(--brand-soft,#e8ecff)}
.ss-opt-row{display:flex;gap:8px;align-items:flex-end}
.ss-rename{display:flex;flex-direction:column;gap:2px;font-size:13px;flex:1}
.ss-pic{margin:0;display:flex;flex-direction:column;gap:4px;align-items:center}
.ss-pic img,.ss-nopic{width:100%;max-width:520px;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#eee;display:flex;align-items:center;justify-content:center}
.ss-pic img[hidden],.ss-nopic[hidden]{display:none}
.ss-pick summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.ss-cuts{display:flex;flex-wrap:wrap;gap:6px;max-height:170px;overflow:auto;margin-top:6px}
.ss-cut{min-height:44px;padding:0 12px;border:1px solid var(--line,#c9c6d4);border-radius:999px;background:var(--card,#fff);color:inherit;font:inherit}
.ss-cut[aria-pressed="true"]{border-color:var(--brand,#3a56d4);background:var(--brand-soft,#e8ecff);font-weight:700}
.ss-views{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ss-view{margin:0;text-align:center;font-size:13px}.ss-view svg{width:100%;height:auto;max-height:34vh;border-radius:8px;border:1px solid var(--line,#d8d6df)}
.ss-set{border:0;margin:0;padding:0;min-width:0}.ss-set legend{font-weight:700;padding:0 0 4px;font-size:15px}
.ss-segs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ss-opt{min-height:48px;min-width:48px;padding:4px 12px;border:2px solid var(--line,#c9c6d4);border-radius:10px;background:var(--card,#fff);color:inherit;font:inherit;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.ss-opt small{font-size:11px;opacity:.75}.ss-opt b{font-size:17px}
.ss-opt[aria-pressed="true"]{border-color:var(--brand,#3a56d4);background:var(--brand-soft,#e8ecff);font-weight:700}
.ss-opt:disabled{opacity:.4}.ss-cm{min-width:84px;text-align:center;font-weight:700;font-size:18px}
.ss-note{display:flex;flex-direction:column;gap:3px;font-size:13px}
.ss-foot{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line,#d8d6df);background:var(--bg,#fff);align-items:center}
.ss-foot button{min-height:48px}.ss-status{flex-basis:100%;margin:0;min-height:1.2em}
.ss-compare-sheet{position:absolute;inset:0;background:var(--bg,#fff);overflow:auto;z-index:2}
.ss-sheet-in{padding:16px;display:flex;flex-direction:column;gap:12px}
.ss-cols{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px}
.ss-col{display:flex;flex-direction:column;gap:6px;min-width:0}.ss-col h3{margin:0;font-size:16px}.ss-col img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.ss-col ul{margin:0;padding-left:16px;font-size:13px}
@media (min-width:900px) and (orientation:landscape){
  .ss-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;overflow:hidden}
  .ss-left,.ss-right{max-height:100%;overflow-y:auto;padding-right:4px}
  .ss-main>*{max-height:calc(100vh - 140px)}
  .ss-pic img,.ss-nopic{max-width:min(100%,46vh)}
  .ss-view svg{max-height:22vh}
}
body.stylist-mode .share-nudge,body.stylist-mode .rate,body.stylist-mode .rate-thanks,body.stylist-mode [data-nudge]{display:none!important}
body.studio-on{overflow:hidden}
.ss-give{display:flex;flex-direction:column;gap:6px;margin:14px 0 6px;padding:12px;border:2px solid var(--brand,#3a56d4);border-radius:12px}
.ss-give h3,.ss-give p{margin:0}.ss-give-btns{display:flex;flex-wrap:wrap;gap:8px}.ss-give-btns button{min-height:48px;flex:1 1 30%}
.ss-set.ss-hl{outline:3px solid var(--brand,#3a56d4);outline-offset:3px;border-radius:10px;transition:outline-color .3s}
.ss-set:focus{outline:2px solid var(--brand,#3a56d4);outline-offset:3px}
.ss-view [data-zone]:focus-visible{outline:2px solid var(--brand,#3a56d4)}
.ss-mirror{margin-bottom:6px}
.ss-legend{margin:0}.ss-status:empty{display:none}
@media (max-width:899px){
  .ss-nick{flex-direction:column;align-items:stretch;gap:2px;min-width:0}.ss-nick input{max-width:none}
  .ss-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 12px calc(6px + env(safe-area-inset-bottom))}
  .ss-foot button{min-height:48px;padding:0 8px;font-size:14px}.ss-show{grid-column:1/-1}
  .ss-pic img,.ss-nopic{max-width:min(100%,60vw)}
}
.ss-col img,.ss-col .ss-nopic{max-height:36vh;object-fit:cover}

/* Studio pro (2026-11-11): grouped controls, definitions, cut sequence, units, large print. */
.ss-free{font-size:13px;font-weight:700;color:var(--brand,#3a56d4)}
.ss-units{display:flex;align-items:center;gap:4px;font-size:13px}.ss-units .ss-opt,.ss-large-btn{min-height:48px;padding:2px 10px;font-size:14px}
.ss-grp{border:1px solid var(--line,#d8d6df);border-radius:12px;padding:10px 12px 6px;margin:0 0 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ss-grp-h{margin:0;font-size:16px;letter-spacing:.01em;padding-bottom:4px;border-bottom:2px solid var(--brand-soft,#e8ecff)}
.ss-set legend{display:flex;align-items:center;gap:8px}
.ss-info{width:48px;height:48px;min-width:48px;border-radius:50%;border:1px solid var(--line,#c9c6d4);background:var(--card,#fff);color:inherit;font:italic 700 14px/1 serif;cursor:pointer}
.ss-info[aria-expanded="true"]{background:var(--brand-soft,#e8ecff);border-color:var(--brand,#3a56d4)}
.ss-def{margin:0 0 6px}.ss-def[hidden]{display:none}.ss-brand{margin:0 0 6px}
.ss-plan{border:2px solid var(--brand,#3a56d4);border-radius:12px;padding:10px 12px;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.ss-plan h3,.ss-plan p{margin:0}.ss-plan-sum{font-weight:700;font-size:15px}.ss-plan-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.35}
.ss-load summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}.ss-load-row{display:flex;gap:8px}.ss-load-in{flex:1;min-width:0;min-height:48px;font:inherit;padding:6px 10px;border:1px solid var(--line,#c9c6d4);border-radius:8px;background:var(--card,#fff);color:inherit}
.stylist-studio.ss-large{font-size:19px}.ss-large .ss-opt{min-height:60px;font-size:19px}.ss-large .ss-opt b{font-size:24px}.ss-large .ss-opt small{font-size:14px}.ss-large .ss-plan-list{font-size:21px}.ss-large .ss-set legend{font-size:20px}.ss-large .note{font-size:16px}
[data-ctl="top"]>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.ss-bar{gap:4px 8px;padding:6px 12px}.ss-title{order:0}.ss-close{order:2;margin-left:auto}.ss-free{order:1;flex:1;font-size:12px;line-height:1.2}.ss-nick{order:3;flex:1 1 100%}.ss-nick span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ss-units{order:4}.ss-large-btn{order:5}.ss-grp{padding:8px 10px 4px}.ss-opt{padding:4px 10px}}

/* Studio photo call-to-action (2026-11-11): add the client's (or the stylist's own) photo from inside Studio. */
.ss-cta{margin:0;padding:14px;border:2px solid var(--brand,#3a56d4);border-radius:14px;background:var(--brand-soft,#e8ecff);display:flex;flex-direction:column;gap:8px;color:var(--text,inherit)}
.ss-cta[hidden],.ss-cta [hidden]{display:none}
.ss-cta-h{margin:0;font-size:18px}.ss-cta p{margin:0}
.ss-cta-btns{display:flex;flex-wrap:wrap;gap:10px}.ss-cta-btns button{flex:1 1 140px;min-height:56px;font-size:17px;font-weight:700}
button.ss-nopic{border:2px dashed var(--brand,#3a56d4);color:var(--brand,#3a56d4);font:inherit;font-weight:700;min-height:48px;cursor:pointer}
button.ss-nopic:disabled{border-color:var(--line,#c9c6d4);color:inherit;cursor:default;opacity:.7}
.ss-replace{min-height:48px}
.ss-pic-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

.price.at-store,.card .price.at-store,.fitting-cap .price.at-store{font-size:14px;font-weight:600;font-stretch:100%;white-space:normal;line-height:1.3}

/* Studio photo set (js/studio-angles.js): Front / Left / Right / Back per option, detail photos, the capture sheet, and the print. */
.ss-angles{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line,#d8d6df);border-radius:12px;padding:10px}
.ss-angles .sa-h{margin:0;font-size:16px}.ss-angles .note{margin:0}
.sa-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sa-tile{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;text-align:center}
.sa-face{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--line,#d8d6df);border-radius:10px;overflow:hidden;background:#f7f5f2;color:inherit;font:inherit}
.sa-face img{width:100%;height:100%;object-fit:cover;display:block}.sa-face svg{width:100%;height:100%;display:block}
button.sa-face{cursor:pointer;border:2px solid var(--brand,#3a56d4)}
.sa-over{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;background:rgba(20,20,30,.72);color:#fff;font-size:11px;line-height:1.2;font-weight:600}
.sa-busy img{opacity:.55}
.sa-name{font-weight:700;line-height:1.2;overflow-wrap:anywhere}.sa-name small{font-weight:400;opacity:.75}
.sa-kind{font-size:11px;color:var(--steel,#5d5a6b)}
.sa-tile[data-kind="ai"] .sa-kind{color:#2d6a4f;font-weight:700}
.sa-mini{min-height:44px;padding:2px 4px;border:1px solid var(--line,#c9c6d4);border-radius:8px;background:var(--card,#fff);color:inherit;font:inherit;font-size:13px}
.sa-mini:disabled{opacity:.45}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sa-st:empty{display:none}
.sa-det{display:flex;flex-direction:column;gap:6px;margin-top:4px}.sa-det-h{margin:0;font-size:15px}.sa-det-h small{font-weight:400;opacity:.7}
.sa-det-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:6px}
.sa-det-list li{display:flex;align-items:center;gap:6px;border:1px solid var(--line,#d8d6df);border-radius:10px;padding:4px;font-size:13px;min-width:0}
.sa-det-list img{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:none}.sa-det-list span{flex:1;min-width:0;overflow-wrap:break-word}
.sa-det-rm{min-width:44px;min-height:44px;font-size:20px}
.sa-det-add{min-height:48px}
.sa-cap{position:fixed;inset:0;z-index:61;background:var(--bg,#fff);overflow-y:auto;overscroll-behavior:contain}
.sa-cap-in{width:100%;max-width:560px;margin:0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
.sa-cap-in>*{flex:none}
.sa-cap-h{margin:0;font-size:19px}.sa-cue{margin:0;font-weight:600}
.sa-helper{border-left:4px solid var(--brand,#3a56d4);background:var(--brand-soft,#e8ecff);padding:8px 10px;border-radius:8px}.sa-helper p{margin:2px 0 0}
.sa-stage{position:relative;width:min(100%,56vh);aspect-ratio:1;margin:0 auto;border-radius:14px;overflow:hidden;background:#2b2a33}
.sa-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sa-stage video.mirror{transform:scaleX(-1)}
.sa-stage .sa-sil-svg{position:absolute;inset:6%;width:88%;height:88%;pointer-events:none}
.sa-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;font-weight:900;color:#fff;text-shadow:0 2px 12px #000;pointer-events:none}
.sa-count:empty{display:none}
.sa-flash::after{content:"";position:absolute;inset:0;background:#fff;opacity:.8}
.sa-cap-st{margin:0;min-height:1.2em;font-weight:600}
.sa-cap-btns{display:flex;flex-wrap:wrap;gap:8px}.sa-cap-btns button{min-height:48px;flex:1 1 40%}
.sa-labels{border:0;margin:0;padding:0}.sa-labels legend{font-weight:700;padding:0 0 4px}.sa-chips{display:flex;flex-wrap:wrap;gap:6px}
.sa-note{display:flex;flex-direction:column;gap:3px;font-size:13px}.sa-note input{min-height:48px;font:inherit;padding:6px 10px;border:1px solid var(--line,#c9c6d4);border-radius:8px}
.sa-th-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.sa-th{margin:0;font-size:10px;text-align:center;min-width:0}.sa-th img,.sa-th svg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;background:#f7f5f2}
.sa-th figcaption{line-height:1.15;overflow-wrap:anywhere}.sa-th i{display:block;font-style:normal;opacity:.75}
.sa-det-print h4{margin:6px 0 4px}.sa-det-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.sa-det-row figure{margin:0;font-size:10px;text-align:center}.sa-det-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
@media (max-width:560px){.sa-det-row{grid-template-columns:repeat(3,minmax(0,1fr))}.ss-cols .sa-th-row{grid-template-columns:repeat(2,minmax(0,1fr))}} /* a narrow compare column: the four views in two rows */
@media print{
  #cardPrint .cp-studio{break-before:auto;margin-top:4mm;border-top:2px solid #ff7a59;padding-top:3mm}
  #cardPrint .cp-studio h3{margin:0 0 2mm;font-size:13pt}
  #cardPrint .cp-opt{break-inside:avoid;margin-bottom:2mm}#cardPrint .cp-opt h4{margin:0 0 1mm;font-size:11pt}
  /* The views fit the paper: four to a row, each at most 38 mm and smaller on a narrow page or margin (A4, US letter, A5). */
  #cardPrint .sa-th-row{grid-template-columns:repeat(4,minmax(0,38mm));gap:2mm;max-width:100%}
  #cardPrint .sa-th{font-size:7.5pt}#cardPrint .sa-th img,#cardPrint .sa-th svg{width:100%;height:auto;aspect-ratio:1}
  #cardPrint .sa-det-row{grid-template-columns:repeat(6,minmax(0,26mm));gap:2mm;max-width:100%}#cardPrint .sa-det-row img{width:100%;height:auto;aspect-ratio:1}#cardPrint .sa-det-row figure{font-size:7pt;min-width:0}
}