/* apps/tinkyspeak/public/css/lesson-wizard.css
 *
 * Lesson Wizard chrome — every .lw-* class emitted by
 * js/builder/lesson-wizard/*.js. Shipped TOGETHER with the markup
 * (lesson learned from game-builder-wizard.css: 70+ class names once
 * shipped with no stylesheet → CSS-less skeleton).
 *
 * Brand language matches game-builder-wizard.css: navy header
 * (#1A1A2E), brand-blue primary (#7C3AED), teacher-green accent
 * (#2E7D32), cream surface (#FBF7F0). ALL interactive controls are
 * 44px+ tall (touch-first — teachers run this on classroom iPads).
 *
 * LABEL: PILOT-READY.
 */

/* ─── Lesson Wizard design tokens — single source of truth ─────── */
.lesson-wizard-modal {
  /* Type scale (px, SF Pro). Kept tight — 5 sizes, no drift. */
  --lw-type-10: 10px;   /* stepper labels only */
  --lw-type-12: 12px;   /* hints, secondary meta */
  --lw-type-13: 13px;   /* field labels, body controls */
  --lw-type-15: 15px;   /* section titles, summary values, launch btn */
  --lw-type-18: 18px;   /* modal header */
  --lw-lh-tight: 1.2;
  --lw-lh-body: 1.5;

  /* Spacing scale (8pt base). */
  --lw-space-xs: 4px;
  --lw-space-sm: 8px;
  --lw-space-md: 12px;
  --lw-space-lg: 16px;
  --lw-space-xl: 24px;

  /* Motion. */
  --lw-dur-fast: 120ms;
  --lw-dur-base: 200ms;
  --lw-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --lw-press-scale: 0.97;

  /* Ink — pinned to WCAG AA on cream (#FBF7F0) and white. */
  --lw-ink:        #1A1A2E;  /* 14:1 */
  --lw-ink-soft:   #3A3A4A;  /* ~8.5:1 — body-soft, summary labels */
  --lw-ink-muted:  #6C6C7C;  /* 4.6:1 — hints, stepper pending (was sub-AA) */
  --lw-brand:      #7C3AED;
  --lw-brand-deep: #145EA8;
  --lw-green:      #2E7D32;
  --lw-status-warn:#9A5B00;  /* 4.6:1 on cream (was #B26A00 → 3.8:1 FAIL) */
  --lw-status-fail:#C62828;

  /* Self-contained aliases: the file also uses bare --ink/--ink-soft/
     --ink-muted/--surface (inherited from builder globals). Pin them
     locally to the AA-checked values so the wizard's palette is
     deterministic even if no ambient stylesheet loaded on this page. */
  --ink:        var(--lw-ink);
  --ink-soft:   var(--lw-ink-soft);
  --ink-muted:  var(--lw-ink-muted);
  --surface:    #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  .lesson-wizard-modal { --lw-dur-fast: 0ms; --lw-dur-base: 0ms; }
}

/* SR-only — visually hidden, announced by AT (live regions, labels). */
.lw-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Modal shell ─────────────────────────────────────────────── */
.lesson-wizard-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(12, 21, 48, 0.45);
  backdrop-filter: blur(6px) saturate(180%);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.lesson-wizard-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.lesson-wizard-card {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(at 0% 0%, rgba(46, 125, 50, 0.05) 0%, transparent 50%),
    #FFFFFF;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 20px 60px rgba(12, 21, 48, 0.30);
  border: 1px solid rgba(12, 21, 48, 0.08);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color:var(--ink);
}
.lesson-wizard-modal.open .lesson-wizard-card {
  transform: translateY(0);
}

