/* Fallback theme only. Case studies (main.cs-page) and experiments marked data-own-theme set their own colours and are left alone. */
:where(html:not(.dark)) :where(body:not([data-direction="flight"]):not([data-own-theme]):not(:has(main.cs-page))){background:#f7f7f7!important;color:#242424!important}
:where(html.dark) :where(body:not([data-direction="flight"]):not([data-own-theme]):not(:has(main.cs-page))){background:#111!important;color:#e9e9e7!important}
html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main>h1,html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main>a[href*="playground"]{color:#242424!important}
html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main>.grid>div[style*="grid-column"]>h1{color:#242424!important}
html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main>.grid>div[style*="grid-column"]>a{color:#666!important}
html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main .label-bar{color:#242424!important}
html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main .label-bar .card-title{color:#242424!important}
html:root:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) main .label-bar .card-date{color:#666!important}
html:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) .proto-header .proto-title{color:#242424!important}
html:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) .proto-header .proto-back{color:#777!important}
html:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) .proto-label{background:#eeeee9!important;color:#242424!important}
html:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) .proto-label .proto-name{color:#242424!important}
html:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) .proto-label .proto-hint{color:#777!important}
html:not(.dark) body:not([data-own-theme]):not(:has(main.cs-page)) .proto-canvas{background:#f2f2ed!important}
html.dark body:not([data-own-theme]):has(>main.proto-main){background:#111!important;color:#e9e9e7!important}
a[href*="medium.com"]{display:inline-block;white-space:nowrap}
html:root.dark .blog-desc,html:root.dark .blog-desc a,html:root.dark .article-nav-title,html:root.dark .article-nav-label{color:#aaa!important}
html:root body #dark-toggle,html:root body #top-controls #dark-toggle{width:44px!important;height:44px!important;min-width:44px!important;pointer-events:auto!important;display:flex!important;align-items:center!important;justify-content:center!important}
html:root body #dark-toggle svg,html:root body #dark-toggle svg *{pointer-events:none!important}
.philosophies .about-fresh-icon{width:24px;height:24px;object-fit:contain;display:block;opacity:.6}
.chat-btn-label{display:flex;align-items:center;gap:10px}
.chat-btn-label .about-fresh-icon{width:22px;height:22px;object-fit:contain}
html.dark .about-fresh-icon{filter:invert(1)}

/* Writing articles: quiet but legible secondary text (was #bbb–#ccc on #f7f7f7 and #2a2a2a–#444 on #111). */
html:root body .article-sidebar .sidebar-section-label,html:root body .article-nav-label,html:root body .article-meta{color:#808080!important}
html:root body .article-sidebar .sidebar-back,html:root body .article-sidebar .sidebar-list a:not(.is-current){color:#666}
html:root body .article-sidebar .sidebar-toc .sidebar-list a:not(.is-active-section){color:#808080;border-left-color:#e2e2e2}
html:root body .article-sidebar .sidebar-toc .sidebar-list a.is-active-section{color:#1b1b1b;border-left-color:#999}
html:root.dark body .article-sidebar .sidebar-section-label,html:root.dark body .article-nav-label,html:root.dark body .article-meta{color:#7a7a7a!important}
html:root.dark body .article-sidebar .sidebar-back,html:root.dark body .article-sidebar .sidebar-list a:not(.is-current){color:#999}
html:root.dark body .article-sidebar .sidebar-toc .sidebar-list a:not(.is-active-section){color:#7a7a7a;border-left-color:#2a2a2a}
html:root.dark body .article-sidebar .sidebar-toc .sidebar-list a.is-active-section{color:#d0d0d0;border-left-color:#666}

/* Dark-only experiments keep a light corner clock in either theme. */
body[data-own-theme] #nairobi-corner,body[data-own-theme] #nairobi-corner *{color:#ededed!important}
body[data-own-theme] #nairobi-corner #nairobi-time,body[data-own-theme] #nairobi-corner #nairobi-wx{color:#9a9a9a!important}

/* Article section headings: #444 on #111 in dark mode was close to invisible. */
html:root body .article-body h2,html:root body .article-body h3{color:#7a7a7a!important}
html:root.dark body .article-body h2,html:root.dark body .article-body h3{color:#8a8a8a!important}

/* Blog list years, eyebrow and the Design back link were #aaa–#bbb on #f7f7f7 and #383838 on #111. */
html:root body .blog-row-year{color:#8a8a8a!important}
html:root.dark body .blog-row-year{color:#6e6e6e!important}
html:root:not(.dark) body .blog-eyebrow,html:root:not(.dark) body .design-back{color:#808080!important}

/* Dark case studies (every cs page except the cream Yellowcard onboarding): keep the weather readable. */
body:has(main.cs-page):not(:has(.ob-proto)) #nairobi-wx{color:rgba(240,240,240,.45)!important}