/* Keep each interactive layer local. The native dialog occupies the top layer. */
:root { --layer-cards: 0; --layer-controls: 1000; --layer-header: 1001; }
.header { z-index: var(--layer-header); }
#navigation { top: 100%; max-height: calc(100dvh - 80px); overflow-y: auto; }
.articles-controls-panel { z-index: var(--layer-controls); }
#article-list .card { position: relative; isolation: isolate; z-index: var(--layer-cards); }
.podcast-card:active { transform: none; }
/* Reserve the heading artwork's space before its shadow root is attached. */
#articles > .section-heading { --heading-icon-width: 16.535433px; }
#podcasts > .section-heading { --heading-icon-width: 13.932584px; }
#apps > .section-heading { --heading-icon-width: 19.090909px; }
#content > .section-heading { --heading-icon-width: 28.648649px; }
:is(#articles, #podcasts, #apps, #content) > .section-heading:not(:has(.section-icon)) { padding-left: calc(var(--heading-icon-width, -5px) + var(--section-icon-gap, 8px)); }
/* The unenhanced cover reserves precisely the space used by turn.js. */
#article-list .magazine { width: 100%; height: auto; aspect-ratio: auto; }
#article-list .magazine::before { content: ''; display: block; width: calc(100% - 6px); aspect-ratio: 190 / 256; padding-bottom: 4px; box-sizing: content-box; }
#article-list .magazine[style]::before { display: none; }
#article-list .cover-book:not([style]) { position: absolute; inset: 0 6px 4px 0; width: auto; height: auto; clip-path: none; }
#article-list .cover-book:not([style]) > .cover-sheet { position: absolute; inset: 0; }
#article-list .cover-book:not([style]) > .inside-sheet { display: none; }
#article-list .magazine:not([style]) :is(.leaf-stack,.leaf-edge) { width: calc(100% - 6px); height: calc(100% - 4px); }
@media(max-width:800px) { #article-list .caption { min-height: calc(var(--article-captionLine, 21px) * 2); } }
/* A poster or metadata response must not resize the preview dialog. */
.media-preview video { aspect-ratio: 16 / 9; object-fit: contain; }
.app-preview > img { height: 150px; }
/* Dragging moves Leva's child; its empty fixed wrapper must not catch clicks. */
.articles-controls-panel { pointer-events: none; }
.articles-controls-panel > div { pointer-events: auto; }
/* The menu keeps its final position while the brand's motion wrapper mounts. */
.header .menu-toggle { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }
.header > .wordmark { position: absolute; left: calc(50% - var(--brand-travel, 129px) + 30px); top: 10px; }
@media(max-width:600px) {
  .header { --brand-travel: 94.25px; }
  .header .menu-toggle { left: 16px; }
  .header > .wordmark { top: 8px; }
}