/* Shared structural rules for every drawer's outer wrapper. Each drawer's razor
   co-applies "drawer-root <drawer>-drawer-root" so the chrome offset and the
   click-through behaviour live in exactly one place. */
.drawer-root {
    position: fixed;
    /* Anchor below the top chrome; visual-language.css owns the measurement. */
    top: var(--vl-chrome-top, 152px);
    right: 0;
    bottom: 0;
    width: 380px;
    pointer-events: none;
    z-index: 1040;
}

.drawer-root > * {
    pointer-events: auto;
}

/* Applied to every DxDrawer via CssClass="<drawer>-drawer-host drawer-host" so the
   border + shadow + closed-state pointer behaviour are single-sourced. */
.drawer-host.dxbl-drawer-closed {
    pointer-events: none;
}

.drawer-host .dxbl-drawer-panel {
    border-left: 1px solid var(--vl-line);
    box-shadow: var(--vl-shadow-panel);
}

/* Per-DetailView right-edge rail. Notes drawer renders this container; Follow (and
   any future drawer in the same DetailView) appends its tab via JS. The rail is the
   single source of truth for tab stacking (flex column) and sibling-hide-on-open
   (data-drawer-open attribute toggled by drawerTabRail.setDrawerOpen). */
.drawer-tab-rail {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    /* Above .dxbl-drawer-panel (z-index: 100) so tabs stay clickable when open. */
    z-index: 1041;
}

/* When any drawer in this rail is open, hide every tab so siblings don't float over
   the open drawer's panel. data-drawer-open is set by drawerTabRail.setDrawerOpen. */
.drawer-tab-rail[data-drawer-open="true"] > * {
    display: none;
}

/* Shared edge-tab appearance. Each drawer also applies its own accent class
   (.notes-edge-tab, .follow-edge-tab) for hover tone if it ever needs to differ. */
.drawer-edge-tab {
    width: 28px;
    min-height: 80px;
    padding: 8px 4px;
    border: 1px solid var(--vl-line);
    border-right: none;
    border-radius: var(--vl-control-radius) 0 0 var(--vl-control-radius);
    background: var(--vl-surface);
    color: var(--vl-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-shadow: var(--vl-sheet-shadow);
}

.drawer-edge-tab:hover {
    background: var(--vl-accent-softer);
}

.drawer-edge-tab .chevron {
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

.drawer-edge-tab .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.drawer-edge-tab .badge {
    background: var(--vl-accent);
    color: var(--vl-on-accent);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}