/* ============================================================
   NAV v7 — "Clean Glass, Unified Sienna"
   Standalone nav CSS extracted from homepage-v7.css.
   Works on any page without other CSS dependencies.
   Version: 2026032901
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');


/* ── Scoped variables ── */
.nav,
.mobile-menu,
.mobile-menu-overlay {
  --parchment: #FAF7F2;
  --parchment-dk: #F2EBE0;
  --paper: #FFFDF9;
  --paper-warm: #FFF9F0;
  --white: #FFFFFF;
  --ink: #1C1917;
  --ink-2: #57534E;
  --ink-3: #A8A29E;
  --ink-4: #D6D3D1;
  --ink-5: #E7E5E4;
  --forest: #1B4332;
  --forest-mid: #2D6A4F;
  --forest-glow: rgba(45,106,79,.08);
  --sienna: #C4532B;
  --sienna-dk: #A3401F;
  --sienna-lt: rgba(196,83,43,.08);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;
  --sh-xl: 0 20px 50px rgba(28,25,23,.10);
  --ease: cubic-bezier(.4,0,.2,1);
}


/* ============================================================
   NAVIGATION BAR
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 1300 so the mobile hamburger/X button stays above .mobile-menu (1200)
     and stays clickable when drawer is open. Raised from 1000 on 2026-04-18. */
  z-index: 1300;
  height: calc(56px + constant(safe-area-inset-top));
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(250,247,242,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(28,25,23,.06);
  box-shadow: 0 1px 12px rgba(28,25,23,.04);
  font-family: var(--sans);
}

/* Belt-and-suspenders: solid cover extends 100px ABOVE so any safe-area gap
   shows nav colour regardless of env() timing on iOS Safari */
.nav::before {
  content: '';
  position: absolute;
  top: -100px; left: 0; right: 0;
  height: calc(100px + env(safe-area-inset-top, 0px));
  background: #FAF7F2;
  z-index: 1;
}

.nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.nav__wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -0.04em;
}

.nav__wordmark .g { font-weight: 600; color: var(--ink); }
/* ★★ WCAG AA (2026-08-06). `--sienna` (#C4532B) measured 4.25:1 against the bar's own
   rgba(250,247,242,.97) — below the 4.5:1 floor for body text, on the site's NAME, on
   every page that loads this file. Repointed at `--sienna-dk` (#A3401F, 5.89:1 on the
   same fill): an EXISTING token, so no new colour enters the palette and the hover
   vocabulary elsewhere is untouched.
   ⚠ FIXED AT THE COMPONENT, NOT THE TOKEN, on purpose. `--sienna` is also a BACKGROUND
   here (the Sign Up pill, the mobile CTA), where darkening only raises contrast but also
   silently restyles four surfaces; and it is declared at `:root`, so any sheet loaded
   after this one on any of ~1,240 pages inherits the change. This selector is the one
   element that was measured failing. Its siblings that use `--sienna` as TEXT
   (the dropdown hover icon) inherit the same 4.25:1 and are
   reported as found-outside-scope rather than changed here. */
.nav__wordmark .c { font-weight: 500; font-style: italic; color: var(--sienna-dk); margin-left: 0.02em; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 0.25rem 0;
  transition: color .15s var(--ease);
  text-decoration: none;
}

.nav__link:hover { color: var(--ink); }

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: var(--sienna);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
  transform-origin: center;
}

.nav__link:hover::after { transform: scaleX(1); }


/* ============================================================
   AUTH BUTTONS (pre-auth state)
   ============================================================ */
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-ghost {
  padding: 0.4rem 1rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  text-decoration: none;
}

.btn-ghost:hover { color: var(--ink); background: rgba(28,25,23,.04); }

.btn-primary {
  padding: 0.42rem 1.2rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--white);
  background: var(--sienna);
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--sienna-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(196,83,43,.2);
}


/* ============================================================
   USER MENU & DROPDOWN (logged-in state)
   ============================================================ */
.user-menu {
  display: none;
  position: relative;
}

.user-menu.active {
  display: flex;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-full);
  transition: background .15s var(--ease);
  font-family: var(--sans);
}

