/* ==============================================================================
   ClassKit Global - Target Math Maze Worksheet Studio Stylesheet
   Pure Vanilla CSS | A4 210mm x 297mm Vector Print Engine
   Full-Page Wide Master Layout | 3D Math Tile Aesthetics & Green Solution Path
   ============================================================================== */

:root {
  --target-border-thick: 2px solid #0F172A;
  --target-border-thin: 1px solid #CBD5E1;
  --target-ans-green: #16A34A;
  --target-ans-bg: rgba(22, 163, 74, 0.12);
}

/* Target Preset Chips */
.target-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.target-chip-btn {
  flex: 1;
  min-width: 50px;
  padding: 6px 10px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.target-chip-btn:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}

.target-chip-btn.active {
  background: var(--primary, #E11D48);
  border-color: var(--primary-hover, #BE123C);
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(225, 29, 72, 0.25);
}

/* ------------------------------------------------------------------------------
   A4 Printable Sheet Engine (Portrait 210mm x 297mm)
   ------------------------------------------------------------------------------ */
.target-maze-sheet {
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  max-height: 297mm;
  box-sizing: border-box;
  padding: 10mm 12mm 8mm 12mm;
  background: #FFFFFF;
  color: #0F172A;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

/* Scoped Header for Target Maze */
.target-maze-sheet .sheet-header-block {
  padding-bottom: 2mm;
  margin-bottom: 3mm;
  border-bottom: 2px solid #0F172A;
  flex-shrink: 0;
}

.target-maze-sheet .sheet-meta-row {
  margin-bottom: 1.5mm;
  gap: 4mm;
  font-size: 8pt;
  line-height: 1.2;
}

.target-maze-sheet .sheet-main-title {
  font-size: 16pt;
  font-weight: 900;
  line-height: 1.2;
}

/* Hero Mission Banner */
.target-hero-banner {
  background: #F8FAFC;
  border: 1.4px solid #E2E8F0;
  border-radius: 2mm;
  padding: 2mm 3.2mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4mm;
  gap: 2.5mm;
  flex-shrink: 0;
}

.target-hero-banner.theme-vault { border-color: #FDE68A; background: #FFFBEB; }
.target-hero-banner.theme-dungeon { border-color: #DDD6FE; background: #FAF5FF; }
.target-hero-banner.theme-space { border-color: #BAE6FD; background: #F0F9FF; }

.target-mission-text {
  font-size: 7.2pt;
  color: #334155;
  line-height: 1.35;
  flex: 1;
}

.target-number-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid #D97706;
  border-radius: 1.8mm;
  padding: 1mm 3.2mm;
  min-width: 22mm;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.target-number-badge.theme-vault { border-color: #D97706; }
.target-number-badge.theme-dungeon { border-color: #7C3AED; }
.target-number-badge.theme-space { border-color: #0284C7; }

.target-badge-label {
  font-size: 5.8pt;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.target-badge-val {
  font-size: 14.5pt;
  font-weight: 900;
  line-height: 1.05;
}

.target-badge-val.theme-vault { color: #D97706; }
.target-badge-val.theme-dungeon { color: #7C3AED; }
.target-badge-val.theme-space { color: #0284C7; }

/* Maze Sheet Body & Table Board */
.maze-sheet-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.maze-unit-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5mm;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.maze-board-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.math-maze-board {
  border-collapse: separate;
  border-spacing: 1.5mm;
  table-layout: fixed;
}

.math-maze-board.size-5 { width: 142mm; height: 142mm; }
.math-maze-board.size-6 { width: 148mm; height: 148mm; }
.math-maze-board.size-7 { width: 152mm; height: 152mm; }

.maze-cell {
  background: #FFFFFF;
  border: 1.8px solid #CBD5E1;
  border-radius: 2mm;
  text-align: center;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  box-sizing: border-box;
  user-select: none;
  padding: 0;
}

.maze-cell.is-start {
  border-color: #2563EB;
  background: #EFF6FF;
}

.maze-cell.is-goal {
  border-color: #D97706;
  background: #FFFBEB;
}

.maze-cell.is-solution {
  background: #DCFCE7 !important;
  border-color: #16A34A !important;
  box-shadow: 0 0 0 1px #16A34A, 0 2px 4px rgba(22, 163, 74, 0.2);
}

.cell-marker-badge {
  position: absolute;
  top: 0.8mm;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5.6pt;
  font-weight: 900;
  color: #1E293B;
  background: #FFFFFF;
  padding: 0.2mm 1.2mm;
  border-radius: 0.8mm;
  border: 0.5px solid #CBD5E1;
  white-space: nowrap;
}

.cell-op-val {
  font-size: 16pt;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.math-maze-board.size-6 .cell-op-val { font-size: 14.5pt; }
.math-maze-board.size-7 .cell-op-val { font-size: 13pt; }

.cell-op-val.is-plus { color: #0F172A; }
.cell-op-val.is-minus { color: #DC2626; }

.solution-step-number {
  position: absolute;
  bottom: 0.8mm;
  right: 1mm;
  font-size: 6pt;
  font-weight: 900;
  background: #16A34A;
  color: #FFFFFF;
  width: 3.6mm;
  height: 3.6mm;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Calculation Trail Section */
.calculation-trail-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1.4px solid #0F172A;
  border-radius: 2mm;
  padding: 2.2mm 3.2mm;
  background: #FAFAFA;
  box-sizing: border-box;
}

.trail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5mm;
  border-bottom: 1px dashed #CBD5E1;
  padding-bottom: 1mm;
  gap: 1mm 3mm;
  width: 100%;
  box-sizing: border-box;
}

.trail-title {
  font-size: 7.5pt;
  font-weight: 800;
  color: #0F172A;
}

.trail-rule-tip {
  font-size: 6.8pt;
  color: #64748B;
  font-weight: 700;
}

.trail-blank-boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2mm 2.2mm;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.6;
}

.trail-step-item {
  display: inline-flex;
  align-items: center;
  gap: 1mm;
  white-space: nowrap;
  font-size: 8pt;
  font-weight: 800;
}

.trail-step-item.is-start {
  font-weight: 900;
  color: #0F172A;
}

.trail-step-item.is-goal {
  font-weight: 900;
}

.trail-arrow {
  color: #64748B;
  font-size: 7pt;
  font-weight: 900;
}

.trail-slot {
  color: #334155;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.trail-target {
  color: #D97706;
  font-size: 9pt;
  font-weight: 900;
}

/* Solution Explanation Card */
.solution-explanation-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #F0FDF4;
  border: 1.4px solid #86EFAC;
  border-radius: 2mm;
  padding: 2.2mm 3.2mm;
  box-sizing: border-box;
}

.sol-exp-title {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  font-size: 8pt;
  font-weight: 900;
  color: #15803D;
  margin-bottom: 1.2mm;
  width: 100%;
}

.sol-exp-formula {
  font-size: 8.5pt;
  font-weight: 900;
  color: #15803D;
  margin-bottom: 1.2mm;
  font-family: monospace;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
  width: 100%;
}

.sol-step-by-step {
  font-size: 6.8pt;
  color: #166534;
  line-height: 1.5;
  word-break: break-word;
  white-space: normal;
  width: 100%;
}

.sol-step-item {
  display: inline-block;
  white-space: nowrap;
  margin: 1px 2px;
}

.sol-step-arrow {
  display: inline-block;
  color: #86EFAC;
  font-weight: 900;
  margin: 0 1px;
}

/* Sheet Footer */
.sheet-footer-block {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #CBD5E1;
  padding-top: 2mm;
  font-size: 7.2pt;
  color: #64748B;
  flex-shrink: 0;
  width: 100%;
}

.footer-meta-brand { font-weight: 700; color: #0F172A; }

/* ------------------------------------------------------------------------------
   Print Engine Rules (@media print)
   ------------------------------------------------------------------------------ */
@media print {
  .target-maze-sheet {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
  }

  .target-maze-sheet.is-answer-key-page {
    page-break-before: always !important;
  }
}