/* Public shell: header, mobile drawer and footer (ECOSYSTEM_REDESIGN.md §6.5,
   §8.1-§8.2). Loaded by templates/base.html only; the ecosystem list styles
   are in ecosystem.css, shared with the app. */

@layer shell {

/* ==================== header and drawer ==================== */
/* ============ header bar ============ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--border); }

.header-inner {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--header-h);
  padding-inline: var(--space-4);
}
/* Wide screens: nav truly centred between logo and actions. */
@media (min-width: 1280px) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    gap: var(--space-5);
    padding-inline: clamp(var(--space-6), 4vw, var(--space-12));
  }
  .header-inner > .header-actions { justify-self: end; margin-left: 0; }
}

.header-brand {
  display: inline-flex; align-items: center; flex-shrink: 0;
  color: var(--ink); line-height: 0;
}
.header-brand:hover { color: var(--ink); }
.header-brand .logo-mark { height: 40px; width: auto; }
.header-brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-xs); }

/* ============ centre nav ============ */
.header-nav {
  display: flex; align-items: center; gap: 2px; min-width: 0;
  flex: 1 1 auto; justify-content: center;
}

.site-header .nav-item {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--control-md); padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
  transition: color var(--dur-instant) var(--ease-out), background-color var(--dur-instant) var(--ease-out);
}
@media (min-width: 1280px) {
  .site-header .nav-item { padding: 0 var(--space-3); font-size: var(--text-base); }
}
.site-header .nav-item:hover,
.site-header .nav-menu[open] > .nav-item { color: var(--ink); background: var(--sunken); }
.site-header .nav-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.site-header .nav-chev {
  width: 14px; height: 14px; flex: none; color: var(--ink-3);
  transition: transform var(--dur-instant) var(--ease-out);
}
.site-header .nav-menu[open] > summary .nav-chev { transform: rotate(180deg); }

/* <details data-menu> disclosure */
.site-header details.nav-menu { position: relative; }
.site-header details.nav-menu > summary { list-style: none; }
.site-header details.nav-menu > summary::-webkit-details-marker { display: none; }

/* Link panels (base look from .menu-panel in components.css) */
.site-header .nav-panel {
  top: calc(100% + var(--space-2));
  min-width: 240px; padding: var(--space-2); gap: 2px;
}
.site-header .nav-panel > a {
  min-height: 40px; gap: var(--space-3); padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}
.site-header .nav-panel > a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.site-header .nav-mi-icon {
  width: 28px; height: 28px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2);
}
.site-header .nav-mi-icon svg { width: 16px; height: 16px; color: currentColor; }
.site-header .nav-panel > a:hover .nav-mi-icon { color: var(--action-ink); border-color: var(--border-strong); }

/* ============ right zone ============ */
.header-actions {
  display: flex; align-items: center; gap: var(--space-2);
  margin-left: auto; flex-shrink: 0;
}
.header-logout { margin: 0; display: flex; }

/* Ecosystem mega menu (last item of the primary nav): right-aligned under its trigger so it opens inward, 2 columns (ecosystem.css). */
.site-header .nav-panel-eco {
  top: calc(100% + var(--space-2)); right: 0; left: auto;
  width: min(680px, calc(100vw - var(--space-8)));
  padding: var(--space-3);
}

/* Appearance: palette picker + the one theme switch. Own panel (not
   .menu-panel) so the generic `.menu-panel button` reset never reaches the
   swatches or the switch. */
.header-icon-btn {
  width: var(--control-md); height: var(--control-md);
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color var(--dur-instant) var(--ease-out), background-color var(--dur-instant) var(--ease-out);
}
.header-icon-btn:hover,
.nav-menu-appearance[open] > .header-icon-btn { color: var(--ink); background: var(--raised); }
.header-icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.header-icon-btn svg { width: 16px; height: 16px; }

.appearance-panel {
  position: absolute; z-index: var(--z-popover);
  top: calc(100% + var(--space-2)); right: 0;
  width: 280px;
  display: grid; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

/* ============ theme switch (header panel + drawer) ============ */
.site-header .theme-switch,
.mobile-nav .theme-switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: var(--control-md);
  padding: var(--space-1) 0 0;
  border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left;
  cursor: pointer;
}
.theme-switch-track {
  position: relative; flex: none;
  width: 34px; height: 20px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background-color var(--dur-instant) var(--ease-out);
}
.theme-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-instant) var(--ease-out);
}
.theme-switch[aria-pressed="true"] .theme-switch-track { background: var(--action); }
.theme-switch[aria-pressed="true"] .theme-switch-knob { transform: translateX(14px); }
.theme-switch:hover .theme-switch-label { color: var(--ink); }
.theme-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ============ burger (≤900px) ============ */
.site-header .nav-burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  width: 40px; height: 40px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); cursor: pointer;
}
.site-header .nav-burger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-header .nav-burger span {
  display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
}
.nav-open .site-header .nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-open .site-header .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .site-header .nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ============ responsive header ============ */
@media (max-width: 900px) {
  .header-nav,
  .nav-menu-eco,
  .nav-menu-appearance,
  .header-logout { display: none; }
  .site-header .nav-burger { display: inline-flex; }
}
@media (max-width: 480px) {
  .header-inner { gap: var(--space-2); }
  .header-brand .logo-mark { height: 32px; }
  .header-actions { gap: var(--space-2); }
  .site-header .nav-burger { width: var(--control-md); height: var(--control-md); }
}
@media (pointer: coarse) {
  .header-actions > .btn,
  .site-header .nav-burger { min-height: 40px; }
}

