/*
 * vealth-nav.css — the ONE nav and the ONE footer, for every public page.
 *
 * WHY THIS FILE EXISTS
 * The site had one nav object drawn by four different hands: the shared sheet
 * (vealth-next.css), two runtime injectors, and a page-scoped `body.simple`
 * block in index.html that held the approved editorial treatment and reached
 * exactly one page. Fourteen of the 44 public pages load neither vealth-next.css
 * nor vealth-simple.css, so the ONLY way they could get a nav at all was a
 * script — which means their first frame had no nav until JS ran.
 *
 * So the nav and the footer are dressed here, in one stylesheet every public
 * page links from its <head>. The markup is stamped inline by
 * scripts/vealth/build-nav.mjs from apps/web/public/vealth/vealth-nav-registry.json,
 * which makes the zero-JS first frame complete. The injectors may now only
 * ENHANCE (nav height publishing, theme toggle); none of them is needed to draw
 * anything on a public page.
 *
 * TOKENS ARE NAMESPACED ON PURPOSE.
 * Every value below reads `var(--house-token, var(--vnav-fallback))`. On a page
 * that loads vealth-next.css or vealth-simple.css the house token wins, so the
 * nav is the same material as the page under it. On a page that loads no token
 * sheet at all (directory, worker-ledger, ewp, regenerative-finance) the
 * --vnav-* fallback carries it, in BOTH themes. Nothing here defines a house
 * token name, so this sheet can never overwrite a page's own palette — the
 * failure mode that made privacy.html paint a cream nav on a near-black page in
 * 2026-08-06.
 *
 * THE ANCHOR IS SHARED, THE EDITORIAL IS HERE.
 * The six anchor properties (position/top/max-width/margin/border-radius/padding)
 * are identical to vealth-next.css, vealth-quiet-nav.js and vealth-nav-v2.js;
 * check:nav-anchor-parity compares all four and fails on drift. Everything else
 * below — the 18px gap, the softer blur, the spectrum hairline, the quiet link
 * type, the ONE contained gold chip — is the editorial treatment the operator
 * approved on the front door (2026-08-31: "the nav bar needs to be more
 * aesthetic than that"), lifted out of index.html's page <style> so every page
 * wears it instead of one.
 */

