/*
 * form-wizard-core styles. Framework-free; theme it by setting the --fw-* variables, e.g.
 *   .form-wizard { --fw-accent: var(--brand); }
 * Defaults fall back to a host --brand variable when present.
 */
/* The record-date field also works outside a wizard (e.g. a plain form), so it gets the defaults too. */
.form-wizard,
.form-wizard-date:not(.form-wizard *) {
  --fw-accent: var(--brand, #2563eb);
  --fw-accent-dark: var(--brand-dark, #1d4ed8);
  --fw-accent-soft: color-mix(in srgb, var(--fw-accent) 12%, #fff);
  --fw-on-accent: #fff;
  --fw-ink: #111827;
  --fw-ink-2: #374151;
  --fw-muted: #6b7280;
  --fw-border: #e5e7eb;
  --fw-border-strong: #cbd5e1;
  --fw-surface: #fff;
  --fw-surface-2: #f6f6f7;
  --fw-danger: #dc2626;
  --fw-danger-bg: #fef2f2;
  --fw-radius: 1rem;
  --fw-font: inherit;
}

.form-wizard {
  font-family: var(--fw-font);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
}

/* —— Stepper —— */
.form-wizard-stepper { width: 100%; overflow-x: auto; scrollbar-width: none; }
.form-wizard-stepper::-webkit-scrollbar { display: none; }
.form-wizard-stepper-list { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.form-wizard-step { flex: 1; min-width: 7.5rem; }
/* Up to four steps share a phone's width instead of scrolling (labels shorten with an ellipsis). */
.form-wizard-stepper-list:not(:has(> :nth-child(5))) .form-wizard-step { min-width: 0; }
@media (max-width: 480px) {
  .form-wizard-stepper-list { gap: 0.5rem; }
  .form-wizard-step-label { font-size: 0.75rem; }
}
.form-wizard-step-btn {
  position: relative; width: 100%; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 0.15rem 0.2rem; border: 0; background: transparent; color: var(--fw-muted);
  font: inherit; text-align: left; cursor: pointer;
}
.form-wizard-step-btn::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 999px;
  background: var(--fw-border); transition: background 0.25s ease;
}
.form-wizard-step-btn:hover:not(:disabled) { color: var(--fw-ink); }
.form-wizard-step-btn:focus-visible { outline: none; }
.form-wizard-step-btn:focus-visible .form-wizard-step-num { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-accent) 35%, transparent); }
.form-wizard-step-btn.is-current { color: var(--fw-ink); }
.form-wizard-step-btn.is-current::before,
.form-wizard-step-btn.is-done::before { background: var(--fw-accent); }
.form-wizard-step-btn.is-done { color: var(--fw-ink-2); }
.form-wizard-step-btn.is-locked { cursor: default; }
.form-wizard-step-num {
  width: 1.85rem; height: 1.85rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; background: var(--fw-surface); color: var(--fw-muted);
  box-shadow: inset 0 0 0 1.5px var(--fw-border-strong); transition: background .2s, color .2s, box-shadow .2s;
}
.form-wizard-step-btn.is-current .form-wizard-step-num {
  background: var(--fw-accent); color: var(--fw-on-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fw-accent) 18%, transparent);
}
.form-wizard-step-btn.is-done .form-wizard-step-num { background: var(--fw-accent-soft); color: var(--fw-accent); box-shadow: none; }
.form-wizard-step-label { font-size: 0.82rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* —— Panels & sections —— */
.form-wizard-panel { display: flex; flex-direction: column; gap: 1.25rem; animation: fw-step-in .28s cubic-bezier(.25,.46,.45,.94) both; }
.form-wizard-panel[hidden] { display: none !important; }
@keyframes fw-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-wizard-section {
  display: flex; flex-direction: column; gap: 0.85rem; padding: 1.5rem;
  background: var(--fw-surface); border: 1px solid var(--fw-border); border-radius: var(--fw-radius);
}
.form-wizard-section-header { display: flex; flex-direction: column; gap: 0.2rem; }
.form-wizard-section-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--fw-ink); }
.form-wizard-section-subtitle { margin: 0; font-size: 0.875rem; color: var(--fw-muted); }
.form-wizard-section-divider { border-top: 1px solid var(--fw-border); margin: 0.15rem 0 0.35rem; }
.form-wizard-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; min-width: 0; }
@media (min-width: 768px) { .form-wizard-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .form-wizard-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
.form-wizard-grid > .is-wide { grid-column: 1 / -1; }

/* —— Buttons (hosts may pass their own classes instead) —— */
.form-wizard-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem;
  padding: 0 1.25rem; border-radius: 0.6rem; border: 1px solid var(--fw-border); background: var(--fw-surface);
  color: var(--fw-ink-2); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.form-wizard-btn:hover { border-color: var(--fw-accent); color: var(--fw-accent); }
.form-wizard-btn--primary { background: var(--fw-accent); border-color: var(--fw-accent); color: var(--fw-on-accent); }
.form-wizard-btn--primary:hover { background: var(--fw-accent-dark); border-color: var(--fw-accent-dark); color: var(--fw-on-accent); }
.form-wizard-btn:disabled { opacity: .6; cursor: not-allowed; }
.form-wizard-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.form-wizard-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--fw-border);
}
.form-wizard-spin { animation: fw-spin 0.9s linear infinite; }
@keyframes fw-spin { to { transform: rotate(360deg); } }

