/* ============================================================
   Platinum 2.0 — Multi-Step Wizard Forms
   Modern SaaS form layout with stepper, sections, icon fields,
   and sticky footer navigation.

   Sections
     01. Outer shell
     02. Header card (title + count + progress + stepper)
     03. Stepper pills
     04. Step container
     05. Section cards
     06. Grid + fields
     07. Field widgets (inputs, selects, textarea, file, m2m)
     08. Errors (inline + alert + Django errorlist)
     09. Switch / toggle card
     10. Choice cards (radio-as-card)
     11. Guidance panel
     12. Sticky footer + buttons
     13. Submit loading state
     14. Focus-visible polish
     15. Dark mode
     16. Mobile
     17. Print
     18. Reduced motion
   ============================================================ */

/* ── 01. Outer shell ─────────────────────────────────────── */
.pl-wizard {
  /* Fluid full-width — fills the page container, capped so ultra-wide
     viewports keep a comfortable reading measure; centred when capped. */
  max-width: min(100%, 1180px);
  width: 100%;
  margin: 0;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--pl-space-5);
  padding-bottom: 7rem; /* room for sticky footer */
}

/* Staff wizard runs edge-to-edge — its Role & Scope step nests
   Brand → Clinic → Location → Patients/Leads panels that need the room,
   so it fills the full page container instead of the 1180px reading cap. */
.pl-wizard[data-staff-wizard] {
  max-width: 100%;
}

/* ── 02. Header card (stepper + inline counter, progress flush at bottom) ── */
.pl-wizard__header {
  background:
    linear-gradient(135deg, var(--pl-primary-50) 0%, rgba(255, 255, 255, 0) 55%),
    var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-xl);
  padding: var(--pl-space-2) var(--pl-space-5) 0; /* tight top, zero bottom — progress sits flush */
  box-shadow: var(--pl-shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Legacy title bar — removed from layout; hidden as safety net for any
   template still rendering it before the migration completes. */
.pl-wizard__header-bar { display: none; }

.pl-wizard__title,
.pl-wizard__title-icon { display: none; }

.pl-wizard__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
  border-radius: var(--pl-radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.pl-wizard__count .bi {
  font-size: 0.85rem;
}

/* Progress bar — pinned to the bottom edge of the header card, full width. */
.pl-wizard__progress {
  height: 3px;
  background: var(--pl-neutral-100);
  overflow: hidden;
  margin: 0 calc(-1 * var(--pl-space-5)); /* track header inset so the bar stays flush */
  order: 2; /* push below the stepper row */
}

.pl-wizard__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pl-primary-400), var(--pl-primary-600));
  transition: width var(--pl-dur-slow) var(--pl-ease-out);
}

/* ── 03. Stepper pills ───────────────────────────────────── */
.pl-wizard__steps {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 0.55rem;
  order: 1;
}

/* Pin step counter to the right edge of the tabs row. */
.pl-wizard__steps > .pl-wizard__count { margin-left: auto; }

@media (max-width: 640px) {
  .pl-wizard__steps > .pl-wizard__count {
    margin-left: 0;
    order: -1;
    align-self: flex-end;
  }
}

.pl-wizard__step-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-neutral-100);
  color: var(--pl-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: background var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease),
              box-shadow var(--pl-dur-fast) var(--pl-ease),
              transform var(--pl-dur-fast) var(--pl-ease);
}

.pl-wizard__step-pill:hover {
  background: var(--pl-neutral-200);
}

.pl-wizard__step-pill:active {
  transform: scale(0.97);
}

.pl-wizard__step-pill[data-state="active"] {
  background: var(--pl-primary-50);
  color: var(--pl-primary-700);
}

/* Active hover — intensify primary tint, do not fall back to neutral */
.pl-wizard__step-pill[data-state="active"]:hover {
  background: var(--pl-primary-100);
  color: var(--pl-primary-800);
}

.pl-wizard__step-pill[data-state="complete"] {
  background: var(--pl-success-soft);
  color: var(--pl-success-text);
}

/* Complete hover — keep green tint */
.pl-wizard__step-pill[data-state="complete"]:hover {
  background: var(--pl-success-soft);
  color: var(--pl-success-text);
}

.pl-wizard__step-pill__index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pl-neutral-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: inherit;
  transition: background var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease);
}

.pl-wizard__step-pill[data-state="active"] .pl-wizard__step-pill__index {
  background: var(--pl-primary-600);
  /* --pl-primary-600 is part of the numeric ramp, which does NOT flip in dark
     — the disc is the same navy in both themes, so its ink is literally white
     in both. --pl-neutral-0 is that: #ffffff with no dark override. */
  color: var(--pl-neutral-0);
}

.pl-wizard__step-pill[data-state="complete"] .pl-wizard__step-pill__index {
  background: var(--pl-success);
  /* CONTRAST FIX: this was a hard-coded #fff. --pl-success DOES flip (#4e7a66
     light → #7a9e8e dark), and white on the dark-theme sage measures 2.7:1 —
     every completed step number in the wizard failed WCAG AA in dark mode.
     --pl-on-success is the ink chosen for that plane in each theme (white in
     light at 4.9:1, near-black in dark at 6.7:1). */
  color: var(--pl-on-success);
}

.pl-wizard__step-pill .bi-check-lg {
  font-size: 0.95rem;
}

.pl-wizard__step-pill__icon {
  font-size: 0.95rem;
  color: inherit;
  opacity: 0.85;
}

