/* guide.css — top-level guide pages (/ai-cheat-sheet-maker, /how-to-make-a-cheat-sheet, …).
   Builds on library.css + exam.css; linked only from those pages. */

.guide-steps {
  counter-reset: step;
}
.guide-steps strong::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--accent, #1f5fbf);
}
.guide-assure {
  margin: 10px 0 0;
  font-size: 14px;
  opacity: 0.8;
}
.guide-prompt {
  white-space: pre-wrap;
  max-width: 80ch;
}
.band .tbl {
  max-width: 920px;
}
.band .tbl th[scope="row"] {
  text-align: left;
  font-weight: 600;
}
@media (max-width: 640px) {
  .band .tbl th[scope="row"] {
    min-width: 7.5em;
    max-width: 9em;
  }
  .band .tbl td {
    min-width: 9em;
  }
}
@media (max-width: 860px) {
  /* Library pages put the lede after the sheet on phones; on a guide it explains the page, so keep
     it under the title, then the buttons, the reassurance line and the sheet. */
  .s-hero__lede {
    order: 3;
    margin-top: 16px;
  }
  .s-hero__ctas {
    order: 4;
  }
  .guide-assure {
    order: 5;
  }
  .preview {
    order: 6;
  }
}