/* ============================================================
   Wizard UI styles for the Math Worksheet Pro shortcode.
   Loaded AFTER teacher-ui.css. Every rule is scoped under
   .mwp-wizard-page so the host WordPress theme is untouched
   and theme classes (.hero, .step, .field) cannot collide.
   ============================================================ */
/* ============================================================
   Wizard-style overlay design.
   Lives ON TOP of teacher-ui.css; the existing form .mwp-controls
   is hidden and replaced by a step-based card UI.
   ============================================================ */


.mwp-wizard-page {
  /* Theme-aware design tokens. Defaults INHERIT the host theme so the tool
     blends in as ordinary page content instead of a pasted-in "app layer".
     Override via the plugin accent option / `mwp_brand_accent` filter, a
     child-theme rule, or your page builder to match your brand. */
  --mwp-font: inherit;
  --mwp-ink: inherit;
  --mwp-bg: transparent;
  --mwp-accent: #0a1f44;
  --mwp-surface: #ffffff;
  --mwp-muted: #f5f7fa;

  margin: 0;
  font-family: var(--mwp-font);
  background: var(--mwp-bg);
  color: var(--mwp-ink);
  padding: 24px 16px 48px;
}

/* Dedicated full-screen app page (public/templates/app-page.php adds the
   body class) restores the immersive shell so the tool fills the window. */
