/* CV / drawer pages */

.drawer-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 1140px;
    margin: 0 auto;
}

/* Tree-menu sidebar (present on the CV index + secret pages). */
.drawer-nav {
    flex: 0 0 clamp(170px, 22%, 230px);
    padding: var(--space-3);
}

/* Content fills the remaining space; collapses to full width when no nav. */
.drawer-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-4);
}

.tree-root,
.tree-root ul {
    list-style: none;
    margin: 0;
    padding-left: var(--space-3);
}

.tree-root { padding-left: 0; }

.tree-menu > .eyebrow { margin: 0 0 var(--space-2); }

.tree-root a,
.tree-root summary {
    display: block;
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.tree-root a:hover,
.tree-root summary:hover {
    background: var(--color-surface-soft);
    color: var(--color-accent-deep);
}

.tree-root details > summary { list-style: none; }
.tree-root details > summary::-webkit-details-marker { display: none; }

.drawer-content .page-container {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    max-width: none;
}

.profile-section {
    padding: var(--space-3) 0;
    margin-bottom: var(--space-6);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.profile-section h2 {
    margin-top: 0;
    border-bottom: var(--border-soft);
    padding-bottom: var(--space-2);
    text-align: left;
    font-size: var(--text-xl);
}

.profile-section :is(h1, h3) { text-align: left; }
.profile-section h1 { font-size: var(--text-2xl); }
.profile-section h3 { font-size: var(--text-lg); }

/* Preformatted CV blocks should wrap and sit on a faint inset. */
.profile-section pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    color: var(--color-ink-soft);
}

/* CV landing — index of sub-sections */
.cv-index {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.cv-index a {
    display: block;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-soft);
    border: var(--border-soft);
    border-left: 3px solid var(--color-accent);
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.cv-index a,
.cv-index a:hover { text-decoration: none; }

.cv-index a:hover {
    background: color-mix(in srgb, var(--color-surface-soft) 70%, var(--color-accent) 30%);
    transform: translateX(2px);
}

.cv-index-title {
    display: block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--color-accent-deep);
    letter-spacing: 0.02em;
}

.cv-index-desc {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}

.secret-content {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-surface-soft);
    border: var(--border-soft);
    color: var(--color-ink);
}

.drawer-actions {
    margin-top: var(--space-5);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .drawer-layout { flex-direction: column; }

    .drawer-nav { flex: 1 1 auto; width: 100%; }

    .drawer-content {
        min-height: auto;
        padding: var(--space-3);
    }
}