/* SudoHint's palettes: linen paper in light mode, a muted Prussian-blue
   reading surface in dark mode. Loaded after the legacy styles. */
:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  color-scheme: light !important;
  --color-bg: #f7f2e8;
  --color-surface: #fffaf2;
  --color-surface-2: #fae4c2;
  --color-surface-offset: #fae4c2;
  --color-surface-offset-2: #f4bf98;
  --color-surface-dynamic: #e7c6a8;
  --color-divider: #d9b99a;
  --color-border: #bc8764;
  --color-text: #0e213f;
  --color-text-muted: #5b493d;
  --color-text-faint: #856d5d;
  --color-text-inverse: #f7f2e8;
  --color-primary: #0e213f;
  --color-primary-hover: #1c3967;
  --color-primary-active: #08162b;
  --color-primary-highlight: #fae4c2;
  --color-success: #1f6a50;
  --color-success-highlight: #dfeadb;
  --color-error: #75352f;
  --color-error-highlight: #f7ded6;
  --color-orange: #8b4f32;
  --color-orange-highlight: #fae4c2;
  --color-blue: #0e213f;
  --color-blue-highlight: #e2eaf4;
  --color-hint-target: #0e213f;
  --color-hint-target-bg: #fae4c2;
  --color-hint-highlight-bg: #fff3d8;
  --color-hint-elim-bg: #f7ded6;
  --sudohint-ink: #0e213f;
  --sudohint-muted: #5b493d;
  --sudohint-line: #d9b99a;
  --sudohint-blue: #0e213f;
  --sudohint-blue-soft: #fae4c2;
  --sudohint-hover-surface: #fae4c2;
}

body {
  background: var(--color-bg);
}

.app-header,
.controls-bar,
.hint-panel,
.hint-empty,
.technique-ref,
.hint-history,
.sudohint-import-dialog {
  box-shadow: 0 10px 26px rgb(14 33 63 / 8%);
}

.sudohint-import-backdrop {
  background: rgb(14 33 63 / 42%);
}

.ref-dot {
  width: 10px;
  height: 10px;
  box-shadow: none;
}

/* Example cards use a dedicated teaching key. The colours are intentionally
   farther apart than the decorative palette so each logical role is readable
   at a glance. */
.sudohint-example-cell.target {
  color: #1d5b98;
  background: #dceaf7;
  box-shadow: inset 0 0 0 2px #1d5b98;
}

.sudohint-example-cell.cause {
  color: #9a552f;
  background: #f8d6b7;
  box-shadow: inset 0 0 0 2px #9a552f;
}

.sudohint-example-cell.color-a {
  color: #1f5f82;
  background: #d7edf5;
  box-shadow: inset 0 0 0 2px #1f5f82;
}

.sudohint-example-cell.color-b {
  color: #654b86;
  background: #eadcf5;
  box-shadow: inset 0 0 0 2px #654b86;
}

.sudohint-example-cell.elimination {
  color: #983f3c;
  background-color: #f5d8d2;
  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(152 63 60 / 10%) 7px 9px);
  box-shadow: inset 0 0 0 2px #983f3c;
}

.sudohint-example-legend {
  color: var(--color-text);
  font-weight: 650;
}

