/* Shed World page CSS: only what the kit lacks, shared by every page. */

/* the sign-up form on its own panel (booking-form recipe: the form on --g-alt, 48px padding) */
.form-panel { background: var(--g-alt); padding: var(--s-7); border-radius: var(--r-lg); align-self: start; }
.form-panel > h3 { font: 500 var(--t-lead)/1.3 var(--font-text); margin-bottom: var(--s-2); }
.form-panel > p { margin-bottom: var(--s-5); }
@media (max-width: 639px) { .form-panel { padding: var(--s-5); } }

/* a pick's label above its name (affiliate examples) */
.pick-label { color: var(--muted); }

/* the cost table and the materials list: .rows with a third column for the quantity */
.rows--qty > li { grid-template-columns: minmax(0, 1fr) auto; }
.rows--qty .rows__qty { color: var(--muted); }
.rows__total { font-weight: 500; }

/* the statement (word-highlight) sits on the left line, never centred */
.statement .wrap { display: grid; gap: var(--s-5); align-content: start; }

/* the article's step list: numbers are the content here, the order of the work */
.steps-list { counter-reset: step; display: grid; gap: 0; }
.steps-list > li { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.steps-list > li:first-child { padding-top: 0; }
.steps-list > li::before { content: counter(step); grid-row: 1 / span 2; font: var(--display-weight) var(--t-h3)/1 var(--font-display); color: var(--accent); }
.steps-list > li > h3 { font: 500 var(--t-lead)/1.3 var(--font-text); }
.steps-list > li > p { max-width: 60ch; }

/* picture-develops frame (as the kit's in-page demo sets it) */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(560px, var(--ly-fit, 560px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* the footer's disclosure paragraph */
.footer__disclosure { max-width: 70ch; color: var(--ink); font-size: var(--t-small); line-height: 1.6; margin-top: var(--s-5); }

/* topic jump list on the articles page */
.topic-jump { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

/* small legal pages */
.legal { padding-top: calc(var(--nav) + var(--s-8)); padding-bottom: var(--s-9); }
.legal .wrap { display: grid; gap: var(--s-4); max-width: 760px; }
.legal h1 { font: var(--display-weight) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--display-tracking); margin-bottom: var(--s-4); }
.legal h2 { font: 500 var(--t-lead)/1.3 var(--font-text); margin-top: var(--s-5); }

/* the tablet stacks a split; a 4:3 photograph under short text leaves the screen half empty, so it runs taller */
@media (min-width: 640px) and (max-width: 1023px) {
  main > .section .grid--top > .frame--photo.span-6 { --ratio: 88%; }
}

/* a 320px phone: the bar keeps the logo and the menu; the main action stays in the hero and the sheet */
@media (max-width: 379px) { .nav:not(.is-open) .nav__actions { display: none; } .nav:not(.is-open) .nav__toggle { margin-left: auto; } }

/* ================================================================ motion pass (step 2)
   Extends the kit's tokens (motion.css: --m-ease, --m-ease-io, --m-panel). Reduced motion keeps every state change,
   drops the travel. */

/* "Get the free guide" and the topic jumps glide to their section instead of teleporting */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* the latest-articles photograph: the new one fades in on top (180ms) while the old one waits underneath,
   so the frame never flashes its ground. The hidden photos stay out of the accessibility tree (visibility). */
[data-peek] [data-peek-for] {
  z-index: 1; opacity: 1; visibility: visible;
  transition: opacity 180ms var(--m-ease), visibility 0s, transform var(--m-image-out, 400ms) var(--m-ease);
}
[data-peek] [data-peek-for][hidden] {
  display: block !important; z-index: 0; opacity: 0; visibility: hidden;
  transition: opacity 0s 180ms, visibility 0s 180ms;
}
@media (prefers-reduced-motion: reduce) { [data-peek] [data-peek-for], [data-peek] [data-peek-for][hidden] { transition: none; } }

/* a field's reason arrives (opacity and 4px down, 180ms) instead of popping in and shoving the form */
.field__error:not([hidden]) { transition: opacity 180ms var(--m-ease), transform 180ms var(--m-ease); }
@starting-style { .field__error:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .field__error:not([hidden]) { transition: opacity 180ms var(--m-ease); }
  @starting-style { .field__error:not([hidden]) { transform: none; } }
}
/* the status line under the form ("2 fields to fix", "Sent") fades as its words change (motion-file.js re-triggers it) */
.form__status.is-said { animation: sw-say 220ms var(--m-ease) both; }
@keyframes sw-say { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { @keyframes sw-say { from { opacity: 0; } } }

/* the phone menu button: its two lines turn into a cross while the sheet is open (200ms, the kit's in-out) */
.nav__toggle svg { overflow: visible; }
.nav__toggle :is(.nav__bar1, .nav__bar2) {
  transform-box: view-box; transform-origin: 9px 9px;
  transition: transform var(--m-panel, 200ms) var(--m-ease-io, cubic-bezier(.65, 0, .35, 1));
}
.nav.is-open .nav__toggle .nav__bar1 { transform: rotate(45deg) translateY(4px); }
.nav.is-open .nav__toggle .nav__bar2 { transform: rotate(-45deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .nav__toggle :is(.nav__bar1, .nav__bar2) { transition: none; } }