/*
 * reader.css - chrome for the in-place article reader (assets/js/reader.js).
 * Shared by Code Brain and Projects; split out of site.css to keep that file
 * from growing past the line limit.
 */
/* ---- reader --------------------------------------------------------
   A repo exploded to full screen. The canvas keeps turning underneath:
   the blur is light enough that the coloured nodes still drift behind
   the column, and the column itself stays opaque enough to read. */
/* Above the nav (30): a modal that the site chrome paints over is not
   a modal, and its own back control was unreachable. */
.reader {
    /* Above every layer of site chrome. 60 was enough for Code Brain's nav (30)
       and not for the Projects navbar (100), which painted over the reader and
       took its back button with it. The highest thing on the site is the skip
       link at 1000; a modal belongs above all of it. */
    position: fixed; inset: 0; z-index: 1100;
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--bg-primary, #0D0A08) 58%, transparent);
    backdrop-filter: blur(6px) saturate(1.15);
    animation: rd-in .32s var(--ease-silk, cubic-bezier(.22,1,.36,1));
}
.reader[hidden] { display: none; }
@keyframes rd-in { from { opacity: 0; } to { opacity: 1; } }

.rd-bar {
    display: flex; align-items: center; gap: 14px; flex: none;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--bg-primary, #0D0A08) 88%, transparent);
    border-bottom: 1px solid var(--border, rgba(255,240,228,0.09));
}
.rd-bar-mid {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-tertiary, #6B5D51);
}
.rd-back, .rd-tab {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase;
    border: 1px solid var(--border, rgba(255,240,228,0.09)); border-radius: 999px;
    padding: 8px 15px; background: none; cursor: pointer; text-decoration: none;
    color: var(--text-secondary, #A99584); flex: none; transition: .18s;
}
.rd-back { color: var(--accent, #C08457); }
.rd-back:hover, .rd-tab:hover { color: var(--text-primary, #F3EBE2); border-color: var(--accent, #C08457); }

.rd-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.rd-col {
    max-width: 860px; margin: 0 auto; padding: 40px 30px 100px;
    background: color-mix(in srgb, var(--bg-primary, #0D0A08) 84%, transparent);
    border-left: 1px solid var(--border, rgba(255,240,228,0.07));
    border-right: 1px solid var(--border, rgba(255,240,228,0.07));
    min-height: 100%;
}
@media (max-width: 900px) { .rd-col { border: 0; padding: 28px 20px 80px; } }
.rd-brief { margin-bottom: 8px; }
/* Spacing was left to the user agent, which is fine for one paragraph and wrong
   for an article: consecutive paragraphs ran together into a wall. */
.rd-brief p { color: var(--text-secondary, #A99584); font-size: 0.95rem; line-height: 1.75; margin: 0 0 1.1em; }
.rd-brief h2, .rd-brief h3, .rd-brief .post-h {
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: 1.05rem; color: var(--text-primary, #F3EBE2); margin: 28px 0 10px;
}
.rd-brief ul, .rd-brief ol { color: var(--text-secondary, #A99584); font-size: 0.92rem; line-height: 1.7; padding-left: 20px; }
.rd-brief li { margin-bottom: 6px; }
.rd-brief pre {
    background: var(--bg-secondary, #14100C); border: 1px solid var(--border, rgba(255,240,228,0.09));
    border-radius: 12px; padding: 14px 16px; overflow-x: auto;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.78rem;
}
.rd-brief code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.82em; }
.rd-brief pre code { white-space: pre; }

/* The reader lifts #post-content straight out of the generated page, so anything
   an article can contain has to be styled twice: once for blog/x.html and once
   here. Tables, blockquotes and numbered sections became possible when markdown
   stopped being flattened at storage, and without these they arrived unstyled -
   a borderless table reads as a run of loose words. */
.rd-brief { counter-reset: rdsection; }
.rd-brief h3 { counter-increment: rdsection; counter-reset: rdsub; }
.rd-brief h4 { counter-increment: rdsub; }
.rd-brief h3::before { content: counter(rdsection) "."; }
.rd-brief h4::before { content: counter(rdsection) "." counter(rdsub); }
.rd-brief h3::before, .rd-brief h4::before {
    color: var(--text-tertiary, #6E6257); font-variant-numeric: tabular-nums; margin-right: 0.5em;
}
.rd-brief h4 {
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: 0.95rem; color: var(--text-primary, #F3EBE2); margin: 20px 0 8px;
}
.rd-brief .table-scroll { overflow-x: auto; margin: 16px 0; }
.rd-brief table {
    border-collapse: collapse; width: 100%;
    font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.rd-brief thead th {
    text-align: left; padding: 6px 10px; white-space: nowrap;
    border-bottom: 1.5px solid var(--text-tertiary, #6E6257);
    color: var(--text-primary, #F3EBE2); font-weight: 600;
}
.rd-brief tbody td {
    padding: 6px 10px; vertical-align: top;
    border-bottom: 1px solid var(--border, rgba(255,240,228,0.09));
    color: var(--text-secondary, #A99584);
}
.rd-brief tbody tr:last-child td { border-bottom: 1.5px solid var(--text-tertiary, #6E6257); }
.rd-brief th.num, .rd-brief td.num { text-align: right; }
.rd-brief blockquote {
    margin: 16px 0; padding: 2px 0 2px 12px;
    border-left: 2px solid var(--border, rgba(255,240,228,0.09));
    color: var(--text-secondary, #A99584); font-size: 0.92rem; line-height: 1.7;
}
.rd-brief hr { border: 0; border-top: 1px solid var(--border, rgba(255,240,228,0.09)); margin: 24px 0; }

/* The abstract and the contents strip, which arrive with the lifted markup. The
   strip's links scroll the panel rather than navigating - a fragment navigation
   fires popstate, and the reader closes on popstate. */
.rd-brief .post-abstract {
    border-left: 2px solid var(--border, rgba(255,240,228,0.09));
    padding: 2px 0 2px 12px; margin: 0 0 18px;
}
.rd-brief .post-abstract-lab,
.rd-brief .post-toc-lab {
    display: block; font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-tertiary, #6E6257); margin-bottom: 4px;
}
.rd-brief .post-toc-lab { display: inline; margin: 0; }
.rd-brief .post-toc {
    /* The strip is a <nav>, and site.css pins navs to the top of the viewport.
       That rule is now scoped to body > nav; this is the belt to those braces,
       because the markup arrives from a page that never loads this stylesheet
       and the failure mode is the strip landing on top of .rd-bar. */
    position: static;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    margin: 0 0 22px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border, rgba(255,240,228,0.09));
    font-size: 0.82rem;
}
.rd-brief .post-toc a {
    color: var(--text-secondary, #A99584); text-decoration: none;
    border-bottom: 1px solid transparent;
}
.rd-brief .post-toc a:hover { color: var(--accent, #C08457); border-bottom-color: var(--accent, #C08457); }
.rd-brief h3, .rd-brief h4 { scroll-margin-top: 12px; }
.rd-brief img { max-width: 100%; height: auto; border-radius: 12px; }
.rd-brief a { color: var(--accent, #C08457); }
@media (prefers-reduced-motion: reduce) { .reader { animation: none; } }


/* ---- moving between repositories -----------------------------------
   The end of an article is where the decision to read another one gets
   made, so the next repository is named there rather than requiring a
   trip back to the list. */
.rd-next {
    /* site.css styles the bare `nav` element as a fixed top bar, which tore this
       block out of the column when it was a <nav>. It is a div now; this is the
       belt to that braces. */
    position: static;
    margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border, rgba(255,240,228,0.09)); }
.rd-step-hint {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-tertiary, #6B5D51); margin-bottom: 14px;
}
.rd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rd-step {
    display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
    background: var(--bg-card, rgba(255,246,238,0.038));
    border: 1px solid var(--border, rgba(255,240,228,0.09));
    border-radius: 14px; padding: 16px; color: inherit;
    transition: border-color .18s, transform .18s;
}
.rd-step:hover { border-color: var(--accent, #C08457); transform: translateY(-2px); }
.rd-step.next { order: 2; }
.rd-step.prev { order: 1; }
.rd-step-dir {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent, #C08457);
}
.rd-step-name { font-weight: 600; font-size: 0.98rem; color: var(--text-primary, #F3EBE2); }
.rd-step-desc {
    font-size: 0.8rem; color: var(--text-secondary, #A99584); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* The gutter closes the reader, so it should not look inert. */
.rd-scroll { cursor: zoom-out; }
.rd-col { cursor: auto; }

@media (prefers-reduced-motion: reduce) { .rd-step { transition: none; } }

/* ---- side arrows ----------------------------------------------------
   The arrow keys already move between repositories, but nothing on screen
   said so. These sit in the gutter beside the column, never over it: the
   column is 860px wide and centred, so half of it plus the button and its
   margins needs 1000px of viewport. Below that they are hidden and the
   end-of-article cards carry the job. */
.rd-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; display: none;
    align-items: center; justify-content: center;
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.5rem; line-height: 1; padding-bottom: 3px;
    border: 1px solid var(--border, rgba(255,240,228,0.09)); border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary, #14100C) 72%, transparent);
    color: var(--text-secondary, #A99584); cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
}
@media (min-width: 1000px) { .rd-arrow:not([hidden]) { display: flex; } }
.rd-arrow.prev { left: calc(50% - 430px - 56px); }
.rd-arrow.next { right: calc(50% - 430px - 56px); }
.rd-arrow:hover:not(:disabled) {
    color: var(--accent, #C08457); border-color: var(--accent, #C08457);
    background: color-mix(in srgb, var(--bg-secondary, #14100C) 92%, transparent);
}
.rd-arrow:disabled { opacity: 0.28; cursor: default; }
.rd-arrow:focus-visible { outline: 1px solid var(--accent, #C08457); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rd-arrow { transition: none; } }