/* windma-skins.css — opt-in alternate skins for the homepage chrome.
 *
 * Activated by the `data-skin` attribute on <html>, which the server emits
 * when handlers.resolveSkin picks a non-glass skin (?skin= preview, the
 * wm_skin cookie, or the A/B split when SKIN_AB_ENABLED is on).
 * With no attribute set every rule below is inert and the page keeps the
 * default glass look byte-for-byte.
 *
 *   cosy       — warm game-UI chrome inspired by ThinMatrix's HomeGrown:
 *                opaque cream plaques, chunky brown borders, solid offset
 *                shadows and buttons that physically press. Nunito everywhere.
 *   cosy-serif — identical chrome, but post text and the composer textarea
 *                keep Cormorant Garamond: game UI outside, letter inside.
 *
 * Only UI chrome is reskinned. The painted scene (sky gradient, landscape,
 * boats, petals, fireflies, mist, water glint, paper grain, compose-trigger
 * letter) keeps its own literals and is identical in every skin.
 */

/* Nunito variable font (wght 400–900), self-hosted like the other faces.
   @font-face is lazy: the files only download when a skin actually sets
   'Nunito', so the default glass page never pays for them. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/static/fonts/nunito-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/static/fonts/nunito-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Token overrides =====
   The --wm-* tokens are read by windma.css as var(--wm-x, <glass literal>).
   Defining them here, on the same :root element the attribute lands on,
   retunes the chrome without touching a single windma.css rule. */
html[data-skin="cosy"], html[data-skin="cosy-serif"] {
    --wm-font-body: 'Nunito', system-ui, sans-serif;
    --wm-font-display: 'Nunito', system-ui, sans-serif;

    /* Opaque plaques, not frosted glass: no backdrop blur anywhere. */
    --wm-glass-blur-sm: 0px;
    --wm-glass-blur-md: 0px;
    --wm-glass-blur-lg: 0px;
    --wm-glass-blur-xl: 0px;
    --wm-scrim-blur-sm: 0px;
    --wm-scrim-blur-md: 0px;

    /* Chunky radii: cards/dialogs 22–28px, buttons fully round. */
    --wm-radius-card: 26px;
    --wm-radius-card-sm: 22px;
    --wm-radius-dialog: 26px;
    --wm-radius-button: 999px;
    --wm-radius-pill: 999px;
    --wm-radius-ctrl-bar: 22px;
    --wm-radius-ctrl-btn: 999px;
    --wm-radius-ctrl-input: 14px;
    --wm-radius-error: 14px;

    /* Game-UI shadows: one SOLID offset edge under each surface (the darker
       warm brown reads as the side of a wooden plaque), plus at most a faint
       soft drop for separation. Accent buttons get a darker rust edge. */
    --wm-shadow-glass: 0 5px 0 #6B4226, 0 8px 18px rgba(64,42,24,.16);
    --wm-shadow-card: 0 6px 0 #6B4226, 0 14px 28px rgba(64,42,24,.20);
    --wm-shadow-dialog: 0 7px 0 #6B4226, 0 18px 40px rgba(64,42,24,.24);
    --wm-shadow-ctrl-btn: 0 4px 0 #6B4226, 0 6px 14px rgba(64,42,24,.16);
    --wm-shadow-ctrl-bar: 0 4px 0 #6B4226, 0 8px 18px rgba(64,42,24,.16);
    --wm-shadow-write: 0 4px 0 #7C3516, 0 6px 14px rgba(64,42,24,.20);
    --wm-shadow-write-hover: 0 5px 0 #7C3516, 0 8px 16px rgba(64,42,24,.22);
    --wm-shadow-toast: 0 5px 0 #6B4226, 0 10px 22px rgba(64,42,24,.22);
}

/* body re-declares --glass-* and --txt-* itself (windma.css line ~9), so the
   cosy values need a selector that beats `body`. Everything that consumed
   those vars — .glass, .audio-toggle, .travel-btn, the date/time inputs,
   .time-ctrl .auto — flips to dark ink on cream through this one block.
   Nothing outside the chrome panels reads --txt, so no scene text darkens. */
html[data-skin="cosy"] body, html[data-skin="cosy-serif"] body {
    --glass-bg: #FBF3E4;
    --glass-bg-solid: #F4E7CE;
    --glass-border: #8A5A3B;
    --txt: #3B2A1A;
    --txt-dim: #6B4F33;
    --txt-faint: #83653F;
}

