/* ==========================================================================
   intosudoku — "How to play Sudoku" guide extras
   Loaded only by how-to-play-sudoku.html, after components.css. Everything
   here is scoped to this page (.guide-page, .sd-*, .tech-*, .dg-*) so the
   shared stylesheets and every other page stay exactly as they were.
   Uses the existing design tokens from style.css; adds no new colors.
   ========================================================================== */

/* ---------- Page-level ---------- */
/* Sticky navbar is 76px (64px on phones): keep anchored headings clear of it. */
.guide-page [id] { scroll-margin-top: 92px; }
@media (max-width: 680px) { .guide-page [id] { scroll-margin-top: 80px; } }

/* --text-dim (#525C70) is only ~2.9:1 on this background; the few spots on
   this page that used it for readable text get the AA-passing secondary tone. */
.guide-page .breadcrumb { color: var(--text-secondary); }
.guide-page .example-figure figcaption { color: var(--text-secondary); }

.sd-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Editorial note ---------- */
.prose .guide-meta {
  margin: 4px 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--grid-line-bold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.02);
}
.prose .guide-meta p { margin: 0; font-size: 13px; line-height: 1.55; }
.prose .guide-meta p + p { margin-top: 4px; }
.guide-meta strong { color: var(--text-primary); }

/* ---------- Table of contents (collapsible, two columns on wide screens) ---------- */
.guide-toc { padding: 0; margin: 10px 0 30px; }
.guide-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc summary::after {
  content: '';
  flex-shrink: 0;
  width: 9px; height: 9px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease, margin .2s ease;
}
.guide-toc details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.guide-toc-count { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.guide-toc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prose .guide-toc ol { margin: 0; padding: 0 20px 14px 44px; }
.prose .guide-toc li { margin: 0; break-inside: avoid; }
.prose .guide-toc li a { display: block; padding: 10px 0; }
@media (min-width: 700px) {
  .prose .guide-toc ol { column-count: 2; column-gap: 36px; }
  .prose .guide-toc li a { padding: 6px 0; }
}

/* ---------- Interactive worked example ---------- */
.sd-demo {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 22px 0 8px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
}
.sd-demo .example-figure { margin: 0; }
.sd-demo .example-grid { width: 100%; }
/* No script: show the original static figure, exactly as before. */
html:not(.js) .sd-demo { display: block; padding: 0; background: none; border: 0; }
html:not(.js) .sd-demo .example-figure { margin: 24px 0; }
html:not(.js) .sd-demo .example-grid { width: min(100%, 360px); }
html:not(.js) .sd-panel { display: none; }

/* Each unit paints its own tint; geometry (row / column / block) tells them
   apart, and the ringed digits + the text panel carry the meaning, not color. */
.sd-demo .example-grid span {
  position: relative;
  background-image:
    linear-gradient(var(--sd-r, transparent), var(--sd-r, transparent)),
    linear-gradient(var(--sd-c, transparent), var(--sd-c, transparent)),
    linear-gradient(var(--sd-b, transparent), var(--sd-b, transparent));
  transition: color .2s ease;
}
.sd-demo .example-grid span.u-row { --sd-r: rgba(94, 234, 212, 0.20); }
.sd-demo .example-grid span.u-col { --sd-c: rgba(129, 140, 248, 0.28); }
.sd-demo .example-grid span.u-box { --sd-b: rgba(243, 246, 251, 0.12); }
.sd-demo .example-grid span.hit { color: var(--accent); font-weight: 700; }
.sd-demo .example-grid span.hit::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}
.sd-demo .example-grid .target {
  background-image: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.sd-demo .example-grid .target.solved {
  background: var(--accent);
  color: var(--accent-ink);
  animation: sd-pop .35s ease-out;
}
@keyframes sd-pop { 0% { transform: scale(.7); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

.sd-panel { min-width: 0; }
.sd-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sd-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-check {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px 8px;
  white-space: nowrap;
  border: 1px solid var(--grid-line-bold);
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font: 700 14px/1.2 var(--font-body);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sd-check:hover { border-color: var(--accent); }
.sd-check[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.sd-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.sd-check[aria-pressed="true"] .sd-dot { background: currentColor; }
.sd-dot-row { color: var(--accent); }
.sd-dot-col { color: var(--accent-2); }
.sd-dot-box { color: var(--text-primary); }

.prose ul.sd-chips {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}
.prose .sd-chips li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid var(--grid-line-bold);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  font: 700 16px/1 var(--font-display);
}
.prose .sd-chips li.out {
  border-style: dashed;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.prose .sd-chips li.answer { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.sd-explain {
  min-height: 9.5em;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.prose .sd-explain p { margin: 0 0 .6em; font-size: 14px; }
.prose .sd-explain p:last-child { margin-bottom: 0; }
.sd-explain strong { color: var(--text-primary); }
.prose .sd-explain .sd-callout {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
  color: var(--text-primary);
}
.sd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sd-actions .btn { min-height: 44px; }
.prose .sd-actions a.btn-ghost { text-decoration: none; color: var(--text-primary); }
.prose .sd-actions a.btn-ghost:hover { color: var(--accent); }

.sd-check:focus-visible,
.sd-actions .btn:focus-visible,
.prose a.level-link:focus-visible,
.tech-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sd-recap { margin-top: 18px; }
/* The class-based display values on .btn would otherwise beat the [hidden] default. */
.sd-demo [hidden] { display: none !important; }
html.js .sd-nojs, html:not(.js) .sd-js { display: none; }

@media (max-width: 760px) {
  .sd-demo { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .sd-demo .example-grid { width: min(100%, 360px); margin-inline: auto; }
  .sd-explain { min-height: 0; }
}
@media (max-width: 380px) {
  .sd-check { font-size: 13px; gap: 6px; padding-inline: 8px; }
}

/* ---------- Related-links grid: 8 links read better in two columns here ---------- */
.guide-page .related-links .level-links { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .guide-page .related-links .level-links { grid-template-columns: 1fr; } }

/* ---------- Difficulty table ---------- */
.guide-page .table-scroll { margin-top: 4px; }
.guide-page .table-scroll td a { font-weight: 700; white-space: nowrap; }
.diff-note { font-size: 14px; }
@media (max-width: 520px) {
  .guide-page .prose th, .guide-page .prose td { padding: 10px 8px; font-size: 13px; }
}

/* ---------- Strategy cards ---------- */
.tech-list { display: grid; gap: 14px; margin: 14px 0 18px; }
.tech-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
  gap: 22px;
  align-items: center;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.tech-card h4 { margin: 0 0 6px; font-size: 16px; color: var(--text-primary); }
.prose .tech-card p { margin: 0 0 8px; font-size: 14px; }
.prose .tech-card .tech-use { margin: 0; font-size: 13px; }
.tech-use strong { color: var(--text-primary); }
.tech-card figure { margin: 0; }
.tech-card figcaption { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); text-align: center; }
.tech-more { margin: 4px 0 0; }
@media (max-width: 640px) {
  .tech-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .tech-card figure { max-width: 300px; margin-inline: auto; width: 100%; }
}

/* ---------- Diagrams (inline SVG; see the technique cards) ---------- */
.dg-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.dg-svg.dg-box { max-width: 190px; }
.dg-svg text { font-family: var(--font-display); font-size: 15px; text-anchor: middle; }
.dg-bg { fill: var(--surface-elevated); }
.dg-cell { fill: var(--surface-elevated); stroke: var(--grid-line-bold); stroke-width: 2; }
.dg-cell-hit { fill: var(--accent-soft); stroke: var(--accent); }
.dg-thin { stroke: var(--grid-line); stroke-width: 1; fill: none; }
.dg-thick { stroke: var(--grid-line-bold); stroke-width: 2; fill: none; }
.dg-frame { stroke: var(--grid-line-bold); stroke-width: 2; fill: none; }
.dg-band { fill: rgba(94, 234, 212, 0.16); }
.dg-band-2 { fill: rgba(129, 140, 248, 0.20); }
.dg-focus { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 4; }
.dg-focus-fill { fill: rgba(94, 234, 212, 0.14); }
.dg-free { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.dg-pair { fill: none; stroke: var(--accent); stroke-width: 2; }
.dg-link { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.dg-corner { fill: var(--accent); }
.dg-svg .dg-corner-text { fill: var(--accent-ink); font-weight: 700; font-size: 14px; }
.dg-arrow { fill: none; stroke: var(--text-secondary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg-svg .dg-given { fill: var(--text-secondary); font-weight: 700; }
.dg-svg .dg-mid { font-size: 24px; }
.dg-svg .dg-cand { fill: var(--text-secondary); font-size: 15px; }
.dg-svg .dg-out, .dg-svg .dg-hit { font-size: 15px; }
.dg-svg .dg-hit { fill: var(--accent); font-weight: 700; }
.dg-svg .dg-big { font-size: 46px; }
.dg-svg .dg-out { fill: var(--error); font-weight: 700; }
.dg-strike { stroke: var(--error); stroke-width: 2; stroke-linecap: round; }
.dg-box .dg-cand, .dg-box .dg-hit, .dg-box .dg-out { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .sd-demo *, .sd-demo *::before, .sd-demo *::after,
  .guide-toc summary::after { animation: none !important; transition: none !important; }
}