.user-btn:hover {
  background: rgba(28,25,23,.04);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--forest-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--forest-mid);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(28,25,23,.1);
  min-width: 210px;
  padding: 0.5rem;
  /* Hover bridge: extra top padding closes the visual gap inside the element,
     so mouse traversal trigger→menu keeps :hover alive on .user-menu parent. */
  padding-top: calc(0.5rem + 4px);
  background-clip: padding-box;
  z-index: 1100;
}

.user-dropdown.active,
.user-dropdown.show,
.user-menu:hover .user-dropdown {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .1s var(--ease);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--parchment);
  color: var(--ink);
}

.dropdown-item i,
.dropdown-item svg { flex-shrink: 0; color: var(--ink-3); width: 15px; height: 15px; }

.dropdown-item:hover i,
.dropdown-item:hover svg { color: var(--sienna); }

.logout-item {
  color: #dc2626;
  border-top: 1px solid var(--ink-5);
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}

.logout-item:hover {
  background: rgba(220,38,38,.05);
  color: #dc2626;
}


/* ============================================================
   NAV DROPDOWN (Resources)
   ============================================================ */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color .15s var(--ease);
  font-family: var(--sans);
}

.nav-dropdown-toggle:hover { color: var(--ink); }

.nav-dropdown-toggle svg {
  transition: transform .2s var(--ease);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(28,25,23,.1);
  min-width: 230px;
  padding: 0.5rem;
  /* Hover bridge: extra top padding closes the visual gap inside the element,
     so mouse traversal trigger→menu keeps :hover alive on .nav-dropdown parent. */
  padding-top: calc(0.5rem + 4px);
  background-clip: padding-box;
  z-index: 1050;
}

/* Show on hover (desktop) AND on JS click toggle */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.is-open {
  display: block;
}

.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: all .1s var(--ease);
  text-decoration: none;
}

.nav-dropdown-item:hover {
  background: var(--parchment);
  color: var(--ink);
}

.nav-dropdown-item svg {
  color: var(--ink-3);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.nav-dropdown-item:hover svg {
  color: var(--sienna);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--ink-5);
  margin: 0.35rem 0.75rem;
}


/* ============================================================
   MOBILE MENU TOGGLE
   ============================================================ */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 4px;
}

.mobile-menu-toggle .menu-open { display: block; }
.mobile-menu-toggle .menu-close { display: none; }
.mobile-menu-toggle.active .menu-open { display: none; }
.mobile-menu-toggle.active .menu-close { display: block; }

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .2s var(--ease);
}


/* ============================================================
   MOBILE MENU OVERLAY & DRAWER
   ============================================================ */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: -env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  bottom: -env(safe-area-inset-bottom, 0px);
  z-index: 1100;
  background: rgba(28,25,23,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mobile-menu-overlay.active {
  display: block;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100dvh;
  background: var(--white);
  z-index: 1200;
  box-shadow: var(--sh-xl);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  overflow-y: auto;
  /* 72px top padding = 56px nav + 16px breathing room. Nav is z-indexed above drawer
     for the close X — without this padding, drawer content is covered by the nav.
     Previous bug: `padding-top: env(safe-area-inset-top)` was declared then overridden
     by `padding: 1.5rem` on the next line. Fixed 2026-04-18 into a single shorthand. */
  padding: calc(72px + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--sans);
  /* ★★ 2026-08-05 — THE CLOSED DRAWER WAS STILL IN THE TAB ORDER, ON EVERY PAGE.
     `transform: translateX(100%)` moves the panel off screen and changes nothing
     about focusability: it is rendered, visible and reachable. Measured on /explore
     at 1440 desktop, from a fresh load, pressing Tab: stops 9 through 25 were the
     2 mobile auth buttons and 15 mobile menu links, all painted at x1464 outside a
     1440px viewport. A keyboard user pressed Tab SEVENTEEN times into nothing they
     could see before reaching the first control on the page, with the focus ring
     off screen the whole way, and the same 17 stops sit on every page carrying this
     nav.
     `visibility: hidden` is what removes an element from the tab order (`display`
     would kill the slide animation; `inert` needs the toggle script to maintain it,
     and a state that has to be kept in sync is a state that drifts). The delayed
     transition on the closed rule is what lets the panel finish sliding OUT before
     it disappears — with `visibility` transitioning at 0s it would vanish instantly
     on close and the animation would only ever be seen opening. */
  visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}

.mobile-menu.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s var(--ease), visibility 0s linear 0s;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-link {
  display: block;
  padding: 0.85rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-5);
  transition: color .15s var(--ease);
  text-decoration: none;
}

