/* =============================================================================
   Discovery — full-width Explore landing screen (UI correction pass).
   The Explore page is no longer a permanent 320px sidebar + content pane;
   the hierarchy IS the landing page, full width, in the same deep-navy +
   parchment/gold KeyVerseBible visual direction (same token family as
   Section 06 / apps/web/daily/s06_styles.css) as a FinOps-style dense,
   expandable, searchable tree. Selecting a resource opens it in a centered
   overlay/modal over this page rather than replacing it.

   `.sidebar` / `#exploreSidebar` / `.tree-controls` class names are kept
   as-is from the prior split-pane layout — renaming them across both this
   file and style.css would be a large, purely-cosmetic diff with no
   behavioral upside, so they're reused here as plain CSS/JS hooks for what
   is now the full-width landing `<main>`, not an actual sidebar.
   ============================================================================= */

:root {
    --disc-navy: #030914;
    --disc-navy-raised: #0a1423;
    --disc-navy-elevated: #101a27;
    --disc-navy-border: rgba(214, 184, 111, 0.18);
    --disc-parchment: #f7f0df;
    /* Secondary text tier: for tier-2 category labels and leaf titles. Much
       brighter than --disc-parchment-muted (0.62) which reads as too dim for
       anything a user needs to actually read at a glance — muted is reserved
       for genuinely tertiary metadata (counts, badges, subtitle). */
    --disc-parchment-secondary: rgba(247, 240, 223, 0.86);
    /* Bumped from 0.62 — reads too dim for descriptor/metadata text a user
       actually needs to scan, not just decorative chrome. */
    --disc-parchment-muted: rgba(247, 240, 223, 0.72);
    --disc-gold: #d8b860;
    --disc-gold-glow: rgba(216, 184, 96, 0.2);
    --disc-row-hover: rgba(212, 175, 55, 0.08);
    --disc-row-active: rgba(212, 175, 55, 0.14);
    /* Faint, secondary hierarchy guide — deliberately much quieter than the
       gold-tinted --disc-navy-border, so nesting depth reads primarily from
       indentation + color-banded rows, not from a continuous filesystem-
       style vertical line running the height of the tree. */
    --disc-tree-guide: rgba(247, 240, 223, 0.035);
    /* Wide-explorer container: sized off the actual containing-block width
       (100%) rather than a vw-based guess, so it always fills whatever the
       real browser window/pane width is — no percentage-of-viewport
       shaving left dark margins on either side, however the page is
       zoomed/scaled. Only caps on genuinely huge (32"+/ultra-wide)
       monitors so row content doesn't stretch to uncomfortable line
       lengths. The visual "margin" users see is just --disc-gutter's
       inner padding below, not empty space outside the container. */
    --disc-landing-max-width: min(3200px, 100%);
    --disc-gutter: clamp(16px, 2vw, 32px);

    /* Explicit row-height tiers (desktop). Tier 1 = the 9-10 top-level
       domains (Bible Topics, Atlas, ...). Tier 2 = category groups nested
       inside a tier-1 group (Christ, God, Healing, Flagship Studies, ...).
       Subgroup = vault-derived folders one level quieter than Tier 2
       (Roles, Titles, Symbols > Genesis, ...). Leaf = individual records.
       Kept dense (per the reference explorer) on desktop; the >=44px touch
       target for mobile is enforced separately in the mobile media query
       below and is not affected by these. */
    --disc-row-h-tier1: 52px;
    --disc-row-h-tier2: 40px;
    --disc-row-h-tier3: 36px;
    --disc-row-h-subgroup: 33px;
    --disc-row-h-leaf: 34px;

    /* Category accent washes — subtle background tints + left-edge hue per
       top-level domain, translating the FinOps reference's color-coded
       resource families into KeyVerseBible's restrained navy/gold system.
       Applied only to tier-1 headers; the page still reads as deep navy. */
    --disc-accent-start-here: 157, 143, 112;
    --disc-accent-featured: 91, 132, 174;
    --disc-accent-bible-topics: 84, 148, 132;
    --disc-accent-ppe: 174, 116, 84;
    --disc-accent-biblical-themes: 96, 128, 184;
    --disc-accent-atlas: 84, 151, 166;
    --disc-accent-patterns-tensions: 124, 128, 190;
    --disc-accent-christian-living: 104, 118, 172;
    --disc-accent-practical-prayers: 184, 135, 74;
    --disc-accent-grow-in-faith: 87, 164, 122;
}

/* Defensive base rule: the page's only source of `.material-icons` styling
   is normally the external Google Fonts stylesheet linked in index.html
   (that stylesheet ships its own `.material-icons` rule bundled with the
   @font-face). If that request is blocked or slow — corporate proxy, ad
   blocker, offline preview — every icon element falls back to rendering its
   raw ligature text ("arrow_back", "chevron_right", "tune", ...) inline at
   body text size, which reads as stray/garbled characters, worst at the
   very first icon in the DOM (the top-left back button). This local rule
   guarantees consistent sizing/box behavior either way; it does not by
   itself fix a blocked font request (that needs a self-hosted font file),
   but keeps a font failure from also breaking layout. */
.material-icons {
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* --- Page shell: the whole page scrolls now (no inner fixed-height pane) ---
   Deliberately NOT setting overflow-y here: leaving it to the default
   viewport scrollbar (rather than making html/body their own explicit
   scroll container) is what keeps position:sticky on .sidebar-header
   reliable across engines/mobile browser chrome. Only the fixed 100vh/
   overflow:hidden from style.css — sized for the old single-pane app shell
   — needs undoing. */
html, body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
}

.explore-container {
    display: block;
    height: auto;
    min-height: 100vh;
}

