/* ==========================================================================
   article.css — our own long-form article template
   Load AFTER site.css. Pairs with js/article.js (KaTeX + scroll-spy).
   Layout: centred text column with a sticky contents sidebar pinned BELOW the
   fixed nav banner. Everything is theme-aware via the site.css variables.
   ========================================================================== */

/* ---- hover/tap glossary terms (see js/article.js) ---- */
.term { border-bottom: 1px dotted var(--accent); cursor: help; }
.term:hover, .term:focus { color: var(--accent); outline: none; }
.term-tip {
  position: absolute; z-index: 200; max-width: 280px;
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-size: .88rem; line-height: 1.45;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.term-tip.show { opacity: 1; visibility: visible; }

/* ---- document grid: [ contents | text ] ---- */
.doc { max-width: 1040px; margin: 0 auto; padding: 40px 22px 0; }

@media (min-width: 1000px) {
  .doc {
    display: grid;
    grid-template-columns: 210px minmax(0, 720px);
    column-gap: 46px;
    justify-content: center;
    align-items: start;
  }
  .toc-col {
    position: sticky;
    top: 80px;                          /* clears the 60px nav banner + gap */
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 1.3em;
    border-right: 1px solid var(--border);
  }
  .body-col { grid-column: 2; min-width: 0; }
}
/* the "Contents" toggle button only appears on narrow screens */
.toc-toggle { display: none; }

@media (max-width: 999px) {
  .doc { max-width: 720px; }
  .toc-col {
    position: static; max-height: none; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 0 0 14px; margin-bottom: 20px;
  }
  .toc-toggle {
    display: flex; align-items: center; width: 100%;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 15px; font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  }
  .toc-toggle .chev { margin-left: auto; transition: transform .2s ease; }
  .toc-col.open .toc-toggle .chev { transform: rotate(180deg); }
  .toc { display: none; padding: 14px 4px 0; }
  .toc-col.open .toc { display: block; }
  .toc h3 { display: none; }            /* the button already says "Contents" */
}

/* ---- contents sidebar ---- */
.toc h3 { margin: 0 0 .8em; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.toc div { margin-bottom: .55em; line-height: 1.35; }
.toc a { color: var(--muted); font-size: 14.5px; text-decoration: none; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.active { color: var(--accent); font-weight: 600; }

/* ---- title block ---- */
.doc-header { margin: 6px 0 10px; }
.doc-header h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .3em; }
.doc-header > p { color: var(--muted); font-size: 1.12rem; line-height: 1.5; margin: 0 0 .1em; font-weight: 400; }
.byline-custom { font-size: 15px; color: var(--muted); margin: 10px 0 0; }
.byline-custom a { color: var(--accent); text-decoration: none; }
.byline-custom a:hover { text-decoration: underline; }

/* ---- body typography ---- */
.body-col { font-size: 1.05rem; line-height: 1.7; }
.body-col h2 { font-size: 1.6rem; margin: 2.2em 0 .6em; padding-bottom: .3em;
  border-bottom: 1px solid var(--border); }
.body-col h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; }
.body-col p { margin: 0 0 1em; }
.body-col ul, .body-col ol { margin: 0 0 1em; padding-left: 1.4em; }
.body-col li { margin-bottom: .5em; }
.body-col a { color: var(--accent); }
.body-col blockquote { border-left: 3px solid var(--border); margin: 1.2em 0;
  padding: .2em 0 .2em 1.1em; color: var(--muted); font-style: italic; }

/* ---- maths (KaTeX) ---- */
.math-block { display: block; text-align: center; margin: 1.3em 0; overflow-x: auto; overflow-y: hidden; }
.math-inline { white-space: nowrap; }

/* ---- figures / interactive demos ---- */
.fig { margin: 1.8em 0; }
.demo { width: 100%; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-bg); box-shadow: var(--shadow); display: block; }
figcaption { color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: 10px; }
figcaption b { color: var(--text); }

/* text with a small demo beside it */
.intro-split { display: flex; gap: 26px; align-items: center; margin: 1.4em 0; }
.intro-text { flex: 1 1 auto; min-width: 0; }
.intro-text p { margin: 0; }
.intro-demo { flex: 0 0 300px; margin: 0; }
.intro-demo .demo { width: 300px; height: 300px; }
.intro-demo figcaption { font-size: 13px; margin-top: 8px; }
@media (max-width: 760px) {
  .intro-split { flex-direction: column; align-items: stretch; }
  .intro-demo { flex-basis: auto; }
  .intro-demo .demo { width: 100%; }
}

/* ---- call-out boxes ---- */
.key { background: var(--accent-soft); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 11px 16px; margin: 1.4em 0; font-size: .97rem; line-height: 1.5; }
.key b { color: var(--accent); }
.note { background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin: 1.4em 0; font-size: .97rem; color: var(--muted); }

/* ---- three-box summary diagram ---- */
.triptych { display: flex; align-items: stretch; justify-content: center; margin: 1.8em 0 1em; }
.tbox { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 14px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.tbox .tname { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); }
.tbox .tnote { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.tbox.g1 { border-color: #7fb3e0; background: #f2f8fd; } .tbox.g1 .tname { color: #2b6cb0; }
.tbox.g2 { border-color: #68d391; background: #f2fbf5; } .tbox.g2 .tname { color: #2f855a; }
.tbox.g3 { border-color: #b39ddb; background: #f7f4fd; } .tbox.g3 .tname { color: #6b46c1; }
:root[data-theme="dark"] .tbox.g1 { background: #12202e; } :root[data-theme="dark"] .tbox.g1 .tname { color: #7fb3e0; }
:root[data-theme="dark"] .tbox.g2 { background: #122417; } :root[data-theme="dark"] .tbox.g2 .tname { color: #68d391; }
:root[data-theme="dark"] .tbox.g3 { background: #1c1730; } :root[data-theme="dark"] .tbox.g3 .tname { color: #b39ddb; }
.tconn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 0 8px; min-width: 96px; }
.cgrp { display: flex; flex-direction: column; align-items: center; gap: 0; }
.tconn .ar { font-size: 20px; color: var(--muted); line-height: .8; display: inline-block;
  transform: scaleX(2.3); transform-origin: center; }
@media (max-width: 720px) {
  .triptych { flex-direction: column; align-items: stretch; }
  .tconn { flex-direction: row; padding: 8px 0; min-width: 0; justify-content: center; }
}

/* ---- project pages using the article template (left-aligned hero in the header) ---- */
.doc-header .proj-venue { color: var(--accent); font-weight: 600; margin: 6px 0; }
.doc-header .proj-authors { margin: 0 0 3px; font-size: 1.02rem; }
.doc-header .proj-authors .me { font-weight: 700; }
.doc-header .proj-affil { color: var(--muted); font-size: .95rem; margin: 0; }
.doc-header .btn-row { justify-content: flex-start; margin: 18px 0 4px; }

/* ---- appendix / further reading ---- */
.appendix { border-top: 1px solid var(--border); margin-top: 46px; padding-top: 22px; }
.appendix h3 { font-size: 1.1rem; margin: 0 0 .5em; }
.appendix p { color: var(--muted); font-size: .97rem; }