/* Sudoku board. Inherits the existing theme tokens (--text, --muted, --line, --accent, --action-text).
   The renderer sets --columns, --note-columns and the pad's track counts for the board in hand, and
   marks each cell's box edges, so one set of rules draws a four by four and a six by six board. */
.sudoku { display: grid; justify-items: center; gap: 1.25rem; color: inherit; }
/* Cells never shrink below a full-size target: a wide board scrolls inside its own frame instead,
   so the page itself never scrolls sideways. At 320px the widest board still fits without it. */
.sudoku-grid { display: grid; grid-template-columns: repeat(var(--columns, 4), minmax(44px, 1fr)); width: min(100%, calc(var(--columns, 4) * 5.5rem)); overflow-x: auto; overscroll-behavior-x: contain; border: 2px solid currentColor; background: color-mix(in srgb, currentColor 3%, transparent); }
.sudoku-cell { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; margin: 0; padding: 0; font: inherit; font-size: clamp(1.35rem, calc(28vw / var(--columns, 4)), 1.9rem); font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1; color: inherit; background: transparent; border: 0; border-right: 1px solid var(--line, #c2ccbd); border-bottom: 1px solid var(--line, #c2ccbd); cursor: pointer; }
/* The box edges come from the board's own proportions, marked by the renderer. */
.sudoku-cell.is-box-right { border-right-width: 2px; border-right-color: currentColor; }
.sudoku-cell.is-box-bottom { border-bottom-width: 2px; border-bottom-color: currentColor; }
.sudoku-cell.is-last-column { border-right: 0; }
.sudoku-cell.is-last-row { border-bottom: 0; }
.sudoku-cell.is-given { font-weight: 700; background: color-mix(in srgb, currentColor 10%, transparent); }
.sudoku-cell:hover:not(.is-given) { background: color-mix(in srgb, currentColor 6%, transparent); }
.sudoku-cell[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--accent, currentColor); }
.sudoku-cell:focus-visible { outline: 3px solid currentColor; outline-offset: -5px; }
.sudoku-cell.is-conflict .sudoku-value { color: var(--accent, currentColor); text-decoration: underline double; text-underline-offset: .16em; }
.sudoku-value { display: block; }
.sudoku-notes { position: absolute; inset: 12%; display: grid; grid-template-columns: repeat(var(--note-columns, 2), 1fr); align-content: center; font-size: max(.6rem, .36em); font-weight: 400; line-height: 1.1; color: var(--muted, currentColor); }
.sudoku-note { display: block; text-align: center; }
.sudoku-cell:not(.is-empty) .sudoku-notes { display: none; }
.sudoku-pad { display: grid; grid-template-columns: repeat(var(--pad-columns, 4), minmax(0, 1fr)); gap: .5rem; width: min(100%, 22rem); }
.sudoku-clear, .sudoku-notes-toggle { grid-column: span var(--pad-span, 2); }
.sudoku-key { min-height: 48px; min-width: 0; width: 100%; padding: .5rem .35rem; font: inherit; font-variant-numeric: tabular-nums; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; }
.sudoku-digit { grid-column: span var(--digit-span, 1); font-size: 1.15rem; font-weight: 650; }
.sudoku-key:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.sudoku-key:disabled { opacity: .55; cursor: default; }
.sudoku-key:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.sudoku-notes-toggle[aria-pressed="true"] { border-width: 3px; border-style: double; background: var(--accent, currentColor); color: var(--action-text, var(--canvas, #fff)); font-weight: 650; }
.sudoku-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted, currentColor); }
.sudoku[data-state="solved"] .sudoku-grid { border-color: var(--accent, currentColor); }
.sudoku[data-state="blocked"] .sudoku-cell, .sudoku[data-state="waiting"] .sudoku-cell { cursor: default; }
@media (max-width: 380px) {
  .sudoku { gap: 1rem; }
  .sudoku-grid, .sudoku-pad { width: 100%; max-width: 100%; }
  .sudoku-key { min-width: 0; padding: .5rem .1rem; }
}
@media (forced-colors: active) {
  .sudoku-grid, .sudoku-cell { border-color: CanvasText; }
  .sudoku-cell[aria-current="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .sudoku-notes-toggle[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* This family's gallery miniature, one rule set per board shape: 2x2 boxes on a four-column
   miniature, boxes two rows by three columns on a six-column one. The preview painter stamps
   data-columns, so a miniature never inherits the other shape's lines. Kept here rather than in
   the shared sheet: no family's decoration belongs in a stylesheet every family loads. */
.catalogue-grid[data-family="sudoku"][data-columns="4"] span:nth-child(4n + 2) { border-right: 2px solid var(--ink); }
.catalogue-grid[data-family="sudoku"][data-columns="4"] span:nth-child(n + 5):nth-child(-n + 8) { border-bottom: 2px solid var(--ink); }
.catalogue-grid[data-family="sudoku"][data-columns="6"] span:nth-child(6n + 3) { border-right: 2px solid var(--ink); }
.catalogue-grid[data-family="sudoku"][data-columns="6"] span:nth-child(n + 7):nth-child(-n + 12),
.catalogue-grid[data-family="sudoku"][data-columns="6"] span:nth-child(n + 19):nth-child(-n + 24) { border-bottom: 2px solid var(--ink); }