/* The masthead every app shares (+cnMasthead): the brand and app switcher, the app's sections as
   tabs, then its tools. Uses only the shared token names (packages/theme/TOKENS.md). Load it before
   the app's own CSS, so the app can adjust it, and switcher.css after, for the phone drawer.
   The masthead is as wide as the page: set --cn-page-max on :root (880px unless set). */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--cn-page-max, 880px);
  margin: 0 auto;
  padding: 10px 20px;
}
/* The brand: cracklenut's nut and the app's name, set like the home page's wordmark. */
.brand { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.brand-mark { display: inline-grid; width: 30px; height: 30px; }
.brand-mark img { display: block; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(90, 40, 10, 0.5); }
.tabs { display: flex; gap: 2px; margin-right: auto; }
.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 650;
  text-decoration: none;
}
.tab:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.tab.active { background: var(--accent-soft); color: var(--accent); }
.mast-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mast-tools form { margin: 0; }

/* The theme switch shows the icon for the current choice. */
.theme-icon { display: none; }
:root:not([data-theme]) .theme-auto, :root[data-theme='light'] .theme-light, :root[data-theme='dark'] .theme-dark { display: inline-flex; }

/* Phones: one row; the sections go to a drawer (switcher.css). */
@media (max-width: 700px) {
  .masthead-inner { gap: 10px; padding: 8px 12px 8px 16px; }
}