/* Shared page chrome. Dimensions use the app's 1180 × 820 logical canvas. */
:root { --app-header-height: 74px; }

.app-page-header.app-page-header {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #284251;
  color: #e3f5ff;
  background: #071727;
}
.app-page-header .app-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  height: var(--app-header-height);
  padding: 0 24px;
}
.app-header-row > .app-back-button { justify-self: start; align-self: center; }
.app-page-header .app-page-title {
  display: grid;
  min-width: 0;
  max-width: 360px;
  gap: 4px;
  margin: 0;
  text-align: center;
}
.app-page-title.app-page-title > :is(h1, h2) {
  margin: 0;
  color: inherit;
  font: 700 22px/1.25 var(--ui-font, sans-serif);
  letter-spacing: 0;
}
.app-page-title.app-page-title > small {
  color: #98b8cb;
  font: 500 11px/1.3 var(--ui-font, sans-serif);
  letter-spacing: 0;
}
.app-page-header .app-page-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12px;
}
.app-page-actions > :is(b, strong) { color: #ffe36d; font-size: 12px; }
.app-page-header .app-header-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 16px;
  padding: 6px 24px 10px;
}

/* Main charts share a single brand mark, lockup and toolbar geometry. */
.solar-header.solar-header, .galaxy-map-header.galaxy-map-header {
  left: 24px;
  right: 24px;
  top: 0;
  height: var(--app-header-height);
}
.app-brand.app-brand { display: flex; align-items: center; gap: 12px; }
.app-brand-logo.app-brand-logo {
  display: block;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  padding: 0;
  border: 2px solid #9af6ff;
  border-radius: 50%;
  background: #071727;
  box-shadow: 0 0 18px #57dfff44;
  object-fit: contain;
}
.app-brand .app-brand-copy { display: grid; gap: 3px; }
.app-brand.app-brand strong { color: #e3f5ff; font: 700 22px/1.2 var(--ui-font, sans-serif); }
.app-brand.app-brand small {
  display: flex;
  align-items: baseline;
  color: #82dff2;
  font: 500 10px/1.4 var(--ui-font, sans-serif);
  letter-spacing: .14em;
  white-space: nowrap;
}
.app-brand-version.app-brand-version { margin-left: 5px; color: #7399ae; font: inherit; letter-spacing: 0; }
.brand-mark:has(.app-brand-logo) { padding: 0; border: 0; background: none; box-shadow: none; }
.brand-mark > .app-brand-logo { width: 100%; height: 100%; }
.parent-brand .app-brand-logo { width: 43px; height: 43px; flex-basis: 43px; }
.parent-brand small { font-size: 11px; letter-spacing: 0; }

/* Dense task information gets a second row, keeping the return control fixed. */
.travel-session-head.app-page-header, .travel-header.app-page-header {
  position: absolute;
  inset: 0 0 auto;
  color: #173c45;
  border-bottom-color: #d5d9ca;
  background: #f9f3df;
}
.travel-session-head.app-page-header::before { content: none; }
:is(.travel-session-head, .travel-header) .app-page-title > small { color: #60777b; }
.travel-session-head .app-header-secondary { height: 42px; padding-top: 0; padding-bottom: 8px; }
.travel-session-head .travel-stage-steps { justify-content: center; }
.travel-session-head.app-page-header ~ :is(.travel-learn-stage, .travel-question-stage, .travel-dictation-stage, .travel-review-stage) { top: 117px; }
.travel-session-head.app-page-header ~ .travel-review-stage { position: absolute; min-height: 0; align-content: center; }
.travel-session-head.app-page-header ~ .solar-prompt-transition { position: absolute; inset: 117px 0 0; height: auto; }
.travel-header.app-page-header ~ .travel-done-main { top: 75px; }
.nebula-challenge-header .app-header-secondary { height: 72px; }
.nebula-challenge-header .nebula-type-rail { width: 720px; }
.nebula-question-screen .nebula-question-layout { height: calc(100% - 147px); }
.interstellar-screen.interstellar-screen > main { top: 75px; }
.nebula-warp-transit-screen.nebula-warp-transit-screen > main { top: 75px; }
.galaxy-data-recovery > .app-page-header { position: absolute; inset: 0 0 auto; color: #173c45; background: #f9f3df; border-bottom-color: #d5d9ca; }
.guide-shell { grid-template-rows: 75px 148px 1fr 104px; }
.guide-header .listen-button { min-height: 40px; padding: 0 16px; border-radius: 12px; box-shadow: 0 4px 0 #987a1f; font-size: 13px; }
.parent-topbar.app-page-header {
  --back-ink: #173c45;
  --back-accent: #176b72;
  --back-line: #8eafad;
  --back-fill: #e1eee7;
  --back-hover: #176b7210;
  color: #12384b;
  background: #fff;
  border-bottom-color: #d9e2e7;
}
.parent-topbar .parent-header-context { display: block; padding-top: 0; padding-bottom: 12px; }
.parent-topbar .parent-top-actions > span { font-size: 11px; }
.parent-sidebar { padding-top: 24px; }