/*
 * Maman & Moi mock-up: widgets (kit element 21 and ideas 1 and 2).
 *   .pk-   "Which sleep sack tonight?" panel, and the range input both pickers share
 *   .pkc-  compact picker for the sleep sack pages
 *   .sa-   size by age (details)
 *   .ab-   arrives by (details)
 * Phone first. Breakpoints 600 and 1024 (min-width only). Only --mm- tokens.
 * Motion: opacity and transform only. Transitions switch on with .is-live, after the
 * first render, so nothing animates on load.
 */

/* ============================================================
   1. Which sleep sack tonight? (full panel, sheet 12)
   The state lives in data-band (0 hot, 1 warm, 2 cool, 3 cold) on the section.
   CSS shows the tint, the sun or moon and the drawn layers from it.
   ============================================================ */
.pk {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--mm-r-lg); background: var(--mm-white); color: var(--mm-navy);
}
.pk-tints { position: absolute; inset: 0; pointer-events: none; }
.pk-tint { position: absolute; inset: 0; opacity: 0; }
.pk-t0 { background: var(--mm-coral-50); }
.pk-t1 { background: var(--mm-mint-50); }
.pk-t2 { background: var(--mm-mint-100); }
.pk-t3 { background: var(--mm-dusk-100); }
.pk[data-band="0"] .pk-t0,
.pk[data-band="1"] .pk-t1,
.pk[data-band="2"] .pk-t2,
.pk[data-band="3"] .pk-t3 { opacity: 1; }

/* Phone: drawing on top (180 px tall), controls below */
.pk-in { position: relative; display: grid; gap: var(--mm-s5); padding: var(--mm-s5) var(--mm-s4); }
.pk-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 184px; }
.pk-sack { height: 180px; width: auto; aspect-ratio: 220 / 300; }
.pk-ico { position: absolute; left: 0; top: 0; width: 40px; height: 40px; opacity: 0; }
.pk[data-band="0"] .pk-sun, .pk[data-band="1"] .pk-sun,
.pk[data-band="2"] .pk-moon, .pk[data-band="3"] .pk-moon { opacity: 1; }

/* Drawing strokes (the kit's dashed line, copied from sheet 12) */
.pk-dd { fill: none; stroke: var(--mm-navy); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3.5; }
.pk-ray { fill: none; stroke: var(--mm-navy); stroke-width: 1.75; stroke-linecap: round; }
.pk-out { fill: none; stroke: var(--mm-navy); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3.5; }
.pk[data-band="3"] .pk-out { stroke-width: 3; }
.pk-seam { fill: none; stroke: var(--mm-navy); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .6; }
.pk-hatch { fill: none; stroke: var(--mm-navy); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .55; }
.pk-dot { fill: var(--mm-navy); opacity: .32; }

/* The layers appear as the room cools: stitched inner line (1.0 and up), fleece dots (1.5 and up), batting hatching (2.5) */
.pk-lay { opacity: 0; transform: scale(.96); transform-box: fill-box; transform-origin: center; }
.pk:is([data-band="1"], [data-band="2"], [data-band="3"]) .pk-l2,
.pk:is([data-band="2"], [data-band="3"]) .pk-l3,
.pk[data-band="3"] .pk-l4 { opacity: 1; transform: scale(1); }

/* Transitions only once the first render is done (.is-live): 350 ms per layer, 400 ms tint */
.pk.is-live .pk-tint { transition: opacity 400ms var(--mm-ease-soft); }
.pk.is-live .pk-ico { transition: opacity var(--mm-t-step) var(--mm-ease-soft); }
.pk.is-live .pk-lay { transition: opacity var(--mm-t-step) var(--mm-ease-soft), transform var(--mm-t-step) var(--mm-ease-soft); }

