/* ---------------------------------------------------------------------------
   Site-wide dark mode.

   Every page is Tailwind-CDN + a per-page <style> block with hard-coded light
   colors, so instead of adding dark: variants to thousands of elements this
   sheet re-points the colors the site actually uses when
   <html data-theme="dark"> is set. assets/theme.js owns the toggle.

   Load order note: the Tailwind CDN injects its utilities at runtime, after
   this file, so the utility overrides below need !important to win.
   --------------------------------------------------------------------------- */

:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Neutral dark grey surfaces; the terracotta accent is the only warm color,
       and tinted surfaces use it as a translucent wash so nothing reads brown. */
    --dk-bg: #131315;
    --dk-surface: #232329;
    --dk-surface-2: #202024;
    --dk-surface-3: #2a2a2f;
    --dk-surface-4: #333339;
    --dk-border: #34343a;
    --dk-border-soft: rgba(235, 235, 240, 0.13);
    --dk-text: #d4d4d8;
    --dk-text-strong: #f4f4f6;
    --dk-muted: #a3a3aa;
    --dk-faint: #7f7f87;
    --dk-ink: #141416;
    --dk-accent: #e8794f;
    --dk-accent-hi: #f4a582;
    --dk-accent-dim: #d06a45;
    /* Accent *surfaces* stay grey — every element using this also carries an
       orange border or label, which is enough of a cue without a brown fill */
    --dk-accent-bg: #212125;
    --dk-accent-border: rgba(232, 121, 79, 0.4);
}

/* ===== Base ============================================================== */

html[data-theme="dark"] body {
    background-color: var(--dk-bg) !important;
    /* Blueprint grid, dimmed for dark */
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    color: var(--dk-text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] .main-title,
html[data-theme="dark"] .project-name,
html[data-theme="dark"] .project-title,
html[data-theme="dark"] .pcb-title,
html[data-theme="dark"] .left-section h2,
html[data-theme="dark"] .content-section h2,
html[data-theme="dark"] .content-section h3,
html[data-theme="dark"] .feature h3,
html[data-theme="dark"] .learn-more-section h2,
html[data-theme="dark"] .video-section h2,
html[data-theme="dark"] .conference-section h2,
html[data-theme="dark"] .overview-text h3,
html[data-theme="dark"] .report-card h3,
html[data-theme="dark"] .project-details h3,
html[data-theme="dark"] .signup-form h3,
html[data-theme="dark"] .info-block th,
html[data-theme="dark"] .costume-name,
html[data-theme="dark"] .metric strong {
    color: var(--dk-text-strong);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] .tagline,
html[data-theme="dark"] .visit-website,
html[data-theme="dark"] .content-section p,
html[data-theme="dark"] .content-section ul,
html[data-theme="dark"] .conference-section p,
html[data-theme="dark"] .feature p,
html[data-theme="dark"] .figure-card p,
html[data-theme="dark"] .left-section p,
html[data-theme="dark"] .project-details li,
html[data-theme="dark"] .report-card p,
html[data-theme="dark"] .info-block ul,
html[data-theme="dark"] .info-block th,
html[data-theme="dark"] .info-block td,
html[data-theme="dark"] .overview-text p {
    color: var(--dk-text);
}

html[data-theme="dark"] small,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] .figure-caption,
html[data-theme="dark"] .project-label,
html[data-theme="dark"] .project-subtitle,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .brick-stats,
html[data-theme="dark"] .dummy-label,
html[data-theme="dark"] .costume-cell-none,
html[data-theme="dark"] .pcb-subtitle,
html[data-theme="dark"] .pcb-repo-link,
html[data-theme="dark"] .token-row {
    color: var(--dk-faint);
}

html[data-theme="dark"] footer {
    color: var(--dk-faint);
    border-top-color: var(--dk-border);
}

html[data-theme="dark"] hr {
    border-color: var(--dk-border);
}

html[data-theme="dark"] ::selection {
    background: rgba(232, 121, 79, 0.35);
    color: var(--dk-text-strong);
}

/* ===== Navigation ======================================================== */

html[data-theme="dark"] nav {
    background-color: rgba(19, 19, 21, 0.85);
    border-bottom-color: var(--dk-border) !important;
}

/* ===== Theme toggle button (injected by assets/theme.js) ================= */

/* The button is pinned to the right edge of the nav rather than left in flow,
   so a narrow screen wraps the links around it instead of pushing it to a row
   of its own. `right` matches the shell's own px-4 / sm:px-6 padding so the
   button lines up with the content edge. */
