/* Sudoku (/tools/sudoku/). Linked only on that page; js/webtools/sudoku.js builds the markup inside
   [data-webtool="sudoku"]. Site tokens only, so light and dark mode (and the theme toggle) follow the page.
   This file loads before tools-premium.css, so a few selectors carry .tool[data-webtool] to win over it. */
.sd-app {
  --sd-cell: var(--bg);
  --sd-line: var(--border);
  --sd-box: var(--text-2);
  --sd-peer: color-mix(in srgb, var(--accent) 8%, var(--sd-cell));
  --sd-same: color-mix(in srgb, var(--accent) 20%, var(--sd-cell));
  --sd-sel: color-mix(in srgb, var(--accent) 30%, var(--sd-cell));
  --sd-bad-bg: color-mix(in srgb, var(--bad) 16%, var(--sd-cell));
  --sd-ok-bg: color-mix(in srgb, var(--ok) 10%, var(--sd-cell));
  container: sd / inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .sd-app { --sd-peer: var(--bg-2); --sd-same: var(--border); --sd-sel: var(--border); --sd-bad-bg: var(--bg-2); --sd-ok-bg: var(--bg-2); }
}
.sd-app [hidden] { display: none !important; }
.sd-app.is-own .sd-only-play,
.sd-app:not(.is-own) .sd-only-own { display: none !important; }
.sd-app .wt-status { text-align: center; }
.sd-app [aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.sd-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- mode, level, new game ---------- */
.sd-bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; justify-content: space-between; }
.sd-seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-2); }
.sd-segbtn { flex: 1 1 auto; min-height: 44px; padding: 0 0.95rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font: inherit; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.sd-segbtn:hover { color: var(--text); }
.sd-segbtn[aria-pressed="true"] { background: var(--surface-raised, var(--bg)); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 18%, transparent); }
.sd-app .sd-segbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; border-radius: var(--radius-pill); }
.sd-new { display: flex; flex: 1 1 15rem; flex-wrap: wrap; gap: 0.5rem; align-items: end; justify-content: flex-end; }
.sd-new label { flex: 1 1 6.5rem; max-width: 12rem; min-width: 0; }
.sd-new select { width: 100%; min-height: 44px; }
.tool[data-webtool="sudoku"] .sd-new .btn { padding-inline: 1.1rem; }

/* ---------- stats (level, time, hints, mistakes) ---------- */
.sd-app .sd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.sd-app .sd-stats .cc-stat { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.sd-app .sd-stats .cc-stat span { font-size: 0.8rem; color: var(--text-2); }
.sd-app .sd-stats .cc-stat strong { overflow: hidden; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
@container sd (min-width: 28rem) {
  .sd-app .sd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- confirm ---------- */
.sd-ask { display: grid; gap: 0.6rem; }
.sd-ask p { margin: 0; font-weight: 600; }

/* ---------- board ---------- */
.sd-main { display: grid; gap: 1rem; align-items: start; justify-items: center; }
.sd-boardwrap { position: relative; width: 100%; max-width: 460px; container: sdb / inline-size; }
.sd-board {
  display: grid;
  grid-template-rows: repeat(9, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid var(--sd-box);
  border-radius: 10px;
  background: var(--sd-cell);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms ease;
}
.sd-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); min-height: 0; }
.sd-cell {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--sd-line);
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-cell);
  color: var(--accent);
  font-size: clamp(0.95rem, 5.4vw, 1.75rem);
  font-size: 6.3cqi;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.sd-cell:nth-child(3), .sd-cell:nth-child(6) { border-right: 2px solid var(--sd-box); }
.sd-cell:nth-child(9) { border-right: 0; }
.sd-row:nth-child(3) > .sd-cell, .sd-row:nth-child(6) > .sd-cell { border-bottom: 2px solid var(--sd-box); }
.sd-row:nth-child(9) > .sd-cell { border-bottom: 0; }
.sd-v, .sd-n { grid-area: 1 / 1; }
.sd-v { align-self: center; justify-self: center; }
.sd-n {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: 7%;
  color: var(--text-2);
  font-size: 0.55rem;
  font-size: max(7px, 2.35cqi);
  font-weight: 500;
}
.sd-n > span { display: grid; place-items: center; line-height: 1; }
.sd-n > span.is-hit { color: var(--accent); font-weight: 700; }

/* given clues are bold text colour; your entries are accent; revealed answers are muted */
.sd-cell.is-given { color: var(--text); font-weight: 600; }
.sd-cell.is-entry { font-weight: 500; }
.sd-cell.is-shown { color: var(--text-3); font-style: italic; }
.sd-cell.is-sol { color: var(--accent); font-style: italic; }
.sd-cell.is-peer { background: var(--sd-peer); }
.sd-cell.is-same { background: var(--sd-same); }
.sd-cell.is-wrong { background: var(--sd-bad-bg); }
.sd-cell.is-conf, .sd-cell.is-wrong { color: var(--bad); }
.sd-cell.is-sel { background: var(--sd-sel); box-shadow: inset 0 0 0 2px var(--accent); }
.sd-cell.is-wrong.is-sel { box-shadow: inset 0 0 0 2px var(--bad); }
.sd-cell.is-hint::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--star); }
.sd-app .sd-cell:focus { outline: none; }
.sd-app .sd-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.sd-app .sd-cell.is-wrong:focus-visible { box-shadow: inset 0 0 0 3px var(--bad); }

