/* Size Chart v2 — shared styles. Tokens and components: docs/DESIGN.md §3–4, copied from docs/mockup.html */

/* =========================================================
   TOKENS — one system, two themes. Source of each value: docs/DESIGN.md §3
   ========================================================= */
:root,[data-brand="viossi"]{
  --font-head:'Montserrat',Arial,sans-serif;
  --font-body:'Nunito Sans',Arial,sans-serif;
  --head-w:500; --head-tt:uppercase; --head-ls:.18em;
  --label-tt:uppercase; --label-ls:.18em; --label-font:var(--font-head); --label-fs:12px;
  --fs-body:14px; --lh-body:1.65; --w-body:400; --w-strong:700;
  --c-ink:#1c1c1c; --c-text:#1c1c1c; --c-muted:rgba(28,28,28,.65);
  --c-line:#dddddd; --c-line-strong:#1c1c1c; --c-bg:#ffffff;
  --c-tint:rgba(28,28,28,.04); --c-tint-2:rgba(28,28,28,.08);
  --c-accent:#1c1c1c;         /* measurement lines + number badges */
  --c-garment:#8c8c8c;
  --c-warn:#1c1c1c;
  --r-ctl:0; --r-chip:0;
  --btn-h:44px; --btn-fs:13px; --btn-tt:uppercase; --btn-ls:.18em; --btn-font:var(--font-body); --btn-w:400;
  --in-h:46px;
  --h1:18px; --h2:14px;
}
[data-brand="elagia"]{
  --font-head:'Instrument Sans',Arial,sans-serif;
  --font-body:'Instrument Sans',Arial,sans-serif;
  --head-w:500; --head-tt:none; --head-ls:0;
  --label-tt:none; --label-ls:0; --label-font:var(--font-body); --label-fs:14px;
  --fs-body:16px; --lh-body:1.625; --w-body:500; --w-strong:700;
  --c-ink:#1d1d1f; --c-text:#444444; --c-muted:#6b6b6b;
  --c-line:#e5e5e5; --c-line-strong:#1d1d1f; --c-bg:#ffffff;
  --c-tint:#faf2e6; --c-tint-2:#f3e6d2;
  --c-accent:#c03e35;
  --c-garment:#8c8c8c;
  --c-warn:#c03e35;
  --r-ctl:30px; --r-chip:30px;
  --btn-h:52px; --btn-fs:16px; --btn-tt:none; --btn-ls:0; --btn-font:var(--font-body); --btn-w:500;
  --in-h:52px;
  --h1:24px; --h2:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--c-bg);color:var(--c-text);font:var(--w-body) var(--fs-body)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- type ---------- */
.h1{font:var(--head-w) var(--h1)/1.6 var(--font-head);text-transform:var(--head-tt);letter-spacing:var(--head-ls);color:var(--c-ink)}
.h2{font:var(--head-w) var(--h2)/1.5 var(--font-head);text-transform:var(--head-tt);letter-spacing:var(--head-ls);color:var(--c-ink)}
.label{font:500 var(--label-fs)/1.5 var(--label-font);text-transform:var(--label-tt);letter-spacing:var(--label-ls);color:var(--c-ink)}
.muted{color:var(--c-muted)}
.small{font-size:calc(var(--fs-body) - 2px);line-height:1.55}
.fit-notice{font-size:12px;line-height:1.5;margin-top:12px}
b,strong{font-weight:var(--w-strong);color:var(--c-ink)}

/* ---------- page ---------- */
.sg{max-width:1200px;margin:0 auto;padding:24px 16px 64px;overflow-x:clip}
.sg-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:20px}
.sg-top .muted{font-size:calc(var(--fs-body) - 1px)}
html.embedded .sg-top{display:none}  /* theme modal already shows the title */

/* category tabs: one row, scrolls inside itself on narrow screens */
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;height:40px;padding:0 18px;border:1px solid var(--c-line);border-radius:var(--r-chip);background:var(--c-bg);cursor:pointer;
  font:500 var(--label-fs)/1 var(--label-font);text-transform:var(--label-tt);letter-spacing:var(--label-ls);color:var(--c-ink)}
