/* Custom extensions to Tufte CSS */

/* Theme toggle support - override prefers-color-scheme with data attribute.
   Both themes use neutral grays for a cohesive look. */
:root {
    /* Light: light gray background, dark gray text, black headings */
    --bg-color: #f0f0f0;
    --text-color: #4a4a4a;
    --text-muted: #808080;
    --heading-color: #000000;
    --link-color: #4a4a4a;
    --code-bg: #e2e2e2;
    --border-color: #d0d0d0;
    --selection-bg: #d0d0d0;
}

[data-theme="dark"] {
    /* Dark gray background, light gray text, white headings */
    --bg-color: #1e1e1e;
    --text-color: #b0b0b0;
    --text-muted: #808080;
    --heading-color: #ffffff;
    --link-color: #d0d0d0;
    --code-bg: #2a2a2a;
    --border-color: #3a3a3a;
    --selection-bg: #3a3a3a;
}

/* Base font size */
html {
    font-size: 15px;
}

/* Prevent horizontal overflow from sidenotes and full-width pseudo-elements.
   clip instead of hidden: doesn't create a scroll container, works reliably
   on iOS Safari, and doesn't interfere with position: sticky. */
html, body {
    overflow-x: clip;
}

/* Apply theme colors */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Headings and bold text use the heading color (black/white) */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

strong, b {
    color: var(--heading-color);
}

/* Override the built-in prefers-color-scheme when theme is manually set */
[data-theme="light"] body,
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

a:link, a:visited {
    color: var(--link-color);
}

hr {
    border-top-color: var(--border-color);
}

/* Monospace font for code, diagrams, etc. */
code, pre, pre > code, .monospace {
    font-family: 'Source Code Pro', Consolas, 'Liberation Mono', Menlo, monospace;
}

code, pre > code {
    background-color: var(--code-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.8em;
}

pre > code {
    padding: 1em;
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-x: auto;
}

::selection {
    background: var(--selection-bg);
}

/* Theme toggle button - lives inside .site-nav, aligned by flexbox */
.theme-toggle {
    position: static;
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle svg {
    display: block;
}

.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }

[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-toggle {
    background: #333;
    border-color: #4a4a4a;
}

/* Language toggle - circular button matching theme toggle exactly.
   Flag SVG sits inside with padding, same as sun/moon icons. */
.lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--code-bg);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.lang-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle:focus-visible,
.lang-toggle:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
}

.toc-list a:focus-visible,
.nav-links a:focus-visible,
.site-title:focus-visible,
.post-title a:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
}

.lang-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
}

/* Wider main content - override Tufte's 55% to ~75% (36% wider)
   This gives more room to the main text and less to margin notes */
section > p,
section > footer,
section > table {
    width: 75%;
}

section > dl,
section > ol,
section > ul {
    width: 70%;
    -webkit-padding-start: 5%;
}

blockquote p,
blockquote footer {
    width: 75%;
}

figure {
    max-width: 75%;
}

hr {
    width: 75%;
}

/* Adjust sidenote positioning - keep them from overflowing viewport */
.sidenote,
.marginnote {
    width: 40%;
    margin-right: -45%;
    max-width: 300px;
}

/* Dinkus separator between about and post list */
.about p:last-child {
    margin-bottom: 0;
}

.dinkus {
    text-align: center;
    width: 75%;
    color: var(--text-muted);
    letter-spacing: 0.5em;
    margin: 1.4rem 0 0 0;
    font-size: 1.2rem;
}

.dinkus + section {
    margin-top: 0;
}

.dinkus + section .post-item:first-child .post-title {
    margin-top: 0.5rem;
}

/* End-of-article tombstone */
.end-mark {
    text-align: center;
    width: 75%;
    color: var(--heading-color);
    font-size: 1.2rem;
    margin: 2rem 0 0 0;
}

/* Index page styles */
.post-list {
    list-style: none;
    padding: 0;
    width: 75%;
}

.post-item {
    margin-bottom: 2rem;
}

.post-title {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}

.post-title a {
    text-decoration: none;
    color: var(--heading-color);
}

.post-title a:hover {
    text-decoration: underline;
}

