/* Portfolio theme clean fix
   Loaded last. Purpose:
   1) Keep light mode pure white.
   2) Restore dark mode after earlier white-background overrides.
   3) Neutralize old warm paper surfaces without using background images.
*/

:root {
  color-scheme: light dark;
  --portfolio-white: #ffffff;
  --portfolio-black: #050505;
  --portfolio-dark-surface: #0d0d0d;
  --portfolio-dark-text: #f2f2f2;
  --portfolio-dark-muted: rgba(255, 255, 255, 0.62);
  --portfolio-light-muted: rgba(0, 0, 0, 0.45);
}

/* LIGHT / DEFAULT: pure white, not warm paper. */
html,
body {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html:not(.theme-dark):not([data-theme="dark"]) body:not(.theme-dark):not([data-theme="dark"]),
body:not(.theme-dark):not([data-theme="dark"]) {
  --page-bg: #ffffff;
  --surface-bg: #ffffff;
  --paper-bg: #ffffff;
  --bg: #ffffff;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Kill old paper surfaces in light mode. */
html:not([data-theme="dark"]) .site-header,
html:not([data-theme="dark"]) .site-footer,
html:not([data-theme="dark"]) .home-layout,
html:not([data-theme="dark"]) .page-layout,
html:not([data-theme="dark"]) .work-layout,
html:not([data-theme="dark"]) .work-rail,
html:not([data-theme="dark"]) .series-section,
html:not([data-theme="dark"]) .gallery-list,
html:not([data-theme="dark"]) .gallery-list > *,
html:not([data-theme="dark"]) [data-gallery-list] > *,
html:not([data-theme="dark"]) .gallery-card,
body:not([data-theme="dark"]) .site-header,
body:not([data-theme="dark"]) .site-footer,
body:not([data-theme="dark"]) .home-layout,
body:not([data-theme="dark"]) .page-layout,
body:not([data-theme="dark"]) .work-layout,
body:not([data-theme="dark"]) .work-rail,
body:not([data-theme="dark"]) .series-section,
body:not([data-theme="dark"]) .gallery-list,
body:not([data-theme="dark"]) .gallery-list > *,
body:not([data-theme="dark"]) [data-gallery-list] > *,
body:not([data-theme="dark"]) .gallery-card {
  background-color: #ffffff !important;
}

/* DARK: support both html and body theme markers.
   This fixes the common issue where theme.js marks html, but CSS only watched body, or vice versa. */
html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"],
html.theme-dark,
html.theme-dark body,
body.theme-dark {
  --page-bg: #050505;
  --surface-bg: #050505;
  --paper-bg: #050505;
  --bg: #050505;
  --text: #f2f2f2;
  --ink: #f2f2f2;
  --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.18);

  color-scheme: dark;
  background: #050505 !important;
  background-color: #050505 !important;
  color: #f2f2f2 !important;
}

/* Dark surfaces. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .home-layout,
html[data-theme="dark"] .page-layout,
html[data-theme="dark"] .work-layout,
html[data-theme="dark"] .work-rail,
html[data-theme="dark"] main,
html[data-theme="dark"] section,
body[data-theme="dark"] .site-header,
body[data-theme="dark"] .site-footer,
body[data-theme="dark"] .home-layout,
body[data-theme="dark"] .page-layout,
body[data-theme="dark"] .work-layout,
body[data-theme="dark"] .work-rail,
body[data-theme="dark"] main,
body[data-theme="dark"] section,
html.theme-dark .site-header,
html.theme-dark .site-footer,
html.theme-dark .home-layout,
html.theme-dark .page-layout,
html.theme-dark .work-layout,
html.theme-dark .work-rail,
html.theme-dark main,
html.theme-dark section,
body.theme-dark .site-header,
body.theme-dark .site-footer,
body.theme-dark .home-layout,
body.theme-dark .page-layout,
body.theme-dark .work-layout,
body.theme-dark .work-rail,
body.theme-dark main,
body.theme-dark section {
  background: #050505 !important;
  background-color: #050505 !important;
  color: #f2f2f2 !important;
}

/* Keep images normal. */
html[data-theme="dark"] img,
body[data-theme="dark"] img,
html.theme-dark img,
body.theme-dark img {
  filter: none !important;
}

/* Dark links and controls. */
html[data-theme="dark"] a,
html[data-theme="dark"] button,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .rail-brand,
html[data-theme="dark"] .primary-nav a,
html[data-theme="dark"] .rail-nav a,
html[data-theme="dark"] .theme-selector button,
html[data-theme="dark"] .theme-selector span,
body[data-theme="dark"] a,
body[data-theme="dark"] button,
body[data-theme="dark"] .brand,
body[data-theme="dark"] .rail-brand,
body[data-theme="dark"] .primary-nav a,
body[data-theme="dark"] .rail-nav a,
body[data-theme="dark"] .theme-selector button,
body[data-theme="dark"] .theme-selector span,
html.theme-dark a,
html.theme-dark button,
html.theme-dark .brand,
html.theme-dark .rail-brand,
html.theme-dark .primary-nav a,
html.theme-dark .rail-nav a,
html.theme-dark .theme-selector button,
html.theme-dark .theme-selector span,
body.theme-dark a,
body.theme-dark button,
body.theme-dark .brand,
body.theme-dark .rail-brand,
body.theme-dark .primary-nav a,
body.theme-dark .rail-nav a,
body.theme-dark .theme-selector button,
body.theme-dark .theme-selector span {
  color: #f2f2f2 !important;
}

/* Muted dark text. */
html[data-theme="dark"] .intro-column h1,
html[data-theme="dark"] .series-index a,
html[data-theme="dark"] .side-metadata,
html[data-theme="dark"] .scroll-note,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .rail-place,
html[data-theme="dark"] .scene,
html[data-theme="dark"] .script-page,
html[data-theme="dark"] .script-copy,
html[data-theme="dark"] .work-meta,
body[data-theme="dark"] .intro-column h1,
body[data-theme="dark"] .series-index a,
body[data-theme="dark"] .side-metadata,
body[data-theme="dark"] .scroll-note,
body[data-theme="dark"] .site-footer,
body[data-theme="dark"] .rail-place,
body[data-theme="dark"] .scene,
body[data-theme="dark"] .script-page,
body[data-theme="dark"] .script-copy,
body[data-theme="dark"] .work-meta,
html.theme-dark .intro-column h1,
html.theme-dark .series-index a,
html.theme-dark .side-metadata,
html.theme-dark .scroll-note,
html.theme-dark .site-footer,
html.theme-dark .rail-place,
html.theme-dark .scene,
html.theme-dark .script-page,
html.theme-dark .script-copy,
html.theme-dark .work-meta,
body.theme-dark .intro-column h1,
body.theme-dark .series-index a,
body.theme-dark .side-metadata,
body.theme-dark .scroll-note,
body.theme-dark .site-footer,
body.theme-dark .rail-place,
body.theme-dark .scene,
body.theme-dark .script-page,
body.theme-dark .script-copy,
body.theme-dark .work-meta {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Works cards/list dark mode. */
html[data-theme="dark"] .work-page .gallery-list a,
html[data-theme="dark"] .work-page [data-gallery-list] > *,
html[data-theme="dark"] .work-page .gallery-card,
body[data-theme="dark"].work-page .gallery-list a,
body[data-theme="dark"].work-page [data-gallery-list] > *,
body[data-theme="dark"].work-page .gallery-card,
html.theme-dark .work-page .gallery-list a,
html.theme-dark .work-page [data-gallery-list] > *,
html.theme-dark .work-page .gallery-card,
body.theme-dark.work-page .gallery-list a,
body.theme-dark.work-page [data-gallery-list] > *,
body.theme-dark.work-page .gallery-card {
  background: #050505 !important;
  background-color: #050505 !important;
  color: #f2f2f2 !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

html[data-theme="dark"] .work-page .gallery-list a:hover,
body[data-theme="dark"].work-page .gallery-list a:hover,
html.theme-dark .work-page .gallery-list a:hover,
body.theme-dark.work-page .gallery-list a:hover {
  background: #111111 !important;
  background-color: #111111 !important;
}

html[data-theme="dark"] *,
body[data-theme="dark"] *,
html.theme-dark *,
body.theme-dark * {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Active theme underline/readability. */
.theme-selector [aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* V5 work.html dark-mode series fix
   Keep the stable work.html structure untouched. This only fixes the Selected series
   surface that was still forced white by earlier final-tune rules in dark mode. */
html[data-theme="dark"] body.work-page .series-section,
html[data-theme="dark"] body.work-page .gallery-list,
html[data-theme="dark"] body.work-page .series-card,
html[data-theme="dark"] body.work-page [data-gallery-list],
body[data-theme="dark"].work-page .series-section,
body[data-theme="dark"].work-page .gallery-list,
body[data-theme="dark"].work-page .series-card,
body[data-theme="dark"].work-page [data-gallery-list],
html.theme-dark body.work-page .series-section,
html.theme-dark body.work-page .gallery-list,
html.theme-dark body.work-page .series-card,
html.theme-dark body.work-page [data-gallery-list],
body.theme-dark.work-page .series-section,
body.theme-dark.work-page .gallery-list,
body.theme-dark.work-page .series-card,
body.theme-dark.work-page [data-gallery-list] {
  background: #050505 !important;
  background-color: #050505 !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] body.work-page .series-section h2,
body[data-theme="dark"].work-page .series-section h2,
html.theme-dark body.work-page .series-section h2,
body.theme-dark.work-page .series-section h2 {
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="dark"] body.work-page .gallery-list > *,
html[data-theme="dark"] body.work-page [data-gallery-list] > *,
body[data-theme="dark"].work-page .gallery-list > *,
body[data-theme="dark"].work-page [data-gallery-list] > *,
html.theme-dark body.work-page .gallery-list > *,
html.theme-dark body.work-page [data-gallery-list] > *,
body.theme-dark.work-page .gallery-list > *,
body.theme-dark.work-page [data-gallery-list] > * {
  background: #050505 !important;
  background-color: #050505 !important;
  color: #f2f2f2 !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}