/* /data — hand-skeleton sample and offers. Tokens only (styles.css); the viewer reads --skel-* at runtime
   and re-reads them on html[data-theme] changes / the themechange event. */

/* Above the fold: headline, one sentence, player, one button. */
.data-hero { text-align: center; padding: 40px 0 8px; }
@media (min-width: 720px) { .data-hero { padding-top: 48px; } }
.data-hero h1 { max-width: none; margin: 0 auto .3em; }
.data-hero .lede { margin: 0 auto 24px; }

.skel-fig { margin: 0 auto; max-width: 640px; text-align: left; }
.skel {
  --skel-bone: var(--text);
  --skel-joint: var(--accent);
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--surface);
  background-size: 24px 24px, 24px 24px, auto;
}
.skel-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; touch-action: none; cursor: grab; }
@media (max-width: 600px) { .skel-canvas { aspect-ratio: 1 / 1; } }
.skel.dragging .skel-canvas { cursor: grabbing; }

.skel-hint {
  position: absolute; top: 10px; right: 12px; pointer-events: none;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted);
}

/* Fallback when JS, WebGL or the CDN is unavailable. */
.skel-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; margin: 0; text-align: center;
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
}
.skel-ready .skel-fallback, .skel-ready .skel-hint.hidden { display: none; }
.skel-ui { display: none; }
.skel-ready .skel-ui {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-top: 1px solid var(--border);
}
.skel-play {
  font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  min-width: 64px; padding: 8px 10px; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.skel-play:hover { background: var(--surface-2); }
.skel-scrub { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); margin: 0; }
.skel-time { font-family: var(--mono); font-size: .72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.skel-fig figcaption {
  margin-top: 14px; font-size: .84rem; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap;
}
.skel-fig .fig-no { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--text); margin-right: 8px; }

.data-cta { display: inline-flex; align-items: center; gap: 14px; }
.data-cta .btn { margin: 0; }
.data-cta-meta { font-family: var(--mono); font-size: .74rem; color: var(--muted); }

/* Detail on request: hairline +/− rows (reuses .faq), kept to the player's width. */
.data-more { max-width: 640px; margin: 40px auto 0; text-align: left; }
.data-more details > ul, .data-more details > p { max-width: none; }
.data-more .metric-list { margin-top: 0; }

.skel-takes { list-style: none; padding: 0; margin: 0 0 16px; }
.skel-takes li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: .92rem; color: var(--text);
}
.skel-takes .id { font-family: var(--mono); font-size: .76rem; margin-right: 8px; }
.skel-takes .state { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.skel-takes .state.live { color: var(--accent); }
.skel-takes .is-pending, .skel-takes .state.pending { color: var(--muted); }

/* Offers: clean 4-up, one line + one button each. */
.offers-4 {
  display: grid; grid-template-columns: 1fr; margin: 24px 0 8px;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .offers-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .offers-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.offer {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 24px 20px 24px 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .offer + .offer { padding-left: 20px; } .offer:nth-child(2n+1) { padding-left: 0; } }
@media (min-width: 1000px) {
  .offer { border-bottom: 0; }
  .offer:nth-child(2n+1) { padding-left: 20px; }
  .offer:first-child { padding-left: 0; }
  .offer + .offer { border-left: 1px solid var(--border); }
}
.offer h3 { margin: 0; }
.offer p { color: var(--muted); font-size: .94rem; margin: 0 0 8px; }
.offer .btn { margin-top: auto; align-self: flex-start; }

/* Custom-collection spec template: copyable, hairline box. */
.spec-template {
  margin: 0 0 16px; padding: 14px 16px; overflow-x: auto; user-select: all;
  font-family: var(--mono); font-size: .8rem; line-height: 1.8; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}