body.mwp-app-fullscreen .mwp-wizard-page {
  --mwp-bg: linear-gradient(135deg, #f5f7fa 0%, #e9eef5 100%);
  --mwp-ink: #1c1f24;
  --mwp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif;
  min-height: 100vh;
  padding: 32px 16px 64px;
}

/* Slim "back to site" bar shown only on the full-screen app template. */
.mwp-app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--mwp-accent);
  color: #fff;
  font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.mwp-app-bar .mwp-app-home { color: #fff; text-decoration: none; opacity: 0.92; }
.mwp-app-bar .mwp-app-home:hover { opacity: 1; }
.mwp-app-main { margin: 0; }


.mwp-wizard-page .page-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Hero ---------- */

.mwp-wizard-page .hero {
  text-align: center;
  margin-bottom: 36px;
}

.mwp-wizard-page .hero .brand {
  display: inline-block;
  background: var(--mwp-accent);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mwp-wizard-page .hero h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 38px;
  color: var(--mwp-accent);
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mwp-wizard-page .hero p {
  font-size: 16px;
  color: #6b7280;
  margin: 0 auto;
  max-width: 580px;
  line-height: 1.55;
}

/* ---------- Wizard layout ---------- */
/* The wizard form carries both .mwp-app and .mwp-controls so teacher-ui.js can
   read it — but teacher-ui.css styles .mwp-controls as a GRID and .mwp-app with
   padding/background. Override all of that so the wizard keeps its own look and
   the step sections stack VERTICALLY (block) instead of as grid columns. */

.mwp-wizard-page .wizard.mwp-app.mwp-controls {
  display: block;
  grid-template-columns: none;
  gap: 0;
  background: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  padding: 0;
}


.mwp-wizard-page .step {
  padding: 32px 36px;
  border-bottom: 1px solid #eef1f5;
  animation: slide-down 0.3s ease;
}

.mwp-wizard-page .step:last-child { border-bottom: none; }

.mwp-wizard-page .step[hidden] { display: none !important; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


.mwp-wizard-page .step h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  font-weight: 700;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mwp-wizard-page .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #2c5282;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}


.mwp-wizard-page .step-summary {
  font-size: 13px;
  color: #6b7280;
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.mwp-wizard-page .step-summary strong { color: #1c1f24; }

.mwp-wizard-page .step-summary .change {
  margin-left: 10px;
  color: #2c5282;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}

.mwp-wizard-page .step-summary .change:hover { color: #1f3a5f; }

/* ---------- Grade cards ---------- */

.mwp-wizard-page .grade-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}


.mwp-wizard-page .grade-card {
  background: #fff;
  border: 2px solid #e1e5eb;
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}


.mwp-wizard-page .grade-card .num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: #cbd2db;
  transition: color 0.18s;
}


.mwp-wizard-page .grade-card .label {
  font-size: 17px;
  font-weight: 700;
  color: #1c1f24;
}


.mwp-wizard-page .grade-card .meta {
  font-size: 12px;
  color: #6b7280;
}


.mwp-wizard-page .grade-card:hover {
  border-color: #2c5282;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 82, 130, 0.12);
}

.mwp-wizard-page .grade-card:hover .num { color: #2c5282; }

/* Color-code each grade */

.mwp-wizard-page .grade-card.is-active[data-grade-pick="3"] { border-color: #d97706; background: #fffbeb; }

.mwp-wizard-page .grade-card.is-active[data-grade-pick="3"] .num { color: #d97706; }


.mwp-wizard-page .grade-card.is-active[data-grade-pick="4"] { border-color: #db2777; background: #fdf2f8; }

.mwp-wizard-page .grade-card.is-active[data-grade-pick="4"] .num { color: #db2777; }


.mwp-wizard-page .grade-card.is-active[data-grade-pick="5"] { border-color: #dc2626; background: #fef2f2; }

.mwp-wizard-page .grade-card.is-active[data-grade-pick="5"] .num { color: #dc2626; }


.mwp-wizard-page .grade-card.is-active[data-grade-pick="6"] { border-color: #0891b2; background: #ecfeff; }

.mwp-wizard-page .grade-card.is-active[data-grade-pick="6"] .num { color: #0891b2; }


.mwp-wizard-page .grade-card.is-active[data-grade-pick="7"] { border-color: #059669; background: #ecfdf5; }

.mwp-wizard-page .grade-card.is-active[data-grade-pick="7"] .num { color: #059669; }


.mwp-wizard-page .grade-card.is-active[data-grade-pick="8"] { border-color: #7c3aed; background: #f5f3ff; }

.mwp-wizard-page .grade-card.is-active[data-grade-pick="8"] .num { color: #7c3aed; }

/* ---------- Topic cards (step 3 — topic header + subtopic list) ---------- */

.mwp-wizard-page .topic-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 14px;
}


.mwp-wizard-page .topic-card {
  border: 1.5px solid #e1e5eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}


.mwp-wizard-page .topic-card-header {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 15px;
  color: #1c1f24;
  background: #f7f8fa;
  border-bottom: 1px solid #eef1f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mwp-wizard-page .topic-card-header .topic-count {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
}


.mwp-wizard-page .topic-card-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.mwp-wizard-page .subtopic-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #4a5160;
  transition: 0.12s;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  width: 100%;
  line-height: 1.35;
}

.mwp-wizard-page .subtopic-row .bullet {
  color: #cbd2db;
  flex-shrink: 0;
  font-size: 8px;
}

.mwp-wizard-page .subtopic-row:hover { background: #ebf2fa; color: #2c5282; }

/* Practice: single-select rows turn solid blue */

.mwp-wizard-page .subtopic-row.is-active {
  background: #2c5282;
  color: #fff;
  font-weight: 600;
}

.mwp-wizard-page .subtopic-row.is-active .bullet { color: #fff; }

/* Quiz/Test: multi-select rows show a checkbox + amber active state */

.mwp-wizard-page .subtopic-row.is-multi {
  gap: 9px;
}

.mwp-wizard-page .subtopic-row.is-multi .checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid #cbd2db;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
}

.mwp-wizard-page .subtopic-row.is-multi.is-active {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}

.mwp-wizard-page .subtopic-row.is-multi.is-active .checkbox {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

/* Spiral: the whole card is the unit; header is clickable, subtopics are muted info */

.mwp-wizard-page .topic-card.is-spiral .topic-card-header {
  cursor: pointer;
}

.mwp-wizard-page .topic-card.is-spiral .topic-card-header:hover {
  background: #fffbeb;
}

.mwp-wizard-page .topic-card.is-spiral.is-active {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.mwp-wizard-page .topic-card.is-spiral.is-active .topic-card-header {
  background: #fef3c7;
  color: #92400e;
}

.mwp-wizard-page .topic-card.is-spiral .subtopic-row {
  cursor: default;
  pointer-events: none;
  opacity: 0.65;
}

/* Collapsed extra subtopics + "+ N more" toggle */

.mwp-wizard-page .subtopic-extra[hidden] { display: none; }

.mwp-wizard-page .subtopic-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px 7px 27px;
  margin-top: 2px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #2c5282;
  font-family: inherit;
  transition: 0.12s;
}

.mwp-wizard-page .subtopic-toggle:hover { background: #ebf2fa; }

.mwp-wizard-page .subtopic-toggle.is-expanded { color: #6b7280; }

/* Continue button row below the card grid */

.mwp-wizard-page .step3-continue {
  margin-top: 18px;
}

.mwp-wizard-page .step3-continue[hidden] { display: none; }

/* ---------- Worksheet-type cards (step 2) ---------- */

.mwp-wizard-page .type-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}


.mwp-wizard-page .type-card {
  background: #fff;
  border: 2px solid #e1e5eb;
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: inherit;
}

.mwp-wizard-page .type-card .icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}

.mwp-wizard-page .type-card .title {
  font-size: 17px;
  font-weight: 700;
  color: #1c1f24;
}

.mwp-wizard-page .type-card .subtitle {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.mwp-wizard-page .type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

/* Color-code each type */

.mwp-wizard-page .type-practice:hover { border-color: #2c5282; }

.mwp-wizard-page .type-practice.is-active { border-color: #2c5282; background: #ebf2fa; }

.mwp-wizard-page .type-practice.is-active .title { color: #1f3a5f; }


.mwp-wizard-page .type-quiz:hover { border-color: #dc2626; }

.mwp-wizard-page .type-quiz.is-active { border-color: #dc2626; background: #fef2f2; }

.mwp-wizard-page .type-quiz.is-active .title { color: #991b1b; }


.mwp-wizard-page .type-spiral:hover { border-color: #f59e0b; }

.mwp-wizard-page .type-spiral.is-active { border-color: #f59e0b; background: #fffbeb; }

.mwp-wizard-page .type-spiral.is-active .title { color: #92400e; }

/* Step hint paragraph */

.mwp-wizard-page .step-hint {
  font-size: 13px;
  color: #6b7280;
  margin: -8px 0 16px;
  line-height: 1.5;
}

/* ---------- Spiral topic checkboxes ---------- */
/* [data-spiral-topics] lives only inside the hidden form now —
   the visible multi-topic UI uses .chip.is-multi instead. */

/* ---------- Difficulty button card ---------- */

.mwp-wizard-page .setting-block {
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.mwp-wizard-page .setting-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
  margin-bottom: 10px;
}

.mwp-wizard-page .diff-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mwp-wizard-page .diff-btn {
  padding: 7px 16px;
  border: 1.5px solid #d8dde4;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #4a5160;
  font-family: inherit;
  transition: 0.12s;
}

.mwp-wizard-page .diff-btn:hover { border-color: #2c5282; color: #2c5282; }

.mwp-wizard-page .diff-btn.is-active {
  background: #2c5282;
  border-color: #2c5282;
  color: #fff;
}

.mwp-wizard-page .diff-btn[hidden] { display: none; }

/* Scaffolded is a special mode — given a green outline + green text so it
   reads as distinct from the plain Easy/Medium/Hard/Mixed buttons without
   being loud. Fills solid green only when selected. */
.mwp-wizard-page .diff-btn.diff-scaffold {
  border-color: #059669;
  color: #059669;
}
.mwp-wizard-page .diff-btn.diff-scaffold:hover {
  background: #ecfdf5;
  border-color: #059669;
  color: #059669;
}
.mwp-wizard-page .diff-btn.diff-scaffold.is-active {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

/* Red highlight shown when Generate is pressed with no difficulty chosen. */
.mwp-wizard-page .diff-buttons.is-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 5px;
  border-radius: 8px;
}

/* ---------- Settings step ---------- */

.mwp-wizard-page .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* Curriculum picker at the top of the grade step (chosen before topics; it
   filters them). Its <h2> inherits the .step h2 style so the "Curriculum" and
   "Choose grade" headings match exactly. */
.mwp-wizard-page .grade-curriculum {
  margin: 0 0 26px;
}
.mwp-wizard-page .grade-curriculum select {
  max-width: 360px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d8dde4;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  color: #1c1f24;
}
.mwp-wizard-page .grade-curriculum select:focus {
  outline: none;
  border-color: #2c5282;
}
.mwp-wizard-page .grade-curriculum .setting-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #9aa1ab;
}


.mwp-wizard-page .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mwp-wizard-page .field > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
}

.mwp-wizard-page .field select, .mwp-wizard-page .field input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d8dde4;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  color: #1c1f24;
}

.mwp-wizard-page .field select:focus, .mwp-wizard-page .field input:focus {
  outline: none;
  border-color: #2c5282;
  box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}


.mwp-wizard-page .formats-row {
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.mwp-wizard-page .formats-row legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
  padding: 0 4px;
}

.mwp-wizard-page .formats-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-right: 18px;
}

.mwp-wizard-page .formats-row input[type="checkbox"] { accent-color: #2c5282; }

/* ---------- CTA buttons ---------- */

.mwp-wizard-page .cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mwp-wizard-page .cta-btn {
  padding: 12px 24px;
  border-radius: 10px;
  border: 1.5px solid #d8dde4;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: 0.15s;
  font-family: inherit;
  color: #1c1f24;
}

.mwp-wizard-page .cta-btn:hover { border-color: #2c5282; }

.mwp-wizard-page .cta-btn-primary {
  background: linear-gradient(135deg, #2c5282 0%, #1e3a8a 100%);
  color: #fff;
  border-color: transparent;
  padding: 12px 30px;
  font-size: 15px;
}

.mwp-wizard-page .cta-btn-primary:hover {
  box-shadow: 0 6px 16px rgba(44, 82, 130, 0.3);
  transform: translateY(-1px);
}

/* Secondary CTA — "Generate 3 variants (A/B/C)" — green outline so it reads
   as a parallel action (not a primary path). Solid green on hover.
   The :not([hidden]) guard is critical — bare `display: inline-flex` would
   override the HTML hidden attribute's default `display: none`, so the
   button would visually appear even when JS sets [hidden] for non-Quiz modes. */
.mwp-wizard-page .cta-btn-variants:not([hidden]) {
  padding: 12px 22px;
  border-color: #059669;
  color: #047857;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mwp-wizard-page .cta-btn-variants:hover {
  background: #ecfdf5;
  border-color: #047857;
  color: #047857;
}

/* Mirror guard for the "Generate 3 levels" button so the same display-override
   bug never sneaks in if styles are added later. */
.mwp-wizard-page .cta-btn-levels[hidden],
.mwp-wizard-page .cta-btn-variants[hidden] {
  display: none !important;
}

/* ---------- Hidden form (the real selects the JS reads) ---------- */

.mwp-wizard-page .hidden-form {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Result panel (keeps existing teacher-ui.css styles) ---------- */

.mwp-wizard-page .mwp-result {
  margin-top: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  
.mwp-wizard-page .hero h1 { font-size: 28px; }
  
.mwp-wizard-page .step { padding: 24px 20px; }
  
.mwp-wizard-page .grade-cards { grid-template-columns: 1fr; }
  
.mwp-wizard-page .grade-card { flex-direction: row; gap: 14px; padding: 16px; text-align: left; }
  
.mwp-wizard-page .grade-card .num { font-size: 32px; }

.mwp-wizard-page .settings-grid { grid-template-columns: 1fr 1fr; }

.mwp-wizard-page .print-options-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Branding panel — one-time setup card above the wizard.
   Uses native <details> so the open/close state is "free".
   ============================================================ */

.mwp-wizard-page .branding-panel {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 12px;
  padding: 0;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(28, 31, 36, 0.04);
  overflow: hidden;
}

.mwp-wizard-page .branding-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  user-select: none;
}

.mwp-wizard-page .branding-panel > summary::-webkit-details-marker { display: none; }

.mwp-wizard-page .branding-panel > summary::after {
  content: '▾';
  margin-left: auto;
  color: #6b7280;
  font-size: 11px;
  transition: transform 0.15s;
}

.mwp-wizard-page .branding-panel[open] > summary::after { transform: rotate(180deg); }

.mwp-wizard-page .branding-icon { font-size: 18px; }

.mwp-wizard-page .branding-title {
  font-weight: 700;
  color: #1c1f24;
}

.mwp-wizard-page .branding-summary {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

.mwp-wizard-page .branding-body {
  padding: 4px 18px 18px;
  border-top: 1px solid #f1f3f6;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
}

.mwp-wizard-page .branding-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  flex: 1 1 240px;
}

.mwp-wizard-page .branding-field > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #6b7280;
}

.mwp-wizard-page .branding-field input[type="text"],
.mwp-wizard-page .branding-field input[type="file"] {
  padding: 8px 10px;
  border: 1.5px solid #d8dde4;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

.mwp-wizard-page .branding-field input[type="text"]:focus {
  outline: none;
  border-color: #2c5282;
}

.mwp-wizard-page .branding-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #f7f8fa;
  border: 1px dashed #d8dde4;
  border-radius: 8px;
}

.mwp-wizard-page .branding-preview img {
  max-height: 36px;
  max-width: 100px;
  object-fit: contain;
}

.mwp-wizard-page .branding-remove {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}

.mwp-wizard-page .branding-remove:hover { text-decoration: underline; }

.mwp-wizard-page .branding-hint {
  margin: 0;
  width: 100%;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* ============================================================
   Print options block (font size, answer lines, score box)
   ============================================================ */

.mwp-wizard-page .print-options {
  margin-top: 4px;
}

.mwp-wizard-page .print-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
  align-items: start;
}

.mwp-wizard-page .po-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mwp-wizard-page .po-cell-toggle {
  justify-content: center;
  padding-top: 22px;  /* aligns the checkbox visually with the pill rows */
}

/* Stacked vertical toggles (score box + two-column). Spans full grid row. */
.mwp-wizard-page .po-cell-toggles {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  background: #fafbfc;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  margin-top: 4px;
}

.mwp-wizard-page .po-cell-toggles .po-toggle {
  align-items: flex-start;
}

.mwp-wizard-page .po-toggle-hint {
  display: block;
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  font-style: italic;
  margin-top: 1px;
}

/* ============================================================
   Per-topic question count (shown when 2+ topics picked)
   ============================================================ */

.mwp-wizard-page .per-topic-counts {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 10px;
}

.mwp-wizard-page .per-topic-hint {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #6b7280;
}

.mwp-wizard-page .per-topic-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 14px;
}

.mwp-wizard-page .per-topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid #d8dde4;
  border-radius: 8px;
  font-size: 13px;
}

.mwp-wizard-page .per-topic-item:focus-within {
  border-color: #2c5282;
  box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

.mwp-wizard-page .per-topic-name {
  font-weight: 600;
  color: #1c1f24;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mwp-wizard-page .per-topic-item input[type="number"] {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid #d8dde4;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  font-family: inherit;
  color: #2c5282;
}

.mwp-wizard-page .per-topic-item input[type="number"]:focus {
  outline: none;
  border-color: #2c5282;
}

.mwp-wizard-page .per-topic-total {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #d8dde4;
  font-size: 14px;
  color: #4a5160;
}

.mwp-wizard-page .per-topic-total strong {
  color: #2c5282;
  font-size: 16px;
}

.mwp-wizard-page .po-cell-label {
  font-size: 12px;
  font-weight: 600;
  color: #4a5160;
}

.mwp-wizard-page .po-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mwp-wizard-page .po-pill {
  padding: 6px 14px;
  border: 1.5px solid #d8dde4;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5160;
  cursor: pointer;
  font-family: inherit;
  transition: 0.12s;
}

.mwp-wizard-page .po-pill:hover { border-color: #2c5282; color: #2c5282; }

.mwp-wizard-page .po-pill.is-active {
  background: #2c5282;
  border-color: #2c5282;
  color: #fff;
}

.mwp-wizard-page .po-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #1c1f24;
}

.mwp-wizard-page .po-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.mwp-wizard-page .po-toggle-label { font-weight: 500; }