/* ── 04. Step container ──────────────────────────────────── */
.pl-wizard__body {
  display: flex;
  flex-direction: column;
  gap: var(--pl-space-5);
}

.pl-wizard__step {
  display: none;
  flex-direction: column;
  gap: var(--pl-space-4);
}

.pl-wizard__step[data-active="true"] {
  display: flex;
  animation: pl-wizard-fade var(--pl-dur-base) var(--pl-ease-out) both;
}

@keyframes pl-wizard-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 05. Section card ────────────────────────────────────── */
.pl-wizard__section {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-xl);
  padding: var(--pl-space-6);
  box-shadow: var(--pl-shadow-sm);
  transition: box-shadow var(--pl-dur-base) var(--pl-ease);
}

.pl-wizard__section:hover {
  box-shadow: var(--pl-shadow-md);
}

.pl-wizard__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--pl-space-1);
  flex-wrap: wrap;
}

.pl-wizard__section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: var(--pl-fs-lg);
  font-weight: var(--pl-fw-bold);
  letter-spacing: -0.01em;
  line-height: var(--pl-lh-snug);
  color: var(--pl-text);
}

.pl-wizard__section-title .bi {
  color: var(--pl-primary-600);
  font-size: var(--pl-fs-xl);
}

.pl-wizard__section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  /* DARK-MODE FIX: was --pl-neutral-100 / --pl-text-muted. The tint pair
     resolves to exactly those two values in light (no visual change) but,
     unlike the raw neutral ramp, --pl-neutral-tint flips to a translucent
     white wash in dark instead of staying #edf4fb. */
  background: var(--pl-neutral-tint);
  color: var(--pl-neutral-on-tint);
  border-radius: var(--pl-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.pl-wizard__section-badge--info {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
}

.pl-wizard__section-badge--success {
  background: var(--pl-success-soft);
  color: var(--pl-success-text);
}

.pl-wizard__section-hint {
  margin: 0 0 var(--pl-space-5);
  font-size: var(--pl-fs-base);
  line-height: var(--pl-lh-base);
  /* 70ch, now named: --pl-measure-prose is the kit's hint/body measure. */
  max-width: var(--pl-measure-prose);
  color: var(--pl-text-muted);
}

/* Avoid stray top-margins inside first child of a section card */
.pl-wizard__section > *:first-child { margin-top: 0; }

/* ── 05b. Split layout (two side-by-side sections in one row) ── */
.pl-wizard__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 992px) {
  /* Form gets the bulk of the row; preview is a narrower sidebar. */
  .pl-wizard__split--form-preview {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
}

/* Sticky preview sidebar — stays visible while user scrolls long forms. */
@media (min-width: 992px) {
  .pl-wizard__section--sticky {
    position: sticky;
    top: 1rem;
  }
}

/* ── 06. Grid + fields ─────────────────────────────────────
   Responsive 12-col grid with fluid gap.
   Breakpoints: xs (<576) → sm (≥576) → md (≥768) → lg (≥1280) → xl (≥1440).
   Each breakpoint adds finer span control so semantic pairs
   (first/last name, email/phone, etc.) survive on tablets,
   and 4-col rows degrade to 2×2 instead of stacking to 1-col. */
.pl-wizard__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--pl-wizard-gap-x);
  row-gap: var(--pl-wizard-gap-y);
}

/* Density modifiers — use on grids whose row is denser/airier than default. */
.pl-wizard__grid--dense {
  column-gap: clamp(0.5rem, 0.8vw, 0.9rem);
  row-gap: clamp(0.65rem, 1vw, 1.1rem);
}
.pl-wizard__grid--airy {
  column-gap: clamp(1rem, 1.6vw, 1.75rem);
  row-gap: clamp(1.15rem, 1.8vw, 2rem);
}

/* A field hidden by its own logic (the Legacy clinic ID, which only applies
   while the Legacy switch is on) must actually disappear. `[hidden]` in the UA
   sheet is `display: none`, but it loses to the `display: flex` below on equal
   specificity, so the attribute alone left the field on screen — visible,
   fillable and about to be cleared on save. Stated here, next to the rule that
   beat it. */
.pl-wizard__field[hidden] { display: none !important; }
.pl-wizard__field {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  margin-bottom: 0; /* grid handles spacing */
  min-width: 0;     /* allow children to shrink inside grid track */
}

/* Belt-and-braces: last field in a grid never carries margin */
.pl-wizard__grid > .pl-wizard__field:last-child { margin-bottom: 0; }

/* ≥576px (sm) — small tablets / large phones. Keep logical pairs side-by-side. */
@media (min-width: 576px) {
  .pl-wizard__field--sm-2  { grid-column: span 2; }
  .pl-wizard__field--sm-3  { grid-column: span 3; }
  .pl-wizard__field--sm-4  { grid-column: span 4; }
  .pl-wizard__field--sm-6  { grid-column: span 6; }
  .pl-wizard__field--sm-8  { grid-column: span 8; }
  .pl-wizard__field--sm-12 { grid-column: span 12; }
}

/* ≥768px (md) — default desktop / tablet landscape. */
@media (min-width: 768px) {
  .pl-wizard__field--md-2  { grid-column: span 2; }
  .pl-wizard__field--md-3  { grid-column: span 3; }
  .pl-wizard__field--md-4  { grid-column: span 4; }
  .pl-wizard__field--md-5  { grid-column: span 5; }
  .pl-wizard__field--md-6  { grid-column: span 6; }
  .pl-wizard__field--md-7  { grid-column: span 7; }
  .pl-wizard__field--md-8  { grid-column: span 8; }
  .pl-wizard__field--md-9  { grid-column: span 9; }
  .pl-wizard__field--md-10 { grid-column: span 10; }
  .pl-wizard__field--md-12 { grid-column: span 12; }
}

