/* Dark mode: every rule is scoped to html[data-theme="dark"], which the
   floating toggle button sets. The site always starts in light mode.

   Dark mode comes in two looks: plain dark gray, or the Main Quad photo when
   html also has data-bg="photo" (picked at random, see PHOTO_CHANCE in
   index.html). */

html[data-theme="dark"] {
    color-scheme: dark;
    background-color: #262a33;
}

html[data-theme="dark"][data-bg="photo"] {
    background-color: #0d1017;
}

/* Keep body transparent so the photo layer below shows through */
html[data-theme="dark"] body {
    background-color: transparent;
    color: #e4e6eb;
}

/* Stanford Main Quad photo behind the page, darkened so text stays readable.
   A fixed pseudo-element is used instead of background-attachment: fixed,
   which iOS Safari ignores. */
html[data-theme="dark"][data-bg="photo"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(10, 12, 20, 0.42), rgba(10, 12, 20, 0.74)),
        url("../resources/bg-dark.jpg") 48% 60% / cover no-repeat;
}

/* Header */
html[data-theme="dark"] #header {
    background-color: rgba(13, 16, 23, 0.55) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html[data-theme="dark"] #header a,
html[data-theme="dark"] #header .header-name {
    color: #8fb8ee !important;
}

html[data-theme="dark"] #header a:hover {
    color: #c3dafa !important;
}

html[data-theme="dark"] #header .sep {
    color: #5f6878 !important;
}

/* Links and headings */
html[data-theme="dark"] div.container a:link,
html[data-theme="dark"] div.container a:visited {
    color: #8fb8ee;
}

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"] .heading h1,
html[data-theme="dark"] .heading .profile .text.info h1,
html[data-theme="dark"] .heading .profile .img .mobile-name {
    color: #f2f4f8 !important;
}

html[data-theme="dark"] span.title,
html[data-theme="dark"] div.title,
html[data-theme="dark"] div.title a:visited {
    color: #f2f4f8;
}

html[data-theme="dark"] p.affiliations {
    color: #b9bfca;
}

html[data-theme="dark"] .profile .img p {
    color: #8c95a3;
}

html[data-theme="dark"] .profile .img a,
html[data-theme="dark"] footer a {
    color: #8fb8ee;
}

html[data-theme="dark"] span.highlight,
html[data-theme="dark"] span.highlight a:link,
html[data-theme="dark"] span.highlight a:visited,
html[data-theme="dark"] #moreBioBtn a,
html[data-theme="dark"] #lessBioBtn a {
    color: #ff8a80;
}

html[data-theme="dark"] #moreBio p {
    background-color: rgba(240, 201, 41, 0.10);
    border-left-color: #f0c929;
}

/* Dividers */
html[data-theme="dark"] .profile,
html[data-theme="dark"] .divider,
html[data-theme="dark"] footer::before {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] footer {
    color: #8c95a3;
}

/* Publications */
html[data-theme="dark"] .publication .title,
html[data-theme="dark"] div.container .publication .title a:link,
html[data-theme="dark"] div.container .publication .title a:visited {
    color: #f2f4f8;
}

html[data-theme="dark"] .publication .authors,
html[data-theme="dark"] .publication .authors .author,
html[data-theme="dark"] div.authors,
html[data-theme="dark"] div.authors a:visited {
    color: #a3aab6;
}

html[data-theme="dark"] .publication .venue {
    color: #ff8a80;
}

html[data-theme="dark"] .publication .tag a,
html[data-theme="dark"] .showBtn a {
    color: #8fb8ee;
}

html[data-theme="dark"] .publication .img img {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Publication view buttons */
html[data-theme="dark"] p.pubview a {
    color: #8fb8ee;
    background-color: rgba(13, 16, 23, 0.6);
    border-color: #8fb8ee;
}

html[data-theme="dark"] p.pubview a:hover {
    background-color: rgba(143, 184, 238, 0.15);
}

html[data-theme="dark"] p.pubview a.active,
html[data-theme="dark"] p.pubview a.active:hover {
    color: #0d1017;
    background-color: #8fb8ee;
}

/* Topic chips */
html[data-theme="dark"] p.pubtopics a {
    color: #8fb8ee;
    background-color: rgba(13, 16, 23, 0.6);
    border-color: rgba(143, 184, 238, 0.4);
}

html[data-theme="dark"] p.pubtopics a:hover {
    border-color: #8fb8ee;
}

html[data-theme="dark"] p.pubtopics a.active,
html[data-theme="dark"] p.pubtopics a.active:hover {
    color: #e4eefc;
    background-color: rgba(143, 184, 238, 0.25);
    border-color: #8fb8ee;
}

/* White-background hardware strip in the research section */
html[data-theme="dark"] img[src$="hand_gallery.png"] {
    border-radius: 8px;
}

/* Fill transparent thumbnails (e.g. Uncertainty Comes Free) with white so
   they read the same as in light mode */
html[data-theme="dark"] .publication .img img {
    background-color: #ffffff;
}

/* Desktop and tablet: like light mode, the header has no fill of its own,
   just a line separating it from the page (the blur keeps links readable when
   content scrolls underneath). Phones keep the tinted bar. */
@media screen and (min-width: 601px) {
    html[data-theme="dark"] #header {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    }
}

/* Phones: the portrait crop is much narrower, so re-center the photo */
@media screen and (max-width: 600px) {
    html[data-theme="dark"][data-bg="photo"] body::before {
        background-position: center, 49% 60%;
    }
}

/* Floating light/dark toggle (bottom right). Shows a moon in light mode and a
   sun in dark mode. */
#theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1001;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #d0d7e2;
    background-color: rgba(255, 255, 255, 0.92);
    color: #003373;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

#theme-toggle:hover {
    transform: scale(1.06);
    background-color: #ffffff;
}

#theme-toggle svg {
    width: 20px;
    height: 20px;
}

#theme-toggle .icon-sun {
    display: none;
}

html[data-theme="dark"] #theme-toggle {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(13, 16, 23, 0.75);
    color: #f0c929;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] #theme-toggle:hover {
    background-color: rgba(13, 16, 23, 0.95);
}

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

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

@media screen and (max-width: 600px) {
    #theme-toggle {
        right: 14px;
        bottom: 14px;
        width: 38px;
        height: 38px;
    }
}