/* ==========================================================================
   Inkwell — Composition Book / Notebook Paper
   ========================================================================== */

/* --- Layout Override --- */
main:has(.inkwell) {
    display:flex;
    flex-direction: column;
    max-inline-size: none;
    padding: 0;
}

/* --- Inkwell Container --- */
.inkwell {
    position: relative;
    flex-grow:1;
}

/* --- Marble Noise Background --- */
.inkwell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/images/marble-tile.webp") repeat;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

/* --- Notebook (Content Panel) --- */
.notebook {
    position: relative;
    z-index: 1;
    max-inline-size: 52rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.notebook--with-sidebar {
    display: grid;
    grid-template-columns: 12rem 1fr;
    max-inline-size: 64rem;
    gap: 0;
}

/* --- Notebook Page (Lined Paper) --- */
.notebook-page {
    background-color: #14141a;
    background-image:
        /* Red margin line */
        linear-gradient(
            to right,
            transparent 3rem,
            rgba(180, 60, 60, 0.6) 3rem,
            rgba(180, 60, 60, 0.6) calc(3rem + 1px),
            transparent calc(3rem + 1px)
        ),
        /* Horizontal ruled lines */
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent calc(1.65em - 1px),
            rgba(90, 90, 140, 0.8) calc(1.65em - 1px),
            rgba(90, 90, 140, 0.8) 1.65em
        );
    background-size: 100% 100%, 100% 1.65em;
    background-attachment: local;
    padding: 2rem 2rem 2rem 3.5rem;
    line-height: 1.65;
    box-shadow:
        0 2px 20px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 0, 0, 0.3);
    /* Top binding edge */
    border-block-start: 3px solid #0a0a10;
    position: relative;
}

/* Binding shadow */
.notebook-page::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
}

/* --- Notebook Page Typography --- */
.notebook-page h1 {
    color: var(--accent);
    text-shadow: none;
    margin-block-end: 1.5rem;
    line-height: 1.65;
}

/* --- Notebook Sidebar --- */
.notebook-sidebar {
    background-color: #101016;
    padding: 2rem 1rem;
    border-inline-end: 1px solid rgba(180, 60, 60, 0.25);
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    max-block-size: 100dvh;
    overflow-y: auto;
    /* Match the page top binding */
    border-block-start: 3px solid #0a0a10;
}

.notebook-sidebar h2 {
    font-size: 0.9375rem;
    color: var(--accent-dim);
    text-shadow: none;
    margin-block-end: 1rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/* --- Table of Contents --- */
.toc {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-entry {
    margin-block-end: 0;
}

.toc-entry a {
    display: flex;
    align-items: baseline;
    color: var(--cyan-dim);
    padding-block: 0.35em;
    line-height: 1.65;
    gap: 0.5em;
}

.toc-entry a::after {
    display: none;
}

.toc-entry a:visited {
    color: var(--cyan-dim);
}

.toc-entry a:hover {
    color: var(--cyan);
}

/* Dot leaders */
.toc-leader {
    flex: 1;
    min-inline-size: 2rem;
}

.toc-type {
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 0.8125rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Compact sidebar variant */
.toc--compact .toc-entry a {
    font-size: 0.875rem;
    padding-block: 0.25em;
}

.toc-entry--active a {
    color: var(--cyan);
    border-inline-start: 2px solid var(--cyan);
    padding-inline-start: 0.5em;
}

.toc-entry--active a:visited {
    color: var(--cyan);
}

/* --- Poem --- */
.poem {
    margin-block-start: 1rem;
}

.stanza {
    margin-block-end: 1.65em;
    line-height: 1.65;
    color: var(--text-primary);
}

.stanza:last-child {
    margin-block-end: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 50rem) {
    .notebook--with-sidebar {
        grid-template-columns: 1fr;
    }

    .notebook-sidebar {
        position: static;
        max-block-size: none;
        border-inline-end: none;
        border-block-end: 1px solid rgba(180, 60, 60, 0.25);
        padding: 1rem 1.5rem;
    }

    .notebook-sidebar h2 {
        margin-block-end: 0.5rem;
    }

    .toc--compact {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1.5rem;
    }

    .toc--compact .toc-entry a {
        padding-block: 0.15em;
    }

    .notebook-page {
        padding: 1.5rem 1.5rem 1.5rem 2.5rem;
        background-image:
            linear-gradient(
                to right,
                transparent 2rem,
                rgba(180, 60, 60, 0.25) 2rem,
                rgba(180, 60, 60, 0.25) calc(2rem + 1px),
                transparent calc(2rem + 1px)
            ),
            repeating-linear-gradient(
                to bottom,
                transparent,
                transparent calc(1.65em - 1px),
                rgba(90, 90, 140, 0.5) calc(1.65em - 1px),
                rgba(90, 90, 140, 0.5) 1.65em
            );
        background-size: 100% 100%, 100% 1.65em;
        background-attachment: local;
    }

    .notebook {
        padding: 1rem 0.75rem;
    }

    .inkwell::before {
        opacity: 0.1;
    }
}