/* Shared portfolio theme control. Pages default to dark and opt into light via [data-theme="light"]. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f4 !important;
  --surface: #ffffff !important;
  --surface2: #eef1ef !important;
  --ink: #17201f !important;
  --text: #17201f !important;
  --soft: #344340 !important;
  --muted: #5f6d69 !important;
  --muted2: #53615e !important;
  --card: rgba(255,255,255,.82) !important;
  --card-border: rgba(23,32,31,.16) !important;
  --border: rgba(23,32,31,.14) !important;
  --border2: rgba(23,32,31,.28) !important;
  --glass: rgba(255,255,255,.82) !important;
  --glass-strong: rgba(255,255,255,.94) !important;
  --home-glow: rgba(45,120,108,.10) !important;
  --accent: #235f57 !important;
  --accent-soft: #e5eeeb !important;
  --accent-border: #8aa69e !important;
  --grid-color: rgba(23,32,31,.028) !important;
  --violet: #235f57 !important;
  --lilac: #235f57 !important;
  --case-accent: #235f57 !important;
  --mint: #23685e !important;
  --housing: #23685e !important;
  --gold: #79591d !important;
  --stocks: #465db2 !important;
  --bitcoin: #a14c31 !important;
  --bonds: #536779 !important;
  --blue: #465db2 !important;
  --orange: #a14c31 !important;
}
html[data-theme="light"] body,
html[data-theme="light"] .page,
html[data-theme="light"] main {
  color: var(--ink);
  background-color: var(--bg);
}
html[data-theme="light"] body { background-image: radial-gradient(520px 360px at 17% 10%,var(--home-glow),transparent 68%) !important; }
/* The ambient wash and vignette are authored for a dark page; light mode needs its own
   depth cue, otherwise the backdrop flattens into a plain white sheet. */