.mobile-menu-link:hover {
  color: var(--sienna);
}

.mobile-menu-divider {
  height: 1px;
  background: var(--ink-5);
  margin: 0.5rem 0;
}

.mobile-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mobile-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  width: 100%;
  text-decoration: none;
}

.mobile-auth-btn.primary {
  background: var(--sienna);
  color: var(--white);
  border: none;
}

.mobile-auth-btn.primary:hover {
  background: var(--sienna-dk);
}

.mobile-auth-btn.secondary {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--ink-5);
}

.mobile-auth-btn.secondary:hover {
  border-color: var(--ink-4);
  color: var(--ink);
}

.mobile-menu-section-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
}

body.mobile-menu-open {
  overflow: hidden;
}


/* ============================================================
   NAV PREMIUM PILL (logged-in free users — renamed 2026-04-23
   from nav-trial-pill; content was always "Start Premium · $29/mo"
   after trial retirement but the class name lagged behind.)
   ============================================================ */
.nav-premium-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.85rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.72rem;
  color: #fff;
  background: linear-gradient(135deg, #2D6A4F, #1B4332);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s;
  font-family: var(--sans);
}

.nav-premium-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(27,67,50,.3);
  color: #fff;
  text-decoration: none;
}

.nav-premium-pill__icon {
  font-size: 0.8rem;
  line-height: 1;
}


/* ============================================================
   VERDICT BAR (SEO page heroes)
   ============================================================ */