.sd-board.is-solved { border-color: var(--ok); }
.sd-board.is-solved .sd-cell { background: var(--sd-ok-bg); }
.sd-app.is-busy .sd-board { opacity: 0.5; cursor: progress; }

/* paused: the digits hide under a cover with a Resume button */
.sd-boardwrap.is-paused .sd-v,
.sd-boardwrap.is-paused .sd-n,
.sd-boardwrap.is-paused .sd-cell::after { visibility: hidden; }
.sd-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised, var(--bg)) 80%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-align: center;
  cursor: pointer;
}
.sd-cover p { margin: 0; color: var(--text); font-size: 1.25rem; font-weight: 600; }

/* ---------- number pad, tools ---------- */
.sd-side { display: grid; gap: 0.75rem; align-content: start; width: 100%; max-width: 460px; min-width: 0; }
.sd-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.sd-key {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sd-key:hover { border-color: var(--accent); }
.sd-key:active { background: var(--sd-same); }
.sd-key.sd-erase { font-size: 0.9rem; font-weight: 600; }
.sd-left { position: absolute; top: 4px; right: 6px; color: var(--text-3); font-size: 0.625rem; font-weight: 600; }
.sd-key.is-done { color: var(--text-3); }
.sd-key.is-done .sd-left { visibility: hidden; }
.sd-app.is-notes .sd-key:not(.sd-erase) { color: var(--accent); font-size: 1.05rem; }
.sd-app .sd-key:focus-visible { outline: none; box-shadow: var(--focus, 0 0 0 3px var(--accent)); border-radius: var(--radius-sm); }

.sd-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.tool[data-webtool="sudoku"] .sd-tools .btn { min-width: 0; min-height: 44px; padding: 0 0.4rem; font-size: 0.9375rem; white-space: nowrap; }
.tool[data-webtool="sudoku"] .sd-tools .btn[aria-pressed="true"] { background: var(--sd-same); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 2px var(--accent); }
.sd-more { justify-content: center; }
.tool[data-webtool="sudoku"] .sd-more .btn { padding-inline: 1rem; }

/* ---------- enter your own ---------- */
.sd-own { display: grid; gap: 0.6rem; min-width: 0; }
.sd-own label { min-width: 0; }
.sd-own input { width: 100%; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.02em; }
.sd-own .wt-btns { justify-content: center; }

/* ---------- options, key help ---------- */
.sd-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }
.sd-help { margin: 0; color: var(--text-3); font-size: 0.8125rem; text-align: center; }
@media (hover: none) and (pointer: coarse) { .sd-help { display: none; } }

/* ---------- widths: pad beside the board on wide stages, below it on phones ---------- */
@container sd (max-width: 16.5rem) {
  .sd-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-key.sd-erase { font-size: 0.75rem; }
  .sd-segbtn { padding: 0 0.7rem; }
}
@container sd (min-width: 38rem) {
  .sd-main { grid-template-columns: minmax(0, 460px) 13rem; justify-content: center; justify-items: stretch; }
  .sd-side { max-width: none; }
  .sd-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-key { min-height: 54px; font-size: 1.6rem; }
  .sd-key.sd-erase { grid-column: 1 / -1; min-height: 46px; font-size: 0.95rem; }
}
@container sd (min-width: 46rem) {
  .sd-main { grid-template-columns: minmax(0, 460px) 16rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .sd-board.is-solved { animation: sd-solved 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@keyframes sd-solved {
  0% { transform: scale(1); }
  35% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-board, .sd-cell, .sd-key { transition: none; }
}

/* ---------- print: "Print puzzle" adds html.sd-printing and a sheet at the end of <body> ---------- */
.sd-printsheet { display: none; }
@media print {
  html.sd-printing { color-scheme: light !important; }
  html.sd-printing body { margin: 0 !important; padding: 0 !important; background: Canvas !important; }
  html.sd-printing body > :not(.sd-printsheet) { display: none !important; }
  html.sd-printing .sd-printsheet { display: block; color: CanvasText; background: Canvas; font-family: var(--font-sans, sans-serif); }
  .sd-ptitle { margin: 0 0 6mm; font-size: 16pt; font-weight: 600; }
  .sd-pgrid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); width: 144mm; height: 144mm; border: 2.5pt solid CanvasText; }
  .sd-pcell { display: flex; align-items: center; justify-content: center; border-right: 0.75pt solid CanvasText; border-bottom: 0.75pt solid CanvasText; font-size: 22pt; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sd-pcell:nth-child(9n) { border-right: 0; }
  .sd-pcell:nth-child(9n+3), .sd-pcell:nth-child(9n+6) { border-right-width: 2pt; }
  .sd-pcell:nth-child(n+19):nth-child(-n+27), .sd-pcell:nth-child(n+46):nth-child(-n+54) { border-bottom-width: 2pt; }
  .sd-pcell:nth-child(n+73) { border-bottom: 0; }
  .sd-pfoot { margin: 5mm 0 0; font-size: 9pt; }
}