/* Neural Critic public light mode.
   Light mode is intentionally layered rather than pure white: warm page canvas,
   cool editorial cards, bright utility cards, and dark high-contrast CTA surfaces. */

html[data-theme="light"]{
  --nc-light-page:#ecebe6;
  --nc-light-page-2:#f2f1ed;
  --nc-light-surface:#f8f8f5;
  --nc-light-surface-cool:#eef2f4;
  --nc-light-surface-strong:#e4eaee;
  --nc-light-white:#fff;
  --nc-light-text:#171b22;
  --nc-light-text-soft:#303944;
  --nc-light-muted:#66717d;
  --nc-light-faint:#87919c;
  --nc-light-line:#cfd4d6;
  --nc-light-line-soft:#dde1e2;
  --nc-light-shadow:0 18px 50px rgba(39,46,55,.08);
  --nc-light-shadow-soft:0 10px 28px rgba(39,46,55,.055);
}

html[data-theme="light"] body{
  color:var(--nc-light-text)!important;
  background:
    radial-gradient(circle at 9% 5%,rgba(69,204,231,.08),transparent 25%),
    radial-gradient(circle at 88% 18%,rgba(111,91,255,.06),transparent 24%),
    linear-gradient(180deg,var(--nc-light-page-2),var(--nc-light-page))!important;
}
html[data-theme="light"] body:before{
  opacity:.08!important;
  background-image:
    linear-gradient(rgba(28,34,42,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,34,42,.09) 1px,transparent 1px)!important;
}

