/* Editorial guides: index, hub and article pages, plus the "helpful guides" teaser used on marketplace pages
   (that part lives in app.css so those pages need no extra stylesheet). */
.guides, .guide { padding-bottom: var(--page-bottom); }
.guides > h1 { font-size: var(--fs-h1); margin: var(--s-2) 0 var(--s-3); }
.guides .guide-list { max-width: 52rem; }

.guide-hubs ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-4); padding: 0; }
.guide-hubs .chip.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.guide-search { display: flex; gap: var(--s-2); max-width: 32rem; margin-bottom: var(--s-4); }
.guide-search .input { flex: 1 1 auto; min-width: 0; }
.guide-search__result { color: var(--ink-700); }

/* ── Article ── */
.guide-hero { max-width: 46rem; margin: var(--s-2) 0 var(--s-8); }
.guide-hero h1 { font-size: var(--fs-h1); line-height: 1.12; margin-bottom: var(--s-4); text-wrap: balance; }
.guide__category { margin: 0 0 var(--s-2); }
.guide__category a { color: var(--blue-600); text-decoration: none; font-weight: 700; }
.guide__category a:hover { text-decoration: underline; }
.guide-hero__summary { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-700); margin: 0 0 var(--s-5); }
.guide__byline { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-500); font-size: var(--fs-sm); }

.guide-layout { display: grid; gap: var(--s-8); }
.guide-main { min-width: 0; max-width: 46rem; }
.guide-toc { align-self: start; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.guide-toc h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin: 0 0 var(--s-3); }
.guide-toc ol { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; counter-reset: toc; }
.guide-toc li { counter-increment: toc; display: flex; gap: var(--s-2); font-size: var(--fs-sm); line-height: 1.4; }
.guide-toc li::before { content: counter(toc) "."; color: var(--ink-400); min-width: 1.4em; font-variant-numeric: tabular-nums; }
.guide-toc a { color: var(--navy-900); text-decoration: none; font-weight: 600; }
.guide-toc a:hover { color: var(--blue-700); text-decoration: underline; }
@media (min-width: 64rem) {
  .guide-layout:has(.guide-toc) { grid-template-columns: 16rem minmax(0, 46rem); gap: var(--s-12); }
  .guide-toc { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

.guide-body { font-size: 1.0625rem; line-height: 1.7; max-width: none; color: var(--ink-900); }
.guide-body > :first-child { margin-top: 0; }
.guide-body h2 { font-size: var(--fs-h2); margin: var(--s-12) 0 var(--s-4); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.guide-body h3 { font-size: 1.1875rem; margin: var(--s-8) 0 var(--s-3); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.guide-body p { margin: 0 0 var(--s-5); }
.guide-body ul, .guide-body ol { margin: 0 0 var(--s-5); padding-left: 1.4em; display: grid; gap: var(--s-2); }
.guide-body a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 0.15em; }
.guide-body a:hover { color: var(--blue-700); }

.guide-body .guide-checklist { list-style: none; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); gap: var(--s-3); }
.guide-checklist li { display: flex; gap: var(--s-3); align-items: flex-start; }
.guide-checklist .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2em; padding: 0.15rem; border-radius: var(--r-sm); background: var(--green-100); color: var(--green-700); }

.guide-callout { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-md); background: var(--surface); }
.guide-callout p { margin: 0; }
.guide-callout__label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-1) !important; }
.guide-callout__label .icon { width: 1rem; height: 1rem; }
.guide-callout--tip { border-left-color: var(--green-700); background: var(--green-100); }
.guide-callout--tip .guide-callout__label { color: var(--green-700); }
.guide-callout--warning { border-left-color: var(--amber-600); background: var(--amber-100); }
.guide-callout--warning .guide-callout__label { color: #7a4a00; }
.guide-callout--note .guide-callout__label { color: var(--ink-700); }
.guide-callout--answer { border-left-color: var(--blue-600); background: var(--blue-50); }
.guide-callout--answer .guide-callout__label { color: var(--blue-700); }

.guide-body .table-wrap { margin: 0 0 var(--s-5); }
.guide-table { font-size: var(--fs-md); }
.guide-table th, .guide-table td { vertical-align: top; text-align: left; }
.guide-table tbody th { font-weight: 600; }

.guide-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-10); padding: var(--s-5) var(--s-6); background: var(--navy-900); color: #fff; border-radius: var(--r-lg); }
.guide-cta p { margin: 0; font-weight: 600; font-size: var(--fs-lg); }
.guide-links, .guide-sources { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.guide-links h2, .guide-sources h2 { font-size: 1.25rem; margin: 0 0 var(--s-3); }
.guide-links ul { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.guide-links a { font-weight: 600; }
.guide-sources ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); line-height: 1.5; }
.guide-sources__checked { color: var(--ink-500); white-space: nowrap; }
.guide-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); background: var(--amber-100); border: 1px solid var(--amber-500); border-radius: var(--r-md); font-size: var(--fs-sm); }
.guide-preview .icon { width: 1rem; height: 1rem; }

/* ── Lists of guides ── */
.guide-list { list-style: none; display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; }
.guide-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.guide-card h2 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.guide-card h2 a { color: var(--navy-900); text-decoration: none; }
.guide-card h2 a:hover { color: var(--blue-700); text-decoration: underline; }
.guide-card p { margin: 0; color: var(--ink-700); }
.guide-card p.guide-card__meta { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-600); }
.guide__category { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }