/* Reader dark mode — layered on top of fantasy/neutral appearance. */

html[data-color-scheme="dark"] {
    color-scheme: dark;
    --paper: #10151a;
    --surface: #1a2128;
    --surface-strong: #232b33;
    --surface-sidebar: #182027;
    --surface-warm: #1c242c;
    --surface-warm-strong: #24303a;
    --surface-card: rgba(26, 33, 40, 0.9);
    --surface-card-hover: rgba(32, 40, 48, 0.96);
    --reader-panel: rgba(20, 26, 32, 0.94);
    --reader-ink: #ece7de;
    --surface-note: rgba(36, 44, 52, 0.9);
    --ink: #ece7de;
    --muted: #9aa3ad;
    --line: #33404c;
    --green: #5fb89a;
    --wine: #d46a8c;
    --gold: #e0b04a;
    --blue: #7eb0d4;
    --plum: #c4a0c2;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

html[data-color-scheme="dark"] body.theme-neutral {
    --wine: #8aa4c8;
    --gold: #7eb0d4;
    --blue: #7eb0d4;
    --plum: #8aa4c8;
}

html[data-color-scheme="dark"] body.chaptertrail-site {
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(180deg, rgba(10, 14, 18, 0.72), rgba(10, 14, 18, 0.8)),
        var(--chaptertrail-site-bg, none);
}

html[data-color-scheme="dark"] body.chaptertrail-site .site-header,
html[data-color-scheme="dark"] body.chaptertrail-site.theme-neutral .site-header,
html[data-color-scheme="dark"] body.chaptertrail-site.theme-fantasy .site-header {
    background: rgba(18, 24, 30, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-color-scheme="dark"] .chapter-read-progress__track {
    background: rgba(255, 255, 255, 0.16);
}

html[data-color-scheme="dark"] .chapter-read-progress__fill {
    background: var(--green);
}

html[data-color-scheme="dark"] .chapter-read-progress__track--time {
    background: rgba(224, 176, 74, 0.22);
}

html[data-color-scheme="dark"] body.chaptertrail-site .site-main,
html[data-color-scheme="dark"] body.chaptertrail-site.theme-neutral .site-main,
html[data-color-scheme="dark"] body.chaptertrail-site.theme-fantasy .site-main {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(26, 33, 40, 0.88) 0%, rgba(18, 24, 30, 0.78) 100%);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-color-scheme="dark"] .chaptertrail-list-panel {
    border-color: var(--line);
    background: var(--surface-strong);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-color-scheme="dark"] .site-nav-dropdown,
html[data-color-scheme="dark"] .site-search,
html[data-color-scheme="dark"] .site-menu-toggle,
html[data-color-scheme="dark"] .site-account-trigger,
html[data-color-scheme="dark"] .site-login-link,
html[data-color-scheme="dark"] .site-color-scheme-toggle {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(22, 28, 34, 0.94);
    color: var(--ink);
}

html[data-color-scheme="dark"] .site-search input {
    color: var(--ink);
}

html[data-color-scheme="dark"] .discovery-filter-trigger {
    border-color: rgba(255, 255, 255, 0.14);
    background: #2f6f5e;
    color: #ffffff;
}

html[data-color-scheme="dark"] .discovery-filter-trigger:hover,
html[data-color-scheme="dark"] .discovery-filter-trigger.is-active {
    border-color: var(--green);
    background: var(--green);
    color: #ffffff;
}

html[data-color-scheme="dark"] .button--secondary,
html[data-color-scheme="dark"] .account-card,
html[data-color-scheme="dark"] .account-settings-card,
html[data-color-scheme="dark"] .message-client-list,
html[data-color-scheme="dark"] .message-detail,
html[data-color-scheme="dark"] .message-compose,
html[data-color-scheme="dark"] .message-pane-empty,
html[data-color-scheme="dark"] .profile-hero,
html[data-color-scheme="dark"] .profile-panel,
html[data-color-scheme="dark"] .fiction-chapter-panel,
html[data-color-scheme="dark"] .fiction-rating-panel,
html[data-color-scheme="dark"] .fiction-reviews-panel,
html[data-color-scheme="dark"] .fiction-detail-hero-shell--has-banner,
html[data-color-scheme="dark"] .chapter-reader-page,
html[data-color-scheme="dark"] .chapter-reader-paywall,
html[data-color-scheme="dark"] .browse-list,
html[data-color-scheme="dark"] .forum-table-wrap,
html[data-color-scheme="dark"] .forum-category-card,
html[data-color-scheme="dark"] .forum-rules,
html[data-color-scheme="dark"] .forum-tracker,
html[data-color-scheme="dark"] .knowledge-base__link,
html[data-color-scheme="dark"] .reader-plan-card,
html[data-color-scheme="dark"] .changelog-entry,
html[data-color-scheme="dark"] .login-modal__panel,
html[data-color-scheme="dark"] .register-modal__panel {
    border-color: var(--line);
    background: var(--surface-card);
    color: var(--ink);
}

html[data-color-scheme="dark"] h1,
html[data-color-scheme="dark"] h2,
html[data-color-scheme="dark"] h3,
html[data-color-scheme="dark"] .fiction-detail-copy h1,
html[data-color-scheme="dark"] .chapter-reader-header h1,
html[data-color-scheme="dark"] .discovery-author-page h1,
html[data-color-scheme="dark"] .browse-page-heading h1,
html[data-color-scheme="dark"] .chaptertrail-section-heading h1,
html[data-color-scheme="dark"] .chaptertrail-section-heading h2,
html[data-color-scheme="dark"] .profile-panel h2,
html[data-color-scheme="dark"] .account-card h2,
html[data-color-scheme="dark"] .account-empty-card h2 {
    color: var(--ink);
}

html[data-color-scheme="dark"] .chaptertrail-author-invite__summary {
    text-shadow:
        0 0 12px color-mix(in srgb, var(--gold) 80%, transparent),
        0 0 28px color-mix(in srgb, var(--gold) 50%, transparent),
        0 0 56px color-mix(in srgb, var(--gold) 32%, transparent);
}

html[data-color-scheme="dark"] .profile-sidebar,
html[data-color-scheme="dark"] .account-sidebar {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(16, 22, 28, 0.62);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    color: var(--ink);
}

html[data-color-scheme="dark"] .account-sidebar a,
html[data-color-scheme="dark"] .profile-sidebar a {
    color: var(--ink);
}

html[data-color-scheme="dark"] .account-sidebar a:hover,
html[data-color-scheme="dark"] .account-sidebar a.is-active,
html[data-color-scheme="dark"] .profile-sidebar a:hover,
html[data-color-scheme="dark"] .profile-sidebar a.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
}