.cat[aria-selected="true"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
[data-brand="viossi"] .cat{border-color:transparent;padding:0 10px;height:36px}
[data-brand="viossi"] .cats{gap:2px;margin-left:-26px}
@media (min-width:900px){[data-brand="viossi"] .cats{margin-left:-10px}}
[data-brand="viossi"] .cat[aria-selected="true"]{background:none;color:var(--c-ink);border-color:transparent;box-shadow:inset 0 -1px 0 var(--c-ink)}
[data-brand="viossi"] .cat:not([aria-selected="true"]){color:var(--c-muted)}

/* mode switch */
.modes{display:flex;border-bottom:1px solid var(--c-line);margin:20px 0 28px}
.mode{flex:1 1 0;max-width:220px;height:48px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;
  font:500 var(--label-fs)/1 var(--label-font);text-transform:var(--label-tt);letter-spacing:var(--label-ls);color:var(--c-muted)}
.mode[aria-selected="true"]{color:var(--c-ink);border-bottom-color:var(--c-ink)}

/* two-column layout from 900px of the CONTAINER (works inside the theme modal) */
.layout{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
.layout > *{min-width:0}
@media (min-width:900px){
  .sg{padding:40px 40px 96px}
  .layout{grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:56px;align-items:start}
  .layout .figure{position:sticky;top:24px}
}

/* ---------- figure ---------- */
.figure{border:1px solid var(--c-line);border-radius:0;padding:16px 8px 12px;background:var(--c-bg)}
[data-brand="elagia"] .figure{border-color:var(--c-line)}
.figure svg{display:block;width:100%;height:auto;max-height:420px;margin:0 auto;--sc-accent:var(--c-accent);--sc-garment:var(--c-garment)}
.figure .m{cursor:pointer}
.figure figcaption{text-align:center;padding-top:6px}
.finder-figure svg{max-height:300px}
@media (min-width:900px){.figure svg{max-height:560px}.finder-figure svg{max-height:520px}}

/* ---------- controls ---------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--c-line);border-radius:var(--r-ctl);overflow:hidden;padding:0}
.seg button{height:36px;min-width:56px;padding:0 14px;border:0;background:none;cursor:pointer;
  font:500 12px/1 var(--label-font);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--c-muted)}
[data-brand="elagia"] .seg button{font-size:14px;letter-spacing:0;text-transform:none;border-radius:var(--r-ctl);height:34px;margin:2px}
.seg button[aria-pressed="true"]{background:var(--c-ink);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn-h);padding:0 28px;border:1px solid var(--c-ink);border-radius:var(--r-ctl);
  background:var(--c-ink);color:#fff;cursor:pointer;font:var(--btn-w) var(--btn-fs)/1 var(--btn-font);text-transform:var(--btn-tt);letter-spacing:var(--btn-ls)}
.btn.ghost{background:none;color:var(--c-ink)}
.btn.block{width:100%}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--c-ink);text-decoration:underline;text-underline-offset:3px;font-size:calc(var(--fs-body) - 1px)}

/* ---------- size table ---------- */
.tbl-wrap{position:relative;overflow-x:auto;margin:16px -16px 0;padding:0 16px;scrollbar-width:thin}
@media (min-width:900px){.tbl-wrap{margin:16px 0 0;padding:0}}
table.st{border-collapse:separate;border-spacing:0;width:100%;min-width:100%;font-variant-numeric:tabular-nums}
.st th,.st td{padding:0 8px;height:48px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--c-line)}
.st thead th{height:56px;vertical-align:bottom;padding-bottom:10px;border-bottom:1px solid var(--c-line-strong);
  font:500 11px/1.3 var(--label-font);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--c-muted)}
[data-brand="elagia"] .st thead th{font-size:13px;letter-spacing:0;text-transform:none}
.st thead th button{all:unset;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:4px 2px}
.st thead th button:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
.st th:first-child,.st td:first-child{position:sticky;left:0;background:var(--c-bg);text-align:left;padding-left:12px;z-index:1}
.st td:first-child{font-weight:var(--w-strong);color:var(--c-ink)}
.st td:first-child small{display:block;font-weight:var(--w-body);color:var(--c-muted);font-size:12px;line-height:1.2}
.st .col-on{background:var(--c-tint)}
.st thead .col-on{color:var(--c-ink);background:none;box-shadow:inset 0 -2px 0 var(--c-accent)}
.st tr.is-you td{background:var(--c-tint-2)}
.st tr.is-you td:first-child{box-shadow:inset 3px 0 0 var(--c-ink)}
.you-tag{color:var(--c-ink);font-weight:var(--w-strong)}
.num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--c-accent);color:#fff;
  font:700 11px/1 var(--font-body);letter-spacing:0;flex:0 0 auto}
.tbl-fade{position:sticky;right:-16px;float:right;width:24px;height:1px}
.scroll-hint{display:none;text-align:right;margin-top:8px}
.scroll-hint.show{display:block}

/* ---------- how to measure list ---------- */
.htm{margin-top:40px}
.htm-grid{display:grid;gap:24px}
.steps{list-style:none;display:grid;gap:0;border-top:1px solid var(--c-line)}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--c-line);cursor:pointer}
.steps li .num{width:24px;height:24px;font-size:12px;margin-top:1px}
.steps li.is-active{background:var(--c-tint)}
.steps .how{display:block}
.tip{margin-top:20px;padding:16px 0 0;border-top:1px solid var(--c-line)}

