/* Youseum dark theme (2026-10-21). Applies when /js/theme.js puts the class "yd" on <html>: the phone is in dark mode,
   or the visitor picked Dark in a tour's Settings. Everything is scoped under .yd, so light pages are untouched.
   Part 1 is Bootstrap 5.1 (which has no dark mode of its own); part 2 is the tour page (index.html) and its editor. */

.yd { --yd-bg: #121416; --yd-surface: #1e2126; --yd-raised: #262a30; --yd-field: #1a1d21; --yd-border: #3a3f46;
      --yd-text: #e6e8eb; --yd-muted: #a3abb4; --yd-link: #6ea8fe; --yd-link-hover: #9ec5fe; }

/* ---- 1. Bootstrap ---- */
.yd body { background-color: var(--yd-bg); color: var(--yd-text); }
.yd a { color: var(--yd-link); }
.yd a:hover { color: var(--yd-link-hover); }
.yd a.text-reset, .yd .text-reset { color: inherit !important; }
.yd .text-muted, .yd .text-secondary, .yd .text-faded { color: var(--yd-muted) !important; }
.yd .text-dark, .yd .text-body { color: var(--yd-text) !important; }
.yd hr { color: #5a616a; }
.yd .bg-light { background-color: #1b1e22 !important; }
.yd .bg-white { background-color: var(--yd-surface) !important; }
.yd .border, .yd .border-top, .yd .border-bottom, .yd .border-start, .yd .border-end { border-color: var(--yd-border) !important; }
.yd .shadow { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .55) !important; }

.yd .navbar-light .navbar-brand, .yd .navbar-light .navbar-nav .nav-link { color: var(--yd-text); }
.yd .navbar-light .navbar-nav .nav-link:hover, .yd .navbar-light .navbar-nav .nav-link.active { color: #fff; }
.yd .navbar-light .navbar-toggler { border-color: var(--yd-border); }
.yd .navbar-light .navbar-toggler-icon { filter: invert(1); }

.yd .card, .yd .modal-content, .yd .dropdown-menu, .yd .list-group-item, .yd .accordion-item, .yd .offcanvas, .yd .popover, .yd .toast {
  background-color: var(--yd-surface); color: var(--yd-text); border-color: var(--yd-border); }
.yd .card-header, .yd .card-footer, .yd .modal-header, .yd .modal-footer { border-color: var(--yd-border); }
.yd .dropdown-item { color: var(--yd-text); }
.yd .dropdown-item:hover, .yd .dropdown-item:focus { background-color: var(--yd-raised); color: #fff; }
.yd .accordion-button { background-color: var(--yd-surface); color: var(--yd-text); }
.yd .accordion-button:not(.collapsed) { background-color: #1f2f46; color: #cfe2ff; }
.yd .accordion-button::after { filter: invert(1); }
.yd .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.yd .form-control, .yd .form-select, .yd .input-group-text {
  background-color: var(--yd-field); color: var(--yd-text); border-color: var(--yd-border); }
.yd .form-control:focus, .yd .form-select:focus { background-color: var(--yd-field); color: #fff; }
.yd .form-control::placeholder { color: #8a929b; }
.yd .form-control:disabled, .yd .form-control[readonly], .yd .form-select:disabled { background-color: #24282d; }
.yd .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3c9d0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.yd .form-check-input { background-color: var(--yd-field); border-color: #5a616a; }
.yd .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
.yd .form-switch .form-check-input:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.45%29'/%3e%3c/svg%3e"); }

.yd .btn-light { background-color: var(--yd-raised); border-color: var(--yd-border); color: var(--yd-text); }
.yd .btn-outline-secondary { color: #c3c9d0; border-color: #5a616a; }
.yd .btn-outline-secondary:hover { background-color: #343a40; color: #fff; }
.yd .btn-outline-dark { color: var(--yd-text); border-color: var(--yd-muted); }
.yd .btn-outline-dark:hover { background-color: var(--yd-text); color: #121416; }
.yd .btn-outline-primary { color: var(--yd-link); border-color: var(--yd-link); }
.yd .btn-outline-primary:hover { background-color: #0d6efd; border-color: #0d6efd; color: #fff; }
.yd .btn-outline-success { color: #75b798; border-color: #75b798; }
.yd .btn-outline-success:hover { background-color: #198754; border-color: #198754; color: #fff; }
.yd .btn-outline-danger { color: #ea868f; border-color: #ea868f; }
.yd .btn-outline-danger:hover { background-color: #dc3545; border-color: #dc3545; color: #fff; }
.yd .btn-link { color: var(--yd-link); }
.yd .btn-default, .yd .btn:not([class*="btn-"]) { color: var(--yd-text); }   /* the editor's block buttons (Edit, Up, Down, Remove) */

.yd .table { color: var(--yd-text); border-color: var(--yd-border); --bs-table-striped-color: var(--yd-text);
  --bs-table-striped-bg: rgba(255, 255, 255, .04); --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(255, 255, 255, .07); }
.yd .table-light, .yd .table-light > th, .yd .table-light > td { --bs-table-bg: var(--yd-raised); color: var(--yd-text); border-color: var(--yd-border); }

.yd .alert-warning { background-color: #33290a; color: #ffe69c; border-color: #665210; }
.yd .alert-info { background-color: #0a2a35; color: #9eeaf9; border-color: #0e4b5e; }
.yd .alert-success { background-color: #0d2a1c; color: #a3cfbb; border-color: #1b5e3d; }
.yd .alert-danger { background-color: #351014; color: #f1aeb5; border-color: #5e1b21; }
.yd .alert-primary { background-color: #0d2240; color: #9ec5fe; border-color: #1a4378; }
.yd .alert-secondary, .yd .alert-light { background-color: var(--yd-raised); color: var(--yd-text); border-color: var(--yd-border); }
.yd .alert a, .yd .alert .alert-link { color: inherit; }
.yd .badge.bg-light { background-color: var(--yd-raised) !important; color: var(--yd-text) !important; border-color: var(--yd-border) !important; }
.yd .bg-light.text-dark { color: var(--yd-text) !important; }
.yd .breadcrumb-item + .breadcrumb-item::before, .yd .breadcrumb-item.active { color: var(--yd-muted); }
.yd .list-group-item-action:hover { background-color: var(--yd-raised); color: #fff; }
.yd .page-link { background-color: var(--yd-surface); border-color: var(--yd-border); }
.yd .carousel-caption { color: #fff; }

/* ---- 2. Tour page (index.html) ---- */
.yd nav.ynav { background-color: #16191c; border-top-color: #2c3137; }
.yd .ynav-b { background-color: #22262b; border-color: var(--yd-border); color: var(--yd-text); }
.yd .ynav-b:active { background-color: #2f343a; }
.yd .ynav-b small { color: var(--yd-muted); }
.yd .ynav-b.ynav-next { background-color: #0d6efd; border-color: #0d6efd; color: #fff; }
.yd .ynav-b.ynav-next small { color: #dbe7ff; }
.yd .ynav-b.ynav-next:active { background-color: #0b5ed7; }

.yd .sidenav { background-color: var(--yd-surface); }
.yd #sidenav.sidenav { background-color: #181b1f; box-shadow: 2px 0 14px rgba(0, 0, 0, .6); }
.yd #sidenav .ed-help { background-color: #33290a; border-color: #665210; color: #ffe69c; }
.yd #sidenav #tree-edit { background-color: var(--yd-surface); border-color: var(--yd-border); }
.yd .rte, .yd [contenteditable="true"] { background-color: var(--yd-field); color: var(--yd-text); }
.yd [style*="background:#fffdf5"] { background-color: var(--yd-field) !important; color: var(--yd-text); }   /* narration recorder's script */

.yd .partner-official { background-color: var(--yd-surface); border-color: var(--yd-border); }
.yd .partner-sponsor { color: #c3c9d0; }
.yd .partner-invite, .yd .partnerline .cover-credit, .yd .photocredit, .yd .wikilinks, .yd .maphint { color: var(--yd-muted); }
.yd .photocredit a, .yd .partnerline .cover-credit a, .yd .wikilinks a, .yd .pagefeedback .fb-bar a { color: inherit; }
.yd .wikilinks a:hover { color: var(--yd-link-hover); }
.yd .pagefeedback .fb-bar, .yd .nextstop .ns { background-color: rgba(30, 33, 38, .92); color: #c3c9d0; }
.yd .pagefeedback .fb-bar a { color: #c3c9d0; }
.yd .pagefeedback form { background-color: rgba(30, 33, 38, .97); color: var(--yd-text); }
.yd .nextstop a, .yd .moretours .mt b { color: var(--yd-link); }
.yd .moretours .mt { border-top-color: #2c3137; }
.yd .moretours .mt small { color: var(--yd-muted); }
.yd .narrate-btn { background-color: rgba(34, 38, 43, .95); color: var(--yd-text); border-color: var(--yd-border); }

/* the page outline (fancytree, skin-win8) */
.yd ul.fancytree-container { background-color: transparent; color: var(--yd-text); border-color: var(--yd-border); }
.yd span.fancytree-title { color: var(--yd-text); }
/* the skin's own highlight rules are very specific (focused tree, active and selected nodes), hence !important */
.yd span.fancytree-node:hover span.fancytree-title { background-color: #263244 !important; border-color: #34465f !important; }
.yd span.fancytree-active span.fancytree-title, .yd span.fancytree-focused span.fancytree-title,
.yd span.fancytree-selected span.fancytree-title { background-color: #1f3a5f !important; border-color: #3d6799 !important; color: #fff !important; }
.yd span.fancytree-expander, .yd #tree .fancytree-custom-icon.yt-ic { filter: invert(.85) hue-rotate(180deg); }
.yd #tree .fancytree-custom-icon.yt-stop { background-color: #3d6799; }

.yd dialog { background-color: var(--yd-surface); color: var(--yd-text); border-color: var(--yd-border) !important; }