.sudohint-example-legend i {
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.sudohint-example-legend i.given {
  color: #0e213f;
  background: #0e213f;
}

.sudohint-example-legend i.target {
  color: #1d5b98;
  background: #dceaf7;
}

.sudohint-example-legend i.cause {
  color: #9a552f;
  background: #f8d6b7;
}

.sudohint-example-legend i.color-a {
  color: #1f5f82;
  background: #d7edf5;
}

.sudohint-example-legend i.color-b {
  color: #654b86;
  background: #eadcf5;
}

.sudohint-example-legend i.elimination {
  color: #983f3c;
  background: repeating-linear-gradient(-45deg, #f5d8d2 0 5px, #e8b7af 5px 7px);
}

/* Use the same teaching key for live hints as the example cards. */
.sudoku-cell.hint-target {
  background: #dceaf7 !important;
  box-shadow: inset 0 0 0 2px #1d5b98 !important;
}

.sudoku-cell.hint-highlight {
  background: #f8d6b7 !important;
  box-shadow: inset 0 0 0 2px #9a552f !important;
}

.sudoku-cell.hint-elim {
  background-color: #f5d8d2 !important;
  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(152 63 60 / 10%) 7px 9px) !important;
  box-shadow: inset 0 0 0 2px #983f3c !important;
}

.sudohint-hint-key-title {
  margin: 14px 0 2px;
  color: var(--color-text-faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hint-legend {
  gap: 8px 14px;
  padding: 8px 0 12px;
}

.legend-item {
  color: var(--color-text);
  font-weight: 650;
}

.legend-dot {
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.given-dot {
  color: #0e213f;
  background: #0e213f;
}

.target-dot {
  color: #1d5b98;
  background: #dceaf7;
}

.cause-dot {
  color: #9a552f;
  background: #f8d6b7;
}

.elim-dot {
  color: #983f3c;
  background: repeating-linear-gradient(-45deg, #f5d8d2 0 5px, #e8b7af 5px 7px);
}

/* Match the live-board removal mark to the example cards: strike only the
   affected pencil digit, diagonally and lightly. */
.candidate.elim-candidate {
  position: relative;
  color: #983f3c;
  font-weight: 750;
  text-decoration: none;
}

.candidate.elim-candidate::after {
  position: absolute;
  top: 50%;
  left: 7%;
  width: 86%;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.9;
  transform: rotate(-42deg);
  transform-origin: center;
}

[data-testid="theme-toggle"] {
  display: inline-flex !important;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
}

:root[data-theme="dark"] {
  color-scheme: dark !important;
  --color-bg: #121923;
  --color-surface: #1a2430;
  --color-surface-2: #263342;
  --color-surface-offset: #202c39;
  --color-surface-offset-2: #314153;
  --color-surface-dynamic: #42546a;
  --color-divider: #3a4a5d;
  --color-border: #6f8195;
  --color-text: #f7f3ec;
  --color-text-muted: #c7d0da;
  --color-text-faint: #94a4b7;
  --color-text-inverse: #0c1724;
  --color-primary: #86bdf2;
  --color-primary-hover: #acd3f6;
  --color-primary-active: #d2e7fa;
  --color-primary-highlight: #234460;
  --color-success: #72d39b;
  --color-success-highlight: #17493a;
  --color-error: #f17d82;
  --color-error-highlight: #512c34;
  --color-orange: #f0ab63;
  --color-orange-highlight: #533725;
  --color-blue: #81b8ff;
  --color-blue-highlight: #1f4265;
  --color-hint-target: #0c1724;
  --color-hint-target-bg: #86bdf2;
  --color-hint-highlight-bg: #533725;
  --color-hint-elim-bg: #512c34;
  --sudohint-ink: #f7f3ec;
  --sudohint-muted: #c7d0da;
  --sudohint-line: #4d6075;
  --sudohint-blue: #86bdf2;
  --sudohint-blue-soft: #234460;
  --sudohint-hover-surface: #263342;
}

:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .controls-bar,
:root[data-theme="dark"] .hint-panel,
:root[data-theme="dark"] .hint-empty,
:root[data-theme="dark"] .technique-ref,
:root[data-theme="dark"] .hint-history,
:root[data-theme="dark"] .sudohint-import-dialog {
  box-shadow: 0 10px 28px rgb(0 0 0 / 24%);
}

:root[data-theme="dark"] .sudohint-import-backdrop {
  background: rgb(0 0 0 / 62%);
}

/* The board remains intentionally neutral so the teaching colours read as
   functions, rather than blending into the decoration. */
:root[data-theme="dark"] .sudoku-grid,
:root[data-theme="dark"] .sudoku-cell.box-even {
  background: #18212c;
}

:root[data-theme="dark"] .sudoku-cell.box-odd {
  background: #24303d;
}

:root[data-theme="dark"] .sudoku-cell {
  border-color: #718398;
}

:root[data-theme="dark"] .sudoku-cell:nth-child(3n):not(:nth-child(9n)),
:root[data-theme="dark"] .sudoku-cell:nth-child(n+19):nth-child(-n+27),
:root[data-theme="dark"] .sudoku-cell:nth-child(n+46):nth-child(-n+54) {
  border-color: #d8e1eb;
}

:root[data-theme="dark"] .candidate {
  color: #d7e0eb;
}

/* Pale-blue actions use dark lettering so the label remains as clear as the
   action itself. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-hint:not(:disabled),
:root[data-theme="dark"] .hint-badge,
:root[data-theme="dark"] .apply-next-btn,
:root[data-theme="dark"] .sudohint-import-fab,
:root[data-theme="dark"] .sudohint-import-primary,
:root[data-theme="dark"] .sudohint-image-select,
:root[data-theme="dark"] .sudohint-use-recognized {
  color: #0c1724 !important;
}

/* Teaching colours are deliberately farther apart than decorative colours:
   blue = result, amber = pattern, red = removal. */
:root[data-theme="dark"] .sudohint-example-cell.target,
:root[data-theme="dark"] .sudoku-cell.hint-target {
  color: #0c1724;
  background: #86bdf2 !important;
  box-shadow: inset 0 0 0 2px #d2e7fa !important;
}

:root[data-theme="dark"] .sudoku-cell.hint-target .cell-value {
  color: #0c1724 !important;
}

:root[data-theme="dark"] .sudoku-cell.hint-target .candidate {
  color: #0c1724 !important;
}

:root[data-theme="dark"] .sudohint-example-cell.cause,
:root[data-theme="dark"] .sudoku-cell.hint-highlight {
  color: #ffe0be;
  background: #533725 !important;
  box-shadow: inset 0 0 0 2px #f0ab63 !important;
}

:root[data-theme="dark"] .sudohint-example-cell.color-a {
  color: #d9f3fb;
  background: #235166 !important;
  box-shadow: inset 0 0 0 2px #8fd6ee !important;
}

:root[data-theme="dark"] .sudohint-example-cell.color-b {
  color: #f0ddff;
  background: #503b69 !important;
  box-shadow: inset 0 0 0 2px #d9b5f5 !important;
}

:root[data-theme="dark"] .sudohint-example-cell.elimination,
:root[data-theme="dark"] .sudoku-cell.hint-elim {
  color: #ffd2d4;
  background-color: #512c34 !important;
  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(241 125 130 / 17%) 7px 9px) !important;
  box-shadow: inset 0 0 0 2px #f17d82 !important;
}

:root[data-theme="dark"] .sudohint-example-legend i.given,
:root[data-theme="dark"] .given-dot {
  color: #f7f3ec;
  background: #f7f3ec;
}

:root[data-theme="dark"] .sudohint-example-legend i.target,
:root[data-theme="dark"] .target-dot {
  color: #0c1724;
  background: #86bdf2;
}

:root[data-theme="dark"] .sudohint-example-legend i.cause,
:root[data-theme="dark"] .cause-dot {
  color: #f0ab63;
  background: #533725;
}

:root[data-theme="dark"] .sudohint-example-legend i.color-a {
  color: #8fd6ee;
  background: #235166;
}

:root[data-theme="dark"] .sudohint-example-legend i.color-b {
  color: #d9b5f5;
  background: #503b69;
}

:root[data-theme="dark"] .sudohint-example-legend i.elimination,
:root[data-theme="dark"] .elim-dot {
  color: #f17d82;
  background: repeating-linear-gradient(-45deg, #512c34 0 5px, #733f4b 5px 7px);
}

:root[data-theme="dark"] .candidate.elim-candidate {
  color: #ffd2d4;
}

/* Quiet hierarchy: sections are separated by space and fine rules instead of
   being placed inside a stack of rounded containers. */
.controls-bar {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hint-panel,
.hint-empty,
.hint-history,
.technique-ref {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}

.hint-empty {
  min-height: 0;
  padding: 28px 8px;
  border-block: 1px solid var(--color-divider) !important;
}

.technique-ref > h3,
.technique-ref .ref-title,
.hint-history > h3 {
  padding-inline: 0;
  border-bottom: 1px solid var(--color-divider);
}

.technique-ref > h3,
.technique-ref .ref-title {
  border-bottom: 0;
}

.sudohint-technique-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 0 12px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.72rem;
  font-weight: 650;
}

.sudohint-technique-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sudohint-technique-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.sudohint-technique-legend .basic { color: var(--color-success); }
.sudohint-technique-legend .intermediate { color: var(--color-blue); }
.sudohint-technique-legend .advanced { color: var(--color-orange); }
.sudohint-technique-legend .expert { color: var(--color-error); }

.technique-list {
  padding: 0;
  gap: 0;
  background: transparent;
}

.technique-list .ref-item,
.technique-list .ref-item:nth-child(odd),
.technique-list .ref-item:last-child {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding: 16px 10px;
  border: 0 !important;
  border-bottom: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.technique-list .ref-item::before {
  position: absolute;
  inset: 5px 7px;
  z-index: 0;
  border-radius: 9px;
  background: var(--sudohint-hover-surface);
  box-shadow: 0 4px 12px rgb(14 33 63 / 9%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 160ms ease, transform 160ms ease;
}

.technique-list .ref-item > * {
  position: relative;
  z-index: 1;
}

.technique-list .ref-item:nth-child(odd) {
  border-right: 1px solid var(--color-divider) !important;
}

.technique-list .ref-item:hover::before {
  opacity: 1;
  transform: scale(1);
}

.technique-example-trigger {
  padding: 3px 6px;
  color: var(--color-primary);
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.technique-example-trigger:hover {
  background: var(--color-primary-highlight);
  box-shadow: 0 3px 8px rgb(14 33 63 / 10%);
  text-decoration: none;
  transform: translateY(-1px);
}

.sudohint-image-import {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
}

.sudohint-image-import summary {
  padding-block: 5px;
}

.sudohint-image-select {
  min-height: auto;
  padding: 3px 6px;
  color: var(--color-primary);
  border-radius: 6px;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.sudohint-image-select:hover {
  background: var(--color-primary-highlight);
  box-shadow: 0 3px 8px rgb(14 33 63 / 10%);
  text-decoration: none;
  transform: translateY(-1px);
}

.sudohint-copy-state {
  min-height: 34px;
  padding-inline: 11px;
  border-radius: 8px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.sudohint-copy-state:hover {
  background: var(--color-primary-highlight);
  box-shadow: 0 3px 8px rgb(14 33 63 / 10%);
  transform: translateY(-1px);
}

/* Invalid values are rejected before they touch the board. The brief shake is
   visible everywhere; supported mobile browsers also receive a short haptic
   pulse from the input handler. */
.sudoku-cell.invalid-move {
  z-index: 6;
  background: #f7ded6 !important;
  box-shadow: inset 0 0 0 2px #983f3c !important;
  animation: sudohint-invalid-move 420ms ease both;
}

@keyframes sudohint-invalid-move {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

:root[data-theme="dark"] .sudoku-cell.invalid-move {
  background: #512c34 !important;
  box-shadow: inset 0 0 0 2px #f17d82 !important;
}

.sudohint-import-dialog {
  border: 0;
  border-radius: 16px;
}

.sudohint-example-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sudohint-example-variant {
  color: var(--color-text-faint);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.sudohint-example-next {
  min-height: 32px;
  padding: 4px 8px;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.sudohint-example-next:hover {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 540px) {
  .sudohint-example-actions {
    gap: 5px;
  }

  .sudohint-example-variant {
    display: none;
  }

  .sudohint-example-next {
    padding-inline: 6px;
  }
}

.sudohint-digit-review,
.sudohint-straightened-preview,
.sudohint-image-preview {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Light mode gets its own quieter material treatment: paper-like depth,
   precise controls, and clear interactive affordances without adding cards
   around every section. */
:root:not([data-theme="dark"]) body,
:root[data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 8% -12%, rgb(244 191 152 / 23%), transparent 65%),
    radial-gradient(760px 460px at 100% 12%, rgb(250 228 194 / 62%), transparent 68%),
    #f7f2e8;
}

:root:not([data-theme="dark"]) .app-header,
:root[data-theme="light"] .app-header {
  background: rgb(255 251 245 / 88%);
  border-color: rgb(188 135 100 / 35%);
  box-shadow: 0 1px 0 rgb(14 33 63 / 4%), 0 8px 22px rgb(83 56 34 / 5%);
}

:root:not([data-theme="dark"]) .app-header .logo {
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 72%));
}

:root:not([data-theme="dark"]) .app-header .icon-btn,
:root[data-theme="light"] .app-header .icon-btn {
  border-color: rgb(188 135 100 / 62%);
  background: rgb(255 253 248 / 72%);
  box-shadow: 0 2px 5px rgb(83 56 34 / 5%);
}

:root:not([data-theme="dark"]) .app-header .icon-btn:hover,
:root[data-theme="light"] .app-header .icon-btn:hover {
  background: #fae4c2;
  border-color: #a96f4f;
  box-shadow: 0 5px 12px rgb(83 56 34 / 10%);
}

:root:not([data-theme="dark"]) .difficulty-selector,
:root[data-theme="light"] .difficulty-selector {
  padding: 4px;
  border-color: rgb(188 135 100 / 42%);
  border-radius: 10px;
  background: rgb(250 228 194 / 66%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 62%);
}

:root:not([data-theme="dark"]) .diff-btn,
:root[data-theme="light"] .diff-btn {
  border-radius: 7px;
  font-weight: 600;
}

:root:not([data-theme="dark"]) .diff-btn.active,
:root[data-theme="light"] .diff-btn.active {
  background: #fffdf8;
  box-shadow: 0 2px 7px rgb(83 56 34 / 12%), inset 0 0 0 1px rgb(188 135 100 / 16%);
}

:root:not([data-theme="dark"]) .btn-primary,
:root[data-theme="light"] .btn-primary {
  box-shadow: 0 5px 11px rgb(14 33 63 / 18%), inset 0 1px 0 rgb(255 255 255 / 12%);
}

:root:not([data-theme="dark"]) .btn-primary:hover:not(:disabled),
:root[data-theme="light"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 16px rgb(14 33 63 / 23%), inset 0 1px 0 rgb(255 255 255 / 16%);
}

:root:not([data-theme="dark"]) .btn-hint,
:root[data-theme="light"] .btn-hint,
:root:not([data-theme="dark"]) .toggle-btn,
:root[data-theme="light"] .toggle-btn {
  background: rgb(255 253 248 / 82%);
  box-shadow: 0 2px 5px rgb(83 56 34 / 5%);
}

/* The light hint control has a linen background, so it needs ink rather than
   the inherited white label used by the old primary-button treatment. */
:root:not([data-theme="dark"]) .btn-hint:not(:disabled),
:root:not([data-theme="dark"]) .btn-hint:not(:disabled):hover,
:root[data-theme="light"] .btn-hint:not(:disabled),
:root[data-theme="light"] .btn-hint:not(:disabled):hover {
  color: #0e213f !important;
}

:root:not([data-theme="dark"]) .hint-empty,
:root[data-theme="light"] .hint-empty {
  border-color: #c58b65 !important;
  background: linear-gradient(145deg, rgb(255 253 248 / 94%), rgb(250 238 220 / 76%)) !important;
  box-shadow: 0 10px 22px rgb(83 56 34 / 7%) !important;
}

:root:not([data-theme="dark"]) .hint-empty-icon,
:root[data-theme="light"] .hint-empty-icon {
  color: #9d765d;
}

:root:not([data-theme="dark"]) .technique-ref,
:root[data-theme="light"] .technique-ref,
:root:not([data-theme="dark"]) .hint-panel,
:root[data-theme="light"] .hint-panel {
  box-shadow: none;
}

:root:not([data-theme="dark"]) .technique-list .ref-item,
:root[data-theme="light"] .technique-list .ref-item {
  padding-block: 17px;
}

:root:not([data-theme="dark"]) .ref-name,
:root[data-theme="light"] .ref-name {
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

:root:not([data-theme="dark"]) .ref-desc,
:root[data-theme="light"] .ref-desc {
  color: #6a5344;
  font-size: 0.76rem;
}

:root:not([data-theme="dark"]) .technique-example-trigger,
:root[data-theme="light"] .technique-example-trigger {
  padding: 4px 8px;
  color: #173b68;
  border: 1px solid rgb(23 59 104 / 18%);
  border-radius: 999px;
  background: rgb(255 253 248 / 72%);
  box-shadow: 0 1px 2px rgb(14 33 63 / 4%);
  font-size: 0.72rem;
  font-weight: 750;
  text-decoration: none;
}

:root:not([data-theme="dark"]) .technique-example-trigger:hover,
:root[data-theme="light"] .technique-example-trigger:hover {
  color: #fffaf2;
  border-color: #173b68;
  background: #173b68;
  box-shadow: 0 5px 10px rgb(14 33 63 / 16%);
}

:root:not([data-theme="dark"]) .sudohint-image-select,
:root[data-theme="light"] .sudohint-image-select {
  padding: 5px 9px;
  border: 1px solid rgb(23 59 104 / 16%);
  border-radius: 999px;
  background: rgb(255 253 248 / 74%);
  box-shadow: 0 1px 2px rgb(14 33 63 / 4%);
  text-decoration: none;
}

:root:not([data-theme="dark"]) .sudohint-image-select:hover,
:root[data-theme="light"] .sudohint-image-select:hover {
  color: #fffaf2;
  border-color: #173b68;
  background: #173b68;
}

:root:not([data-theme="dark"]) .sudohint-example-dialog,
:root[data-theme="light"] .sudohint-example-dialog {
  border: 1px solid rgb(188 135 100 / 70%);
  box-shadow: 0 22px 54px rgb(14 33 63 / 22%), 0 2px 8px rgb(83 56 34 / 12%);
}

:root:not([data-theme="dark"]) button:focus-visible,
:root[data-theme="light"] button:focus-visible,
:root:not([data-theme="dark"]) input:focus-visible,
:root[data-theme="light"] input:focus-visible,
:root:not([data-theme="dark"]) textarea:focus-visible,
:root[data-theme="light"] textarea:focus-visible {
  outline: 3px solid rgb(216 144 93 / 42%);
  outline-offset: 2px;
}

/* Hidden subsets are about particular pencil marks, not the whole cell. Keep
   the surviving candidates visibly distinct from the red struck candidates. */
.sudohint-example-pencil.is-focus {
  position: relative;
  z-index: 1;
  color: #fffaf2;
  background: #1d5b98;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(255 250 242 / 92%), 0 1px 2px rgb(14 33 63 / 28%);
  font-weight: 900;
}

:root[data-theme="dark"] .sudohint-example-pencil.is-focus {
  color: #fffaf2;
  background: #3979bb;
  box-shadow: 0 0 0 1px #162332, 0 1px 2px rgb(0 0 0 / 35%);
}

.sudohint-example-legend i.focus {
  color: #1d5b98;
  background: #1d5b98;
}

:root[data-theme="dark"] .sudohint-example-legend i.focus {
  color: #3979bb;
  background: #3979bb;
}

/* Elapsed time sits lightly between puzzle controls and gameplay actions. */
.puzzle-timer {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: 0 2px 5px rgb(83 56 34 / 6%);
  font-size: .75rem;
  font-weight: 650;
}

.puzzle-timer svg {
  color: var(--color-orange);
}

.puzzle-timer strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
}

:root[data-theme="dark"] .puzzle-timer {
  border-color: var(--color-border);
  background: var(--color-surface-offset);
  box-shadow: none;
}

/* Handwritten notes stay separate from the app's calculated candidate display. */
.candidate.manual-candidate {
  color: var(--color-primary);
  font-weight: 850;
}

:root[data-theme="dark"] .candidate.manual-candidate {
  color: #b9dcff;
}

/* Compact state indicators make the three board-display controls readable at
   a glance without turning the toolbar into a row of large switches. */
.pencil-toggle,
.manual-pencil-toggle,
.highlight-toggle {
  position: relative;
  padding-right: 24px;
}

.pencil-toggle::after,
.manual-pencil-toggle::after,
.highlight-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-text-faint);
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}

.pencil-toggle.active,
.manual-pencil-toggle.active,
.highlight-toggle.active {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.pencil-toggle.active::after,
.manual-pencil-toggle.active::after,
.highlight-toggle.active::after {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 16%, transparent);
}