/* --- Landing main: full width, deep navy, replaces the 320px sidebar --- */
.sidebar {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(84, 148, 132, 0.1), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(184, 135, 74, 0.08), transparent 30%),
        linear-gradient(180deg, #040b17 0%, var(--disc-navy) 42%, #020711 100%);
    border-right: none;
    flex-shrink: initial;
}

.sidebar-header {
    border-bottom: 1px solid var(--disc-navy-border);
    position: sticky;
    top: 0;
    z-index: 20;
    background:
        linear-gradient(180deg, rgba(3, 9, 20, 0.98), rgba(3, 9, 20, 0.94)),
        radial-gradient(circle at 18% 0%, rgba(216, 184, 96, 0.08), transparent 42%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.28),
        inset 0 -1px 0 rgba(216, 184, 96, 0.08);
    /* Compact on purpose: title row + toolbar row should total roughly
       90-120px on desktop, so several tier-1 domains are visible without
       scrolling. */
    padding: 14px var(--disc-gutter) 0;
}

/* Header row and toolbar share the tree's max-width/gutter so the whole
   page reads as one aligned column, not a header floating over a
   differently-inset hierarchy. */
.sidebar .header-top,
.sidebar .tree-controls {
    max-width: var(--disc-landing-max-width);
    margin-left: auto;
    margin-right: auto;
}

.sidebar .header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.sidebar .header-top-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}

/* Title control (also the Explore/Personal-Notes toggle) — a plain,
   compact title block now that it doesn't need to fill a narrow sidebar
   column as a pill button. */
.sidebar .mode-toggle-btn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(70vw, 640px);
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2px 4px;
    border-radius: 8px;
}

.sidebar .mode-toggle-btn:hover {
    background: rgba(216, 184, 96, 0.07);
}

.sidebar .mode-content-wrapper {
    min-width: 0;
}

.sidebar .mode-title-block {
    min-width: 0;
}

.sidebar .mode-title-block h1 {
    font-family: var(--font-heading);
    font-size: clamp(21px, 2.15vw, 27px);
    font-weight: 760;
    color: var(--disc-parchment);
    letter-spacing: 0;
    margin: 0;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .mode-title-text {
    font-family: var(--font-heading);
    font-size: clamp(21px, 2.15vw, 27px);
    font-weight: 760;
    color: var(--disc-parchment);
}

.sidebar .mode-subtitle {
    margin: 2px 0 0;
    font-size: 12.75px;
    color: rgba(247, 240, 223, 0.76);
    font-family: var(--font-ui);
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Language selector — secondary, compact, top-right.
   The `.custom-select-wrapper` base rule (shared/dropdown.css) sets
   `width: 100%`, written for its original full-width sidebar-column use.
   Reused here as a flex item, `width: 100%` resolves against the whole
   header row — NOT just this control — which is what was blowing the
   language selector up to nearly the page width. `width: auto` below
   overrides that so the item sizes to its own content again, matching
   `flex: 0 0 auto`. */
.sidebar .header-language-selector {
    flex: 0 0 auto;
    width: auto;
    max-width: 180px;
}

.sidebar .header-language-selector .custom-select {
    width: auto;
}

.sidebar .header-language-selector .custom-select-trigger {
    width: auto;
    font-size: 12.5px;
    color: var(--disc-parchment-muted);
    background:
        linear-gradient(180deg, rgba(247, 240, 223, 0.055), rgba(247, 240, 223, 0.025));
    border: 1px solid var(--disc-navy-border);
    /* Pill shape — same height family as the toolbar buttons (40px) but
       visually lighter (transparent-ish fill, no label chrome), per "less
       visual heaviness" than a full button. */
    border-radius: 999px;
    padding: 6px 14px 6px 12px;
    height: 36px !important;
    gap: 6px;
}

.sidebar .header-language-selector .custom-select-trigger:hover {
    color: var(--disc-gold);
    border-color: rgba(216, 184, 96, 0.38);
    background:
        linear-gradient(180deg, rgba(216, 184, 96, 0.09), rgba(247, 240, 223, 0.035));
    box-shadow: 0 0 18px rgba(216, 184, 96, 0.08);
}

.sidebar .header-language-selector .custom-select-trigger .lang-trigger-icon {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--disc-parchment-muted);
}

.sidebar .header-language-selector .custom-select-trigger:hover .lang-trigger-icon {
    color: var(--disc-gold);
}

.sidebar #sidebarHeader h2,
.sidebar .back-link,
.sidebar .dropdown-icon {
    color: var(--disc-parchment-muted);
}

.sidebar .back-link {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(247, 240, 223, 0.055), rgba(247, 240, 223, 0.018));
    border: 1px solid rgba(216, 184, 96, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.sidebar .back-link i {
    font-size: 20px;
}

.sidebar .back-link:hover {
    color: var(--disc-gold);
    background:
        linear-gradient(180deg, rgba(216, 184, 96, 0.12), rgba(247, 240, 223, 0.035));
    border-color: rgba(216, 184, 96, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 0 18px rgba(216, 184, 96, 0.1);
    transform: none;
}

/* Search box — now an inline flex child of the toolbar row, not a
   standalone block above it, so it can take the lion's share of the
   available toolbar width per the locked layout. */
.sidebar .search-box {
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(14, 26, 43, 0.96), rgba(7, 16, 30, 0.98));
    border: 1px solid var(--disc-navy-border);
    border-radius: 7px;
    padding: 0 12px;
    height: 40px;
    margin-bottom: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 22px rgba(0, 0, 0, 0.18);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.sidebar .search-box:focus-within {
    border-color: rgba(216, 184, 96, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(216, 184, 96, 0.1),
        0 10px 28px rgba(0, 0, 0, 0.24);
}

.sidebar .search-box .search-icon {
    position: static;
    transform: none;
    margin-right: 8px;
    flex-shrink: 0;
}

.sidebar .search-box input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--disc-parchment);
    font-family: var(--font-ui);
    box-shadow: none;
}

.sidebar .search-box input:focus {
    background: transparent;
    box-shadow: none;
}

.sidebar .search-box input::placeholder {
    color: var(--disc-parchment-muted);
}

.sidebar .search-icon {
    color: var(--disc-parchment-muted);
}

/* Toolbar row: [ Home ] [ Expand All ] [ Collapse All ] [ Search.... ] [ Filters ]
   One row on desktop; search gets the flexible width, buttons stay
   intrinsic-width so they don't compete with it. */
.sidebar .tree-controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    position: relative;
    padding: 0;
    border-top: none;
    margin-top: 0;
    box-shadow: none;
}

.sidebar .tree-controls .toolbar-btn {
    flex: 0 0 auto;
}

.sidebar .tree-controls button {
    display: flex;
    align-items: center;
    gap: 4px;
    background:
        linear-gradient(180deg, rgba(247, 240, 223, 0.045), rgba(247, 240, 223, 0.012));
    border: 1px solid var(--disc-navy-border);
    color: var(--disc-parchment-muted);
    border-radius: 7px;
    padding: 0 12px;
    height: 40px;
    font-size: 12.5px;
    font-family: var(--font-ui);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.sidebar .tree-controls button .material-icons {
    font-size: 16px;
}

.sidebar .tree-controls button:hover {
    color: var(--disc-gold);
    border-color: rgba(216, 184, 96, 0.32);
    background:
        linear-gradient(180deg, rgba(216, 184, 96, 0.09), rgba(216, 184, 96, 0.025));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 18px rgba(216, 184, 96, 0.075);
}

.sidebar .tree-controls button:active {
    transform: translateY(1px);
    box-shadow: none;
}

.sidebar .tree-controls button#discoveryFilters.active {
    color: var(--disc-navy);
    background: var(--disc-gold);
    border-color: var(--disc-gold);
}

/* Toolbar row sits directly above the tree with its own bottom padding —
   the header's border-bottom becomes the seam between toolbar and tree
   rather than a gap floating above an unrelated strip. */
.sidebar .tree-controls {
    padding-bottom: 12px;
}

#personalControls {
    flex: 1 1 240px;
    min-width: 0;
}

