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

/* Keep sidebar rows and section separation consistent across the catalog. */
.side-nav .side-group, .side-nav .side-group + .side-group { gap: var(--space-1); margin-top: 0; padding-block: var(--space-1); }
.side-nav .side-link { min-height: 44px; padding: var(--space-2); gap: var(--space-2); }

/* Shared page shortcuts: one owner for position, target size, and separation. */
.page-actions { position: fixed; right: var(--space-6); bottom: calc(max(var(--space-6), env(safe-area-inset-bottom)) + var(--space-4)); z-index: 16; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.page-actions > button { position: static; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); }
.page-actions > button:hover { color: var(--accent); }
/* These controls stay unframed even when a theme styles neutral buttons. */
:root[data-theme] .page-actions > :is(#assistant-open, #decode-open) { border:0; background:transparent; box-shadow:none; }
.page-actions > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-actions .ui-icon { width: 20px; height: 20px; }
/* The companion sits above Decode; both retain independent 44px targets. */
.page-actions > .assistant-trigger { height: 44px; }
.page-actions .assistant-trigger picture { top: 50%; bottom: auto; transform: translate(-50%,-50%); }
/* Center search and the smaller reading companion independently. */
:root .search-dialog { position:fixed; left:50vw; right:auto; transform:translateX(-50%); width:min(680px,calc(100vw - var(--space-8))); max-width:none; margin:12dvh 0 auto; }
:root .assistant-dialog { position:fixed; left:50vw; top:50dvh; right:auto; bottom:auto; transform:translate(-50%,-50%); width:min(520px,calc(100vw - var(--space-8))); height:min(600px,calc(100dvh - var(--space-8))); max-width:none; max-height:calc(100dvh - var(--space-8)); margin:0; }
@media(max-width:700px) { :root .search-dialog { margin:6dvh 0 auto; } }
.term-card-top button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
/* Diagram fit uses the available viewport in both dimensions. */
.diagram .diagram-viewport, .visual-renderer .diagram .diagram-viewport { max-height: 70dvh; overscroll-behavior: auto; }
.diagram .diagram-actions button { min-width: 40px; min-height: 40px; height: auto; display: inline-grid; place-items: center; }
.diagram-dialog { width: calc(100vw - 2 * var(--space-4)); height: calc(100dvh - 2 * var(--space-4)); margin: var(--space-4) auto; max-height: none; }
.diagram-dialog[open] { display: flex; flex-direction: column; }
.diagram-dialog .expanded-heading { flex: none; gap: var(--space-2); }
.diagram-dialog .expanded-diagram { padding: var(--space-3); flex: 1; min-height: 0; height: auto; }
.diagram-dialog .expanded-diagram .diagram { min-height: 0; }
.diagram-dialog .expanded-diagram .diagram-viewport { min-height: 0; max-height: none; overscroll-behavior: contain; }
@media (max-width: 700px) { .page-actions { right: var(--space-4); bottom: calc(max(var(--space-4), env(safe-area-inset-bottom)) + var(--space-4)); } }

.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); }
.hero-actions :is(.primary-button,.secondary-action) { display:inline-flex; align-items:center; min-height:44px; padding:var(--space-2) var(--space-4); border-radius:6px; }
.metrics { gap: var(--space-4); padding-block: var(--space-4); margin-bottom: var(--space-6); }
.learn-hub .learn-metrics { row-gap: var(--space-1); }
.section-title { gap: var(--space-3); margin-bottom: var(--space-3); }
.section-card .card-image-wrap, .section-card p { margin-bottom: var(--space-2); }
.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, .chapter-card .ai-eng-card-art, .chapter-card .robotics-card-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-top: 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; }

.page-actions > #decode-open { color:var(--accent); }