/* Header — navy bar, same chrome as the game wizard. */
.lesson-wizard-card .smart-tpl-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #1A1A2E 0%, #161527 100%);
  color: #F5EDE0;
  border-bottom: 1px solid rgba(46, 125, 50, 0.30);
  flex-shrink: 0;
}
.lesson-wizard-card .smart-tpl-modal-head h3 {
  margin: 0;
  flex: 1;
  font: 700 var(--lw-type-18)/var(--lw-lh-tight) -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  color: #F5EDE0;
  letter-spacing: -0.012em;
}
.lesson-wizard-card .smart-tpl-modal-close {
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(245, 237, 224, 0.10);
  color: rgba(245, 237, 224, 0.85);
  font: 600 18px/1 system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lesson-wizard-card .smart-tpl-modal-close:hover {
  background: rgba(245, 237, 224, 0.18);
}
.lesson-wizard-card .smart-tpl-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ─── Stepper ─────────────────────────────────────────────────── */
.lesson-wizard-progress {
  padding: 14px 18px 10px;
  background: linear-gradient(180deg, #FDFBF6 0%, #FBF7F0 100%);
  border-bottom: 1px solid rgba(12, 21, 48, 0.06);
  flex-shrink: 0;
}
.lw-step-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
/* Hairline progress rail behind the pills — Apple setup-assistant idiom.
   Purely decorative; pointer-events:none, no a11y impact. */
.lw-step-list::before {
  content: '';
  position: absolute;
  top: 23px;            /* centerline of the 30px icon: 8px pad + 15px */
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(12, 21, 48, 0.10);
  z-index: 0;
  pointer-events: none;
}
.lw-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  min-height: 44px;
  border-radius: 10px;
  text-align: center;
  color: var(--lw-ink-muted);
}
.lw-step-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12, 21, 48, 0.06);
  font-size: 14px;
}
.lw-step-title {
  font-size: var(--lw-type-10);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--lw-lh-tight);
}
.lw-step.lw-current { color: #7C3AED; }
.lw-step.lw-current .lw-step-icon {
  background: rgba(25, 118, 210, 0.12);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.35);
}
.lw-step.lw-done {
  color: #2E7D32;
  cursor: pointer;
  min-height: 44px; /* tap target — done steps are clickable */
}
.lw-step.lw-done .lw-step-icon {
  background: rgba(46, 125, 50, 0.14);
  color: #2E7D32;
  font-weight: 700;
}

/* ─── Step body + fields ──────────────────────────────────────── */
.lw-step-body {
  padding: var(--lw-space-xl);
}
.lw-step-intro {
  margin: 0 0 var(--lw-space-lg);
  color: var(--lw-ink-soft);
  font-size: var(--lw-type-13);
  line-height: var(--lw-lh-body);
}
.lw-section-title {
  margin: var(--lw-space-xl) 0 var(--lw-space-md);
  font: 700 var(--lw-type-15)/var(--lw-lh-tight) -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--lw-ink);
  letter-spacing: 0.01em;
}
.lw-field-label {
  display: block;
  margin: var(--lw-space-lg) 0 var(--lw-space-sm);
  font-weight: 600;
  font-size: var(--lw-type-13);
  color: var(--lw-ink);
}
.lw-required { color: var(--lw-status-fail); }
.lw-field-hint {
  margin: var(--lw-space-sm) 0 0;
  font-size: var(--lw-type-12);
  color: var(--lw-ink-muted);
  line-height: var(--lw-lh-body);
}
.lw-input,
.lw-select,
.lw-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid rgba(12, 21, 48, 0.16);
  border-radius: 10px;
  background: var(--surface,#fff);
  font: 400 14px/1.4 inherit;
  color:var(--ink);
}
.lw-input:focus,
.lw-select:focus,
.lw-textarea:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}
.lw-textarea { resize: vertical; }
.lw-date-input { max-width: 240px; }

