/* edet-sidebar.css — project switcher, across-docs search, chapter
   tree, + New chapter. Mobile-first: BASE is the off-canvas left
   drawer; desktop (@media min-width: 721px) makes it a static grid
   column. box-shadow only in the open state (an off-screen
   translateX(-100%) element with a base shadow casts into the viewport
   — see CONTEXT.md § 15 drawer-shadow note). Tokens from site.css. */

.dr-sidebar {
    grid-area: sidebar;
    position: absolute;
    z-index: 30;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);   /* match Musiced — chrome is continuous black */
    border-right: 1px solid var(--rule);
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform var(--dur-med) var(--ease-smooth),
                box-shadow var(--dur-med) var(--ease-smooth);
}
.edet-app[data-sidebar="open"] .dr-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 721px) {
    .dr-sidebar {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        box-shadow: none;
    }
}

/* ============================================================
   Desktop collapse-to-icon-rail (mirrors Musiced; DESKTOP ONLY).
   `.edet-app.sidebar-collapsed` shrinks the sidebar grid column to a thin
   rail of icons. Mobile (<=720px) is untouched: the rail + collapse chevron
   are display:none there, and the off-canvas drawer (data-sidebar) is unchanged.
   ============================================================ */
.dr-sidebar-head-row { display: flex; align-items: center; gap: 0.4rem; }
.dr-sidebar-head-row .dr-project-switcher { flex: 1 1 auto; min-width: 0; }
.dr-sidebar-rail { display: none; }
.dr-sidebar-collapse { display: none; }   /* hidden on mobile; shown on desktop-expanded below */
.dr-sidebar-rail .dr-icon-btn svg, .dr-sidebar-collapse svg { width: 18px; height: 18px; }

@media (min-width: 721px) {
    /* NO width transition on collapse/expand: the grid canvas (page + grid lines) is pan-
       compensated in JS to stay screen-fixed (edet-sidebar.js applySidebarCollapse), which
       needs the final column width immediately — an animated width would read mid-transition
       and the desk would drift/stutter. Instant resize + exact pan nudge = nothing moves. */
    /* collapse chevron is a desktop affordance, shown only while expanded (it lives in the
       head, which is hidden when collapsed; the rail's #dr-rail-expand re-expands) */
    .edet-app:not([data-focus="on"]) .dr-sidebar-collapse { display: inline-flex; }

    .edet-app.sidebar-collapsed { --dr-sidebar-w: 52px; }
    .edet-app.sidebar-collapsed .dr-sidebar > :not(.dr-sidebar-rail) { display: none; }
    .edet-app.sidebar-collapsed .dr-sidebar-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0;
    }
    .dr-sidebar-rail .dr-icon-btn { width: 34px; height: 34px; }
}

.dr-sidebar-head {
    flex-shrink: 0;
    /* same height as the toolbar row (--dr-chrome-h) and the sidebar starts at the same
       y, so this divider lands exactly on --edet-top-h — one continuous line with the
       toolbar's bottom rule across the whole top zone (was 3px low). */
    height: var(--dr-chrome-h, 48px);
    box-sizing: border-box;
    padding: 0 0.6rem;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
.dr-project-switcher {
    width: 100%;
    height: var(--control-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.6rem;
    background: var(--btn-bg);
    color: var(--fg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--dur-fast) var(--ease-smooth);
}
.dr-project-switcher::after {
    content: '\25BE';   /* ▾ */
    color: var(--fg-muted);
    font-size: 0.72em;
    flex-shrink: 0;
}
.dr-project-switcher:hover { background: var(--btn-bg-hover); }

/* ---- across-docs search ---- */
.dr-doc-search-wrap {
    flex-shrink: 0;
    padding: 0.5rem 0.6rem 0.4rem;
    position: relative;
}
.dr-doc-search {
    width: 100%;
    height: var(--control-h);
    box-sizing: border-box;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    padding: 0 0.6rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    outline: none;
}
.dr-doc-search:focus { border-color: var(--rule-hot); }
.dr-doc-search::placeholder { color: var(--fg-dim); }

.dr-doc-search-results { display: none; flex-direction: column; gap: 1px; margin-top: 0.4rem; }
.dr-doc-search-results[data-open="true"] { display: flex; }
.dr-doc-search-none { padding: 0.4rem 0.5rem; color: var(--fg-dim); font-size: var(--text-xs); }
.dr-doc-search-hit {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-fast) var(--ease-smooth);
}
.dr-doc-search-hit:hover { background: var(--row-hover); }
.dr-doc-search-hit-title { color: var(--fg); font-size: var(--text-sm); font-family: var(--font-mono); }
.dr-doc-search-hit-snippet {
    color: var(--fg-muted);
    font-size: var(--text-xs);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dr-doc-search-hit-snippet mark {
    background: var(--accent-muted);
    color: var(--accent);
    border-radius: 2px;
}

/* ---- chapter tree ---- */
.dr-chapter-tree-wrap { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 0.3rem 0.4rem; }
.dr-chapter-tree { display: flex; flex-direction: column; gap: 1px; }
.dr-tree-empty { padding: 0.6rem 0.5rem; color: var(--fg-dim); font-size: var(--text-sm); }

.dr-chapter-row {
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: background var(--dur-fast) var(--ease-smooth);
}
.dr-chapter-row:hover { background: var(--row-hover); }
.dr-chapter-row.active { background: var(--accent-muted); }
.dr-chapter-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    background: transparent;
    border: none;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-chapter-row.active .dr-chapter-title { color: var(--accent); }
.dr-chapter-more {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: 0.2rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: var(--text-base);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-smooth),
                background var(--dur-fast) var(--ease-smooth);
}
.dr-chapter-row:hover .dr-chapter-more,
.dr-chapter-row.active .dr-chapter-more { opacity: 1; }
.dr-chapter-more:hover { background: var(--btn-bg-hover); color: var(--fg); }
/* Touch devices can't hover — keep the ⋮ reachable. */
@media (hover: none) {
    .dr-chapter-more { opacity: 1; }
}

/* (The full-width "+ New chapter" foot button was replaced by the compact "+"
   in the Chapters section header — see .dr-section-add above.) */

/* ---- body ---- */
.dr-sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* The body delegates scrolling to .dr-chapter-tree-wrap, which wraps the
   three collapsible sections (Manuscript / Story Bible / Research) so the
   whole stack scrolls as one. */
.dr-sidebar-chapters {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---- collapsible top-level sections (Manuscript / Story Bible / Research).
   ONE shape applied 3×: a head with a left-aligned name + a RIGHT-side
   disclosure chevron (matching the site-wide .drawer-tools-chevron) and a
   sibling "+" action, over a grid-rows 1fr↔0fr collapsible body. ---- */
.dr-sec { display: flex; flex-direction: column; }
.dr-sec + .dr-sec { border-top: 1px solid var(--panel-border); }
.dr-sec-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.45rem 0.35rem;
}
.dr-sec-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.1rem 0;
    background: transparent;
    border: none;
    color: var(--fg-soft);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
}
.dr-sec-toggle:hover { color: var(--fg); }
.dr-sec-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* right-side chevron — same glyph + motion as site.css .drawer-tools-chevron */
.dr-sec-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dr-sec-chevron::before {
    content: '\25B8';   /* ▸ */
    display: inline-block;
    font-size: 0.8em;
    line-height: 1;
    color: var(--fg-muted);
    transition: transform var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.dr-sec[data-open="true"] .dr-sec-chevron::before { transform: rotate(90deg); color: var(--accent); }
.dr-sec-toggle:hover .dr-sec-chevron::before { color: var(--accent); }
/* grid-rows 1fr↔0fr collapse, same primitive as .drawer-tools-list */
.dr-sec-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-med) var(--ease-smooth);
}
.dr-sec[data-open="false"] .dr-sec-body { grid-template-rows: 0fr; }
.dr-sec-inner { min-height: 0; overflow: hidden; }

