/* ==============================================================================
   ClassKit Global - Sudoku Master Printable Worksheet Studio Stylesheet
   Pure Vanilla CSS | A4 210mm x 297mm Vector Print Engine
   Supports 4x4 (Junior), 6x6 (Midi), and 9x9 (Classic)
   1-Up, 2-Up, 4-Up Layouts & Answer Key Engine
   ============================================================================== */

:root {
  --sudoku-border-thick: 2.2px solid #0F172A;
  --sudoku-border-medium: 1.4px solid #475569;
  --sudoku-border-thin: 0.8px solid #CBD5E1;
  --sudoku-clue-color: #0F172A;
  --sudoku-ans-color: #2563EB;
}

/* ------------------------------------------------------------------------------
   1. Sudoku Grid Core Engine
   ------------------------------------------------------------------------------ */
.sudoku-board-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sudoku-grid-table {
  display: grid;
  background: #FFFFFF;
  border: var(--sudoku-border-thick);
  user-select: none;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}

.sudoku-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #FFFFFF;
  border-right: var(--sudoku-border-thin);
  border-bottom: var(--sudoku-border-thin);
  line-height: 1;
  overflow: hidden;
}

.sudoku-cell:last-child {
  border-right: none;
}

.sudoku-val-clue {
  font-weight: 800;
  color: var(--sudoku-clue-color);
  user-select: none;
}

.sudoku-val-solution {
  font-weight: 800;
  color: var(--sudoku-ans-color);
  display: none;
  user-select: none;
}

.show-solutions .sudoku-val-solution {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-solutions .sudoku-cell-empty {
  background: #F8FAFC;
}

/* 4x4 Grid Specifics (2x2 blocks) */
.sudoku-grid-table.grid-4,
.sudoku-grid-table.grid-4x4 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.sudoku-grid-table.grid-4 .sudoku-cell:nth-child(2n),
.sudoku-grid-table.grid-4x4 .sudoku-cell:nth-child(2n) {
  border-right: var(--sudoku-border-thick);
}
.sudoku-grid-table.grid-4 .sudoku-cell:nth-child(4n),
.sudoku-grid-table.grid-4x4 .sudoku-cell:nth-child(4n) {
  border-right: none;
}
.sudoku-grid-table.grid-4 .sudoku-cell:nth-child(n+5):nth-child(-n+8),
.sudoku-grid-table.grid-4x4 .sudoku-cell:nth-child(n+5):nth-child(-n+8) {
  border-bottom: var(--sudoku-border-thick);
}
.sudoku-grid-table.grid-4 .sudoku-cell:nth-child(n+13):nth-child(-n+16),
.sudoku-grid-table.grid-4x4 .sudoku-cell:nth-child(n+13):nth-child(-n+16) {
  border-bottom: none;
}

/* 6x6 Grid Specifics (2x3 blocks: 2 rows, 3 cols) */
.sudoku-grid-table.grid-6,
.sudoku-grid-table.grid-6x6 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.sudoku-grid-table.grid-6 .sudoku-cell:nth-child(3n),
.sudoku-grid-table.grid-6x6 .sudoku-cell:nth-child(3n) {
  border-right: var(--sudoku-border-thick);
}
.sudoku-grid-table.grid-6 .sudoku-cell:nth-child(6n),
.sudoku-grid-table.grid-6x6 .sudoku-cell:nth-child(6n) {
  border-right: none;
}
.sudoku-grid-table.grid-6 .sudoku-cell:nth-child(n+7):nth-child(-n+12),
.sudoku-grid-table.grid-6 .sudoku-cell:nth-child(n+19):nth-child(-n+24),
.sudoku-grid-table.grid-6x6 .sudoku-cell:nth-child(n+7):nth-child(-n+12),
.sudoku-grid-table.grid-6x6 .sudoku-cell:nth-child(n+19):nth-child(-n+24) {
  border-bottom: var(--sudoku-border-thick);
}
.sudoku-grid-table.grid-6 .sudoku-cell:nth-child(n+31):nth-child(-n+36),
.sudoku-grid-table.grid-6x6 .sudoku-cell:nth-child(n+31):nth-child(-n+36) {
  border-bottom: none;
}

/* 9x9 Grid Specifics (3x3 blocks) */
.sudoku-grid-table.grid-9,
.sudoku-grid-table.grid-9x9 {
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
}
.sudoku-grid-table.grid-9 .sudoku-cell:nth-child(3n),
.sudoku-grid-table.grid-9x9 .sudoku-cell:nth-child(3n) {
  border-right: var(--sudoku-border-thick);
}
.sudoku-grid-table.grid-9 .sudoku-cell:nth-child(9n),
.sudoku-grid-table.grid-9x9 .sudoku-cell:nth-child(9n) {
  border-right: none;
}
.sudoku-grid-table.grid-9 .sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-grid-table.grid-9 .sudoku-cell:nth-child(n+46):nth-child(-n+54),
.sudoku-grid-table.grid-9x9 .sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-grid-table.grid-9x9 .sudoku-cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: var(--sudoku-border-thick);
}
.sudoku-grid-table.grid-9 .sudoku-cell:nth-child(n+73):nth-child(-n+81),
.sudoku-grid-table.grid-9x9 .sudoku-cell:nth-child(n+73):nth-child(-n+81) {
  border-bottom: none;
}