/* ─── Buttons (44px+ everywhere) ──────────────────────────────── */
.lw-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font: 600 14px/1.2 inherit;
  cursor: pointer;
}
.lw-btn-primary {
  background: #7C3AED;
  color: #FFFFFF;
}
.lw-btn-primary:hover { background: #145EA8; }
.lw-btn-primary:disabled {
  background: #9CB8D4;
  cursor: not-allowed;
  opacity: 0.7;
}
.lw-btn-secondary {
  background: rgba(46, 125, 50, 0.10);
  color: #2E7D32;
  border-color: rgba(46, 125, 50, 0.35);
}
.lw-btn-secondary:hover { background: rgba(46, 125, 50, 0.18); }
.lw-btn-back,
.lw-btn-ghost {
  background: transparent;
  color:var(--ink-soft);
  border-color: rgba(12, 21, 48, 0.18);
}
.lw-btn-back:hover,
.lw-btn-ghost:hover { background: rgba(12, 21, 48, 0.05); }
.lw-btn-launch { font-size: 15px; }
.lw-link-btn {
  border: none;
  background: none;
  color: #7C3AED;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 0 6px;
}

/* Focus-visible — keyboard/switch only, never on touch/mouse press.
   outline (not box-shadow) so it paints over overflow:hidden ancestors
   and never triggers layout. Layers on top of the input :focus glow. */
.lw-btn:focus-visible,
.lw-link-btn:focus-visible,
.lw-board-row:focus-visible,
.lw-period-card:focus-visible,
.lw-chip:focus-visible,
.lw-step.lw-done:focus-visible,
.lw-lessons-link:focus-visible {
  outline: 2px solid var(--lw-brand);
  outline-offset: 2px;
}
.lw-input:focus-visible,
.lw-select:focus-visible,
.lw-textarea:focus-visible {
  outline: 2px solid var(--lw-brand);
  outline-offset: 1px;
}
.smart-tpl-modal-close:focus-visible {
  outline: 2px solid rgba(245, 237, 224, 0.9);
  outline-offset: 2px;
}

/* Press feedback — on iPad there is no hover; a press scale is the only
   tap confirmation. prefers-reduced-motion zeroes --lw-dur-fast so the
   transition vanishes but the snap remains as an instant, non-vestibular
   cue. */
.lw-btn:active,
.lw-board-row:active,
.lw-period-card:active,
.lw-chip:active,
.lw-link-btn:active {
  transform: scale(var(--lw-press-scale));
  transition: transform var(--lw-dur-fast) var(--lw-ease-spring);
}
.lw-btn-primary:active { background: #0D4080; }
.smart-tpl-modal-close:active { transform: scale(0.92); }

.lw-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(12, 21, 48, 0.08);
}
.lw-nav-spacer { flex: 1; }

/* ─── Step 1: kind picker (general | slp) ─────────────────────── */
.lw-kind-picker {
  margin: 0 0 var(--lw-space-sm);
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lw-space-sm);
}
.lw-kind-picker legend {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 var(--lw-space-xs);
}
.lw-kind-opt {
  display: flex;
  align-items: center;
  gap: var(--lw-space-sm);
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid rgba(12, 21, 48, 0.16);
  border-radius: 12px;
  background: var(--surface, #fff);
  font: 600 var(--lw-type-13)/1.25 inherit;
  color: var(--lw-ink);
  cursor: pointer;
}
.lw-kind-opt.lw-kind-sel {
  border-color: #2E7D32;
  background: rgba(46, 125, 50, 0.08);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
}
.lw-kind-opt input[type="radio"] { flex-shrink: 0; margin: 0; }
.lw-kind-emoji { font-size: 16px; }
@media (max-width: 560px) {
  .lw-kind-picker { grid-template-columns: 1fr; }
}

/* SLP drill step — stacked labeled fields (vs the general inline row). */
.lw-slp-step-row .lw-field-label { margin-top: var(--lw-space-md); }
.lw-slp-step-row .lw-field-label:first-of-type { margin-top: var(--lw-space-sm); }
.lw-slp-step-row .lw-input,
.lw-slp-step-row .lw-select { margin-top: var(--lw-space-xs); }

/* ─── Step 2: boards + steps list ─────────────────────────────── */
.lw-board-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.lw-board-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid rgba(12, 21, 48, 0.14);
  border-radius: 10px;
  background: var(--surface,#fff);
  cursor: pointer;
  text-align: left;
  font: 500 13px/1.3 inherit;
  color:var(--ink);
}
.lw-board-row:hover { border-color: #7C3AED; }
.lw-board-row.lw-board-selected {
  border-color: #2E7D32;
  background: rgba(46, 125, 50, 0.07);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.30);
}
.lw-board-check {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12, 21, 48, 0.07);
  font-weight: 700;
  flex-shrink: 0;
}
.lw-board-selected .lw-board-check {
  background: #2E7D32;
  color: #FFFFFF;
}
.lw-board-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lw-inline-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.lw-inline-form .lw-input { flex: 1; }
.lw-inline-form .lw-btn { flex-shrink: 0; }