/* ---------- finder ---------- */
.stepper{display:flex;gap:6px;align-items:center;margin-bottom:20px}
.stepper span{height:2px;flex:1;background:var(--c-line)}
.stepper span.on{background:var(--c-ink)}
.stepper em{font-style:normal;margin-left:10px;white-space:nowrap}
.why{margin:8px 0 24px;max-width:56ch}
.fields{display:grid;gap:20px}
@media (min-width:640px){.fields.two{grid-template-columns:1fr 1fr}}
.field label{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.field .help{display:block;margin-top:6px}
.inbox{display:flex;align-items:center;height:var(--in-h);border:1px solid var(--c-line);border-radius:var(--r-ctl);background:#fff;padding:0 16px}
.inbox:focus-within{border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink)}
.inbox input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;font-size:16px;height:100%;font-variant-numeric:tabular-nums}
.inbox .unit{color:var(--c-muted);font-size:14px}
.inbox.split{gap:0;padding:0}
.inbox.split > div{display:flex;align-items:center;flex:1;min-width:0;padding:0 16px;height:100%}
.inbox.split > div + div{border-left:1px solid var(--c-line)}
.field.has-error .inbox{border-color:var(--c-warn);box-shadow:0 0 0 1px var(--c-warn)}
.err{display:block;margin-top:6px;color:var(--c-warn);font-size:14px}
[data-brand="viossi"] .err{font-weight:700}
.field.is-active label .num{box-shadow:0 0 0 3px var(--c-tint-2)}
.fit-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.fit-choice button{min-height:56px;padding:8px;border:1px solid var(--c-line);border-radius:var(--r-chip);background:#fff;cursor:pointer;text-align:center;line-height:1.25}
.fit-choice button small{display:block;color:var(--c-muted);font-size:12px;margin-top:2px}
.fit-choice button[aria-pressed="true"]{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
[data-brand="elagia"] .fit-choice button[aria-pressed="true"]{background:var(--c-ink);color:#fff}
[data-brand="elagia"] .fit-choice button[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.actions{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap}
.actions .btn{flex:1 1 220px}
.note{padding:14px 16px;background:var(--c-tint);font-size:calc(var(--fs-body) - 1px);line-height:1.55;border-radius:0}
[data-brand="elagia"] .note{border-radius:12px}
.note.warn{background:none;border:1px solid var(--c-warn)}
.finder-figure{margin-bottom:24px}
@media (min-width:900px){.finder-figure{margin-bottom:0}}
@media (max-width:899px){.hide-mobile{display:none}.is-result .figure{order:2}.is-result .figure svg{max-height:260px}}

/* ---------- result ---------- */
.result-head{padding:0 0 24px;border-bottom:1px solid var(--c-line)}
.result-size{font:var(--head-w) 40px/1.1 var(--font-head);letter-spacing:var(--head-ls);color:var(--c-ink);text-transform:var(--head-tt);margin-top:6px}
[data-brand="elagia"] .result-size{font-size:44px;letter-spacing:-.01em}
.result-sub{font:var(--w-body) calc(var(--fs-body) + 1px)/1.4 var(--font-body);color:var(--c-muted);margin-top:6px}
.verdict{display:block;margin-top:12px}
.why-list{margin-top:8px}
.why-row{display:grid;grid-template-columns:28px 1fr auto;gap:4px 12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--c-line)}
.why-row .num{width:24px;height:24px;font-size:12px}
.why-row .vals{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.why-row .scale{grid-column:2 / 4}
.scale{position:relative;height:30px;margin-top:6px}
.scale .track{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--c-line)}
.scale .seg-r{position:absolute;top:6px;height:7px;background:var(--c-tint-2);border-left:1px solid var(--c-muted);border-right:1px solid var(--c-muted)}
.scale .seg-r.on{background:var(--c-ink);border-color:var(--c-ink)}
.scale .tick{position:absolute;top:4px;width:1px;height:11px;background:var(--c-muted)}
.scale .tick.on{background:var(--c-ink);width:2px;height:15px;top:2px}
.scale .lbl{position:absolute;top:17px;transform:translateX(-50%);font-size:11px;line-height:1.2;color:var(--c-muted);white-space:nowrap}
.scale .lbl.on{color:var(--c-ink);font-weight:var(--w-strong)}
.scale .you{position:absolute;top:3px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 2px #fff}
.alt{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.alt > div{border:1px solid var(--c-line);padding:16px;border-radius:0}
[data-brand="elagia"] .alt > div{border-radius:16px}
.alt > div.pick{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.alt .sz{font:var(--head-w) 28px/1.1 var(--font-head);color:var(--c-ink);letter-spacing:var(--head-ls)}
.pill-tag{display:inline-block;margin-bottom:8px;font:500 10px/1 var(--label-font);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--c-ink)}
[data-brand="elagia"] .pill-tag{font-size:12px;letter-spacing:0;text-transform:none;background:var(--c-tint);padding:4px 10px;border-radius:30px}


/* ---------- additions for the built pages (same tokens, no new colours) ---------- */
[hidden]{display:none!important}
.st th.plain{color:var(--c-muted)}
.st td.cell-you{box-shadow:inset 0 0 0 2px var(--c-ink);font-weight:var(--w-strong);color:var(--c-ink)}
.steps li:focus-visible{outline:2px solid var(--c-ink);outline-offset:-2px}
.steps li button{all:unset;display:contents}
.pill-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:12px;padding:12px 16px;background:var(--c-tint)}
[data-brand="elagia"] .pill-line{border-radius:12px}
.maker p + p{margin-top:8px}
.maker .st{margin-top:16px}
.notes p{margin-top:8px}
.field .opt{text-transform:none;letter-spacing:0;font-family:var(--font-body)}
select.inbox{appearance:none;-webkit-appearance:none;width:100%;font-size:16px;cursor:pointer}
.result-head h2{outline:none}
.mt-s{margin-top:12px}.mt-m{margin-top:20px}
.why-row .wlabel{grid-column:1/3}
.sg-err{padding:24px 0}
/* sticky first column needs OPAQUE fills, otherwise scrolled cells show through the tinted rows */
:root,[data-brand="viossi"]{--c-tint-solid:#f6f6f6;--c-tint-2-solid:#ededed}
[data-brand="elagia"]{--c-tint-solid:var(--c-tint);--c-tint-2-solid:var(--c-tint-2)}
.st tr.is-you td:first-child{background:var(--c-tint-2-solid)}
.why-row .vals{white-space:normal;text-align:right}
@media (max-width:480px){.why-row{grid-template-columns:28px 1fr}.why-row .vals{grid-column:2 / 3;text-align:left}.why-row .wlabel + .vals{grid-column:1 / 3}}
a.btn{text-decoration:none}
.nojs-swipe{margin-top:8px;text-align:right}
@media (min-width:900px){.nojs-swipe{display:none}}

/* ---------- mobile + motion pass (31.10) ---------- */
/* touch targets ≥ 44px */
.cat,[data-brand="viossi"] .cat{height:44px}
.seg button{height:44px}
[data-brand="elagia"] .seg button{height:40px}
.link{display:inline-flex;align-items:center;min-height:44px;text-align:left}
.actions .link{min-height:44px}
/* category strip: edge fade only while more is hidden */
.cats{-webkit-mask-image:none;mask-image:none}
.cats.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.cats.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 40px),transparent)}
.cats.more-l:not(.more-r){-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
/* phones: the chart / fields must be on the first screen — compact figure */
@media (max-width:899px){
  .layout{gap:20px}
  .figure{padding:10px 8px 8px}
  .figure svg{max-height:230px}
  .finder-figure svg{max-height:190px}
  .finder-figure{margin-bottom:4px}
  .figure figcaption{padding-top:4px}
  .modes{margin:16px 0 20px}
  .sg{padding-top:16px}
  .actions .btn{flex:1 1 140px}
}
/* motion: short, transform/opacity only */
@keyframes sg-in-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sg-in-fwd{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes sg-in-back{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes sg-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#panel.enter-fade{animation:sg-in-fade .2s cubic-bezier(.2,.7,.2,1) both}
#panel.enter-fwd{animation:sg-in-fwd .24s cubic-bezier(.2,.7,.2,1) both}
#panel.enter-back{animation:sg-in-back .24s cubic-bezier(.2,.7,.2,1) both}
#panel.enter-fwd .is-result .result-size{animation:sg-rise .32s .04s cubic-bezier(.2,.7,.2,1) both}
#panel.enter-fwd .is-result .why-row{animation:sg-rise .28s cubic-bezier(.2,.7,.2,1) both}
#panel.enter-fwd .is-result .why-row:nth-child(1){animation-delay:.08s}
#panel.enter-fwd .is-result .why-row:nth-child(2){animation-delay:.12s}
#panel.enter-fwd .is-result .why-row:nth-child(3){animation-delay:.16s}
#panel.enter-fwd .is-result .why-row:nth-child(n+4){animation-delay:.2s}
.cat,.mode,.seg button,.fit-choice button,.btn{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease}
.btn:active,.fit-choice button:active,.cat:active{transform:scale(.98)}
.st td,.steps li{transition:background-color .15s ease}
@media (hover:hover){.btn:not(.ghost):hover{opacity:.88}.btn.ghost:hover{background:var(--c-tint)}}
.st thead th button{min-width:44px;min-height:44px;justify-content:flex-end}

/* ---------- no-tape finder: questionnaire sheet + profile result (31.10, shared/profile-ui.js) ---------- */
/* fit colours: data encoding only (always paired with a word), muted so the brands stay calm */
:root,[data-brand="viossi"]{--fit-snug:#a33a2f;--fit-good:#2f6a4a;--fit-room:#3a5f94}
[data-brand="elagia"]{--fit-snug:#c03e35;--fit-good:#2f7350;--fit-room:#3d64a0}
.sheet{max-width:560px;width:100%;border:1px solid var(--c-line);border-radius:0;padding:20px 16px 16px;background:var(--c-bg)}
[data-brand="elagia"] .sheet{border-radius:24px 24px 16px 16px}
@media (max-width:899px){.sheet{border-left:0;border-right:0;margin:0 -16px;width:auto;padding:20px 16px 12px}[data-brand="elagia"] .sheet{border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);margin:0 -8px}}
@media (min-width:900px){.sheet{padding:28px 32px 24px}}
.q-progress{height:2px;background:var(--c-line);margin-bottom:12px}
.q-progress span{display:block;height:100%;background:var(--c-ink);transition:width .2s ease}
[data-brand="elagia"] .q-progress,[data-brand="elagia"] .q-progress span{border-radius:2px}
.q-count{margin-bottom:6px}
.q-title{font:var(--head-w) calc(var(--h2) + 4px)/1.35 var(--font-head);text-transform:var(--head-tt);letter-spacing:var(--head-ls);color:var(--c-ink);outline:none}
[data-brand="viossi"] .q-title{font-size:16px;letter-spacing:.12em}
.sheet .why{margin:8px 0 20px}
.q-units{margin-bottom:16px}
.q-opts{display:grid;gap:10px}
.q-opts-art{grid-template-columns:repeat(3,minmax(0,1fr))}
.q-opts-chips{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.q-opt{min-height:52px;padding:10px 8px;border:1px solid var(--c-line);border-radius:var(--r-chip);background:#fff;cursor:pointer;color:var(--c-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.25}
.q-opts-list .q-opt{flex-direction:row;justify-content:flex-start;text-align:left;padding:12px 16px;min-height:60px}
[data-brand="elagia"] .q-opts-art .q-opt{border-radius:20px}
.q-opt small{display:block;color:var(--c-muted);font-size:12px;margin-top:2px}
.q-opt .sil{width:56px;height:84px;color:var(--c-ink)}
.q-opt[aria-pressed="true"]{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
[data-brand="elagia"] .q-opt[aria-pressed="true"]{background:var(--c-ink);color:#fff}
[data-brand="elagia"] .q-opt[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
[data-brand="viossi"] .q-opt .q-opt-t{font:500 12px/1.3 var(--font-head);letter-spacing:.14em;text-transform:uppercase}
[data-brand="viossi"] .q-opt small{font-family:var(--font-body);letter-spacing:0;text-transform:none}
/* questionnaire v2.1: segmented progress, bigger art, live estimate, step entrance */
.q-seg{display:flex;gap:4px;height:3px;background:none}
.q-seg span{flex:1;background:var(--c-line);border-radius:2px;transition:background .3s ease}
.q-seg span.done{background:var(--c-ink)}
.q-seg span.now{background:linear-gradient(90deg,var(--c-ink) 50%,var(--c-line) 50%)}
.sheet[data-quiz]{animation:q-in .28s ease both}
@keyframes q-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.q-conv{min-height:1.4em;margin-top:6px;font-variant-numeric:tabular-nums}
.q-opts-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.q-opts-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.q-opts-art .q-opt{padding:12px 6px 10px;gap:6px;transition:border-color .15s ease,transform .15s ease,background .15s ease}
.q-opts-art .q-opt:hover{border-color:var(--c-line-strong)}
.q-opt:active{transform:scale(.97)}
.q-opt .sil-side{width:60px;height:128px}.q-opt .sil-jacket{width:84px;height:96px}
.sil .sil-fill{fill:currentColor;opacity:.07;stroke:none}
.sil .sil-ref{fill:none;stroke:var(--c-accent);stroke-width:1.2;stroke-dasharray:3 3;opacity:.75}
.sil .sil-mark{fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linecap:round}
.sil .sil-hot{fill:var(--c-accent);fill-opacity:.12;stroke:var(--c-accent);stroke-width:1.6;stroke-linecap:round}
[data-brand="viossi"] .sil .sil-hot{fill:#c8102e;stroke:#c8102e}
[data-brand="viossi"] .sil .sil-ref,[data-brand="viossi"] .sil .sil-mark{stroke:#5a5a5a}
[data-brand="elagia"] .q-opt[aria-pressed="true"] .sil-ref,[data-brand="elagia"] .q-opt[aria-pressed="true"] .sil-mark{stroke:#fff}
.q-live{margin-top:22px;padding:14px 14px 10px;background:var(--c-tint);border-radius:var(--r-chip)}
[data-brand="elagia"] .q-live{border-radius:18px}
.q-live-h{margin:0 0 10px}.q-live-h .label{margin-right:6px}
.lv{display:flex;align-items:flex-end;gap:4px;height:64px}
.lv-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.lv-bar{width:100%;max-width:26px;background:var(--c-garment);opacity:.35;transition:height .35s ease}
.lv-col.is-top .lv-bar{background:var(--c-ink);opacity:1}
[data-brand="elagia"] .lv-col.is-top .lv-bar{background:var(--c-accent)}
.lv-l{font-size:10px;line-height:1.6;color:var(--c-muted);white-space:nowrap}
.lv-col.is-top .lv-l{color:var(--c-ink);font-weight:700}
.q-skip{margin-top:8px}
.q-actions{margin-top:20px}
@media (max-width:899px){.q-actions{position:sticky;bottom:0;background:var(--c-bg);padding:12px 0 8px;margin-top:16px;z-index:2}}
.q-actions .btn.ghost{flex:0 0 auto}
.q-alt{border-top:1px solid var(--c-line);margin-top:12px;padding-top:4px}
.quiz .finder-figure figcaption{max-width:32ch;margin:0 auto}
/* result */
.reasons{margin:14px 0 0;padding-left:20px;display:grid;gap:6px}
.reasons li{padding-left:4px}
.fit-alt{margin-top:12px}
.bias-note{margin-top:8px}
.q-low{margin-top:20px}
.fit-panel{margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.chip{min-width:48px;height:44px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-chip);background:#fff;cursor:pointer;color:var(--c-ink);font-variant-numeric:tabular-nums;position:relative}
.chip.is-rec{border-color:var(--c-ink)}
.chip.is-rec::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.chip[aria-pressed="true"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.fit-lines{list-style:none;border-top:1px solid var(--c-line);margin-top:12px}
.fit-line{display:grid;grid-template-columns:28px 1fr auto;gap:4px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--c-line)}
.fit-line .num{width:24px;height:24px;font-size:12px}
.fit-line .num.blank{background:none}
.fit-line .fl-main{display:flex;flex-direction:column}
.fit-line .vals{font-variant-numeric:tabular-nums}
.fit-tag{font-weight:var(--w-strong);white-space:nowrap;font-size:calc(var(--fs-body) - 1px)}
.fit-tag.snug{color:var(--fit-snug)}.fit-tag.good{color:var(--fit-good)}.fit-tag.room{color:var(--fit-room)}
.fit-line .num{box-shadow:0 0 0 2px #fff}
.fit-snug .num:not(.blank){background:var(--fit-snug)}.fit-good .num:not(.blank){background:var(--fit-good)}.fit-room .num:not(.blank){background:var(--fit-room)}
.fit-legend{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fit-legend .sw{display:inline-block;width:14px;height:3px;margin-left:8px}
.fit-legend .sw:first-child{margin-left:0}
.fit-legend .sw.snug{background:var(--fit-snug)}.fit-legend .sw.good{background:var(--fit-good)}.fit-legend .sw.room{background:var(--fit-room)}
/* drawing: compared lines take the fit colour; the rest fade (shape untouched) */
.figure svg.has-fit .m{opacity:.25}
.figure svg.has-fit .m.fit-on{opacity:1}
.figure svg .m.fit-snug{--_a:var(--fit-snug)}
.figure svg .m.fit-good{--_a:var(--fit-good)}
.figure svg .m.fit-room{--_a:var(--fit-room)}
.fit-figure.in-panel{margin:12px 0 0;border-left:0;border-right:0;padding:8px 0}
.fit-figure.in-panel svg{max-height:220px}
.is-profile .actions .btn{flex:1 1 100%}
@media (min-width:640px){.is-profile .actions .btn{flex:1 1 220px}}

/* ---------- real product photo + measurement lines (shared/photos/photos.json) ---------- */
.figure.has-photo{padding:8px 8px 8px}
.figure{--ph-mh:560px}
.finder-figure{--ph-mh:520px}
.ph-stage{position:relative;width:100%;max-width:calc(var(--ph-mh)*var(--arn));aspect-ratio:var(--ar);margin:0 auto;overflow:hidden;background:#efefef}
.ph-stage img{display:block;width:100%;height:100%;object-fit:cover}
.maker .ph-stage{--ph-mh:380px;margin-bottom:20px}
.figure .ph-ov{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;margin:0;overflow:visible;--k:1.6}
.ph-ov .m{cursor:pointer;transition:opacity .2s}
.ph-ov .ph-k{transform:scale(var(--k))}
.ph-ov .m-hit{fill:none;stroke:transparent;stroke-width:calc(var(--k)*26px);pointer-events:stroke}
.ph-ov .m-halo{fill:none;stroke:#fff;stroke-width:calc(var(--k)*5px);stroke-linecap:round;stroke-linejoin:round}
.ph-ov .m-line{fill:none;stroke:var(--_a,var(--c-accent));stroke-width:calc(var(--k)*2.2px);stroke-linecap:round;stroke-linejoin:round}
.ph-ov .m-dot{fill:var(--_a,var(--c-accent));stroke:#fff;stroke-width:1.5px}
.ph-ov .m-badge circle{fill:var(--_a,var(--c-accent));stroke:#fff;stroke-width:2.5px}
.ph-ov .m-badge text{fill:#fff;font:700 12px 'Montserrat',Arial,sans-serif;text-anchor:middle;dominant-baseline:central}
.ph-ov .m-valg{display:none;pointer-events:none}
.ph-ov .m.has-val .m-valg{display:block}
.ph-ov .m-valg rect{fill:#fff;opacity:.94}
.ph-ov .m-val{fill:var(--_a,var(--c-ink));font:700 11.5px var(--font-body);text-anchor:middle;dominant-baseline:central}
.ph-ov.has-active .m{opacity:.32}
.ph-ov.has-active .m.is-active{opacity:1}
.ph-ov .m.is-active .m-line{stroke-width:calc(var(--k)*3.2px)}
.ph-ov .m.is-active .m-halo{stroke-width:calc(var(--k)*6.5px)}
/* intro: base state is the final state, so reduced motion and mid-way re-renders simply show everything */
.ph-wait img,.ph-wait .ph-ov{opacity:0}
@keyframes phIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes phDraw{from{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:1}to{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1}}
@keyframes phFade{from{opacity:0}to{opacity:1}}
@keyframes phPop{from{opacity:0;transform:scale(calc(var(--k)*.6))}to{opacity:1;transform:scale(var(--k))}}
.ph-play img{animation:phIn .28s cubic-bezier(.22,.8,.24,1) both}
.ph-play .m-halo,.ph-play .m-line{animation:phDraw .3s cubic-bezier(.22,.8,.24,1) var(--d,0s) backwards}
.ph-play .m-dot{animation:phFade .12s linear var(--d,0s) backwards}
.ph-play .m-badge .ph-k{animation:phPop .16s ease-out calc(var(--d,0s) + .26s) backwards}
.ph-play .m-valg .ph-k{animation:phFade .14s linear calc(var(--d,0s) + .3s) backwards}
.m.ph-redraw .m-halo,.m.ph-redraw .m-line{animation:phDraw .36s cubic-bezier(.22,.8,.24,1) backwards}
.m.ph-redraw .m-badge .ph-k{animation:phPop .18s ease-out .22s backwards}
@media (max-width:899px){
  .figure{--ph-mh:340px}
  .finder-figure{--ph-mh:250px}
  .is-result .figure{--ph-mh:300px}
  .maker .ph-stage{--ph-mh:300px}
  .fit-figure.in-panel{--ph-mh:280px}
}

/* "how it should sit" in the result */
.sit{margin-top:20px;padding:14px 16px;background:var(--c-tint)}
.sit .label{display:block;margin-bottom:6px}
.sit p + p{margin-top:6px}
.data-note{margin-top:6px}

/* ---------- what is being sized, and what it needs ---------- */
.ctx{margin-bottom:20px}
.ctx-line{font-size:13px;line-height:1.5;color:var(--c-ink)}
.ctx-line b{font-weight:600}
.ctx-invite{margin-top:4px;color:var(--c-ink)}
@keyframes ctxIn{from{opacity:0}to{opacity:1}}
.enter-fade .ctx{animation:ctxIn .28s cubic-bezier(.22,.8,.24,1) backwards}

/* ---------- save ---------- */
.save{margin-top:24px;padding-top:20px;border-top:1px solid var(--c-line)}
.save .btn{width:100%}
.save p{margin-top:8px}
.save-ok{display:flex;align-items:center;gap:8px;margin-top:20px;font-weight:var(--w-strong);color:var(--c-ink);outline:none}
.save-tick{position:relative;width:18px;height:18px;border-radius:50%;background:var(--fit-good);flex:none}
.save-tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes tickIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.save-tick{animation:tickIn .32s cubic-bezier(.22,.8,.24,1) backwards}

/* ---------- your sizes: a ledger, one cell per garment and cut ---------- */
.sizes{margin:20px 0 28px}
.sizes-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.sizes-why{margin:2px 0 12px}
.sz-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border-top:1px solid var(--c-line-strong);border-left:1px solid var(--c-line)}
.szt{display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;min-height:92px;padding:12px;text-align:left;cursor:pointer;background:var(--c-bg);color:var(--c-ink);
  border:0;border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);font:inherit;transition:background-color .18s ease,color .18s ease}
.szt:hover{background:var(--c-tint)}
.sz-cat{font-size:calc(var(--fs-body) - 2px);line-height:1.3}
.sz-cat small{display:block;color:var(--c-muted);font-size:12px}
.sz-val{margin-top:auto;padding-top:6px;font:var(--head-w) 20px/1.2 var(--font-head);letter-spacing:.04em;color:inherit}
.sz-note{font-size:12px;line-height:1.3;color:var(--c-muted)}
.sz-add{margin-top:auto;padding-top:6px;font-size:calc(var(--fs-body) - 2px);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
.szt.is-invite{background:var(--c-tint)}
.szt.is-cur{background:var(--c-ink);color:#fff}
.szt.is-cur:hover{background:var(--c-ink)}
.szt.is-cur .sz-cat small,.szt.is-cur .sz-note{color:rgba(255,255,255,.72)}
[data-brand="elagia"] .sz-grid{gap:8px;border:0}
[data-brand="elagia"] .szt{border:1px solid var(--c-line);border-radius:16px}
[data-brand="elagia"] .szt.is-invite{background:var(--c-tint);border-color:var(--c-tint-2)}
@keyframes szRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sizes.is-new .szt{animation:szRise .32s cubic-bezier(.22,.8,.24,1) calc(var(--i,0)*35ms) backwards}
@keyframes szSize{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#panel[class*="enter-"] .result-size{animation:szSize .34s cubic-bezier(.22,.8,.24,1) .06s backwards}
#panel[class*="enter-"] .verdict,#panel[class*="enter-"] .reasons,#panel[class*="enter-"] .sit{animation:szSize .3s cubic-bezier(.22,.8,.24,1) .14s backwards}
@media (max-width:899px){
  .sz-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -16px;padding:0 16px;border-left:0}
  .sz-grid::-webkit-scrollbar{display:none}
  .sz-grid li{flex:0 0 136px;scroll-snap-align:center}
  .sz-grid li:first-child .szt{border-left:1px solid var(--c-line)}
  [data-brand="elagia"] .sz-grid li:first-child .szt{border-left:1px solid var(--c-line)}
  .szt{min-height:84px}
  .ctx{margin-bottom:14px}
  .sizes{margin:16px 0 20px}
}

/* usual jacket size: length comes first, a size chip moves on */
.q-len{margin-bottom:16px}
.q-len .label{display:block}
.q-len .seg{margin-top:8px;display:inline-flex}
.q-len .seg button{min-height:44px}
.q-len p{margin-top:6px}

/* ---------- load, reveal and unit swap (12.11) ---------- */
/* index.html sets html.sg-wait: nothing is shown until chart + drawing/photo + font are ready, then one short fade. */
html.sg-wait #app{opacity:0}
html.sg-in #app{animation:sg-reveal .22s cubic-bezier(.22,1,.36,1) both}
@keyframes sg-reveal{from{opacity:0}to{opacity:1}}
/* column widths are measured in inches AND cm (app.js lockCols), so a unit switch never moves a column */
table.st-fixed{table-layout:fixed}
.tbl-measure{position:absolute;left:0;top:0;width:max-content;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.tbl-measure table.st{width:auto;min-width:0}
/* unit switch: old numbers fade out (90 ms), new ones fade in (160 ms); cells, borders and widths stay put */
.tbl-wrap.u-out td,.tbl-wrap.u-out th,.tbl-wrap.u-out td small,.pill-line.u-out b{color:transparent;transition:color .09s cubic-bezier(.4,0,1,1)}
.tbl-wrap.u-in td,.tbl-wrap.u-in th,.tbl-wrap.u-in td small,.pill-line.u-in b{animation:sg-num-in .16s cubic-bezier(.22,1,.36,1)}
@keyframes sg-num-in{from{color:transparent}}