/*
  Page compositions: the Hello page (home#index) and the /playground gallery.
  Same rule as application.css: tokens only, no literal values.
*/

/* ---------- Hello: hero band ---------- */
.hello-hero { background: var(--jd-hero-bg); color: var(--jd-hero-fg); padding-block: var(--jd-space-hero-top) var(--jd-space-hero-bottom); }
.hello-hero .eyebrow { color: var(--jd-hero-muted); }
.hello-hero__grid {
  display: grid;
  gap: var(--jd-space-xxl);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-hero), var(--jd-size-full)), var(--jd-size-fr)));
}
.hello-hero__title {
  font-size: var(--jd-font-size-hero);
  line-height: var(--jd-font-leading-hero);
  letter-spacing: var(--jd-font-tracking-hero);
  font-variation-settings: var(--jd-font-opsz-display);
}
.hello-hero__tagline { font-family: var(--jd-font-display); font-size: var(--jd-font-size-tagline); max-width: var(--jd-size-measure-tagline); }
.hello-hero__deck { font-size: var(--jd-font-size-deck); max-width: var(--jd-landing-deck-measure); color: var(--jd-hero-muted); }
.hello-hero__stage { justify-self: center; display: grid; justify-items: center; gap: var(--jd-space-sm); }
.hello-hero__bubble {
  max-width: var(--jd-size-bubble-hero);
  padding: var(--jd-space-sm) var(--jd-space-md);
  background: var(--jd-hero-fg);
  color: var(--jd-hero-bubble-fg);
  font-size: var(--jd-font-size-bubble);
  border-radius: var(--jd-radius-bubble) var(--jd-radius-bubble) var(--jd-radius-bubble) var(--jd-radius-bubble-tail);
}

/* ---------- Hello: type specimens ---------- */
.type-specimens { display: grid; }
.type-spec { display: grid; gap: var(--jd-space-xs); padding-block: var(--jd-space-lg); border-bottom: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); }
.type-spec:last-child { border-bottom: none; }
.type-spec__display { font-family: var(--jd-font-display); font-weight: var(--jd-font-weight-semibold); font-size: var(--jd-font-size-display); line-height: var(--jd-font-leading-tight); max-width: var(--jd-size-measure); }
.type-spec__body { font-size: var(--jd-font-size-lede); max-width: var(--jd-size-measure-lede); }
.type-spec__mono { font-family: var(--jd-font-mono); font-variant-numeric: var(--jd-font-numeric); }

/* ---------- Hello: product composition ---------- */
.hello-product { display: grid; gap: var(--jd-space-lg); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-hero), var(--jd-size-full)), var(--jd-size-fr))); }
.hello-product__full { grid-column: var(--jd-size-span-all); }
.hem-state { justify-items: center; text-align: center; }
.hem-state figcaption { display: grid; gap: var(--jd-space-hair); }

/* ---------- Playground ---------- */
/* Intrinsic sidebar: the contents list sits beside the gallery when there is
   room and wraps above it when there isn't (no breakpoints). */
.playground { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--jd-space-xxl); }
.playground > .stack { flex-grow: var(--jd-landing-text-grow); flex-basis: var(--jd-space-none); min-width: var(--jd-landing-content-min); }
.playground__toc { flex-grow: var(--jd-landing-text-shrink); flex-basis: var(--jd-size-track-state); display: grid; gap: var(--jd-space-sm); }
.playground__toc-tier { display: grid; gap: var(--jd-space-xs); margin-bottom: var(--jd-space-lg); }
.playground__tier { display: grid; gap: var(--jd-space-xl); }
.playground__template { width: var(--jd-size-full); border: var(--jd-border-hairline) var(--jd-border-dash) var(--jd-line); border-radius: var(--jd-radius-tile); }
.playground__slot { padding: var(--jd-space-lg); background: var(--jd-sunk); border-radius: var(--jd-radius-tile); color: var(--jd-muted); }
.playground__toc ol { display: flex; flex-wrap: wrap; gap: var(--jd-space-xxs) var(--jd-space-md); margin: var(--jd-space-none); padding: var(--jd-space-none); list-style: none; }
.playground__toc a { color: var(--jd-muted); text-decoration: none; font-size: var(--jd-font-size-small); }
.playground__toc a:hover { color: var(--jd-fg); }
.playground__entry { display: grid; gap: var(--jd-space-lg); padding-top: var(--jd-space-xl); border-top: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); scroll-margin-top: var(--jd-landing-scroll-margin); }
.playground__path { color: var(--jd-muted); overflow-wrap: anywhere; }
.playground__cases { display: grid; gap: var(--jd-space-lg); grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-pair), var(--jd-size-full)), var(--jd-size-fr))); }
.playground__case { display: grid; gap: var(--jd-space-xs); align-content: start; min-width: var(--jd-space-none); margin: var(--jd-space-none); }
.playground__specimen { min-width: var(--jd-space-none); }
.playground__specimen > * { max-width: var(--jd-size-full); }
.playground__specimen > .pill { justify-self: center; }
.playground__specimen > .field, .playground__specimen > .flash, .playground__specimen > .card,
.playground__specimen > .exception, .playground__specimen > .table-scroll, .playground__specimen > .msg,
.playground__specimen > .swatch, .playground__specimen > .chat, .playground__specimen > .site-header { width: var(--jd-size-full); }
.playground__snippet summary { cursor: pointer; font-size: var(--jd-font-size-caption); color: var(--jd-muted); }
.playground__snippet pre { margin: var(--jd-space-xs) var(--jd-space-none) var(--jd-space-none); padding: var(--jd-space-sm) var(--jd-space-md); overflow-x: auto; background: var(--jd-sunk); border-radius: var(--jd-radius-tile); white-space: pre-wrap; overflow-wrap: anywhere; }