/* The knowledge layer inherits DML's fonts, dark surfaces and mint/cyan accents. */
.blog-main { padding-block: var(--space-6) var(--section-space); }
.guide-breadcrumb { color: var(--color-text-secondary); font-size: var(--text-sm); margin-block-end: var(--space-8); }
.guide-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); list-style: none; padding: 0; }
.guide-breadcrumb li + li::before { content: '/'; margin-inline-end: var(--space-3); color: var(--color-text-secondary); }
.guide-breadcrumb li { overflow-wrap: anywhere; }
.blog-hero { text-align: center; padding-block: var(--space-6) var(--space-12); }
.blog-hero h1 { max-width: 22ch; margin-inline: auto; }
.blog-hero > p { max-width: 67ch; margin: var(--space-6) auto 0; color: var(--color-text-secondary); font-size: var(--text-lg); }
.blog-section { margin-block: var(--space-12); }
.blog-section > h2, .blog-index-header { margin-block-end: var(--space-6); }
.blog-section h2 { font-size: var(--text-2xl); }
.blog-index-header { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); }
.blog-search { width: min(100%, 22rem); }
.blog-search label { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-block-end: var(--space-2); }
.blog-search input { width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--control-radius); color: var(--color-text); background: var(--color-surface); font: inherit; caret-color: var(--color-mint); }
.blog-search input::placeholder { color: #a1afb8; opacity: 1; }
.guide-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-6); }
.guide-filters button { min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: #a1afb8; font: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--duration-fast), color var(--duration-fast); }
.guide-filters button:hover { border-color: var(--color-mint); color: var(--color-text); }
.guide-filters button[aria-pressed="true"] { background: color-mix(in srgb, var(--color-mint) 9%, var(--color-surface)); border-color: var(--color-mint); color: var(--color-mint); }
.guide-results { color: var(--color-text-secondary); font-size: var(--text-sm); margin-block-end: var(--space-4); font-variant-numeric: tabular-nums; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.guide-card { min-width: 0; display: flex; flex-direction: column; align-items: start; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: transform var(--duration-standard) var(--ease-standard), border-color var(--duration-standard); }
.guide-card:hover, .guide-card:focus-within { border-color: color-mix(in srgb, var(--color-mint) 65%, var(--color-border)); transform: translateY(-3px); }
.guide-card h3 { font-size: var(--text-xl); line-height: var(--leading-snug); margin-block: var(--space-3); overflow-wrap: anywhere; }
.guide-card h3 a { text-decoration: none; }
.guide-card__category, .guide-category { color: var(--color-mint); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.guide-card__excerpt { color: var(--color-text-secondary); margin-block-end: var(--space-6); }
.guide-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: #a1afb8; font-size: var(--text-xs); margin-block: auto var(--space-4); font-variant-numeric: tabular-nums; }
.guide-card__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-cyan); font-size: var(--text-sm); text-decoration: none; }
.guide-card__image { width: 100%; height: 9rem; object-fit: cover; border-radius: var(--radius-sm); margin-block-end: var(--space-6); }
.guide-grid--featured:has(> :only-child) { grid-template-columns: 1fr; }
.guide-grid--featured:has(> :only-child) .guide-card { max-width: none; }
.guide-grid--featured:has(> :only-child) h3 { font-size: var(--text-2xl); max-width: 48ch; }
.guide-grid--featured:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-card--featured { background: color-mix(in srgb, var(--color-cyan) 3%, var(--color-surface)); }
.guide-empty { padding: var(--space-12) var(--space-6); border-block: 1px solid var(--color-border); }
.guide-empty h3 { font-size: var(--text-xl); max-width: none; }
.guide-empty p { margin-block: var(--space-3) var(--space-6); color: var(--color-text-secondary); }
.guide-empty button { margin-block-start: var(--space-4); }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.guide-button { display: inline-flex; justify-content: center; align-items: center; min-height: var(--control-height); padding: var(--space-3) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--control-radius); background: var(--color-surface-elevated); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-decoration: none; text-align: center; cursor: pointer; }
.guide-button:hover { border-color: var(--color-mint); background: var(--color-surface); }
.guide-button--primary { background: var(--brand-gradient); color: var(--color-background); border-color: transparent; }
.guide-button--primary:hover { background: var(--color-cyan); color: var(--color-background); }
.guide-load { margin-block-start: var(--space-8); }
.guide-trust { border-top: 1px solid var(--color-border); padding-block-start: var(--space-8); margin-block: var(--space-12); }
.guide-trust h2 { font-size: var(--text-xl); max-width: none; }
.guide-trust p { color: var(--color-text-secondary); margin-block: var(--space-3) var(--space-4); }
.guide-trust a, .guide-sources a, .guide-body a:not(.guide-button), .guide-chart-link a { color: var(--color-cyan); }
.guide-article { --guide-measure: 72ch; font-size: var(--text-lg); }
.guide-article__header, .guide-article__end { max-width: var(--guide-measure); margin-inline: auto; }
.guide-article__header h1 { margin-block: var(--space-4) var(--space-6); max-width: 24ch; }
.guide-answer { background: color-mix(in srgb, var(--color-mint) 5%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-mint) 35%, var(--color-border)); border-radius: var(--radius-lg); padding: var(--space-6); margin-block: var(--space-6); }
.guide-answer__label { color: var(--color-mint); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); margin-block-end: var(--space-2); }
.guide-summary { font-size: var(--text-lg); color: var(--color-text-secondary); }
.guide-byline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-block: var(--space-6) var(--space-12); font-size: var(--text-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.guide-hero-image { max-width: 64rem; margin: 0 auto var(--space-12); }
.guide-hero-image img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.guide-hero-image figcaption { color: var(--color-text-secondary); font-size: var(--text-sm); margin-block-start: var(--space-3); }
.guide-body { display: grid; grid-template-columns: minmax(0, 1fr) min(100%, var(--guide-measure)) minmax(0, 1fr); font-size: var(--text-lg); line-height: 1.8; overflow-wrap: anywhere; }
.guide-body > * { grid-column: 2; min-width: 0; }
.guide-body > p, .guide-body > ul, .guide-body > ol { margin-block: 0 var(--space-6); }
.guide-body h2 { font-size: var(--text-2xl); margin-block: var(--space-12) var(--space-6); }
.guide-body h3, .guide-body h4 { margin-block: var(--space-8) var(--space-4); }
.guide-body h3 { font-size: var(--text-xl); }
.guide-body ul, .guide-body ol { padding-inline-start: var(--space-6); }
.guide-body li + li { margin-block-start: var(--space-2); }
.guide-body code { font-size: .9em; background: var(--color-surface-elevated); padding: .15em .3em; border-radius: var(--radius-xs); }
.guide-body > .guide-wide { grid-column: 1 / -1; margin-block: var(--space-6) var(--space-8); }
.guide-table { max-width: 100%; overflow-x: auto; margin-block-end: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base); }
.guide-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { padding: var(--space-4); text-align: start; border-bottom: 1px solid var(--color-border); min-width: 8rem; vertical-align: top; }
.guide-table th { background: var(--color-surface-elevated); font-weight: var(--font-weight-semibold); }
.guide-table tr:last-child td { border-bottom: 0; }
.guide-callout { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-block: var(--space-4) var(--space-8); }
.guide-callout h3 { margin-block: 0 var(--space-3); }
.guide-callout p + p { margin-block-start: var(--space-4); }
.guide-tool-cta { padding: var(--space-8); margin-block: var(--space-6) var(--space-8); background: var(--color-surface-elevated); border-radius: var(--radius-lg); }
.guide-tool-cta h2 { margin-block: 0 var(--space-4); font-size: var(--text-2xl); }
.guide-tool-cta p { color: var(--color-text-secondary); margin-block-end: var(--space-6); }
.guide-tool-cta .guide-actions { font-size: var(--text-base); }
.guide-article__end h2 { font-size: var(--text-2xl); margin-block: var(--space-12) var(--space-6); }
.guide-article__end .guide-trust h2 { font-size: var(--text-xl); margin-block: 0 var(--space-4); }
.guide-sources ul { padding-inline-start: var(--space-6); }
.guide-sources li { margin-block: var(--space-3); overflow-wrap: anywhere; }
.guide-tool-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.guide-tool-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-cyan); }
.guide-tool-links a:hover { border-color: var(--color-cyan); }
.guide-chart-link { margin-block-start: var(--space-6); }
.blog-page :focus-visible, .guide-card :focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 4px; }
.blog-page [hidden], .guide-card[hidden] { display: none !important; }
@media (max-width: 64rem) {
    .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
    .blog-hero { padding-block: var(--space-4) var(--space-8); }
    .blog-hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
    .blog-index-header { display: block; }
    .blog-search { width: 100%; margin-block-start: var(--space-6); }
    .guide-grid, .guide-grid--featured:has(> :nth-child(2):last-child), .guide-tool-links { grid-template-columns: 1fr; }
    .guide-card { padding: var(--space-6); }
    .guide-empty { padding-inline: 0; padding-block: var(--space-8); }
    .guide-article__header h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .guide-tool-cta { padding: var(--space-6); }
    .guide-tool-cta .guide-button { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .guide-card, .guide-filters button { transition: none; }
    .guide-card:hover, .guide-card:focus-within { transform: none; }
}
@media print {
    .blog-page .site-header, .blog-page .site-footer, .guide-tool-cta, .guide-filters, .blog-search, .guide-load { display: none; }
    .blog-page { color: #111; background: white; }
    .guide-body { display: block; }
    .guide-table { overflow: visible; }
    .guide-card[hidden] { display: flex !important; }
}