#navbar .nav-shell {
    position: relative;
}

/* Keeps the last link clear of the pinned button */
#navbar .nav-links {
    padding-right: 2.6rem;
}

#navbar .theme-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    border-radius: 0.5rem;
    background: transparent;
    /* gray-500 / gray-700 on hover: the same pair the nav links use */
    color: #6b7280;
    cursor: pointer;
    line-height: 0;
    flex: none;
    /* Without this a quick second tap on the button is read as double-tap-to-
       zoom rather than a second toggle, and the page jumps in. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* No fill, no accent: the icon and its box just darken together. */
#navbar .theme-toggle:hover {
    color: #374151;
    border-color: rgba(0, 0, 0, 0.42);
}

#navbar .theme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

#navbar .theme-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

@media (min-width: 640px) {
    #navbar .theme-toggle {
        right: 1.5rem;
    }
}

/* Sun shows in light mode, moon in dark mode */
#navbar .theme-toggle .theme-icon-moon {
    display: none;
}

html[data-theme="dark"] #navbar .theme-toggle .theme-icon-moon {
    display: block;
}

html[data-theme="dark"] #navbar .theme-toggle .theme-icon-sun {
    display: none;
}

html[data-theme="dark"] #navbar .theme-toggle {
    color: var(--dk-muted);
    border-color: var(--dk-border-soft);
}

/* On dark, "darker" would fade the icon out, so it goes the same direction the
   nav links do here and brightens instead. */
html[data-theme="dark"] #navbar .theme-toggle:hover {
    color: var(--dk-text-strong);
    border-color: rgba(235, 235, 240, 0.35);
}

/* ===== Mobile hamburger nav (button injected by assets/theme.js) ========= */

/* Desktop keeps the plain row of links; the button only exists below sm. */
#navbar .nav-burger,
#navbar .nav-current {
    display: none;
}

/* Below Tailwind's `sm` the links collapse into a panel that drops out of the
   bar, leaving a taller bar with the hamburger at the left content edge and
   the theme toggle still pinned to the right. */
@media (max-width: 639px) {

    /* Chunkier bar: py-3 (0.75rem) plus a 2.5rem tap target is squat, so the
       padding drops slightly and the button carries the height instead. */
    #navbar {
        position: relative;
        z-index: 50;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        /* Belt and braces on the buttons' own guard: a double-tap whose second
           tap lands just off the button would otherwise still zoom the page,
           and there is nothing in a navbar worth zooming into. */
        touch-action: manipulation;
    }

    #navbar .nav-shell {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 2.6rem;
    }

    #navbar .nav-burger {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: none;
        /* Negative margin optically aligns the bars — not the tap target's
           box — with the content edge and the page text below: the box is
           2.6rem wide around 1.35rem of bar, so it overhangs by ~0.65rem. */
        margin-left: -0.65rem;
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: #374151;
        cursor: pointer;
        /* Same double-tap-to-zoom guard as the theme toggle */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }

    #navbar .nav-burger:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -4px;
        border-radius: 0.5rem;
    }

    #navbar .nav-burger-bar {
        display: block;
        width: 1.35rem;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.22s ease, opacity 0.15s ease;
    }

    #navbar .nav-burger-bar + .nav-burger-bar {
        margin-top: 0.32rem;
    }

    /* Bar height (2px) + gap (0.32rem) = the distance each outer bar travels
       to meet in the middle as an X. */
    #navbar.nav-open .nav-burger-bar:nth-child(1) {
        transform: translateY(0.445rem) rotate(45deg);
    }

    #navbar.nav-open .nav-burger-bar:nth-child(2) {
        opacity: 0;
    }

    #navbar.nav-open .nav-burger-bar:nth-child(3) {
        transform: translateY(-0.445rem) rotate(-45deg);
    }

    /* Name of the page you are on, since the links themselves are hidden */
    #navbar .nav-current {
        display: block;
        font-size: 0.95rem;
        font-weight: 500;
        color: #111827;
        line-height: 1;
    }

    /* The panel. `top` clears the nav's own bottom padding so it starts flush
       under the nav border; left/right pin it to the shell's border box, which
       below sm is the full viewport width. */
    #navbar .nav-links {
        position: absolute;
        top: calc(100% + 0.6rem);
        left: 0;
        right: 0;
        z-index: 1;
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0.3rem 0 0.5rem;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    #navbar.nav-open .nav-links {
        display: flex;
    }

    #navbar .nav-links > a {
        padding: 0.72rem 1rem;
        font-size: 1rem;
        line-height: 1.2;
        /* The active link's `border-b-2 border-black pb-1` would read as a rule
           across the whole row here; it becomes a left bar instead. */
        border-bottom: 0;
    }

    #navbar .nav-links > a.nav-active {
        color: #000;
        font-weight: 600;
        box-shadow: inset 3px 0 0 #000;
    }

    #navbar .theme-toggle {
        width: 2.1rem;
        height: 2.1rem;
    }
}

