/* Guides and blog posts (F7). Loaded after site.css and app.css (for the .prio badges). */

.guide { padding-top: 2.5rem; padding-bottom: 4rem; }
.guide-crumb { font-size: .92rem; margin-bottom: 1.25rem; }
.guide-crumb a { color: var(--pw-muted); }
.guide h1 { font-size: clamp(2rem, 4vw, 2.9rem); max-width: 22ch; }
.guide .pw-lede { max-width: 58ch; margin-top: 1rem; }
.guide-meta { color: var(--pw-muted); font-size: .92rem; margin-top: .75rem; }
.guide-body { max-width: 70ch; }
.guide-body h2 { font-size: 1.5rem; margin-top: 2.75rem; margin-bottom: .75rem; }
.guide-body h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.guide-body li { margin-bottom: .4rem; }
.guide-body li::marker { color: var(--pw-muted); }

/* The checklist: one source for the page and for "Start with this checklist" (app.js reads [data-item]). */
.g-check { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 78ch; }
.g-check li.g-group { background: none; border: 0; padding: 0; margin: 1.5rem 0 .5rem; }
.g-group > .prio { margin-bottom: .5rem; }
.g-check li { background: var(--pw-surface); border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm); padding: .8rem 1rem; margin-bottom: .5rem; }
.g-check li[data-priority="must_have"] { border-left: 4px solid var(--pw-ink); }
.g-title { display: block; font-weight: 700; }
.g-q { display: block; margin-top: .2rem; }
.g-q::before { content: "Ask: "; color: var(--pw-muted); }
.g-why { display: block; margin-top: .2rem; color: var(--pw-muted); font-size: .93rem; }
.g-law { display: inline-block; margin-left: .5rem; font-size: .75rem; font-weight: 700; padding: .05rem .45rem; border: 1px solid var(--pw-line); border-radius: 999px; color: var(--pw-ink-2); vertical-align: .1em; }

.g-start { margin: 2rem 0; padding: 1.25rem 1.25rem; background: var(--pw-surface); border: 1px solid var(--pw-line); border-radius: var(--pw-radius); max-width: 78ch; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.g-start p { margin: 0; flex: 1 1 280px; color: var(--pw-ink-2); }
.g-start > div { flex: 1 1 280px; color: var(--pw-ink-2); }
.g-start ol { margin: .5rem 0 0; padding-left: 1.25rem; }
.g-start ol li { margin-bottom: .25rem; }

.g-draft { background: #fff7e6; border: 1px solid #e9c46a; color: #5c4400; border-radius: var(--pw-radius-sm); padding: .6rem .9rem; font-size: .93rem; margin-bottom: 1.5rem; max-width: 78ch; }
.g-tag { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--pw-muted); border: 1px solid var(--pw-line); border-radius: 999px; padding: .02rem .5rem; margin-left: .4rem; vertical-align: .15em; }

/* Index */
.g-list { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: 78ch; }
.g-list li { padding: 1rem 0; border-top: 1px solid var(--pw-line); }
.g-list a { font-family: var(--pw-font-head); font-weight: 700; font-size: 1.2rem; color: var(--pw-ink); }
.g-list p { margin: .25rem 0 0; color: var(--pw-ink-2); }
.g-check[data-mode="personal"] .g-q::before { content: "Check: "; }
/* Phones: the guide's own "Start with this checklist" button is right below the title, so the header keeps only
   the logo and Guides; and the example link sits on its own line under the button instead of wrapping beside it. */
@media (max-width: 479.98px) { .pw-top nav .btn[href*="guide="] { display: none; } }
.guide .btn + a.ms-3 { display: inline-block; margin-top: .5rem; }