/* ==========================================================================
   BLOCK: ASIDE PANEL - the shared sidebar component (section indexes,
   document lists, stat profiles). Scoped to the PANEL, not to a page
   block, so any block can host one: @scope rules cannot be shared
   across block scopes, which is why these rules live here and nowhere
   else. Load via $page_css on any page whose aside uses it.
   ========================================================================== */

@scope (.aside-panel) {
    :scope {
        background: #f6f6f6;
        background: light-dark(#f6f6f6, #0a0a0a);
        color: var(--panel-text);
        margin-block-end: var(--space-xs);
    }
    h2 {
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        line-height: 1.5;
        padding: clamp(24px, 2.4cqw, 32px) clamp(24px, 2.4cqw, 30px) 18px;
    }
    h2::after {
        content: "";
        display: block;
        inline-size: 38px;
        block-size: 3px;
        background: var(--accent-lime);
        margin-block-start: 10px;
    }
    nav a, .stat-line {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 18px clamp(24px, 2.4cqw, 30px);
        font-size: 0.94rem;
        font-weight: 500;
        line-height: 1.5;
        border-block-start: 1px solid var(--panel-border);
        transition: background 0.25s, color 0.25s, padding 0.25s;
    }
    nav a:hover {
        color: var(--accent-ink);
        padding-inline-start: calc(clamp(24px, 2.4cqw, 30px) + 8px);
    }
    nav a[aria-current="page"] { color: var(--accent-ink); }
    .stat-line b { font-weight: 900; color: var(--accent-ink); }
    .aside-note {
        padding: 12px clamp(24px, 2.4cqw, 30px) 18px;
        font-size: 0.68rem;
        color: var(--panel-muted);
    }
}