/* ============ scrim ============ */
.site-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-out);
}
.site-scrim[hidden] { display: none; }
.nav-open .site-scrim { opacity: 1; }

/* ============ drawer (nav.js contract unchanged) ============ */
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(88vw, 360px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-panel) var(--ease-out);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav > * { flex-shrink: 0; }
.nav-open .mobile-nav { transform: translateX(0); }
body.nav-open { overflow: hidden; }
/* Desktop: never shown (nav.js also closes it when resizing up). Same
   specificity as the rules above and later in the file, so it wins. */
@media (min-width: 901px) {
  .mobile-nav,
  .site-scrim { display: none; }
}

.mobile-nav-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--header-h); padding: 0 var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.mobile-nav-head .logo-mark { height: 36px; width: auto; }

.mobile-nav .nav-close {
  width: 40px; height: 40px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.mobile-nav .nav-close:hover { color: var(--ink); background: var(--sunken); }
.mobile-nav .nav-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mobile-nav .nav-close svg { width: 16px; height: 16px; }

.mobile-nav-body {
  display: flex; flex-direction: column;
  padding: var(--space-2) var(--space-4) var(--space-4);
}

.mobile-nav .drawer-group {
  display: flex; flex-direction: column;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.mobile-nav .drawer-group:last-child { border-bottom: 0; }
.mobile-nav .drawer-label {
  margin: var(--space-2) 0 2px;
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-3);
}
.mobile-nav .drawer-group > a {
  display: flex; align-items: center;
  min-height: var(--control-lg);
  padding: 0 var(--space-2); margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-medium);
  text-decoration: none;
}
.mobile-nav .drawer-group > a:hover { background: var(--sunken); color: var(--ink); }
.mobile-nav .drawer-group > a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Collapsible group (the ecosystem include renders details.drawer-group). */
.mobile-nav .drawer-summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--control-lg);
  list-style: none; cursor: pointer;
  color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-medium);
}
.mobile-nav .drawer-summary::-webkit-details-marker { display: none; }
.mobile-nav .drawer-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.mobile-nav .nav-chev {
  width: 16px; height: 16px; flex: none; color: var(--ink-3);
  transition: transform var(--dur-instant) var(--ease-out);
}
.mobile-nav details.drawer-group[open] > .drawer-summary .nav-chev { transform: rotate(180deg); }

.mobile-nav .drawer-appearance { gap: var(--space-3); padding-top: var(--space-4); }
.mobile-nav .drawer-appearance .palette-swatch {
  min-height: var(--control-lg); justify-content: center; font-size: var(--text-sm);
}
.mobile-nav .drawer-appearance .theme-switch { min-height: var(--control-lg); padding-top: var(--space-2); }

.mobile-nav-cta {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.mobile-nav-cta form { margin: 0; }
.mobile-nav-cta .btn { width: 100%; --btn-h: var(--control-lg); }

/* ==================== footer ==================== */
  /* Stripe/Linear-style: brand column + five link columns, fine print, bottom
     bar. Same centred .container as the page sections. */
  .site-footer {
    border-top: 1px solid var(--border);
    background: var(--sunken);
    padding: var(--space-16) 0 var(--space-8);
    color: var(--ink-2);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .site-footer a:not(.btn) { color: var(--ink-2); text-decoration: none; }
  .site-footer a:not(.btn):hover { color: var(--ink); }
  .site-footer a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

  /* brand column + the link columns */
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--space-12);
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
  }
  .footer-logo { display: inline-block; line-height: 0; }
  .footer-logo .logo-mark { height: var(--space-8); width: auto; }

  .footer-pitch {
    max-width: 45ch;
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--ink-2);
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .footer-title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: 0;
    color: var(--ink);
  }

  .footer-links,
  .footer-legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-links { display: grid; gap: var(--space-3); line-height: var(--leading-snug); }
  .footer-links a { overflow-wrap: anywhere; }

  /* Important information fine print, below the columns (hairline in the component) */
  .footer-notice { margin-top: var(--space-14); }

  /* bottom bar, hairline above */
  .footer-legal {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--ink-3);
  }

  .footer-copy { margin: 0; }

  .footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .site-footer .footer-legal-links a { color: var(--ink-3); }
  .site-footer .footer-legal-links a:hover { color: var(--ink); }

  /* brand on its own row, five columns below */
  @media (max-width: 1280px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  }

  /* three columns */
  @media (max-width: 900px) {
    .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* two columns; Ecosystem full width */
  @media (max-width: 640px) {
    .site-footer { padding: var(--space-12) 0 max(var(--space-6), env(safe-area-inset-bottom)); }
    .footer-grid { gap: var(--space-8); }
    .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }
    .footer-col--eco { grid-column: 1 / -1; }
    .footer-notice { margin-top: var(--space-10); }
    .footer-legal { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 480px) {
    .site-footer { padding-top: var(--space-10); }
    .footer-nav { gap: var(--space-7) var(--space-3); }
    .footer-notice { margin-top: var(--space-8); }
    .footer-legal { margin-top: var(--space-6); }
  }

} /* @layer shell */