html[data-theme="light"] body::after {
  background:
    radial-gradient(620px 420px at 15% 6%, rgba(35,95,87,.10), transparent 66%),
    radial-gradient(560px 460px at 88% 90%, rgba(35,95,87,.07), transparent 70%),
    radial-gradient(ellipse at center, transparent 52%, rgba(23,32,31,.10) 100%) !important;
}
.theme-toggle {
  position: fixed; z-index: 1000; right: 1.25rem; bottom: 1.25rem;
  border: 1px solid var(--border2, rgba(255,255,255,.22)); border-radius: 999px;
  padding: .55rem .85rem; color: var(--ink, #ececec);
  background: var(--glass-strong, rgba(20,20,20,.86));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  font: 500 .72rem/1 'DM Mono', ui-monospace, monospace; letter-spacing: .04em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.28);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
html[data-theme="light"] .theme-toggle {
  border-color: rgba(23,32,31,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(23,32,31,.07), 0 10px 26px rgba(23,32,31,.10);
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle:focus-visible { outline: 3px solid #55bdb0; outline-offset: 3px; }
/* The control floats over page content, so it needs its own separation from whatever
   scrolls beneath it — a map tile or a screenshot, not just the page background. */
.theme-toggle::before {
  content: ''; position: absolute; inset: -9px; border-radius: 999px; z-index: -1;
  background: radial-gradient(closest-side, rgba(8,8,8,.55), rgba(8,8,8,0));
}
html[data-theme="light"] .theme-toggle::before {
  background: radial-gradient(closest-side, rgba(245,246,244,.80), rgba(245,246,244,0));
}
@media (max-width: 600px) { .theme-toggle { right: .8rem; bottom: .8rem; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* Semantic light surfaces, not an image inversion. Dark page rules remain intact. */
html[data-theme="light"] body::after { background: none; }
html[data-theme="light"] .page { background: transparent; }
html[data-theme="light"] :is(.hero,.hero-panel,.card,.cover-slot,.workbench,.portfolio-surface) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 28px rgba(23,32,31,.07) !important;
}
/* Dark mode earns depth from a luminous glass edge. Flat white loses that entirely, so
   light mode rebuilds the same hierarchy with a top sheen and a layered drop shadow. */
html[data-theme="light"] .card {
  background:
    linear-gradient(155deg, rgba(255,255,255,.96) 0%, rgba(247,250,249,.90) 42%, rgba(240,245,243,.86) 100%) !important;
  border-color: rgba(23,32,31,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(23,32,31,.035),
    0 1px 2px rgba(23,32,31,.045),
    0 10px 28px rgba(23,32,31,.075),
    0 26px 56px rgba(23,32,31,.05) !important;
}
html[data-theme="light"] .card::before {
  background: radial-gradient(100% 58% at 0% 0%, rgba(35,95,87,.07), transparent 64%) !important;
}
html[data-theme="light"] .card:focus-within {
  border-color: rgba(35,95,87,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 2px 4px rgba(23,32,31,.05),
    0 16px 38px rgba(23,32,31,.10),
    0 32px 68px rgba(23,32,31,.07) !important;
}
html[data-theme="light"] :is(.lang-toggle,.topnav,.rail) { background: var(--surface) !important; border-color: var(--border2); box-shadow: 0 6px 24px rgba(23,32,31,.10); }
html[data-theme="light"] :is(.facts,.project-box,.project-emoji,.skill-item,.focus-item,.work-item,.social-btn,.arrow-btn,.badge,.chip) { background: var(--surface2); border-color: var(--border); }
/* Tiles inside a card sit on the card, so they need a lighter shadow than the card itself. */
html[data-theme="light"] :is(.project-box,.work-item,.skill-item,.focus-item) {
  background: rgba(255,255,255,.72);
  border-color: rgba(23,32,31,.10);
  box-shadow: 0 1px 2px rgba(23,32,31,.04);
}
html[data-theme="light"] :is(.project-box:hover,.work-item:hover) {
  background: rgba(255,255,255,.96);
  border-color: rgba(35,95,87,.30);
  box-shadow: 0 4px 14px rgba(23,32,31,.09);
}
html[data-theme="light"] .project-emoji { background: rgba(35,95,87,.08); }
html[data-theme="light"] :is(.hero-name) { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
html[data-theme="light"] .badge { color: var(--ink); }
html[data-theme="light"] :is(.badge-dot,.now-dot) { background: var(--accent); }
html[data-theme="light"] .timeline-line { background: var(--border2) !important; }
html[data-theme="light"] .timeline-dot { background: #779087; }
html[data-theme="light"] :is(.lang-btn.active,.skills-tab.active,.rail a[aria-current="true"]) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
html[data-theme="light"] :is(.project-box:hover,.skills-tab:hover,.social-btn:hover,.chip:hover,.arrow-btn:hover,.work-item:hover) { background: var(--accent-soft); border-color: var(--accent-border); color: var(--ink); }
html[data-theme="light"] .contact { background: var(--ink); color: #fff; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid #55bdb0; outline-offset: 3px; }
html[data-theme="light"] :is(button,a,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid #235f57; outline-offset: 3px; }
html[data-theme="light"] ::selection { background: #235f57; color: #fff; }
/* Evidence-led project surfaces and charts. */
html[data-theme="light"] :is(.intro>p,p,.network-caveat) { color: var(--soft); }
html[data-theme="light"] :is(.eyebrow,.caption,.label) { color: var(--muted); }
html[data-theme="light"] :is(.letter-panel,.branch>div,.guard-card,.quality-board,.failure-grid article,.runtime-strip,.screen-grid figure,.quality-layout,.quality-hero,.rag-diagram) { background: var(--surface2); }
/* Project pages read as flat outlines in light mode; give their evidence surfaces the same
   paper-over-page elevation the dark theme gets from its lifted panels. */
html[data-theme="light"] :is(.quality-layout,.rag-diagram,.screen-grid figure,.example-grid,.runtime-strip,.failure-grid,.quality-board,.surface,.explorer figure,.evaluation-surface,.comparison,.period-grid) {
  border-color: rgba(23,32,31,.11);
  box-shadow: 0 1px 2px rgba(23,32,31,.04), 0 10px 26px rgba(23,32,31,.055);
}
html[data-theme="light"] :is(.quality-hero,.example-card,.guard-card) {
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(244,248,247,.90));
}
html[data-theme="light"] .screen-grid img { border-color: rgba(23,32,31,.11); }
/* A hairline keeps the case-study rail from floating unanchored on a pale page. */
html[data-theme="light"] .rail { box-shadow: none; }
html[data-theme="light"] :is(button,select,input) { color: var(--ink); }
html[data-theme="light"] :is(select,input,#search-results button,#centrality-results button,.controls button,#asset-controls button,#scenario-controls button,#toggle-routes) { background: var(--surface2); border-color: var(--border2); }
/* Interactive controls that hardcode a dark chip background in their page stylesheet. */
html[data-theme="light"] :is(button,select,input):not(.contact,.theme-toggle,.strategies button,#view-controls button,.map-bypass,.skills-tab,.lang-btn) { background-color: var(--surface2); border-color: var(--border2); color: var(--ink); }
/* Tab-style controls stay flat so only the selected one carries a filled background. */
html[data-theme="light"] :is(#view-controls button,.strategies button,.skills-tab,.lang-btn) { background-color: transparent; }
html[data-theme="light"] :is(.skills-tab,.lang-btn) { color: var(--muted); border-color: transparent; }
html[data-theme="light"] :is(.lang-btn.active,.skills-tab.active) { background-color: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
html[data-theme="light"] #view-controls button[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
html[data-theme="light"] :is(button,select,input):disabled { opacity: .55; }
/* The resilience legend colors are written as inline styles by the chart renderer. */
html[data-theme="light"] #resilience-readout span[data-series="random"], html[data-theme="light"] .strategies [data-strategy="random"] { color: var(--housing) !important; }
html[data-theme="light"] #resilience-readout span[data-series="degree"], html[data-theme="light"] .strategies [data-strategy="degree"] { color: var(--stocks) !important; }
html[data-theme="light"] #resilience-readout span[data-series="betweenness"], html[data-theme="light"] .strategies [data-strategy="betweenness"] { color: var(--bitcoin) !important; }
html[data-theme="light"] :is(button:hover,button[aria-pressed="true"],#search-results button[aria-pressed="true"],#centrality-results button[aria-pressed="true"],#toggle-routes[aria-pressed="true"]):not(.theme-toggle) { background: var(--accent-soft) !important; color: var(--accent); border-color: var(--accent-border); }
/* The theme control reports its own state via aria-pressed; it must keep its surface
   colours rather than adopting the selected-chip accent-on-accent pairing. */
html[data-theme="light"] .theme-toggle { background: var(--glass-strong) !important; color: var(--ink) !important; }
html[data-theme="light"] .bar-row.featured .bar-label { color: var(--accent); }
html[data-theme="light"] .status-open { color: #943f2d; }
html[data-theme="light"] :is(.bar-track,.route-row i) { background: #d5dfdb; }
html[data-theme="light"] .bar-row.reranked .bar-fill { background: #546a62; }
html[data-theme="light"] :is(.plot-grid,.chart-grid,.map-grid) { stroke: #ccd7d2; }
html[data-theme="light"] :is(.chart-label,#chart text) { fill: var(--soft); }
html[data-theme="light"] .centrality-label { fill: #97452d; }
html[data-theme="light"] .centrality-point[data-selected="true"] { fill: #17201f; }
html[data-theme="light"] .coverage-bin { fill: #d5dfdb; }
html[data-theme="light"] .coverage-bin.selected { fill: var(--housing); }
/* Cartography is intentionally dark; keep map-local data colors and controls. */
html[data-theme="light"] #station-map { --mint: #9ce8df; --blue: #9cafff; --orange: #e89b80; color-scheme: dark; background: #101113; }
html[data-theme="light"] #station-map .leaflet-control-zoom a { color: #222; background: #fff; }
/* SVG renderers use presentation attributes; theme them without changing data or geometry. */
html[data-theme="light"] svg:not(.leaflet-zoom-animated) [stroke="#9ce8df"] { stroke: var(--housing); }
html[data-theme="light"] svg:not(.leaflet-zoom-animated) [stroke="#9cafff"] { stroke: var(--stocks); }
html[data-theme="light"] svg:not(.leaflet-zoom-animated) [stroke="#e89b80"] { stroke: var(--bitcoin); }
html[data-theme="light"] svg [stroke="#dfc184"] { stroke: var(--gold); }
html[data-theme="light"] svg [fill="#9ce8df"] { fill: var(--housing); }
html[data-theme="light"] svg [fill="#9cafff"] { fill: var(--stocks); }
html[data-theme="light"] svg [fill="#e89b80"] { fill: var(--bitcoin); }
html[data-theme="light"] svg [fill="#dfc184"] { fill: var(--gold); }
html[data-theme="light"] svg text[fill] { fill: var(--soft); }
html[data-theme="light"] .strategies [aria-pressed="false"] { opacity: 1; text-decoration: line-through; }
/* Community identities retain their hue; label variants use darker ink in light mode. */
html[data-theme="light"] th[style*="230, 159, 0"] { color: #795200 !important; }
html[data-theme="light"] th[style*="86, 180, 233"] { color: #226485 !important; }
html[data-theme="light"] th[style*="0, 158, 115"] { color: #006b4f !important; }
html[data-theme="light"] th[style*="240, 228, 66"] { color: #6c6500 !important; }
html[data-theme="light"] th[style*="204, 121, 167"] { color: #884469 !important; }
html:not([data-theme="light"]) .matrix-cell { background-image: linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)) !important; }