/* Size chart window (size-chart.js): a sketch of the garment with lettered measuring lines, beside a table of
   every size. Same window style as "Compare techniques" on the product page. */
html.szc-locked{overflow:hidden}
.szc{width:min(1040px,calc(100% - 48px));max-width:none;max-height:min(92vh,900px);margin:auto;padding:0;border:0;border-radius:16px;background:#fff;color:var(--ink);font-family:var(--font);box-shadow:0 30px 80px #0000004d;overflow:hidden}
.szc[open]{display:flex;flex-direction:column}
.szc::backdrop{background:rgb(17 19 19/.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.szc-head{display:flex;align-items:flex-start;gap:14px 24px;padding:26px 24px 20px 40px;border-bottom:1px solid var(--line)}
.szc-titles{flex:1;min-width:0}
.szc-kicker{margin:0 0 6px;color:var(--brand-deep);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.szc-head h2{margin:0;color:var(--ink);font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.szc-sub{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
/* Inches or cm: a two-way switch */
.szc-units{position:relative;display:flex;flex:none;margin:2px 0 0;padding:3px;border:0;border-radius:999px;background:#f5f4ec}
.szc-units input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.szc-units label{display:flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.szc-units label:hover{color:var(--ink)}
.szc-units input:checked+label{background:#fff;color:var(--ink);box-shadow:0 1px 4px #00000024}
.szc-units input:focus-visible+label{outline:3px solid var(--brand-deep);outline-offset:2px}
.szc-close{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#f5f4ec;color:var(--ink);cursor:pointer}
.szc-close:hover{background:var(--ink);color:#fff}
.szc-close svg{width:18px;height:18px}
.szc-close:focus-visible,.szc-finder:focus-visible,.szc-table button:focus-visible,.szc-table-wrap:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}

.szc-body{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:36px;align-items:start;padding:28px 40px 32px}
/* The sketch stays in view while a long table scrolls */
.szc-figure{position:sticky;top:0;margin:0}
.szc-art{padding:14px 12px 8px;border-radius:12px;background:#f8f6f1}
.szc-svg{display:block;width:100%;max-width:300px;max-height:300px;height:auto;margin:0 auto;overflow:visible}
.szc-fill{fill:#fff}
.szc-edge{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.szc-detail{fill:none;stroke:#9c8b8e;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.szc-zip{fill:none;stroke:#9c8b8e;stroke-width:1.6;stroke-dasharray:1.5 2}
.szc-button{fill:#9c8b8e}
.szc-rule{fill:none;stroke:var(--brand-deep);stroke-width:1.8;stroke-linecap:round}
.szc-guide{fill:none;stroke:var(--brand-deep);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.szc-dot{fill:var(--maroon);stroke:#f8f6f1;stroke-width:3}
.szc-dot-text{fill:#fff;font:600 11.5px var(--font);text-anchor:middle}
.szc-m{transition:opacity .2s}
.szc-svg.has-on .szc-m:not(.is-on){opacity:.2}
.szc-m.is-on .szc-rule{stroke-width:2.8}

/* How each measurement is taken, with the chosen size's numbers */
.szc-figure figcaption{padding:0 2px}
.szc-for{min-height:24px;margin:18px 0 10px;color:var(--muted);font-size:14px}
.szc-for strong{color:var(--ink);font-size:16px;font-weight:600}
.szc-legend{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.szc-legend li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.szc-letter{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:600;line-height:1}
.szc-legend .szc-letter{margin-top:1px}
.szc-legend-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:15px;line-height:1.4}
.szc-legend-head strong{font-weight:600}
.szc-legend-val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.szc-legend-how{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

/* Every size */
.szc-table-wrap{min-width:0;border-radius:4px}
.szc-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.szc-table thead th{position:sticky;top:-28px;z-index:1;padding:4px 8px 12px;border-bottom:1px solid var(--ink);background:#fff;color:var(--ink);font-size:13px;font-weight:600;line-height:1.25;text-align:center;vertical-align:bottom}
.szc-table thead th:first-child{padding-left:14px;text-align:left}
.szc-table thead .szc-letter{display:grid;width:20px;height:20px;margin:0 auto 6px;font-size:11px}
.szc-col{display:block}
.szc-table thead .szc-fit{color:var(--muted);font-weight:500}
.szc-table tbody td,.szc-table tbody th{height:48px;padding:0 8px;border-bottom:1px solid var(--line);font-size:15px;text-align:center}
.szc-table tbody th{padding-left:6px;text-align:left;font-weight:400}
.szc-table tbody tr{cursor:pointer;transition:background-color .15s}
.szc-table tbody tr:hover{background:#f8f6f1}
.szc-table tbody tr.is-on{background:#fbf0f1}
.szc-table tbody tr.is-on td{color:var(--ink);font-weight:600}
.szc-table tbody th button{min-width:56px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink);font:600 15px/1 var(--font);text-align:left;cursor:pointer}
.szc-table tbody tr.is-on th button{background:var(--maroon);color:#fff}
.szc-table .szc-fit{color:var(--muted);font-size:13px}
.szc-table .is-na{color:#b9a7aa}

.szc-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:16px 40px 20px;border-top:1px solid var(--line)}
.szc-note{flex:1 1 320px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.szc-finder{min-height:44px;padding:0 20px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;transition:background-color .2s,color .2s}
.szc-finder:hover{background:var(--ink);color:#fff}
.szc-finder[hidden]{display:none}

/* Phones: the window fills the screen; sketch and notes first, then the table */
@media(max-width:760px){
.szc{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
.szc-head{flex-wrap:wrap;padding:16px 16px 14px}
.szc-titles{flex:1 1 calc(100% - 64px);order:1}
.szc-close{order:2}
.szc-units{order:3}
.szc-body{grid-template-columns:minmax(0,1fr);gap:22px;padding:16px 16px 24px}
.szc-figure{position:static}
.szc-svg{max-width:220px;max-height:250px}
.szc-for{margin-top:14px}
.szc-table thead th{top:-16px;padding:4px 4px 10px;font-size:12px}
.szc-table thead th:first-child{padding-left:8px}
.szc-table tbody td,.szc-table tbody th{height:46px;padding:0 4px;font-size:14px}
.szc-table tbody th{padding-left:2px}
.szc-table tbody th button{min-width:48px;min-height:40px;padding:0 10px;font-size:14px}
.szc-table .szc-fit{font-size:12px}
.szc-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.szc-units label,.szc-close,.szc-finder,.szc-m,.szc-table tbody tr{transition:none}}
.szc-head h2:focus{outline:none}