/* ------------------------------------------------------------------------------
   2. Layout Modes (1-Up, 2-Up, 4-Up)
   ------------------------------------------------------------------------------ */

/* --- 1-Up (1 Problem Wide) --- */
.layout-content-1up {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 2mm 0;
  box-sizing: border-box;
}
.layout-content-1up .grid-4, .layout-content-1up .grid-4x4 { width: 120mm; height: 120mm; font-size: 38pt; }
.layout-content-1up .grid-6, .layout-content-1up .grid-6x6 { width: 128mm; height: 128mm; font-size: 24pt; }
.layout-content-1up .grid-9, .layout-content-1up .grid-9x9 { width: 136mm; height: 136mm; font-size: 18pt; }

.sudoku-rule-guide-box {
  width: 100%;
  max-width: 155mm;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 2mm;
  padding: 2.5mm 3.5mm;
  box-sizing: border-box;
}
.rule-guide-title {
  font-size: 8pt;
  font-weight: 800;
  color: #1E293B;
  margin-bottom: 1.2mm;
  display: flex;
  align-items: center;
  gap: 1.5mm;
}
.rule-guide-desc {
  font-size: 7pt;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

.sudoku-notes-box {
  width: 100%;
  max-width: 155mm;
  height: 20mm;
  border: 1px dashed #CBD5E1;
  border-radius: 2mm;
  padding: 2mm 3mm;
  box-sizing: border-box;
  font-size: 7pt;
  color: #94A3B8;
  background: #FAFAFA;
}

/* --- 2-Up (2 Problems Paper-Saving) --- */
.layout-content-2up {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1mm 0;
  box-sizing: border-box;
}
.puzzle-unit-2up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.8mm;
  box-sizing: border-box;
}
.puzzle-unit-2up .puzzle-unit-header {
  width: 100%;
  max-width: 130mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1mm;
  border-bottom: 1.2px solid #0F172A;
  box-sizing: border-box;
}
.puzzle-unit-2up .puzzle-unit-title {
  font-size: 9.5pt;
  font-weight: 800;
  color: #0F172A;
}
.puzzle-unit-2up .puzzle-unit-meta {
  font-size: 7.5pt;
  color: #64748B;
  font-weight: 600;
}
.puzzle-unit-2up .grid-4, .puzzle-unit-2up .grid-4x4 { width: 84mm; height: 84mm; font-size: 26pt; }
.puzzle-unit-2up .grid-6, .puzzle-unit-2up .grid-6x6 { width: 88mm; height: 88mm; font-size: 17pt; }
.puzzle-unit-2up .grid-9, .puzzle-unit-2up .grid-9x9 { width: 92mm; height: 92mm; font-size: 12pt; }

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

/* --- 4-Up (4 Problems Mini Pack) --- */
.layout-content-4up {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3.5mm 5mm;
  padding: 2mm 0;
  align-content: center;
  position: relative;
  box-sizing: border-box;
}
.puzzle-unit-4up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5mm;
  padding: 1mm;
  box-sizing: border-box;
}
.puzzle-unit-4up .puzzle-unit-header {
  width: 100%;
  max-width: 65mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8mm;
  border-bottom: 1px solid #0F172A;
  margin-bottom: 0;
  box-sizing: border-box;
}
.puzzle-unit-4up .puzzle-unit-title {
  font-size: 8pt;
  font-weight: 800;
  color: #0F172A;
}
.puzzle-unit-4up .puzzle-unit-meta {
  font-size: 6.8pt;
  color: #64748B;
  font-weight: 600;
}
.puzzle-unit-4up .grid-4, .puzzle-unit-4up .grid-4x4 { width: 56mm; height: 56mm; font-size: 17pt; }
.puzzle-unit-4up .grid-6, .puzzle-unit-4up .grid-6x6 { width: 60mm; height: 60mm; font-size: 11pt; }
.puzzle-unit-4up .grid-9, .puzzle-unit-4up .grid-9x9 { width: 64mm; height: 64mm; font-size: 8.5pt; }

.cut-line-cross-h {
  position: absolute;
  top: 50%;
  left: 6mm;
  right: 6mm;
  border-bottom: 1px dashed #CBD5E1;
  transform: translateY(-50%);
  pointer-events: none;
}
.cut-line-cross-v {
  position: absolute;
  left: 50%;
  top: 6mm;
  bottom: 6mm;
  border-right: 1px dashed #CBD5E1;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ------------------------------------------------------------------------------
   3. A4 Printable Sheet Specifics
   ------------------------------------------------------------------------------ */
.sudoku-sheet {
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  max-height: 297mm;
  box-sizing: border-box;
  padding: 8mm 12mm 6mm 12mm;
  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;
}

.sudoku-sheet.answer-sheet {
  border-top: 4px solid #2563EB;
}

.sheet-footer-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #CBD5E1;
  padding-top: 1.8mm;
  margin-top: 2mm;
  font-size: 7pt;
  color: #64748B;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1.2;
  box-sizing: border-box;
}

.sheet-footer-block .footer-brand-tag {
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
}

.sheet-footer-block span:last-child {
  white-space: nowrap;
}

/* Print Overrides */
@media print {
  .sudoku-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;
  }
  .sudoku-sheet.answer-sheet {
    page-break-before: always !important;
  }
}