.lw-steps-list { margin-bottom: 10px; }
.lw-step-row {
  border: 1.5px solid rgba(12, 21, 48, 0.10);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--surface,#fff);
}
.lw-step-row-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.lw-step-num {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.12);
  color: #7C3AED;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.lw-step-title { flex: 1; }
.lw-step-duration { width: 78px; flex-shrink: 0; }
.lw-step-remove {
  min-width: 44px;
  padding: 10px;
  flex-shrink: 0;
}

/* ─── Step 3: periods ─────────────────────────────────────────── */
.lw-period-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.lw-period-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid rgba(12, 21, 48, 0.14);
  border-radius: 12px;
  background: var(--surface,#fff);
  cursor: pointer;
  text-align: left;
  font: 500 13px/1.3 inherit;
  color:var(--ink);
}
.lw-period-card:hover { border-color: #7C3AED; }
.lw-period-card.lw-period-selected {
  border-color: #2E7D32;
  background: rgba(46, 125, 50, 0.07);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.20);
}
.lw-period-icon { font-size: 18px; flex-shrink: 0; }
.lw-period-label { flex: 1; font-weight: 600; }
.lw-period-time {
  font-size: 11.5px;
  color: var(--lw-ink-muted);
  flex-shrink: 0;
}

/* ─── Step 4: class/student chips ─────────────────────────────── */
.lw-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lw-chip {
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid rgba(12, 21, 48, 0.16);
  border-radius: 22px;
  background: var(--surface,#fff);
  font: 600 13px/1.2 inherit;
  color:var(--ink);
  cursor: pointer;
}
.lw-chip:hover { border-color: #7C3AED; }
.lw-chip.lw-chip-selected {
  border-color: #2E7D32;
  background: rgba(46, 125, 50, 0.10);
  color: #2E7D32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.30);
}

/* ─── Step 5: summary + launch status ─────────────────────────── */
.lw-summary-card {
  border: 1.5px solid rgba(12, 21, 48, 0.10);
  border-radius: 14px;
  background: var(--surface,#fff);
  padding: 6px 14px;
  margin-bottom: 16px;
}
.lw-summary-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(12, 21, 48, 0.06);
  font-size: 13.5px;
}
.lw-summary-row:last-child { border-bottom: none; }
.lw-summary-icon { flex-shrink: 0; }
.lw-summary-label {
  flex-shrink: 0;
  width: 84px;
  font-weight: 600;
  color:var(--ink-soft);
}
.lw-summary-value {
  flex: 1;
  color:var(--ink);
  overflow-wrap: anywhere;
}
.lw-summary-value em { color: var(--lw-ink-muted); font-style: italic; }

.lw-launch-status {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.lw-status-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 2px;
  font-size: 13px;
  line-height: 1.45;
  color:var(--ink-soft);
}
.lw-status-mark { font-weight: 700; flex-shrink: 0; }
/* Weight as a second channel so status isn't color-only (color-blind safe). */
.lw-status-ok { color: var(--lw-green); font-weight: 600; }
.lw-status-warn { color: var(--lw-status-warn); font-weight: 600; }
.lw-status-fail { color: var(--lw-status-fail); font-weight: 700; }
.lw-status-pending { color: #7C3AED; }
.lw-lessons-link {
  color: #7C3AED;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lw-lessons-link:hover { text-decoration: underline; }

/* ─── Fail states ─────────────────────────────────────────────── */
.lw-step-missing {
  padding: 28px 22px;
  text-align: center;
  color: var(--lw-ink-muted);
}

/* ─── Mobile + reduced motion ─────────────────────────────────── */
@media (max-width: 560px) {
  .lesson-wizard-modal { padding: 10px; }
  .lesson-wizard-card { max-height: calc(100vh - 20px); }
  .lw-step-title { display: none; } /* stepper: icons only */
  .lw-board-list,
  .lw-period-list { grid-template-columns: 1fr; }
  .lw-inline-form { flex-direction: column; }
  .lw-summary-label { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-wizard-modal,
  .lesson-wizard-card { transition: none; }
}