#personalControls .config-btn {
    height: 40px;
    margin-bottom: 0;
}

/* --- Discovery tree root ---
   Full-width landing content: the page itself scrolls now (see the
   html/body override above), not an inner fixed-height pane, so this is a
   plain block that grows with its content. A max-width keeps line lengths
   sane on ultra-wide monitors while still reading as "full width" like the
   FinOps reference on any realistic laptop/desktop viewport. */
#treeRoot.pane,
#personalRoot.pane {
    background: transparent;
    flex: none;
    height: auto;
    overflow-y: visible;
    width: 100%;
    padding: 16px clamp(18px, 2vw, 36px) 80px;
    max-width: var(--disc-landing-max-width);
    margin: 0 auto;
    font-family: var(--font-ui);
}

.disc-root {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
}

.disc-empty {
    color: var(--disc-parchment-muted);
    font-size: 13px;
    padding: 24px 8px;
    text-align: center;
}

/* --- Groups (collapsible) — three explicit visual tiers ---
   Tier 1: direct children of .disc-root (Bible Topics, Atlas, ...) — the
     9-10 major sections. Strongest band, boldest type, biggest chevron.
   Tier 2: any .disc-group nested inside another .disc-group, at any depth
     (Christ, Healing, Flagship Studies, Life Needs, ...) — one shared
     "category" treatment regardless of real data depth, per the 3-tier
     request; a quieter tint and medium weight.
   Tier 3: .disc-row leaf records — see further down.
   Selector note: `.disc-root > .disc-group` and `.disc-group .disc-group`
   never both match the same header, so there's no specificity conflict
   despite both selectors having equal weight. */
.disc-group {
    border-radius: 6px;
    overflow: hidden;
}

.disc-group-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
    color: var(--disc-parchment);
    overflow: hidden;
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.disc-group-header::before,
.disc-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.7);
    opacity: 0.78;
    box-shadow: 0 0 14px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.2);
}

.disc-row::before {
    width: 2px;
    opacity: 0;
}

/* Tier 1: top-level domain headers — a real horizontal color band spanning
   the full row width (not just a left accent line), so each major section
   is instantly distinguishable at a glance before reading its label. */
.disc-root > .disc-group > .disc-group-header {
    min-height: var(--disc-row-h-tier1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 52%),
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.28),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.16) 42%,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.085) 76%,
            rgba(8, 16, 28, 0.78));
    border: 1px solid rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.18);
    border-radius: 5px;
    /* Soft inner top highlight — gives the band a touch of depth so it
       reads as a substantial premium row, not a flat floating card. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        inset 16px 0 24px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.07),
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.disc-root > .disc-group > .disc-group-header:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 54%),
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.34),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.2) 42%,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.12) 74%,
            rgba(10, 20, 34, 0.8));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        inset 16px 0 28px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.075),
        0 9px 22px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.1);
}

.disc-root > .disc-group > .disc-group-header .disc-group-label {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 740;
    color: var(--disc-parchment);
}

.disc-root > .disc-group > .disc-group-header .disc-group-toggle {
    font-size: 20px;
}

/* Tier 2: any nested group header (category level, whatever its real
   nesting depth) — a quieter version of the same accent wash as its tier-1
   parent (inherited via --disc-tier1-rgb, set once on the tier-1 ancestor
   and never overridden here), not a flat neutral tint. This is what makes
   "Christ"/"God" visibly belong to the green "Bible Topics" family instead
   of reading as an unrelated gray row. */