/* Controls */
.pk-ctl { display: flex; flex-direction: column; gap: var(--mm-s4); min-width: 0; }
.pk-lbl { display: block; font: 700 var(--mm-fs-body)/1.35 var(--mm-font-text); }
.pk-read { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.pk-num { font: 700 var(--mm-fs-display)/1 var(--mm-font-head); font-stretch: 92%; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.pk-unit { font: 600 var(--mm-fs-h3)/1.2 var(--mm-font-text); }
.pk-scale { display: flex; justify-content: space-between; gap: var(--mm-s3); }

/* Range input (shared with the compact picker). The track is grey-700 (REVIEW.md: 3:1 on the cold ground). */
.pk-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--mm-tap);
  margin: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
.pk-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--mm-grey-700); }
.pk-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--mm-grey-700); }
.pk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 28px; height: 28px; margin-top: -12px;
  border-radius: 50%; background: var(--mm-navy); border: 3px solid var(--mm-white); box-shadow: 0 0 0 1.5px var(--mm-navy);
}
.pk-range::-moz-range-thumb {
  box-sizing: border-box; width: 28px; height: 28px;
  border-radius: 50%; background: var(--mm-navy); border: 3px solid var(--mm-white); box-shadow: 0 0 0 1.5px var(--mm-navy);
}

/* Kinds of night */
.pk-legend { display: block; margin-bottom: var(--mm-s2); font-weight: 600; }
.pk-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-s2); }

/* Result (aria-live) */
.pk-res { border-top: 1.5px dashed var(--mm-line-strong); padding-top: var(--mm-s4); display: flex; flex-direction: column; gap: var(--mm-s2); }
.pk-res-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mm-s3); }
.pk-tog { font-size: var(--mm-fs-small); }
.pk-name { font: 600 var(--mm-fs-h3)/1.28 var(--mm-font-head); font-stretch: 92%; letter-spacing: -.015em; }
.pk-under { font-size: var(--mm-fs-body); }
.pk-res-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-s3) var(--mm-s4); margin-top: var(--mm-s2); }
.pk-res-act .btn { white-space: normal; max-width: 100%; }
.pk-price { font-weight: 600; font-size: var(--mm-fs-body); font-variant-numeric: tabular-nums; }
.pk-demo { align-self: flex-start; }

@media (min-width: 600px) {
  .pk-in { grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); align-items: center; gap: var(--mm-s6); padding: var(--mm-s6); }
  .pk-sack { height: clamp(200px, 28vw, 260px); }
}
@media (min-width: 1024px) {
  .pk-in { grid-template-columns: minmax(220px, 300px) minmax(0, 520px); justify-content: center; gap: var(--mm-s7); padding: var(--mm-s7); min-height: 560px; }
  .pk-sack { height: 340px; }
  .pk-ico { width: 56px; height: 56px; }
  .pk-chips { display: flex; flex-wrap: wrap; }
  .pk-chips .chip { padding-inline: 12px; }
}

/* ============================================================
   2. Compact picker (sleep sack pages): "Is 1.0 TOG right for tonight's room?"
   ============================================================ */