/* ≥1280px (lg) — large desktop. Tighter layouts for horizontal real estate. */
@media (min-width: 1280px) {
  .pl-wizard__field--lg-2  { grid-column: span 2; }
  .pl-wizard__field--lg-3  { grid-column: span 3; }
  .pl-wizard__field--lg-4  { grid-column: span 4; }
  .pl-wizard__field--lg-5  { grid-column: span 5; }
  .pl-wizard__field--lg-6  { grid-column: span 6; }
  .pl-wizard__field--lg-7  { grid-column: span 7; }
  .pl-wizard__field--lg-8  { grid-column: span 8; }
  .pl-wizard__field--lg-9  { grid-column: span 9; }
  .pl-wizard__field--lg-12 { grid-column: span 12; }
}

/* ≥1440px (xl) — ultra-wide. Maximum density for power users. */
@media (min-width: 1440px) {
  .pl-wizard__field--xl-2  { grid-column: span 2; }
  .pl-wizard__field--xl-3  { grid-column: span 3; }
  .pl-wizard__field--xl-4  { grid-column: span 4; }
  .pl-wizard__field--xl-6  { grid-column: span 6; }
  .pl-wizard__field--xl-8  { grid-column: span 8; }
}

.pl-wizard__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-semibold);
  letter-spacing: 0.01em;
  color: var(--pl-text);
  margin-bottom: var(--pl-space-2);
}

.pl-wizard__label .bi {
  color: var(--pl-primary-600);
  font-size: 0.95rem;
}

.pl-wizard__label-required {
  color: var(--pl-danger);
  margin-left: 0.1rem;
}

/* ── 07. Field widgets ───────────────────────────────────── */
/* background-COLOR, never the shorthand: `background:` wipes Bootstrap's
   .form-select chevron image and its no-repeat/position/size, and the dark
   theme's chevron swap (platinum.css, image only) then came back TILED across
   every select on the wizard pages (fixed 2026-09-23). */
.pl-wizard__field .form-control,
.pl-wizard__field .form-select,
.pl-wizard__field input[type="text"],
.pl-wizard__field input[type="email"],
.pl-wizard__field input[type="number"],
.pl-wizard__field input[type="url"],
.pl-wizard__field input[type="tel"],
.pl-wizard__field input[type="password"],
.pl-wizard__field input[type="search"],
.pl-wizard__field input[type="date"],
.pl-wizard__field input[type="datetime-local"],
.pl-wizard__field input[type="time"],
.pl-wizard__field input[type="month"],
.pl-wizard__field input[type="week"],
.pl-wizard__field select,
.pl-wizard__field textarea {
  width: 100%;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  background-color: var(--pl-surface);
  color: var(--pl-text);
  transition: border-color 0.15s var(--pl-ease), box-shadow 0.15s var(--pl-ease);
}

.pl-wizard__field .form-control:focus,
.pl-wizard__field .form-select:focus,
.pl-wizard__field input:focus,
.pl-wizard__field select:focus,
.pl-wizard__field textarea:focus {
  outline: 0;
  border-color: var(--pl-primary-400);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}

/* Hover affordance — strengthen the border on hover (focus ring takes priority) */
.pl-wizard__field input:hover:not(:focus),
.pl-wizard__field select:hover,
.pl-wizard__field textarea:hover {
  border-color: var(--pl-border-strong);
}

/* Select — custom chevron (inline SVG), suppress native arrow */
.pl-wizard__field .form-select,
.pl-wizard__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 14px;
}

.pl-wizard__field select::-ms-expand { display: none; }

/* Multi-select — usable height, internal scroll, no chevron */
.pl-wizard__field select[multiple],
.pl-wizard__field .form-select[multiple] {
  background-image: none;
  padding-right: 0.85rem;
  min-height: 120px;
  padding: 0.4rem 0.5rem;
  overflow-y: auto;
}

.pl-wizard__field select[multiple] option,
.pl-wizard__field .form-select[multiple] option {
  padding: 0.3rem 0.5rem;
  border-radius: var(--pl-radius-sm);
}

/* Textarea — vertical resize only, comfortable min height */
.pl-wizard__field textarea,
.pl-wizard__field textarea.form-control {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* File inputs — clean drop-zone-ish row */
.pl-wizard__field input[type="file"],
.pl-wizard__field input[type="file"].form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  background: var(--pl-surface);
  border: 1px dashed var(--pl-border-strong);
  border-radius: var(--pl-radius);
  color: var(--pl-text-muted);
  cursor: pointer;
  transition: border-color 0.15s var(--pl-ease), background 0.15s var(--pl-ease);
}

.pl-wizard__field input[type="file"]:hover {
  border-color: var(--pl-primary-400);
  background: var(--pl-primary-50);
}

.pl-wizard__field input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.85rem;
  background: var(--pl-primary-50);
  color: var(--pl-primary-700);
  border: 0;
  border-radius: var(--pl-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--pl-ease);
}

.pl-wizard__field input[type="file"]::file-selector-button:hover {
  background: var(--pl-primary-100);
}

