/* The size finder and chart in the #sizeguide dialog (product page): ink on
   white, hairlines, square corners, DM Mono labels, no colour. Loaded after
   brand.css; every size-guide rule lives here. */

/* the frame: a centred sheet, full screen on phones. The header stays put and
   only the body scrolls, without dragging the page along behind it. */
dialog.sgx{width:min(980px,calc(100% - 48px));max-width:none;max-height:min(940px,calc(100dvh - 48px));padding:0;border:1px solid var(--rule-2);background:var(--white);color:var(--ink);overflow:hidden}
dialog.sgx[open]{display:flex;flex-direction:column}
dialog.sgx::backdrop{background:rgba(17,17,16,.55)}
.sgx .sg-head{flex:0 0 auto;gap:16px;padding:12px 12px 12px clamp(20px,3vw,36px);border-bottom:1px solid var(--rule)}
.sgx .sg-head h2{margin:0;font-family:var(--display);font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sgx .sg-head .icon-btn{width:44px;height:44px;color:var(--ink)}
.sgx .sg-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:28px clamp(20px,3vw,36px) 36px;font-size:14px;font-weight:400;line-height:1.6;color:var(--ink-2)}

/* shared pieces: DM Mono labels and the square A and B tags */
.sgx-kicker{margin:0 0 16px;font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.sgx-tag{display:inline-grid;place-items:center;flex:0 0 auto;width:18px;height:18px;background:var(--ink);color:var(--white);font-family:var(--mono);font-size:11px;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;text-transform:none}
.sgx-lede{max-width:62ch;margin:0 0 28px;font-size:15px;line-height:1.6;color:var(--ink)}

/* how to measure, then the chart, down the left; the finder on the right
   stays in view the whole way down */
.sgx-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"how finder" "chart finder";gap:40px clamp(28px,4vw,52px);align-items:start}
.sgx-how{grid-area:how}
.sgx-finder{grid-area:finder;position:sticky;top:0}
@media(max-height:700px){.sgx-finder{position:static}}   /* a short screen could not show all of it */
.sgx-chart-block{grid-area:chart;padding-top:32px;border-top:1px solid var(--rule)}