.disc-group .disc-group > .disc-group-header {
    min-height: var(--disc-row-h-tier2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 58%),
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.18),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.115) 54%,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.06) 78%,
            rgba(9, 18, 30, 0.72));
    border-radius: 4px;
    border-top: 1px solid rgba(247, 240, 223, 0.025);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.disc-group .disc-group > .disc-group-header:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 58%),
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.24),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.14) 54%,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.08) 78%,
            rgba(11, 22, 36, 0.78));
}

.disc-group .disc-group > .disc-group-header .disc-group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--disc-parchment-secondary);
}

/* Named category accents — subtle background wash + left-edge hue per
   top-level domain, translating the FinOps reference's color-coded
   resource families into KeyVerseBible's restrained navy/gold system.
   Implemented as a custom property set on the tier-1 group itself so the
   background/border rules above stay written once. */
.disc-group-start-here { --disc-tier1-rgb: var(--disc-accent-start-here); }
.disc-group-featured { --disc-tier1-rgb: var(--disc-accent-featured); }
.disc-group-bible-topics { --disc-tier1-rgb: var(--disc-accent-bible-topics); }
.disc-group-ppe { --disc-tier1-rgb: var(--disc-accent-ppe); }
.disc-group-biblical-themes { --disc-tier1-rgb: var(--disc-accent-biblical-themes); }
.disc-group-atlas { --disc-tier1-rgb: var(--disc-accent-atlas); }
.disc-group-patterns-tensions { --disc-tier1-rgb: var(--disc-accent-patterns-tensions); }
.disc-group-christian-living { --disc-tier1-rgb: var(--disc-accent-christian-living); }
.disc-group-practical-prayers { --disc-tier1-rgb: var(--disc-accent-practical-prayers); }
.disc-group-grow-in-faith { --disc-tier1-rgb: var(--disc-accent-grow-in-faith); }

/* Stable disclosure/icon column — chevron plus an optional section/subgroup
   icon, wrapped together so a header's icon column always starts and ends
   at the same x-position whether or not this particular row has a section
   icon, and lines up with the leaf-row icon column (.disc-row-disclosure)
   directly beneath it. */
.disc-group-disclosure {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.disc-group-toggle {
    font-size: 18px;
    color: var(--disc-parchment-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

/* Tier-1 section icon (Start Here=compass, Featured=spark, Bible Topics=
   book, ...) — small, tinted with the same accent hue as the band itself so
   it reads as one coherent color-coded system rather than a decoration. */
.disc-group-icon {
    font-size: 20px;
    flex-shrink: 0;
    color: rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.95);
    filter: drop-shadow(0 0 8px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.22));
}

/* Vault-subgroup marker (Roles, Titles, Symbols, ...) — deliberately smaller
   and dimmer than a tier-1 section icon so it reads as a quiet internal
   signpost, never a peer of the top-level domain icons. */
.disc-subgroup-icon {
    font-size: 13px;
    flex-shrink: 0;
    color: var(--disc-parchment-muted);
    opacity: 0.55;
}

/* Closed state gets a visible (not just "not dim") chevron so collapsed
   vs. expanded is obvious at a glance — the previous 0.62-opacity muted
   tone read as barely-there at tier 1. */
.disc-root > .disc-group > .disc-group-header .disc-group-toggle {
    color: rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.9);
}

/* Descendant (not direct-child) combinator: the toggle now lives inside a
   .disc-group-disclosure wrapper one level deeper than the header, for
   stable icon-column alignment (see .disc-group-disclosure below). */
.disc-group.expanded > .disc-group-header .disc-group-toggle {
    transform: rotate(90deg);
    color: var(--disc-gold);
}

.disc-group-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned metadata column: a fixed-ish minimum width + right-aligned
   tabular numerals so counts line up visually into a column even though
   each row's label is a different length, exactly like the FinOps
   reference's right-hand count column. */
.disc-group-count {
    flex: 0 0 auto;
    min-width: 34px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--disc-parchment-secondary);
    font-variant-numeric: tabular-nums;
}

.disc-group-metadata,
.disc-row-metadata {
    display: none;
    font-size: 11px;
    color: rgba(247, 240, 223, 0.52);
    font-style: normal;
    font-weight: 450;
    letter-spacing: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.disc-root > .disc-group > .disc-group-header .disc-group-metadata {
    color: rgba(247, 240, 223, 0.6);
    font-size: 11.5px;
}

/* Nesting depth reads primarily from indentation + each row's own color
   band now, not from a continuous gold-tinted vertical rule running the
   full height of the tree (the "filesystem" look). The guide line here is
   intentionally faint (--disc-tree-guide, ~5% white) — present enough to
   thread the eye down one level, secondary to everything else. */
.disc-group-body {
    display: none;
    flex-direction: column;
    padding: 2px 0 0 14px;
    border-left: 1px solid rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.075);
    margin-left: 13px;
    gap: 1px;
}

.disc-group.expanded > .disc-group-body {
    display: flex;
}

/* Past two nesting levels (e.g. Biblical Culture > Symbols > Genesis) the
   guide line drops out entirely — indentation and each subgroup's own
   color wash already carry the hierarchy by that depth, so a third
   continuous vertical rule would only add filesystem-tree noise. */
.disc-group-body .disc-group-body .disc-group-body {
    border-left-color: transparent;
}

/* Tier 3: vault-derived subgroups (Christ > Roles, Christ > Titles,
   Biblical Culture > Symbols > Genesis, ...) — one level quieter than the
   tier-2 category catch-all above (Christ, God themselves), so a deep vault
   folder never reads as a peer of the category that contains it. Written as
   a 4-class selector (`.disc-group .disc-group.disc-group-vault-subgroup`)
   specifically so it reliably outranks the 3-class tier-2 rule above
   regardless of source order — the "Rule A / Rule B" specificity technique,
   no JS-assigned depth classes required. */
.disc-group .disc-group.disc-group-vault-subgroup > .disc-group-header {
    min-height: var(--disc-row-h-subgroup);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 58%),
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.14),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.09) 48%,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.045) 78%,
            rgba(6, 15, 26, 0.72));
    border-radius: 2px;
}

