/* AutoTOC thumbnails (L24)

   CANONICAL SOURCE: lucid24/suttas/js/ and lucid24/suttas/css/ are EACH their own git
   repo (branch master) and are the source of truth for the shared web assets. Edit and
   commit HERE. The copies under py_template/l24page26/{js,css}/ (git-tracked there but
   STALE/divergent) and 4nt-localweb/suttas/ (a local mirror, not git) are derived — do
   NOT treat them as the source or commit fixes there.

   - Thumb stays visible whether a section is open or closed.
   - Height tracks the heading line it sits in, so h1…h6 get progressively smaller
     thumbs while each fills the heading's full vertical space. The summary's own
     padding supplies the minimal top/bottom margin.
*/

details.l24-acc > summary{
  display:flex;
  align-items:center;
  gap:8px;
}

.autotoc-thumb{
  width: auto;
  aspect-ratio: 1 / 1;     /* square; width follows the height */
  height: 1.46em;          /* fallback (≈ h3, 1 row) when no level class is present */
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}

/* Per-level height = one heading line (font-size × line-height), MULTIPLIED by the
   heading's row count. 05-generate_auto_toc_v2.py sets `--l24-rows:N` on a <details>
   whose heading spans N lines (e.g. a sutta title split with <br>); it's unset (→ 1)
   for ordinary single-line headings. So a 2-row heading gets a 2× taller, larger square
   thumb that fills the heading block — for any number of rows. (Can't use
   align-self:stretch here: the image's intrinsic size would dominate the flex row and
   blow the thumb up to full size instead of matching the text.) Keep the one-row em
   values in sync with the `.l24-acc.l24-hN .l24-acc-heading` font scale in 05_v2. */
.l24-acc.l24-h-2 > summary .autotoc-thumb{ height: calc(2.09em  * var(--l24-rows, 1)); }
.l24-acc.l24-h-1 > summary .autotoc-thumb{ height: calc(1.99em  * var(--l24-rows, 1)); }
.l24-acc.l24-h0  > summary .autotoc-thumb{ height: calc(1.90em  * var(--l24-rows, 1)); }
.l24-acc.l24-h1  > summary .autotoc-thumb{ height: calc(1.71em  * var(--l24-rows, 1)); }
.l24-acc.l24-h2  > summary .autotoc-thumb{ height: calc(1.56em  * var(--l24-rows, 1)); }
.l24-acc.l24-h3  > summary .autotoc-thumb{ height: calc(1.39em  * var(--l24-rows, 1)); }
.l24-acc.l24-h4  > summary .autotoc-thumb{ height: calc(1.31em  * var(--l24-rows, 1)); }
.l24-acc.l24-h5  > summary .autotoc-thumb{ height: calc(1.23em  * var(--l24-rows, 1)); }
.l24-acc.l24-h6  > summary .autotoc-thumb{ height: calc(1.14em  * var(--l24-rows, 1)); }