:root {
  /* The frame spectrum, sampled from the LOTUS for each theme. Identical values
     to the --fx pair index.html defines for its own hero, so lifting the nav out
     of that page changed nothing a visitor can see. */
  --vnav-fx: linear-gradient(115deg,#c8922f 0%,#ecca82 16%,#dca083 36%,#8fb282 56%,#a2ccbd 72%,#e2ba66 88%,#c8922f 100%);
  /* The ONE contained action. Gold is the money-and-votes colour and reads on
     both grounds, so the chip does NOT move between themes — the same law the
     lotus spectrum carries. index.html rendered this chip identically in light
     and dark before this file existed; moving it would be a design change
     wearing a de-duplication's clothes. */
  --vnav-chip: linear-gradient(180deg,#e6b45a,#c98a2e);
  --vnav-chip-ink: #1b1207;
  /* Fallbacks for pages that load no token sheet. Never house-token names. */
  --vnav-ink: #241b18;
  --vnav-muted: rgba(40,29,24,0.74);
  --vnav-soft: rgba(40,29,24,0.60);
  --vnav-gold-text: #7c590c;
  --vnav-rule: rgba(120,80,45,0.16);
  --vnav-glass: linear-gradient(115deg,rgba(241,228,199,0.88),rgba(236,221,188,0.62),rgba(221,231,205,0.58),rgba(230,224,194,0.68));
  --vnav-sheen: rgba(236,218,180,0.45);
  --vnav-lip: rgba(235,216,177,0.38);
  --vnav-lip-strong: rgba(235,216,177,0.50);
  --vnav-glow-gold: rgba(242,199,107,0.15);
  --vnav-glow-green: rgba(156,207,154,0.13);
  --vnav-band: rgba(250,241,222,0.40);
}
:root[data-theme="dark"] {
  --vnav-fx: linear-gradient(115deg,#c9a24b 0%,#f0dfa6 18%,#8fb083 44%,#2e5b45 66%,#152b22 84%,#c9a24b 100%);
  --vnav-chip: linear-gradient(180deg,#e6b45a,#c98a2e);
  --vnav-chip-ink: #1b1207;
  --vnav-ink: #ece4d0;
  --vnav-muted: rgba(236,228,208,0.74);
  --vnav-soft: rgba(236,228,208,0.56);
  --vnav-gold-text: #d9b876;
  --vnav-rule: rgba(224,203,150,0.15);
  --vnav-glass: linear-gradient(115deg,rgba(13,16,11,0.90),rgba(17,21,14,0.78),rgba(15,19,13,0.74),rgba(19,23,16,0.80));
  --vnav-sheen: rgba(233,219,178,0.07);
  --vnav-lip: rgba(233,219,178,0.08);
  --vnav-lip-strong: rgba(233,219,178,0.12);
  --vnav-glow-gold: rgba(217,184,118,0.11);
  --vnav-glow-green: rgba(132,169,138,0.10);
  --vnav-band: rgba(224,203,150,0.030);
}

/* ─────────────────────────────────────────────────────────── THE NAV ─────
   ANCHORED, not floating. The six properties below are the shared anchor and
   are compared byte for byte against vealth-next.css and both injectors by
   check:nav-anchor-parity. The `(100% - 900px)/2 + 22px` measure puts the
   wordmark on the same left edge as the page's own text. Change it here and in
   the other three, or the suite splits in half. */
.quiet-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: none; margin: 0; border-radius: 0;
  padding: 10px max(18px, calc((100% - 900px) / 2 + 22px));
  border: 0; border-bottom: 1px solid var(--rule, var(--vnav-rule));
  background: var(--nav-glass, var(--vnav-glass));
  box-shadow: inset 0 1px 0 var(--nav-sheen, var(--vnav-sheen));
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
}
/* The brand line under the bar: a thin drift of the logo's own spectrum. */
.quiet-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--vnav-fx); background-size: 260% 100%; opacity: .85;
}

/* The wordmark is identity, not a nav chip: it never wears the active pill. */
.quiet-nav .qn-brand {
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; flex: none;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 18px;
  letter-spacing: -0.015em; color: var(--ink, var(--vnav-ink));
  text-decoration: none; padding: 6px 4px;
}
/* The lotus shown WHOLE: contain, no crop of the glyph, no dark disc, no ring
   (operator law 2026-07-22). Mirrors vealth-next.css exactly. */
.quiet-nav .qn-brand::before {
  content: ""; width: 56px; height: 56px; flex: none;
  background: url("brand-mark-light-round-96.png?v=lotus9") center/contain no-repeat;
}
:root[data-theme="dark"] .quiet-nav .qn-brand::before {
  background-image: url("brand-mark-dark-round-96.png?v=lotus9");
}
.quiet-nav .qn-brand:hover,
.quiet-nav .qn-brand[aria-current="page"] { background: none; box-shadow: none; }

.quiet-nav .qn-links {
  display: flex; align-items: center; gap: 2px 8px; flex-wrap: wrap; justify-content: flex-end;
}
/* Quiet destinations: type, not chrome. A gold underline on hover, nothing
   painted, so the ONE action below is the only thing wearing a surface. */
.quiet-nav .qn-links a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted, var(--vnav-muted)); text-decoration: none;
  background: none; box-shadow: none; border-radius: 9px; padding: 7px 11px;
  transition: color .16s ease, background .16s ease;
}
.quiet-nav .qn-links a:hover {
  color: var(--gold-text, var(--vnav-gold-text)); background: none; box-shadow: none;
  text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--gold-text, var(--vnav-gold-text)) 55%, transparent);
}
/* The page you are on. */
.quiet-nav .qn-links a[aria-current="page"] {
  color: var(--ink, var(--vnav-ink));
  background: linear-gradient(135deg, var(--glow-gold, var(--vnav-glow-gold)), var(--glow-green, var(--vnav-glow-green)));
  box-shadow: inset 0 1px 0 var(--nav-lip-strong, var(--vnav-lip-strong));
  text-decoration: none;
}
/* THE ONE CONTAINED ACTION. Exactly one item in the bar wears a surface, and
   it is the board. It keeps its chip whether or not it is the current page:
   this is an action, not a location. */