.disc-group .disc-group.disc-group-vault-subgroup > .disc-group-header:hover {
    background:
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.2),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.11) 48%,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.04) 78%,
            rgba(8, 18, 30, 0.78));
}

.disc-group .disc-group.disc-group-vault-subgroup > .disc-group-header .disc-group-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--disc-parchment-muted);
}

.disc-group .disc-group.disc-group-vault-subgroup > .disc-group-header .disc-group-toggle {
    font-size: 15px;
}

.disc-group .disc-group.disc-group-vault-subgroup > .disc-group-header .disc-group-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--disc-parchment-muted);
}

/* --- Leaf record rows (tier 3) ---
   Carries a persistent, low-opacity wash of its ancestor's section color
   (not just on hover) so a whole family — section header down to its
   individual leaf rows — reads as one continuous color-coded band at rest,
   the way the FinOps reference keeps every nested cost row tinted by its
   parent resource family rather than only highlighting on interaction.
   Hover/active states layer on top at higher opacity for feedback. */
.disc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--disc-row-h-leaf);
    padding: 0 10px;
    border-radius: 2px;
    cursor: pointer;
    color: var(--disc-parchment-secondary);
    font-size: 13px;
    font-weight: 400;
    /* Persistent, low-opacity section wash — a leaf row is never fully
       neutral navy, it always carries a visible trace of its ancestor's
       color, so a whole family reads as one continuous band from header
       to leaf instead of the color "running out" past tier 3. No left-edge
       bar here (kept to background color only, like the header rows above)
       so the color reads as a clean band rather than another sidebar tab. */
    background:
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.105),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.068) 44%,
            rgba(8, 18, 31, 0.82) 76%,
            rgba(6, 14, 25, 0.94));
    border-top: 1px solid rgba(247, 240, 223, 0.018);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Leaf hover/active pick up the same section accent as everything above
   them (inherited --disc-tier1-rgb) rather than a flat gold, so the whole
   ancestry — band, wash, icon, hover, selection — reads as one coherent
   color family from Bible Topics down to a single leaf record. */
.disc-row:hover {
    background:
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.17),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.085) 44%,
            rgba(12, 25, 41, 0.9) 76%,
            rgba(8, 17, 30, 0.98));
    color: var(--disc-parchment);
    box-shadow:
        0 0 0 1px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.07);
}

.disc-row:hover::before {
    opacity: 0.72;
}

.disc-row.active {
    background:
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.24),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.13) 44%,
            rgba(14, 28, 45, 0.92) 76%,
            rgba(8, 17, 30, 0.98));
    color: var(--disc-parchment);
    box-shadow:
        0 0 0 1px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.11),
        0 0 14px rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.13);
}

.disc-row.active::before {
    opacity: 1;
}

.disc-row-disclosure {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.disc-row-pending {
    cursor: default;
    opacity: 0.5;
}

.disc-row-pending:hover {
    background:
        linear-gradient(90deg,
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.105),
            rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.068) 44%,
            rgba(8, 18, 31, 0.82) 76%,
            rgba(6, 14, 25, 0.94));
    color: var(--disc-parchment-secondary);
}

.disc-row-icon {
    font-size: 15px;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.65;
}

/* Per-family leaf icon tinting — same hues as each family's badge below, so
   the color coding reads consistently from icon to badge on the same row.
   Two classes on the element (`.disc-row-icon.disc-row-icon-theme`), so
   these simply win over the generic `color: inherit` above by source order. */
.disc-row-icon-theme,
.disc-row-icon-atlas,
.disc-row-icon-devotion,
.disc-row-icon-life-need,
.disc-row-icon-essential-scripture {
    opacity: 0.85;
}