.pkc {
  display: grid; gap: var(--mm-s2); padding: var(--mm-s4);
  background: var(--mm-mint-50); border: 1px solid var(--mm-mint-200); border-radius: var(--mm-r-md);
}
.pkc-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--mm-s1) var(--mm-s4); }
.pkc-lbl { font: 700 var(--mm-fs-body)/1.35 var(--mm-font-text); }
.pkc-t { font: 700 1.0625rem/1.375rem var(--mm-font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pkc-fit { display: flex; align-items: flex-start; gap: var(--mm-s2); font-size: var(--mm-fs-body); }
.pkc-fit .ic { margin-top: 2px; }
.pkc-more { display: inline-flex; align-items: center; min-height: var(--mm-tap); font-weight: 700; }
@media (min-width: 600px) { .pkc { padding: var(--mm-s4) var(--mm-s5); } }

/* ============================================================
   3. Size by age (details above the size radios)
   ============================================================ */
.sa { border: 1.5px solid var(--mm-line); border-radius: var(--mm-r-md); background: var(--mm-white); }
.sa > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px 4px 14px;
  border-radius: var(--mm-r-md); cursor: pointer; font: 700 var(--mm-fs-body)/1.35 var(--mm-font-text);
}
.sa > summary::-webkit-details-marker { display: none; }
.sa-sum-t { flex: 1; min-width: 0; }
.sa > summary .ic:last-child { transition: transform var(--mm-t-quick) var(--mm-ease-soft); }
.sa[open] > summary .ic:last-child { transform: rotate(180deg); }
.sa-body { padding: var(--mm-s1) 14px var(--mm-s4); display: grid; gap: var(--mm-s3); }
.sa[open] .sa-body { animation: mm-rise4 var(--mm-t-step) var(--mm-ease-soft) both; }
.sa-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mm-s1) var(--mm-s2); font-weight: 700; }
/* The number field sits inside the shared .step box (minus, field, plus) */
.sa-num {
  width: 48px; height: var(--mm-tap); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--mm-navy);
  text-align: center; font: 700 1rem/1.375rem var(--mm-font-text); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.sa-num::-webkit-outer-spin-button, .sa-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@supports selector(:has(*)) {
  .sa-num:focus-visible { outline: none; }
  .sa-step:has(.sa-num:focus-visible) { outline: 2px solid var(--mm-navy); outline-offset: 3px; }
}
.sa-step button[aria-disabled="true"] { color: var(--mm-glyph-off); cursor: not-allowed; }
.sa-step button[aria-disabled="true"]:hover { background: none; }
.sa-res { border-top: 1.5px dashed var(--mm-line-strong); padding-top: var(--mm-s3); display: grid; gap: var(--mm-s3); }
.sa-ans { display: grid; gap: var(--mm-s1); font-size: var(--mm-fs-body); }
.sa-ans strong { font-size: var(--mm-fs-price); }
.sa-act { display: flex; flex-wrap: wrap; gap: var(--mm-s2); }
.sa-act:empty { display: none; }

/* ============================================================
   4. Arrives by (under the delivery line)
   ============================================================ */
.ab-line { display: flex; align-items: flex-start; gap: 10px; font-size: var(--mm-fs-body); }
.ab-line .ic { margin-top: 0; }
.ab-more > summary {
  list-style: none; display: flex; align-items: center; gap: 6px; min-height: var(--mm-tap);
  cursor: pointer; font-weight: 700; border-radius: var(--mm-r-sm);
}
.ab-more > summary::-webkit-details-marker { display: none; }
.ab-sum-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.ab-more > summary:hover .ab-sum-t { text-decoration-style: dashed; text-decoration-thickness: 2px; }
.ab-more > summary .ic { transition: transform var(--mm-t-quick) var(--mm-ease-soft); }
.ab-more[open] > summary .ic { transform: rotate(180deg); }
.ab-body { padding: var(--mm-s2) 0 var(--mm-s1); }
.ab-more[open] .ab-body { animation: mm-rise4 var(--mm-t-step) var(--mm-ease-soft) both; }
.ab-body > * + * { margin-top: var(--mm-s3); }
.ab-body .fld { max-width: 280px; }
.ab-ans { font-size: var(--mm-fs-body); }
.ab-ans:empty { margin-top: 0; }
.ab-ans p + .ab-opts { margin-top: var(--mm-s3); }
.ab-opts { display: flex; flex-wrap: wrap; gap: var(--mm-s2); }

/* ============================================================
   Reduced motion: a 150 ms fade, no scale
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pk-lay { transform: none; }
  .pk.is-live .pk-tint, .pk.is-live .pk-ico { transition: opacity 150ms linear; }
  .pk.is-live .pk-lay { transition: opacity 150ms linear; }
  .sa > summary .ic:last-child, .ab-more > summary .ic { transition: none; }
  .sa[open] .sa-body, .ab-more[open] .ab-body { animation: mm-fade 150ms linear both; }
}