.pl-wizard__field input[type="file"]::-webkit-file-upload-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.85rem;
  background: var(--pl-primary-50);
  color: var(--pl-primary-700);
  border: 0;
  border-radius: var(--pl-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* Read-only value cell — a stored value the form deliberately no longer edits
   (e.g. the record owner on EDIT, which is reassigned from the detail page so
   the open tasks follow). Boxed like an input so a mixed row keeps ONE baseline
   and the 4-up grid never gains a hole where the dropped field used to sit;
   dashed border + muted fill say "shown, not editable" at a glance. */
.pl-wizard__static {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;              /* matches an input: .55rem padding x2 + line */
  padding: 0.55rem 0.85rem;
  border: 1px dashed var(--pl-border-strong);
  border-radius: var(--pl-radius);
  background: var(--pl-surface-2);
  color: var(--pl-text-muted);
  font-size: 0.9rem;
  line-height: 1.25;
}

.pl-wizard__static .bi {
  color: var(--pl-primary-600);
  font-size: 0.95rem;
  flex: none;
}

.pl-wizard__static > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fallback styled single checkbox (when the field is just a bare
   Bootstrap form-check-input and was NOT promoted to .pl-wizard__switch
   nor placed inside .pl-wizard__toggle). */
.pl-wizard__field input[type="checkbox"].form-check-input,
.pl-wizard__field > label > input[type="checkbox"].form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-xs);
  background: var(--pl-surface);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s var(--pl-ease), border-color 0.15s var(--pl-ease);
  margin: 0 0.4rem 0 0;
}

.pl-wizard__field input[type="checkbox"].form-check-input:checked,
.pl-wizard__field > label > input[type="checkbox"].form-check-input:checked {
  background: var(--pl-primary-600);
  border-color: var(--pl-primary-600);
}

.pl-wizard__field input[type="checkbox"].form-check-input:checked::after,
.pl-wizard__field > label > input[type="checkbox"].form-check-input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.pl-wizard__field input[type="checkbox"].form-check-input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
  border-color: var(--pl-primary-400);
}

/* Do NOT restyle checkboxes intentionally placed inside .pl-wizard__toggle
   (those are switches and already styled via .pl-wizard__switch). */
.pl-wizard__toggle input[type="checkbox"].form-check-input {
  appearance: revert;
  -webkit-appearance: revert;
  width: revert;
  height: revert;
  border: revert;
  border-radius: revert;
  background: revert;
  position: revert;
  margin: revert;
}

/* Radio fallback — matches checkbox treatment but circular */
.pl-wizard__field input[type="radio"].form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--pl-border-strong);
  border-radius: 50%;
  background: var(--pl-surface);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin: 0 0.4rem 0 0;
  transition: border-color 0.15s var(--pl-ease), background 0.15s var(--pl-ease);
}

.pl-wizard__field input[type="radio"].form-check-input:checked {
  border-color: var(--pl-primary-600);
}

.pl-wizard__field input[type="radio"].form-check-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pl-primary-600);
  transform: translate(-50%, -50%);
}

/* ManyToMany checkbox list — render as chip grid.
   HTML emitted by Django: <ul id="id_xxx"><li><label><input type="checkbox"> Label</label></li></ul> */
.pl-wizard__field ul[id^="id_"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.pl-wizard__field ul[id^="id_"] > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-wizard__field ul[id^="id_"] > li > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-pill);
  background: var(--pl-surface);
  color: var(--pl-text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s var(--pl-ease), background 0.15s var(--pl-ease),
              color 0.15s var(--pl-ease);
  margin: 0;
  user-select: none;
}

.pl-wizard__field ul[id^="id_"] > li > label:hover {
  border-color: var(--pl-primary-300);
  background: var(--pl-neutral-50);
}

.pl-wizard__field ul[id^="id_"] > li > label > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-xs);
  background: var(--pl-surface);
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  transition: background 0.15s var(--pl-ease), border-color 0.15s var(--pl-ease);
}

.pl-wizard__field ul[id^="id_"] > li > label > input[type="checkbox"]:checked {
  background: var(--pl-primary-600);
  border-color: var(--pl-primary-600);
}

.pl-wizard__field ul[id^="id_"] > li > label > input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

.pl-wizard__field ul[id^="id_"] > li > label:has(input[type="checkbox"]:checked) {
  background: var(--pl-primary-50);
  border-color: var(--pl-primary-400);
  color: var(--pl-primary-700);
}

.pl-wizard__hint {
  margin-top: var(--pl-space-2);
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-muted);
}

/* ── 08. Errors (inline + alert + Django errorlist) ──────── */
.pl-wizard__error {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--pl-danger);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.pl-wizard__error .bi {
  font-size: 0.85rem;
}

/* Django server-side errors — make them look like .pl-wizard__error */
.pl-wizard__field .errorlist {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--pl-danger);
}

.pl-wizard__field .errorlist > li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}

.pl-wizard__field .errorlist > li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc2626'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm0 3a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4A.75.75 0 0 1 8 4.5zm0 7.25a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Mark inputs with errors visually */
.pl-wizard__field.has-error .form-control,
.pl-wizard__field.has-error .form-select,
.pl-wizard__field.has-error input,
.pl-wizard__field.has-error select,
.pl-wizard__field.has-error textarea {
  border-color: var(--pl-danger);
}

/* Errorlist injected directly into the wizard alert (non_field_errors) */
.pl-wizard__alert .errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-wizard__alert .errorlist > li {
  margin: 0;
  padding: 0;
}