/* ===== Panels: opaque cream plaques =====
   .glass already picks up cream + brown through the vars above; what remains
   is the 3px outline and the flat fill where a rule set its own gradient. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .glass {
    border-width: 3px;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-card,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-card,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome {
    background: #FBF3E4;
    border: 3px solid #8A5A3B;
    color: #3B2A1A;
}

/* Warm scrims behind overlays/dialog (blur already zeroed by the tokens). */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-overlay,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-overlay {
    background: rgba(46,31,19,.38);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome::backdrop {
    background: rgba(46,31,19,.45);
}

/* ===== Nav: a wooden signboard instead of a frosted scrim ===== */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav {
    background: #FBF3E4;
    border-bottom: 3px solid #8A5A3B;
    box-shadow: 0 4px 0 #6B4226;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav .logo {
    color: #3B2A1A;
    text-shadow: none;
    font-weight: 800;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-links a {
    color: #6B4F33;
    font-weight: 600;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-links a:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-links a.active {
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-links .sep {
    background: rgba(138,90,59,.45);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-leave {
    color: #6B4F33;
    font-weight: 600;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-leave:hover {
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-menu {
    color: #6B4F33;
    font-weight: 600;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-menu:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-menu[aria-expanded="true"] {
    color: #3B2A1A;
}

/* The drop-down panel is the same plaque as every other cosy surface: opaque
   cream, 3px brown outline, solid offset edge. backdrop-filter needs no
   override — --wm-glass-blur-lg is already 0px here. */
@media (max-width: 640px) {
    :is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-panel {
        background: #FBF3E4;
        border: 3px solid #8A5A3B;
        box-shadow: 0 5px 0 #6B4226, 0 8px 18px rgba(64,42,24,.16);
    }
    :is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-panel > * + * {
        border-block-start-color: rgba(138,90,59,.3);
    }
    :is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-panel a:hover,
    :is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-panel .nav-leave:hover {
        background: rgba(138,90,59,.1);
    }
}

/* ===== Buttons =====
   Shared: ≥48px tall, bold, 3px outline, solid offset edge. Two fills —
   accent (the one primary action on a surface) and cream-2 (secondary). */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-btn,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .travel-btn,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-primary,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-secondary,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-write {
    min-height: 48px;
    font-weight: 700;
    border: 3px solid #8A5A3B;
    box-shadow: 0 4px 0 #6B4226, 0 6px 14px rgba(64,42,24,.16);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .travel-btn,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-secondary {
    background: #F4E7CE;
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-btn,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-primary,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-write {
    background: #A34A1F;
    border-color: #7C3516;
    color: #FBF3E4;
    font-weight: 800;
    box-shadow: 0 4px 0 #7C3516, 0 6px 14px rgba(64,42,24,.20);
}
/* The pressed state is the HomeGrown tell: sink 2px and the offset edge
   shrinks by the same 2px, so the button reads as physically depressed. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .travel-btn:active,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto:active,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #6B4226, 0 4px 10px rgba(64,42,24,.14);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-btn:active,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-primary:active,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-write:active,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto.active:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #7C3516, 0 4px 10px rgba(64,42,24,.16);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .travel-btn:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-secondary:hover {
    background: #E9D6B4;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-btn:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-primary:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .nav-write:hover {
    background: #96431B;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-btn:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-primary:hover {
    transform: translateY(-1px);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .travel-btn {
    padding-block: 0;
    padding-inline: 16px;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto {
    padding-inline: 14px;
    border-radius: 999px;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto:hover {
    background: #E9D6B4;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto.active {
    background: #A34A1F;
    border-color: #7C3516;
    color: #FBF3E4;
    box-shadow: 0 4px 0 #7C3516, 0 6px 14px rgba(64,42,24,.18);
}

/* Round close chips on the cards — small, but still chunky plaques. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-close,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-close {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F4E7CE;
    border: 3px solid #8A5A3B;
    border-radius: 50%;
    color: #6B4F33;
    font-weight: 800;
    box-shadow: 0 3px 0 #6B4226, 0 4px 10px rgba(64,42,24,.16);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-close:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-close:hover {
    background: #E9D6B4;
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-close:active,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-close:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #6B4226, 0 3px 8px rgba(64,42,24,.14);
}

/* ===== Post card contents ===== */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-card .post-body {
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-card .post-time,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-card .post-more {
    color: #6B4F33;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-card .post-more:hover {
    color: #3B2A1A;
}

/* ===== Composer contents ===== */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-title {
    color: #6B4F33;
    font-weight: 800;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-card textarea {
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-card textarea::placeholder {
    color: #83653F;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-foot {
    border-top: 2px solid rgba(138,90,59,.35);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-timer {
    color: #6B4F33;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .composer-error {
    border-width: 2px;
}

/* ===== Bottom control bars =====
   The glass build swaps these to a dark scrim pill (the "legibility scrim"
   block near the end of windma.css) — under cosy they are cream plaques like
   every other panel, and the white text + text-shadow inside them is undone. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls {
    background: #FBF3E4;
    border: 3px solid #8A5A3B;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl:hover,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls:hover {
    background: #FBF3E4;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .lbl,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) #travelIndicator,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) #travelEmpty,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) #replayStatus {
    color: #6B4F33;
    text-shadow: none;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .travel-btn,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl .auto,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls input[type="date"],
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls input[type="time"] {
    color: #3B2A1A;
    text-shadow: none;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls input[type="date"],
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls input[type="time"] {
    background: #FFF9EC;
    border: 2px solid #8A5A3B;
    font-weight: 600;
    min-height: 40px;
}
/* The glass skin inverts the native picker glyph for its dark bar; on a light
   field that leaves it white-on-cream. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls input::-webkit-calendar-picker-indicator {
    filter: none;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-ctrl input[type="range"] {
    accent-color: #8A5A3B;
}

/* Audio toggle: same plaque language, stays a circle. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .audio-toggle {
    width: 48px;
    height: 48px;
    background: #FBF3E4;
    border: 3px solid #8A5A3B;
    color: #6B4F33;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .audio-toggle:hover {
    background: #F4E7CE;
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .audio-toggle.on {
    background: #F4E7CE;
    border-color: #8A5A3B;
    color: #3B2A1A;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .audio-toggle:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #6B4226, 0 4px 10px rgba(64,42,24,.14);
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .audio-toggle svg {
    width: 19px;
    height: 19px;
}

/* ===== Toast + stream notice ===== */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .wm-toast,
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .wm-stream-notice {
    background: #FBF3E4;
    border: 3px solid #8A5A3B;
    color: #3B2A1A;
    font-weight: 700;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .wm-stream-notice {
    box-shadow: 0 4px 0 #6B4226, 0 8px 16px rgba(64,42,24,.18);
}

/* ===== Welcome dialog contents (panel itself is in the shared rule) ===== */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome h2 {
    color: #3B2A1A;
    font-weight: 800;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-points {
    color: #6B4F33;
}
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .welcome-hint {
    color: #83653F;
}

/* ===== Focus =====
   The glass ring (#F4D9A8) all but vanishes on cream; a deep rust ring stays
   clearly visible on both the plaques and the accent buttons. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"])
    :is(.nav-write, .nav-leave, .nav-menu, .nav-links a, .composer-btn,
        .composer-close, .post-close, .compose-trigger, .welcome button,
        .travel-btn, .time-ctrl .auto, .audio-toggle,
        .time-travel-controls input, .post-more):focus-visible {
    outline: 3px solid #9C3D0C;
    outline-offset: 3px;
}

/* ===== Press transition =====
   The 2px sink needs a quick transition to read as a key press rather than a
   jump. Declared only under no-preference so reduced-motion users get an
   instant, still-legible state change. */
@media (prefers-reduced-motion: no-preference) {
    :is(html[data-skin="cosy"], html[data-skin="cosy-serif"])
        :is(.nav-write, .composer-btn, .travel-btn, .time-ctrl .auto,
            .welcome-primary, .welcome-secondary, .post-close, .composer-close,
            .audio-toggle) {
        transition: transform .12s ease, box-shadow .12s ease,
                    background-color .18s ease, color .18s ease, opacity .18s ease;
    }
}

/* ===== Variant C: cosy chrome, letter text =====
   Game UI outside, Cormorant Garamond inside the post and the composer —
   the letter keeps its voice even when the chrome turns playful. */
html[data-skin="cosy-serif"] .post-card .post-body,
html[data-skin="cosy-serif"] .composer-card textarea {
    font-family: 'Cormorant Garamond', Garamond, serif;
}

/* Travel bar placement. windma.css parks the travel bar at a fixed offset
   from the time control (right: 212px; bottom: 50px on phones), sized for the
   glass control (191x25px). The cosy control, with its 48px keys, measures
   233x62px, so at those offsets the travel bar covered the "auto" key.
   Offsets = control inset + control size + a 10-12px gap. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls {
    inset-inline-end: 263px;
}
@media (max-width: 720px) {
    :is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .time-travel-controls {
        inset-inline-end: 12px;
        inset-block-end: 84px;
    }
}

/* The cosy close key is 48px, and it sat on top of the first line of the
   post. The card scrolls (overflow-y: auto), so the key cannot hang off the
   corner without being clipped. Instead, a float at the start of the text
   reserves the key's footprint, so only the opening line wraps around it. */
:is(html[data-skin="cosy"], html[data-skin="cosy-serif"]) .post-body::before {
    content: "";
    float: inline-end;
    inline-size: 44px;
    block-size: 38px;
}