/* Picture logic board. Inherits the existing theme tokens (--text, --muted, --line, --accent,
   --ink, --action-text, --canvas); it introduces no colour of its own. */
.nonogram { display: grid; justify-items: center; gap: 1.25rem; width: 100%; color: inherit; }
/* Cells never shrink below a full-size target: a wide board scrolls inside this frame instead,
   so the page itself never scrolls sideways. */
.nonogram-frame { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
/* One gutter track for the clues, then one square track per line. The renderer sets --columns
   and --rows for the board in hand; the cells carry the 44px floor on both axes. */
.nonogram-layout { display: grid; grid-template-columns: auto repeat(var(--columns, 5), minmax(44px, 1fr)); grid-template-rows: auto repeat(var(--rows, 5), minmax(44px, auto)); width: min(100%, calc(var(--columns, 5) * 3.4rem + 3.6rem)); margin-inline: auto; background: color-mix(in srgb, currentColor 3%, transparent); }
.nonogram-corner { min-width: 2rem; }
.nonogram-clue { display: flex; gap: .3em; padding: .3rem; font-size: max(.75rem, .5em); font-variant-numeric: tabular-nums; line-height: 1.1; color: inherit; }
.nonogram-clue.is-row { flex-direction: row; align-items: center; justify-content: flex-end; padding-inline-end: .5rem; }
.nonogram-clue.is-column { flex-direction: column; align-items: center; justify-content: flex-end; padding-block-end: .35rem; }
.nonogram-run { display: block; }
/* A line that already reads as its clue asks steps back rather than shouting. */
.nonogram-clue.is-done { color: var(--muted, currentColor); }
.nonogram-cell { position: relative; box-sizing: border-box; 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(1rem, 4vw, 1.5rem); 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; }
.nonogram-cell.is-first-column { border-left: 2px solid currentColor; }
.nonogram-cell.is-first-row { border-top: 2px solid currentColor; }
.nonogram-cell.is-last-column { border-right: 2px solid currentColor; }
.nonogram-cell.is-last-row { border-bottom: 2px solid currentColor; }
.nonogram-cell.is-group-right { border-right-color: color-mix(in srgb, currentColor 45%, transparent); }
.nonogram-cell.is-group-bottom { border-bottom-color: color-mix(in srgb, currentColor 45%, transparent); }
.nonogram-cell.is-filled { background: currentColor; }
.nonogram-cell:hover:not(.is-filled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.nonogram-cell.is-filled:hover { background: color-mix(in srgb, currentColor 85%, transparent); }
.nonogram-cell[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--accent, currentColor); }
.nonogram-cell:focus-visible { outline: 3px solid currentColor; outline-offset: -5px; }
.nonogram-glyph { display: block; color: var(--muted, currentColor); }
.nonogram-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: min(100%, 22rem); }
.nonogram-key { min-height: 48px; min-width: 0; width: 100%; padding: .5rem .35rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; }
.nonogram-key:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.nonogram-key:disabled { opacity: .55; cursor: default; }
.nonogram-key:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.nonogram-mode[aria-pressed="true"] { border-width: 3px; border-style: double; background: var(--accent, currentColor); color: var(--action-text, var(--canvas, #fff)); font-weight: 650; }
.nonogram-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted, currentColor); }
.nonogram[data-state="solved"] .nonogram-cell.is-last-column, .nonogram[data-state="solved"] .nonogram-cell.is-last-row,
.nonogram[data-state="solved"] .nonogram-cell.is-first-column, .nonogram[data-state="solved"] .nonogram-cell.is-first-row { border-color: var(--accent, currentColor); }
.nonogram[data-state="blocked"] .nonogram-cell, .nonogram[data-state="waiting"] .nonogram-cell { cursor: default; }
@media (max-width: 380px) {
  .nonogram { gap: 1rem; }
  .nonogram-pad { width: 100%; max-width: 100%; }
  .nonogram-key { padding: .5rem .1rem; }
}
@media (forced-colors: active) {
  .nonogram-cell { border-color: CanvasText; }
  .nonogram-cell.is-filled { background: CanvasText; }
  .nonogram-cell[aria-current="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .nonogram-mode[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* This family's gallery miniature. Its margin holds clues, not squares, so they read as labels
   beside the board rather than as part of it. Kept here rather than in the shared sheet: no
   family's decoration belongs in a stylesheet every family loads. */
.catalogue-grid[data-family="nonogram"] span[data-given] { border-color: transparent; color: var(--paper-muted); font-weight: 500; }