/* Shared public-site chrome: the footer (`esf-*`) and the header (`esn-*`,
   further down). Self-contained colors and fonts so both render identically on
   every public page regardless of that page's own theme tokens, which differ
   from page to page (--text-2 vs --text-secondary vs --dim, and so on). */

.esf {
  border-top: 1px solid rgba(255,255,255,.06);
  background: #070b0a;
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.esf-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 46px 24px 34px;
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) 3fr;
  gap: 40px 56px;
  align-items: start;
}
.esf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.esf-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  color: #eef3f0;
}
.esf-logo .esf-wm-b { color: #2ee08a; }
.esf-tagline {
  margin: 0;
  max-width: 30ch;
  color: #8ba398;
  font-size: 13.5px;
  line-height: 1.55;
}

/* Columns rather than a flat row of links. auto-fit lets the three groups
   reflow to two and then one as the space narrows, without a breakpoint per
   step. */
.esf-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
}
.esf-col { display: flex; flex-direction: column; gap: 11px; }
.esf-col-label {
  margin: 0 0 1px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6b7f76;
  font-weight: 500;
}
.esf-col a {
  color: #a8bcb2;
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s;
}
.esf-col a:hover { color: #3df0a0; text-decoration: none; }

.esf-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a5b0ff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid rgba(88,101,242,.5);
  border-radius: 9px;
  background: rgba(88,101,242,.14);
  transition: background .2s, border-color .2s, color .2s;
}
.esf-discord:hover {
  background: rgba(88,101,242,.26);
  border-color: rgba(88,101,242,.8);
  color: #c3cbff;
  text-decoration: none;
}

/* Legal strip, split off by a rule so the disclaimer reads as fine print
   rather than as another footer column. */
.esf-base {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px 30px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: baseline;
}
.esf-copy { flex: none; color: #6b7f76; font-size: 12.5px; }
.esf-disclaimer {
  flex: 1 1 420px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: #6b7f76;
  line-height: 1.5;
}
.esf-disclaimer a { color: #8ba398; }

@media (max-width: 720px) {
  .esf-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 38px 20px 28px;
  }
  .esf-base { padding: 18px 20px 26px; }
}

/* ============================================================
   Light/dark theme control for public pages (no account menu).
   The toggle button (partials/_theme_toggle.html) lives in the
   nav; the early script in partials/_theme_init.html flips
   data-theme. These pages already pull in tokens.css, so the body
   flips for free — only the nav / dropdown / mobile chrome hardcode
   dark colors, fixed with data-theme overrides below (higher
   specificity than the pages' bare `nav {}` inline rules, so source
   order doesn't matter).
   ============================================================ */
.pub-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 10px);
  color: var(--text-secondary, #8ba398);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pub-theme-toggle:hover {
  color: var(--text-primary, #eef3f0);
  border-color: var(--border-strong, rgba(255, 255, 255, 0.18));
}
.pub-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow, 0 0 0 3px rgba(46, 224, 138, 0.45));
}
.pub-theme-ic { display: block; }
.pub-theme-sun { display: none; }
[data-theme="light"] .pub-theme-moon { display: none; }
[data-theme="light"] .pub-theme-sun { display: block; }

/* Nav + dropdown + mobile chrome: swap the hardcoded dark glass for light.
   One rule per surface now that every public page shares the `esn-*` header,
   instead of the old per-page class conventions. */
[data-theme="light"] .esn-fixed { background: rgba(255, 255, 255, 0.72); }
[data-theme="light"] .esn-panel,
[data-theme="light"] .esn-mobile { background: rgba(255, 255, 255, 0.97); }
[data-theme="light"] .esn-burger { background: rgba(9, 26, 20, 0.04); }
[data-theme="light"] .esn-item:hover,
[data-theme="light"] .esn-mobile-item:hover { background: rgba(18, 184, 102, 0.1); }

/* ============================================================
   Shared public header (partials/_public_nav.html).
   Self-contained colors with CSS-var fallbacks so it renders the
   same on every public page regardless of that page's own token
   names. `esn-*` avoids collisions with the per-page `.nav-*` /
   `.sc-nav-*` rules those pages used to carry.
   ============================================================ */