.pl-wizard__alert .errorlist > li + li {
  margin-top: 0.25rem;
}

/* ── 09. Switch / toggle card ────────────────────────────── */
.pl-wizard__toggle {
  grid-column: span 12;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  cursor: pointer;
  transition: background 0.15s var(--pl-ease), border-color 0.15s var(--pl-ease),
              box-shadow 0.15s var(--pl-ease);
}

.pl-wizard__toggle:hover {
  border-color: var(--pl-primary-300);
  box-shadow: var(--pl-shadow-xs);
}

.pl-wizard__toggle--on {
  background: var(--pl-primary-50);
  border-color: var(--pl-primary-200);
}

.pl-wizard__toggle--on:hover {
  border-color: var(--pl-primary-400);
}

/* Whole toggle is clickable — labels inherit pointer */
.pl-wizard__toggle label,
.pl-wizard__toggle .pl-wizard__toggle-body { cursor: pointer; }

/* Toggle span classes — mirror .pl-wizard__field--* so toggles can sit
   in the same responsive grid alongside text fields. */
@media (min-width: 576px) {
  .pl-wizard__toggle--sm-6  { grid-column: span 6; }
  .pl-wizard__toggle--sm-4  { grid-column: span 4; }
  .pl-wizard__toggle--sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
  .pl-wizard__toggle--md-3  { grid-column: span 3; }
  .pl-wizard__toggle--md-4  { grid-column: span 4; }
  .pl-wizard__toggle--md-6  { grid-column: span 6; }
  .pl-wizard__toggle--md-8  { grid-column: span 8; }
  .pl-wizard__toggle--md-12 { grid-column: span 12; }
}
@media (min-width: 1280px) {
  .pl-wizard__toggle--lg-3  { grid-column: span 3; }
  .pl-wizard__toggle--lg-4  { grid-column: span 4; }
  .pl-wizard__toggle--lg-6  { grid-column: span 6; }
}

.pl-wizard__switch {
  appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--pl-border-strong);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--pl-dur-fast) var(--pl-ease);
  margin: 0;
}

.pl-wizard__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  /* The knob is a physical white puck on both the neutral off-track and the
     navy on-track, in both themes — --pl-neutral-0 is white with no dark
     override, so it says "white on purpose" rather than "forgot a token". */
  background: var(--pl-neutral-0);
  border-radius: 50%;
  box-shadow: var(--pl-shadow-sm);
  transition: transform var(--pl-dur-base) var(--pl-ease-spring);
}

.pl-wizard__switch:checked {
  background: var(--pl-primary-600);
}

.pl-wizard__switch:checked::after {
  transform: translateX(16px);
}

.pl-wizard__switch:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}

.pl-wizard__toggle-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pl-wizard__toggle-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pl-text);
}

.pl-wizard__toggle-hint {
  font-size: 0.75rem;
  color: var(--pl-text-muted);
}

/* ── 09b. Review summary (staff invite/edit Review step) ─── */
.pl-wizard__summary {
  margin: 0;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  overflow: hidden;
  background: var(--pl-surface);
}

.pl-wizard__summary-row {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  align-items: baseline;
}

.pl-wizard__summary-row + .pl-wizard__summary-row {
  border-top: 1px solid var(--pl-border);
}

.pl-wizard__summary-row dt,
.pl-wizard__summary-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--pl-text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pl-wizard__summary-row dd,
.pl-wizard__summary-value {
  margin: 0;
  font-weight: 600;
  color: var(--pl-text);
  word-break: break-word;
}

@media (max-width: 575px) {
  .pl-wizard__summary-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Grouped review summary — captioned groups wrapping the summary cards
   (staff invite/edit Review step). */
.pl-wizard__summary-groups {
  display: flex;
  flex-direction: column;
  gap: var(--pl-space-4);
}

.pl-wizard__summary-group {
  display: flex;
  flex-direction: column;
  gap: var(--pl-space-2);
}

.pl-wizard__summary-caption {
  margin: 0;
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pl-text-muted);
}

/* Prose empty-state for staff review scope/permission values */
.pl-wizard[data-staff-wizard] [data-rv-empty="true"] {
  color: var(--pl-text-muted);
  font-style: italic;
  font-weight: 500;
}

/* ── 10. Choice cards (radio-as-card pattern) ────────────── */
.pl-wizard__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.pl-wizard__choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  cursor: pointer;
  transition: border-color var(--pl-dur-fast) var(--pl-ease),
              background var(--pl-dur-fast) var(--pl-ease),
              box-shadow var(--pl-dur-fast) var(--pl-ease),
              transform var(--pl-dur-fast) var(--pl-ease-spring);
}

.pl-wizard__choice:hover {
  border-color: var(--pl-primary-300);
  transform: translateY(-1px);
}

.pl-wizard__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pl-wizard__choice input:checked + .pl-wizard__choice-body {
  color: var(--pl-primary-700);
}

/* Selected state — JS fallback class (mirrors :has(input:checked)) */
.pl-wizard__choice--selected,
.pl-wizard__choice:has(input:checked) {
  border-color: var(--pl-primary-500);
  background: var(--pl-primary-50);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}

.pl-wizard__choice-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pl-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pl-wizard__choice-title .bi {
  color: var(--pl-primary-600);
}

.pl-wizard__choice-hint {
  font-size: 0.78rem;
  color: var(--pl-text-muted);
}

/* ── 11. Guidance panel (collapsible) ────────────────────── */
.pl-wizard__guidance {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-xl);
  box-shadow: var(--pl-shadow-sm);
  overflow: hidden;
}