.post-meta {
    font-size: 1rem;
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-date {
    color: var(--text-muted);
}

.post-excerpt {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Header navigation */
.site-header {
    position: sticky;
    top: 0;
    padding: 1rem 0 0 0;
    margin-bottom: 2rem;
    z-index: 100;
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Extend to viewport edges: body padding-left is 12.5vw, no padding-right */
    left: -12.5vw;
    right: 0;
    background-color: var(--bg-color);
    z-index: -1;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.site-title {
    font-size: 1.4rem;
    font-variant: small-caps;
    text-decoration: none;
    letter-spacing: 0.05em;
    color: var(--heading-color);
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
}

.nav-links a {
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--text-muted);
}

.nav-links a:hover {
    color: var(--text-color);
}

/* Back link on post pages */
.back-link {
    font-size: 1rem;
    margin-bottom: 2rem;
    display: block;
}

/* Table styles */
table {
    width: auto;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 1rem;
}

th, td {
    text-align: left;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

th {
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

tr:last-child td {
    border-bottom: none;
}

/* Table of Contents sidebar - understated, discrete navigation aid
   Base font is 15px (Tufte CSS). ToC should be meaningfully smaller.

   Vertical alignment: ToC top should align with post title (h1).
   The title appears quite far down the page due to header + margins. */
.toc-sidebar {
    position: fixed;
    left: 0;
    top: 16rem;
    width: 280px;
    max-height: calc(100vh - 17rem);
    overflow-y: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: none; /* Hidden by default, shown on wide screens */
}

.toc {
    padding: 0;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin: 0;
    padding: 0;
}

.toc-list a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    line-height: 1.4;
}

.toc-list a:hover {
    color: var(--text-color);
}

/* h2 items: section headers - prominent, with space above to create groups */
.toc-list .toc-h2 {
    margin-top: 0.75rem;
}

.toc-list .toc-h2:first-child {
    margin-top: 0;
}

.toc-list .toc-h2 a {
    font-size: 12px;
    font-weight: 600;
    padding: 0.2rem 0;
    padding-left: 0.5rem;
}

/* h3 items: subsections - smaller, indented, lighter */
.toc-list .toc-h3 a {
    font-size: 10px;
    font-weight: 400;
    padding: 0.15rem 0;
    padding-left: 1.25rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.toc-list a.active {
    color: var(--text-color);
    border-left-color: var(--text-color);
}

/* Show ToC on wide screens with guaranteed no-overlap layout.

   Tufte CSS sets: body { width: 87.5%; padding-left: 12.5%; max-width: 1400px; margin: auto }
   This centering fights with a fixed left sidebar. Solution: at wide viewports,
   override Tufte's centering and use a two-column layout where:
   - Left 280px: ToC (fixed position)
   - Right: content (with left margin to clear ToC)

   Breakpoint: 1440px works with the scaled-down font size (12px) */
@media (min-width: 1440px) {
    /* Override Tufte's centering - use full width with explicit left margin */
    body {
        width: 100%;
        max-width: none;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .toc-sidebar {
        display: block;
        left: 1rem;
        width: 260px;
    }

    /* All direct body children get pushed right, clearing the ToC completely.
       300px = ToC width (260px) + left position (1rem/16px) + gap (24px) */
    body > header,
    body > article,
    body > aside:not(.toc-sidebar) {
        margin-left: 300px;
        margin-right: 2rem;
        max-width: 1000px;
    }

    /* Header at 300px–1300px, extend ::before to viewport edges */
    .site-header::before {
        left: -300px;
        right: calc(1300px - 100vw);
    }
}

/* Embedded interactive graph */
.graph-embed {
    width: 75%;
    height: 500px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin: 1.5rem 0;
}

.graph-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
}

/* Responsive adjustments for mobile */
@media (max-width: 760px) {
    /* Body padding is 8% each side; extend ::before to viewport edges */
    .site-header::before {
        left: -8vw;
        right: -8vw;
    }

    /* Bump font size back up for readability on small screens.
       Desktop uses 12px (compact for ToC layout); mobile needs ~15px. */
    html {
        font-size: 15px;
    }

    /* Tame the heading sizes and kill excessive top margin */
    h1 {
        font-size: 2.2rem;
        margin-top: 0;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    p.subtitle {
        font-size: 1.3rem;
    }

    /* Kill the massive article padding from tufte.css (5rem) */
    article {
        padding: 0.5rem 0;
    }

    /* Header: tighter spacing on mobile */
    .site-header {
        padding: 0.75rem 0 0 0;
        margin-bottom: 1rem;
    }

    .site-nav {
        gap: 1rem;
        padding-bottom: 0.75rem;
    }

    .site-title {
        font-size: 1.2rem;
    }

    .nav-links {
        gap: 0.75rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    /* Theme toggle: drop out of fixed positioning into the nav flex flow.
       align-items: center on .site-nav handles vertical alignment. */
    .theme-toggle {
        position: static;
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .lang-toggle {
        width: 2rem;
        height: 2rem;
    }

    .lang-toggle svg {
        width: 14px;
        height: 14px;
    }

    /* Full-width content (override custom.css 75% widths) */
    section > p,
    section > footer,
    section > table,
    blockquote p,
    blockquote footer,
    figure,
    hr {
        width: 100%;
    }

    .graph-embed,
    .end-mark {
        width: 100%;
    }

    section > dl,
    section > ol,
    section > ul {
        width: 90%;
    }

    /* Sidenotes: reset custom.css overrides so tufte.css mobile rules work */
    .sidenote,
    .marginnote {
        width: 95%;
        margin-right: 0;
        max-width: none;
    }

    /* Uniform body text size on mobile: smaller than desktop (1.4rem)
       for less scrolling, but consistent across about and post pages */
    p {
        font-size: 1.25rem;
    }

    .about p {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .about p:first-child {
        margin-top: 0;
    }

    .dinkus {
        width: 100%;
        margin: 0.8rem 0 0 0;
        font-size: 1rem;
    }

    /* Post list: full width */
    .post-list {
        width: 100%;
    }

    .post-title {
        font-size: 1.3rem;
    }

    .post-meta {
        font-size: 0.9rem;
    }

    .post-excerpt {
        font-size: 1rem;
    }

    /* Code blocks: full width, prevent overflow */
    pre > code {
        width: 100%;
        margin-left: 0;
        font-size: 0.85rem;
    }

    /* Tables: scrollable if too wide */
    table {
        display: block;
        overflow-x: auto;
        width: 100%;
    }
}