/* PuzzleDuo — guide.css
   Styles for the written guides only (print-scale-check, puzzle-sizes,
   paper-guide, numbered-back). Nothing here is loaded by the generator or the
   play page, so a guide tweak can never move the stage.

   House rules, same as everywhere else:
   - no hex, every colour is a token
   - no new type steps, `--fs-*` only
   - spacing on the 4/8/12/16/24/32 scale */

/* ============================================================== shell ===== */

.gd-main { padding-block: var(--s8) var(--s24); }

.gd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-label);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
  color: var(--ink-500);
  margin-bottom: var(--s6);
}
.gd-crumb a { color: var(--ink-500); text-decoration: none; border-bottom: 1px solid var(--line-200); }
.gd-crumb a:hover { color: var(--clay-700); border-bottom-color: var(--clay-500); }
.gd-crumb__sep { color: var(--line-300); }
.gd-crumb [aria-current="page"] { color: var(--ink-700); }

.gd-hero { max-width: var(--w-prose); margin-bottom: var(--s12); }
.gd-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.75rem);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-h1);
  color: var(--ink-900);
  margin: 0;
  font-weight: 600;
}
.gd-hero__lede {
  margin: var(--s4) 0 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-700);
  max-width: 62ch;
}
.gd-hero__meta {
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line-100);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-500);
  letter-spacing: var(--ls-mono);
}

/* =============================================================== body ===== */

.gd-body {
  max-width: var(--w-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.gd-body > p { margin: 0 0 var(--s4); max-width: 68ch; }
.gd-body > p:first-of-type { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }

.gd-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink-900);
  margin: var(--s12) 0 var(--s4);
  font-weight: 600;
  scroll-margin-top: calc(var(--header-h) + var(--s6));
}
.gd-body h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--ink-900);
  margin: var(--s8) 0 var(--s3);
  font-weight: 700;
  scroll-margin-top: calc(var(--header-h) + var(--s6));
}
.gd-body ul, .gd-body ol { margin: 0 0 var(--s4); padding-left: 1.25em; max-width: 66ch; }
.gd-body li { margin-bottom: var(--s2); }
.gd-body li::marker { color: var(--clay-500); }
.gd-body strong { color: var(--ink-900); font-weight: 700; }
.gd-body a {
  color: var(--clay-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.gd-body a:hover { color: var(--clay-800); text-decoration-thickness: 2px; }
.gd-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--ink-900);
}

/* text that must survive being read as a measurement */
.gd-num {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--ink-900);
  white-space: nowrap;
}

/* ============================================================== table ===== */

.gd-tablewrap {
  margin: var(--s6) 0 var(--s8);
  overflow-x: auto;
  border: 1px solid var(--line-200);
  border-radius: var(--r-card);
  background: var(--paper-0);
  box-shadow: var(--e1);
  -webkit-overflow-scrolling: touch;
}
.gd-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.gd-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s4) var(--s4) 0;
  font-size: var(--fs-label);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
}
.gd-table th, .gd-table td {
  padding: 10px var(--s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-100);
}
.gd-table thead th {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--paper-1);
  border-bottom: 1px solid var(--line-200);
  white-space: nowrap;
}
.gd-table tbody tr:last-child td { border-bottom: 0; }
.gd-table tbody tr:hover td { background: var(--paper-1); }
.gd-table td:first-child { color: var(--ink-900); font-weight: 600; white-space: nowrap; }
.gd-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-table .ok { color: var(--sage-600); font-weight: 700; }
.gd-table .no { color: var(--danger-600); font-weight: 700; }
.gd-table .mid { color: var(--warn-700); font-weight: 700; }
.gd-table__note {
  margin: 0;
  padding: 0 var(--s4) var(--s4);
  font-size: var(--fs-label);
  color: var(--ink-500);
  line-height: var(--lh-small);
}

/* ============================================================ callout ===== */

