/* Page shells: header, main container, footer. */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari: dynamic VH excludes the collapsing URL bar */
  display: flex;
  flex-direction: column;
}

.page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) 0;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.page__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.9rem;
}

.page__nav a {
  color: var(--color-muted);
  text-decoration: none;
  /* Touch target ≥44×44 — Design §9.5. The visible label stays compact;
   * padding expands the hit-box without enlarging the type. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
}

.page__nav a:hover {
  color: var(--color-primary);
}

.page__main {
  flex: 1;
  max-width: var(--container-narrow);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}

.page__footer {
  text-align: center;
  padding: var(--space-5);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.hearts-canvas {
  position: fixed;
  inset: 0;
  /* Canvas is a replaced element: `inset: 0` alone leaves the intrinsic
   * 300×150 in place, clustering hearts in the top-left. Explicit 100%
   * overrides the intrinsic size and resolves against the viewport (the
   * fixed-positioned containing block), without the iOS-URL-bar /
   * desktop-scrollbar-gutter pitfalls of 100vw/100vh. */
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.page > *:not(.hearts-canvas) {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .page__header {
    padding: var(--space-6) var(--space-7) 0;
  }
  .page__main {
    padding: var(--space-9) var(--space-7) var(--space-7);
  }
}

/* ── settings dropdown in the top nav (issue #25 follow-up) ───────────────
 * The `settings` link became a <details> menu grouping account + the two
 * admin surfaces (identities, api keys). The menu overlays page content via
 * absolute positioning, so the header must stack above .page__main — both are
 * `.page > *` pinned to z-index 1, so raise the header (this rule sits after
 * that one, equal specificity, source-order wins). */
.page > .page__header { z-index: 5; }

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-2);
  user-select: none;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: "▾"; font-size: 0.8em; opacity: 0.7; }
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary { color: var(--color-primary); }

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
.page__nav .nav-dropdown__menu a {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.page__nav .nav-dropdown__menu a:hover {
  color: var(--color-primary);
  background: var(--color-bg-soft);
}