.pl-wizard__guidance-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--pl-text);
  transition: background 0.15s var(--pl-ease);
}

.pl-wizard__guidance-toggle:hover {
  background: var(--pl-neutral-50);
}

/* Open state — tint the toggle so the open state reads clearly */
.pl-wizard__guidance[data-open="true"] .pl-wizard__guidance-toggle {
  background: var(--pl-primary-50);
}

.pl-wizard__guidance-toggle-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.92rem;
}

.pl-wizard__guidance-toggle-left .bi {
  width: 28px;
  height: 28px;
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
  border-radius: var(--pl-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pl-wizard__guidance-toggle-sub {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--pl-text-muted);
  margin-left: 0.5rem;
}

.pl-wizard__guidance-toggle-chevron {
  color: var(--pl-text-muted);
  transition: transform 0.2s var(--pl-ease);
}

.pl-wizard__guidance[data-open="true"] .pl-wizard__guidance-toggle-chevron {
  transform: rotate(180deg);
}

.pl-wizard__guidance-body {
  display: none;
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--pl-border-hairline);
  padding-top: 1rem;
}

.pl-wizard__guidance[data-open="true"] .pl-wizard__guidance-body {
  display: block;
}

.pl-wizard__guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.pl-wizard__guidance-card h6 {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--pl-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pl-wizard__guidance-card h6 .bi {
  color: var(--pl-primary-600);
}

.pl-wizard__guidance-card ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--pl-text-muted);
  line-height: 1.55;
}

.pl-wizard__guidance-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--pl-text-muted);
  line-height: 1.55;
}

/* ── 12. Sticky footer + buttons ─────────────────────────── */
.pl-wizard__footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-xl);
  padding: var(--pl-space-3) var(--pl-space-5);
  box-shadow: var(--pl-shadow-lift);
  display: flex;
  align-items: center;
  gap: var(--pl-space-3);
  margin-top: var(--pl-space-2);
}

.pl-wizard__footer-left,
.pl-wizard__footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pl-wizard__footer-center {
  flex: 1;
  text-align: center;
  font-size: var(--pl-fs-base);
  color: var(--pl-text-muted);
}

.pl-wizard__footer-center strong {
  color: var(--pl-text);
  font-weight: 700;
}

.pl-wizard__footer-center .pl-wizard__current-label {
  color: var(--pl-primary-600);
  margin-left: 0.4rem;
  font-weight: 600;
}

.pl-wizard__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--pl-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--pl-surface);
  color: var(--pl-text);
  transition: background var(--pl-dur-fast), border-color var(--pl-dur-fast), color var(--pl-dur-fast), box-shadow var(--pl-dur-fast);
  text-decoration: none;
  position: relative;
}

.pl-wizard__btn:hover {
  background: var(--pl-neutral-50);
}

.pl-wizard__btn--ghost {
  border-color: var(--pl-border);
  color: var(--pl-text-muted);
}

.pl-wizard__btn--secondary {
  background: var(--pl-surface);
  color: var(--pl-text-muted);
  border-color: var(--pl-border);
}

.pl-wizard__btn--secondary:hover {
  background: var(--pl-neutral-50);
}

.pl-wizard__btn--primary {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
  border-color: var(--pl-primary-ring);
}

.pl-wizard__btn--primary:hover {
  background: var(--pl-primary-tint-hover);
}

.pl-wizard__btn--submit {
  background: linear-gradient(135deg, var(--pl-primary-500), var(--pl-primary-700));
  /* Same reasoning as the step disc: the gradient is built from the numeric
     primary ramp, which never flips, so the ink is white in both themes. Do
     NOT reach for --pl-on-primary here — that one flips to near-black. */
  color: var(--pl-neutral-0);
  border-color: transparent;
  box-shadow: 0 4px 12px -2px var(--pl-primary-ring);
  transition: background var(--pl-dur-fast), border-color var(--pl-dur-fast), color var(--pl-dur-fast), box-shadow var(--pl-dur-fast),
              transform var(--pl-dur-instant) var(--pl-ease);
}

.pl-wizard__btn--submit:hover {
  background: linear-gradient(135deg, var(--pl-primary-600), var(--pl-primary-800));
  color: var(--pl-neutral-0);
}

.pl-wizard__btn--submit:active {
  transform: translateY(1px);
}

.pl-wizard__btn[disabled],
.pl-wizard__btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ── 13. Submit loading state ────────────────────────────── */
.pl-wizard form.is-submitting .pl-wizard__btn--submit,
form.is-submitting .pl-wizard__btn--submit {
  pointer-events: none;
  opacity: 0.75;
  padding-right: 2.4rem;
}

/* The persistent footer save shortcut ([data-wizard-save-now]) shares the
   in-flight lock so it can't be double-clicked during a submit (no spinner). */
.pl-wizard form.is-submitting [data-wizard-save-now],
form.is-submitting [data-wizard-save-now] {
  pointer-events: none;
  opacity: 0.65;
}

.pl-wizard form.is-submitting .pl-wizard__btn--submit::after,
form.is-submitting .pl-wizard__btn--submit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid color-mix(in srgb, var(--pl-neutral-0) 45%, transparent);
  border-top-color: var(--pl-neutral-0);
  border-radius: 50%;
  animation: pl-wizard-spin 0.7s linear infinite;
}

@keyframes pl-wizard-spin {
  to { transform: rotate(360deg); }
}

