/* App shell: a compact header so the page's own content comes first.
   Loaded last on app pages; uses tokens.css only. */

/* Top bar: one slim row */
.topbar { height: var(--topbar-height); padding-inline: var(--space-6); }
.main-content { padding-block-start: var(--space-4); padding-inline: var(--space-7); }

/* Wizard heading: title and step chip on one row, one short line of help, a thin progress track */
#wizard-heading { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); margin-block-end: var(--space-2); padding-block: 0 var(--space-2); }
#wizard-heading > #wizard-title { order: 1; margin: 0; font-size: var(--text-xl); line-height: 1.25; }
#wizard-heading > .wizard-eyebrow { order: 2; margin: 0; }
#wizard-heading > p { order: 3; flex-basis: 100%; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
#wizard-heading > .wizard-track { order: 4; flex-basis: 100%; margin-block-start: var(--space-2); }

/* Sub-pages of a step */
.wizard-subnav { margin-block-end: var(--space-3); padding-block-end: var(--space-2); }
.wizard-page { padding: 7px var(--space-3); font-size: var(--text-sm); }

/* Review page chrome above the first field */
.results-heading { margin-block-end: var(--space-1); padding-block-end: var(--space-2); align-items: center; }
.results-heading .review-badge { padding: var(--space-1) var(--space-3); }
.result-tabs button { padding-block: 9px; }
.review-notice { padding-block: var(--space-2); margin-block-end: var(--space-3); }
#results-section .tab-panel { padding: var(--space-4); }

/* Pages that share the shell use links in the sidebar; they look exactly like the wizard's step buttons */
a.step-nav, a.step-nav:hover { text-decoration: none; color: inherit; }
.step-nav { text-align: start; }
a.step-nav small { text-decoration: none; }

/* Connections page inside the shell: an app page, not a landing page */
.connections-page .connections-shell { max-inline-size: 1400px; }
.connections-intro .section-kicker { display: none; }
.connections-intro h1 { font-size: var(--text-xl); line-height: 1.25; margin-block: 0 var(--space-2); }
.connections-intro p { font-size: var(--text-sm); color: var(--color-text-muted); margin-block: 0 var(--space-2); }

/* Voice page inside settings: the wizard title already names it, and one card level is enough */
#settings-section .voice-preferences { border: 0; background: none; padding: 0; box-shadow: none; }
#settings-section .voice-heading .section-kicker { display: none; }
#settings-section .voice-heading h3 { font-size: var(--text-lg); margin-block: 0 var(--space-1); }
#settings-section .voice-heading { margin-block-end: var(--space-3); }

/* Small screens: the brand bar, step strip and account links shrink to two short rows */
@media (max-width: 800px) {
  .sidebar .workspace-label, .sidebar .side-divider, .sidebar .nav-caption, .sidebar .sidebar-note, .sidebar .sidebar-bottom { display: none; }
  .sidebar { padding-block: var(--space-2); gap: var(--space-2); }
  .sidebar .brand-image-box { inline-size: 132px; block-size: 40px; }
  .steps-nav .step-nav { padding: 6px var(--space-3); min-block-size: 0; }
  .steps-nav .step-nav small { display: none; }
  .topbar { block-size: auto; min-block-size: 0; padding: var(--space-2) var(--space-4); flex-wrap: wrap; row-gap: var(--space-2); }
  .topbar .breadcrumb, .topbar #save-state { display: none; }
  .topbar-right { flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; }
  .main-content { padding-inline: var(--space-4); }
  #wizard-heading > #wizard-title { font-size: var(--text-lg); }
  .connections-page .steps-nav { display: flex; flex-direction: row; gap: var(--space-2); overflow-x: auto; }
  .connections-page .steps-nav .step-nav { flex: 0 0 auto; }
}