/* Dark counterparts stay inside the same query — above sm the links row is a
   plain transparent row and must not pick up the panel's surface. */
@media (max-width: 639px) {
    html[data-theme="dark"] #navbar .nav-burger {
        color: var(--dk-muted);
    }

    html[data-theme="dark"] #navbar .nav-current {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] #navbar .nav-links {
        background: var(--dk-bg);
        border-bottom-color: var(--dk-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    }

    html[data-theme="dark"] #navbar .nav-links > a.nav-active {
        color: var(--dk-text-strong);
        box-shadow: inset 3px 0 0 var(--dk-accent);
    }
}

/* ===== Tailwind utility remaps =========================================== */

html[data-theme="dark"] .bg-white {
    background-color: var(--dk-surface) !important;
}

/* Nearly every page carries class="bg-white" on <body> itself, and that rule
   outranks the page-background rule above — without this the card color would
   paint the whole page. Keep the body on the page background. */
html[data-theme="dark"] body.bg-white {
    background-color: var(--dk-bg) !important;
}

html[data-theme="dark"] .bg-gray-50 {
    background-color: var(--dk-surface-2) !important;
}

html[data-theme="dark"] .bg-gray-100 {
    background-color: var(--dk-surface-2) !important;
}

html[data-theme="dark"] .bg-gray-200 {
    background-color: var(--dk-surface-3) !important;
}

html[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--dk-surface-3) !important;
}

html[data-theme="dark"] .hover\:bg-white:hover {
    background-color: var(--dk-surface-2) !important;
}

html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-gray-900 {
    color: var(--dk-text-strong) !important;
}

html[data-theme="dark"] .hover\:text-black:hover {
    color: var(--dk-text-strong) !important;
}