/* —— Errors —— */
.form-wizard-alert {
  margin: 0; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid color-mix(in srgb, var(--fw-danger) 35%, transparent);
  background: var(--fw-danger-bg); color: var(--fw-danger); font-size: 0.875rem; font-weight: 500;
}
.form-wizard-alert[hidden] { display: none !important; }
.form-wizard-invalid { border-color: var(--fw-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-danger) 15%, transparent) !important; }

/* —— Review & confirm —— */
.form-wizard-review {
  display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.15rem; border-radius: 0.75rem;
  background: color-mix(in srgb, var(--fw-accent) 6%, var(--fw-surface));
  border: 1px solid color-mix(in srgb, var(--fw-accent) 18%, var(--fw-border));
}
.form-wizard-review-heading { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--fw-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.form-wizard-review-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem 1.25rem; margin: 0; }
@media (min-width: 768px) { .form-wizard-review-grid { grid-template-columns: 1fr 1fr 1fr; } }
.form-wizard-review-grid > .is-wide { grid-column: 1 / -1; }
.form-wizard-review-label { margin: 0 0 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fw-muted); }
.form-wizard-review-value { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--fw-ink); word-break: break-word; white-space: pre-line; }
.form-wizard-review-edit { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--fw-accent); background: none; border: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.form-wizard-review-head { display: flex; align-items: center; gap: 0.5rem; }

.form-wizard-confirm {
  display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; border-radius: 0.75rem;
  background: var(--fw-surface-2); border: 1px solid transparent;
}
.form-wizard-confirm.has-error { background: var(--fw-danger-bg); border-color: color-mix(in srgb, var(--fw-danger) 35%, transparent); }
.form-wizard-confirm-row { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.form-wizard-checkbox {
  width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; padding: 0; margin: 0;
  border: 2px solid var(--fw-border-strong); border-radius: 4px; background: var(--fw-surface); color: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.form-wizard-checkbox.is-checked, .form-wizard-checkbox:checked { background: var(--fw-accent); border-color: var(--fw-accent); }
.form-wizard-checkbox:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; }
.form-wizard-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-accent) 30%, transparent); }
.form-wizard-confirm.has-error .form-wizard-checkbox { border-color: var(--fw-danger); }
.form-wizard-confirm-text { font-size: 0.875rem; font-weight: 600; color: var(--fw-ink-2); user-select: none; }
.form-wizard-confirm.has-error .form-wizard-confirm-text { color: var(--fw-danger); }
.form-wizard-confirm-error { margin: 0; font-size: 0.75rem; color: var(--fw-danger); }
.form-wizard-confirm:not(.has-error) .form-wizard-confirm-error { display: none; }

@media (prefers-reduced-motion: reduce) { .form-wizard-panel { animation: none; } }

/* —— "Date it happened" (record date) —— */
.form-wizard-date { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.form-wizard-date-label { font-size: 0.875rem; font-weight: 600; color: var(--fw-ink); }
.form-wizard-req { margin-left: 0.15rem; color: var(--fw-danger); }
.form-wizard-date-input { max-width: 16rem; height: 2.85rem; padding: 0 0.85rem; border: 1px solid var(--fw-border); border-radius: 0.65rem; background: var(--fw-surface); color: var(--fw-ink); font: inherit; font-size: 0.95rem; }
.form-wizard-date-input:focus { outline: none; border-color: var(--fw-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-accent) 18%, transparent); }
.form-wizard-date-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.form-wizard-chip { padding: 0.3rem 0.75rem; border: 1px solid var(--fw-border); border-radius: 999px; background: var(--fw-surface); color: var(--fw-ink-2); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.form-wizard-chip:hover { border-color: var(--fw-accent); color: var(--fw-accent); }
.form-wizard-chip.is-active { background: var(--fw-accent); border-color: var(--fw-accent); color: var(--fw-on-accent); }
.form-wizard-date-note { margin: 0; font-size: 0.78rem; color: var(--fw-muted); }
.form-wizard-date-note.is-backdated { color: var(--fw-accent); font-weight: 600; }
.form-wizard-date-error { margin: 0; font-size: 0.78rem; color: var(--fw-danger); }