/* Light/dark theme shared by the themed vocabulary guides (see theme.js). The
   shared vocabulary styles retain their defaults; guide-specific rules at the
   end are scoped with :where(html[data-guide="…"]) so they add no specificity. */
html[data-theme="light"], html[data-theme="light"] body {
    color-scheme: light;
    background: #f7f6f6;
    color: #111;
}
.lg-theme-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* the header's light/dark button (theme.js); takes the bar's white ink like the gear */
#theme-toggle { color: inherit; }
/* The related-pages tabs (ip8f.css) sit absolutely at right: 50px, room for the gear alone;
   the light/dark button takes another 54px (48px + 3px margins), so move them over by that. */
@media (min-width: 1001px) {
    #right-header:has(> #theme-toggle) > .related-pages { right: 104px; }
}
#lg-theme { font: inherit; padding: 6px 10px; border: 1px solid #85858e; border-radius: 6px; }
#lg-theme:focus-visible { outline: 2px solid #8fb6ff; outline-offset: 3px; }
#preferences {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    z-index: 1001;
}
@media (max-width: 600px) {
    /* room for the logo plus the theme button and gear on the right */
    #site-title { max-width: calc(100vw - 160px); overflow: hidden; text-overflow: ellipsis; }
}
html[data-theme="dark"] { color-scheme: dark; background: #15151b; }
html[data-theme="dark"] body { background: #15151b; color: #eeeef4; }
html[data-theme="dark"] #header { background: #252936; }
html[data-theme="dark"] #header object { color-scheme: light; }
html[data-theme="dark"] #control { border-color: #454958; }
html[data-theme="dark"] .hover_title { color: #a7c5ff; }
html[data-theme="dark"] #romanization-label,
html[data-theme="dark"] #translit-label { color: #a7c5ff !important; }
html[data-theme="dark"] #preferences,
html[data-theme="dark"] #modal_message,
html[data-theme="dark"] #long_message,
html[data-theme="dark"] #context_menu,
html[data-theme="dark"] #action_menu,
html[data-theme="dark"] .options,
html[data-theme="dark"] #gender-menu,
html[data-theme="dark"] #gender-quiz {
    color-scheme: dark;
    background: #262630;
    color: #eeeef4;
    border-color: #585868;
}
html[data-theme="dark"] #lg-theme { background: #33333f; color: #eeeef4; }
html[data-theme="dark"] #context_menu a,
html[data-theme="dark"] #action_menu a,
html[data-theme="dark"] #gender-menu-button { color: #a7c5ff; }
html[data-theme="dark"] .kbd,
html[data-theme="dark"] #preferences .kdb { background: #393946; color: #eeeef4; border-color: #666677; }
/* Answer cards and grammatical gender colors remain light, with explicit dark ink. */
html[data-theme="dark"] #center-answer div,
html[data-theme="dark"] .center-tile,
html[data-theme="dark"] #launch { color: #15151b; }
html[data-theme="dark"] .sound-overlay { color: #cbb0ff; }

/* Challenge buttons follow the "mode-button" look of the landing page's
   "Three ways to learn" cards: a translucent outlined pill with a purple icon (the speaker icon's color),
   in place of the raised pink mdc button. Light values are the default; dark
   flips the ink. The #control prefix outranks mdc's .mdc-button.accent rules. */
#control .actions .mdc-button {
    --challenge-ink: #1b1b22;
    --challenge-fill: rgba(0, 0, 0, 0.04);
    --challenge-fill-hover: rgba(0, 0, 0, 0.08);
    --challenge-border: rgba(0, 0, 0, 0.18);
    --challenge-border-hover: rgba(0, 0, 0, 0.32);
    --challenge-icon: #5b3f8c; /* the speaker icon's purple */
    --challenge-badge-ink: #69528f;
    --challenge-badge-fill: #ede7f5;
    --challenge-done: #38845b;
    height: auto;
    min-height: 0;
    padding: 7px 13px;
    border: 1px solid var(--challenge-border);
    border-radius: 9px;
    background: var(--challenge-fill);
    color: var(--challenge-ink);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease, border-color 150ms ease;
}
html[data-theme="dark"] #control .actions .mdc-button {
    --challenge-ink: #fff;
    --challenge-fill: rgba(255, 255, 255, 0.07);
    --challenge-fill-hover: rgba(255, 255, 255, 0.13);
    --challenge-border: rgba(255, 255, 255, 0.24);
    --challenge-border-hover: rgba(255, 255, 255, 0.4);
    --challenge-icon: #cbb0ff;
    --challenge-badge-ink: #c4b5fd;
    --challenge-badge-fill: #373044;
    --challenge-done: #91cba7;
}
#control .actions .mdc-button:hover {
    background: var(--challenge-fill-hover);
    border-color: var(--challenge-border-hover);
    box-shadow: none;
}
#control .actions .mdc-button:focus-visible {
    outline: 2px solid var(--challenge-icon);
    outline-offset: 2px;
}
/* the outline and hover fill replace mdc's ripple overlays */
#control .actions .mdc-button::before,
#control .actions .mdc-button::after { display: none; }
#control .actions .mdc-button .mdc-button__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#control .actions .mdc-button .mdc-button__label::before {
    font-family: "Material Icons";
    font-size: 17px;
    font-weight: normal;
    line-height: 1;
    color: var(--challenge-icon);
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
}
#speak .mdc-button__label::before { content: "mic"; }
#listen .mdc-button__label::before { content: "headphones"; }
/* A quiet lavender tag, so it ties to the icon and stays below the title and the
   completion check. !important beats the inline style the app gives it. */
#control #speak-beta {
    margin-left: 2px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: var(--challenge-badge-fill) !important;
    color: var(--challenge-badge-ink);
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
}
/* The check the app appends once a challenge is finished: a softer green than
   the shared lawngreen, sized near the mic/headphones icon. */
#control .actions .mdc-button > i.material-icons {
    margin-left: 6px;
    font-size: 16px;
    line-height: 1;
    color: var(--challenge-done);
}

/* ---- Guide-specific rules ---- */

/* Light canvas */
html[data-theme="light"]:where([data-guide="body"], [data-guide="digestive_system"], [data-guide="time"]),
html[data-theme="light"]:where([data-guide="body"], [data-guide="digestive_system"], [data-guide="time"]) body { background: #fff; }
html[data-theme="light"]:where([data-guide="face"]),
html[data-theme="light"]:where([data-guide="face"]) body { background: #f0efea; }
html[data-theme="light"]:where([data-guide="tools"]) body { background: linear-gradient(180deg, #fdfdfc 0%, #f6f6f4 60%, #ebecea 100%) fixed #fbfbfa; }

/* Jewelry: a deeper dark canvas */
html[data-theme="dark"]:where([data-guide="jewelry"]) { background: #0d0d12; }
html[data-theme="dark"]:where([data-guide="jewelry"]) body { background: #0d0d12; }
html[data-theme="dark"]:where([data-guide="jewelry"]) #header { background: #1b1b2b; }
html[data-theme="dark"]:where([data-guide="jewelry"]) #launch { color: #0d0d12; }

/* Digestive system: the SVG canvas stays transparent; its own styles follow this theme. */
:where(html[data-guide="digestive_system"]) #svg { color-scheme: light; }

/* Face */
html[data-theme="dark"]:where([data-guide="face"]) .parts-box {
    background: #23232c;
    border-color: #484853;
}
/* Keep the fine black lash and pupil discernible without changing the artwork. */
html[data-theme="dark"]:where([data-guide="face"]) #img-wrap-eyelash > .base,
html[data-theme="dark"]:where([data-guide="face"]) #img-wrap-pupil > .base {
    filter: drop-shadow(0 0 1px #b3b7c4);
}
html[data-theme="dark"]:where([data-guide="face"]) #img-wrap-eye .outline-overlay polygon.active,
html[data-theme="dark"]:where([data-guide="face"]) #img-wrap-mouth .outline-overlay polygon.active {
    fill: rgba(95, 210, 220, .25);
    stroke: #7bdce3;
    filter: drop-shadow(0 0 2px #489ca7);
}
html[data-theme="dark"]:where([data-guide="face"]) .connector-overlay .connector { stroke: #7bdce3; }
html[data-theme="dark"]:where([data-guide="face"]) .connector-overlay .connector-dot { fill: #7bdce3; }

/* Time: reuse the guide's existing silhouettes. The invisible base reserves the
   exact image dimensions while the clipped interactive layers paint the artwork. */
:where(html[data-guide="time"]) .content-container .img-wrap.cutout { background: transparent; border-radius: 0; }
:where(html[data-guide="time"]) .content-container .img-wrap.cutout > .base { opacity: 0; }
:where(html[data-guide="time"]) .content-container .img-wrap { max-width: 100%; }
html[data-theme="dark"]:where([data-guide="time"]) .pill-btn { background: #30303c; border-color: #737389; }
html[data-theme="dark"]:where([data-guide="time"]) .pill-btn:hover { background: #434354; border-color: #b9b4e7; }
html[data-theme="dark"]:where([data-guide="time"]) .pill-btn.active {
    background: linear-gradient(135deg, #6558be, #774ca2);
    border-color: #aaa0f1;
    box-shadow: 0 3px 12px #0005;
}
:where(html[data-guide="time"]) .pill-btn:focus-visible { outline: 3px solid #a7c5ff; outline-offset: 3px; }
html[data-theme="dark"]:where([data-guide="time"]) .section-title { border-color: #555069; }
/* These labels live in light popup cards, so retain their original dark ink. */
html[data-theme="dark"]:where([data-guide="time"]) .popUpStyle .notes-text { color: #555; }
/* The cleaned weekday asset has its own alpha; display it without silhouette trimming. */
:where(html[data-guide="time"]) #day-view .img-wrap.transparent-art { width: 1000px; max-width: 100%; background: transparent; border-radius: 0; }

/* Paint the complete alpha artwork. Silhouettes are only interactive hit regions. */
:where(html[data-guide="time"]) #time-view .transparent-object { background: transparent; border-radius: 0; }
:where(html[data-guide="time"]) #time-view .clock-art { width: 280px; }
:where(html[data-guide="time"]) #time-view .watch-art { width: 160px; }
:where(html[data-guide="time"]) #time-view .stopwatch-art { width: 200px; }
:where(html[data-guide="time"]) #time-view .hourglass-art { width: 170px; }
:where(html[data-guide="time"]) #time-view .transparent-object > .base { width: 100%; height: auto; }
:where(html[data-guide="time"]) #time-view .transparent-object > .zoom-region { opacity: 0; }
:where(html[data-guide="time"]) #time-view .transparent-object > .zoom-region:hover,
:where(html[data-guide="time"]) #time-view .transparent-object > .zoom-region.touch-active { opacity: 1; }