/*
 * v4-night.css — romka's desktop after dark.
 * The paper turns to a deep night blue; the things that are lit (app windows,
 * chips, the yellow marker) stay light, like screens glowing in a dark room.
 */

/* the toggle, in the menu bar */
.v4-theme {
    display: grid;
    place-items: center;
    width: 30px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    color: inherit;
    cursor: pointer;
}
.v4-theme:hover { background: rgba(255, 255, 255, .28); }
.v4-menubar.is-solid .v4-theme { background: rgba(24, 38, 43, .08); }
.v4-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v4-theme-sun { display: none; }
html[data-theme="night"] .v4-theme-sun { display: block; }
html[data-theme="night"] .v4-theme-moon { display: none; }

/* ---------- the night palette ---------- */

html[data-theme="night"] {
    color-scheme: dark;
    --v4-cream: #0f1424;
    --v4-cream-2: #151b30;
    --v4-ink: #eef1f8;
    --v4-ink-2: #c9d0de;
    --v4-muted: #9aa4b8;
    --v4-line: rgba(255, 255, 255, .1);
}

html[data-theme="night"] body.v4 { background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); }

/* lit islands keep their daytime ink */
html[data-theme="night"] :is(
    .v4-window:not(.v4-window--dark):not(.v4-window--term),
    .v4-chip, .v4-meta-chip, .v4-replay, .v4-node, .v4-q-node, .v4-faq-icon,
    .v4-about-motto, .v4-toast, .v4-btn--glass, .v4-mark, .v4-pill, .v4-faq-search,
    .v4-folder-icon, .v4-btn--glossy, .v4-folder.is-current .v4-folder-label, .v4-map-notes span
) {
    --v4-ink: #18262b;
    --v4-ink-2: #3c4b50;
    --v4-muted: #5f6d70;
    --v4-line: rgba(24, 38, 43, .12);
    color: var(--v4-ink);
}

/* the island and the dark windows were dark all along */
html[data-theme="night"] .v4-island { color: #fff; }

html[data-theme="night"] .v4-menubar.is-solid { background: rgba(15, 20, 36, .86); color: #eef1f8; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
html[data-theme="night"] .v4-menubar.is-solid .v4-theme { background: rgba(255, 255, 255, .12); }

/* the hero: night painting, clouds tucked away, a moonlit hand-off */
html[data-theme="night"] .v4-scene { background: #0d1530; }
html[data-theme="night"] .v4-cloud { opacity: .14; filter: brightness(.6) saturate(.4); }
html[data-theme="night"] .v4-hero::after { background: linear-gradient(to bottom, rgba(15, 20, 36, 0), var(--v4-cream) 92%); }
html[data-theme="night"] .v4-btn--glass { background: rgba(255, 255, 255, .85); }

/* story: the spine and the panels glow a little */
html[data-theme="night"] .v4-spine { background: rgba(255, 255, 255, .1); }
html[data-theme="night"] .v4-art { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .8); }
html[data-theme="night"] .v4-file svg { fill: #1b2236; }

/* questions: from butter to a warm night */
html[data-theme="night"] .v4-faq {
    background-color: #17142a;
    background-image: radial-gradient(rgba(255, 194, 71, .14) 1px, transparent 1.2px);
}

html[data-theme="night"] .v4-map { background: #0a0e1a; }
html[data-theme="night"] .v4-footer { background: radial-gradient(90% 60% at 50% 100%, rgba(255, 194, 71, .14), transparent 70%), #0a0d16; }

/* the switch wipes the page in a circle from the toggle (see js/v4.js) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }