/* ── SavingsPhase shared nav + footer ────────────────────────────────────────
   Single source of truth for the top nav bar and site footer styles.
   Loaded by every page. Do NOT duplicate these rules elsewhere.
   ───────────────────────────────────────────────────────────────────────── */

/* Site-wide keyboard focus ring — this file is loaded by every page, so this
   is the single place a global :focus-visible reset belongs. Uses !important
   because several inline `style={{outline:"none"}}` objects elsewhere in the
   app (and in the standalone HTML pages) would otherwise win over a plain
   external rule. 1px offset on form controls avoids clipping in short inputs;
   2px elsewhere (buttons, pills, links). */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1a4a6b !important; outline-offset: 1px;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #1a4a6b !important; outline-offset: 2px;
}

.sp-nav {
  position: sticky; top: 0; z-index: 50;
  /* Solid, not translucent — a blurred-glass fill let scrolled page content
     show through the bar, which read as distracting/messy on small screens. */
  background: #f5f0e8;
  border-bottom: 1px solid #e3ddd1;
}
.sp-nav-inner {
  /* Constrain to the site standard width (1200px / 32px) so the header left
     and right edges align with the footer and content containers on every page.
     Override --sp-nav-max only if a page genuinely needs a different width. */
  max-width: var(--sp-nav-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--sp-nav-pad, 32px);
  display: flex; align-items: center; gap: 16px;
}

/* Logo */
.sp-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #1a1a1a; }
.sp-logo-text { font-size: 25px; font-weight: 700; }

/* Section tabs */
.sp-section-tabs { display: flex; align-items: stretch; margin-left: 12px; }
.sp-section-tab {
  font-family: 'IBM Plex Mono', monospace; font-size: 20px; letter-spacing: .05em; font-variant: small-caps;
  color: #647071; background: transparent; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; padding: 20px 30px; display: flex; align-items: center;
  transition: color .15s, border-color .15s; white-space: nowrap; text-decoration: none;
}
.sp-section-tab:hover { color: #1a4a6b; background: transparent; }
/* 3px, not the base 2px: gold-deep is a 2.2:1 fill colour, so the underline
   needs the extra weight to read as strongly as the old green did at 2px. */
.sp-section-tab.active { color: #1a1a1a; border-bottom-color: #e08e12; border-bottom-width: 3px; font-weight: 600; background: transparent; }

/* User menu */
.sp-user-menu { position: relative; margin-left: auto; display: flex; align-items: center; }
.sp-user-trigger {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer; padding: 6px 10px; border-radius: 10px;
  transition: background .15s;
}
.sp-user-trigger:hover { background: rgba(0,0,0,.06); }
.sp-user-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  /* Gold chip with an ink initial — white on gold is 1.9:1. The 1px bronze
     ring gives the disc an edge against the parchment nav (gold is 1.8:1). */
  background: #f5a623; color: #1a1a1a; box-shadow: inset 0 0 0 1px #8a5709;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 17px; font-weight: 600;
}
.sp-user-name { font-family: 'Inter Tight', system-ui, sans-serif; font-size: 20px; font-weight: 500; color: #1a1a1a; }
.sp-user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e3ddd1; border-radius: 10px;
  padding: 6px 0; min-width: 148px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
  z-index: 100;
}
.sp-user-dropdown::before {
  content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.sp-user-menu:hover .sp-user-dropdown,
.sp-user-menu.open .sp-user-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sp-user-dropdown-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 9px 16px; font-family: 'Inter Tight', system-ui, sans-serif; font-size: 14px; color: #5a6a72;
  transition: background .12s, color .12s;
}
.sp-user-dropdown-item:hover { background: #f5f0e8; color: #1a1a1a; }
.sp-user-dropdown-item.danger:hover { background: #fef2f0; color: #b34030; }

/* Help button — matches avatar size so the two chips sit side-by-side */
.sp-help-btn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #d4cfc5; border: none; color: #fff;
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 17px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  /* The React nav renders this as a <button>; the standalone HTML pages render
     it as an <a href="/#help/…">, which would otherwise underline the "?". */
  text-decoration: none;
}
.sp-help-btn:hover { background: #f5a623; color: #1a1a1a; }

/* Wrapper that pushes the help + user chips to the far right as a unit */
.sp-nav-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sp-nav-end .sp-user-menu { margin-left: 0; }

/* ── Wizard step rail (.wz-*) ─────────────────────────────────────────────────
   The plan wizard's step indicator, and the ONLY persistent step bar in the
   app. It replaced the old `.sp-subnav` / `.sp-step` mono breadcrumb, which had
   been lifted into the Help Center and the Track drill-downs where nothing
   sequential was being represented. The rule that replacement leaves behind:

     A persistent step bar exists only for a fixed, ordered set of steps with a
     completion state. Everything else uses one of two lighter patterns — a
     filter pill row next to the content it filters (Help Center's
     .help-cat-pill), or a mono breadcrumb eyebrow in the page header
     (.sp-crumb, in asset.html / compare.html).

   Do not reintroduce `.sp-subnav`/`.sp-step`, and do not reuse `.wz-*` for
   anything that isn't a linear sequence you must finish. ─────────────────── */
.wz-bar {
  position: sticky; top: 68px; z-index: 49;
  /* Solid, not translucent — see .sp-nav above for why. */
  background: #f5f0e8;
  border-bottom: 1px solid #e3ddd1;
}
/* 980px, not --sp-nav-max's 1200 — six 104px nodes plus their connectors read
   as one continuous run of progress at this width; wider and the tracks
   stretch until the rail looks like six unrelated icons. */
.wz-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; }

.wz-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0 0; }
.wz-kick {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #647071; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wz-kick b { color: #1a1a1a; font-weight: 500; }
.wz-remain { font-size: 12px; color: #647071; white-space: nowrap; flex-shrink: 0; }

.wz-rail { display: flex; align-items: flex-start; padding: 14px 0 16px; }
.wz-node {
  background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 104px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.wz-node:disabled { cursor: default; }
.wz-disc {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: #faf9f7; border: 1.5px solid #d4cfc5; color: #a0aab4; font-size: 20px;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
/* Gold is a 1.8:1 fill on parchment, so every gold state fill carries a bronze
   #8a5709 boundary (5.1:1) — the fill says "gold", the 1px edge does the
   contrast work the old green fill did on its own. The tick is ink, not white:
   white on gold is 1.9:1. */
.wz-node.done .wz-disc { background: #f5a623; border-color: #8a5709; color: #1a1a1a; }
/* An outline, not a box-shadow — style.md forbids shadows on nav chrome. */
.wz-node.active .wz-disc { background: #fff; border: 2px solid #8a5709; color: #8a5709; outline: 4px solid rgba(245,166,35,.24); }
.wz-tick, .wz-warn {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 1px solid #8a5709; color: #8a5709;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.wz-tick { background: #f5a623; color: #1a1a1a; }
/* Clay ! instead of the gold tick on the plan node when a plan that HAS been
   signed no longer matches what's on screen. Uses the #a1450f clay TEXT token,
   not the saturated #c2571a fill token — this is a glyph on white and has to
   clear AA. Caution sits on clay rather than amber because amber is a dim gold
   and now reads as branding. Driven by `planStatus === "draft"`, which fires
   exactly when DocStatusChip is amber; the two must never contradict each
   other. A plan that was never signed gets neither badge — see .wz-node.goal
   below. */
.wz-warn { border-color: #a1450f; color: #a1450f; font-size: 11px; }
.wz-lbl {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #a0aab4; white-space: nowrap; transition: color .16s;
}
.wz-node.done .wz-lbl { color: #5a6a72; }
.wz-node.active .wz-lbl { color: #1a1a1a; font-weight: 500; }
.wz-node:not(:disabled):hover .wz-disc { transform: translateY(-1px); }
.wz-node:not(:disabled):hover .wz-lbl { color: #8a5709; }
/* The connector. Progress animates as a fill (the ::after scales in from the
   left), not a colour swap — this is the component's one piece of motion and
   it is what makes the rail read as progress rather than as six states. */
.wz-track { flex: 1; min-width: 16px; height: 2px; background: #d4cfc5; margin-top: 20px; position: relative; overflow: hidden; }
.wz-track::after {
  content: ''; position: absolute; inset: 0; background: #f5a623;
  transform: scaleX(0); transform-origin: left; transition: transform .32s ease;
}
.wz-track.done::after { transform: scaleX(1); }
/* The last node IS the plan, not a sixth form — squared off so it reads as the
   destination, and it keeps its own state vocabulary:
     locked            → dashed border (keyed on :disabled, NOT on "not done";
                         dashed means you cannot go there, not "unsigned")
     .reached          → navigable but never signed: solid border, neutral fill,
                         no badge. It has not earned .done's gold.
     .done             → SIGNED. Gold fill, plus .wz-tick if current or
                         .wz-warn if stale. On this node alone, "done" is a fact
                         about the plan, not about whether you can click it. */
.wz-node.goal .wz-disc { border-radius: 4px; }
.wz-node.goal:disabled .wz-disc { border-style: dashed; }
.wz-node.goal.reached .wz-lbl { color: #5a6a72; }

/* ── Breadcrumb eyebrow (.sp-crumb) ───────────────────────────────────────────
   The trail for a drill-down page (Track » XDSR » Compare). It is a location,
   not a sequence, so it is NOT a sticky bar: it sits inline above the page's
   <h1> and scrolls away with the content. Parent levels are real links; the
   current leaf is dark, bold and not a link. Chevrons, never the old `>>`.
   Used by asset.html and compare.html. ────────────────────────────────────── */
.sp-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #647071; margin-bottom: 7px;
}
.sp-crumb a { color: #5a6a72; text-decoration: none; transition: color .12s; }
.sp-crumb a:hover { color: #1a4a6b; text-decoration: none; }
.sp-crumb b, .sp-crumb strong { color: #1a1a1a; font-weight: 500; }
/* The separator is a CSS-drawn chevron, not a `ti-chevron-right` glyph: the two
   consumers (asset.html, compare.html) are standalone pages that deliberately
   do not load the Tabler webfont, and one separator is not worth pulling an
   icon font onto them. Same 12px-ish size and #d4cfc5 as the icon it stands in
   for. Do not bring back the `>>` glyph — it retired with .sp-step-sep. */
.sp-crumb-sep {
  width: 5px; height: 5px; flex-shrink: 0; margin: 0 1px;
  border-top: 1.5px solid #d4cfc5; border-right: 1.5px solid #d4cfc5;
  transform: rotate(45deg);
}

/* ── Mobile nav (≤768px) ──────────────────────────────────────────────────────
   Collapses .sp-section-tabs / .sp-help-btn / .sp-user-menu into a single
   .sp-nav-menu-btn that opens the full-screen .sp-nav-drawer overlay (behavior
   1), and collapses the wizard's .wz-inner icon rail into a current-step row +
   expander (behavior 2). Do not set a min-width on .sp-nav/.sp-nav-inner
   at this breakpoint — letting .sp-section-tabs overflow unconstrained was the
   original mobile bug; hiding it here is the fix, not a wider container.
   Desktop (>768px) is completely unchanged. ─────────────────────────────────── */
.sp-nav-menu-btn {
  display: none; width: 40px; height: 40px; border-radius: 10px;
  background: transparent; border: 1px solid #d4cfc5; color: #1a1a1a;
  align-items: center; justify-content: center; font-size: 22px; cursor: pointer;
  transition: background .15s;
}
.sp-nav-menu-btn:hover { background: rgba(0,0,0,.05); }

.sp-nav-drawer {
  position: fixed; inset: 0; z-index: 300;
  background: #f5f0e8; display: flex; flex-direction: column;
}
.sp-nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  padding: max(16px, env(safe-area-inset-top)) 20px 16px; border-bottom: 1px solid #e3ddd1;
}
.sp-nav-drawer-close {
  width: 40px; height: 40px; border-radius: 10px; background: transparent;
  border: 1px solid #d4cfc5; color: #1a1a1a; display: flex; align-items: center;
  justify-content: center; font-size: 22px; cursor: pointer;
}
.sp-nav-drawer-close:hover { background: rgba(0,0,0,.05); }
.sp-nav-drawer-scroll { flex: 1; overflow-y: auto; padding: 8px 0 32px; }
.sp-nav-drawer-lbl {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #647071; padding: 20px 24px 6px;
}
.sp-nav-drawer-item {
  display: flex; align-items: center; gap: 16px; width: 100%; position: relative;
  padding: 15px 24px; font-family: inherit; font-size: 19px; font-weight: 500;
  color: #1a1a1a; text-align: left; background: transparent; border: none; cursor: pointer;
  transition: background .12s;
}
.sp-nav-drawer-item:hover { background: rgba(0,0,0,.03); }
.sp-nav-drawer-item i:first-child { font-size: 22px; color: #647071; width: 24px; text-align: center; }
.sp-nav-drawer-arrow { margin-left: auto; color: #a0aab4; font-size: 18px; }
.sp-nav-drawer-item.active i:first-child { color: #1a4a6b; }
.sp-nav-drawer-item.active::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  background: #1a4a6b; border-radius: 0 3px 3px 0;
}
.sp-nav-drawer-tag {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: #8a5709;
}
.sp-nav-drawer-divider { height: 1px; background: #e3ddd1; margin: 12px 24px; }
.sp-nav-drawer-user { padding: 6px 24px 0; }
.sp-nav-drawer-user-card { display: flex; align-items: center; gap: 14px; padding: 14px 0 18px; }
.sp-nav-drawer-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: #f5a623; color: #1a1a1a; box-shadow: inset 0 0 0 1px #8a5709;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 22px; font-weight: 600; flex-shrink: 0;
}
.sp-nav-drawer-name { font-size: 18px; font-weight: 600; line-height: 1.2; }
.sp-nav-drawer-email { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #647071; margin-top: 2px; }
.sp-nav-drawer-links { display: flex; flex-direction: column; }
.sp-nav-drawer-link {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0;
  font-family: inherit; font-size: 15px; color: #5a6a72; text-align: left;
  background: transparent; border: none; border-top: 1px solid #e3ddd1; cursor: pointer;
}
.sp-nav-drawer-link i { font-size: 19px; width: 22px; text-align: center; color: #647071; }
.sp-nav-drawer-link:hover { color: #1a1a1a; }
.sp-nav-drawer-link.danger, .sp-nav-drawer-link.danger i { color: #b34030; }

/* Wizard rail mobile collapse — hidden by default, swapped in for .wz-inner at
   ≤768px. No modifier class is needed any more: .wz-* is the wizard's alone
   (the Help Center and Track no longer share this namespace), so the collapse
   can key off the element itself. */
.wz-mobile, .wz-mobile-panel { display: none; }

@media (max-width: 768px) {
  .sp-nav-inner { padding: 12px 16px; }
  .sp-section-tabs, .sp-help-btn, .sp-user-menu { display: none; }
  .sp-nav-menu-btn { display: flex; }
  /* .wz-bar's sticky `top` (68px, set above) assumes the desktop nav's taller
     section-tab padding. The collapsed mobile nav is shorter, so without this
     override the rail sticks 68px down while the nav itself is only ~65px tall,
     leaving a gap where scrolled page content shows through between the two
     sticky bars. */
  .wz-bar { top: 65px; }

  .wz-inner { display: none; }
  .wz-mobile {
    width: 100%; display: flex; align-items: center; gap: 11px;
    background: transparent; border: none; cursor: pointer; padding: 11px 16px;
    text-align: left; font-family: inherit;
  }
  /* The current step's own icon, so the collapsed row carries the same shape
     vocabulary as the desktop rail (it replaced a bare 7px dot). */
  .wz-mobile-disc {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: #f5a623; color: #1a1a1a; box-shadow: inset 0 0 0 1px #8a5709; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
  }
  .wz-mobile-kicker {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .09em; text-transform: uppercase; color: #647071;
  }
  /* Both kicker and name are display:block — the kicker sits on its own line
     above the step name, it is not an inline prefix. */
  .wz-mobile-now { display: block; font-size: 15px; font-weight: 600; color: #1a1a1a; }
  .wz-mobile-count { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #647071; }
  /* Five pips = the five input steps (the plan itself isn't one). Replaces a
     bare "Steps" label with something that actually reports progress. */
  .wz-mobile-pips { display: flex; gap: 3px; }
  .wz-mobile-pips i { width: 11px; height: 3px; border-radius: 99px; background: #d4cfc5; display: block; }
  /* Bronze, not gold: an 11×3px pip on a #d4cfc5 track is invisible in gold. */
  .wz-mobile-pips i.on { background: #8a5709; }
  .wz-mobile-chev { transition: transform .2s; font-size: 15px; }
  .wz-mobile-chev.open { transform: rotate(180deg); }
  .wz-mobile-panel {
    display: block; max-height: 0; overflow: hidden; transition: max-height .28s ease;
    background: #faf8f3; border-top: 1px solid transparent;
  }
  .wz-mobile-panel.open { max-height: 380px; border-top-color: #e3ddd1; }
  .wz-mobile-list { padding: 8px 16px 14px; display: flex; flex-direction: column; }
  .wz-mobile-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 2px; font-size: 14px;
    color: #a0aab4; background: transparent; border: none; cursor: pointer;
    text-align: left; font-family: inherit;
  }
  .wz-mobile-row:disabled { cursor: default; }
  .wz-mobile-dot {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    border: 1.5px solid #d4cfc5; color: #a0aab4; background: #fff;
  }
  .wz-mobile-row.done .wz-mobile-dot { background: #f5a623; border-color: #8a5709; color: #1a1a1a; }
  .wz-mobile-row.done { color: #1a1a1a; }
  .wz-mobile-row.active .wz-mobile-dot { border: 2px solid #8a5709; color: #8a5709; background: #fff; }
  .wz-mobile-row.active { color: #1a1a1a; font-weight: 600; }
  /* Same plan-state vocabulary as the desktop .wz-node.goal above — dashed for
     locked only, .reached for navigable-but-unsigned. Mobile has no badge
     layer, so "signed but stale" lands in the marker itself as amber; the two
     breakpoints must tell the same story. */
  .wz-mobile-row.goal .wz-mobile-dot { border-radius: 4px; }
  .wz-mobile-row.goal:disabled .wz-mobile-dot { border-style: dashed; }
  .wz-mobile-row.goal.reached { color: #1a1a1a; }
  .wz-mobile-row.goal.warn .wz-mobile-dot {
    background: #fff; border: 1.5px solid #a1450f; color: #a1450f;
  }
  .wz-mobile-line { width: 1.5px; height: 10px; background: #d4cfc5; margin-left: 14px; }
}

/* ── Site footer ─────────────────────────────────────────────────────────────
   Single source for footer styles.
   Used by: SiteFooter (ips-builder.jsx) via className, and site-footer.js (HTML pages).
   ──────────────────────────────────────────────────────────────────────────── */
.sp-footer { border-top: 1px solid #e3ddd1; background: #faf8f3; margin-top: 60px; }
.sp-footer-inner { max-width: 1200px; margin: 0 auto; padding: 38px 32px; }
.sp-footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sp-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sp-footer-disc { font-size: 12px; line-height: 1.6; color: #647071; max-width: 320px; }
.sp-footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.sp-footer-col { display: flex; flex-direction: column; gap: 10px; }
.sp-footer-col-head { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #647071; margin-bottom: 2px; }
.sp-footer-link { font-size: 13px; color: #5a6a72; text-decoration: none; }
.sp-footer-link:hover { color: #1a1a1a; }
.sp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid #e3ddd1; }
.sp-footer-copy, .sp-footer-made { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; color: #647071; }
.sp-footer-made { letter-spacing: .08em; text-transform: uppercase; }