/* ---- section "+" action (shared by all three section heads) ---- */
.dr-sec-add {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 6px;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.dr-section-add-ico { width: 15px; height: 15px; display: block; }
.dr-sec-add:hover {
    background: var(--row-hover);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
}

/* ---- research binder (shares the entity-group visuals; lives inside the
   Research section, so it carries no own border/margin — the sections
   separate themselves via .dr-sec + .dr-sec) ---- */
.dr-research-wrap { padding: 0.1rem 0.4rem 0.5rem; }
.dr-research-groups { padding: 0 0.1rem; }

/* ---- entity groups (inside the Story Bible section) ---- */
.dr-entities { padding: 0.1rem 0.4rem 0.5rem; }
.dr-entity-group { margin-top: 0.2rem; }
.dr-entity-group-head { display: flex; align-items: center; }
.dr-entity-group-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.45rem;
    background: transparent;
    border: none;
    color: var(--fg-soft);            /* item 3: brighter + bigger so these read as important */
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
}
.dr-entity-group-toggle:hover { color: var(--fg); }
/* sub-group chevron on the RIGHT (consistent with the top sections + the
   site-wide .drawer-tools-chevron); the count chip stays beside the name. */
.dr-entity-group-toggle::after {
    content: '\25B8';   /* ▸ */
    margin-left: auto;
    color: var(--fg-muted);
    font-size: 0.7em;
    transition: transform var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.dr-entity-group[data-open="true"] .dr-entity-group-toggle::after { transform: rotate(90deg); color: var(--accent); }
.dr-entity-group-toggle:hover::after { color: var(--accent); }
.dr-entity-group-count { color: var(--fg-dim); font-weight: 400; }
/* grid-rows 1fr↔0fr collapse, same primitive as .how-to */
.dr-entity-group-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-med) var(--ease-smooth);
}
.dr-entity-group[data-open="false"] .dr-entity-group-body { grid-template-rows: 0fr; }
.dr-entity-group-inner { min-height: 0; overflow: hidden; }
.dr-entity-row { display: flex; align-items: center; border-radius: 6px; transition: background var(--dur-fast) var(--ease-smooth); }
.dr-entity-row:hover { background: var(--row-hover); }
.dr-entity-row.active { background: var(--accent-muted); }
.dr-entity-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.5rem 0.4rem 1.1rem;
    background: transparent;
    border: none;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-entity-row.active .dr-entity-title { color: var(--accent); }
.dr-entity-more {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 0.2rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: var(--text-base);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.dr-entity-row:hover .dr-entity-more,
.dr-entity-row.active .dr-entity-more { opacity: 1; }
.dr-entity-more:hover { background: var(--btn-bg-hover); color: var(--fg); }
@media (hover: none) { .dr-entity-more { opacity: 1; } }

/* research note chips: status + tags (Phase 12) */
.dr-research-chips { display: inline-flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; overflow: hidden; margin: 0 0.2rem; }
.dr-research-chip {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--fg-dim);
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0 0.3rem;
    white-space: nowrap;
}
.dr-research-status { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }