/* Static guide pages (app/guides/, built by tools/build-guides.mjs). Loaded after app.css. */
.guide-page .topbar nav { display: flex; align-items: center; gap: .3rem; }
.guide-page .topbar .q-btn.small { min-height: 44px; }

.guide-hero-copy { display: grid; gap: 1rem; align-items: center; }
.guide-hero-copy h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); }
.guide-hero-copy .lead { font-size: 1.08rem; max-width: 36rem; }
.guide-pic { display: none; }
@media (min-width: 46rem) {
  .guide-hero-copy { grid-template-columns: 1fr 10rem; }
  .guide-pic { display: block; width: 10rem; height: 10rem; background: #fff7ec; border-radius: 50%; padding: 1rem; box-shadow: 0 .5rem 1.5rem rgb(42 34 51 / .12); }
}
.guide-hero .horizon { height: clamp(7rem, 20vw, 12rem); margin-top: 0; }
@media (max-width: 30rem) { .guide-page .nav-cta { display: none; } }

.crumbs ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font-size: .9rem; color: var(--q-muted); }
.crumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--q-muted); }
.crumbs a { color: var(--q-muted); font-weight: 700; }

.guide-section { margin: 0 0 2.2rem; }
.guide-section h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.guide-ideas, .guide-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 40rem) { .guide-ideas { grid-template-columns: repeat(2, 1fr); } }
.guide-idea .item-title { font-size: 1.15rem; }
.guide-idea .item-desc { margin-bottom: 0; }
.guide-tasks { margin-top: 1rem; }
.guide-list { padding-left: 1.3rem; display: grid; gap: .5rem; }
.guide-list li { padding-left: .2rem; }
.guide-note { display: flex; gap: .6rem; align-items: flex-start; background: var(--q-soft); padding: .8rem 1rem; border-radius: var(--q-radius-md); margin-top: 1rem; }
.guide-note .i { margin-top: .2rem; color: var(--q-accent); }

.guide-cta { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 2.2rem; }
.guide-cta h2 { font-size: 1.3rem; margin-bottom: .4rem; }

.guide-faq details { padding: 0 1.1rem; margin-bottom: .6rem; }
.guide-faq summary { cursor: pointer; font-weight: 800; min-height: 48px; display: flex; align-items: center; padding: .6rem 0; }
.guide-faq details p { margin: 0 0 1rem; }

.guide-card { display: flex; gap: 1rem; align-items: center; padding: .9rem 1rem; text-decoration: none; color: var(--q-ink); transition: transform var(--q-fast) var(--q-ease); }
.guide-card:hover { transform: translateY(-1px); box-shadow: var(--q-shadow-lift); }
.guide-card .pic { flex: none; width: 4rem; height: 4rem; background: #fff7ec; border-radius: 50%; padding: .45rem; }
.guide-card strong { display: block; font: 700 1.1rem/1.2 var(--q-display); color: var(--q-ink); margin-bottom: .25rem; }
.guide-card small { display: block; color: var(--q-muted); font-size: .92rem; }
.foot-links { margin: 0 0 .4rem; font-weight: 800; }

@media (prefers-reduced-motion: reduce) { .guide-card:hover { transform: none; } }
@media print {
  .topbar, .guide-cta, .guide-hero .horizon, .guide-hero .q-btn, .site-foot .foot-links { display: none; }
  .guide-faq details { display: block; }
}
.guide-cards + p { margin-top: 1rem; }