/* ── 14. Focus-visible polish ────────────────────────────── */
.pl-wizard__btn:focus-visible,
.pl-wizard__step-pill:focus-visible,
.pl-wizard__guidance-toggle:focus-visible,
.pl-wizard__choice:focus-visible,
/* A11Y: .pl-wizard__choice is a <label> and its radio is hidden with
   `opacity: 0` — the label itself is not focusable, so `.pl-wizard__choice
   :focus-visible` could never match and a keyboard user tabbing through a
   choice-card group got NO visible indicator at all. The real focus target is
   the hidden input, so mirror its focus onto the card. Added alongside the
   original selector, not in place of it. */
.pl-wizard__choice:has(input:focus-visible),
.pl-wizard__toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
  border-color: var(--pl-primary-400);
}

/* ── Errors banner inside wizard ─────────────────────────── */
.pl-wizard__alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--pl-danger-soft);
  border: 1px solid var(--pl-danger-border);
  color: var(--pl-danger-text);
  border-radius: var(--pl-radius);
  font-size: 0.85rem;
}

.pl-wizard__alert .bi {
  font-size: 1rem;
  margin-top: 0.1rem;
}

/* ── 15. Dark mode adjustments ───────────────────────────── */
[data-theme="dark"] .pl-wizard__header {
  background:
    linear-gradient(135deg, var(--pl-primary-tint) 0%, rgba(255, 255, 255, 0) 55%),
    var(--pl-surface);
}

[data-theme="dark"] .pl-wizard__header,
[data-theme="dark"] .pl-wizard__section,
[data-theme="dark"] .pl-wizard__guidance,
[data-theme="dark"] .pl-wizard__footer {
  background: var(--pl-surface);
}

[data-theme="dark"] .pl-wizard__progress {
  background: var(--pl-surface-alt);
}

[data-theme="dark"] .pl-wizard__step-pill {
  background: var(--pl-surface-alt);
  color: var(--pl-text-muted);
}

[data-theme="dark"] .pl-wizard__step-pill:hover {
  background: var(--pl-surface-sunken);
}

[data-theme="dark"] .pl-wizard__step-pill[data-state="active"] {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
}

[data-theme="dark"] .pl-wizard__step-pill[data-state="active"]:hover {
  background: var(--pl-primary-tint-hover);
  color: var(--pl-text);
}

[data-theme="dark"] .pl-wizard__step-pill[data-state="active"] .pl-wizard__step-pill__index {
  background: var(--pl-primary-500);
  color: var(--pl-on-tile);
}

[data-theme="dark"] .pl-wizard__step-pill[data-state="complete"] {
  background: var(--pl-success-tint);
  color: var(--pl-success-on-tint);
}

[data-theme="dark"] .pl-wizard__step-pill[data-state="complete"]:hover {
  background: rgba(16, 185, 129, 0.28);
}

[data-theme="dark"] .pl-wizard__step-pill__index {
  background: var(--pl-surface-sunken);
  color: inherit;
}

[data-theme="dark"] .pl-wizard__toggle {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .pl-wizard__toggle--on {
  background: var(--pl-primary-tint);
  border-color: rgba(30, 60, 114, 0.45);
}

[data-theme="dark"] .pl-wizard__choice--selected,
[data-theme="dark"] .pl-wizard__choice:has(input:checked) {
  background: var(--pl-primary-tint);
  border-color: var(--pl-primary-500);
}

[data-theme="dark"] .pl-wizard__choice input:checked + .pl-wizard__choice-body {
  color: var(--pl-primary-300);
}

/* Form widgets in dark mode — dark surfaces, light text */
[data-theme="dark"] .pl-wizard__field .form-control,
[data-theme="dark"] .pl-wizard__field .form-select,
[data-theme="dark"] .pl-wizard__field input[type="text"],
[data-theme="dark"] .pl-wizard__field input[type="email"],
[data-theme="dark"] .pl-wizard__field input[type="number"],
[data-theme="dark"] .pl-wizard__field input[type="url"],
[data-theme="dark"] .pl-wizard__field input[type="tel"],
[data-theme="dark"] .pl-wizard__field input[type="password"],
[data-theme="dark"] .pl-wizard__field input[type="search"],
[data-theme="dark"] .pl-wizard__field input[type="date"],
[data-theme="dark"] .pl-wizard__field input[type="datetime-local"],
[data-theme="dark"] .pl-wizard__field input[type="time"],
[data-theme="dark"] .pl-wizard__field select,
[data-theme="dark"] .pl-wizard__field textarea {
  /* background-COLOR only — see §07. The image-only chevron override that
     followed this rule (a literal #94a3b8 stroke) is gone: with the shorthand
     out of the way, platinum.css's dark chevron and its no-repeat geometry
     apply, and every select stopped tiling the glyph across its width. */
  background-color: var(--pl-input-bg);
  color: var(--pl-text);
  border-color: var(--pl-border);
}

[data-theme="dark"] .pl-wizard__field input[type="file"] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--pl-text-muted);
}

[data-theme="dark"] .pl-wizard__field input[type="file"]:hover {
  background: var(--pl-input-bg);
  border-color: var(--pl-primary-400);
}

[data-theme="dark"] .pl-wizard__field input[type="file"]::file-selector-button {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
}

[data-theme="dark"] .pl-wizard__field input[type="checkbox"].form-check-input,
[data-theme="dark"] .pl-wizard__field input[type="radio"].form-check-input {
  background: var(--pl-surface-alt);
  border-color: var(--pl-border-strong);
}