.disc-row-icon-theme { color: #b587c7; }
.disc-row-icon-atlas { color: #7ab3ab; }
.disc-row-icon-devotion { color: #c68f6a; }
.disc-row-icon-life-need { color: #c68fa0; }
.disc-row-icon-essential-scripture { color: #9db8c6; }

.disc-row-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-side metadata column for leaf rows — badges are pushed flush to
   the row's right edge (flex-shrink:0 + the title's flex:1 above), so
   badge columns line up the same way group counts do. */
.disc-row-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.disc-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--disc-parchment-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    line-height: 1.4;
}

.disc-badge-flagship {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--disc-navy);
    background: rgba(212, 175, 55, 0.78);
    border-color: rgba(244, 241, 230, 0.16);
}

.disc-badge-flagship-star {
    font-size: 10px;
    line-height: 1;
}

.disc-badge-theme { color: #b587c7; background: rgba(181, 135, 199, 0.12); border-color: rgba(181, 135, 199, 0.28); }
.disc-badge-atlas { color: #7ab3ab; background: rgba(122, 179, 171, 0.12); border-color: rgba(122, 179, 171, 0.28); }
.disc-badge-devotion { color: #c68f6a; background: rgba(198, 143, 106, 0.12); border-color: rgba(198, 143, 106, 0.28); }
.disc-badge-life-need { color: #c68fa0; background: rgba(198, 143, 160, 0.12); border-color: rgba(198, 143, 160, 0.28); }
.disc-badge-essential-scripture { color: #9db8c6; background: rgba(157, 184, 198, 0.12); border-color: rgba(157, 184, 198, 0.28); }
.disc-badge-explore { color: var(--disc-parchment-muted); background: rgba(255, 255, 255, 0.04); }

/* --- Explore presentation-hierarchy system ---
   Shared visual-clustering treatment for any Explore category whose
   studies have curated relationships worth showing (currently Flagship
   Studies — see FLAGSHIP_PRESENTATION_HIERARCHY in explore.js — and
   Christian Living — see CHRISTIAN_LIVING_PRESENTATION_HIERARCHY). Related
   studies read as one group — e.g. Son of Man with Lamb of God and
   Adam-Christ beneath it, or Anxiety/Fear/Peace with Waiting on God and
   Sickness/Healing beneath it.
   The icon and title move together as one "offset + branch + icon + title"
   unit (.disc-row-hierarchy, built in explore.js by wrapping the row's
   existing .disc-row-disclosure and .disc-row-title — neither element
   itself changes). At >=768px that wrapper spans the row's icon + title
   grid tracks (see the grid-column override below) so it still reads as
   two tracks' worth of space; metadata/badges stay direct children of the
   row in their own unmoved tracks, so Explore Study / EXPLORE / FLAGSHIP
   never shift regardless of hierarchy depth. Every row remains top-level,
   independently clickable; nothing here hides rows or nests them into new
   groups.
   Branch/accent color rides on each section's own --disc-tier1-rgb (set
   per category, e.g. .disc-group-featured / .disc-group-christian-living
   above) rather than a hardcoded color, so the hierarchy marks always match
   that category's existing accent instead of introducing a second palette. */
.disc-row-hierarchical > .disc-row-hierarchy {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .disc-row-hierarchical > .disc-row-hierarchy {
        grid-column: 1 / 3;
    }
}

.disc-row-hierarchical[data-hierarchy-level="1"] > .disc-row-hierarchy .disc-row-title {
    font-weight: 600;
}

.disc-row-hierarchical[data-hierarchy-level="1"] > .disc-row-hierarchy::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 3px;
    height: 12px;
    background: rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.55);
    border-radius: 1px;
}

.disc-row-hierarchical[data-hierarchy-level="2"] > .disc-row-hierarchy {
    padding-left: 28px;
}

.disc-row-hierarchical[data-hierarchy-level="3"] > .disc-row-hierarchy {
    padding-left: 52px;
}

.disc-row-hierarchical[data-hierarchy-level="2"] > .disc-row-hierarchy .disc-row-title,
.disc-row-hierarchical[data-hierarchy-level="3"] > .disc-row-hierarchy .disc-row-title {
    font-weight: 400;
}

.disc-row-hierarchical[data-hierarchy-level="2"] > .disc-row-hierarchy::before,
.disc-row-hierarchical[data-hierarchy-level="3"] > .disc-row-hierarchy::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 1px;
    background: rgba(var(--disc-tier1-rgb, 212, 175, 55), 0.32);
}

/* Icon stays the same design/size at every level — only a slight opacity
   reduction on nested levels so depth reads through the whole unit, not
   just the text weight. Never reduced enough to look like a different or
   broken icon. */
.disc-row-hierarchical[data-hierarchy-level="2"] > .disc-row-hierarchy .disc-row-icon {
    opacity: 0.88;
}

.disc-row-hierarchical[data-hierarchy-level="3"] > .disc-row-hierarchy .disc-row-icon {
    opacity: 0.8;
}

/* A small amount of extra breathing room above each new root cluster —
   roughly half a row, not a section break — so the root groups (e.g. Son of
   Man / High Priest / Resurrection / New Covenant / Word and Spirit, or
   Discernment / Anxiety / Work / Christian Community) read as distinct
   clusters without adding visible group-label rows. */
.disc-row-hierarchical.disc-hierarchy-root-gap {
    margin-top: 15px;
}

/* Narrower screens: keep all three hierarchy levels legible without eating
   too much of the title's width before any text starts, and keep the icon
   traveling with the title at every breakpoint. */
@media (max-width: 768px) {
    .disc-row-hierarchical[data-hierarchy-level="2"] > .disc-row-hierarchy {
        padding-left: 18px;
    }

    .disc-row-hierarchical[data-hierarchy-level="3"] > .disc-row-hierarchy {
        padding-left: 32px;
    }

    .disc-row-hierarchical.disc-hierarchy-root-gap {
        margin-top: 10px;
    }
}

/* --- Life Needs: lightweight, non-interactive group labels ---
   A restrained alternative to the indentation hierarchy above: Life Need
   studies stay a completely flat, single-level, fully-clickable list
   (built in explore.js by appendGroupedRecordList) — these labels only
   insert small section dividers between existing, unmodified rows so
   related needs (e.g. Peace in Anxiety / Grief & Comfort / Hope in Trials)
   read as one cluster. A label is never a study: no id, no route, no
   badge, no hover state, no click handler, and it is not counted toward
   the "12" total. */
.disc-row-group-label {
    padding: 14px 10px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--disc-parchment-muted, rgba(247, 240, 223, 0.72));
    opacity: 0.75;
    user-select: none;
}

.disc-row-group-label:first-child {
    padding-top: 4px;
}

/* --- Filters panel --- */
.disc-filters-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--disc-navy-raised);
    border: 1px solid var(--disc-gold-glow);
    border-radius: 10px;
    padding: 14px;
    z-index: 40;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.disc-filters-panel.hidden {
    display: none;
}

.disc-filter-section {
    margin-bottom: 14px;
}

.disc-filter-section h4 {
    color: var(--disc-gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 6px;
}

.disc-filter-note {
    color: var(--disc-parchment-muted);
    font-size: 10.5px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.disc-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: var(--disc-parchment);
    font-size: 12.5px;
    cursor: pointer;
}

.disc-filter-checkbox input {
    accent-color: var(--disc-gold);
}

.disc-filters-clear {
    width: 100%;
    background: transparent;
    border: 1px solid var(--disc-gold-glow);
    color: var(--disc-gold);
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
}

.disc-filters-clear:hover {
    background: rgba(212, 175, 55, 0.1);
}

/* =============================================================================
   Desktop/tablet row grid — replaces the old title-then-flex-pushed-right
   layout with real columns (disclosure/icon, title, badges, count) shared
   identically by .disc-group-header and .disc-row, so every tier's count/
   badge lines up in one continuous right-hand column the way the reference
   explorer's cost column does, and the wide container (see
   --disc-landing-max-width above) actually gets used without duplicating
   descriptive text in the middle of each row. */
@media (min-width: 768px) {
    .disc-group-header,
    .disc-row {
        display: grid;
        grid-template-columns: 42px minmax(170px, 1fr) auto 58px;
        column-gap: 12px;
        align-items: center;
    }

    .disc-group-disclosure,
    .disc-row-disclosure {
        grid-column: 1;
    }

    .disc-group-label,
    .disc-row-title {
        grid-column: 2;
        min-width: 0;
    }

    .disc-row-badges {
        grid-column: 3 / 5;
        justify-self: end;
        margin-left: 0;
    }

    .disc-group-count {
        grid-column: 4;
        justify-self: end;
    }
}

@media (min-width: 1024px) {
    #treeRoot.pane,
    #personalRoot.pane {
        width: 100vw;
        max-width: none;
        margin-left: 50%;
        margin-right: 0;
        transform: translateX(-50%);
        padding-left: clamp(24px, 2vw, 40px);
        padding-right: clamp(24px, 2vw, 40px);
    }

    .disc-root {
        width: 100%;
        max-width: none;
    }

    .disc-group-header,
    .disc-row {
        grid-template-columns:
            44px
            minmax(240px, 1fr)
            minmax(120px, 0.34fr)
            minmax(86px, auto)
            62px;
        column-gap: 14px;
    }

    .disc-group-metadata {
        display: block;
        grid-column: 3;
    }

    .disc-row-badges {
        grid-column: 4 / 6;
    }

    .disc-group-count {
        grid-column: 5;
    }
}

/* Full desktop tier (>=1280px): genuinely wide viewport, so the title
   column gets the extra room the old metadata column used to take. */
@media (min-width: 1280px) {
    #treeRoot.pane,
    #personalRoot.pane {
        padding-left: clamp(24px, 2vw, 40px);
        padding-right: clamp(24px, 2vw, 40px);
    }

    .disc-group-header,
    .disc-row {
        grid-template-columns:
            46px
            minmax(320px, 1fr)
            minmax(180px, 0.42fr)
            minmax(100px, auto)
            68px;
        column-gap: 16px;
    }

    .disc-row-metadata {
        display: block;
        grid-column: 3;
    }

    .disc-row-badges {
        grid-column: 4;
    }

    .disc-root > .disc-group > .disc-group-header {
        padding-right: 14px;
    }
}

/* --- Mobile: still a full-width page, never a sidebar ---
   The previous mobile treatment made .sidebar position:fixed/inset:0 as a
   stand-in "full screen" state, since opening content used to require
   getting the tree out of the way first. That's no longer needed — the
   tree is already the full-width page at every breakpoint, and opened
   content now lives in the overlay (below) instead of replacing the tree —
   so mobile only needs the toolbar to reflow and touch targets to grow. */
@media (max-width: 768px) {
    .sidebar-header {
        padding: 14px 16px 12px;
    }

    .sidebar .mode-subtitle {
        display: none; /* keep the compact header truly compact on phones */
    }

    /* Toolbar reflow: search gets its own full-width row, then
       Home/Expand/Collapse/Filters wrap to a second row beneath it —
       never forcing the 5-item desktop row into a narrow viewport. */
    .sidebar .tree-controls {
        flex-wrap: wrap;
    }

    .sidebar .search-box,
    #personalControls {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
    }

    .sidebar .tree-controls .toolbar-btn {
        flex: 1 1 auto;
    }

    .sidebar .tree-controls button span {
        display: none;
    }

    .sidebar .tree-controls button {
        padding: 8px;
        min-height: 44px;
        min-width: 44px;
    }

    .disc-filters-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        margin-top: 0;
    }

    /* Touch targets: rows and group headers must clear the ~44px minimum
       tap-target guideline on mobile (desktop keeps the denser tier-based
       36-46px rows — this only widens the hit area, not the visual
       compactness, via padding rather than font-size).
       Selectors are prefixed with #treeRoot (ID) specifically so this beats
       the tier-1/tier-2 desktop rules (`.disc-root > .disc-group > ...`,
       0,3,0) — a plain `.disc-row, .disc-group-header` list here would lose
       to those on specificity regardless of media-query source order. */
    #treeRoot .disc-row,
    #treeRoot .disc-group-header {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Row titles wrap instead of ellipsis-truncating on narrow screens —
       long theme/devotion titles were getting clipped to a few words. */
    .disc-row-title {
        white-space: normal;
        line-height: 1.3;
    }

    /* Flatten indentation after ~2 levels so deep branches (e.g. Grow in
       Faith > Scripture for Life > Life Needs) don't eat the narrow mobile
       width before any row text starts. Desktop keeps the full per-level
       indent; only the accumulating indent on mobile is capped. */
    .disc-group-body {
        padding-left: 12px;
        margin-left: 8px;
    }

    .disc-group-body .disc-group-body {
        padding-left: 10px;
        margin-left: 6px;
    }

    .disc-group-body .disc-group-body .disc-group-body {
        padding-left: 8px;
        margin-left: 4px;
    }

    .disc-root {
        gap: 7px;
    }

    .disc-row-badges {
        max-width: 34vw;
        overflow: hidden;
    }

    .disc-badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    #treeRoot.pane,
    #personalRoot.pane {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sidebar .header-top {
        gap: 8px;
    }

    .sidebar .mode-title-block h1,
    .sidebar .mode-title-text {
        font-size: 19px;
    }

    .sidebar .mode-toggle-btn .dropdown-icon {
        display: none;
    }

    .sidebar .header-language-selector {
        max-width: 126px;
    }

    .sidebar .header-language-selector .custom-select-trigger {
        padding-left: 10px;
        padding-right: 10px;
    }

    .disc-row-badges {
        display: none;
    }

    .disc-group-label,
    .disc-row-title {
        font-size: 12.5px;
    }
}

