/* Shared appearance control */
:root {
    --appearance-bg: rgba(255, 253, 248, .96);
    --appearance-text: #18221f;
    --appearance-muted: #6d7873;
    --appearance-line: #d9d2c5;
    --appearance-hover: #f0ebe1;
}

.appearance-dock { position: fixed; z-index: 95; right: 18px; bottom: 18px; }
.appearance-trigger {
    display: inline-flex;
    min-height: 45px;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 6px;
    border: 1px solid var(--appearance-line);
    border-radius: 22px 12px 22px 22px;
    color: var(--appearance-text);
    background: var(--appearance-bg);
    box-shadow: 0 12px 32px rgba(22, 31, 27, .14);
    backdrop-filter: blur(14px);
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.appearance-trigger:hover { transform: translateY(-1px); }
.appearance-trigger-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #fff; background: #18221f; font-size: 15px; }
.appearance-panel {
    position: absolute;
    right: 0;
    bottom: 57px;
    width: 286px;
    padding: 12px;
    border: 1px solid var(--appearance-line);
    border-radius: 17px 13px 19px 14px;
    color: var(--appearance-text);
    background: var(--appearance-bg);
    box-shadow: 0 24px 60px rgba(18, 27, 23, .2);
    backdrop-filter: blur(18px);
    animation: appearanceIn .16s ease-out;
}
@keyframes appearanceIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.appearance-panel-heading { display: flex; align-items: flex-start; gap: 10px; padding: 4px 3px 11px 5px; }
.appearance-panel-heading > span { display: grid; gap: 5px; }
.appearance-panel-heading small { color: #ce5946; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.appearance-panel-heading strong { max-width: 215px; font: 600 16px/1.25 Georgia, serif; }
.appearance-close { display: grid; flex: 0 0 auto; width: 34px; height: 34px; margin-left: auto; place-items: center; border: 0; border-radius: 50%; color: var(--appearance-muted); background: transparent; font-size: 20px; cursor: pointer; }
.appearance-close:hover { background: var(--appearance-hover); }
.appearance-options { display: grid; gap: 6px; }
.appearance-choice { display: flex; min-height: 57px; align-items: center; gap: 10px; padding: 8px; border: 1px solid transparent; border-radius: 11px; color: var(--appearance-text); background: transparent; text-align: left; cursor: pointer; }
.appearance-choice:hover { background: var(--appearance-hover); }
.appearance-choice.selected { border-color: var(--appearance-line); background: var(--appearance-hover); }
.appearance-choice > span:nth-child(2) { display: grid; gap: 3px; }
.appearance-choice strong { font-size: 11px; }
.appearance-choice small { color: var(--appearance-muted); font-size: 8px; }
.appearance-choice > b { margin-left: auto; color: #628671; opacity: 0; }
.appearance-choice.selected > b { opacity: 1; }
.appearance-swatch { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid #d7d0c4; border-radius: 10px 7px 11px 8px; }
.appearance-swatch i { font-style: normal; }
.appearance-swatch.paper { color: #805b2f; background: #f8f1df; }
.appearance-swatch.night { color: #e9c66c; border-color: #37463f; background: #13201b; }
.appearance-swatch.clarity { color: #fff; border: 2px solid #000; background: #000; }
.appearance-status { min-height: 13px; margin: 9px 5px 0; color: var(--appearance-muted); font-size: 8px; }

:where(button, a, input, select, textarea):focus-visible { outline: 3px solid #e36a55; outline-offset: 3px; }

/* Night — low-glare, warm dark surfaces */
html[data-theme="night"] {
    color-scheme: dark;
    --ink: #edf3ef;
    --muted: #a8b4ae;
    --paper: #101713;
    --paper-deep: #0c120f;
    --card: #18231e;
    --line: #34443c;
    --coral: #f17b65;
    --coral-dark: #ff927e;
    --sage: #83aa91;
    --appearance-bg: rgba(24, 35, 30, .97);
    --appearance-text: #f2f5f3;
    --appearance-muted: #a8b4ae;
    --appearance-line: #405148;
    --appearance-hover: #26352e;
}
html[data-theme="night"] body { color: var(--ink); background: var(--paper); }
html[data-theme="night"] .site-header,
html[data-theme="night"] .media-header { border-color: #334239; background: rgba(14, 21, 18, .94); }
html[data-theme="night"] .brand-mark { color: #101713; background: #edf3ef; }
html[data-theme="night"] .nav-discover { color: #c4d4ca; border-color: #395045; background: #1b2a23; }
html[data-theme="night"] .nav-discover:hover { color: #fff; background: #24372e; }
html[data-theme="night"] .nav-search,
html[data-theme="night"] .hero-search { color: #edf3ef; border-color: #405148; background: #18231e; }
html[data-theme="night"] .nav-search input,
html[data-theme="night"] .hero-search input { color: #edf3ef; }
html[data-theme="night"] .community-tool,
html[data-theme="night"] .media-nav-tool,
html[data-theme="night"] .nav-auth-link,
html[data-theme="night"] .media-text-button { color: #c2cdc7; }
html[data-theme="night"] .community-tool:hover,
html[data-theme="night"] .media-nav-tool:hover { color: #fff; background: #25332d; }
html[data-theme="night"] .btn-dark,
html[data-theme="night"] .nav-join-button,
html[data-theme="night"] .media-button-dark,
html[data-theme="night"] .hero-search button { color: #101713; background: #edf3ef; }
html[data-theme="night"] .btn-paper { color: #101713; background: #f5efe4; }
html[data-theme="night"] .btn-coral,
html[data-theme="night"] .media-button-coral { color: #101713; }
html[data-theme="night"] .voice-record-button { color: #101713; background: #f17b65; }
html[data-theme="night"] .my-story-edit { color: #101713; background: #edf3ef; }
html[data-theme="night"] .my-story-share,
html[data-theme="night"] .story-share-button { color: #edf3ef; border-color: #405148; background: transparent; }
html[data-theme="night"] .btn-outline { color: #edf3ef; border-color: #607269; background: transparent; }
html[data-theme="night"] .community-account-chip:hover,
html[data-theme="night"] .community-account-chip[aria-expanded="true"],
html[data-theme="night"] .media-account-chip { color: #edf3ef; border-color: #405148; background: #18231e; }
html[data-theme="night"] .community-account-menu,
html[data-theme="night"] .media-account-menu { color: #edf3ef; border-color: #405148; background: #18231e; }
html[data-theme="night"] .community-account-menu button,
html[data-theme="night"] .media-account-menu a,
html[data-theme="night"] .media-account-menu button { color: #dce4df; }
html[data-theme="night"] .community-account-menu button:hover,
html[data-theme="night"] .media-account-menu a:hover,
html[data-theme="night"] .media-account-menu button:hover { background: #26352e; }
html[data-theme="night"] .hero,
html[data-theme="night"] main { background-color: var(--paper); }
html[data-theme="night"] .path-card { color: #18221f; border-color: #706b61; }
html[data-theme="night"] .path-label { color: #18221f; }
html[data-theme="night"] .content-section { border-color: #34443c; background: #0c120f; }
html[data-theme="night"] .sort-control { border-color: #405148; background: #202d27; }
html[data-theme="night"] .sort-button.active { color: #102018; background: #dfe9e3; }
html[data-theme="night"] .chip { color: #b7c3bd; border-color: #405148; }
html[data-theme="night"] .chip.active,
html[data-theme="night"] .chip:hover { color: #101713; border-color: #e7eee9; background: #e7eee9; }
html[data-theme="night"] .discovery-chip.active,
html[data-theme="night"] .discovery-chip:hover { color: #101713; border-color: #f4efe4; background: #f4efe4; }
html[data-theme="night"] .story-card,
html[data-theme="night"] .side-card,
html[data-theme="night"] .mini-story,
html[data-theme="night"] .opportunity-item { border-color: #34443c; background: #18231e; }
html[data-theme="night"] .story-body,
html[data-theme="night"] .opportunity-item blockquote,
html[data-theme="night"] .profile-bio { color: #c0cbc5; }
html[data-theme="night"] .lesson-box { color: #bcd0c2; background: #203229; }
html[data-theme="night"] .story-footer,
html[data-theme="night"] .leaderboard-list,
html[data-theme="night"] .leader-row,
html[data-theme="night"] .opportunity-actions { border-color: #34443c; }
html[data-theme="night"] .empty-state { border-color: #43534b; background: #15201b; }
html[data-theme="night"] .story-skeleton,
html[data-theme="night"] .leader-skeleton { background: #25332d; }
html[data-theme="night"] .share-card { color: #f4e8e4; border-color: #76483f; background: #35231f; }
html[data-theme="night"] .profile-stat,
html[data-theme="night"] .preference-panel { color: #dfe7e2; border-color: #405148; background: #202d27; }
html[data-theme="night"] .form-stack input,
html[data-theme="night"] .form-stack textarea,
html[data-theme="night"] .form-stack select,
html[data-theme="night"] .anonymous-choice { color: #eef3f0; border-color: #405148; background: #15201b; }
html[data-theme="night"] .form-stack > label,
html[data-theme="night"] .story-write-fields > label { color: #cbd6d0; }
html[data-theme="night"] .anonymous-choice strong { color: #eef3f0; }
html[data-theme="night"] .auth-tabs { background: #233029; }
html[data-theme="night"] .auth-tab.active { color: #102018; background: #e5ede8; }
html[data-theme="night"] .modal { color: #edf3ef; border-color: #405148; background: #111a16; }
html[data-theme="night"] .modal-close:hover { background: #26352e; }
html[data-theme="night"] .ai-story-tools,
html[data-theme="night"] .edit-ai-tools,
html[data-theme="night"] .ai-story-modal-header { color: #edf3ef; border-color: #405148; background: linear-gradient(135deg, #18231e, #111a16 58%, #1a2821); }
html[data-theme="night"] .ai-consent-choice { color: #c3cec8 !important; border-color: #405148; background: #15201b; }
html[data-theme="night"] .ai-optional { color: #b9d0c0; border-color: #405148; background: #203028; }
html[data-theme="night"] .ai-story-action { color: #101713; background: #edf3ef; }
html[data-theme="night"] .ai-story-action > span { color: #bd4d39; }
html[data-theme="night"] .ai-story-action small { color: #53635b; }
html[data-theme="night"] .ai-story-status { color: #a8b4ae; }
html[data-theme="night"] .ai-version-tabs { background: #202d27; }
html[data-theme="night"] .ai-version-tabs button.active { color: #101713; background: #e5ede8; }
html[data-theme="night"] .ai-review-column input,
html[data-theme="night"] .ai-review-column textarea { color: #edf3ef; border-color: #405148; background: #15201b; }
html[data-theme="night"] .ai-insight-column,
html[data-theme="night"] .original-version-panel { color: #edf3ef; border-color: #405148; background: #18231e; }
html[data-theme="night"] .ai-story-modal-footer { border-color: #405148; background: #111a16; }
html[data-theme="night"] .ai-clear-check { color: #d9e9df; border-color: #456352; background: #203229; }
html[data-theme="night"] .ai-clear-check small { color: #afc1b7; }
html[data-theme="night"] .ai-warning { color: #f5e6c7; border-color: #715e3b; background: #382f20; }
html[data-theme="night"] .ai-warning.important { border-color: #784a40; background: #382521; }
html[data-theme="night"] .ai-warning strong,
html[data-theme="night"] .ai-warning p { color: #f0d9c8; }
html[data-theme="night"] .translation-badge { color: #c7ddcf; border-color: #405b4b; background: #203229; }
html[data-theme="night"] .ai-selection-confirmation { color: #d8e9de; border-color: #456352; background: #203229; }
html[data-theme="night"] .ai-selection-confirmation strong { color: #edf5f0; }
html[data-theme="night"] .ai-selection-confirmation small { color: #b7c9be; }
html[data-theme="night"] .edit-version-context { color: #edf3ef; border-color: #405148; background: linear-gradient(135deg, #203229, #18231e); }
html[data-theme="night"] .edit-version-tabs { background: #111a16; }
html[data-theme="night"] .edit-version-tabs button.active { color: #101713; background: #edf3ef; }
html[data-theme="night"] .why-inline-link { color: #edf3ef; border-color: #405148; background: #18231e; }
html[data-theme="night"] .why-principles { background: #0c120f; }
html[data-theme="night"] .why-people span { color: #edf3ef; border-color: #405148; background: #18231e; }
html[data-theme="night"] .site-footer { background: #070b09; }

html[data-theme="night"] .media-page { color: #edf3ef; background: #101713; }
html[data-theme="night"] .media-hero { background: #111a16; }
html[data-theme="night"] .media-hero::before { border-color: #27362f; box-shadow: 0 0 0 85px rgba(44,61,53,.12), 0 0 0 170px rgba(44,61,53,.07); }
html[data-theme="night"] .media-hero-copy > p,
html[data-theme="night"] .browser-heading p,
html[data-theme="night"] .active-query { color: #aab7b0; }
html[data-theme="night"] .media-trust-row { border-color: #34443c; }
html[data-theme="night"] .media-trust-row strong { color: #bcc8c1; }
html[data-theme="night"] .voice-browser { background: #0c120f; }
html[data-theme="night"] .browser-heading { border-color: #34443c; }
html[data-theme="night"] .filter-heading,
html[data-theme="night"] .media-filters fieldset { border-color: #34443c; }
html[data-theme="night"] .media-filters label { color: #b3bfb9; }
html[data-theme="night"] .media-filters input:checked + span { color: #fff; }
html[data-theme="night"] .results-toolbar select,
html[data-theme="night"] .mobile-filter-toggle { color: #e8efeb; border-color: #405148; background: #18231e; }
html[data-theme="night"] .voice-card,
html[data-theme="night"] .shortlist-item,
html[data-theme="night"] .request-item { color: #edf3ef; border-color: #34443c; background: #18231e; }
html[data-theme="night"] .voice-card-person button { color: #edf3ef; }
html[data-theme="night"] .voice-excerpt { color: #bdc8c2; }
html[data-theme="night"] .voice-card-footer { border-color: #34443c; }
html[data-theme="night"] .shortlist-button { color: #c7d2cc; border-color: #405148; background: #17221d; }
html[data-theme="night"] .media-empty { color: #edf3ef; border-color: #405148; background: #151f1a; }
html[data-theme="night"] .media-final-cta { background: #17221d; }
html[data-theme="night"] .final-cta-inner p { color: #b1bdb7; }
html[data-theme="night"] .media-footer { background: #070b09; }
html[data-theme="night"] .filter-promise,
html[data-theme="night"] .media-privacy-note { color: #bcd0c2; background: #203229; }

/* Clarity — maximum contrast and stronger boundaries */
html[data-theme="clarity"] {
    color-scheme: light;
    --ink: #000;
    --muted: #1f1f1f;
    --paper: #fff;
    --paper-deep: #fff;
    --card: #fff;
    --line: #000;
    --coral: #c72d14;
    --coral-dark: #9c1d09;
    --sage: #005c37;
    --appearance-bg: #fff;
    --appearance-text: #000;
    --appearance-muted: #1e1e1e;
    --appearance-line: #000;
    --appearance-hover: #f1f1f1;
}
html[data-theme="clarity"] body,
html[data-theme="clarity"] .media-page { color: #000; background: #fff; }
html[data-theme="clarity"] .site-header,
html[data-theme="clarity"] .media-header { border-bottom: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .brand-mark { color: #fff; background: #000; }
html[data-theme="clarity"] .nav-discover { color: #000; border: 2px solid #000; background: #fff; }
html[data-theme="clarity"] .nav-search,
html[data-theme="clarity"] .hero-search { border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .content-section,
html[data-theme="clarity"] .voice-browser,
html[data-theme="clarity"] .media-hero,
html[data-theme="clarity"] .media-final-cta { color: #000; border-color: #000; background: #fff; }
html[data-theme="clarity"] .media-hero::before { display: none; }
html[data-theme="clarity"] .story-card,
html[data-theme="clarity"] .side-card,
html[data-theme="clarity"] .voice-card,
html[data-theme="clarity"] .opportunity-item,
html[data-theme="clarity"] .shortlist-item,
html[data-theme="clarity"] .request-item,
html[data-theme="clarity"] .modal { color: #000; border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .story-body,
html[data-theme="clarity"] .voice-excerpt,
html[data-theme="clarity"] .profile-bio,
html[data-theme="clarity"] .opportunity-item blockquote,
html[data-theme="clarity"] .media-hero-copy > p,
html[data-theme="clarity"] .browser-heading p { color: #111; }
html[data-theme="clarity"] .lesson-box,
html[data-theme="clarity"] .filter-promise,
html[data-theme="clarity"] .sharing-reassurance,
html[data-theme="clarity"] .media-privacy-note { color: #000; border: 1px solid #000; background: #fff; }
html[data-theme="clarity"] .chip,
html[data-theme="clarity"] .discovery-chip,
html[data-theme="clarity"] .media-button,
html[data-theme="clarity"] .btn,
html[data-theme="clarity"] .community-account-chip,
html[data-theme="clarity"] .media-account-chip,
html[data-theme="clarity"] .shortlist-button,
html[data-theme="clarity"] .mobile-filter-toggle { border-width: 2px; border-color: #000; box-shadow: none; }
html[data-theme="clarity"] .story-mode-button,
html[data-theme="clarity"] .voice-record-button,
html[data-theme="clarity"] .voice-stop-button,
html[data-theme="clarity"] .voice-discard-button,
html[data-theme="clarity"] .voice-story-panel,
html[data-theme="clarity"] .story-audio { border: 2px solid #000; box-shadow: none; }
html[data-theme="clarity"] .voice-record-button,
html[data-theme="clarity"] .voice-stop-button { color: #fff; background: #000; }
html[data-theme="clarity"] .my-story-item,
html[data-theme="clarity"] .my-stories-summary span,
html[data-theme="clarity"] .edit-audio-note,
html[data-theme="clarity"] .ai-story-tools,
html[data-theme="clarity"] .edit-ai-tools,
html[data-theme="clarity"] .original-version-panel,
html[data-theme="clarity"] .ai-review-column input,
html[data-theme="clarity"] .ai-review-column textarea,
html[data-theme="clarity"] .ai-consent-choice,
html[data-theme="clarity"] .translation-badge,
html[data-theme="clarity"] .ai-selection-confirmation { color: #000; border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .edit-version-context { color: #000; border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .edit-version-tabs { border: 1px solid #000; background: #fff; }
html[data-theme="clarity"] .edit-version-tabs button.active { color: #fff; background: #000; }
html[data-theme="clarity"] .ai-selection-confirmation strong,
html[data-theme="clarity"] .ai-selection-confirmation small { color: #000; }
html[data-theme="clarity"] .ai-story-action { color: #fff; border: 2px solid #000; background: #000; box-shadow: none; }
html[data-theme="clarity"] .ai-story-modal-header,
html[data-theme="clarity"] .ai-insight-column,
html[data-theme="clarity"] .ai-story-modal-footer { color: #000; border-color: #000; background: #fff; }
html[data-theme="clarity"] .ai-version-tabs { border: 1px solid #000; background: #fff; }
html[data-theme="clarity"] .ai-version-tabs button.active { color: #fff; background: #000; }
html[data-theme="clarity"] .why-inline-link,
html[data-theme="clarity"] .why-people span { color: #000; border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .why-principles { border-block: 2px solid #000; }
html[data-theme="clarity"] .why-principles article { border-color: #000; }
html[data-theme="clarity"] .form-stack input,
html[data-theme="clarity"] .form-stack textarea,
html[data-theme="clarity"] .form-stack select { color: #000; border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .sort-control,
html[data-theme="clarity"] .auth-tabs { border: 1px solid #000; background: #fff; }
html[data-theme="clarity"] .sort-button.active,
html[data-theme="clarity"] .auth-tab.active { color: #fff; background: #000; }
html[data-theme="clarity"] .media-process,
html[data-theme="clarity"] .discovery-section,
html[data-theme="clarity"] .manifesto-card { color: #fff; background: #000; }
html[data-theme="clarity"] .process-grid { background: #fff; }
html[data-theme="clarity"] .process-grid article { background: #000; }
html[data-theme="clarity"] .community-account-menu,
html[data-theme="clarity"] .media-account-menu { color: #000; border: 2px solid #000; background: #fff; box-shadow: none; }
html[data-theme="clarity"] .community-account-menu button,
html[data-theme="clarity"] .media-account-menu a,
html[data-theme="clarity"] .media-account-menu button { color: #000; }
html[data-theme="clarity"] :where(button, a, input, select, textarea):focus-visible { outline: 4px solid #005fcc; outline-offset: 3px; }

@media (max-width: 700px) {
    .appearance-dock { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    .appearance-trigger { min-width: 46px; min-height: 46px; justify-content: center; padding: 6px; }
    .appearance-trigger-label { display: none; }
    .appearance-panel { position: fixed; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 20px)); }
    .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .appearance-panel { animation: none; }
}