/* ================================================================
   typographic-override.css  (TRIAL — load AFTER styles.css,
   dark-theme-enhancement.css and ref-preview.css)
   ----------------------------------------------------------------
   Replaces the "left-accent card" treatment of section-content,
   theorem, proof, insight-box and ref-preview with a typographic
   treatment in the amsthm / Springer / Tufte tradition:
     - colors kept (amber / green / purple) but carried by 1px
       hairlines and the run-in heads, not by a 5px side bar,
       fills, shadows or glass blur
     - theorem  = amber hairline above and below, amber run-in head
     - proof    = green italic "Proof." head, green tombstone
     - insight  = thin purple frame, purple small-caps label
     - preview  = footnote-style: smaller type, hairline rules
   Punctuation after the run-in head ("Theorem:", "Proof:") comes from
   the markup, not from CSS.
   Once accepted, fold each block into its home file and delete this.
   ================================================================ */

/* ---------- 1. Sections are not cards -------------------------- */

.section-content,
html[data-theme="dark"] .section-content {
    border: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3rem;
}

.section-content > h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding-bottom: 0.3em;
    margin-bottom: 1.2em;
}
html[data-theme="dark"] .section-content > h2 {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* ---------- color tokens (light / dark) ------------------------ */
:root {
    --thm-accent: #c96f05;      /* amber, darkened for white bg */
    --prf-accent: #1e8449;      /* green, darkened for white bg */
    --ins-accent: #7d3c98;      /* purple */
}
html[data-theme="dark"] {
    --thm-accent: #f59e0b;
    --prf-accent: #86efac;
    --ins-accent: #d8b4fe;
}

/* ---------- 2. Theorem: colored hairlines, colored run-in head - */

.theorem,
html[data-theme="dark"] .theorem {
    background: transparent;
    border: none;
    border-top: 1px solid var(--thm-accent);
    border-bottom: 1px solid var(--thm-accent);
    border-radius: 0;
    box-shadow: none;
    padding: 0.9rem 0;
    margin: 1.6rem 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.theorem-title,
html[data-theme="dark"] .theorem-title {
    display: inline;          /* run-in: "Theorem (Name).  Let ..." */
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0;
    color: var(--thm-accent);
    margin: 0 0.35em 0 0;
}

/* ---------- 3. Proof: no box, green run-in head, tombstone ----- */

.proof,
html[data-theme="dark"] .proof {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 1.4rem;    /* indent marks the proof block */
    margin: 0.8rem 0 1.6rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.proof-title,
html[data-theme="dark"] .proof-title {
    display: inline;
    font-style: italic;
    font-weight: 600;
    color: var(--prf-accent);
    margin: 0 0.35em 0 0;
}

.proof::after {                /* end-of-proof mark, in CSS not LaTeX */
    content: "\25A1";          /* □ */
    display: block;
    text-align: right;
    line-height: 1;
    margin-top: 0.3rem;
    font-size: 0.85em;
    color: var(--prf-accent);
}

/* ---------- 4. Insight box: thin purple frame ------------------ */

.insight-box,
html[data-theme="dark"] .insight-box {
    background: transparent;
    border: 1px solid var(--ins-accent);
    border-left-width: 1px;
    border-left-style: solid;
    border-radius: 0;
    box-shadow: none;
    padding: 1.1rem 1.3rem;
    margin: 2rem 0;
    font-size: 0.95rem;
}

.insight-box h3,
html[data-theme="dark"] .insight-box h3 {
    display: block;            /* styles.css sets flex for the emoji */
    color: var(--ins-accent) !important;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.7em;
}
.insight-box h3::before {      /* drop the 💡 from styles.css */
    content: none;
}
.insight-box h3::after {       /* short purple rule under the label */
    content: "";
    display: block;
    width: 2.25rem;
    height: 1px;
    background: var(--ins-accent);
    margin-top: 0.45em;
}

/* ---------- 5. Ref-preview: footnote, not callout -------------- */

.ref-preview-container,
html[data-theme="dark"] .ref-preview-container {
    background: transparent;
    border: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.86rem;
    line-height: 1.55;
}

.ref-preview-container .theorem-title,
html[data-theme="dark"] .ref-preview-container .theorem-title {
    display: block;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--thm-accent);
    opacity: 0.9;
    margin: 0 0 0.35rem;
}

/* Both mode rules below must out-specify
   html[data-theme="dark"] .ref-preview-container (0,2,1), which sets
   border: none above; hence the compound container+mode selectors. */

/* desktop sidenote: hairline above, nothing else */
.ref-preview-container.ref-preview-sidenote,
html[data-theme="dark"] .ref-preview-container.ref-preview-sidenote {
    border-top: 1px solid var(--thm-accent);
    padding: 0.6rem 0 0.4rem;
}

/* mobile inline: hairline above and below, small indent */
.ref-preview-container.ref-preview-inline.expanded,
html[data-theme="dark"] .ref-preview-container.ref-preview-inline.expanded {
    border-top: 1px solid var(--thm-accent);
    border-bottom: 1px solid var(--thm-accent);
    padding: 0.7rem 0 0.6rem 1rem;
    margin: 0.6rem 0 1rem;
}

.ref-preview-footer,
html[data-theme="dark"] .ref-preview-footer {
    border-top: none;
    margin-top: 0.4rem;
    padding-top: 0;
    font-size: 0.8rem;
}

/* ref-link: plain link, drop the ↗ badge */
a.ref-link::after {
    content: none;
}
a.ref-link {
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Homepage / section-landing panels get the same "not a card"
   treatment as .section-content (§1); every other 4-5px side bar
   becomes a plain 1px frame or disappears. */

/* 6a. Landing panels: no card, no side bar */
.homepage-introduction,
.update-notice,
.content-sections,
.references,
html[data-theme="dark"] .homepage-introduction,
html[data-theme="dark"] .update-notice,
html[data-theme="dark"] .content-sections,
html[data-theme="dark"] .references {
    border: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3rem;
}

.homepage-introduction h2,
.content-sections > h2,
.references h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding-bottom: 0.3em;
    margin-bottom: 1.2em;
}
html[data-theme="dark"] .homepage-introduction h2,
html[data-theme="dark"] .content-sections > h2,
html[data-theme="dark"] .references h2 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* collapsed-intro fade must now blend into the page, not a card
   (dark file pointed at an undefined --bg-primary) */
.collapsible-intro.collapsed .intro-fade {
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0), var(--bg-color));
}
html[data-theme="dark"] .collapsible-intro.collapsed .intro-fade {
    background: linear-gradient(to bottom, rgba(11, 14, 20, 0), var(--dark-bg-primary));
}