/* =============================================================================
   Content overlay — opened over the full-width landing page when a resource
   is selected. Desktop: a centered card (~92vw, capped ~1240px, ~92vh) for
   native Explore markdown; a larger near-fullscreen card for iframe-backed
   Theme/Atlas/Devotion routes, since those are full standalone pages, not
   designed to run inside a narrow reading column. Mobile: always fullscreen.
   ============================================================================= */
.content-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
}

.content-overlay.hidden {
    display: none;
}

.content-overlay-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 4%, rgba(var(--overlay-accent-rgb, 2, 8, 19), 0.16), transparent 32%),
        rgba(2, 8, 19, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.content-overlay-panel {
    --overlay-accent-rgb: 2, 8, 19;
    position: relative;
    z-index: 1;
    width: 92vw;
    max-width: 1240px;
    height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-content, #fff);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--overlay-accent-rgb), 0.46);
    box-shadow:
        0 28px 74px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(244, 241, 230, 0.06),
        0 0 44px rgba(var(--overlay-accent-rgb), 0.16);
}

/* iframe-backed families (Theme/Atlas/Devotion) — each a full standalone
   app/route, so give them the room those pages were actually designed for
   rather than the ~1240px reading column reserved for Explore markdown. */
.content-overlay-panel.overlay-fullscreen {
    width: 96vw;
    max-width: none;
    height: 96vh;
}

.content-overlay-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 58%),
        linear-gradient(90deg,
            rgba(var(--overlay-accent-rgb), 0.68),
            rgba(var(--overlay-accent-rgb), 0.42) 44%,
            rgba(2, 8, 19, 0.9));
    border-bottom: 1px solid rgba(var(--overlay-accent-rgb), 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.overlay-back-btn,
.overlay-close-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(2, 8, 19, 0.22);
    border: 1px solid rgba(244, 241, 230, 0.28);
    color: rgba(255, 250, 240, 0.96);
    border-radius: 8px;
    padding: 0 12px;
    min-height: 36px;
    font-size: 13px;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.15s ease;
}