/* Header: bright, but not blown out. */
html[data-theme="light"] header{
  background:rgba(248,248,245,.94)!important;
  color:var(--nc-light-text)!important;
  border-bottom-color:#cfd5d7!important;
  box-shadow:0 8px 24px rgba(45,51,58,.05)!important;
}
html[data-theme="light"] header .brand span,
html[data-theme="light"] header nav a,
html[data-theme="light"] header .menu,
html[data-theme="light"] header .search{color:#20262d!important}
html[data-theme="light"] header .brand strong{color:#0aa7c2!important}
html[data-theme="light"] header .brand em{color:#7a858f!important}
html[data-theme="light"] header nav a:hover{color:#0799b3!important}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .reader-account-button{
  background:#f1f3f3!important;
  color:#36424d!important;
  border-color:#cbd2d5!important;
}

/* General light cards gain visible depth instead of all merging into white. */
html[data-theme="light"] .work-side-card,
html[data-theme="light"] .category-side-card,
html[data-theme="light"] .search-result,
html[data-theme="light"] .category-card,
html[data-theme="light"] .work-author-card,
html[data-theme="light"] .work-toc,
html[data-theme="light"] .reader-auth-card{
  background:linear-gradient(145deg,var(--nc-light-white),#f6f7f5)!important;
  border-color:var(--nc-light-line)!important;
  box-shadow:var(--nc-light-shadow-soft)!important;
  color:var(--nc-light-text)!important;
}
html[data-theme="light"] .work-side-card p,
html[data-theme="light"] .category-side-card p,
html[data-theme="light"] .category-card p,
html[data-theme="light"] .search-result p,
html[data-theme="light"] .work-author-card p{color:var(--nc-light-muted)!important}

/* Article reading canvas and supporting cards. */
html[data-theme="light"] #article.work-article-page{
  color:var(--nc-light-text)!important;
}
html[data-theme="light"] #article.work-article-page>.article-deck,
html[data-theme="light"] #article.work-article-page .article-meta,
html[data-theme="light"] #article.work-article-page .work-breadcrumb,
html[data-theme="light"] #article.work-article-page .work-read-time{color:var(--nc-light-muted)!important}
html[data-theme="light"] #article.work-article-page .article-body,
html[data-theme="light"] #article.work-article-page .article-body p,
html[data-theme="light"] #article.work-article-page .article-body li{color:#242a31!important}
html[data-theme="light"] #article.work-article-page .article-body h2,
html[data-theme="light"] #article.work-article-page .article-body h3{color:#14191f!important}

html[data-theme="light"] #article.work-article-page .quick-read,
html[data-theme="light"] #article.work-article-page .work-quick-read{
  background:linear-gradient(135deg,#edf4f6,#edf0f8)!important;
  border-color:#c7d6dc!important;
  box-shadow:var(--nc-light-shadow-soft)!important;
  color:var(--nc-light-text-soft)!important;
}
html[data-theme="light"] #article.work-article-page .work-quick-read p{color:#46515c!important}

/* Ranked entries: cool editorial surface with strong dark typography. */
html[data-theme="light"] #article.ranked-list-page .ranked-card,
html[data-theme="light"] .ranked-entry-card,
html[data-theme="light"] .ranked-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(31,188,215,.08),transparent 34%),
    linear-gradient(145deg,#f5f7f7,#e9eef1)!important;
  color:var(--nc-light-text)!important;
  border-color:#cbd4d9!important;
  box-shadow:0 18px 46px rgba(38,48,58,.085)!important;
}
html[data-theme="light"] #article.ranked-list-page .ranked-card h2,
html[data-theme="light"] #article.ranked-list-page .ranked-card h3,
html[data-theme="light"] .ranked-entry-card h2,
html[data-theme="light"] .ranked-entry-card h3,
html[data-theme="light"] .ranked-card h2,
html[data-theme="light"] .ranked-card h3{color:#18202a!important}
html[data-theme="light"] #article.ranked-list-page .ranked-card>p:not(.ranked-subtitle){color:#29333d!important}
html[data-theme="light"] #article.ranked-list-page .ranked-subtitle{color:#299eb2!important}
html[data-theme="light"] #article.ranked-list-page .ranked-meta span{
  background:#f9faf8!important;
  color:#596671!important;
  border-color:#cdd5d9!important;
}
html[data-theme="light"] #article.ranked-list-page .ranked-card figcaption{
  background:#e6ebed!important;
  color:#59646e!important;
}

/* Reader Thread: a soft distinct zone, not another white rectangle. */
html[data-theme="light"] .article-thread{
  background:linear-gradient(145deg,#f8f8f4,#f1f3f1)!important;
  color:var(--nc-light-text)!important;
  border-color:#ccd2d2!important;
  box-shadow:var(--nc-light-shadow)!important;
}
html[data-theme="light"] .thread-identity{
  background:#eef2f2!important;
  color:var(--nc-light-text)!important;
  border-color:#ccd4d5!important;
}
html[data-theme="light"] .thread-form{
  background:#f5f6f3!important;
  color:var(--nc-light-text)!important;
  border-color:#ccd3d4!important;
}
html[data-theme="light"] .article-thread textarea,
html[data-theme="light"] .article-thread input{
  background:#fbfbf8!important;
  color:#1b2229!important;
  border-color:#cbd2d3!important;
}
html[data-theme="light"] .article-thread textarea::placeholder,
html[data-theme="light"] .article-thread input::placeholder{color:#7b8791!important}
html[data-theme="light"] .community-comment{border-top-color:#d3d8d9!important}
html[data-theme="light"] .community-comment-user strong,
html[data-theme="light"] .community-empty strong{color:#182029!important}
html[data-theme="light"] .community-comment-user small,
html[data-theme="light"] .community-empty,
html[data-theme="light"] .community-loading{color:#6f7a84!important}
html[data-theme="light"] .community-comment-body{color:#303942!important}
html[data-theme="light"] .community-login-note{
  background:#e9eef0!important;
  color:#596671!important;
  border-color:#cbd5d8!important;
}

/* Review light mode keeps its own cool panel and dark type. */
html[data-theme="light"] #article.work-review-page>.review-parity-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(19,175,205,.09),transparent 35%),
    linear-gradient(135deg,#f2f5f7,#e7edf1)!important;
  border-color:#c8d1d7!important;
  box-shadow:var(--nc-light-shadow)!important;
}
html[data-theme="light"] .review-parity-main>h2,
html[data-theme="light"] .review-parity-detail strong,
html[data-theme="light"] .review-parity-proscons li{color:#172029!important}

/* Newsletter / subscription surfaces intentionally stay dark in light mode.
   This creates contrast and keeps their white copy legible. */
html[data-theme="light"] .newsletter,
html[data-theme="light"] .work-weekly-card,
html[data-theme="light"] .category-weekly,
html[data-theme="light"] .work-newsletter-band{
  background:
    radial-gradient(circle at 100% 0%,rgba(54,213,235,.18),transparent 34%),
    linear-gradient(145deg,#11192a,#101522 62%,#13232d)!important;
  color:#f5f8ff!important;
  border-color:#26394a!important;
  box-shadow:0 18px 45px rgba(25,31,40,.16)!important;
}
html[data-theme="light"] .newsletter h2,
html[data-theme="light"] .newsletter h3,
html[data-theme="light"] .newsletter strong,
html[data-theme="light"] .work-weekly-card h2,
html[data-theme="light"] .work-weekly-card h3,
html[data-theme="light"] .work-weekly-card strong,
html[data-theme="light"] .category-weekly h2,
html[data-theme="light"] .category-weekly h3,
html[data-theme="light"] .work-newsletter-band h2,
html[data-theme="light"] .work-newsletter-band h3,
html[data-theme="light"] .work-newsletter-band strong{color:#f6f8ff!important}
html[data-theme="light"] .newsletter p,
html[data-theme="light"] .work-weekly-card p,
html[data-theme="light"] .category-weekly p,
html[data-theme="light"] .work-newsletter-band p{color:#aeb8c8!important}
html[data-theme="light"] .newsletter small,
html[data-theme="light"] .work-weekly-card small,
html[data-theme="light"] .category-weekly small,
html[data-theme="light"] .work-newsletter-band small{color:#54def3!important}
html[data-theme="light"] .newsletter input,
html[data-theme="light"] .work-weekly-card input,
html[data-theme="light"] .category-weekly input,
html[data-theme="light"] .work-newsletter-band input{
  background:#f7fafb!important;
  color:#172029!important;
  border-color:#415261!important;
}
html[data-theme="light"] .newsletter input::placeholder,
html[data-theme="light"] .work-weekly-card input::placeholder,
html[data-theme="light"] .category-weekly input::placeholder,
html[data-theme="light"] .work-newsletter-band input::placeholder{color:#798693!important}

/* Footer always remains a dark editorial anchor. */
html[data-theme="light"] footer{
  background:#111318!important;
  color:#f7f8ff!important;
}
html[data-theme="light"] footer .brand span{color:#f7f8ff!important}
html[data-theme="light"] footer .brand strong{color:#54dff7!important}
html[data-theme="light"] footer .brand em{color:#8992a0!important}
html[data-theme="light"] footer .footer>div>p{color:#8f98a6!important}
html[data-theme="light"] footer .footer>div>b{color:#7f8997!important}
html[data-theme="light"] footer .footer>div>a{color:#f5f7fb!important}
html[data-theme="light"] footer .footer>div>a:hover{color:#5ee7ff!important}
html[data-theme="light"] footer .copyright{color:#6f7885!important;border-top-color:#2b3038!important}

/* Loading/error states should never become an empty gap. */
.article-loading-state,
.article-load-error{
  width:min(760px,calc(100% - 32px));
  min-height:300px;
  margin:70px auto;
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  text-align:center;
}
.article-loading-state span{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(94,231,255,.18);
  border-top-color:#55dff7;
  animation:nc-article-spin .8s linear infinite;
}
.article-loading-state strong{font-size:13px;letter-spacing:.04em;color:#8f98b0}
.article-load-error h1{max-width:680px;margin:8px 0;font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.05em}
.article-load-error p{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.article-load-error button,.article-load-error a{border:1px solid #66739c55;border-radius:999px;padding:10px 14px;background:transparent;color:inherit;font-size:9px;font-weight:900;cursor:pointer}
.article-load-error button:hover,.article-load-error a:hover{border-color:#4cdcf3;color:#22a9c2}
@keyframes nc-article-spin{to{transform:rotate(360deg)}}

html[data-theme="light"] .article-loading-state strong{color:#687583}
html[data-theme="light"] .article-load-error{color:#171b22}

@media(prefers-reduced-motion:reduce){.article-loading-state span{animation:none}}

/* ========================================================================== 
   NEURALHUSTLE MOTION PARITY — FEED + THEME CONTROL
   The whole feed capsule breathes; the dot is only a secondary live signal.
   ========================================================================== */
.ticker b{
  transform-origin:center;
  will-change:transform,box-shadow,border-color;
  background:
    linear-gradient(120deg,rgba(119,104,255,.22),rgba(85,231,255,.14)),
    rgba(8,12,28,.94)!important;
  border-color:rgba(164,174,255,.28)!important;
  box-shadow:
    0 7px 18px rgba(3,8,23,.24),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 0 rgba(119,104,255,0)!important;
  animation:ncFeedBreath 4.5s ease-in-out infinite!important;
}
.ticker b::before{
  width:5px!important;
  height:5px!important;
  flex-basis:5px!important;
  opacity:.9;
  box-shadow:0 0 7px rgba(85,231,255,.5)!important;
  animation:ncFeedDotQuiet 4.5s ease-in-out infinite!important;
}

@keyframes ncFeedBreath{
  0%,100%{
    transform:scale(1);
    border-color:rgba(164,174,255,.25);
    box-shadow:
      0 7px 18px rgba(3,8,23,.24),
      0 1px 0 rgba(255,255,255,.10) inset,
      0 0 0 0 rgba(119,104,255,0),
      0 0 0 rgba(85,231,255,0);
  }
  50%{
    transform:scale(1.035);
    border-color:rgba(104,224,255,.55);
    box-shadow:
      0 10px 24px rgba(3,8,23,.30),
      0 1px 0 rgba(255,255,255,.14) inset,
      0 0 0 7px rgba(119,104,255,.10),
      0 0 26px rgba(85,231,255,.22);
  }
}
@keyframes ncFeedDotQuiet{
  0%,100%{opacity:.72;filter:brightness(.95)}
  50%{opacity:1;filter:brightness(1.25)}
}

/* Match the NeuralHustle sun/moon pill language instead of abstract glyphs. */
.theme-toggle{
  min-width:82px!important;
  gap:7px!important;
  padding-inline:13px!important;
}
.theme-toggle span{
  width:16px!important;
  display:grid!important;
  place-items:center!important;
}
.theme-toggle span::before{
  content:"🌙"!important;
  font:400 14px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif!important;
  color:initial!important;
}
.theme-toggle small::after{
  content:"Dark"!important;
  color:#e4e9f4!important;
  font:700 10.5px/1 Inter,system-ui,sans-serif!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
html[data-theme="light"] .theme-toggle{
  background:#fff!important;
  border-color:#d8d4ef!important;
  color:#273443!important;
  box-shadow:0 7px 18px rgba(50,57,80,.07)!important;
}
html[data-theme="light"] .theme-toggle span::before{content:"☀️"!important}
html[data-theme="light"] .theme-toggle small::after{content:"Light"!important;color:#344052!important}

@media(max-width:980px){
  .theme-toggle{min-width:40px!important;padding:0!important}
}
@media(prefers-reduced-motion:reduce){
  .ticker b,.ticker b::before{animation:none!important;transform:none!important}
}