/*
 * Loaded LAST, after css/autoload/ — anything dropped in autoload would
 * otherwise win over the page structure.
 */
.reader-shell {
    display: flex;
    min-height: 100vh;
    background: var(--el-surface);
}

.reader-aside {
    flex: 0 0 var(--el-aside);
    border-right: 1px solid var(--el-line);
    background: var(--el-bg);
    padding: 1.25rem 0;
    overflow-y: auto;
    max-height: 100vh;
    position: sticky;
    top: 0;
}

.reader-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.reader-content { flex: 1 1 auto; padding: 2rem 1.5rem 3rem; }

@media (max-width: 860px) {
    .reader-aside {
        position: fixed;
        z-index: 40;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    .reader-aside.is-open { transform: translateX(0); }
    .reader-aside-toggle { display: inline-block !important; }
}