/* Size guide drawer: bottom sheet on phones, panel sliding in from the side from 48rem. Tables come from the Table block (sizes = rows). */
.sg {
	inline-size: 100%; max-inline-size: none; max-block-size: 92dvh; margin: auto 0 0; padding: 0; border: 0;
	border-start-start-radius: 1.5rem; border-start-end-radius: 1.5rem; background: var(--surface); color: var(--ink); overflow: hidden;
	translate: 0 0; transition: translate 0.35s var(--ease), opacity 0.25s var(--ease), display 0.35s allow-discrete, overlay 0.35s allow-discrete;
}
.sg:not([open]) { translate: 0 100%; opacity: 0; }
@starting-style { .sg[open] { translate: 0 100%; opacity: 0; } }
.sg::backdrop { background: var(--scrim); }
.sg[open] { display: flex; flex-direction: column; }
html:has(.sg[open]) { overflow: hidden; }

.sg__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 1rem; border-block-end: 1px solid var(--hairline); }
.sg__title { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.sg__sub { margin: 0.25rem 0 0; color: var(--ink-muted); font-size: 0.9375rem; }
.sg__close {
	flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; margin-block-start: -0.5rem; margin-inline-end: -0.5rem; padding: 0; border: 0;
	border-radius: var(--radius-pill); background: none; color: var(--ink); cursor: pointer;
}
.sg__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.25rem; padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }

/* tabs */
.sg__tabs { display: flex; justify-self: start; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius-pill); background: var(--field); }
.sg__tabs[hidden] { display: none; }
.sg__tabs button {
	min-block-size: 2.75rem; min-inline-size: 2.75rem; padding-inline: 1rem; border: 0; border-radius: var(--radius-pill); background: none;
	color: var(--ink-muted); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.sg__tabs [aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }

/* tables: size column stays put while the measurements scroll sideways */
.sg__charts h2 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }
.sg__charts h2:not(:first-child) { margin-block-start: 1.25rem; }
.sg__charts.has-tabs h2 { display: none; }
.sg__scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.sg__scroll table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.sg__charts :is(th, td) { padding: 0.75rem; border: 0; border-block-end: 1px solid var(--hairline); text-align: center; white-space: nowrap; }
.sg__charts th { background: var(--surface-soft); color: var(--ink-muted); font-size: 0.8125rem; font-weight: 600; }
.sg__charts tbody tr:last-child td { border-block-end: 0; }
.sg__charts :is(th, td):first-child { position: sticky; inset-inline-start: 0; background: var(--surface-soft); color: var(--ink); font-weight: 700; text-align: start; }
.sg__charts tr.is-picked td { background: var(--surface-mint); font-weight: 700; }

.sg__note { margin: 0; color: var(--ink-muted); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.sg__how { border-block: 1px solid var(--hairline); }
.sg__how summary { display: flex; align-items: center; justify-content: space-between; min-block-size: 3rem; font-weight: 600; cursor: pointer; list-style: none; }
.sg__how summary::-webkit-details-marker { display: none; }
.sg__how[open] summary svg { rotate: 45deg; }
.sg__how dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0 0 1rem; line-height: 1.5; }
.sg__how dt { font-weight: 600; }
.sg__how dd { margin: 0; color: var(--ink-muted); }
.sg__help { display: grid; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--surface-mint); }
.sg__help p { margin: 0; line-height: 1.5; text-wrap: pretty; }

/* "Find my size": height + weight -> size */
.sg-fit { display: grid; gap: 0.875rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--surface-mint); }
.sg-fit__title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.sg-fit__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sg-fit__field { display: grid; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }
.sg-fit__input {
	display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.75rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--ink-muted); font-size: 1rem; font-weight: 500;
}
.sg-fit__input:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.sg-fit__input input { flex: 1; min-inline-size: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; outline: 0; }
.sg-fit__gift { display: flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; font-size: 0.9375rem; line-height: 1.4; cursor: pointer; }
.sg-fit__gift input { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--action); }
.sg-fit__result { display: grid; gap: 0.5rem; padding-block-start: 0.875rem; border-block-start: 1px solid var(--hairline); line-height: 1.5; }
.sg-fit__result[hidden] { display: none; }
.sg-fit__result p { margin: 0; text-wrap: pretty; }
.sg-fit__result strong { font-size: 1.125rem; }
.sg-fit__result a, .sg__note a { color: var(--teal-ink); font-weight: 600; }

.sg :is(button, summary, a):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) {
	.sg__tabs button:hover { color: var(--ink); }
	.sg__close:hover { background: var(--field); }
}

@media (min-width: 48rem) {
	.sg { inset-block: 0; margin-block: 0; margin-inline: auto 0; inline-size: min(36rem, 92vw); max-block-size: none; block-size: 100dvh; border-radius: 0; }
	.sg:not([open]) { translate: 100% 0; }
	@starting-style { .sg[open] { translate: 100% 0; opacity: 0; } }
	.sg__head { padding: 1.75rem 2rem 1.25rem; }
	.sg__body { padding: 1.25rem 2rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sg, .sg:not([open]), .sg[open] { translate: 0 0; transition: opacity 0.15s linear, display 0.15s allow-discrete, overlay 0.15s allow-discrete; }
	@starting-style { .sg[open] { translate: 0 0; opacity: 0; } }
}