/* Renk Yolu (kidsColourPath). Every rule is scoped under .kp-colour-path. */
.kp-colour-path {
  --cp-paper: #fdfbf4;
  --cp-ink: #1d2b33;
  /* The site paints paragraphs with --k-ink-2 (pale, for dark pages); this paper needs the dark ink instead. */
  --k-ink-2: var(--cp-ink);
  --cp-muted: #3f5560;
  --cp-rim: #7f9aa0;
  --cp-soft: #e9f0ee;
  --cp-focus: #174f8c;
  --cp-on: #ffffff;
  display: block;
  box-sizing: border-box;
  max-width: 640px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 16px;
  color: var(--cp-ink);
  background: var(--cp-paper);
  border: 1px solid var(--cp-rim);
  border-radius: 20px;
  color-scheme: light;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.kp-colour-path *, .kp-colour-path *::before, .kp-colour-path *::after { box-sizing: border-box; }
.kp-colour-path p { margin: 8px 0; }
.kp-colour-path h2 { margin: 0 0 6px; font-size: 1rem; line-height: 1.4; color: var(--cp-ink); }
.kp-colour-path .kp-instruction { margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; }
.kp-colour-path .kp-levels,
.kp-colour-path .kp-palette,
.kp-colour-path .kp-controls { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 12px; min-width: 0; }
.kp-colour-path button {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 14px;
  border: 2px solid var(--cp-ink);
  border-radius: 14px;
  background: #ffffff;
  color: var(--cp-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;
  overflow-wrap: anywhere;
}
.kp-colour-path button:focus-visible { outline: 4px solid var(--cp-focus); outline-offset: 3px; }
.kp-colour-path button[aria-pressed='true'] { background: var(--cp-ink); color: #ffffff; }
.kp-colour-path button:disabled { opacity: 0.45; cursor: not-allowed; }
.kp-colour-path .cp-pair { display: inline-flex; align-items: center; gap: 6px; background: var(--cp-tint); border-color: var(--cp-colour); }
.kp-colour-path .cp-pair[aria-pressed='true'] { background: var(--cp-colour); color: #ffffff; }
.kp-colour-path .cp-glyph { display: block; width: 22px; height: 22px; }
.kp-colour-path .cp-glyph .cp-shape { fill: var(--cp-colour); stroke: none; }
.kp-colour-path .cp-letter-chip { font-size: 1.05rem; font-weight: 800; }
.kp-colour-path .cp-pair[aria-pressed='true'] .cp-glyph .cp-shape { fill: #ffffff; }
.kp-colour-path .kp-board {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin: 12px auto;
  padding: 8px;
  border: 2px solid var(--cp-rim);
  border-radius: 16px;
  background: var(--cp-soft);
}
.kp-colour-path .kp-board[data-size='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 300px; }
.kp-colour-path .kp-board[data-size='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 360px; }
.kp-colour-path .kp-board[data-size='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kp-colour-path .cp-cell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cp-rim);
  border-radius: 10px;
  background: #ffffff;
  color: var(--cp-ink);
  font: inherit;
  overflow: hidden;
}
.kp-colour-path .cp-cell[data-pair] { background: var(--cp-tint); border: 2px solid var(--cp-colour); }
.kp-colour-path .cp-cell:hover { border-color: var(--cp-ink); }
.kp-colour-path .cp-cell:focus-visible { outline: 4px solid var(--cp-focus); outline-offset: 2px; z-index: 1; }
.kp-colour-path .cp-cell[data-hint='true'] { outline: 3px dashed var(--cp-ink); outline-offset: -7px; }
.kp-colour-path .cp-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kp-colour-path .cp-line { fill: none; stroke: var(--cp-colour); stroke-width: 10; stroke-linecap: round; }
.kp-colour-path .cp-shape { fill: var(--cp-colour); stroke: #ffffff; stroke-width: 2.5; stroke-linejoin: round; }
.kp-colour-path .cp-letter {
  position: absolute;
  left: 3px;
  top: 3px;
  min-width: 22px;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--cp-ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}
.kp-colour-path .cp-letter.cp-end {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--cp-on);
  font-size: 1.1rem;
}
.kp-colour-path .kp-progress { margin: 6px 0; text-align: center; font-variant-numeric: tabular-nums; color: var(--cp-muted); }
.kp-colour-path .kp-status {
  min-height: 48px;
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 6px solid var(--cp-ink);
  border-radius: 12px;
  background: var(--cp-soft);
  font-weight: 600;
}
.kp-colour-path .kp-status[data-solved='true'] { border-left-width: 10px; font-weight: 800; }
.kp-colour-path .kp-status:focus { outline: 3px solid var(--cp-focus); outline-offset: 2px; }
.kp-colour-path .kp-hint { margin: 0 0 10px; padding: 10px 12px; border: 2px dashed var(--cp-rim); border-radius: 12px; background: #ffffff; }
.kp-colour-path .kp-hint:empty { display: none; }
.kp-colour-path .kp-reflection { margin: 14px 0 8px; font-weight: 600; }
.kp-colour-path .kp-trains { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--cp-rim); border-radius: 14px; background: #ffffff; }
.kp-colour-path .kp-key-help { margin: 10px 0 0; font-size: 0.92rem; color: var(--cp-muted); }
.kp-colour-path .kp-print-only { display: none; }
.kp-colour-path [data-pair='0'] { --cp-colour: #1f5f8b; --cp-tint: #d8eaf7; }
.kp-colour-path [data-pair='1'] { --cp-colour: #9a4a0c; --cp-tint: #fbe5c6; }
.kp-colour-path [data-pair='2'] { --cp-colour: #6a3fa0; --cp-tint: #ebdff8; }
.kp-colour-path [data-pair='3'] { --cp-colour: #2e6b22; --cp-tint: #d9eed0; }
@media (max-width: 420px) {
  .kp-colour-path { padding: 12px; border-radius: 14px; }
  .kp-colour-path .kp-levels,
  .kp-colour-path .kp-palette,
  .kp-colour-path .kp-controls { gap: 6px; }
  .kp-colour-path button { padding: 8px 10px; }
  .kp-colour-path .kp-board { padding: 6px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-colour-path *, .kp-colour-path *::before, .kp-colour-path *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .kp-colour-path { max-width: none; padding: 0; border: 0; border-radius: 0; background: #ffffff; color: #000000; font-size: 12pt; }
  .kp-colour-path .kp-screen-only { display: none !important; }
  .kp-colour-path .kp-print-only { display: block; }
  .kp-colour-path .kp-print-only p { color: #000000; }
  .kp-colour-path .kp-print-board { max-width: 120mm; margin: 8mm auto; padding: 0; border: 1.5pt solid #000000; border-radius: 0; background: #ffffff; break-inside: avoid; }
  .kp-colour-path .kp-print-board .cp-cell { min-width: 13mm; min-height: 13mm; border: 1pt solid #000000; background: #ffffff; }
  .kp-colour-path .kp-print-board .cp-cell[data-pair] { background: #ffffff; border: 1pt solid #000000; }
  .kp-colour-path .kp-print-board .cp-shape { fill: #000000; stroke: #ffffff; }
  .kp-colour-path .kp-print-board .cp-letter.cp-end { color: #ffffff; }
}