.verdict-bar {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.verdict-bar__text {
  font-size: 0.82rem;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
text-align: left; }

.verdict-bar__text strong {
  color: #fff;
  font-weight: 700;
}

.verdict-bar__cta {
  padding: 0.42rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--verdict-cta-color, #1B4332);
  background: var(--verdict-cta-bg, #E8A87C);
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.verdict-bar__cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  color: var(--verdict-cta-color, #1B4332);
  text-decoration: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Narrow-desktop relief band, 769–1099px (2026-08-16, Who Wins promotion) ──
   MEASURED, not guessed (dev-assets/winners-dist-2026-08-16/nav-width-probe.js
   + the candidate sweep in WAVE-REPORT.md). The nav has exactly ONE responsive
   rule — the whole link row disappears at ≤768px — so between 769px and the
   1280px max-width the row has to absorb every item at full size, and it was
   ALREADY over capacity before this change: on the untouched baseline, 11 of 25
   page×width samples in 769–1023 rendered a nav label wrapped onto two lines
   and 3 overflowed `.nav__inner` outright (dashboard and explore at 769–820).
   Adding a sixth item without relief pushed the wordmark into "Find Grants" on
   the homepage at 900–960.

   This reclaims that space uniformly — a smaller gutter and a tighter row gap,
   applied to the whole row — rather than hiding one item at a width, which
   would be a per-item responsive pattern the nav does not have anywhere. With
   it, the row carries the EXTRA item and is still measurably better than the
   pre-change baseline on all three counts: overflow 3 → 1, wrapped labels
   11 → 10, brand gap under 8px 11 → 10.

   ⚠ Residual, PRE-EXISTING and out of scope here: at 769–820 the row still
   wraps labels on 4 of 5 page types and dashboard.html still overflows at 769.
   The real fix is a nav-wide decision (raise the hamburger breakpoint to ~1024,
   which is this nav's own established answer to "the row does not fit") and
   belongs to Khalid, not to this change. Logged in the wave report.

   The identical block lives in homepage-v7.css — index.html and its siblings do
   not load this file. Keep the two in sync. */
@media (min-width: 769px) and (max-width: 1099px) {
  .nav__inner { padding: 0 1rem; }
  .nav__links { gap: 0.5rem; }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .mobile-menu-toggle { display: flex; }

  /* Touch target minimums (44px) */
  .nav__hamburger,
  .mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .user-dropdown {
    position: fixed;
    top: 56px;
    right: 1rem;
    left: auto;
    width: 260px;
  }

  /* Nav trial pill — smaller on mobile */
  .nav-premium-pill {
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
  }

  /* Verdict bar — stack on mobile */
  .verdict-bar {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  text-align: center; }
  .verdict-bar__text { text-align: center; }
}

/* ============================================================
   Resources mega-menu (v2) — Apr 2026
   Append-only additions to support nav-dropdown[data-nav-version="v2"]
   ============================================================ */
.nav-dropdown[data-nav-version="v2"] .nav-dropdown-menu {
  min-width: 280px;
  padding: 8px;
}
.nav-dropdown-link--featured {
  display: block !important;
  padding: 12px 16px !important;
  background: var(--forest-glow);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.nav-dropdown-link-title {
  display: block; font: 600 14px/1.2 var(--sans); color: var(--ink);
}
.nav-dropdown-link-sub {
  display: block; font: 400 12px/1.3 var(--sans); color: var(--ink-2); margin-top: 2px;
}
.nav-dropdown-section {
  padding: 8px 0;
  border-top: 1px solid var(--ink-5);
}
.nav-dropdown-section:first-of-type { border-top: none; padding-top: 0; }
.nav-dropdown-heading {
  display: block;
  font: 600 11px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 16px 4px;
}
.nav-dropdown[data-nav-version="v2"] .nav-dropdown-link {
  padding: 8px 16px !important;
  font: 500 14px/1.3 var(--sans) !important;
  color: var(--ink) !important;
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.nav-dropdown[data-nav-version="v2"] .nav-dropdown-link:hover {
  background: var(--forest-glow); color: var(--forest-dk) !important;
}
/* ★★ ROUND 16 — the deferral from batch 1, closed. That round fixed `.nav__wordmark .c`
   and REPORTED this sibling as found-outside-scope: same token used as TEXT, same
   measured 4.25:1 against the same fill, 14px/600 so the 4.5:1 body floor applies.
   Reporting a failing state and shipping it is the "I could not verify X is a TODO,
   not a finding" shape. Same component-level repoint, same existing token.
   ⚠ BOTH FILES. homepage-v7.css carries its own copy of this rule, which is exactly
   how batch 1's wordmark fix reached only some page types on its first pass. */
.nav-dropdown-link--store { color: var(--sienna-dk) !important; font-weight: 600 !important; }
.nav-dropdown-link--store:hover { background: var(--sienna-lt) !important; color: var(--sienna-dk) !important; }
.nav-dropdown-link-pill {
  font: 700 9px/1 var(--sans); letter-spacing: 0.1em;
  background: var(--sienna); color: var(--paper);
  padding: 3px 6px; border-radius: var(--r-sm);
}
.nav-dropdown-divider { height: 1px; background: var(--ink-5); margin: 4px 0; }
.nav-dropdown-link--meta { color: var(--ink-2) !important; font-size: 13px !important; }

/* ============================================================
   Sister-product tiles ("More from GrantCompass") — Jul 2026
   GC Arts + GC US, injected at the bottom of the Resources dropdown
   just above the divider/Contact-us row. Mirror block: homepage-v7.css.
   ============================================================ */
.nav-sis {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 10px !important;
  margin: 2px 6px;
  border: 1px solid var(--ink-5);
  border-radius: var(--r-md);
  text-decoration: none;
  font: 500 14px/1.3 var(--sans) !important;
  color: var(--ink) !important;
}
.nav-sis:hover {
  background: var(--paper-2, #faf8f4);
  border-color: var(--ink-4, #d6d1c4);
}
.nav-sis__mono {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 800 0.68rem/1 var(--sans);
  color: #fff;
  letter-spacing: 0.02em;
}
.nav-sis__body { display: flex; flex-direction: column; min-width: 0; }
.nav-sis__name { font-weight: 600; color: var(--ink); }
.nav-sis__desc {
  font-size: 0.72rem;
  color: var(--ink-2);
  margin-top: 1px;
  white-space: normal;
}
.nav-sis__go { margin-left: auto; color: var(--ink-3); flex: 0 0 auto; }

/* Content links that NO stylesheet colours fall back to the browser's default blue/purple (2026-10-09 sweep: real on
   alberta-grants tables, citations, ~a dozen guides). Zero specificity on purpose: any page rule that styles its links,
   even a bare `a { }`, still wins — this only catches links nothing else reached. Inherit keeps each page's palette
   (and stays readable inside dark cards); the underline keeps it recognisable as a link. */
:where(body) :where(a:not([class])) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }