/*
.callout {
border: 1px solid var(--border); border-radius: var(--radius);
background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface), transparent 20%));
padding: .9rem 1rem; margin: 1.1rem 0; box-shadow: var(--shadow-1);
}
.callout-title { font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.callout.is-collapsible .callout-title { cursor: pointer; }
.callout-content { margin-top: .6rem; color: var(--muted); }


/* Cards grid (use <div class="cards"> with child .card) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card {
border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
background: var(--elev); padding: 1rem; box-shadow: var(--shadow-1);
transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card h3 { margin: .4rem 0 .2rem; font-size: 1.05rem; }
.card p { color: var(--muted); margin: 0; }


/* Footnotes */
sup.footnote-ref a { text-decoration: none; }
.footnote-popup { position: absolute; z-index: 50; max-width: 420px; font-size: .9em; line-height: 1.45;
padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border);
background: var(--elev); box-shadow: var(--shadow-2); color: var(--text); }


/* Images & captions */
figure { margin: 1.3rem 0; }
figcaption { font-size: .9em; color: var(--muted); text-align: center; margin-top: .4rem; }
img { border-radius: var(--radius-sm); }
img.zoomable { cursor: zoom-in; }


/* Lightbox */
#zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 100; }
#zoom-overlay.open { display: flex; }
#zoom-overlay img { max-width: 92vw; max-height: 88vh; border-radius: 14px; box-shadow: var(--shadow-2); }


/* TOC */
#toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--elev); }
#toc .toc-title { font-weight: 700; margin-bottom: .4rem; }
#toc a { color: inherit; text-decoration: none; }
#toc a:hover { color: var(--accent-strong); text-decoration: underline; }
#toc ol { list-style: none; padding-left: .6rem; }
#toc li { margin: .2rem 0; }
#toc .lvl-2 { padding-left: .6rem; }
#toc .lvl-3 { padding-left: 1.2rem; }


/* Two-column on wide screens (TOC + content) */
@media (min-width: 1200px) {
.page-with-toc { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
}


/* Reading progress bar */
#reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); z-index: 120; box-shadow: 0 1px 6px rgba(0,0,0,.2); }


/* Search results / backlinks (if present) */
.search-results .search-result { border-bottom: 1px solid var(--border); padding: .6rem 0; }
.backlinks { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1rem; }


/* Math (KaTeX) tweaks if used) */
.katex-display { padding: .6rem; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface), transparent 30%); }


/* Focus rings */
:where(a, button, .button, [tabindex]){ outline: none; }
:where(a, button, .button, [tabindex]):focus-visible { box-shadow: 0 0 0 4px var(--ring); border-radius: 10px; }