/* 6b. Worlds overview: neutral hairlines above and below */
.worlds-overview,
html[data-theme="dark"] .worlds-overview {
    background: transparent !important;   /* dark file uses !important */
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 0;
    padding: 1rem 0;
    margin: 1.6rem 0;
}
html[data-theme="dark"] .worlds-overview {
    border-top-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* 6c. Code blocks: 1px frame, same as .python-code */
.pseudocode,
.python-output {
    border: 1px solid #e1e4e8;
}
html[data-theme="dark"] .pseudocode,
html[data-theme="dark"] .python-output {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 6d. TOC and collapsible header */
.toc-container {
    border: 1px solid var(--border-color);
}
html[data-theme="dark"] .toc-container {
    border: 1px solid var(--glass-border);
}
.collapsible-header,
html[data-theme="dark"] .collapsible-header {
    border-left: none;
}

/* 6e. Footer: quote bar and hover bar */
.footer-about p em {
    border-left: none;
    padding-left: 0;
}
.footer-links a::before {
    display: none;
}

/* ----------Update Log: a plain list, not a dashboard ------- */

/* title: no underline */
.update-notice h2,
html[data-theme="dark"] .update-notice h2 {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 0.9em;
}

/* filters: text buttons; the active one is bright and bold */
#update-log .ul-filter-row {
    gap: 2px 4px;
    margin-bottom: 1.4rem;
}
#update-log .ul-fbtn,
html[data-theme="dark"] #update-log .ul-fbtn {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 2px 8px;
}
#update-log .ul-fbtn:hover,
html[data-theme="dark"] #update-log .ul-fbtn:hover {
    background: transparent;
    color: var(--text-color);
}
html[data-theme="dark"] #update-log .ul-fbtn:hover {
    color: rgba(255, 255, 255, 0.85);
}
#update-log .ul-fbtn.on,
html[data-theme="dark"] #update-log .ul-fbtn.on {
    background: transparent;
    border: none;
    font-weight: 700;
    color: var(--secondary-color);
}
html[data-theme="dark"] #update-log .ul-fbtn.on {
    color: #fff;
}

/* month heads: label and count only, no rule, no pill */
#update-log .ul-month-head,
html[data-theme="dark"] #update-log .ul-month-head {
    border-bottom: none;
    padding: 1.2rem 0 0.4rem;
    letter-spacing: 0.12em;
}
#update-log .ul-month:first-child .ul-month-head {
    padding-top: 0;
}
#update-log .ul-month-n,
html[data-theme="dark"] #update-log .ul-month-n {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
}

/* entries: tight leading, no hover fill, no trailing arrow */
#update-log .ul-grid {
    gap: 0 2.5rem;
}
#update-log .ul-entry,
html[data-theme="dark"] #update-log .ul-entry {
    padding: 0.55rem 0;
    gap: 0.6rem;
    border-radius: 0;
    background: transparent;
}
#update-log .ul-entry:hover,
html[data-theme="dark"] #update-log .ul-entry:hover {
    background: transparent;
}
#update-log .ul-body {
    line-height: 1.45;      
}
#update-log .ul-text {
    display: block;
    font-size: 0.92rem;
    line-height: 1.45;
}
#update-log .ul-meta {
    margin-top: 0.2rem;
    gap: 0.6rem;
}
#update-log .ul-arrow {
    display: none;
}

/* icon: a small colored glyph, no tile */
#update-log .ul-ico {
    background: transparent !important;
    border: none !important;
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: 0.7rem;
    margin-top: 0.3em;
}

/* section badge: colored text, no pill */
#update-log .ul-badge {
    background: transparent !important;
    border: none !important;
    padding: 0;
    border-radius: 0;
    letter-spacing: 0.04em;
}

/* show more: a text link */
#update-log .ul-more {
    justify-content: flex-start;
    padding-top: 1rem;
}
#update-log .ul-more-btn,
html[data-theme="dark"] #update-log .ul-more-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: var(--primary-color);
}
html[data-theme="dark"] #update-log .ul-more-btn {
    color: #64b4ff;
}
#update-log .ul-more-btn:hover,
html[data-theme="dark"] #update-log .ul-more-btn:hover {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    #update-log .ul-entry {
        padding: 0.5rem 0;
    }
    #update-log .ul-ico {
        width: auto;
        height: auto;
    }
}