/* Shared reading and input ergonomics. Theme palettes and page geometry stay in each theme. */
:root {
    --blog-reading-leading: 1.85;
    --blog-section-offset: 104px;
    color-scheme: light;
}
:root[data-blog-theme="dark"] { color-scheme: dark; }
/* The reset's 320px body minimum ignores a desktop scrollbar at a 320px viewport. */
html body { min-width: 0; }

/* Position and restoration are owned by PageScrollStability, shared with search and other dialogs. */
html.blog-nav-open body {
    overscroll-behavior: none;
}
/* Floating tools otherwise sit above the menu scrim and intercept outside taps. */
html.blog-nav-open :is(.article-speed-dial, .blog-music, #scroll-to-top-btn, #aiChatToggle) {
    visibility: hidden;
    pointer-events: none;
}

.blog-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100100;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--air-ink, #172033);
    color: var(--air-surface, #fff);
    font: 600 14px/1.5 var(--blog-font-title, sans-serif);
    transform: translateY(-180%);
}
.blog-skip-link:focus { transform: translateY(0); }
/* Theme anchor resets load later; keep the skip link legible on its inverted surface. */
html body a.blog-skip-link { color: var(--air-surface, #fff); }
.blog-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: 32px; border-radius: inherit; background: var(--air-primary-soft, #e7edf7); color: var(--air-primary, #3e76cd); font: 600 16px/1 var(--blog-font-title, sans-serif); }

#article-content {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: var(--blog-reading-leading);
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}
#article-content :is(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: var(--blog-section-offset);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
#article-content > :is(h2, h3, h4) {
    margin-block: 1.8em .7em;
    line-height: 1.45;
}
#article-content > p { margin-block: 0 1.25em; }
#article-content :is(ul, ol) { padding-inline-start: 1.65em; }
#article-content li + li { margin-top: .35em; }
#article-content li > :is(ul, ol) { margin-block: .4em; }
#article-content > :first-child { margin-top: 0; }
#article-content > :last-child { margin-bottom: 0; }
#article-content img { max-width: 100%; height: auto; }

/* Keep code and tables scrollable locally, including with a hardware keyboard. */
#article-content :is(.responsive-table, pre) {
    max-width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--air-muted, #8491a5) transparent;
    -webkit-overflow-scrolling: touch;
}
#article-content .responsive-table { margin-block: 1.5em; }
#article-content .responsive-table > table { margin-block: 0; }
#article-content pre { overflow-x: auto; overflow-wrap: normal; }
#article-content pre code { overflow-wrap: normal; word-break: normal; }

.post-reading-nav-card {
    min-width: 0;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.post-reading-nav-card :is(.post-reading-nav-title, strong) { overflow-wrap: anywhere; }

.ai-chat-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100030;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    background: rgba(10, 18, 27, .52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ai-chat-confirm-dialog {
    width: min(360px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 26px;
    border: 1px solid var(--air-line, #dfe5ed);
    border-radius: var(--air-radius-xl, 20px);
    background: var(--air-surface-solid, #fff);
    color: var(--air-ink, #172033);
    box-shadow: var(--air-shadow, 0 24px 70px rgba(10, 18, 27, .2));
    text-align: center;
    animation: blog-confirm-in .2s ease both;
}
.ai-chat-confirm-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    border: 1px solid rgba(213, 69, 69, .22);
    border-radius: var(--air-radius-sm, 12px);
    color: #d64545;
    background: rgba(213, 69, 69, .08);
    font-size: 18px;
}
.ai-chat-confirm-dialog h3 { margin: 0 0 8px; color: inherit; font-size: 20px; line-height: 1.4; }
.ai-chat-confirm-dialog p { margin: 0; color: var(--air-muted, #68758a); font-size: 14px; line-height: 1.7; }
.ai-chat-confirm-actions { display: flex; gap: 12px; margin-top: 24px; }
.ai-chat-confirm-actions button {
    flex: 1;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--air-line, #dfe5ed);
    border-radius: var(--air-radius-sm, 10px);
    background: var(--air-surface-solid, #fff);
    color: var(--air-ink, #172033);
    font: 600 14px/1.5 var(--blog-font-title, sans-serif);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.ai-chat-confirm-actions #confirm-ok { background: #d64545; border-color: #d64545; color: #fff; }
.ai-chat-confirm-actions button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .ai-chat-confirm-actions button:hover { opacity: .86; } }
@keyframes blog-confirm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
    :root { --blog-section-offset: 88px; }
    #article-content { --blog-reading-leading: 1.8; }
    #article-content > :is(h2, h3, h4) { margin-top: 1.5em; }
    .el-pagination .item { min-width: 40px; min-height: 44px; }
    .page-jump :is(input, button) { min-height: 44px; }
    .code-header .code-copy { min-height: 36px; padding-inline: 12px; }
    .navbar-mobile-menu .icon-menu[role="button"] { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-chat-confirm-dialog { animation: none; }
    .ai-chat-confirm-actions button { transition: none; }
    .post-reading-nav-card { transition: none; }
    .blog-skip-link { scroll-behavior: auto; }
}

/* County location and broader weather coverage remain distinct at every size. */
.weather-source-note { margin: 6px 0 0; color: inherit; opacity: .72; font-size: 11px; line-height: 1.6; font-style: normal; white-space: normal; overflow-wrap: anywhere; }