.overlay-close-btn {
    padding: 0 10px;
}

.overlay-back-btn:hover,
.overlay-close-btn:hover {
    color: var(--disc-parchment);
    border-color: rgba(var(--overlay-accent-rgb), 0.72);
    background: rgba(2, 8, 19, 0.32);
}

.overlay-topbar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    color: #fffaf0;
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 10px rgba(0, 0, 0, 0.45);
}

/* Native (Explore markdown) body — reuses .content-wrapper from style.css
   for scroll/centering/typography, unchanged. */
#contentOverlayBody {
    flex: 1;
    min-height: 0;
}

#contentOverlayBody.hidden-for-iframe {
    display: none;
}

.overlay-iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: #fff;
    display: none;
}

.overlay-iframe.active {
    display: block;
}

body.overlay-open {
    overflow: hidden; /* the landing page shouldn't scroll behind the modal */
}

@media (max-width: 768px) {
    .content-overlay {
        padding: 0;
    }

    .content-overlay-panel,
    .content-overlay-panel.overlay-fullscreen {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        border-radius: 0;
    }

    .content-overlay-topbar {
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .overlay-back-btn span {
        display: none; /* icon-only back button to save width */
    }
}

/* =============================================================================
   Flagship premium shell — modal chrome refinement. Scoped with :has() to
   only the overlay panel currently showing a page whose <body markdownBody>
   was rendered with the `wbts-flagship-shell` class (added purely via the
   existing `developmentFormat: guided-cards` frontmatter gate — see
   explore.js / prerender_explore_pages.js). Every other Explore page keeps
   the original dark-navy topbar untouched. Where :has() isn't supported the
   topbar simply falls back to that original styling — a harmless no-op,
   not a broken state.
   ============================================================================= */
.content-overlay-panel:has(.wbts-flagship-shell) .content-overlay-topbar {
    min-height: 50px;
    padding: 9px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 60%),
        linear-gradient(90deg, rgba(36, 28, 17, 0.88), rgba(36, 28, 17, 0.74) 46%, rgba(15, 12, 8, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 10px rgba(0, 0, 0, 0.18);
}

.content-overlay-panel:has(.wbts-flagship-shell) .overlay-topbar-title {
    font-family: var(--flagship-heading-serif, var(--font-heading));
    letter-spacing: 0.01em;
}

/* --- Two-layer paper composition: outer parchment canvas ---
   .content-wrapper (#contentOverlayBody) already centers the article
   (display:flex; justify-content:center — see style.css) between the
   dark topbar above and the panel edges on either side; it just had no
   background of its own, so the article read as one flat white field.
   Giving it a warm, flat, low-saturation parchment tone turns that
   existing centered gap into a visible field the lighter study sheet
   (.content-view.wbts-flagship-shell, styled in style.css) rests on —
   dark modal chrome -> warm parchment canvas -> light study sheet ->
   content. No new DOM nodes; both existing elements just gained a
   background/border relationship. Scoped so the one page without the
   flagship shell (00-Introduction) keeps its plain white wrapper. */
.content-overlay-panel:has(.wbts-flagship-shell) .content-wrapper {
    background: var(--flagship-canvas);
}

@media (max-width: 768px) {
    /* Mobile: the canvas margin shrinks to a narrow strip (~8px) rather
       than the ~16px every other Explore page keeps — the study sheet
       (padded separately in style.css) takes the rest of the width, so
       the combined effective text gutter stays in the 14-18px range
       instead of stacking two full gutters. */
    .content-overlay-panel:has(.wbts-flagship-shell) .content-wrapper {
        padding: 0 8px !important;
    }
}