/* ══════════════════════════════════════════════════════════════════
   Page Band Palette
   Each major feature page owns one band color. These are the identity
   hues used in the outer-band → inner-well framing pattern.

   Focus band    → #34d399              emerald mint  (hue ≈ 162)
   Academy band  → oklch(85.39% 0.201 100.73)  warm yellow   (hue 101)
   Kitchen band  → #38bdf8              sky           (hue ≈ 200°) — Tailwind sky-400

   The three colors form a deliberate arc across the Lemonade palette's
   hue range: yellow → lime → emerald. Each is distinct at a glance.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Focus card outer band — warm dark olive. Harmonizes with the cream
     palette (same warm hue family as cream-ink #2A2419) instead of the
     old steel blue which clashed against the cream body. */
  --band-focus:    #3A3420;
  --band-community:  #F2E9D5;                         /* cream-warm — matches app palette */
  --band-kitchen:  #38bdf8;                         /* sky          — /kitchen  (Tailwind sky-400) */
}

/* Shared utilities and common styles */

.link-button {
  background: none;
  border: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.link-button:hover {
  text-decoration: none;
}

.link-button,
.link-button:focus,
.link-button:active {
  outline: none;
  box-shadow: none;
}

/* Ensure form wrapper for button_to doesn't interfere */
form.button_to {
  display: inline;
  margin: 0;
  padding: 0;
}

form.button_to input[type="submit"].link-button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* DaisyUI compact selects can clip glyphs in some fonts/themes.
   Give xs/sm variants enough vertical room app-wide. */
.select.select-xs,
.select.select-sm {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: 1.35;
  box-sizing: border-box;
}

.select.select-xs {
  min-height: 1.75rem;
  height: 1.75rem;
}

/* Hide Trix toolbar while preserving rich text functionality */
trix-toolbar {
  display: none !important;
}

/* Show Trix toolbar for section edit forms */
.section-edit-form trix-toolbar {
  display: block !important;
}

/* ─── Top-nav meta + moon glyph + tooltip ─────────────────────────
   Shared by every plan page (Letter / Way / Self / Now / Oracle).
   Inherits the per-page palette variables (--ink, --paper, --rule,
   --accent, --accent-2). The .ld-meta wrapper used to be the link
   itself; it's now a flex row holding the name link + the moon
   glyph with its hover tooltip. */
.ld-meta {
  display: flex; align-items: center; gap: 14px;
}
.ld-meta-name {
  color: inherit; text-decoration: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ld-meta-name:hover { color: var(--ink); }

/* Account avatar + dropdown — the gold disc opens My Nature / Profile,
   right-aligned to the header edge. Mirrors the community avatar menu. */
.ld-acct { position: relative; display: inline-flex; align-items: center; }
/* Gold-coin disc styled for the plan-page palette (the .feed-page .disc
   rules don't reach here). Dimensions come from the helper's inline style. */
.ld-acct .disc {
  border-radius: 50%; flex-shrink: 0; border: 1px solid #c9a227;
  background: radial-gradient(circle at 38% 32%, #e9c96a, #c9a227 58%, #9c7d1f);
  color: #2a241a; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; line-height: 1;
  overflow: hidden; text-decoration: none;
}
.ld-acct .disc img { width: 100%; height: 100%; object-fit: cover; }
.ld-acct-menu {
  position: absolute; top: calc(100% + 7px); right: 0;
  min-width: 150px; background: var(--paper); border: 1px solid var(--rule);
  display: none; flex-direction: column; padding: 6px 0; z-index: 60;
  box-shadow: 0 12px 34px -16px rgba(31, 29, 24, .45);
}
/* Invisible bridge so hover doesn't drop across the gap to the menu. Generous
   (overlaps up into the avatar and out past the menu edges) so the cursor has a
   continuous hover path — mirrors the Community dropdown bridge. */
.ld-acct-menu::before { content: ''; position: absolute; top: -16px; left: -16px; right: -16px; height: 20px; }
.ld-acct:hover .ld-acct-menu,
.ld-acct:focus-within .ld-acct-menu { display: flex; }
.ld-acct-menu a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-style: italic; font-size: 15px;
  /* Reset the uppercase + wide tracking the .ld-meta chip sets — without this
     the menu renders as spaced-out uppercase italic serif, which reads wrong. */
  text-transform: none; letter-spacing: 0;
  color: var(--ink-soft); padding: 8px 16px; text-decoration: none; white-space: nowrap;
  transition: color .14s, background .14s;
}
.ld-acct-menu a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }


/* Community hub dropdown (Gatherings · Library) hung off the nav item.
   Uses only the documented plan-page palette vars so it renders on every
   page that mounts the shared nav. */
.ld-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.ld-menu-trigger { white-space: nowrap; }
/* Chevron is a real element (not a pseudo) so it can never collide with the
   active-state diamond marker, which owns ::before. */
.ld-caret {
  font-family: var(--sans); font-style: normal;
  font-size: 9px; margin-left: 6px; color: var(--ink-soft); vertical-align: middle;
}
.ld-menu {
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  min-width: 190px; background: var(--paper);
  /* Gold top accent + real elevation so the menu reads as an intentional,
     branded surface rather than blending into the paper. */
  border: 1px solid var(--rule); border-top: 2px solid #c9a227;
  display: none; flex-direction: column; padding: 8px 0; z-index: 200;
  box-shadow: 0 24px 52px -22px rgba(31, 29, 24, .6), 0 3px 10px -5px rgba(31, 29, 24, .3);
}
/* Invisible bridge across the gap so hover doesn't drop between the trigger and
   the menu. Overlaps UP into the trigger (-16px covers the 9px gap + the nav
   baseline) and DOWN onto the menu, so there's no dead strip to cross — fixes
   the flicker on the sticky community/ashram nav where the gap was unreachable. */
.ld-menu::before { content: ''; position: absolute; top: -18px; left: -10px; right: -10px; height: 20px; }
.ld-menu-wrap:hover .ld-menu,
.ld-menu-wrap:focus-within .ld-menu { display: flex; }
.ld-menu a,
.ld-menu .is-soon {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-soft); padding: 9px 22px; text-decoration: none; white-space: nowrap;
  transition: color .14s, background .14s;
}
.ld-menu a:hover { color: var(--ink); background: color-mix(in srgb, #c9a227 14%, transparent); }
.ld-menu .is-soon { color: var(--ink-soft); opacity: .6; cursor: default; }
/* Mark coming-soon items (e.g. Events) so the faded state reads as intentional. */
.ld-menu .is-soon::after {
  content: ' · soon'; font-family: var(--sans); font-style: normal;
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
}
/* Leading glyph in the Community dropdown items. */
.ld-menu a, .ld-menu .is-soon { display: flex; align-items: center; gap: 10px; }
.ld-menu .nav-ico { flex: none; color: var(--ink-soft); }
.ld-menu a:hover .nav-ico { color: var(--nav-active); }

/* Dark mode: the nav renders OUTSIDE the page wrapper, so var(--paper) and
   var(--ink) stay at their light fallbacks here — both dropdowns would render
   as cream surfaces with dark text. Give them an explicit night surface and
   nav-token text (those DO flip in the html[data-theme="dark"] block above). */
html[data-theme="dark"] .ld-acct-menu,
html[data-theme="dark"] .ld-menu { background: #1a1c16; border-color: var(--nav-rule); }
html[data-theme="dark"] .ld-menu { border-top-color: #c9a227; } /* keep the gold accent */
html[data-theme="dark"] .ld-acct-menu a,
html[data-theme="dark"] .ld-menu a,
html[data-theme="dark"] .ld-menu .is-soon,
html[data-theme="dark"] .ld-menu .nav-ico { color: var(--nav-ink-soft); }
html[data-theme="dark"] .ld-acct-menu a:hover,
html[data-theme="dark"] .ld-menu a:hover { color: var(--nav-ink); }
html[data-theme="dark"] .ld-acct-menu a:hover { background: rgba(233, 226, 210, .06); }
html[data-theme="dark"] .ld-menu a:hover .nav-ico { color: var(--nav-active); }

/* Day/Night palette toggle — quiet and deboxed so it doesn't compete with
   the glyph or the avatar; just a small tracked-caps word. */
.ld-theme {
  background: transparent; border: 0; padding: 0; color: var(--ink-soft);
  font-family: var(--sans); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: color .15s;
}
.ld-theme:hover { color: var(--ink); }

.ld-moon {
  position: relative;
  display: inline-flex; align-items: center;
  cursor: pointer; outline: none;
}
.ld-moon .moon-glyph,
.ld-moon .sun-glyph { display: block; }

/* ── Moon — silvery / textured rather than a flat gold pie slice ── */
.moon-disc-dark { fill: #2a241a; opacity: 0.62; }
.moon-disc-lit  { fill: #b8ad94; }   /* warm silver — reads on cream */
.moon-halo      { fill: none; }
.moon-crater    { fill: #6a5e47; opacity: 0.35; }
.moon-maria     { fill: #6a5e47; opacity: 0.18; }

/* Hero (tooltip) version — limb-darkening gradient + texture. */
.moon-glyph--hero { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.moon-glyph--hero .moon-disc-lit { fill: #cfc3a7; }   /* base lit colour */
.moon-glyph--hero .moon-halo {
  fill: #f5e9c8; opacity: 0.12;
}
/* Radial gradient on the lit area: brighter near the centre, fading
   toward the limb (rim) — mimics real-moon limb darkening. */
.moon-glyph--hero .moon-grad-stop-bright { stop-color: #f0e7cc; stop-opacity: 1; }
.moon-glyph--hero .moon-grad-stop-mid    { stop-color: #cfc3a7; stop-opacity: 1; }
.moon-glyph--hero .moon-grad-stop-dim    { stop-color: #968b6f; stop-opacity: 1; }
.moon-glyph--hero .moon-crater { fill: #5a4a32; opacity: 0.40; }
.moon-glyph--hero .moon-maria  { fill: #4a3d28; opacity: 0.22; }

[data-theme="dark"] .moon-disc-dark { fill: #050402; opacity: 0.88; }
[data-theme="dark"] .moon-disc-lit  { fill: #d8cdb1; }
[data-theme="dark"] .moon-crater    { fill: #5a5040; opacity: 0.55; }
[data-theme="dark"] .moon-maria     { fill: #4a4030; opacity: 0.40; }
[data-theme="dark"] .moon-glyph--hero .moon-disc-lit { fill: #e2d8be; }
[data-theme="dark"] .moon-glyph--hero .moon-halo {
  fill: #f1e6c5; opacity: 0.10;
}
[data-theme="dark"] .moon-glyph--hero .moon-grad-stop-bright { stop-color: #f4ecd2; stop-opacity: 1; }
[data-theme="dark"] .moon-glyph--hero .moon-grad-stop-mid    { stop-color: #d8cdb1; stop-opacity: 1; }
[data-theme="dark"] .moon-glyph--hero .moon-grad-stop-dim    { stop-color: #8a7e62; stop-opacity: 1; }
[data-theme="dark"] .moon-glyph--hero .moon-crater { fill: #4a4030; opacity: 0.55; }
[data-theme="dark"] .moon-glyph--hero .moon-maria  { fill: #3a3022; opacity: 0.50; }

/* ── Sun — warm-gold disc + 12 radiating spokes ── */
.sun-disc { fill: var(--accent-2, #b8881c); }
.sun-rays { stroke: var(--accent-2, #b8881c); }
.sun-glyph { filter: drop-shadow(0 0 3px rgba(184, 136, 28, 0.35)); }
[data-theme="dark"] .sun-disc { fill: #e6b441; }
[data-theme="dark"] .sun-rays { stroke: #e6b441; }
[data-theme="dark"] .sun-glyph { filter: drop-shadow(0 0 4px rgba(230, 180, 65, 0.45)); }

/* Tooltip — hidden by default, fades in on hover/focus of .ld-moon. */
.ld-moon-tip {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: 320px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 18px 20px 16px;
  font-family: var(--serif, 'EB Garamond', Garamond, serif);
  color: var(--ink);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 50;
  text-align: left;
}
/* Transparent bridge spanning the 12px gap between the moon glyph and
   the tooltip body. Without it, the cursor moving down from the moon
   crosses dead space, .ld-moon:hover drops, and the tooltip vanishes
   before the user can reach the "Read the lineage view" disclosure.
   The bridge inherits .ld-moon-tip's pointer-events state so it only
   becomes hoverable once the tooltip itself is interactive. */
.ld-moon-tip::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.ld-moon:hover .ld-moon-tip,
.ld-moon:focus-visible .ld-moon-tip,
.ld-moon:focus-within .ld-moon-tip {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.ld-moon-tip-disc {
  display: flex; justify-content: center; margin-bottom: 10px;
}
.ld-moon-tip-disc .moon-glyph .moon-disc-dark { opacity: 0.65; }
.ld-moon-tip-name {
  font-family: var(--serif, 'EB Garamond', serif);
  font-style: italic; font-size: 18px;
  text-align: center; color: var(--ink);
  margin: 0 0 4px;
  text-transform: none; letter-spacing: 0;
}
.ld-moon-tip-sub {
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faded); text-align: center;
  margin: 0 0 14px;
}
.ld-moon-tip-text {
  font-family: var(--serif, 'EB Garamond', serif);
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 10px;
  text-transform: none; letter-spacing: 0;
}
.ld-moon-tip-text:last-child { margin-bottom: 0; }

/* Plain-English headline — the part a beginner reads first. Tighter
   register, slightly bigger than the lineage prose so the eye lands
   here on first glance. */
.ld-moon-tip-headline {
  font-family: var(--serif, 'EB Garamond', serif);
  font-style: normal;
  font-size: 15px; line-height: 1.5;
  color: var(--ink); margin: 0 0 12px;
  text-transform: none; letter-spacing: 0;
}

/* "Read the lineage view" disclosure. Closed by default so newcomers
   aren't dropped into Sanskrit-heavy prose; expands inline on click. */
.ld-moon-tip-more { margin: 0; }
.ld-moon-tip-more summary {
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faded); cursor: pointer;
  padding-top: 4px; border-top: 1px solid var(--rule-soft);
  list-style: none;
}
.ld-moon-tip-more summary::-webkit-details-marker { display: none; }
.ld-moon-tip-more summary::after {
  content: " +"; color: var(--accent-2);
}
.ld-moon-tip-more[open] summary::after { content: " −"; }
.ld-moon-tip-more[open] summary { margin-bottom: 10px; }
.ld-moon-tip-more .ld-moon-tip-text:first-of-type { margin-top: 4px; }

/* On mobile, anchor the tooltip away from the screen edge. */
@media (max-width: 767px) {
  .ld-moon-tip {
    width: min(280px, calc(100vw - 24px));
    right: -8px;
  }
}

/* Healing Plan Label Alignment */
.label {
  align-items: flex-end;
}

/* Notification indicators */
.notification-dot {
  position: relative;
}

.notification-dot::after {
  content: attr(data-count);
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  border-radius: 50%;
  border: 3px solid white;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: white;
  line-height: 1;
}

@keyframes red-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.animated-ring {
  position: relative;
}

.animated-ring::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 3px solid #ef4444;
  border-radius: 50%;
  animation: ring-pulse 1s ease-in-out infinite;
}

@keyframes ring-pulse {
  0% { 
    transform: scale(1); 
    opacity: 1; 
    border-color: #ef4444;
  }
  50% { 
    transform: scale(1.15); 
    opacity: 0.6; 
    border-color: #dc2626;
  }
  100% { 
    transform: scale(1); 
    opacity: 1; 
    border-color: #ef4444;
  }
}

.subtle-ring {
  position: relative;
}

.subtle-ring::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 3px solid rgba(239, 68, 68, 0.6);
  border-radius: 50%;
  animation: subtle-pulse 2.5s ease-in-out infinite;
  filter: blur(0.5px);
}

@keyframes subtle-pulse {
  0% { 
    transform: scale(1); 
    opacity: 0.6; 
    border-color: rgba(239, 68, 68, 0.6);
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.9; 
    border-color: rgba(239, 68, 68, 0.8);
  }
  100% { 
    transform: scale(1); 
    opacity: 0.6; 
    border-color: rgba(239, 68, 68, 0.6);
  }
}

/* Notification link ring effect */
.notification-link-ring {
  position: relative;
}

.notification-link-ring::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid rgba(239, 68, 68, 0.7);
  border-radius: 6px;
  animation: notification-ring-pulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes notification-ring-pulse {
  0% { 
    transform: scale(1); 
    opacity: 0.7; 
    border-color: rgba(239, 68, 68, 0.7);
  }
  50% { 
    transform: scale(1.05); 
    opacity: 1; 
    border-color: rgba(239, 68, 68, 1);
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
    border-color: rgba(239, 68, 68, 0.7);
  }
}

/* ══════════════════════════════════════════════════════════════════
   Message Toast Notifications
   ══════════════════════════════════════════════════════════════════ */

.message-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  max-width: 380px;
  width: calc(100vw - 2rem);
  transform: translateX(calc(100% + 2rem));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.message-toast--visible {
  transform: translateX(0);
}

.message-toast--exiting {
  transform: translateX(calc(100% + 2rem));
}

.message-toast__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.15);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: oklch(var(--bc));
  cursor: pointer;
}

.message-toast__link:hover {
  background: oklch(var(--b2));
}

.message-toast__avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: oklch(var(--p));
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-toast__avatar-letter {
  color: oklch(var(--pc));
  font-weight: 700;
  font-size: 1rem;
}

.message-toast__content {
  flex: 1;
  min-width: 0;
}

.message-toast__sender {
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.3;
}

.message-toast__preview {
  font-size: 0.8rem;
  margin: 0.125rem 0 0;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-toast__close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 1.25rem;
  opacity: 0.4;
  cursor: pointer;
  color: oklch(var(--bc));
  border-radius: 50%;
  transition: opacity 0.15s, background 0.15s;
}

.message-toast__close:hover {
  opacity: 1;
  background: oklch(var(--bc) / 0.1);
}

/* ══════════════════════════════════════════════════════════════════
   Plan-page chrome — top nav (.ld-*) + mobile bottom nav (.bnav)
   Shared by /letter, /self, /oracle (and any future plan page using
   the monastic palette). All rules read CSS custom properties that
   the page wrapper (.letter-page, .self-page, .oracle-page) defines:
   --paper, --rule, --ink, --ink-soft, --accent, --serif, --sans, --dev.
   Letter and oracle still inline duplicates of these rules in their
   own <style> blocks; remove those when convenient.
   ══════════════════════════════════════════════════════════════════ */

/* Uniform top-nav tokens — DECOUPLED from each page's --paper/--ink so the bar
   is pixel-identical on every plan page (self / today / letter / the-way /
   oracle), regardless of the page's palette. shared.css loads after the pages'
   inline <style>, so these win. Flips together in dark theme; oracle (whose body
   is always the warm "almanac" cream) keeps a light bar so it still matches. */
:root {
  --nav-bg: #f4efe6; --nav-rule: rgba(31, 29, 24, .14);
  --nav-ink: #1f1d18; --nav-ink-soft: #6e6557; --nav-accent: #3d4c32;
  /* Global cream fallback so surfaces that read var(--paper) (e.g. the nav
     dropdown) never collapse to transparent on pages that don't set their own
     --paper (e.g. the Library's .lib-page). Page wrappers still override it. */
  --paper: #f4efe6;
  /* Active-item color: a deeper gold than the #c9a227 brand mark so it stays
     legible on the cream nav background. One place to tune the active hue. */
  --nav-active: #a8842a;
}
html[data-theme="dark"] {
  --nav-bg: #12140e; --nav-rule: rgba(233, 226, 210, .14);
  --nav-ink: #e9e2d2; --nav-ink-soft: #a8a193; --nav-accent: #c9a227;
}
/* Oracle nav vars intentionally NOT pinned here — they inherit the global
   :root (light) / html[data-theme="dark"] (dark) values so the bar gets a
   proper night version. The old light-mode pin was identical to :root anyway. */

.ld-top {
  height: 64px;
  padding: 0 36px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex-shrink: 0;
  /* Render the nav with subpixel (heavier) strokes on macOS/iOS — the
     deliberately "bolder" look from /self. Overrides the per-page wrappers
     that force grayscale `antialiased` (which thins the serif). No effect on
     non-Apple platforms (they don't do subpixel-vs-grayscale). */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.ld-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; line-height: 1; }
.ld-mark  { font-family: var(--dev); color: #c9a227; font-size: 22px; line-height: 1; display: inline-block; transform: translateY(0.06em); }
.ld-name  { font-family: "Spectral", var(--serif); font-style: normal; font-size: 18px; letter-spacing: -.005em; color: var(--nav-ink); line-height: 1; }
.ld-nav   { display: flex; gap: 36px; justify-self: center; }
.ld-nav a {
  font-family: var(--serif, 'EB Garamond', 'Garamond', serif); font-style: italic;
  font-size: 16px; color: var(--nav-ink-soft);
  text-decoration: none; cursor: pointer; position: relative;
}
.ld-nav a.active { color: var(--nav-active); }
/* Active diamond marker on ::before so it doesn't collide with the Community
   trigger's chevron (which lives on ::after). Absolutely positioned, so the
   pseudo-element choice doesn't change where it renders. */
.ld-nav a.active::before {
  content: ''; position: absolute;
  left: 50%; bottom: -22px;
  width: 4px; height: 4px;
  background: var(--nav-active);
  transform: translateX(-50%) rotate(45deg);
}
.ld-meta {
  justify-self: end;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--nav-ink-soft);
}

/* Journey colophon — the desktop "Return to · where · Continue to" footer
   (shared/plan_foot, driven by the plan_journey helper). Page-independent nav
   tokens like the rest of .ld-* chrome; hidden on mobile (the bottom nav covers
   small viewports). Was duplicated inline in letter/nature; defined once here. */
.ld-foot {
  height: 56px; padding: 0 36px;
  border-top: 1px solid var(--rule, var(--nav-rule));
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;   /* /letter's column layout would otherwise squash it */
  font-family: var(--serif, 'EB Garamond', 'Garamond', serif); font-style: italic;
  font-size: 14px; color: var(--ink-soft, var(--nav-ink-soft));
}
.ld-foot-mid {
  font-family: var(--sans, 'Inter', system-ui, sans-serif); font-style: normal;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft, var(--nav-ink-soft));
}
.ld-foot a { color: var(--ink, var(--nav-ink)); font-style: italic; text-decoration: none; }
.ld-foot a:hover { color: var(--accent, var(--nav-active)); }
/* The final-page CTA (Ask the Oracle) reads gold so it's an action, not a step. */
.ld-foot a.ld-foot-cta { color: var(--accent, var(--nav-active)); }
.ld-foot a.ld-foot-cta:hover { color: var(--gold-deep, var(--accent, var(--nav-active))); }

.bnav {
  display: none;
  height: 78px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  padding: 8px 6px 14px;
  flex-shrink: 0;
  position: sticky; bottom: 0; will-change: transform;
  /* Cheap text paint on the one element that repaints during scroll —
     overrides the page root's optimizeLegibility (expensive to re-shape). */
  text-rendering: optimizeSpeed;
}
.bnav-i {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; height: 100%;
  font-family: var(--serif);
  text-decoration: none; cursor: pointer;
  color: var(--ink-soft);
}
.bnav-roman {
  font-family: var(--sans); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .7;
}
.bnav-label { font-style: italic; font-size: 13px; color: var(--ink-soft); }
.bnav-i.on .bnav-label { color: var(--nav-active); }
.bnav-i.on .bnav-roman { color: var(--accent); opacity: 1; }

/* Community hub on the bottom bar — native <details>, taps open upward. */
.bnav-menu { position: relative; }
.bnav-menu > summary {
  list-style: none; cursor: pointer; margin: 0; padding: 0;
  /* Overlay the cell exactly so the icon+label match the <a> items pixel-for-
     pixel, independent of <details>/<summary> flex-sizing quirks. */
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px;
}
.bnav-menu > summary::-webkit-details-marker,
.bnav-menu > summary::marker { display: none; }
/* The global `details[open] summary svg { transform: rotate(180deg) }` (meant
   for accordion chevrons) must NOT flip the community nav icon when the sheet
   is open. */
.bnav-menu[open] > summary .nav-ico { transform: none; }
.bnav-menu > summary::-webkit-details-marker { display: none; }
.bnav-menu .bnav-sheet {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 172px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 14px;
  display: flex; flex-direction: column; padding: 8px 0; z-index: 70;
  box-shadow: 0 16px 42px -16px rgba(31, 29, 24, .42), 0 0 0 1px rgba(201, 162, 39, .16);
}
/* Small caret pointing down at the community tab. */
.bnav-menu .bnav-sheet::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--paper);
  filter: drop-shadow(0 1px 0 var(--rule));
}
.bnav-menu .bnav-sheet a,
.bnav-menu .bnav-sheet .bnav-sheet-soon {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-soft); padding: 9px 18px; text-decoration: none;
  white-space: nowrap; text-align: center;
}
.bnav-menu .bnav-sheet a:hover { color: var(--ink); }
.bnav-menu .bnav-sheet-soon { color: var(--ink-soft); opacity: .6; }
.bnav-menu .bnav-sheet-soon::after {
  content: ' · soon'; font-family: var(--sans); font-style: normal;
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
}

/* Nav glyphs — bottom bar items (icon stacks above the label) + the
   Community sheet sub-items (icon leads the label). currentColor lets the
   active item tint gold. */
.nav-ico { flex: none; display: block; }
.bnav-i .nav-ico { color: var(--ink-soft); }
.bnav-i.on .nav-ico,
.bnav-menu.on > summary .nav-ico { color: var(--nav-active); }
.bnav-menu .bnav-sheet a,
.bnav-menu .bnav-sheet .bnav-sheet-soon {
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.bnav-menu .bnav-sheet .nav-ico { color: var(--ink-soft); }

/* Dark mode: the bottom nav lives outside the page wrapper, so it falls back
   to the light :root --paper. Give it (and its dropdown) a dark surface so it
   doesn't render as a light cream bar under a dark page. The label/icon text
   is already light, so only the surface + borders need overriding. */
/* Pin the nav's muted (inactive) text/icon color so it doesn't inherit a
   page-scoped or undefined --ink-soft. On /community it fell back to a cool
   gray (#e8ebee) while /today used the warm #a8a193 — same nav, different look.
   The active color (--nav-active gold) is already consistent. */
/* Also pin font-smoothing: /today renders the nav antialiased (lighter) but
   /community inherited the default `auto`, which looks bolder on macOS Retina.
   Pinning antialiased here keeps the labels the same weight on every page. */
/* The hairline top border is defined on `.ashram .bnav` in design_system.css,
   so it only shows on .ashram pages (e.g. /today). Pin it (and --rule) on the
   unscoped .bnav so /community and every other page get the same divider. */
.bnav { --ink-soft: #6e6557; --rule: rgba(31, 29, 24, .18); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-top: 1px solid var(--rule); }
html[data-theme="dark"] .bnav { --ink-soft: #a8a193; }
html[data-theme="dark"] .bnav { background: #15180f; border-top-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .bnav-menu .bnav-sheet { background: #1b1f14; border-color: rgba(255, 255, 255, .12); box-shadow: 0 16px 42px -16px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .bnav-menu .bnav-sheet::after { border-top-color: #1b1f14; filter: none; }

@media (max-width: 767px) {
  .ld-top, .ld-foot { display: none; }
  .bnav   { display: grid; }
  /* The Community dropdown is the rightmost tab — centering its sheet pushed
     half of it past the right edge (extra whitespace + side-scroll). Right-
     align it so it stays within the viewport; point the caret at the tab. */
  .bnav-menu .bnav-sheet { left: auto; right: 0; transform: none; }
  .bnav-menu .bnav-sheet::after { left: auto; right: 22px; transform: none; }
  /* Keep the sticky bottom nav pinned to the viewport bottom even while the
     page is still loading. On a short/empty page a position:sticky;bottom:0
     element sits at its in-flow position (mid/upper page) and appears to
     "float". Make the nav's wrapper a full-height flex column and push the nav
     down so it always lands at the bottom. */
  :has(> .bnav) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .bnav { margin-top: auto; }
}