/* Shared compact spacing contract. Keep feature geometry on this scale. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --page-gutter: clamp(16px, 2vw, 32px);
  --section-gap: clamp(20px, 2vw, 28px);
}

/* Shared page shortcuts: one owner for position, target size, and separation. */
.page-actions { position: fixed; right: var(--space-6); bottom: max(var(--space-6), env(safe-area-inset-bottom)); z-index: 16; display: flex; flex-direction: column; gap: var(--space-2); }
.page-actions > button { position: static; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--text); }
.page-actions > button:hover { border-color: var(--accent); color: var(--accent); }
.page-actions .ui-icon { width: 20px; height: 20px; }
.term-card-top button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
@media (max-width: 700px) { .page-actions { right: var(--space-4); bottom: max(var(--space-4), env(safe-area-inset-bottom)); } }

.topbar { padding-inline: var(--page-gutter); }
.library, .reading, .file-view { padding: var(--space-7) var(--page-gutter) 48px; }
.hero { gap: var(--space-6); margin-block: var(--section-gap); }
.hero h1 { margin-block: var(--space-3); }
.hero p { margin-block: 0; }
.hero-actions { gap: var(--space-3); margin-top: var(--space-5); }
.metrics { gap: var(--space-4); padding-block: var(--space-4); margin-bottom: var(--space-6); }
.section-title { gap: var(--space-3); margin-bottom: var(--space-3); }
.filters { gap: var(--space-2); margin-bottom: var(--space-4); }
.chapter-grid { gap: var(--space-4); }
.chapter-card, .track-doc-card { padding: var(--space-5); min-height: 248px; min-width: 0; }
.card-top { margin-bottom: var(--space-4); }
.lesson-art { margin-bottom: var(--space-4); }
.card-bottom { margin-top: var(--space-4); padding-top: var(--space-3); min-width: 0; gap: var(--space-2); }
.track-doc-card .card-bottom span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-doc-card .card-bottom .arrow { flex-shrink: 0; }
.track-docs-section { margin-bottom: var(--section-gap); }
.track-teaser { margin-top: var(--space-7); }
.teaser-docs-link { color: var(--accent); text-decoration: none; font-weight: 500; font-size: 10px; }
.teaser-docs-link:hover { text-decoration: underline; }
.track-banner { gap: var(--space-5); padding: var(--space-5); }
.library-footer { margin-top: var(--space-7); padding-top: var(--space-4); }
.reader-bar { gap: var(--space-3); margin-bottom: var(--space-5); }
.reader-title { margin-block: var(--space-3); }
.reader-meta { gap: var(--space-2) var(--space-4); margin-block: var(--space-4) var(--space-5); }
.reader-layout { gap: var(--space-6); }
.reading { max-width: none; }
.reading .lesson-header :is(.reader-title, .reader-deck) { max-width: none; }
:root[data-theme] .reading .article > :is(p, ul, ol, blockquote) { max-width: none; }
.reading .article { font-size: 16px; line-height: 1.75; text-align: start; }
.reading .article > :is(p, ul, ol, blockquote) { font-size: inherit; }
.article p { margin-block: var(--space-3); }
.article li { margin-block: var(--space-1); }
.article h2 { margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-5); }
.article h3 { margin: var(--space-6) 0 var(--space-3); }
.learning-studio, .visual-atlas { margin-block: var(--space-6) var(--space-8); }
.learning-studio [role="tabpanel"], .visual-panel { padding: var(--space-5); }
.learning-studio .flow-track { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.learning-studio .studio-intro :is(h2, p) { max-width: none; }
.studio-intro, .visual-heading { gap: var(--space-4); padding: var(--space-5); }
.learning-path { gap: var(--space-5); padding: var(--space-5); }
.chapter-pagination { margin-top: var(--space-8); padding-top: var(--space-5); margin-bottom: var(--space-8); padding-right: 64px; }

@media (max-width: 700px) {
  .library, .reading, .file-view { padding: var(--space-5) var(--page-gutter) var(--space-8); }
  .hero { margin-block: var(--space-5); }
  .chapter-card, .track-doc-card { min-height: 0; }
  .track-teaser { margin-top: var(--space-6); }
}

/* Decorative icons inherit theme colors and fit existing icon containers. */
.ui-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }