/* After Hours palette. Every page and both toggle states read these tokens.
   Keep layout in the shared stylesheets; keep After Hours color here. */
body.skin-after-hours {
    --ah-page: #27221e;
    --ah-rail: #191b1b;
    --ah-panel: #342c26;
    --ah-panel-raised: #40352d;
    --ah-field: #211e1c;
    --ah-line: #6c5c4c;
    --ah-ink: #f0e6d6;
    --ah-muted: #c9bdad;
    --ah-gold: #d2af77;
    --ah-action: #4b634f;
    --ah-action-hover: #5b765d;
    --ah-moonlight: rgb(40 74 111 / 17%);
    --ah-shadow: rgb(11 9 8 / 24%);
    --gm-header: var(--ah-rail);
    --gm-page: var(--ah-page);
    --gm-hero: var(--ah-page);
    --gm-card: var(--ah-panel);
    --gm-card-bg: var(--ah-panel);
    --gm-card-text: var(--ah-ink);
    --gm-card-border: var(--ah-line);
    --gm-header-text: var(--ah-ink);
    --gm-hero-text: var(--ah-ink);
    --gm-section-text: var(--ah-ink);
    --gm-border: var(--ah-line);
    --gm-accent: var(--ah-gold);
    --gm-link-color: var(--ah-gold);
    --gm-button: var(--ah-action);
    --gm-secondary-button: var(--ah-field);
    --gm-secondary-button-dark: var(--ah-field);
    --gm-secondary-border-dark: var(--ah-line);
    --gm-interior-muted: var(--ah-muted);
    --home-header: var(--ah-rail);
    --home-page: var(--ah-page);
    --home-hero: var(--ah-page);
    --home-card: var(--ah-panel);
    --home-accent: var(--ah-gold);
    --home-header-text: var(--ah-ink);
    --home-hero-text: var(--ah-ink);
    --home-section-text: var(--ah-ink);
    --home-card-text: var(--ah-ink);
    --home-border: var(--ah-line);
    --home-button: var(--ah-action);
    --chapter-reader-bg: var(--ah-field);
    --chapter-reader-text: var(--ah-ink);
    --chapter-reader-border: var(--ah-line);
    --ui-field: var(--ah-field);
    --ui-ink: var(--ah-ink);
    --ui-border: var(--ah-line);
    --ui-soft: var(--ah-panel-raised);
    --ui-primary: var(--ah-action);
    --ui-on-primary: var(--ah-ink);
    --ui-focus: var(--ah-gold);
    color-scheme: dark;
    background:
        radial-gradient(ellipse 45rem 26rem at 87% 2%, var(--ah-moonlight), transparent 100%),
        radial-gradient(ellipse 32rem 20rem at 15% 0%, rgb(118 75 39 / 11%), transparent 100%),
        var(--ah-page) !important;
    color: var(--ah-ink) !important;
}

body.skin-after-hours.dark-mode {
    --ah-page: #1c1d1c;
    --ah-rail: #121719;
    --ah-panel: #292925;
    --ah-panel-raised: #34332d;
    --ah-field: #171a1a;
    --ah-line: #55574d;
    --ah-ink: #ece3d5;
    --ah-muted: #bbb9ae;
    --ah-gold: #c9aa77;
    --ah-action: #3d5749;
    --ah-action-hover: #4b6a55;
    --ah-moonlight: rgb(38 74 110 / 20%);
    --ah-shadow: rgb(0 3 6 / 32%);
}

/* Interior pages have one quiet canvas; the illustrated homepage keeps its atmosphere. */
html body.skin-after-hours:not(.home-page) {
    background: var(--ah-page) !important;
    background-image: none !important;
}

/* The request slip's red notebook margin clashes with this palette. */
html body.skin-after-hours .request-slip {
    padding-left: 18px !important;
}
html body.skin-after-hours .request-slip::before {
    content: none !important;
}

html body.skin-after-hours > header,
html body.skin-after-hours .gm-site-drawer,
html body.skin-after-hours .site-footer {
    background: var(--ah-rail) !important;
    background-image: none !important;
    border-color: var(--ah-line) !important;
    color: var(--ah-ink) !important;
}
html body.skin-after-hours > header > .site-logo { background: transparent !important; }
html body.skin-after-hours :is(header, .gm-site-drawer, .site-footer) a,
html body.skin-after-hours :is(header, .gm-site-drawer, .site-footer) a:visited,
html body.skin-after-hours :is(header, .gm-site-drawer) #user-greeting {
    color: var(--ah-ink) !important;
}
html body.skin-after-hours .gm-site-drawer nav > a:hover,
html body.skin-after-hours .gm-site-drawer nav > a.gm-nav-current {
    background: var(--ah-action) !important;
    color: var(--ah-ink) !important;
}
html body.skin-after-hours #theme-toggle {
    background: var(--ah-panel) !important;
    border-color: var(--ah-line) !important;
    color: var(--ah-gold) !important;
}

