@import url("./account-menu.css");
@import url("./site-header.css");
/* Shared site nav (William #349): the homepage header on every page. G logo (approved vector mark) top left,
   Search / For agents / Docs / About, Get started from 861px then Sign in, and a bare light/dark icon (no box). Monochrome. */
:root{--mark:url(/src/ui/brand/geocities-g-white.svg)}
:root.light{--mark:url(/src/ui/brand/geocities-g-black.svg)}
@media (prefers-color-scheme:light){:root:not(.dark){--mark:url(/src/ui/brand/geocities-g-black.svg)}}
header.nav{display:flex;align-items:center;gap:12px 28px;box-sizing:border-box;max-width:1120px;margin:0 auto;padding:20px 24px;flex-wrap:wrap;border:0}
header.nav .brand{display:flex}
header.nav .logo{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
header.nav .logo span{display:block;width:42px;height:42px;background:transparent var(--mark) center/100% no-repeat;border:0;border-radius:0}
header.nav nav{display:none;gap:24px}
header.nav nav a{color:var(--mut);text-decoration:none;font-size:14px;display:inline-flex;align-items:center;min-height:44px}
header.nav nav a[hidden]{display:none}
header.nav nav a:hover,header.nav nav a[aria-current]{color:var(--fg)}
@media (min-width:861px){header.nav nav{display:flex}}
header.nav .sp{flex:1}
header.nav #short-name:empty{display:none}
header.nav .btn.auth{border-radius:999px;background:var(--fg);color:var(--bg);border:1px solid var(--fg);font-weight:600;padding:8px 18px;text-decoration:none;white-space:nowrap;min-height:44px}
header.nav .btn.get-started{display:none;box-sizing:border-box;min-height:44px;border-radius:999px;background:var(--fg);color:var(--bg);border:1px solid var(--fg);font-weight:600;padding:8px 18px;text-decoration:none;white-space:nowrap}
@media (min-width:861px){
  header.nav .btn.get-started{display:inline-flex}
  header.nav .btn.auth{background:transparent;color:var(--fg);border-color:transparent}
  header.nav .btn.auth:hover{background:transparent;opacity:.75}
}
header.nav[data-auth="in"] .btn.get-started{visibility:hidden}
.btn.theme-bare,header.nav #theme-toggle{border:0;background:transparent;border-radius:999px;width:44px;height:44px;min-width:44px;padding:0;display:inline-grid;place-items:center}
.btn.theme-bare:hover,header.nav #theme-toggle:hover{background:transparent;opacity:.75}
header.nav .tg{width:18px;height:18px;border-radius:50%;background:linear-gradient(90deg,var(--fg) 50%,transparent 50%);border:2px solid var(--fg);box-sizing:border-box}
@media (max-width:600px){header.nav{padding:16px}}
/* 861–1100px: nav, the testnet badge and Get started share one row, so the gap is tighter than at 1280. */
@media (max-width:1100px){header.nav{gap:8px 16px}}
@media (min-width:861px) and (max-width:1100px){header.nav nav{gap:16px}}
@media (min-width:861px){html{scrollbar-gutter:stable}}
/* One testnet badge wording everywhere: "Sepolia testnet preview" (the homepage's). */
header.nav .net-badge{font-size:11px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--mut);border:1px solid var(--bd);border-radius:999px;padding:2px 10px;white-space:nowrap}
@media (max-width:420px){header.nav .net-badge{font-size:10px;padding:1px 8px}}
@media (max-width:860px){header.nav{flex-wrap:nowrap;gap:8px}header.nav .btn.auth{padding:8px 14px;font-size:14px}}