.gd-note {
  margin: var(--s6) 0;
  padding: var(--s4) var(--s4) var(--s4) var(--s6);
  background: var(--paper-1);
  border-left: 3px solid var(--clay-500);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-700);
  max-width: 68ch;
}
.gd-note strong { color: var(--ink-900); }
.gd-note--warn { background: rgba(176, 124, 46, 0.08); border-left-color: var(--warn-600); }
.gd-note--plain { background: var(--paper-0); border-left-color: var(--line-300); }

/* ============================================================= figure ===== */

.gd-figure {
  margin: var(--s8) 0;
  max-width: 420px;
  /* the frame is padding, not margin on the image: a 100%-wide image with a
     12px margin overflows its own figure by 24px on every breakpoint */
  padding: 14px;
}
.gd-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--paper-2);
  /* the printed-photo frame: a sheet of paper, not a web card.
     The 10/11px rings are box-shadow, so they draw outward and cost no layout
     width — a real margin here would overflow the figure by 20px. */
  box-shadow: 0 0 0 10px var(--paper-0), 0 0 0 11px var(--line-200), var(--e2);
  margin: 12px 0 0;
}
.gd-figure figcaption {
  margin: var(--s6) 0 0;
  font-size: var(--fs-label);
  font-family: var(--font-mono);
  line-height: var(--lh-small);
  color: var(--ink-500);
  letter-spacing: var(--ls-mono);
}

/* two figures side by side, still one column on a phone */
.gd-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s8) var(--s6);
  margin: var(--s8) 0;
}

/* =========================================================== steps ======== */

.gd-steps { counter-reset: gd; list-style: none; padding: 0; margin: var(--s6) 0 var(--s8); max-width: 68ch; }
.gd-steps > li {
  position: relative;
  counter-increment: gd;
  padding-left: var(--s12);
  margin-bottom: var(--s6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.gd-steps > li::before {
  content: counter(gd, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  color: var(--clay-600);
  background: var(--clay-100);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
}
.gd-steps strong { color: var(--ink-900); }

/* ============================================================ toc ======== */

.gd-toc {
  margin: 0 0 var(--s12);
  padding: var(--s4) var(--s6);
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-card);
  max-width: 68ch;
}
.gd-toc h2 {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-label) !important;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin: 0 0 var(--s3) !important;
  font-weight: 700;
}
.gd-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.gd-toc li { margin: 0; counter-increment: toc; }
.gd-toc a {
  display: block;
  padding: 7px 0 7px var(--s6);
  position: relative;
  font-size: var(--fs-small);
  color: var(--ink-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line-100);
}
.gd-toc li:last-child a { border-bottom: 0; }
.gd-toc a::before {
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-500);
}
.gd-toc a:hover { color: var(--clay-700); }

/* =========================================================== inline cta === */

.gd-cta {
  margin: var(--s12) 0;
  padding: var(--s8) var(--s6);
  background: var(--paper-1);
  border-radius: var(--r-card);
  border: 1px solid var(--line-200);
  max-width: 68ch;
}
.gd-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--ink-900);
  margin: 0 0 var(--s2);
  font-weight: 600;
}
.gd-cta__body { margin: 0 0 var(--s4); font-size: var(--fs-small); color: var(--ink-700); line-height: var(--lh-body); }
.gd-cta__row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ============================================================ related ===== */

.gd-related { margin-top: var(--s24); }
.gd-related h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--s4);
  font-weight: 700;
}
.gd-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
}
.gd-card {
  display: block;
  padding: var(--s4) var(--s4) var(--s4);
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gd-card:hover { box-shadow: var(--e1); transform: translateY(-2px); }
.gd-card__what {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  color: var(--clay-600);
  margin-bottom: 4px;
}
.gd-card__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-h3);
}
.gd-card__desc {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--ink-500);
  line-height: var(--lh-small);
}

@media (max-width: 767px) {
  .gd-main { padding-block: var(--s6) var(--s16); }
  .gd-hero { margin-bottom: var(--s8); }
  .gd-table { min-width: 440px; }
}