/* 1. how to measure: two drawings, one per measurement */
.sgx-steps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;margin:0;padding:0}
/* drawing, title and text line up across the two steps, even when a title wraps */
.sgx-steps li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.sgx-steps figure{margin:0 0 14px;background:var(--ground-2)}
.sgx-drawing{display:block;width:100%;height:auto}
.sgx-steps h4{align-self:start;display:flex;align-items:flex-start;gap:10px;margin:0 0 6px;font-family:var(--display);font-size:12.5px;font-weight:600;line-height:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sgx-steps p{margin:0;font-size:13.5px;line-height:1.55}
.sgx-tip{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:13px;line-height:1.55}
.sgx-tip b{font-weight:600;color:var(--ink)}
/* the drawing: every line stays a hairline whatever size the drawing is */
.sgx-drawing :is(rect,path){vector-effect:non-scaling-stroke}
.sgx-ink{fill:var(--ink);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.sgx-paper{fill:var(--white)}
.sgx-part{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.sgx-crease,.sgx-wrist{fill:none;stroke:var(--rule-2);stroke-width:1.25;stroke-linecap:round}
.sgx-wrist.is-on{stroke:var(--ink-2);stroke-dasharray:3 3;stroke-linecap:butt}
.sgx-dim{fill:none;stroke:var(--ink);stroke-width:1.5}
.sgx-tape :is(rect,path){fill:var(--white);stroke:var(--ink);stroke-width:1.25}
.sgx-tape .sgx-ticks{fill:none;stroke-width:1}
.sgx-svgtag rect{fill:var(--ink)}
.sgx-svgtag text{fill:var(--white);font-family:var(--mono);font-size:12px;text-anchor:middle}

/* 2. the finder: units, two fields, the answer */
.sgx-finder-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sgx-finder-head .sgx-kicker{margin:0}
.sgx-units{display:inline-flex;border:1px solid var(--rule-ctl)}
.sgx-units button{min-width:52px;height:36px;padding:0 12px;border:0;background:var(--white);cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-2);transition:background-color .2s,color .2s}
.sgx-units button + button{border-left:1px solid var(--rule-ctl)}
.sgx-units button:hover{color:var(--ink)}
.sgx-units button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.sgx-inputs{display:grid;gap:18px}
.sgx-label{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--display);font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sgx-input{display:flex;align-items:center;height:56px;border:1px solid var(--rule-ctl);background:var(--white);transition:border-color .2s}
.sgx-input:hover{border-color:var(--ink-3)}
.sgx-input:has(input:not(:placeholder-shown)),.sgx-input:focus-within{border-color:var(--ink)}
.sgx-input:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.sgx-input input{flex:1 1 auto;min-width:0;height:100%;padding:0 16px;border:0;background:none;outline:none;font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.sgx-input input::placeholder{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-3);opacity:1}
.sgx-input span{padding:0 16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-2)}
/* the answer: a quiet hairline box until both numbers are in, then the size, large */
.sgx-result{margin-top:20px;border:1px solid var(--rule)}
.sgx-msg{margin:0;padding:18px 20px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.sgx-msg + .sgx-switch{margin:-6px 20px 18px}
.sgx-switch{padding:0 0 3px;border:0;border-bottom:1px solid var(--ink);background:none;cursor:pointer;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sgx-result.is-size{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 24px;padding:22px 22px 22px 24px;border-color:var(--ink)}
.sgx-answer-size{display:flex;flex-direction:column;align-items:flex-start}
.sgx-answer-size .sgx-kicker{margin:0 0 6px;color:var(--ink)}
.sgx-answer-size b{font-family:var(--display);font-size:64px;font-weight:500;line-height:.9;letter-spacing:.02em;color:var(--ink)}
.sgx-why{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.sgx-choose{grid-column:1 / -1;width:100%;min-height:54px;margin-top:14px}

/* 3. the chart: hand length along the top, palm down the side */
.sgx-cap{margin:-4px 0 20px;font-size:13.5px;line-height:1.55}
.sgx .sgx-table{width:100%;margin:0;border-collapse:collapse;table-layout:fixed;font-size:13px}
.sgx .sgx-table :is(th,td){padding:0;border:0;background:none;vertical-align:middle;text-align:center;font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.35;letter-spacing:.04em;text-transform:none;color:var(--ink-2)}
.sgx-table .sgx-c-axis{width:30px}
.sgx-table .sgx-c-head{width:92px}
.sgx .sgx-table .sgx-axis-x{padding:0 0 10px;text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sgx-axis-x .sgx-tag{margin-right:10px;vertical-align:-4px}
.sgx .sgx-table .sgx-axis-y{padding-right:8px}
.sgx-axis-y div{display:flex;flex-direction:column;align-items:center;gap:10px}
.sgx-axis-y span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sgx .sgx-table thead th{padding:0 2px 10px;border-bottom:1px solid var(--rule-2)}
.sgx .sgx-table tbody th{padding:0 12px 0 0;border-right:1px solid var(--rule-2);text-align:right}
.sgx .sgx-table th.is-axis{color:var(--ink)}
.sgx .sgx-table thead th.is-axis{box-shadow:inset 0 -2px 0 var(--ink)}
.sgx .sgx-table tbody th.is-axis{box-shadow:inset -2px 0 0 var(--ink)}
.sgx .sgx-table td[data-col]{border:1px solid var(--rule)}
.sgx-table td button{display:block;width:100%;height:48px;padding:0;border:0;background:var(--white);cursor:pointer;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ink);transition:background-color .2s,color .2s}
.sgx-table td button:hover{background:var(--ground-2)}
.sgx-table td button:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.sgx .sgx-table td.is-hit{border-color:var(--ink)}
.sgx-table td.is-hit button{background:var(--ink);color:var(--white)}
.sgx-table td.is-hit button:focus-visible{outline-color:var(--white)}
.sgx .sgx-table td.is-here{box-shadow:inset 0 0 0 2px var(--ink)}
/* no size for that combination: a struck-through quiet square */
.sgx .sgx-table td.sgx-none,.sgx-legend span{background:linear-gradient(to top right,transparent calc(50% - .6px),var(--rule-2) 50%,transparent calc(50% + .6px)),var(--ground-2)}
.sgx-legend{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.sgx-legend span{flex:0 0 18px;width:18px;height:18px;border:1px solid var(--rule)}

/* the one fit note, under the answer */
.sgx-fine{margin:16px 0 0;padding:16px 18px;background:var(--ground-2);font-size:13.5px;line-height:1.55;color:var(--ink)}
.sgx-fine b{font-weight:600}

/* one column: how to measure, then the finder, then the chart */
@media(max-width:760px){
  .sgx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"how" "finder" "chart";gap:36px}
  .sgx-finder{position:static}
}
/* phones: the guide takes the whole screen */
@media(max-width:600px){
  dialog.sgx{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0}
  .sgx .sg-head{padding:8px 8px 8px 18px}
  .sgx .sg-body{padding:22px 18px calc(32px + env(safe-area-inset-bottom))}
  .sgx-lede{margin-bottom:24px;font-size:14.5px}
  .sgx-steps{column-gap:10px}
  .sgx-steps figure{margin-bottom:12px}
  .sgx-steps h4{gap:8px;font-size:11.5px;line-height:18px;letter-spacing:.1em}
  .sgx-steps p{font-size:13px}
  .sgx-result.is-size{gap:6px 20px;padding:18px}
  .sgx-answer-size b{font-size:56px}
  .sgx-table .sgx-c-axis{width:26px}
  .sgx-table .sgx-c-head{width:62px}
  .sgx .sgx-table :is(th,td){font-size:10.5px;letter-spacing:0}
  .sgx .sgx-table tbody th{padding-right:8px}
  .sgx .sgx-table .sgx-axis-y{padding-right:6px}
  .sgx-table td button{height:44px;font-size:13px}
}