[data-theme="dark"] .pl-wizard__field ul[id^="id_"] > li > label {
  background: var(--pl-input-bg);
  border-color: var(--pl-border);
  color: var(--pl-text);
}

[data-theme="dark"] .pl-wizard__field ul[id^="id_"] > li > label:hover {
  background: var(--pl-surface-alt);
}

[data-theme="dark"] .pl-wizard__field ul[id^="id_"] > li > label:has(input[type="checkbox"]:checked) {
  background: var(--pl-primary-tint);
  border-color: var(--pl-primary-400);
  color: var(--pl-primary-on-tint);
}

[data-theme="dark"] .pl-wizard__guidance[data-open="true"] .pl-wizard__guidance-toggle {
  background: var(--pl-primary-tint);
}

[data-theme="dark"] .pl-wizard__guidance-toggle:hover {
  background: var(--pl-surface-alt);
}

/* CONTRAST FIX: .pl-wizard__btn:hover painted --pl-neutral-50 (#f7fafd, no
   dark override) behind --pl-text, which in dark is #eef3f9 — hovering Back or
   Cancel in the wizard footer turned the button into a white slab with
   white-on-white text, ~1.02:1. It was the worst contrast defect in the file. */
[data-theme="dark"] .pl-wizard__btn:hover,
[data-theme="dark"] .pl-wizard__btn--ghost:hover,
[data-theme="dark"] .pl-wizard__btn--secondary:hover {
  background: var(--pl-surface-alt);
  color: var(--pl-text);
}

/* The Django errorlist bullet is an inline SVG with the light-theme danger red
   baked into its fill. --pl-danger flips to #ef4444 in dark, so the icon and
   the error text beside it stopped matching and the glyph sat at ~3.4:1 on the
   dark surface. Same path, dark-theme red. */

/* ── 16. Mobile ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .pl-wizard__section { padding: var(--pl-space-5); }
  /* WCAG 2.5.5 / iOS — comfortable touch targets on small screens */
  .pl-wizard__btn { min-height: 44px; }
  .pl-wizard__guidance-toggle { min-height: 48px; }
  .pl-wizard__footer { flex-wrap: wrap; }
  .pl-wizard__footer-center {
    order: 3;
    flex-basis: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pl-border-hairline);
  }
  .pl-wizard__step-pill {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
  }
  .pl-wizard__step-pill__index { width: 20px; height: 20px; font-size: 0.7rem; }

  /* Collapse non-active pills to just the index circle.
     Active pill keeps its full label and icon.
     JS may add .pl-wizard__steps--compact for the same effect at any width. */
  .pl-wizard__step-pill:not([data-state="active"]) .pl-wizard__step-pill__icon,
  .pl-wizard__step-pill:not([data-state="active"]) .pl-wizard__step-pill__label {
    display: none;
  }

  .pl-wizard__step-pill:not([data-state="active"]) {
    padding: 0.35rem;
    gap: 0;
  }
}

.pl-wizard__steps--compact .pl-wizard__step-pill:not([data-state="active"]) .pl-wizard__step-pill__icon,
.pl-wizard__steps--compact .pl-wizard__step-pill:not([data-state="active"]) .pl-wizard__step-pill__label {
  display: none;
}

.pl-wizard__steps--compact .pl-wizard__step-pill:not([data-state="active"]) {
  padding: 0.35rem;
  gap: 0;
}

/* ── 17. Print ───────────────────────────────────────────── */
@media print {
  .pl-wizard {
    padding-bottom: 0;
    max-width: 100%;
  }
  .pl-wizard__footer,
  .pl-wizard__steps,
  .pl-wizard__progress,
  .pl-wizard__guidance-toggle {
    display: none !important;
  }
  .pl-wizard__step {
    display: flex !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .pl-wizard__section {
    box-shadow: none;
    border-color: var(--pl-border);
  }
  .pl-wizard__header {
    background: none;
    box-shadow: none;
  }
  .pl-wizard__guidance-body {
    display: block !important;
    border-top: 0;
  }
}

/* ── 18. Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pl-wizard__step[data-active="true"] {
    animation: none;
  }
  .pl-wizard__progress-bar {
    transition: none;
  }
  .pl-wizard__switch,
  .pl-wizard__switch::after {
    transition: none;
  }
  .pl-wizard__guidance-toggle-chevron {
    transition: none;
  }
  .pl-wizard__btn--submit::after,
  .pl-wizard form.is-submitting .pl-wizard__btn--submit::after,
  form.is-submitting .pl-wizard__btn--submit::after {
    animation: none;
  }
  .pl-wizard__step-pill,
  .pl-wizard__step-pill__index,
  .pl-wizard__guidance-toggle,
  .pl-wizard__btn,
  .pl-wizard__choice,
  .pl-wizard__toggle,
  .pl-wizard__section,
  .pl-wizard__field input,
  .pl-wizard__field select,
  .pl-wizard__field textarea,
  .pl-wizard__field ul[id^="id_"] > li > label {
    transition: none;
  }
  /* Suppress the new spring micro-interactions (choice lift, pill press,
     submit press) so motion-sensitive users get no transform jumps. The
     switch knob still snaps to position — just without the spring easing. */
  .pl-wizard__choice:hover,
  .pl-wizard__step-pill:active,
  .pl-wizard__btn--submit:active {
    transform: none;
  }
  html:has(.pl-wizard) {
    scroll-behavior: auto;
  }
}