/* Size pages (/sizes, /sizes/<id>) and the "Real sizes of real things" section on the home page.
   Colors, radii, shadow and fonts come only from tokens.css; header, footer, cards and buttons come from site.css.
   The pages are generated by scripts/build-sizes.mjs; the scale drawing is js/sizes.js. */

/* ---------- Page ---------- */

.sz-page {
  padding-block: 8px 88px;
}

/* One readable column, aligned with the header like the About page. */
.sz-page > * {
  max-width: 46rem;
}

.sz-page > .kit-ad {
  margin-inline: 0;
}

.sz-hub > * {
  max-width: none;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  color: var(--c-muted);
  font-size: 0.875rem;
  list-style: none;
}

.crumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--c-muted);
}

.crumbs a {
  color: var(--c-muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--c-primary-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs [aria-current] {
  color: var(--c-text);
}

.sz-page h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.7vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sz-block {
  margin-top: 48px;
}

.sz-block h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Answer ---------- */

.sz-answer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 20px 24px;
}

.sz-answer > img {
  flex: none;
  width: 72px;
  height: 72px;
}

.sz-answer p {
  margin: 0;
}

.sz-answer-text {
  font-size: 1.25rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.sz-answer-text strong {
  color: var(--c-primary-600);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  white-space: nowrap;
}

.sz-answer p.sz-answer-alt {
  margin-top: 2px;
}

.sz-answer p.sz-source {
  margin-top: 8px;
  color: var(--c-muted);
  font-size: 0.875rem;
}

.sz-source a {
  color: var(--c-muted);
  text-decoration-color: var(--c-ruler);
  text-underline-offset: 3px;
}

.sz-source a:hover {
  color: var(--c-primary-600);
  text-decoration-color: currentColor;
}

/* ---------- Comparisons ---------- */

.sz-compare {
  margin: 16px 0 0;
  padding: 2px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-card);
  box-shadow: var(--shadow);
  list-style: none;
}

.sz-compare li {
  padding: 12px 0;
  line-height: 1.5;
}

.sz-compare li + li {
  border-top: 1px solid var(--c-border);
}

.sz-compare strong {
  color: var(--c-primary-600);
  font-weight: 700;
}

.sz-compare a {
  color: var(--c-text);
  text-decoration-color: var(--c-ruler);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.sz-compare a:hover {
  color: var(--c-primary-600);
  text-decoration-color: currentColor;
}

/* ---------- Scale drawing ---------- */

.sz-figure {
  margin: 16px 0 0;
}

.sz-stage {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: linear-gradient(var(--c-stage-top), var(--c-stage-bottom));
}

/* Without JavaScript (or if the art fails to load) the stage shows bars to scale. */
.sz-stage .sz-bars {
  position: absolute;
  top: 50%;
  right: 24px;
  left: 24px;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.sz-figure.is-drawn .sz-bars {
  visibility: hidden;
  opacity: 0;
}

.sz-draw {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sz-figure.is-drawn .sz-draw {
  opacity: 1;
}

/* Ground: a grey strip, then white under it for the labels. */
.sz-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 2px solid var(--c-ruler);
  background: linear-gradient(var(--c-ground) 0 8px, var(--c-card) 8px);
}

.sz-art {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.sz-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sz-line {
  fill: none;
  stroke: var(--c-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.sz-line.is-main {
  stroke: var(--c-primary);
}

.sz-label {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 132px;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.sz-label .n {
  display: block;
  color: var(--c-muted);
  font-weight: 600;
}

.sz-label .v {
  display: block;
  margin-top: 1px;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sz-label.is-main .n {
  color: var(--c-text);
}

.sz-label.is-main .v {
  color: var(--c-primary-600);
}

.sz-figure figcaption {
  margin: 8px 2px 0;
  color: var(--c-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---------- Fact, call to action ---------- */

.sz-fact {
  margin: 16px 0 0;
  padding: 20px 24px;
  font-size: 1.0625rem;
}

.sz-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 48px;
  padding: 24px 28px;
  background: var(--c-primary-50);
}

.sz-cta p {
  margin: 4px 0 0;
}

.sz-cta p.sz-cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Size cards (more sizes, hub, home page) ---------- */

.sz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 520px) {
  .sz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .sz-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sz-grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sz-grid--home {
  margin-top: 28px;
}

.sz-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-card);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sz-item:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.sz-item img {
  flex: none;
  width: 40px;
  height: 40px;
}

.sz-item-name {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.sz-item-size {
  display: block;
  margin-top: 2px;
  color: var(--c-muted);
  font-size: 0.875rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.sz-all {
  margin: 16px 0 0;
}

.sz-all a {
  color: var(--c-primary-600);
  font-weight: 600;
  text-decoration: none;
}

.sz-all a::after {
  content: " →";
}

.sz-all a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Hub ---------- */

.sz-intro {
  max-width: 46rem;
  margin: 12px 0 0;
  font-size: 1.0625rem;
}

.sz-cats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.sz-cats a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-card);
  color: var(--c-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.sz-cats a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary-600);
}

.sz-cats a span {
  color: var(--c-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Home page header ---------- */

/* The home header has four links. Below about 520px they don't fit next to the wordmark,
   so keep the logo and hide the words there (the hero right below says "Guess the Size"). */
@media (max-width: 520px) {
  .site-header--home .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .sz-page {
    padding-bottom: 64px;
  }

  .sz-answer {
    gap: 14px;
    padding: 16px;
  }

  .sz-answer > img {
    width: 52px;
    height: 52px;
  }

  .sz-answer-text {
    font-size: 1.125rem;
  }

  .sz-answer-text strong {
    font-size: 1.25rem;
  }

  .sz-compare {
    padding-inline: 16px;
  }

  .sz-stage {
    height: 250px;
  }

  .sz-stage .sz-bars {
    right: 16px;
    left: 16px;
  }

  .sz-fact {
    padding: 16px;
  }

  .sz-cta {
    padding: 20px;
  }

  .sz-grid {
    gap: 8px;
  }

  .sz-item {
    gap: 8px;
    padding: 8px 10px 8px 8px;
  }

  .sz-item img {
    width: 32px;
    height: 32px;
  }

  .sz-item-name {
    font-size: 0.9375rem;
  }

  .sz-item-size {
    font-size: 0.8125rem;
  }
}