/* Sudoku solver pages. Chrome stays monochrome; pastel cell tints are the puzzle's own markings. */
.sd { --sd-thin: #c4c4c4; --sd-thick: var(--ink); --sd-cage: #4a4a4a; --sd-mark: var(--soft-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sd { --sd-thin: #444; --sd-cage: #b0b0b0; } }
:root[data-theme="dark"] .sd { --sd-thin: #444; --sd-cage: #b0b0b0; }

.sd-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.sd-scan { margin-left: auto; gap: 6px; }
.sd-scan svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 559px) { .sd-scan { margin-left: 0; } }
.sd-tools { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.sd-tools .note { margin: 0; }
.sd-tools > .seg { align-self: flex-start; }
.sd-cagebar { min-height: 44px; }
.sd-rules .chip { min-height: 36px; }

.sd .split > * { min-width: 0; }
.sd-gridwrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.sd-grid { --cs: 40px; display: grid; grid-template-columns: repeat(var(--cols), var(--cs)); grid-auto-rows: var(--cs); width: max-content; margin: 0 auto;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none; border-radius: 4px; }
.sd-grid:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.sd-grid.paint { touch-action: none; cursor: crosshair; }
.sd-grid .hole { background: transparent; }
.sd-grid .c { position: relative; background: var(--canvas); color: var(--ink); border-right: 1px solid var(--sd-thin); border-bottom: 1px solid var(--sd-thin);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.sd-grid .c.tr { border-right: 2px solid var(--sd-thick); }
.sd-grid .c.tb { border-bottom: 2px solid var(--sd-thick); }
.sd-grid .c.tl { border-left: 2px solid var(--sd-thick); }
.sd-grid .c.tt { border-top: 2px solid var(--sd-thick); }
.sd-grid .v { font-size: calc(var(--cs) * .58); line-height: 1; position: relative; z-index: 2; font-weight: 400; }
.sd-grid.n16 .v { font-size: calc(var(--cs) * .5); }
.sd-grid .gv .v { font-weight: 650; }
.sd-grid .us .v { color: var(--muted); font-weight: 450; }
.sd-grid .so .v, .sd-grid .sv .v { color: var(--muted); font-weight: 400; }

/* pencil marks / candidates */
.sd-grid .pm { position: absolute; inset: 1px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; z-index: 1;
  font-size: calc(var(--cs) * .24); line-height: 1; color: var(--muted); pointer-events: none; }
.sd-grid.n16 .pm { grid-template-columns: repeat(4, 1fr); font-size: calc(var(--cs) * .2); }
.sd-grid.n4 .pm { grid-template-columns: repeat(2, 1fr); }
.sd-grid .pm:empty { display: none; }
.sd-grid .pm i { font-style: normal; display: flex; align-items: center; justify-content: center; }
.sd-grid .pm i.x { color: var(--err); text-decoration: line-through; font-weight: 700; }
.sd-grid .kc .pm { inset: 4px; font-size: calc(var(--cs) * .2); }
.sd-grid .c.lab .pm { top: calc(var(--cs) * .27); grid-auto-rows: auto; align-content: space-between; }

/* killer cages: dashed outline inside the cells, sum in the top-left cell */
.sd-grid .c.kc::after { content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; pointer-events: none; z-index: 1; }
.sd-grid .c.kt::after { top: 3px; border-top: 1.5px dashed var(--sd-cage); }
.sd-grid .c.kr::after { right: 3px; border-right: 1.5px dashed var(--sd-cage); }
.sd-grid .c.kb::after { bottom: 3px; border-bottom: 1.5px dashed var(--sd-cage); }
.sd-grid .c.kl::after { left: 3px; border-left: 1.5px dashed var(--sd-cage); }
.sd-grid .kg { position: absolute; top: 1px; left: 2px; z-index: 3; font-family: var(--mono); font-size: max(10px, calc(var(--cs) * .24)); line-height: 1.1; color: var(--ink); background: inherit; padding: 0 1px; }
.sd-grid .kg:empty { display: none; }

/* shading for extra rules */
.sd-grid .c.dg, .sd-grid .c.wd { background: var(--sd-mark); }
.sd-grid .c.odd::before, .sd-grid .c.even::before { content: ''; position: absolute; inset: 14%; background: var(--sd-mark); border: 1px solid var(--sd-thin); pointer-events: none; }
.sd-grid .c.odd::before { border-radius: 50%; }
.sd-grid .c.even::before { border-radius: 2px; }

/* jigsaw region tints (puzzle colors, soft so digits stay readable in both themes) */
.rg0 { --rg: rgba(197, 176, 244, .32); } .rg1 { --rg: rgba(220, 238, 177, .45); } .rg2 { --rg: rgba(200, 230, 205, .5); }
.rg3 { --rg: rgba(244, 236, 214, .7); } .rg4 { --rg: rgba(239, 212, 212, .55); } .rg5 { --rg: rgba(243, 201, 182, .5); }
.rg6 { --rg: rgba(170, 205, 235, .4); } .rg7 { --rg: rgba(235, 215, 160, .45); } .rg8 { --rg: rgba(205, 205, 205, .45); }
.sd-grid .c[class*=" rg"] { background: var(--rg); }
/* dark theme: the same tints, faint enough that light digits keep AA contrast (color fix, chrome agent) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sd-grid .c[class*=" rg"] { background: color-mix(in srgb, var(--rg) 30%, transparent); } }
:root[data-theme="dark"] .sd-grid .c[class*=" rg"] { background: color-mix(in srgb, var(--rg) 30%, transparent); }

/* interaction states (pastel highlights carry black text in both themes) */
.sd-grid .c.pe { background: var(--soft); }
.sd-grid .c[class*=" rg"].pe { background: var(--rg); box-shadow: inset 0 0 0 999px rgba(127, 127, 127, .12); }
.sd-grid .c.sm { background: var(--soft-2); }
.sd-grid .c.sm .v { font-weight: 700; }
.sd-grid .c.sel, .sd-grid .c.ms { background: var(--lilac); color: #000; }
.sd-grid .c.sel .v, .sd-grid .c.ms .v, .sd-grid .c.sel .pm, .sd-grid .c.ms .pm { color: #000; }
.sd-grid .c.hu { background: var(--cream); }
.sd-grid .c.ha { background: var(--lilac); }
.sd-grid .c.hb { background: var(--mint); }
.sd-grid .c.hp { background: var(--lime); }
.sd-grid .c.df { background: var(--coral); }
.sd-grid .c.hu .v, .sd-grid .c.ha .v, .sd-grid .c.hb .v, .sd-grid .c.hp .v, .sd-grid .c.df .v,
.sd-grid .c.hu .pm, .sd-grid .c.ha .pm, .sd-grid .c.hb .pm, .sd-grid .c.hp .pm, .sd-grid .c.df .pm { color: #1f1f1f; }
.sd-grid .c.hp .v { font-weight: 700; color: #000; }
.sd-grid .c.hu .pm i.x, .sd-grid .c.ha .pm i.x, .sd-grid .c.hb .pm i.x, .sd-grid .c.hp .pm i.x, .sd-grid .c.df .pm i.x, .sd-grid .c.sel .pm i.x { color: #8a150d; }
.sd-grid .c.cf .v, .sd-grid .c.wr .v { color: var(--err); }
.sd-grid .c.cf, .sd-grid .c.wr, .sd-grid .c.er { background: var(--pink); }
.sd-grid .c.cf .v, .sd-grid .c.wr .v, .sd-grid .c.er .v { color: #b42318; }

/* chain links of a hint (puzzle marking, one fixed orange that reads on white, pastel tints and the dark canvas) */
.sd-grid { position: relative; }
.sd-grid .sd-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.sd-links line, .sd-links circle { fill: none; stroke: #e8590c; vector-effect: non-scaling-stroke; }
.sd-links .sd-ls { stroke-width: 2px; }
.sd-links .sd-lw { stroke-width: 1.6px; stroke-dasharray: 4 3; }
.sd-links .sd-lf { stroke-width: 1.6px; stroke-dasharray: 1.5 2.5; stroke-linecap: round; }
.sd-links .sd-ring { stroke-width: 1.4px; }
.sd-links .sd-arrow { fill: #e8590c; stroke: none; }
@media print { .sd-links { display: none; } }

.sd-live { min-height: 22px; margin: 10px 0 0; font-size: 15px; text-align: center; color: var(--muted); }
.sd-live.bad { color: var(--err); font-weight: 500; }

/* number pad */
.sd-pad { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; margin-top: 12px; max-width: 560px; margin-left: auto; margin-right: auto; }
.sd-pad .sd-k { min-height: 46px; padding: 0; font-size: 20px; font-weight: 550; border-radius: 12px; }
.sd-pad .sd-k2 { font-size: 14px; grid-column: span 2; }
.sd-pad .sd-k[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.sd-pad.n9 { grid-template-columns: repeat(11, 1fr); }
.sd-pad.n9 .sd-k2 { grid-column: span 1; font-size: 13px; }
@media (max-width: 560px) {
  .sd-pad.n9 { grid-template-columns: repeat(6, 1fr); }
  .sd-pad.n9 [data-act="pencil"] { grid-column: span 2; }
}
.sd-pad.n16 { grid-template-columns: repeat(9, 1fr); }
.sd-pad.n16 .sd-k2 { grid-column: span 1; font-size: 12px; }
@media (max-width: 560px) { .sd-pad.n16 { grid-template-columns: repeat(6, 1fr); } }
.sd-keys { text-align: center; }
@media (hover: none) { .sd-keys { display: none; } }

/* side panel */
.sd-side .tile b { font-size: 17px; letter-spacing: -0.2px; }
.sd-side .result .big { font-size: 32px; }
.sd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sd-actions .btn { width: 100%; padding-left: 10px; padding-right: 10px; white-space: normal; text-align: center; line-height: 1.2; }
.sd-opts { margin-top: 8px; }
.sd-more { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.sd-io textarea { font-family: var(--mono); font-size: 14px; }
.sd-errs { margin: 6px 0 0; padding-left: 20px; }
.sd-busy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-solsw { margin-top: 12px; }

/* explanation box under the grid (hints and step walk-through) */
.sd-hint { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-top: 12px; }
.sd-hint p { margin: 0 0 6px; font-size: 16px; }
.sd-hint .eyebrow { margin-bottom: 2px; }
.sd-hint .sd-tech { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; }
.sd-hint .actions { margin-top: 10px; }
.sd-hint .sd-legend { font-size: 14px; color: var(--muted); }

/* step list */
.sd-stepsbox > div, .sd-stepsbox ol { padding: 0; }
.sd-steps { list-style: none; margin: 0 0 12px; padding: 0; max-height: 440px; overflow-y: auto; }
.sd-steps li { border-bottom: 1px solid var(--line-soft); }
.sd-steps button { font: inherit; font-size: 14px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink); cursor: pointer;
  display: grid; grid-template-columns: 34px 1fr; column-gap: 6px; padding: 8px 6px; border-radius: 6px; min-height: 40px; }
.sd-steps button span:last-child { grid-column: 2; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.sd-steps button:hover { background: var(--soft); }
.sd-steps button[aria-current] { background: var(--ink); color: var(--canvas); }
.sd-steps button[aria-current] span { color: var(--canvas) !important; }
.sd-n { grid-row: span 2; font-family: var(--mono); font-size: 12px; color: var(--subtle); padding-top: 2px; }

/* cage and region editors */
.sd-cagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sd-cagehint { font-size: 15px; }
.sd-cagecount { font-size: 13px; color: var(--muted); flex-basis: 100%; }
.sd-warn { color: var(--err); font-size: 14px; }
.sd-sum { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.sd-sum input { width: 84px; min-height: 40px; padding: 6px 10px; }
.sd-regbar { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-reg { font: inherit; font-weight: 600; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--rg); color: var(--ink); cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.sd-reg small { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--muted); }
.sd-reg[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }

@media print {
  .sd-side, .sd-pad, .sd-tools, .sd-bar, .sd-keys, .sd-live, .sd-hint { display: none !important; }
  .sd-grid .c.sel, .sd-grid .c.pe, .sd-grid .c.sm { background: #fff; }
}