html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700 {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .hover\:text-gray-700:hover {
    color: var(--dk-text-strong) !important;
}

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-\[\#57503F\] {
    color: var(--dk-muted) !important;
}

html[data-theme="dark"] .text-gray-400 {
    color: var(--dk-faint) !important;
}

/* Only ever used as the "|" separators between footer links */
html[data-theme="dark"] .text-gray-300 {
    color: #43434a !important;
}

html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-100 {
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .border-black {
    border-color: var(--dk-text) !important;
}

/* Hairline card outlines (border-black/[0.12]) would vanish on a dark ground */
html[data-theme="dark"] .border-black\/\[0\.12\] {
    border-color: var(--dk-border) !important;
}

/* fun.html overlay scrim behind the "log broken" dialog */
html[data-theme="dark"] .bg-white\/40 {
    background-color: rgba(19, 19, 21, 0.6) !important;
}

/* Solid dark buttons invert to solid light buttons */
html[data-theme="dark"] .bg-black.text-white {
    background-color: var(--dk-text-strong) !important;
    color: var(--dk-ink) !important;
}

html[data-theme="dark"] .bg-black.text-white:hover,
html[data-theme="dark"] .bg-black.text-white.hover\:bg-gray-800:hover {
    background-color: var(--dk-muted) !important;
    color: var(--dk-ink) !important;
}

/* fun.html pixel buttons invert on hover: light fill -> dark fill */
html[data-theme="dark"] .bg-black.text-white.hover\:bg-white:hover {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text-strong) !important;
}

/* Terracotta accents, brightened so they carry on a dark ground */
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-500,
html[data-theme="dark"] .safety-header,
html[data-theme="dark"] .acknowledgements-header {
    color: var(--dk-accent) !important;
}

html[data-theme="dark"] .text-orange-700,
html[data-theme="dark"] .text-orange-800 {
    color: var(--dk-accent-dim) !important;
}

html[data-theme="dark"] .hover\:text-orange-800:hover,
html[data-theme="dark"] .hover\:text-orange-700:hover {
    color: var(--dk-accent-hi) !important;
}

html[data-theme="dark"] .border-orange-500 {
    border-color: var(--dk-accent) !important;
}

html[data-theme="dark"] .border-orange-200 {
    border-color: var(--dk-accent-border) !important;
}

html[data-theme="dark"] .bg-orange-50 {
    background-color: var(--dk-accent-bg) !important;
}

html[data-theme="dark"] .safety-header::after,
html[data-theme="dark"] .acknowledgements-header::after {
    background: rgba(232, 121, 79, 0.3);
}

html[data-theme="dark"] .name-squiggle svg path {
    stroke: var(--dk-accent);
}

/* background-image, not the `background` shorthand: the shorthand would reset
   the rule's background-clip: text and background-size, turning the shimmering
   text into a solid bar. */
html[data-theme="dark"] .shimmer-gradient-text {
    background-image: linear-gradient(90deg,
            #c76140 0%,
            #e8794f 25%,
            #ffb08c 50%,
            #e8794f 75%,
            #c76140 100%);
}

/* ===== Cards, bands and surfaces ======================================== */

html[data-theme="dark"] .project-card,
html[data-theme="dark"] .feature,
html[data-theme="dark"] .figure-card,
html[data-theme="dark"] .hero-band,
html[data-theme="dark"] .hero-image,
html[data-theme="dark"] .overview-hero,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .report-card {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .project-card img {
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .project-card::before,
html[data-theme="dark"] .project-card::after,
html[data-theme="dark"] .project-card a::before,
html[data-theme="dark"] .project-card a::after,
html[data-theme="dark"] .costume-cell::before,
html[data-theme="dark"] .costume-cell::after,
html[data-theme="dark"] .costume-cell-corners::before,
html[data-theme="dark"] .costume-cell-corners::after {
    border-color: var(--dk-accent);
}

html[data-theme="dark"] .alt-bg,
html[data-theme="dark"] .learn-more-section,
html[data-theme="dark"] .video-section,
html[data-theme="dark"] .conference-section,
html[data-theme="dark"] .signup-form {
    background-color: var(--dk-surface-2) !important;
    border-top-color: var(--dk-border);
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .section-band {
    border-top-color: var(--dk-border);
}

html[data-theme="dark"] .conference-section img,
html[data-theme="dark"] .left-section img,
html[data-theme="dark"] .video-wrapper,
html[data-theme="dark"] .overview-media img,
html[data-theme="dark"] .overview-media video,
html[data-theme="dark"] .overview-media figure img,
html[data-theme="dark"] .overview-media.side-by-side img,
html[data-theme="dark"] .overview-media.side-by-side > img,
html[data-theme="dark"] .overview-media.side-by-side > div > img,
html[data-theme="dark"] .figure-card img {
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .figure-card img {
    background: var(--dk-surface-2);
}

html[data-theme="dark"] .info-block th,
html[data-theme="dark"] .info-block td {
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .info-block tr:nth-child(even) td {
    background: var(--dk-surface-2);
}

html[data-theme="dark"] .content-section a,
html[data-theme="dark"] .info-block a {
    color: var(--dk-accent);
}

html[data-theme="dark"] .content-section a:hover {
    color: var(--dk-accent-hi);
}

html[data-theme="dark"] .overview-text code {
    background: var(--dk-surface-3);
    color: #e3ac74;
}

html[data-theme="dark"] .overview-text pre {
    background: #0e0e10;
    color: var(--dk-text);
    border: 1px solid var(--dk-border);
}

html[data-theme="dark"] .team-member {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .team-member:hover {
    background-color: var(--dk-surface-4) !important;
    color: var(--dk-text-strong) !important;
}

/* ===== Buttons =========================================================== */

html[data-theme="dark"] .learn-more-btn {
    background-color: var(--dk-text-strong);
    color: var(--dk-ink);
}

html[data-theme="dark"] .learn-more-btn:hover {
    background-color: var(--dk-muted);
    color: var(--dk-ink);
}

html[data-theme="dark"] .learn-more-btn.orange {
    background-color: var(--dk-accent);
    color: var(--dk-ink);
}

html[data-theme="dark"] .learn-more-btn.orange:hover {
    background-color: var(--dk-accent-hi);
}

html[data-theme="dark"] .learn-more-btn.mit-lab {
    background-color: transparent;
    color: var(--dk-accent);
    border-color: var(--dk-accent);
}

html[data-theme="dark"] .learn-more-btn.mit-lab:hover {
    background-color: var(--dk-accent-bg);
}

html[data-theme="dark"] .learn-more-btn.secondary {
    background-color: var(--dk-surface-3);
    color: var(--dk-text-strong);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .learn-more-btn.secondary:hover {
    background-color: var(--dk-surface-4);
}

html[data-theme="dark"] .signup-form input {
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

html[data-theme="dark"] .signup-form input::placeholder {
    color: var(--dk-faint);
}

html[data-theme="dark"] .signup-form button {
    background-color: var(--dk-text-strong);
    color: var(--dk-ink);
}

html[data-theme="dark"] .signup-form button:hover {
    background-color: var(--dk-muted);
}

html[data-theme="dark"] .reset-btn {
    background: linear-gradient(135deg, var(--dk-surface-4), var(--dk-surface-3));
    color: var(--dk-text);
}

/* ===== Callouts (index.html) ============================================ */

html[data-theme="dark"] .intern-callout {
    background: linear-gradient(135deg,
            rgba(50, 50, 56, 0.8) 0%,
            rgba(38, 38, 43, 0.6) 50%,
            rgba(50, 50, 56, 0.8) 100%);
    border-color: var(--dk-border-soft);
}

html[data-theme="dark"] .intern-callout:hover {
    border-color: rgba(235, 235, 240, 0.22);
}

/* Grey panel with an accent edge: in dark, an orange wash this large reads as
   brown, so the emphasis lives in the border and the text instead. */
html[data-theme="dark"] .phd-callout {
    background: linear-gradient(135deg,
            rgba(50, 50, 56, 0.8) 0%,
            rgba(38, 38, 43, 0.6) 50%,
            rgba(50, 50, 56, 0.8) 100%);
    border-color: rgba(232, 121, 79, 0.35);
}

html[data-theme="dark"] .phd-callout::before {
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0) 100%);
}

html[data-theme="dark"] .phd-callout:hover {
    border-color: var(--dk-accent-border);
}

/* ===== Costume picker (index.html hero) ================================= */

html[data-theme="dark"] .costume-btn,
html[data-theme="dark"] .costume-select-btn,
html[data-theme="dark"] .costume-cell {
    background: var(--dk-surface-2);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

html[data-theme="dark"] .costume-btn:hover,
html[data-theme="dark"] .costume-select-btn:hover {
    background: var(--dk-surface-3);
}

html[data-theme="dark"] .costume-grid {
    background: rgba(27, 27, 30, 0.94);
    border-color: var(--dk-border);
}

/* ===== fun.html ========================================================== */

html[data-theme="dark"] #slime-prompt-box {
    background: var(--dk-surface);
    border-color: var(--dk-text);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] #slime-prompt-box .sp-line {
    color: var(--dk-text-strong);
}

html[data-theme="dark"] #slime-prompt-box .sp-btn {
    background: var(--dk-surface-2);
    border-color: var(--dk-text);
    color: var(--dk-text-strong);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] #slime-prompt-box .sp-btn:hover {
    background: var(--dk-text-strong);
    color: var(--dk-ink);
}

html[data-theme="dark"] #slime-prompt-box .sp-go {
    background: var(--dk-text-strong);
    color: var(--dk-ink);
}

html[data-theme="dark"] #slime-prompt-box .sp-go:hover {
    background: var(--dk-surface-2);
    color: var(--dk-text-strong);
}

html[data-theme="dark"] .dummy-hp-bar-bg {
    background: var(--dk-surface-3);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .combo-counter {
    color: var(--dk-text);
}

/* ===== pcbs/index.html =================================================== */

html[data-theme="dark"] .pcb-title {
    color: var(--dk-text-strong);
}

html[data-theme="dark"] .pcb-modal-body {
    background: var(--dk-surface);
}

/* ===== Media ============================================================= */

/* Images and video render at full strength on the dark page — no dimming. */

/* creative.html draws its viewfinder brackets as inline-SVG backgrounds with a
   baked-in grey stroke, so they need the whole image swapped rather than a
   color override — same four corners, terracotta stroke, to match the hover
   brackets on the project cards. Only background-image is replaced: position,
   size and repeat still come from the page's own rule. */
html[data-theme="dark"] .photo-card::after {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20d='M24%201.5H11.5Q1.5%201.5%201.5%2011.5V24'%20fill='none'%20stroke='%23e8794f'%20stroke-width='3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20transform='rotate(90%2012%2012)'%20d='M24%201.5H11.5Q1.5%201.5%201.5%2011.5V24'%20fill='none'%20stroke='%23e8794f'%20stroke-width='3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20transform='rotate(270%2012%2012)'%20d='M24%201.5H11.5Q1.5%201.5%201.5%2011.5V24'%20fill='none'%20stroke='%23e8794f'%20stroke-width='3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20transform='rotate(180%2012%2012)'%20d='M24%201.5H11.5Q1.5%201.5%201.5%2011.5V24'%20fill='none'%20stroke='%23e8794f'%20stroke-width='3'/%3E%3C/svg%3E");
}