.esn {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Pinned variant (landing, Edge Radar, Market Monitor). Pages opting in
   reserve the space themselves via their own .wrap / .hero top padding. */
.esn-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(7, 11, 10, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.esn-fixed.esn-scrolled { border-bottom-color: var(--border, rgba(255, 255, 255, 0.09)); }
.esn-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* In-flow variant sits inside the page's own column, so it must not add a
   second gutter on top of the container's. */
.esn:not(.esn-fixed) .esn-inner { max-width: none; padding: 0; height: 72px; }

.esn-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.esn-logo:hover { text-decoration: none; }
.esn-wm-a { color: var(--text-primary, #eef3f0); }
.esn-wm-b { color: var(--green-500, #2ee08a); }

.esn-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.esn-menu { display: flex; align-items: center; gap: 20px; }
.esn-link {
  color: var(--text-secondary, #aebbb4);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 6px;
  text-decoration: none;
  transition: color 0.2s;
}
.esn-link:hover { color: var(--green-500, #2ee08a); text-decoration: none; }

.esn-dropdown { position: relative; }
.esn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  color: var(--text-secondary, #aebbb4);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 6px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.esn-caret { transition: transform 0.22s ease; }
.esn-dropdown:hover .esn-trigger,
.esn-dropdown:focus-within .esn-trigger { color: var(--green-500, #2ee08a); }
.esn-dropdown:hover .esn-caret,
.esn-dropdown:focus-within .esn-caret { transform: rotate(180deg); }
.esn-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px;
  padding: 7px;
  background: rgba(9, 14, 12, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 120;
}
/* Bridges the gap between trigger and panel so the pointer can cross it
   without the hover state dropping. */
.esn-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.esn-dropdown:hover .esn-panel,
.esn-dropdown:focus-within .esn-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.esn-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-secondary, #aebbb4);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.esn-item:hover { background: rgba(46, 224, 138, 0.09); color: var(--green-500, #2ee08a); text-decoration: none; }
.esn-item svg { color: var(--green-500, #2ee08a); flex: none; }

.esn-actions { display: flex; align-items: center; gap: 10px; }
.esn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.esn-btn:hover { text-decoration: none; }
.esn-btn-primary {
  background: var(--gradient-brand, linear-gradient(135deg, #24d67f, #0f9354));
  color: var(--text-on-accent, #04140c);
}
.esn-btn-primary:hover { filter: brightness(1.08); color: var(--text-on-accent, #04140c); }
.esn-btn-ghost {
  background: transparent;
  border-color: var(--border, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary, #aebbb4);
  font-weight: 500;
}
.esn-btn-ghost:hover {
  color: var(--text-primary, #eef3f0);
  border-color: var(--border-strong, rgba(255, 255, 255, 0.18));
}

.esn-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  color: var(--text-primary, #e9f1ec);
  cursor: pointer;
}
.esn-burger:hover { border-color: var(--green-500, #2ee08a); }
.esn-mobile {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  padding: 7px;
  background: rgba(9, 14, 12, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.2);
  z-index: 200;
}
/* The pinned nav's panel is fixed so the JS can re-anchor it to the burger,
   which keeps it on-screen when the host page overflows horizontally. */
.esn-fixed .esn-mobile { position: fixed; top: 62px; right: 12px; }
.esn-mobile.esn-open { display: block; }
.esn-mobile-item {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--text-secondary, #aebbb4);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.esn-mobile-item:hover { background: rgba(46, 224, 138, 0.09); color: var(--green-500, #2ee08a); text-decoration: none; }
.esn-mobile-label {
  padding: 10px 12px 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary, #aebbb4);
  opacity: 0.65;
  font-weight: 600;
}
.esn-mobile-sep { height: 1px; background: var(--border, rgba(255, 255, 255, 0.09)); margin: 6px 4px; }

@media (max-width: 720px) {
  .esn-center { display: none; }
  .esn-burger { display: inline-flex; }
  .esn-actions .esn-btn-ghost { display: none; }
}
@media (max-width: 520px) {
  .esn-inner { padding: 0 16px; height: 60px; }
  .esn:not(.esn-fixed) .esn-inner { padding: 0; height: 64px; }
  .esn-actions { gap: 8px; }
  .esn-btn { padding: 8px 13px; font-size: 13px; }
  .esn-logo { font-size: 16px; gap: 8px; }
  .esn-logo svg { width: 24px; height: 24px; }
}