/* Shell -Marketing (.shell-marketing family)
 *
 * Identity-only chrome used pre-login: landing, login, signup,
 * OTP, password reset. No app navigation, no tabbar, no drawer.
 *
 * Provides: outer container (dark or light canvas) + slim topbar
 * row (brand wordmark + optional right-side actions like locale
 * switcher). The page body fills whatever it needs underneath.
 *
 * Spec: docs/strategy/design-system/32-shell-system.md §3.1
 * Wireframe: wireframes/shell_mobile/_atlas.html §1
 *
 * Mobile-first. All values via tokens.css. Feature CSS (auth.css,
 * landing.css) layers domain-specific composition on top of this
 * shell -those files are not refactored as part of this pilot.
 */

/* ────────────────────────────────────────────────────────────────
   Outer container
   ──────────────────────────────────────────────────────────────── */
.shell-marketing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
}

.shell-marketing.on-dark {
  background: var(--primary-dark);
  color: var(--on-dark-90);
}

/* ────────────────────────────────────────────────────────────────
   Topbar -wordmark + optional right-side action slot
   ──────────────────────────────────────────────────────────────── */
.shell-marketing-topbar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  gap: var(--space-3);
}

.shell-marketing-topbar-brand {
  display: inline-flex;
  align-items: center;
}

/* Wordmark sizing is owned by the page (feature CSS), not the shell.
 * Auth pages size via .auth-topbar-wordmark in features/auth.css.
 * New pages extending _marketing_base.html should declare their own
 * img rule rather than relying on a shell default. */

.shell-marketing-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Locale pill base lives in components/50-locale-pill.css (.locale-pill).
   Marketing shell adds an on-dark override for hero-overlay topbars. */
.shell-marketing.on-dark .locale-pill {
  background: transparent;
  color: var(--on-dark-85);
  border-color: var(--on-dark-50);
}

.shell-marketing.on-dark .locale-pill:hover,
.shell-marketing.on-dark .locale-pill:focus-visible {
  color: var(--surface);
  border-color: var(--on-dark-75);
}

/* ────────────────────────────────────────────────────────────────
   Body slot -page fills it; shell doesn't dictate composition
   ──────────────────────────────────────────────────────────────── */
.shell-marketing-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}