/* ==============================================================================
   ClassKit Global - Robot Algorithm Maze Escape Studio Stylesheet
   Pure Vanilla CSS | A4 210mm x 297mm Vector Print Engine
   Supports 8x8, 12x12, 16x16 DFS Perfect Mazes & BFS Shortest Path Command Blocks
   1-Up Wide & 2-Up Paper-Saving Layouts + Automated 2-Page Teacher Answer Keys
   Strict Rule 4 Compliance: Under 600 lines
   ============================================================================== */

:root {
  --maze-wall-color: #0F172A;
  --maze-wall-thick: 2.2px solid var(--maze-wall-color);
  --maze-grid-open: 0.5px dotted rgba(203, 213, 225, 0.8);
  --maze-ans-blue: #2563EB;
  --maze-ans-bg: rgba(37, 99, 235, 0.12);
}

/* ------------------------------------------------------------------------------
   1. Control Panel Options & Segmented Controls
   ------------------------------------------------------------------------------ */
.form-group-wb { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form-label-wb { font-size: 12px; font-weight: 800; color: var(--text-main, #0F172A); }
.form-input-wb {
  height: 38px; padding: 0 12px; border: 1.5px solid var(--border-medium, #CBD5E1);
  border-radius: var(--radius-sm, 6px); font-size: 13px; font-weight: 700;
  color: var(--text-main, #0F172A); outline: none; background: #FFFFFF;
  box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input-wb:focus { border-color: var(--primary, #E11D48); box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12); }
.form-row-checkboxes { display: flex; flex-direction: column; gap: 8px; }
.checkbox-label-wb { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-main, #1E293B); cursor: pointer; user-select: none; }
.checkbox-label-wb input[type="checkbox"] { accent-color: var(--primary, #E11D48); width: 16px; height: 16px; cursor: pointer; }

.option-label-sub { font-size: 11.5px; font-weight: 700; color: var(--text-muted, #64748B); margin-bottom: 6px; letter-spacing: -0.2px; }
.sub-option-wrap { margin-top: 10px; padding: 8px 10px; background: var(--bg-subtle, #F8FAFC); border-radius: 8px; border: 1px solid var(--border-light, #E2E8F0); }
.segmented-control { display: flex; gap: 4px; background: #EDF2F7; padding: 4px; border-radius: 8px; }
.seg-btn {
  flex: 1; padding: 8px 4px; font-size: 11.5px; font-weight: 700; color: #64748B;
  background: transparent; border: none; border-radius: 6px; cursor: pointer;
  transition: all 0.15s ease; text-align: center; user-select: none; white-space: nowrap;
}
.seg-btn:hover { color: #0F172A; }
.seg-btn.active { background: #FFFFFF; color: #0F172A; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.layout-hint-text { font-size: 11.5px; color: #64748B; line-height: 1.4; margin-top: 8px; padding: 4px 6px; }

.solution-control-row { display: flex; align-items: center; gap: 8px; }
.btn-toggle-solution {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  background: #F1F5F9; color: #334155; border: 1px solid #CBD5E1; cursor: pointer; transition: all 0.15s ease;
}
.btn-toggle-solution:hover { background: #E2E8F0; color: #0F172A; }
.btn-toggle-solution.active { background: #EFF6FF; border-color: #3B82F6; color: #1D4ED8; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }

.btn-sidebar-generate {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px;
  border-radius: 10px; font-size: 13.5px; font-weight: 800; background: #F1F5F9; border: 1.5px solid #CBD5E1;
  color: #1E293B; cursor: pointer; transition: all 0.18s ease;
}
.btn-sidebar-generate:hover { background: #E2E8F0; border-color: #94A3B8; color: #0F172A; transform: translateY(-1px); }

/* ------------------------------------------------------------------------------
   2. A4 Printable Sheet Engine (Portrait 210mm x 297mm)
   ------------------------------------------------------------------------------ */
.maze-sheet {
  width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; box-sizing: border-box;
  padding: 10mm 14mm 8mm 14mm; background: #FFFFFF; color: #0F172A; display: flex;
  flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1); margin-bottom: 24px;
}
.maze-sheet.answer-sheet {
  border-top: 4px solid #2563EB;
}

/* ------------------------------------------------------------------------------
   3. Maze Board Vector Grid System
   ------------------------------------------------------------------------------ */
.maze-board-container {
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.maze-grid {
  display: grid; background: #FFFFFF; border: var(--maze-wall-thick);
  user-select: none; box-sizing: border-box; aspect-ratio: 1 / 1;
  position: relative;
}
.maze-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; background: #FFFFFF;
}

/* Walls: Thick black line when wall is active, faint subtle guideline when open */
.maze-cell.w-t { border-top: var(--maze-wall-thick); }
.maze-cell.w-r { border-right: var(--maze-wall-thick); }
.maze-cell.w-b { border-bottom: var(--maze-wall-thick); }
.maze-cell.w-l { border-left: var(--maze-wall-thick); }
.maze-cell:not(.w-t) { border-top: var(--maze-grid-open); }
.maze-cell:not(.w-r) { border-right: var(--maze-grid-open); }
.maze-cell:not(.w-b) { border-bottom: var(--maze-grid-open); }
.maze-cell:not(.w-l) { border-left: var(--maze-grid-open); }

/* Start and Goal Cell Styling */
.maze-cell-start { background: rgba(16, 185, 129, 0.14) !important; }
.maze-cell-goal { background: rgba(245, 158, 11, 0.18) !important; }
.cell-emoji-marker { font-size: 1.2em; line-height: 1; z-index: 2; pointer-events: none; }
.cell-text-label {
  position: absolute; bottom: 0.5mm; font-size: 5pt; font-weight: 900;
  letter-spacing: -0.2px; text-transform: uppercase; line-height: 1;
}
.cell-text-label.start-lbl { color: #047857; }
.cell-text-label.goal-lbl { color: #B45309; }

/* Solution Path Overlay */
.show-solutions .maze-cell.in-path,
.maze-sheet.answer-sheet .maze-cell.in-path {
  background: var(--maze-ans-bg) !important;
}
.show-solutions .maze-cell.in-path::after,
.maze-sheet.answer-sheet .maze-cell.in-path::after {
  content: ''; position: absolute; width: 32%; height: 32%;
  border-radius: 50%; background: var(--maze-ans-blue); opacity: 0.85; z-index: 1;
}
.show-solutions .maze-cell-start.in-path::after,
.show-solutions .maze-cell-goal.in-path::after,
.maze-sheet.answer-sheet .maze-cell-start.in-path::after,
.maze-sheet.answer-sheet .maze-cell-goal.in-path::after {
  display: none;
}

/* ------------------------------------------------------------------------------
   4. Algorithm Command Blocks (Sequential Slots)
   ------------------------------------------------------------------------------ */
.coding-section-wrap {
  width: 100%; margin-top: 2.5mm;
}
.coding-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5mm;
}
.coding-section-title {
  font-size: 8.5pt; font-weight: 900; color: #0F172A; display: flex; align-items: center; gap: 1.5mm;
}
.coding-section-badge {
  font-size: 7pt; font-weight: 800; color: #4F46E5; background: #EEF2FF;
  padding: 0.4mm 1.8mm; border-radius: 1mm; border: 0.5px solid #C7D2FE;
}
.command-slots-container {
  display: flex; flex-wrap: wrap; gap: 1.6mm; align-items: center;
}
.command-slot-box {
  position: relative; width: 8.5mm; height: 9.5mm; border: 1.2px solid #94A3B8;
  border-radius: 1.5mm; background: #FFFFFF; display: flex; flex-direction: column;
  align-items: center; justify-content: center; box-sizing: border-box;
}
.slot-step-badge {
  position: absolute; top: -1.8mm; left: 1.2mm; background: #F1F5F9; color: #475569;
  font-size: 5.5pt; font-weight: 900; padding: 0.2mm 1mm; border-radius: 0.6mm;
  border: 0.5px solid #CBD5E1; line-height: 1;
}
.slot-content-val {
  font-size: 11pt; font-weight: 900; color: #2563EB; line-height: 1; margin-top: 1mm;
}
.slot-content-val.is-hint { color: #059669 !important; }
.slot-content-empty {
  width: 5mm; height: 5mm; border-bottom: 1px dashed #CBD5E1; margin-top: 1.5mm;
}

/* ------------------------------------------------------------------------------
   5. Mission Guide & Debugging Notes Box
   ------------------------------------------------------------------------------ */
.maze-info-columns {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5mm; width: 100%; margin-top: 2.5mm;
}
.maze-guide-box {
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 2mm;
  padding: 2.5mm 3.5mm; box-sizing: border-box;
}
.guide-box-title {
  font-size: 7.5pt; font-weight: 800; color: #1E293B; margin-bottom: 1mm;
  display: flex; align-items: center; gap: 1.2mm;
}
.guide-box-desc {
  font-size: 6.8pt; color: #475569; line-height: 1.4; margin: 0;
}
.maze-notes-box {
  border: 1px dashed #CBD5E1; border-radius: 2mm; padding: 2mm 3mm;
  box-sizing: border-box; font-size: 6.8pt; color: #94A3B8; background: #FAFAFA;
  display: flex; flex-direction: column; justify-content: space-between;
}

/* ------------------------------------------------------------------------------
   6. Layout Specifics (1-Up vs 2-Up)
   ------------------------------------------------------------------------------ */
.layout-content-1up {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.layout-content-1up .grid-8 { width: 126mm; height: 126mm; }
.layout-content-1up .grid-12 { width: 132mm; height: 132mm; }
.layout-content-1up .grid-16 { width: 138mm; height: 138mm; }
.layout-content-1up .grid-8 .cell-emoji-marker { font-size: 22pt; }
.layout-content-1up .grid-12 .cell-emoji-marker { font-size: 15pt; }
.layout-content-1up .grid-16 .cell-emoji-marker { font-size: 11pt; }

.layout-content-2up {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.puzzle-unit-2up {
  display: flex; flex-direction: column; justify-content: space-between; height: 124mm;
}
.puzzle-unit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.2mm; border-bottom: 1.2px solid #0F172A; margin-bottom: 1.5mm;
}
.puzzle-unit-title { font-size: 10pt; font-weight: 800; color: #0F172A; }
.puzzle-unit-meta { font-size: 7.5pt; color: #64748B; font-weight: 600; }
.puzzle-unit-body-2up {
  display: grid; grid-template-columns: auto 1fr; gap: 4mm; align-items: center;
}
.puzzle-unit-2up .grid-8 { width: 84mm; height: 84mm; }
.puzzle-unit-2up .grid-12 { width: 88mm; height: 88mm; }
.puzzle-unit-2up .grid-16 { width: 92mm; height: 92mm; }
.puzzle-unit-2up .grid-8 .cell-emoji-marker { font-size: 16pt; }
.puzzle-unit-2up .grid-12 .cell-emoji-marker { font-size: 11pt; }
.puzzle-unit-2up .grid-16 .cell-emoji-marker { font-size: 8.5pt; }

.cut-line-horizontal {
  display: flex; align-items: center; justify-content: center; gap: 2mm;
  color: #94A3B8; font-size: 7.5pt; font-weight: 700; margin: 2mm 0; user-select: none;
}
.cut-line-horizontal::before, .cut-line-horizontal::after { content: ''; flex: 1; border-bottom: 1px dashed #CBD5E1; }