/* 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);
}

.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); }
.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); }
.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); }
.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; }