/* Dashboard/shared/topnav.css
   The shared signed-in header (shared/topnav.js). Self-contained: it sits
   outside every page root (#tx-root, #pp-root, #pl-root), so it brings its own
   tokens and resets and never relies on a page stylesheet.
   sageful.app editorial system: Cormorant Garamond wordmark, DM Sans links,
   IBM Plex Mono group labels, ink for the current page, sage accents.
   Solid paper background, no blur, so it stays readable over the home's dark
   photo hero. */

:root { --sf-nav-h: 60px; }
@media (max-width: 760px) { :root { --sf-nav-h: 56px; } }

.sf-nav {
  --sfn-paper: #F3F6F1; --sfn-card: #FCFDFB; --sfn-line: #DDE6DB; --sfn-line-2: #EAEFE7;
  --sfn-ink: #0D1210; --sfn-ink-2: #35493D; --sfn-ink-3: #61756A;
  --sfn-sage: #3E7355; --sfn-sage-deep: #2C5641; --sfn-sage-wash: #EAF1EB;
  --sfn-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sfn-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sfn-mono: 'IBM Plex Mono', ui-monospace, monospace;
  position: sticky; top: 0; z-index: 45;
  background: var(--sfn-paper);
  border-bottom: 1px solid var(--sfn-line);
  font-family: var(--sfn-body); color: var(--sfn-ink-2);
  line-height: 1.3; -webkit-font-smoothing: antialiased;
  text-align: left;
}
.sf-nav *, .sf-nav *::before, .sf-nav *::after { box-sizing: border-box; }
.sf-nav ul, .sf-nav li, .sf-nav p { margin: 0; padding: 0; list-style: none; }
.sf-nav a { text-decoration: none; }
.sf-nav button { font-family: var(--sfn-body); margin: 0; }
.sf-nav :focus { outline: none; }
.sf-nav :focus-visible { outline: 2px solid var(--sfn-sage); outline-offset: 2px; border-radius: 8px; }

.sf-nav-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: #0D1210; color: #fff; padding: 10px 16px; border-radius: 8px;
  font: 500 14px 'DM Sans', system-ui, sans-serif; text-decoration: none;
}
.sf-nav-skip:focus { left: 12px; }

.sf-nav-in {
  display: flex; align-items: center; gap: 28px;
  height: var(--sf-nav-h); max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* Wordmark */
.sf-nav-word {
  font-family: var(--sfn-display); font-style: italic; font-weight: 400;
  font-size: 28px; line-height: 1; letter-spacing: -0.03em;
  color: var(--sfn-ink); padding: 4px 2px 6px; flex-shrink: 0;
}
.sf-nav-word:hover { color: var(--sfn-sage-deep); }

/* Desktop links */
.sf-nav-links { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sf-nav-group { display: flex; align-items: center; gap: 2px; }
.sf-nav-a {
  position: relative; display: inline-flex; align-items: center;
  height: 40px; padding: 0 11px; border-radius: 999px;
  font-size: 14.5px; font-weight: 400; color: var(--sfn-ink-2); white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.sf-nav-a:hover { color: var(--sfn-ink); background: var(--sfn-line-2); }
.sf-nav-a[aria-current="page"] { color: var(--sfn-ink); font-weight: 500; }
.sf-nav-a[aria-current="page"]::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--sfn-sage);
}
.sf-nav-admin { padding-left: 18px; border-left: 1px solid var(--sfn-line); }
.sf-nav-k {
  font-family: var(--sfn-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sfn-sage); margin-right: 6px;
}

/* Right side: page slot + account menu */
.sf-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.sf-nav-slot { display: flex; align-items: center; min-width: 0; }
.sf-nav-slot:empty { display: none; }
.sf-nav-acct { position: relative; }
.sf-nav-me {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 12px 0 5px; border-radius: 999px;
  background: var(--sfn-card); border: 1px solid var(--sfn-line); color: var(--sfn-ink);
  font-size: 14.5px; cursor: pointer; transition: border-color .2s ease;
}
.sf-nav-me:hover, .sf-nav-me[aria-expanded="true"] { border-color: rgba(13,18,16,.32); }
.sf-nav-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sfn-sage); color: #fff; font-size: 13.5px; font-weight: 500;
}
.sf-nav-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-nav-caret { color: var(--sfn-ink-3); transition: transform .2s ease; }
.sf-nav-me[aria-expanded="true"] .sf-nav-caret { transform: rotate(180deg); }
.sf-nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sf-nav-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 2;
  min-width: 248px; padding: 6px;
  background: var(--sfn-card); border: 1px solid var(--sfn-line); border-radius: 16px;
  box-shadow: 0 22px 48px -24px rgba(13,18,16,.35);
  display: flex; flex-direction: column;
}
.sf-nav-menu[hidden] { display: none; }
.sf-nav-mi {
  display: flex; align-items: center; width: 100%; min-height: 40px;
  padding: 8px 12px; border: 0; border-radius: 10px; background: none;
  font-size: 14.5px; color: var(--sfn-ink-2); text-align: left; cursor: pointer;
}
.sf-nav-mi:hover, .sf-nav-mi:focus-visible { background: var(--sfn-sage-wash); color: var(--sfn-ink); }
.sf-nav-mi:focus-visible { outline-offset: -2px; }
.sf-nav-menu .sf-nav-out { margin-top: 6px; border-top: 1px solid var(--sfn-line-2); border-radius: 0 0 10px 10px; padding-top: 12px; }
.sf-nav-menu [data-sfn="intake"] { color: var(--sfn-sage-deep); }

