/* v3 step wizard (reference §8, plan §8, §11 #92, #94; board EventWizard,
   EventWizardStepPhone). Desktop (>= 64em): step list | form | summary.
   Below: one column; the step list becomes the phone bar ("Step 2 of 6",
   six segments, "All steps" sheet). Sticky footer Back · Save draft ·
   Continue (phone: Back · Continue, every Continue saves).
   Step markers are status dots (circles, core §6). Macros:
   core/components/_lg_wizard.html; behaviour js/v3/wizard.js. */

/* Fills the screen under the top bar (content padding 2rem each side), so
   the footer, pushed to the end of the form, sits at the screen bottom. */
.lg-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: calc(100dvh - var(--bar-height) - var(--space-8) * 2);
}
.lg-wizard__form { display: flex; flex: 1; flex-direction: column; gap: var(--space-6); }

/* ---------- Top bar: × Close · title · for organiser · draft saved ---------- */
.lg-wzbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--bar-height);
  border-bottom: 1px solid var(--border);
}
.lg-wzbar__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  padding-inline-end: var(--space-4);
  border-right: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.lg-wzbar__close:hover { color: var(--primary); }
.lg-wzbar__title { margin: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-wzbar__org { color: var(--text-muted); font-size: var(--size-label); }
.lg-wzbar__saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 0 auto;
  color: var(--success);
  font-size: var(--size-label);
  white-space: nowrap;
}
.lg-wzbar__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; }

/* ---------- Layout ---------- */
.lg-wizard__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.lg-wizard__nav { display: none; }
.lg-wizard__main { display: flex; flex-direction: column; gap: var(--space-6); min-inline-size: 0; }
.lg-wizard__aside { min-inline-size: 0; }
/* Ledger 2 form sheet (decision 303): a step's sections (event field groups,
   shared with the event page) read as ONE --surface sheet split by 1px
   dividers, not cards on --page; section-size headings. The 40rem column keeps
   them stacked (heading above fields). */
.lg-wizard__step:not([hidden]) {
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.lg-wizard__step > .lg-card { border: 0; border-radius: 0; background: transparent; padding: var(--space-5) var(--space-6); }
.lg-wizard__step > .lg-card + .lg-card { border-block-start: 1px solid var(--border); }
.lg-wizard__step > .lg-card > .lg-card__title { font-size: var(--size-section); line-height: var(--leading-section); letter-spacing: -0.01em; }
@media (max-width: 39.99em) { .lg-wizard__step > .lg-card { padding: var(--space-4); } }
@media (min-width: 64em) {
  .lg-wizard__grid { grid-template-columns: 15rem minmax(0, 40rem) minmax(14rem, 1fr); gap: var(--space-8); align-items: start; }
  .lg-wizard__nav { display: block; position: sticky; top: calc(var(--bar-height) + var(--space-4)); }
  .lg-wizard .lg-stepbar { display: none; }
}

/* ---------- Step list (desktop, and inside the phone sheet) ---------- */
.lg-steps__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.lg-steps__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text);
  text-decoration: none;
}
a.lg-steps__row:hover { background: var(--row-hover); }
a.lg-steps__row:hover .lg-steps__label { color: var(--primary); text-decoration: underline; }
.lg-steps__item--current .lg-steps__row { background: var(--primary-tint); }
.lg-steps__mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-top: -0.125rem;
  border: 1.5px solid var(--border-control);
  border-radius: 50%;
  background: var(--surface);
  color: var(--on-primary);
  font-size: var(--size-caption);
  font-weight: 700;
}
.lg-steps__item--done .lg-steps__mark { border-color: var(--success); background: var(--success); }
.lg-steps__item--current .lg-steps__mark { border-color: var(--primary); background: var(--primary); }
.lg-steps__item--fix .lg-steps__mark { border-color: var(--warning); background: var(--warning-tint); color: var(--warning); }
.lg-steps__text { display: flex; flex-direction: column; min-inline-size: 0; }
.lg-steps__label { font-weight: 500; }
.lg-steps__desc { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }
.lg-steps__item--fix .lg-steps__desc,
.lg-steps__item--current .lg-steps__desc:not(:empty) { color: var(--text-muted); }
.lg-steps__item--fix .lg-steps__desc { color: var(--warning); font-weight: 500; }

/* ---------- Phone step bar ---------- */
.lg-stepbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); }
.lg-stepbar__text { margin: 0; font-size: var(--size-label); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-stepbar__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: var(--size-label);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
}
.lg-stepbar__segments { grid-column: 1 / -1; display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.lg-stepbar__seg { flex: 1; block-size: 0.25rem; border-radius: var(--radius-pill); background: var(--border); }
.lg-stepbar__seg--done, .lg-stepbar__seg--current { background: var(--primary); }
.lg-stepbar__seg--fix { background: var(--warning); }

/* ---------- Step heading ---------- */
.lg-stephead { display: flex; flex-direction: column; gap: var(--space-1); }
.lg-stephead__of { margin: 0; color: var(--text-muted); font-size: var(--size-label); }
.lg-stephead__title {
  margin: 0;
  font-size: var(--size-page-title);
  line-height: var(--leading-page-title);
  font-weight: var(--weight-page-title);
  letter-spacing: -0.02em;
}
.lg-stephead__title:focus { outline: none; }

/* ---------- Summary card (right column) ---------- */
.lg-wzsum { margin: 0; }
.lg-wzsum__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.lg-wzsum__row dt { color: var(--text-muted); }
.lg-wzsum__row dd { margin: 0; text-align: end; overflow-wrap: anywhere; }

/* ---------- Sticky footer ---------- */
.lg-wzfoot {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-bar);
  /* Full content width, down to the bottom edge (cancels the content padding). */
  margin: auto calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.lg-wzfoot__inner { display: flex; align-items: center; gap: var(--space-3); }
.lg-wzfoot__draft { margin-inline-start: auto; }
.lg-wzfoot__back + .lg-wzfoot__draft { margin-inline-start: auto; }
html:has(.lg-wzfoot) { scroll-padding-bottom: calc(var(--control-height) + var(--space-6) + var(--space-2)); }

@media (max-width: 39.99em) {
  .lg-wzbar__close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-wzbar__close { padding-inline-end: var(--space-3); }
  .lg-wzbar__title { display: flex; flex-direction: column; line-height: var(--leading-label); }
  .lg-wizard { min-height: calc(100dvh - var(--bar-height) * 2 - env(safe-area-inset-bottom) - var(--space-4) - var(--space-6)); }
  .lg-wzfoot {
    bottom: calc(var(--bar-height) + 1px + env(safe-area-inset-bottom));   /* the tab bar + its top border */
    margin: auto calc(var(--space-4) * -1) calc(var(--space-6) * -1);
    padding: var(--space-3) var(--space-4);
  }
  .lg-wzfoot__draft { display: none; }
  .lg-wzfoot__inner > .lg-btn--primary { flex: 1; margin-inline-start: auto; }
  .lg-wzfoot__inner > .lg-btn { min-height: var(--control-height-touch); }
  html:has(.lg-wzfoot) {
    scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--control-height-touch) + var(--space-6) + var(--space-2));
  }
}