/* Guide pages (Sept 11 2026): /stuck-on-sudoku/, /is-sudoku-math/ and
   /color-sudoku/. Built for search, from the Sept 11 marketing plan refresh:
   each answers one question people type into Google, in the site's plain voice,
   and sends the reader to the animated technique pages and the free game.
   One reading column, the same stationery devices as the rest of the site
   (hairlines, the 2px sheet with its dashed frame, color as an accent only).
   Mini boards are drawn by learn.js, the same renderer as the Rules page. */

.guide { max-width: 760px; margin: 0 auto; padding: 34px clamp(16px, 4vw, 32px) 64px; }
.guide-crumb { font-size: 13px; font-weight: 700; color: var(--quiet); margin-bottom: 14px; }
.guide-crumb a { color: var(--quiet); }
.guide-crumb a:hover { color: var(--text); text-decoration: underline; }
.guide h1 { font-family: "Nunito"; font-weight: 900; font-size: clamp(32px, 5.4vw, 46px);
  letter-spacing: -1.2px; line-height: 1.06; margin-bottom: 14px; }
.guide .lede { font-size: 19px; line-height: 1.6; color: var(--muted); font-weight: 500; margin-bottom: 26px; }
.guide .lede strong { color: var(--text); font-weight: 800; }

.guide h2 { font-family: "Nunito"; font-weight: 900; font-size: clamp(24px, 3.4vw, 29px);
  letter-spacing: -0.5px; line-height: 1.15; margin: 44px 0 12px; }
.guide h3 { font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0 0 6px; }
.guide p { font-size: 16.5px; line-height: 1.7; margin-bottom: 14px; }
.guide p a, .guide li a, .guide td a { color: var(--accent); font-weight: 700; }
.guide p a:hover, .guide li a:hover, .guide td a:hover { text-decoration: underline; }
.guide ul.plain { margin: 0 0 16px 1.2em; }
.guide ul.plain li { font-size: 16.5px; line-height: 1.65; margin-bottom: 6px; }

/* The short answer, set apart like the app's pause card: flat paper, the 2px
   stationery edge, a dashed inset frame. */
.answer { position: relative; background: var(--card); border: 2px solid var(--rule); border-radius: 14px;
  padding: 22px 24px; margin: 6px 0 10px; }
.answer::after { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--dash);
  border-radius: 8px; pointer-events: none; }
.answer .label { font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--quiet); margin-bottom: 6px; }
.answer p { margin: 0; font-size: 17px; }

/* Figures: a mini board (or two) on the quiet panel the Rules cards use. */
.fig { margin: 22px 0 24px; background: #F8F8F8; border: 1px solid var(--border);
  padding: 22px 16px 16px; display: flex; flex-direction: column; align-items: center; }
.fig-row { display: flex; gap: 28px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.fig-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fig-tag { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--quiet); }
.fig figcaption { margin-top: 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5;
  text-align: center; max-width: 34em; }

/* The digit twin of learn.js's mini board: same cell, same lines, digits in
   place of bubbles. */
