/* ═══════════════════════════════════════════════════════════════════════
   KEMETORY brand lockup — the SINGLE SOURCE OF TRUTH for the header logo.

   Every marketing page links this file (AFTER its own <style>) so the ankh,
   wordmark, heritage dots and motto are IDENTICAL on all pages — desktop and
   mobile — now and on any future page. Because it's linked last, it overrides
   whatever a page defined inline, so pages stay in sync automatically.

   New page checklist:
     1) <link rel="stylesheet" href="/brand.css">   (place after your <style>)
     2) Header markup:
          <a class="brand" href="/" aria-label="KEMETORY home">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 160"
                 width="30" height="48" fill="none" aria-hidden="true">
              <ellipse cx="50" cy="40" rx="16" ry="26" stroke="#AA7818" stroke-width="9" stroke-linecap="round"/>
              <line x1="50" y1="66" x2="50" y2="146" stroke="#AA7818" stroke-width="9" stroke-linecap="round"/>
              <line x1="26" y1="66" x2="74" y2="66" stroke="#AA7818" stroke-width="9" stroke-linecap="round"/>
            </svg>
            <span class="brand-text">
              <span class="display">KEMETORY</span>
              <span class="brand-dots" aria-hidden="true">
                <span style="background:#FBF4E4"></span><span style="background:#EBD7B0"></span><span style="background:#D8B173"></span><span style="background:#BE8C45"></span><span style="background:#9A6A30"></span><span style="background:#6E461F"></span>
              </span>
              <span class="brand-sub">Heirs of Legacy, Builders of Tomorrow</span>
            </span>
          </a>
   ═══════════════════════════════════════════════════════════════════════ */

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink, #1A0E06); }
/* Force the ankh to 30×48 in CSS (not just the markup attrs) so a future page
   can't drift by using a different width/height. */
.brand svg { flex: 0 0 auto; width: 30px; height: 48px; }
.brand-text { display: block; text-align: center; }
.brand .display { font-family: 'Cinzel', Georgia, serif; font-size: 18px; font-weight: 600; letter-spacing: .22em; display: block; line-height: 1.1; }
.brand-dots { display: inline-flex; gap: 4px; margin-top: 4px; position: relative; top: -1px; }
.brand-dots span { width: 6px; height: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.brand-sub { display: block; margin-top: 3px; font-style: italic; font-weight: 500; font-size: 11.5px; color: var(--gold-deep, #8A6010); white-space: nowrap; }

/* Phones: keep the WHOLE lockup — motto and dots included — just a touch
   smaller, and let the motto wrap instead of overflowing on narrow screens. */
@media (max-width: 560px) {
  .brand .display { font-size: 16px; letter-spacing: .16em; }
  .brand-dots { display: inline-flex; }
  .brand-sub { display: block; font-size: 10px; white-space: normal; max-width: 60vw; }
}

/* ─── Header "Free tools" nav — Discovery + QR Code ──────────────────────
   Inline tabs when the header has room; a single "Tools ▾" dropdown when it
   doesn't. Shared across every page (and future ones) via /brand.css. */
.nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-tools { display: inline-flex; align-items: center; gap: 4px; }
.nav-tool {
  text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap;
  color: var(--gold-deep, #8A6010); padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid transparent; transition: background .15s, border-color .15s;
}
.nav-tool:hover { background: var(--gold-pale, #FEF3CC); }
.nav-tool.active { border-color: var(--line, #D4C4A0); background: var(--gold-pale, #FEF3CC); }

.nav-menu { position: relative; display: none; }
.nav-menu > summary {
  list-style: none; cursor: pointer; white-space: nowrap; user-select: none;
  font-weight: 600; font-size: 14px; color: var(--gold-deep, #8A6010);
  border: 1.5px solid var(--line, #D4C4A0); background: rgba(253, 249, 240, .6);
  border-radius: 999px; padding: 7px 13px;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::marker { content: ''; }
.nav-menu[open] > summary { background: var(--gold-pale, #FEF3CC); border-color: var(--gold, #AA7818); }
.nav-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 40;
  background: #FDF9F0; border: 1px solid var(--card-edge, #EDE1CB); border-radius: 12px;
  box-shadow: 0 16px 40px -16px rgba(90, 60, 15, .5); padding: 6px; display: grid; gap: 2px;
}
.nav-menu-list a {
  text-decoration: none; color: var(--ink-soft, #5C401C); font-weight: 600; font-size: 14.5px;
  padding: 10px 12px; border-radius: 8px; white-space: nowrap;
}
.nav-menu-list a:hover { background: var(--gold-pale, #FEF3CC); color: var(--ink, #1A0E06); }

/* Not enough room for two tabs beside the button → collapse to the dropdown. */
@media (max-width: 640px) {
  .nav-tools { display: none; }
  .nav-menu { display: block; }
}

/* ─── Password field with a show/hide toggle (sign up / sign in) ─────────
   Wrap a .input in .pw-wrap and add an (empty) .pw-toggle button; /brand.js
   draws the Eye of Horus into it and wires the toggle. Open eye = visible,
   closed lid = hidden — matching the app's PasswordInput. */
.pw-wrap { position: relative; }
.pw-wrap > .input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px; line-height: 0;
  color: var(--gold, #AA7818); display: inline-flex;
}
.pw-toggle:hover { color: var(--gold-deep, #8A6010); }
.pw-toggle .horus-eye { width: 20px; height: 20px; }