html body.skin-after-hours > main,
html body.skin-after-hours main.request-desk,
html body.skin-after-hours main.settings-page,
html body.skin-after-hours main.catalogue-search-page,
html body.skin-after-hours main.browse-discovery-page,
html body.skin-after-hours main.writing-desk,
html body.skin-after-hours main.author-page {
    background: transparent !important;
    color: var(--ah-ink) !important;
}

html body.skin-after-hours :is(
    article:not(.author-library-card), .story-header, .form-section,
    .settings-box, .filters, .browse-filter-core fieldset,
    .published-intro-card, .published-details-card, .published-social-card,
    .published-collapsible, .chapter-editor-card, .text-conversation-builder,
    .browse-work, .search-work, .dashboard-work, .dashboard-work-card,
    .account-box, .my-library-panel, .browse-shelf-card, .request-form-card,
    .request-browser, .request-desk-rules, .gm-shelf-preview,
    .catalogue-filters, .profile-picker-panel, .author-content-panel,
    .chapter-notes-panel, .chapter-schedule-panel, .library-note
) {
    background: var(--ah-panel) !important;
    border-color: var(--ah-line) !important;
    color: var(--ah-ink) !important;
    box-shadow: 0 12px 30px var(--ah-shadow);
}
html body.skin-after-hours .author-library-card.author-library-card-public {
    --author-card-bg: var(--ah-panel);
    --author-card-surface: var(--ah-panel-raised);
    --author-card-text: var(--ah-ink);
    --author-card-muted: var(--ah-muted);
    --author-card-border: var(--ah-line);
    --author-card-accent: var(--ah-gold);
    --author-card-button: var(--ah-action);
    background: var(--ah-panel) !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-line) !important;
}

html body.skin-after-hours :is(.chapter-text, #published-chapter-text,
    #published-notes, .preview-notes, .reader-controls) {
    background: var(--ah-field) !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-line) !important;
}
html body.skin-after-hours main :is(input:not([type="checkbox"]):not([type="radio"]),
    select, textarea, [contenteditable="true"]) {
    background-color: var(--ah-field) !important;
    color: var(--ah-ink) !important;
    -webkit-text-fill-color: var(--ah-ink) !important;
    border-color: var(--ah-line) !important;
    caret-color: var(--ah-ink);
}
html body.skin-after-hours main :is(input, textarea)::placeholder {
    color: var(--ah-muted) !important;
    -webkit-text-fill-color: var(--ah-muted) !important;
    opacity: 1 !important;
}
html body.skin-after-hours main :is(h1, h2, h3, h4, legend, strong),
html body.skin-after-hours main :is(p, span, label, small) {
    color: var(--ah-ink);
}
html body.skin-after-hours main :is(.field-note, .filter-note, .dashboard-work-meta,
    .library-panel-note, .request-field-help, .story-info, .story-stats,
    .published-secondary-meta) { color: var(--ah-muted) !important; }
html body.skin-after-hours main a,
html body.skin-after-hours main a:visited { color: var(--ah-gold) !important; }

