/* aiwa-style-guide.css: hand-written citation style pages (.cg-guide), built from data/citation-pages/<slug>.json.
   Only what aiwa-seo.css and aiwa-cite.css do not already provide: readable prose columns, the
   quick-answer box, the notes under the printed examples, a two-column card grid and the review line.
   Tokens only, so dark mode follows the rest of the explainer. */

.cg-guide .cg-guide-prose { max-width: 760px; margin-inline: auto; }
.cg-guide .cg-guide-prose .wx-p { color: var(--aiwa-text); font-size: 16.5px; line-height: 1.75; }
.cg-guide .cg-guide-prose .wx-p + .wx-p { margin-top: 16px; }
.cg-guide .wx-head + .cg-guide-prose { margin-top: 28px; }
.cg-guide .cg-guide-table { margin: 28px 0; }
.cg-guide .cg-guide-table .wx-table { min-width: 0; }
.cg-guide .cg-guide-table + .wx-p { margin-top: 0; }

.cg-guide .cg-answer { max-width: 760px; margin: 32px auto 0; }
.cg-guide .cg-answer-q { margin: 0 0 6px; color: var(--aiwa-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.cg-guide .cg-guide-runs { max-width: 900px; margin-inline: auto; }
.cg-guide .cg-notes-h { margin: 28px 0 0; }
.cg-guide .cg-notes { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: 8px; margin: 12px 0 0; padding-left: 20px; color: var(--aiwa-text); font-size: 15.5px; line-height: 1.65; }

.cg-guide .wx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }

.cg-guide .cg-reviewed { max-width: 760px; margin-inline: auto; color: var(--aiwa-muted); font-size: 14px; line-height: 1.6; text-align: center; }
.cg-guide .cg-reviewed p { margin: 0; }
.cg-guide .cg-reviewed a { color: var(--aiwa-brand-dark); }
.cg-guide section.wx:has(.cg-reviewed) { padding: 28px 0; }

@media (max-width: 760px) {
  .cg-guide .wx-g2 { grid-template-columns: 1fr; }
}

/* The same guide layout for the hand-written headline, email and paraphraser pages (.sg-guide),
   rendered by scripts/lib/guide-page.js. */
.sg-guide .sg-guide-prose { max-width: 760px; margin-inline: auto; }
.sg-guide .sg-guide-prose .wx-p { color: var(--aiwa-text); font-size: 16.5px; line-height: 1.75; }
.sg-guide .sg-guide-prose .wx-p + .wx-p { margin-top: 16px; }
.sg-guide .wx-head + .sg-guide-prose { margin-top: 28px; }
.sg-guide .sg-guide-table { margin: 28px 0; }
.sg-guide .sg-guide-table .wx-table { min-width: 0; }
.sg-guide .sg-guide-table + .wx-p { margin-top: 0; }
.sg-guide .sg-answer { max-width: 760px; margin: 32px auto 0; }
.sg-guide .sg-answer-q { margin: 0 0 6px; color: var(--aiwa-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sg-guide .sg-guide-run { max-width: 1040px; margin-inline: auto; }
.sg-guide .sg-notes-h { max-width: 900px; margin: 28px auto 0; }
.sg-guide .sg-notes { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: 8px; max-width: 900px; margin: 12px auto 0; padding-left: 20px; color: var(--aiwa-text); font-size: 15.5px; line-height: 1.65; }
.sg-guide .sg-headlines { display: grid; gap: 10px; max-width: 900px; margin: 18px auto 0; padding: 0; list-style: none; counter-reset: sg; }
.sg-guide .sg-headlines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 16px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: var(--aiwa-card); }
.sg-guide .sg-headlines b { color: var(--aiwa-ink); font-weight: 600; overflow-wrap: anywhere; }
.sg-guide .sg-headlines small { color: var(--aiwa-muted); font-size: 12.5px; white-space: nowrap; }
.sg-guide .sg-brief { max-width: 900px; margin: 0 auto; padding: 16px 18px; border-radius: 12px; background: var(--aiwa-brand-soft); color: var(--aiwa-text); font-size: 15px; line-height: 1.6; }
.sg-guide .sg-brief p { margin: 0; }
.sg-guide .sg-meta { max-width: 900px; margin: 12px auto 0; }
.sg-guide .sg-brief p + p { margin-top: 8px; }
.sg-guide .wx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
.sg-guide .sg-reviewed { max-width: 760px; margin-inline: auto; color: var(--aiwa-muted); font-size: 14px; line-height: 1.6; text-align: center; }
.sg-guide .sg-reviewed p { margin: 0; }
.sg-guide .sg-reviewed a { color: var(--aiwa-brand-dark); }
.sg-guide section.wx:has(.sg-reviewed) { padding: 28px 0; }
@media (max-width: 760px) {
  .sg-guide .wx-g2 { grid-template-columns: 1fr; }
  .sg-guide .sg-headlines li { grid-template-columns: 1fr; }
}