/* Shared brand layer. Canonical tokens are served/emitted by vite.config.ts. */
@import url('/interactive/design-system.css');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap');

:root {
  font-family: var(--gs-font-body);
  font-size: 100%;
  color: var(--gs-content-primary);
  background: var(--gs-surface-page);
  color-scheme: light;
  font-synthesis: none;
}
body { margin: 0; background: var(--gs-surface-page); color: var(--gs-content-primary); }
button, input, select, textarea, summary { font-family: var(--gs-font-body); }
body, button, input, select, textarea { font-weight: var(--gs-weight-regular); }
h1 { font-size: var(--gs-text-3xl); font-weight: var(--gs-weight-regular); }
h2, h3 { font-size: var(--gs-text-xl); font-weight: var(--gs-weight-regular); }
p, li { line-height: var(--gs-leading-normal); }
strong, b { font-weight: var(--gs-weight-semibold); }
a { color: var(--gs-content-accent); }
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gs-content-accent);
  outline-offset: var(--gs-space-1);
}
.brand, header .brand { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0; }
.company-logo { display: block; width: auto; height: var(--gs-space-8); max-width: 100%; object-fit: contain; }
.company-mark { display: block; width: var(--gs-space-8); height: var(--gs-space-8); object-fit: contain; }
.brand-mark:has(.company-mark) { padding: 0; background: transparent; border-radius: 0; }
.site-header, .experience > header { background: var(--gs-surface-page); border-color: var(--gs-border-default); }
.site-name, .site-title, #step-label { color: var(--gs-content-secondary); font-size: var(--gs-text-sm); }
.edition-bar { background: var(--gs-surface-sunken); color: var(--gs-content-secondary); }
.site-header .brand { letter-spacing: normal; }
.primary-button, .next-button, #flow-next, .flow-navigation #flow-next {
  background: var(--gs-action-primary-background);
  color: var(--gs-action-primary-content);
  border-color: var(--gs-action-primary-border);
}
.journey-tabs button[aria-selected=true] { border-bottom-color: var(--gs-content-accent); color: var(--gs-content-primary); }
.choice-list button[aria-pressed=true], .segmented button[aria-pressed=true], .answer.selected {
  background: var(--gs-surface-accent); color: var(--gs-content-primary); border-color: var(--gs-content-accent);
}
.gutsphere-demo { background: var(--gs-surface-sunken); border-color: var(--gs-border-default); }
.demo-brand, .concept-label { color: var(--gs-content-secondary); }
.screen h2 { font-size: var(--gs-text-3xl); }
.flow-panel h1 { font-size: var(--gs-text-xl); }
.flow-panel h2, .flow-panel h3 { font-size: var(--gs-text-base); font-weight: var(--gs-weight-semibold); }
.journey-rail, .rail-note, .saved-panel {
  background: var(--gs-surface-sunken);
  color: var(--gs-content-primary);
  border-color: var(--gs-border-default);
}
.journey-rail :is(p, strong, b, small, span), .rail-note :is(p, strong), .saved-panel :is(p, h2, h3) { color: var(--gs-content-primary); }
.journey-rail li > span { background: var(--gs-surface-raised); color: var(--gs-content-primary); }
.journey-rail li b, .journey-rail li.active b { color: var(--gs-content-primary); }
.journey-rail li small, .journey-rail li.active small { color: var(--gs-content-secondary); }
.visual-card, .intro-controls, .load-state { color: var(--gs-content-inverse); }
.visual-card :is(p, small, label, .small-note), .intro-controls :is(p, h2, h3, span) { color: var(--gs-content-inverse); }
.model-window { background: var(--gs-surface-inverse); }
.model-window .model-footer, .model-window .model-footer :is(span, button) { color: var(--gs-content-inverse); }
.intro-controls .intro-progress, .intro-controls .intro-count { color: var(--gs-content-inverse); }
.intro-controls .intro-step-label span:first-child { color: var(--gs-content-inverse); }
/* The React shell supplies the site navigation for embedded experiences. */
html.is-embedded .edition-bar,
html.is-embedded .experience > header .brand,
html.is-embedded .site-header .brand { display: none; }
html.is-embedded .experience > header,
html.is-embedded .site-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: var(--gs-space-12);
  height: auto;
  gap: var(--gs-space-3);
  padding: var(--gs-space-2) var(--gs-space-5);
  margin: var(--gs-space-2) var(--gs-space-3);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-pill);
  background: var(--gs-surface-raised);
}
html.is-embedded .site-header { max-width: none; }
/* The section switcher stays in view inside the demo's own scroll document. */
.journey-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: var(--gs-space-2) var(--gs-space-3);
  padding-inline: var(--gs-space-2);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-pill);
  background: var(--gs-surface-raised);
}
.journey-tabs button:focus-visible { outline-offset: calc(-1 * var(--gs-space-1)); }
#lesson-content { scroll-margin-top: calc(var(--gs-space-16) + var(--gs-space-4)); }
html.is-embedded .experience > header #step-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.is-embedded .site-name,
html.is-embedded .site-title {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-left: 0;
  border-left: 0;
  color: var(--gs-content-primary);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.is-embedded .header-actions,
html.is-embedded .site-header nav { margin-left: auto; }
html.is-embedded .site-header nav { flex-wrap: wrap; justify-content: flex-end; gap: var(--gs-space-2); }
html.is-embedded .site-header nav a,
html.is-embedded .site-header nav button,
html.is-embedded .experience > header button { min-height: var(--gs-control-height); }

@media (max-width: 40rem) {
  .company-logo { height: var(--gs-space-6); }
  .site-header { flex-wrap: wrap; height: auto; min-height: var(--gs-space-16); padding: var(--gs-space-4); gap: var(--gs-space-3); }
  .site-name, .site-title { border: 0; padding-left: 0; }
  html.is-embedded .experience > header,
  html.is-embedded .site-header { gap: var(--gs-space-2); padding-inline: var(--gs-space-3); }
  html.is-embedded .site-header nav a { display: none; }
}