.digit-grid { display: grid; grid-template-columns: repeat(9, var(--c)); border: 2px solid #444;
  background: #fff; line-height: 1; }
.digit-grid span { width: var(--c); height: var(--c); display: flex; align-items: center; justify-content: center;
  font-family: "Nunito"; font-weight: 800; font-size: calc(var(--c) * 0.52); color: #2A2A2A;
  border-right: 0.5px solid #D8D8D8; border-bottom: 0.5px solid #D8D8D8; box-sizing: border-box; }
.digit-grid span:nth-child(9n) { border-right: 0; }
.digit-grid span:nth-child(9n+3), .digit-grid span:nth-child(9n+6) { border-right: 2px solid #555; }
.digit-grid span:nth-child(n+19):nth-child(-n+27),
.digit-grid span:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #555; }
.digit-grid span:nth-child(n+73) { border-bottom: 0; }

/* Numbered steps (the Stuck page). The number sits in an ink circle, the
   technique link under the text. A step with a board floats it to the right
   on wide screens and stacks it underneath on phones. */
.steps { list-style: none; counter-reset: step; margin: 8px 0 0; }
.steps > li { counter-increment: step; position: relative; padding: 20px 0 20px 52px;
  border-top: 1px solid var(--border); display: flow-root; }
.steps > li:last-child { border-bottom: 1px solid var(--border); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 20px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: "Nunito"; font-weight: 900; font-size: 16px; }
.steps p { margin-bottom: 8px; }
.steps .learn { font-size: 14.5px; font-weight: 700; color: var(--quiet); margin: 0; }
.steps .learn a { color: var(--accent); }
.steps .step-fig { float: right; margin: 4px 0 10px 24px; background: #F8F8F8; border: 1px solid var(--border);
  padding: 12px; line-height: 0; }
@media (max-width: 640px) {
  .steps > li { padding-left: 46px; }
  .steps > li::before { width: 30px; height: 30px; font-size: 15px; }
  .steps .step-fig { float: none; display: flex; justify-content: center; margin: 4px 0 12px; }
  /* The board comes first in the markup (so it can float on wide screens);
     on a phone the heading goes back on top of it. */
  .steps > li { display: flex; flex-direction: column; }
  .steps > li > h3 { order: -1; margin-bottom: 10px; }
}

/* Level table (which techniques each level can ask for). */
.table-wrap { overflow-x: auto; margin: 8px 0 18px; }
.levels { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.levels th, .levels td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.levels th { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--quiet);
  background: var(--paper-2); }
.levels td:first-child { font-weight: 800; white-space: nowrap; }

/* The nine colors, laid out as one 3x3 block. */
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 480px;
  border: 2px solid #444; background: #fff; margin: 10px 0 18px; }
.swatches div { display: flex; align-items: center; gap: 10px; padding: 12px 12px; font-weight: 700; font-size: 15px;
  border-right: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; }
.swatches div:nth-child(3n) { border-right: 0; }
.swatches div:nth-child(n+7) { border-bottom: 0; }
.swatches .dot { width: 24px; height: 24px; border-radius: 50%; border-width: 2px; border-style: solid; flex-shrink: 0; }
@media (max-width: 440px) { .swatches div { font-size: 13.5px; gap: 8px; padding: 10px 8px; } .swatches .dot { width: 20px; height: 20px; } }

/* Hero with a board beside the copy (the Color Sudoku page). */
.guide-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center; margin-bottom: 8px; }
.guide-hero .board { background: #F8F8F8; border: 1px solid var(--border); padding: 16px; line-height: 0; }
@media (max-width: 760px) { .guide-hero { grid-template-columns: minmax(0, 1fr); } .guide-hero .board { justify-self: center; } }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }

/* Questions at the end, one per block. */
.faq h3 { margin-top: 22px; }
.faq p { margin-bottom: 6px; }

/* Closing card: the stationery sheet, centred. */
.guide-cta { position: relative; background: var(--card); border: 2px solid var(--rule); border-radius: 14px;
  text-align: center; padding: 30px 22px 28px; margin-top: 48px; }
.guide-cta::after { content: ""; position: absolute; inset: 9px; border: 2px dashed var(--dash);
  border-radius: 8px; pointer-events: none; }
.guide-cta .cta-bubbles { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; }
.guide-cta .cta-bubbles span { width: 16px; height: 16px; border-radius: 50%; border-width: 1.5px; border-style: solid; }
.guide-cta h2 { margin: 0 0 8px; }
.guide-cta p { color: var(--muted); margin: 0 auto 16px; max-width: 30em; }
.guide-cta .btn-row { justify-content: center; position: relative; z-index: 1; }

/* Related guides row. */
.guide-more { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); }
.guide-more h2 { font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--quiet); margin: 0 0 10px; }
.guide-more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.guide-more a { display: inline-block; padding: 7px 13px; border: 1.5px solid #E2E2E2; border-radius: 999px;
  font-weight: 700; font-size: 14px; background: var(--card); transition: border-color .15s; }
.guide-more a:hover { border-color: var(--text); }

/* Keep the crumb and the guide chips in their own colors (the reading
   column's purple link rule would otherwise reach them). */
.guide .guide-crumb a { color: var(--quiet); font-weight: 700; }
.guide .guide-crumb a:hover { color: var(--text); }
.guide .guide-more a { color: var(--text); }
.guide .guide-more a:hover { text-decoration: none; }