/* UX upgrade prototype 2026-11 (theme copy only, not deployed) */
:root{--bs-ux-bg:#fafafa;--bs-ux-fg:#26241e;--bs-ux-muted:#595959;--bs-ux-card:#f2f2f0;--bs-ux-line:#e3e3e0}
/* A11y: lift tiny grey meta text to >=13px and WCAG AA 4.5:1 contrast */
.bs-post-meta,.bs-card-excerpt,.bs-search-hint{color:var(--bs-ux-muted)!important}
.bs-post-meta{font-size:max(13px,1em)}
:focus-visible{outline:2px solid #1a73e8!important;outline-offset:2px}
/* Skeleton placeholder while lazy images load */
.bs-card-image img,.bs-article-body img{background:linear-gradient(90deg,#eee 25%,#f6f6f6 50%,#eee 75%);background-size:200% 100%;animation:bsux-shimmer 1.4s infinite}
.bs-card-image img.bsux-loaded,.bs-article-body img.bsux-loaded{animation:none;background:none}
@keyframes bsux-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Search keyword highlight */
mark.bsux-hl{background:#ffe86b;color:inherit;padding:0 .1em;border-radius:2px}
/* Brand archive timeline: year headers */
.bsux-year{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:32px 0 8px;font:600 22px/1.2 inherit;letter-spacing:.02em}
.bsux-year::after{content:"";flex:1;height:1px;background:var(--bs-ux-line)}
.bsux-year small{font-size:13px;font-weight:400;color:var(--bs-ux-muted)}
/* Mobile reading: comfortable measure and paragraph rhythm */
@media (max-width:640px){.bs-article-body p{font-size:17px;line-height:1.85;margin:0 0 1.15em;letter-spacing:.01em}.bs-article-body h2{font-size:21px;margin-top:1.8em}}
/* Back-to-top */
.bsux-top{position:fixed;right:16px;bottom:24px;width:44px;height:44px;border-radius:50%;border:0;background:#111;color:#fff;font-size:18px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.bsux-top.on{opacity:.85;pointer-events:auto}
/* Comments prototype */
.bs-comments{margin:48px auto;border-top:1px solid var(--bs-ux-line);padding-top:32px}
.bs-comments h2{font-size:22px;margin:0 0 16px}
.bsux-cm-box{display:flex;gap:12px;align-items:flex-start;background:var(--bs-ux-card);border-radius:12px;padding:16px}
.bsux-cm-box textarea{flex:1;min-height:84px;border:1px solid var(--bs-ux-line);border-radius:8px;padding:10px;font:inherit;background:#fff;color:#111;resize:vertical}
.bsux-cm-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--bs-ux-muted)}
.bsux-cm-actions button{background:#111;color:#fff;border:0;border-radius:999px;padding:8px 18px;font:inherit}
.bsux-cm-list{list-style:none;padding:0;margin:24px 0 0}
.bsux-cm-list li{padding:16px 0;border-bottom:1px solid var(--bs-ux-line)}
.bsux-cm-list b{font-size:14px}.bsux-cm-list time{font-size:12px;color:var(--bs-ux-muted);margin-left:8px}
.bsux-cm-list p{margin:6px 0 0;line-height:1.75}
.bsux-cm-list .ed{display:inline-block;font-size:11px;background:#111;color:#fff;border-radius:3px;padding:0 5px;margin-left:6px}
/* Dark mode (system preference) */
@media (prefers-color-scheme:dark){
 :root{--bs-ux-bg:#121212;--bs-ux-fg:#e8e6e1;--bs-ux-muted:#a8a8a8;--bs-ux-card:#1e1e1e;--bs-ux-line:#333}
 html,body,.wp-site-blocks,.bs-site,header,footer,.bs-shell{background:var(--bs-ux-bg)!important;color:var(--bs-ux-fg)!important}
 h1,h2,h3,h4,p,li,a,span,time,blockquote,figcaption{color:inherit}
 [class*="hero"],[class*="card"]:not(.bs-card-image),.bs-search-panel,section[class*="head"]{background-color:var(--bs-ux-card)!important}
 img{filter:brightness(.92)}
 header img[src*="logo"],header a[href$="/"] img,header svg,.bs-site-logo img{filter:invert(1)}
 header,.bs-header,[class*="site-header"]{background:var(--bs-ux-bg)!important;border-color:var(--bs-ux-line)!important}
 header button,header .bs-reader-login,[class*="chip"],[class*="filter"] a,[class*="tabs"] a,.bs-search-kinds a{background:#2a2a2a!important;color:var(--bs-ux-fg)!important;border-color:#3a3a3a!important}
 a{color:var(--bs-ux-fg)}
 input,textarea{background:#1b1b1b!important;color:#eee!important;border-color:#3a3a3a!important}
 header svg path{fill:currentColor}
 .bsux-cm-box textarea{background:#111;color:#eee}
 .bsux-top,.bsux-cm-actions button{background:#e8e6e1;color:#111}
 mark.bsux-hl{background:#7a6400;color:#fff}
 .bs-masthead,.bs-lead-copy,.bs-curated-radar,.bs-directory-item,.bs-search-form,.bs-about-values,.ab-val,.mx,.bs-about-values li,[class*="radar"]{background:var(--bs-ux-card)!important;color:var(--bs-ux-fg)!important;border-color:var(--bs-ux-line)!important}
 .bs-lead-copy *,.bs-curated-radar *,.bs-about-values *,.mx *,.kicker,.ab-lede,.bs-curated-card-reason{color:inherit!important}
 .bs-lead-copy a.bs-read-link,.bs-lead-copy .bs-button{background:#e8e6e1!important;color:#111!important}
 .bs-card-image,.bs-lead-visual,.bs-video-feature{background-color:#1e1e1e!important}
 .bs-footer-qrcode{background:#fff!important}
}
/* Dark mode fixes 2026-11-01: comment login button, About contact list */
@media (prefers-color-scheme:dark){
 .bs-comment-login,.bs-comments .bs-comment-submit{background:#e8e6e1!important;color:#111!important;border:0!important}
 .bs-comment-login:hover,.bs-comments .bs-comment-submit:hover{background:#fff!important;color:#111!important}
 .bs-static-about .clist li{background:var(--bs-ux-card)!important;color:var(--bs-ux-fg)!important;border:1px solid var(--bs-ux-line)}
 .bs-static-about .clist li .cl{color:var(--bs-ux-muted)!important}
 .bs-static-about .clist li a{color:var(--bs-ux-fg)!important}
}