.quiet-nav .qn-links .qn-start,
.quiet-nav .qn-links .qn-start:hover,
.quiet-nav .qn-links .qn-start[aria-current="page"] {
  color: var(--vnav-chip-ink); font-weight: 700; text-decoration: none;
  background: var(--vnav-chip) padding-box, var(--vnav-fx) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 10px 22px -14px rgba(122,74,30,0.55);
  margin-right: 6px;
}
.quiet-nav .qn-links .qn-start:hover { filter: brightness(1.06); }

/* Phones. These restate the desktop rules at the SAME specificity they were
   written at, which is the whole reason the front door's bar did not wrap to
   three rows: a page-scoped block that only sets desktop values loses the
   mobile ones to the shared sheet and the bar grows a row per breakpoint. */
@media (max-width: 640px) {
  .quiet-nav {
    top: 0; gap: 8px; padding: 6px 10px 6px 18px; border-radius: 0; margin-top: 0; flex-wrap: nowrap;
    -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  }
  .quiet-nav .qn-brand { font-size: 16px; padding: 6px 2px; min-height: 44px; }
  .quiet-nav .qn-brand::before { width: 46px; height: 46px; }
  .quiet-nav .qn-links { gap: 2px 4px; min-width: 0; justify-content: flex-end; }
  .quiet-nav .qn-links a { font-size: 12.5px; padding: 6px 8px; min-height: 44px; flex: none; }
  .quiet-nav .qn-links .qn-start { padding: 7px 11px; margin-right: 2px; }
}
/* Tight phones: the wordmark yields its width (still read aloud), the lotus
   medallion stays, and the links WRAP rather than hide behind a scroll track
   nobody discovers. --nav-h is measured from the real bar, so a two-row nav
   resizes the scenes on its own. */
@media (max-width: 430px) {
  .quiet-nav { gap: 4px; padding: 6px 6px 6px 18px; flex-wrap: nowrap; align-items: flex-start; }
  .quiet-nav .qn-brand { font-size: 0; gap: 0; padding: 6px 0; }
  .quiet-nav .qn-links { flex-wrap: wrap; overflow-x: visible; min-width: 0; justify-content: center; row-gap: 2px; gap: 2px; }
  .quiet-nav .qn-links a { font-size: 12px; padding: 6px 6px; }
  .quiet-nav .qn-links a:first-child { margin-left: 0; }
  .quiet-nav .qn-links .qn-start { padding: 6px 9px; margin-right: 0; }
}

/* ──────────────────────────────────────────────────────── THE FOOTER ─────
   Four groups, ranked, not fourteen equal links. The row a visitor acts from
   comes first, is the largest, and is the only one carrying an action;
   Understand, Developers and Archive are smaller and quieter; the legal
   baseline is quietest. Everything the old footer reached is still
   addressable — see `mapped` in vealth-nav-registry.json for where each old
   link went.

   HEIGHT IS PART OF THE DESIGN. The footer it replaces measured 300px at 390px
   wide and 150px at 1440: the single largest piece of chrome on the phone page.
   A four-group hierarchy carries 21 links where the flat row carried 15, so it
   pays for itself only if it does not cost more room. Each quiet group is a
   KICKER over a WRAPPED RUN of links rather than a stacked column, which is
   what keeps three groups to one grid row on a desktop and to three short lines
   on a phone. Measured, not asserted: see the lane's capture output. */