html body.skin-after-hours main :is(button:not(#theme-toggle), .button-link) {
    background: var(--ah-field) !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-line) !important;
}
html body.skin-after-hours main :is(button:not(#theme-toggle), .button-link):hover {
    background: var(--ah-panel-raised) !important;
}
html body.skin-after-hours main :is(.primary-button, .start-reading-button,
    .publish-work-button, #submit-request-slip, #save-reader-name,
    .request-view-tab.is-active, .my-library-tab.is-active,
    .author-content-tab.is-active, #browse-quick-search-form button) {
    background: var(--ah-action) !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-gold) !important;
}
html body.skin-after-hours main :is(.tag-pill, .tag, .tags a, .relationship-badge) {
    background: var(--ah-panel-raised) !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-line) !important;
}
html body.skin-after-hours main :is(.browse-filter-core, .advanced-filter-content)
    label:has(input:checked) {
    background: var(--ah-action) !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-gold) !important;
}
html body.skin-after-hours .theme-options button[data-skin="after-hours"]::before {
    background: linear-gradient(135deg, #172b42 0 25%, #27221e 25% 50%,
        #4b634f 50% 75%, #d2af77 75% 100%) !important;
}
html body.skin-after-hours main :is(input, textarea, select, button, a):focus-visible {
    outline: 2px solid var(--ah-gold) !important;
    outline-offset: 2px;
}

/* The same reading room continues from the hero into the homepage cards. */
html body.home-page.skin-after-hours .home-hero {
    background: linear-gradient(90deg, rgb(9 16 26 / 38%), rgb(9 16 26 / 17%) 48%, rgb(9 16 26 / 42%)),
        url("after-hours-hero.png") center / cover no-repeat !important;
    color: var(--ah-ink) !important;
    border-color: var(--ah-line) !important;
}
html body.home-page.skin-after-hours.dark-mode .home-hero {
    background-image: linear-gradient(90deg, rgb(5 10 17 / 56%), rgb(5 10 17 / 29%) 48%, rgb(5 10 17 / 60%)),
        url("after-hours-hero.png") !important;
}
html body.home-page.skin-after-hours .home-hero :is(h2, p) { color: var(--ah-ink) !important; }
html body.home-page.skin-after-hours .home-hero-kicker { color: var(--ah-gold) !important; }
html body.home-page.skin-after-hours .home-search-form,
html body.home-page.skin-after-hours.dark-mode .home-search-form {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 8px !important;
}
/* The shared controls choose the field surface. Browser text fill must
   follow the computed ink instead of the old paper-field color. */
html body.home-page.skin-after-hours main .home-search-form input:not([type="checkbox"]):not([type="radio"]) {
    background: #f0e3cc !important;
    background-color: #f0e3cc !important;
    color: var(--ah-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    caret-color: currentColor !important;
    border-color: var(--ah-gold) !important;
}
html body.home-page.skin-after-hours main .home-search-form input::placeholder {
    color: var(--ah-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}
html body.home-page.skin-after-hours .home-search-form button {
    background: var(--ah-action) !important;
    border-color: var(--ah-gold) !important;
    color: var(--ah-ink) !important;
}
html body.home-page.skin-after-hours .home-search-form button:hover {
    background: var(--ah-action-hover) !important;
}
html body.home-page.skin-after-hours .home-doorway-card,
html body.home-page.skin-after-hours .recent-work-card {
    background: var(--ah-panel) !important;
    border-color: var(--ah-line) !important;
    color: var(--ah-ink) !important;
}
/* A jacket has its own frame. Keep the shelf open in both modes. */
html body.home-page.skin-after-hours #recently-updated-list > .gm-book-tile,
html body.home-page.skin-after-hours .gm-book-shelf > .gm-book-tile,
html body.home-page.skin-after-hours .gm-book-tile:hover,
html body.home-page.skin-after-hours .gm-book-tile:focus-within {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body.home-page.skin-after-hours .gm-book-tile :is(.gm-book-tile-title, .gm-book-tile-author) {
    padding-inline: 0 !important;
}
html body.home-page.skin-after-hours .gm-book-tile .gm-book-tile-author,
html body.home-page.skin-after-hours .gm-book-tile .gm-book-tile-author:visited,
html body.home-page.skin-after-hours .gm-shelf-preview-author,
html body.home-page.skin-after-hours .gm-shelf-preview-author:visited {
    color: var(--ah-gold) !important;
}
@media (max-width: 900px) {
    html body.skin-after-hours .gm-menu-toggle,
    html body.skin-after-hours .gm-menu-toggle:hover {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html body.skin-after-hours .gm-menu-toggle:focus-visible {
        outline: 2px solid var(--ah-gold) !important;
        outline-offset: 2px;
    }
}
html body.home-page.skin-after-hours .home-doorway-card :is(h3, p, span, .home-doorway-mark),
html body.home-page.skin-after-hours .recent-work-card :is(h3, p, span, strong) {
    color: var(--ah-ink) !important;
    -webkit-text-fill-color: var(--ah-ink) !important;
}
html body.home-page.skin-after-hours .home-doorway-card :is(.home-doorway-mark, a),
html body.home-page.skin-after-hours .recent-work-card a {
    color: var(--ah-gold) !important;
    -webkit-text-fill-color: var(--ah-gold) !important;
}
html body.home-page.skin-after-hours .home-doorway-card:hover {
    background: var(--ah-panel-raised) !important;
    border-color: var(--ah-gold) !important;
}
@media (max-width: 760px) {
    html body.home-page.skin-after-hours .home-hero {
        background-image: linear-gradient(180deg, rgb(9 16 26 / 43%), rgb(9 16 26 / 20%) 45%, rgb(9 16 26 / 48%)),
            url("after-hours-hero-mobile.png") !important;
        background-position: center 50% !important;
    }
    html body.home-page.skin-after-hours.dark-mode .home-hero {
        background-image: linear-gradient(180deg, rgb(5 10 17 / 57%), rgb(5 10 17 / 30%) 45%, rgb(5 10 17 / 63%)),
            url("after-hours-hero-mobile.png") !important;
    }
}
@media (max-width: 760px), (hover: none), (pointer: coarse) {
    html body.skin-after-hours #gm-shelf-preview :is(
        .gm-shelf-preview-close, .gm-shelf-preview-mobile-nav button
    ) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--ah-ink) !important;
    }
}

/* Profile genre links keep one brass color regardless of visit state. */
html body.skin-after-hours main.author-page #author-genre-list .author-genre-tag,
html body.skin-after-hours main.author-page #author-genre-list .author-genre-tag:visited,
html body.skin-after-hours main.author-page #author-genre-list .author-genre-tag:hover,
html body.skin-after-hours main.author-page #author-genre-list .author-genre-tag:focus-visible {
    color: var(--ah-gold) !important;
    -webkit-text-fill-color: var(--ah-gold) !important;
}