/* make.html: the order journey. Uses the tokens in site.css. */
.make { padding-block: var(--sp-5) var(--sp-7); }
.make__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.make__lead { font-size: var(--s-large); font-weight: 700; }

/* Stepper: a real ordered list, numbers drawn in crayon circles */
.stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-1); counter-reset: step; margin-bottom: var(--sp-5); }
.stepper li { counter-increment: step; }
.stepper button { width: 100%; display: flex; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0.3rem 0; text-align: left; font-weight: 800; font-size: var(--s-small); cursor: pointer; line-height: 1.2; }
.stepper button::before { content: counter(step); flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--sheet); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.stepper button.is-done::before { background: var(--green); }
.stepper button[aria-current="step"]::before { background: var(--yellow); }
.stepper button:disabled { cursor: default; opacity: 0.75; }

.make__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-5); align-items: start; }
.make__form { display: grid; gap: var(--sp-4); }
.step { background: var(--sheet); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.steps-on .step:not(.is-current) { display: none; }
.step__title { font-family: var(--font-display); font-size: calc(var(--s-large) * 1.5); font-weight: 600; line-height: 1.1; }
.step__title:focus { outline: none; }
.step__body { display: grid; gap: var(--sp-3); }
.step__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); }
.fld { display: grid; gap: var(--sp-1); border: 0; padding: 0; margin: 0; }
.fld label, .fld legend { font-weight: 800; padding: 0; margin-bottom: var(--sp-1); }
.field-select { max-width: 14rem; appearance: none; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2 L8 8 L14 2' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center; padding-right: 2.6rem; font-family: var(--font-text); font-size: var(--s-body); font-weight: 800; }
.field-input--wide { max-width: 30rem; font-family: var(--font-text); font-size: var(--s-body); font-weight: 700; }
.help { font-weight: 600; max-width: 52ch; }
.error { font-weight: 800; color: #b3261e; }
.redirect { font-weight: 800; background: var(--yellow); padding: 0.6rem 0.9rem; border: var(--stroke) solid var(--ink); border-radius: 10px; max-width: 52ch; }
.safe { display: flex; gap: var(--sp-2); align-items: center; background: var(--paper) var(--paper-tex); padding: var(--sp-2) var(--sp-3); border-radius: 12px; }
.safe svg { width: 44px; height: auto; flex: none; transform: scaleX(-1); }
.safe p { font-weight: 600; max-width: 56ch; }

/* Level and choice cards */
.levels-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.lvl, .choice { position: relative; display: block; }
.lvl input, .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lvl__card, .choice__card { display: grid; gap: 0.25rem; background: var(--sheet); padding: var(--sp-2); height: 100%; transition: background-color var(--t-hover) ease; }
.lvl__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: var(--sp-1); }
.lvl__name, .choice__name { font-family: var(--font-display); font-size: var(--s-large); font-weight: 600; line-height: 1.15; }
.lvl__ages, .choice__price { font-weight: 800; }
.lvl__desc, .choice__desc { font-weight: 600; font-size: var(--s-small); }
.lvl input:checked + .lvl__card, .choice input:checked + .choice__card { background: #fff3cc; box-shadow: inset 0 0 0 4px var(--yellow); } /* taste-skill-ignore: a selection ring, not a resting shadow */
.lvl input:focus-visible + .lvl__card, .choice input:focus-visible + .choice__card { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--yellow); } /* taste-skill-ignore: focus ring */
.choice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.choice__card { padding: var(--sp-3); }
.story-sample { background: var(--sheet); padding: var(--sp-2) var(--sp-3); font-weight: 600; max-width: 46ch; transform: rotate(-1deg); }
.story-sample b { font-family: var(--font-display); font-weight: 600; margin-right: 0.4em; }

/* Preview with a watermark */
.preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.preview__sheet { position: relative; background: var(--sheet); padding: var(--sp-2); overflow: clip; display: grid; gap: var(--sp-1); align-content: start; }
.preview__sheet img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.preview__sheet figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--s-body); text-align: center; }
.watermark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); color: rgba(232, 69, 44, 0.32); transform: rotate(-28deg); letter-spacing: 0.04em; }

.total { display: flex; justify-content: flex-start; gap: var(--sp-3); align-items: baseline; font-weight: 800; font-size: var(--s-large); font-family: var(--font-display); }

/* Summary */
.make__summary { position: sticky; top: var(--sp-3); background: var(--sheet); padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.sum__title { font-family: var(--font-display); font-size: var(--s-large); font-weight: 600; }
.sum__cover { width: 72%; margin-inline: auto; transform: rotate(-2deg); border: var(--stroke) solid var(--ink); }
.sum__cover svg { width: 100%; height: auto; }
.sum__list { display: grid; gap: 0.35rem; font-size: var(--s-small); }
.sum__list div { display: flex; justify-content: space-between; gap: var(--sp-2); }
.sum__list dt { font-weight: 800; }
.sum__list dd { font-weight: 600; text-align: right; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-1); font-family: var(--font-display); font-weight: 600; font-size: var(--s-large); }

@media (max-width: 1099px) {
  .make__grid { grid-template-columns: 1fr; }
  .make__summary { position: static; grid-template-columns: 160px 1fr; align-items: start; }
  .sum__title { grid-column: 1 / -1; }
  .sum__cover { width: 100%; }
  .sum__total { grid-column: 1 / -1; }
  .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-2); }
}
@media (max-width: 699px) {
  .stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stepper .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper button { justify-content: center; }
  .step { padding: var(--sp-3) var(--sp-2); }
  .levels-pick { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-1); }
  .lvl__card { padding: 0.4rem; }
  .lvl__desc { display: none; }
  .lvl__name { font-size: 1.05rem; }
  .lvl__ages { font-size: 0.875rem; }
  .choice-pair, .preview { grid-template-columns: 1fr; }
  .step__nav { flex-direction: column-reverse; align-items: stretch; }
  .step__nav .btn { width: 100%; }
  .make__summary { grid-template-columns: 110px 1fr; }
}

.chip--off span { opacity: 0.75; text-decoration: line-through; text-decoration-thickness: 2px; cursor: not-allowed; }
.chip--off input { cursor: not-allowed; }
@media (max-width: 1099px) { .make__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .field-select { max-width: 100%; } .stepper { gap: 2px; } .stepper button::before { width: 2em; height: 2em; } }
.stepper button { min-height: 44px; }