/* An individual note (note.html carries class="note-page") uses a slightly
   lighter background than the rest of the site. The Notes index and every
   other page keep the global #f6eee3. To revert: delete this rule. */
body.note-page { background-color: #fbf7f1; }
/* inside a colour mode, the note follows the mode background instead */
html[data-mode="brick"] body.note-page,
html[data-mode="alpine"] body.note-page { background-color: var(--page); }

/* ---- Notes index list ---------------------------------------------------- */
.notes-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
.notes-list li {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    padding: 0.35rem 0;
}
.notes-list .note-date {
    flex: 0 0 auto;
    width: 7.5em;
    opacity: 0.55;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

/* ---- A single note ------------------------------------------------------- */
.note {
    max-width: 70ch;
    margin: 0 auto;
}
.note h1 {
    margin: 1rem 0 0.25rem;
    line-height: 1.2;
}
.note-date-line {
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
}

/* readable body */
.note-body {
    line-height: 1.65;
}
.note-body p { margin: 0 0 1.1rem; }
.note-body h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.35rem;
}
.note-body h3 {
    margin: 1.6rem 0 0.5rem;
    font-size: 1.12rem;
}
.note-body ul, .note-body ol { padding-left: 1.4rem; }
.note-body li { margin: 0.25rem 0; }
.note-body blockquote {
    margin: 1.1rem 0;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid #d4c4a8;
    opacity: 0.9;
}
.note-body img { margin: 1rem 0; border-radius: 2px; }
.note-body code {
    background: #efe6d6;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.92em;
}
.note-body pre {
    background: #fcf9f4;
    border: 1px solid #d4c4a8;
    border-radius: 3px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
}
.note-body pre code { background: none; padding: 0; }

/* iframes: keep them inside the measure and responsive */
.note-body iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 1px solid #d4c4a8;
    border-radius: 2px;
    margin: 1.25rem 0;
}

/* A "figure" iframe or image breaks out wider than the text column, centered
   on the viewport, with sharp corners. For iframes the height is set to fit
   their content by note.js (no inner scrollbar). */
.note-body iframe.note-figure,
.note-body img.note-figure {
    width: min(1040px, 94vw);
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
    margin: 1.75rem 0;
}
/* keep the wrapping <p> from adding its own bottom gap under a figure image */
.note-body p:has(> img.note-figure) { margin: 0; }

/* the italic paragraph right after a figure is its caption: centered, small,
   muted, and pulled close to the figure. Kept as Markdown (not raw HTML) so
   any math inside the caption still renders through KaTeX. */
.note-body p:has(> img.note-figure) + p,
.note-body img.note-figure + p,
.note-body table + p {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.72;
    max-width: 60ch;
    margin: 0.4rem auto 1.9rem;
}

/* ---- Tables -------------------------------------------------------------- */
/* Break out a little wider than the text column, like a figure, and carry the
   same cream/tan/tile palette as the note's plots. Column alignment comes from
   the Markdown (:---:, ---:); math in cells still renders through KaTeX. */
.note-body table {
    border-collapse: collapse;
    width: min(960px, 94vw);
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 1.75rem 0 2rem;
    font-size: 0.92rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
}
.note-body thead th {
    background: #176B92;
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border);
}
.note-body tbody td {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border);
}
.note-body tbody tr:nth-child(odd)  { background: #FCF9F4; }
.note-body tbody tr:nth-child(even) { background: #F6EEE3; }

/* horizontal scroll for wide display math instead of overflowing the page */
.note-body .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0;
}

/* ---- Footnotes ----------------------------------------------------------- */
.fn-ref a { font-size: 0.85em; }
.fn-ref a::before, .fn-ref a::after { content: ""; }   /* no brackets on the ¹ marker */
.fn-sep {
    margin: 2.5rem 0 1rem;
    border: none;
    border-top: 1px solid #d4c4a8;
    max-width: 12rem;
    margin-left: 0;
}
.footnotes {
    font-size: 0.92rem;
    line-height: 1.5;
    opacity: 0.92;
    padding-left: 1.4rem;
}
.footnotes li { margin: 0.4rem 0; }
.footnotes li:target {
    background: rgba(212, 196, 168, 0.35);
    border-radius: 3px;
}
.fn-back {
    margin-left: 0.35rem;
    text-decoration: none;
    opacity: 0.7;
}
.fn-back::before, .fn-back::after { content: ""; }     /* the ← carries its own meaning */
.fn-back:hover { opacity: 1; }

/* In a colour mode, in-content links take the pop accent — but styles.css only
   targets `p a`, so links inside a list (e.g. the benchmark names) stay ink.
   Extend the accent to note-body list links so they match the prose links.
   Scoped to .note-body, so the nav (which also uses lists) is untouched. */
html[data-mode="brick"] .note-body li a,
html[data-mode="alpine"] .note-body li a { color: var(--accent); }