/* Phone menu button and sheet */
.sf-nav-burger {
  display: none; align-items: center; justify-content: center;
  min-height: 44px; min-width: 76px; padding: 0 18px; border-radius: 999px;
  background: var(--sfn-ink); color: #fff; border: 1px solid var(--sfn-ink);
  font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.sf-nav-sheet {
  position: fixed; left: 0; right: 0; top: var(--sf-nav-h); bottom: 0; z-index: 1;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--sfn-paper); border-top: 1px solid var(--sfn-line);
  padding: 8px 24px calc(40px + env(safe-area-inset-bottom, 0px));
}
.sf-nav-sheet[hidden] { display: none; }
.sf-nav-sgroup { display: flex; flex-direction: column; }
.sf-nav-sa {
  display: flex; align-items: center; width: 100%; min-height: 48px;
  padding: 10px 2px; border: 0; border-bottom: 1px solid var(--sfn-line-2); background: none;
  font-size: 17px; color: var(--sfn-ink-2); text-align: left; cursor: pointer;
}
.sf-nav-sa[aria-current="page"] { color: var(--sfn-ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--sfn-sage); padding-left: 14px; }
.sf-nav-sk {
  margin: 26px 0 4px !important; font-family: var(--sfn-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sfn-sage);
}
html.sf-nav-locked, html.sf-nav-locked body { overflow: hidden; }

/* Mid widths: tighten before anything can overflow. */
@media (max-width: 1180px) {
  .sf-nav-in { gap: 18px; }
  .sf-nav-links { gap: 10px; }
  .sf-nav-admin { padding-left: 10px; }
  .sf-nav-k { display: none; }
  .sf-nav-name { display: none; }
  .sf-nav-me { padding-right: 10px; }
  .sf-nav-a { padding: 0 9px; }
  .sf-nav-a[aria-current="page"]::after { left: 9px; right: 9px; }
}
@media (max-width: 980px) {
  .sf-nav-word { font-size: 26px; }
  .sf-nav-a { font-size: 14px; padding: 0 7px; }
  .sf-nav-a[aria-current="page"]::after { left: 7px; right: 7px; }
}
@media (max-width: 760px) {
  .sf-nav-in { gap: 12px; padding: 0 20px; }
  .sf-nav-links, .sf-nav-acct { display: none; }
  .sf-nav-burger { display: inline-flex; }
  .sf-nav-right { gap: 10px; }
}

@media print { .sf-nav, .sf-nav-skip { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sf-nav * { transition: none !important; } }