html[data-color-scheme="dark"] .profile-info-list dt,
html[data-color-scheme="dark"] .profile-stat-list dt {
    color: var(--muted);
}

html[data-color-scheme="dark"] .profile-info-list dd,
html[data-color-scheme="dark"] .profile-stat-list dd,
html[data-color-scheme="dark"] .profile-info-list dd .managed-rich-text {
    color: var(--ink);
}

html[data-color-scheme="dark"] .profile-muted,
html[data-color-scheme="dark"] .profile-empty {
    color: var(--muted);
}

html[data-color-scheme="dark"] .profile-quote p,
html[data-color-scheme="dark"] .profile-custom-panel .managed-rich-text {
    color: var(--ink);
}

html[data-color-scheme="dark"] .profile-quote footer {
    color: var(--muted);
}

html[data-color-scheme="dark"] .profile-info-list div,
html[data-color-scheme="dark"] .profile-stat-list div {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-color-scheme="dark"] .profile-panel-heading a {
    color: var(--blue);
}

html[data-color-scheme="dark"] .forum-rules__summary,
html[data-color-scheme="dark"] .forum-rules__item strong {
    color: var(--ink);
}

html[data-color-scheme="dark"] .forum-rules__summary::after,
html[data-color-scheme="dark"] .forum-rules__item a {
    color: var(--gold, #d4a017);
}

html[data-color-scheme="dark"] .forum-category-card h2 a,
html[data-color-scheme="dark"] .forum-topic-row a,
html[data-color-scheme="dark"] .forum-tracker__title {
    color: var(--ink);
}

html[data-color-scheme="dark"] .forum-category-card h2 a:hover,
html[data-color-scheme="dark"] .forum-topic-row a:hover,
html[data-color-scheme="dark"] .forum-tracker__title:hover {
    color: var(--blue);
}

html[data-color-scheme="dark"] .forum-category-card p,
html[data-color-scheme="dark"] .forum-category-card__meta,
html[data-color-scheme="dark"] .forum-empty,
html[data-color-scheme="dark"] .forum-empty-cell,
html[data-color-scheme="dark"] .forum-topic-starter,
html[data-color-scheme="dark"] .forum-table th,
html[data-color-scheme="dark"] .forum-table__count,
html[data-color-scheme="dark"] .forum-table__last span,
html[data-color-scheme="dark"] .forum-tracker__heading,
html[data-color-scheme="dark"] .forum-tracker__board,
html[data-color-scheme="dark"] .forum-tracker__meta,
html[data-color-scheme="dark"] .forum-tracker__empty,
html[data-color-scheme="dark"] .forum-tracker__status {
    color: var(--muted);
}

html[data-color-scheme="dark"] .fiction-subtitle,
html[data-color-scheme="dark"] .fiction-author,
html[data-color-scheme="dark"] .fiction-synopsis,
html[data-color-scheme="dark"] .fiction-cover-scores__label,
html[data-color-scheme="dark"] .fiction-cover-scores__meta,
html[data-color-scheme="dark"] .discovery-author-page .lead,
html[data-color-scheme="dark"] .browse-page-heading p {
    color: var(--muted);
}

html[data-color-scheme="dark"] .fiction-cover-scores__label--overall {
    color: var(--ink);
}

html[data-color-scheme="dark"] .fiction-stat-grid dt,
html[data-color-scheme="dark"] .fiction-stat-grid small {
    color: var(--muted);
}

html[data-color-scheme="dark"] .fiction-stat-grid dd {
    color: var(--ink);
}

html[data-color-scheme="dark"] .fiction-stat-grid div {
    background: var(--surface-strong);
}

html[data-color-scheme="dark"] .fiction-stat-grid,
html[data-color-scheme="dark"] .fiction-chapter-list a,
html[data-color-scheme="dark"] .fiction-tags span,
html[data-color-scheme="dark"] .fiction-tags--compact span,
html[data-color-scheme="dark"] .trend-card .fiction-tags--compact span,
html[data-color-scheme="dark"] .fiction-row,
html[data-color-scheme="dark"] .home-shelf-card {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
}

html[data-color-scheme="dark"] .ai-disclosure-badge {
    border-color: color-mix(in srgb, #e0b04a 42%, var(--line));
    background: color-mix(in srgb, #e0b04a 16%, var(--surface));
    color: #f0d08a;
}

html[data-color-scheme="dark"] .ai-disclosure-badge--generated {
    border-color: #f87171;
    background: color-mix(in srgb, #ef4444 22%, var(--surface));
    color: #fecaca;
}

html[data-color-scheme="dark"] .discovery-filter-checkbox:not(.discovery-filter-checkbox--ai):has(input:checked),
html[data-color-scheme="dark"] .discovery-filter-checkbox:not(.discovery-filter-checkbox--ai).is-selected {
    border-color: color-mix(in srgb, var(--gold, #d4a017) 32%, var(--line));
    background: color-mix(in srgb, var(--gold, #d4a017) 12%, var(--surface));
}

html[data-color-scheme="dark"] .discovery-filter-checkbox--ai {
    border-color: #f87171;
    background: color-mix(in srgb, #ef4444 18%, var(--surface));
    color: #fecaca;
}

html[data-color-scheme="dark"] .landing-chapter-update {
    border-color: var(--line);
    background: var(--surface-strong);
    color: var(--ink);
}

html[data-color-scheme="dark"] .landing-chapter-update span {
    color: var(--muted);
}

html[data-color-scheme="dark"] .landing-chapter-update:hover {
    border-color: var(--blue);
    background: #2a333c;
    color: var(--ink);
}

html[data-color-scheme="dark"] .home-shelf-card__copy,
html[data-color-scheme="dark"] .profile-fiction-copy,
html[data-color-scheme="dark"] .author-work-card__copy,
html[data-color-scheme="dark"] .account-library-copy {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(16, 22, 28, 0.62);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    color: var(--ink);
}

html[data-color-scheme="dark"] .home-shelf-card__copy h3,
html[data-color-scheme="dark"] .home-shelf-card__copy h3 a,
html[data-color-scheme="dark"] .account-library-copy h2 a,
html[data-color-scheme="dark"] .profile-fiction-copy a,
html[data-color-scheme="dark"] .author-work-card__copy a {
    color: var(--ink);
}

html[data-color-scheme="dark"] .home-shelf-card__copy p,
html[data-color-scheme="dark"] .account-library-copy p,
html[data-color-scheme="dark"] .account-library-copy small {
    color: var(--muted);
}

html[data-color-scheme="dark"] .fiction-chapter-list small,
html[data-color-scheme="dark"] .fiction-empty-chapter,
html[data-color-scheme="dark"] .author-work-card__meta {
    color: var(--muted);
}

html[data-color-scheme="dark"] input,
html[data-color-scheme="dark"] textarea,
html[data-color-scheme="dark"] select {
    color: var(--ink);
    background: var(--surface-strong);
    border-color: var(--line);
}

html[data-color-scheme="dark"] .chapter-comment-form textarea {
    background: var(--surface-strong);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ink);
}

html[data-color-scheme="dark"] .chapter-comment {
    background: var(--surface-strong);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-color-scheme="dark"] .fiction-review-item {
    border-color: var(--line);
    background: var(--surface-strong);
    color: var(--ink);
}

html[data-color-scheme="dark"] .fiction-review-item__name,
html[data-color-scheme="dark"] .fiction-review-item__name strong,
html[data-color-scheme="dark"] .fiction-review-item__head h3,
html[data-color-scheme="dark"] .fiction-review-item__author-copy h3,
html[data-color-scheme="dark"] .fiction-review-item__body,
html[data-color-scheme="dark"] .fiction-review-item__body.managed-rich-text {
    color: var(--ink);
}

html[data-color-scheme="dark"] .fiction-review-item__meta {
    color: var(--muted);
}

html[data-color-scheme="dark"] .fiction-review-item__scores,
html[data-color-scheme="dark"] .fiction-review-item__toggle {
    color: var(--blue);
}

html[data-color-scheme="dark"] .fiction-review-item__name:hover strong {
    color: var(--wine);
}

html[data-color-scheme="dark"] .login-modal,
html[data-color-scheme="dark"] .register-modal {
    background: rgba(8, 12, 16, 0.72);
}

html[data-color-scheme="dark"] .chapter-reader-action {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
}

html[data-color-scheme="dark"] .chapter-reader-action:hover,
html[data-color-scheme="dark"] .chapter-reader-action:focus-visible {
    border-color: color-mix(in srgb, var(--wine) 40%, transparent);
    background: color-mix(in srgb, var(--wine) 14%, transparent);
    color: var(--wine);
}

html[data-color-scheme="dark"] .chapter-reader-action--danger {
    border-color: color-mix(in srgb, #f0a0b0 28%, transparent);
    color: #f0a0b0;
}

html[data-color-scheme="dark"] .chapter-reader-action--danger:hover,
html[data-color-scheme="dark"] .chapter-reader-action--danger:focus-visible {
    border-color: #f0a0b0;
    background: color-mix(in srgb, #f0a0b0 12%, transparent);
    color: #f0a0b0;
}

html[data-color-scheme="dark"] .chapter-reader-listen__panel,
html[data-color-scheme="dark"] .chapter-reader-listen__tab {
    border-color: color-mix(in srgb, var(--gold) 34%, transparent);
    background: color-mix(in srgb, var(--gold) 12%, var(--surface-strong));
}

html[data-color-scheme="dark"] .chapter-reader-listen__stop {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
}

html[data-color-scheme="dark"] .chapter-reader-listen__voice select {
    background: var(--surface-strong);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ink);
}

html[data-color-scheme="dark"] .chapter-reader-body [data-listening="true"] {
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
}

html[data-color-scheme="dark"] .chapter-position-notice {
    border-color: color-mix(in srgb, var(--gold) 36%, transparent);
    background: color-mix(in srgb, var(--gold) 12%, var(--surface-strong));
}

html[data-color-scheme="dark"] .chapter-position-notice--saved {
    border-color: color-mix(in srgb, var(--green) 32%, transparent);
    background: color-mix(in srgb, var(--green) 12%, var(--surface-strong));
}

html[data-color-scheme="dark"] .profile-edit-bar {
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface-card) 88%, transparent);
}

html[data-color-scheme="dark"] .profile-edit-saying,
html[data-color-scheme="dark"] .profile-edit-title,
html[data-color-scheme="dark"] .profile-edit-body,
html[data-color-scheme="dark"] .profile-edit-quote,
html[data-color-scheme="dark"] .profile-edit-attribution,
html[data-color-scheme="dark"] .profile-edit-bio,
html[data-color-scheme="dark"] .profile-edit-socials input {
    border-color: var(--line);
    background: var(--surface-strong);
    color: var(--ink);
}

html[data-color-scheme="dark"] .profile-hero.has-banner .profile-edit-saying,
html[data-color-scheme="dark"] .profile-hero.has-banner .profile-edit-socials input {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(12, 20, 30, 0.55);
    color: #ffffff;
}

html[data-color-scheme="dark"] .profile-block-chrome__label {
    color: var(--muted);
}

html[data-color-scheme="dark"] .profile-sidebar,
html[data-color-scheme="dark"] .account-sidebar.is-docked,
html[data-color-scheme="dark"] body > .account-sidebar,
html[data-color-scheme="dark"] .forum-tracker.is-docked,
html[data-color-scheme="dark"] body > .forum-tracker {
    border-color: rgba(255, 255, 255, 0.14);
    border-right: 0;
    background: rgba(16, 22, 28, 0.72);
    box-shadow: -12px 18px 36px rgba(0, 0, 0, 0.36);
}

html[data-color-scheme="dark"] .message-pane-empty h1 {
    color: var(--ink);
}

html[data-color-scheme="dark"] .message-body,
html[data-color-scheme="dark"] .message-body.managed-rich-text,
html[data-color-scheme="dark"] .message-parent,
html[data-color-scheme="dark"] .message-parent summary,
html[data-color-scheme="dark"] .message-compose-to,
html[data-color-scheme="dark"] .message-compose label {
    color: var(--ink);
}

html[data-color-scheme="dark"] .message-parent {
    border-color: var(--line);
    background: var(--surface-note);
}

html[data-color-scheme="dark"] .message-detail-head p,
html[data-color-scheme="dark"] .message-pane-empty p,
html[data-color-scheme="dark"] .message-list-empty {
    color: var(--muted);
}

html[data-color-scheme="dark"] .message-compose input[type="text"],
html[data-color-scheme="dark"] .message-compose textarea:not(.serial-editor-source) {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
}

html[data-color-scheme="dark"] .message-recipient-results {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
}

html[data-color-scheme="dark"] .message-recipient-results li.is-active,
html[data-color-scheme="dark"] .message-recipient-results li:hover:not(.is-empty) {
    background: color-mix(in srgb, var(--green) 22%, var(--paper));
}