.v-foot {
  display: block; margin: 0; padding: 0;
  border-top: 1px solid var(--rule, var(--vnav-rule));
  background: linear-gradient(180deg, var(--band-a, var(--vnav-band)), transparent);
  color: var(--soft, var(--vnav-soft));
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px; line-height: 1.5;
}
.v-foot-in { max-width: 900px; margin: 0 auto; padding: 20px 22px 24px; }

/* PRODUCT — first, largest, one contained action. Full tap targets: these are
   the five things a visitor actually reaches for. */
.v-foot .vf-do {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule, var(--vnav-rule));
}
.v-foot .vf-do a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 11px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink, var(--vnav-ink)); text-decoration: none; border-radius: 9px;
  transition: color .16s ease;
}
.v-foot .vf-do a:hover {
  color: var(--gold-text, var(--vnav-gold-text));
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
.v-foot .vf-do a.vf-act,
.v-foot .vf-do a.vf-act:hover {
  color: var(--vnav-chip-ink); font-weight: 700; text-decoration: none;
  background: var(--vnav-chip) padding-box, var(--vnav-fx) border-box;
  border: 1.5px solid transparent; border-radius: 9px;
  box-shadow: 0 10px 22px -14px rgba(122,74,30,0.55);
  margin-right: 6px;
}
.v-foot .vf-do a.vf-act:hover { filter: brightness(1.06); }

/* UNDERSTAND · DEVELOPERS · ARCHIVE — three quiet groups, side by side.
   Each is a wrapped RUN of links under its kicker, not a stacked column: four
   stacked rows per group is three times the height for the same four links. */
.v-foot .vf-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px;
}
.v-foot .vf-col { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.v-foot .vf-k {
  flex: 0 0 100%; margin: 0 0 2px;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-text, var(--vnav-gold-text));
}
.v-foot .vf-col a {
  display: inline-flex; align-items: center; min-height: 26px;
  font-size: 13px; font-weight: 500; line-height: 1.35;
  color: var(--muted, var(--vnav-muted)); text-decoration: none;
}
.v-foot .vf-col a:hover {
  color: var(--ink, var(--vnav-ink));
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--gold-text, var(--vnav-gold-text)) 55%, transparent);
}

/* The baseline: who we are, and the three links a reader is entitled to. */
.v-foot .vf-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2px 18px; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--rule, var(--vnav-rule));
  font-size: 12.5px; color: var(--soft, var(--vnav-soft));
}
.v-foot .vf-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.v-foot .vf-legal a {
  display: inline-flex; align-items: center; min-height: 26px;
  color: var(--soft, var(--vnav-soft)); text-decoration: none; font-weight: 500;
}
.v-foot .vf-legal a:hover {
  color: var(--ink, var(--vnav-ink));
  text-decoration: underline; text-underline-offset: 5px;
}

/* Phones: the three quiet groups stack, and each one becomes a single line
   that begins with its own name. Stacked columns here were measured at 759px
   of footer on a 390px screen, two and a half times the row it replaced. */
@media (max-width: 640px) {
  .v-foot-in { padding: 14px 18px 18px; }
  .v-foot .vf-do { gap: 0 4px; padding-bottom: 10px; margin-bottom: 10px; }
  .v-foot .vf-do a { font-size: 13.5px; padding: 8px 8px; }
  .v-foot .vf-do a.vf-act { margin-right: 4px; padding: 8px 10px; }
  .v-foot .vf-cols { grid-template-columns: 1fr; gap: 6px; }
  .v-foot .vf-col { gap: 0 12px; }
  .v-foot .vf-k { flex: 0 0 auto; margin: 0 2px 0 0; }
  .v-foot .vf-col a { font-size: 12.5px; min-height: 24px; }
  .v-foot .vf-base { margin-top: 10px; padding-top: 8px; font-size: 12px; }
  .v-foot .vf-legal a { min-height: 24px; }
}

/* A page's own closing prose keeps its measure and its calm; it is page
   content, not the site footer, and only the site footer is stamped. */
.page-outro { color: var(--muted, var(--vnav-muted)); }

@media print {
  .quiet-nav, .v-foot { display: none; }
}
