/* Stratum demo site: shared page shell. Every page loads tokens.css, this file and the design system's bundle.css.
   Layout: one sticky 28px bar (brand, topic, page navigation, document-wide layer switch), an intro line, then the page. */

/* reset for pages served without the viewer's skeleton (the sub pages) */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
img { max-width: 100%; }

:root { --viewport-safe-top: calc(var(--size-bar) + 8px + env(safe-area-inset-top, 0px)); }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg-000); color: var(--ink); font-family: var(--font-sans); font-size: 13px; line-height: 20px; }

.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg-200); border-bottom: 1px solid var(--line); }
.bar-inner { display: flex; align-items: center; gap: var(--space-3); height: var(--size-bar); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; white-space: nowrap; }
.brand { font-weight: 600; letter-spacing: -0.01em; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.brand span { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; color: var(--ink-faint); margin-left: 6px; }
.brand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.topicpick { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 11px; color: var(--ink-muted); }
.fill { flex: 1 1 auto; min-width: var(--space-3); }
.global { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 11px; color: var(--ink-muted); }

.intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); padding-block: var(--space-3) var(--space-2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.intro h1 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; text-wrap: balance; }
.intro p { margin: 0; color: var(--ink-muted); font-size: 12px; max-width: 72ch; }
.intro .path { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.wrap { padding-block: 0 var(--space-8); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* home: feature cards and topic table */
.home { display: flex; flex-direction: column; gap: var(--space-4); }
.home h2 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); }
.feature { display: flex; flex-direction: column; min-width: 0; background: var(--bg-100); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color var(--motion-trace) linear; }
.feature:hover { border-color: var(--line-strong); }
.feature:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.feature-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); flex: 1 1 auto; }
.feature-body p { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink); }
.feature-parts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.links { display: flex; flex-wrap: wrap; gap: 4px; }
.links a { font-size: 11px; color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.links a:hover { color: var(--ink); }

/* spec page */
.spec-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spec-title { font-size: 13px; font-weight: 600; }
.spec-bar .fill { flex: 1 1 auto; }
.spec-label { font-size: 11px; color: var(--ink-muted); }
.source .st-fact-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* source page */
.source { display: flex; flex-direction: column; gap: var(--space-3); }
.source-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
@media (max-width: 900px) { .source-grid { grid-template-columns: minmax(0, 1fr); } }
.issues { margin: 0; padding: 0 0 0 var(--space-4); font-size: 12px; line-height: 18px; }
.issues code { font-family: var(--font-mono); font-size: 11px; background: var(--machine-bg); color: var(--machine-ink); padding: 0 3px; border-radius: var(--radius-sm); }
.clean { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); }

/* Unified source viewer: one source picker and optional decomposition/inspection tools. */
.strata-source-picker { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--ink-muted); }
.strata-source-picker select { max-width: min(100%, 320px); min-height: 28px; padding: 3px 26px 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-100); color: var(--ink); font: inherit; font-size: 12px; }
.strata-source-picker select:focus-visible, .strata-source-inspection summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.strata-source-context { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.strata-source-inspection { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-100); }
.strata-source-inspection summary { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: 12px; font-weight: 500; }
.strata-source-inspection[open] summary { border-bottom: 1px solid var(--line); }
.strata-source-inspection-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); min-width: 0; }
.strata-section-blocks { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin-top: var(--space-3); }
.strata-section-blocks > * { min-width: 0; }
.strata-canvas-inspection, .strata-topic-inspection { min-width: 0; }
@media (max-width: 600px) {
  .strata-source-picker { width: 100%; }
  .strata-source-picker select { flex: 1; max-width: none; }
  .strata-source-bar .spec-title { width: 100%; }
}