/* lives inside the fabric section but is set in the site's current type */
.sizechart {
  font-family: var(--font);
  margin-top: clamp(56px, 8vw, 104px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px clamp(32px, 5vw, 80px); align-items: start;
}
.sizechart__head { grid-column: 1; }
.sizechart__title { font-family: var(--display); font-size: var(--fs-4); font-weight: 900; font-stretch: 125%; letter-spacing: -.04em; margin-bottom: 14px; }
.sizechart__lede { max-width: 40ch; font-size: var(--fs-2); }
.sizechart__controls { grid-column: 1; }
/* equal boxes on a grid: every row starts and ends on the same edges */
.sizechart__lines { display: grid; gap: 8px; }
.sizechart__set { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
/* long names wrap inside their box instead of spilling out of it */
.sizechart__set .size { height: auto; min-height: 40px; padding: 8px 10px; white-space: normal; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.sizechart__group { margin: 6px 0 0; font-size: var(--fs-0); font-weight: 700; color: var(--muted); }
.sizechart__group:first-child { margin-top: 0; }
.sizechart__lines .size { min-width: 0; width: 100%; background: none; cursor: pointer; }
.sizechart__lines .size[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.sizechart__table { grid-column: 2; grid-row: 1 / span 2; }

/* segmented control */
.seg { display: inline-flex; padding: 3px; border: 1.5px solid var(--fg); border-radius: 999px; }
.seg__btn { display: grid; place-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: var(--fs-0); }
.seg .opt input:checked + .seg__btn { background: var(--fg); color: var(--bg); }
.seg .opt input:focus-visible + .seg__btn { outline: 3px solid var(--fg); outline-offset: 2px; }

/* the table */
.size-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1.5px var(--fg);
}
.size-table caption { caption-side: top; text-align: left; padding: 0 0 12px; font-weight: 700; font-size: var(--fs-0); }
.size-table th, .size-table td { padding: 14px 18px; text-align: right; }
.size-table thead th {
  background: var(--fg); color: var(--bg);
  font-weight: 600; font-size: var(--fs-0);
}
.size-table thead th span { font-weight: 400; opacity: .6; margin-left: 4px; }
.size-table thead th:first-child, .size-table tbody th { text-align: left; }
.size-table tbody th { font-family: var(--display); font-weight: 800; font-stretch: 120%; font-size: var(--fs-2); }
.size-table td { font-size: var(--fs-2); font-weight: 500; }
.size-table tbody th a { display: block; text-underline-offset: .2em; }
.size-table tbody tr { border-top: 1px solid rgba(255, 255, 255, .14); transition: background-color var(--t-fast); }
.size-table tbody tr:hover { background: var(--lit); color: #000; }
.size-table__note { margin-top: 10px; font-size: var(--fs-0); color: var(--muted); }

/* dialog version */
.sheet--chart { width: min(520px, 100vw); }
.chart-dialog__title { font-size: var(--fs-3); font-weight: 900; font-stretch: 120%; margin: 8px 48px 20px 0; }
.sheet--chart .size-table th, .sheet--chart .size-table td { padding: 11px 14px; }

@media (max-width: 899px) {
  .sizechart { grid-template-columns: 1fr; }
  .sizechart__head, .sizechart__controls, .sizechart__table { grid-column: 1; grid-row: auto; }
  .size-table th, .size-table td { padding: 12px 14px; }
}
@media (max-width: 599px) {
  .sizechart__set { grid-template-columns: 1fr 1fr; }
  .sizechart__lines .size { font-size: .75rem; padding: 8px; }
}