/* MoneyLeaguers platform chrome — shared visual contract.
 *
 * Single source of truth for the header/footer LOOK across every surface
 * (Ghost, Next, CRA tools, Python picks, mock draft). Each surface renders its
 * own `.ml-chrome` markup natively; this file styles it; chrome.js only
 * enhances (member state, active nav, Portal fallback) — it never injects DOM.
 *
 * Namespacing: ALL selectors are `.ml-chrome*`. Design tokens are `--mlc-*`
 * scoped to the chrome roots so they can't clash with a surface's own vars.
 * Fonts (Anton / Oswald) must be loaded by the host surface (see runbook).
 *
 * No-JS: markup ships with data-ml-auth="out" (or unset → treated as out), so
 * the signed-out header renders cleanly without JavaScript.
 */

.ml-chrome,
.ml-chrome-foot {
  --mlc-green: #0e5a38;
  --mlc-green-dark: #093a24;
  --mlc-gold: #c9a24a;
  --mlc-gold-light: #f3dd9a;
  --mlc-ink: #1c1814;
  --mlc-ink-soft: #574b3b;
  --mlc-paper-light: #fbf4e1;
  --mlc-border: #d8c7a0;
  --mlc-font-display: "Anton", "Oswald", Impact, sans-serif;
  --mlc-font-sans: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.ml-chrome *,
.ml-chrome-foot * {
  box-sizing: border-box;
}

/* ---- header bar ---- */
.ml-chrome__bar {
  background: var(--mlc-green);
  color: #fff;
  border-bottom: 3px solid var(--mlc-gold);
}
.ml-chrome__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
}

/* logo */
.ml-chrome__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.ml-chrome__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  color: var(--mlc-gold-light);
  font-family: var(--mlc-font-sans);
  font-size: 0.82rem;
  font-weight: 700;
}
.ml-chrome__wordmark {
  font-family: var(--mlc-font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
}

/* nav + actions share type treatment */
.ml-chrome__nav,
.ml-chrome__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mlc-font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ml-chrome__nav {
  justify-content: center;
}
.ml-chrome__actions {
  justify-content: flex-end;
}
.ml-chrome__nav a,
.ml-chrome__actions a {
  color: inherit;
  text-decoration: none;
}
.ml-chrome__nav a {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.ml-chrome__nav a:hover {
  color: var(--mlc-gold-light);
}
.ml-chrome__nav a[aria-current="page"] {
  color: var(--mlc-gold-light);
  border-bottom-color: var(--mlc-gold);
}

/* primary action button (Subscribe / Account) */
.ml-chrome__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid var(--mlc-ink);
  background: linear-gradient(135deg, var(--mlc-gold-light), var(--mlc-gold));
  box-shadow: 3px 3px 0 rgba(28, 24, 20, 0.35);
  color: var(--mlc-ink);
}

/* Ghost-only search affordance: hidden unless the root opts in (.ml-chrome--ghost) */
.ml-chrome__search {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.ml-chrome__search:hover {
  color: var(--mlc-gold-light);
}
.ml-chrome--ghost .ml-chrome__search {
  display: inline-flex;
}
.ml-chrome__search svg {
  width: 18px;
  height: 18px;
}

/* ---- auth state visibility (driven by chrome.js setting data-ml-auth) ---- */
/* default + explicit "out": show signin/subscribe, hide greeting/account */
.ml-chrome[data-ml-auth="out"] [data-ml="hi"],
.ml-chrome[data-ml-auth="out"] [data-ml="account"],
.ml-chrome:not([data-ml-auth="in"]) [data-ml="hi"],
.ml-chrome:not([data-ml-auth="in"]) [data-ml="account"] {
  display: none;
}
.ml-chrome[data-ml-auth="in"] [data-ml="signin"],
.ml-chrome[data-ml-auth="in"] [data-ml="subscribe"] {
  display: none;
}
.ml-chrome__hi {
  font-family: var(--mlc-font-sans);
  font-weight: 700;
}

/* ---- footer (optional shared strip) ---- */
.ml-chrome-foot {
  margin-top: 50px;
  padding: 28px 24px;
  border-top: 2px solid var(--mlc-border);
  color: var(--mlc-ink-soft);
  font-family: var(--mlc-font-sans);
  font-size: 0.95rem;
  text-align: center;
}
.ml-chrome-foot a {
  color: inherit;
}

/* ---- mobile: two intentional rows (logo + action / nav) ---- */
@media (max-width: 800px) {
  .ml-chrome__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo actions"
      "nav nav";
    gap: 10px 14px;
    padding: 12px 18px;
  }
  .ml-chrome__logo {
    grid-area: logo;
    min-width: 0;
  }
  .ml-chrome__wordmark {
    font-size: 1.05rem;
  }
  .ml-chrome__actions {
    grid-area: actions;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 0.7rem;
  }
  /* the greeting is what made the mobile header stack tall — drop it on mobile */
  .ml-chrome__hi {
    display: none !important;
  }
  .ml-chrome__cta {
    min-height: 34px;
    padding: 7px 10px;
  }
  .ml-chrome__nav {
    grid-area: nav;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }
}