/* ═══════════════════════════════════════════════════════════════════════════
   THE BOTTOM BAR — the one component every phone user looks at
   ═══════════════════════════════════════════════════════════════════════════

   Three things were wrong with it, in order of how much they showed:

   1. The icons were Font Awesome glyphs. Everything else on this site speaks
      in 24px stroked SVG with round caps — the process steps, the tool cards,
      the loan explainer. Five borrowed glyphs in the most-looked-at component
      read as a template someone dropped in, because that is what they were.
      They are now drawn in the same hand as the rest of the site.

   2. It was out by 2px. Measured on a 375px viewport: the four ordinary
      labels sat at y=631 and the centre "Calcs" label at y=629, because the
      raised CTA pushed its own label up. One wrong baseline across five items
      is the kind of thing nobody can name but everybody feels.

   3. Tapping did nothing. No press state, no acknowledgement — on a phone
      that reads as a dead button, and people tap twice.

   Everything here is scoped to .bottom-nav and the More sheet, and this file
   loads after style.css so these rules win without !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Alignment ───────────────────────────────────────────────────────────
   Every item is the same grid: a fixed-height icon row, then the label.
   Because the icon row has one height for all five, the labels share one
   baseline whatever sits above them — including the raised CTA, which now
   overflows upward out of its row instead of pushing its own label up. */

.bottom-nav{
  display:none;                       /* style.css turns this on under 992px */
  align-items:flex-end;
  gap:0;
}
.bottom-nav .bnav-item{
  display:grid;
  grid-template-rows:28px auto;
  justify-items:center;
  align-content:end;
  gap:5px;
  padding:0 2px 10px;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
}
.bottom-nav .bnav-ico{
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
}
.bottom-nav .bnav-ico svg{width:23px;height:23px;display:block;}
.bottom-nav .bnav-label{
  grid-row:2;
  font-size:10.5px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1px;
  white-space:nowrap;
  text-align:center;
}

/* ── The raised Calcs button ─────────────────────────────────────────────
   It keeps its lift, but takes it with a transform out of a normal-height
   grid row rather than by being taller than its siblings. The row still
   measures 28px, so the label below it stays on the shared baseline. */

.bottom-nav .bnav-cta .bnav-cta-inner{
  grid-row:1;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg,#1FA463,#0B6B41);
  border:4px solid var(--neutral-white,#fff);
  color:#fff;
  transform:translateY(-15px);
  box-shadow:0 8px 20px rgba(11,107,65,.34);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
.bottom-nav .bnav-cta .bnav-cta-inner svg{width:24px;height:24px;}
[data-theme="dark"] .bottom-nav .bnav-cta .bnav-cta-inner{border-color:#111;}
body.theme-deep-green .bottom-nav .bnav-cta .bnav-cta-inner{border-color:#085C3A;}

/* ── Press ───────────────────────────────────────────────────────────────
   A tap has to answer. The icon dips and springs, which on a touch screen
   reads as "received" far better than a colour change — the finger is
   covering the colour at the moment it changes. */

.bottom-nav .bnav-item .bnav-ico,
.bottom-nav .bnav-item .bnav-label{
  transition:transform .2s cubic-bezier(.2,.7,.2,1), color .2s ease, opacity .2s ease;
}
.bottom-nav .bnav-item:active .bnav-ico{transform:scale(.84);}
.bottom-nav .bnav-cta:active .bnav-cta-inner{
  transform:translateY(-15px) scale(.9);
  box-shadow:0 4px 12px rgba(11,107,65,.3);
}

/* ── Active ──────────────────────────────────────────────────────────────
   The selected item gets a soft pill behind its icon and a short bar above
   it. The pill is what makes the choice legible at a glance; the bar is what
   ties it to the top of the bar so the eye finds it without hunting. */

.bottom-nav .bnav-item .bnav-ico::before{
  content:"";
  position:absolute;
  top:-2px;left:50%;
  width:34px;height:30px;
  transform:translateX(-50%) scale(.6);
  border-radius:11px;
  background:rgba(31,164,99,.13);
  opacity:0;
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.3);
  z-index:-1;
}
.bottom-nav .bnav-item.active .bnav-ico::before{opacity:1;transform:translateX(-50%) scale(1);}
.bottom-nav .bnav-item.active .bnav-ico{transform:translateY(-1px);}
.bottom-nav .bnav-item.active .bnav-label{font-weight:700;}
.bottom-nav .bnav-item.active::after{
  content:"";
  position:absolute;
  top:0;left:50%;
  width:20px;height:2.5px;
  border-radius:0 0 3px 3px;
  background:var(--brand-green,#1FA463);
  transform:translateX(-50%);
}
.bottom-nav .bnav-cta.active::after{display:none;}  /* the raised button is its own marker */
[data-theme="dark"] .bottom-nav .bnav-item .bnav-ico::before{background:rgba(24,201,121,.16);}

/* ── The account dot ─────────────────────────────────────────────────────
   Login lives inside the More sheet, which means a signed-out visitor has no
   way of knowing an account exists. A dot on More says "there is something
   here" without spending one of the five slots. bottom-nav.js shows it only
   while signed out. */

.bottom-nav .bnav-dot{
  position:absolute;
  top:4px;
  left:calc(50% + 8px);
  width:7px;height:7px;
  border-radius:50%;
  background:#E8B04B;
  box-shadow:0 0 0 2px var(--neutral-white,#fff);
}
[data-theme="dark"] .bottom-nav .bnav-dot{box-shadow:0 0 0 2px #111;}
body.theme-deep-green .bottom-nav .bnav-dot{box-shadow:0 0 0 2px #085C3A;}

/* ── The More sheet ──────────────────────────────────────────────────────
   Same icon language as the bar, and the account row is lifted out of the
   nine-item grid to the top of the sheet where it can actually be found. */

.more-item .more-ico{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
  color:var(--brand-green,#1FA463);
}
.more-item .more-ico svg{width:20px;height:20px;display:block;}

.more-account{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  margin:0 0 14px;
  border-radius:14px;
  border:1px solid rgba(31,164,99,.28);
  background:rgba(31,164,99,.07);
  text-decoration:none;
  color:inherit;
  min-height:56px;
  box-sizing:border-box;
}
.more-account:active{transform:scale(.99);}
.more-account__avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#1FA463,#0B6B41);
  color:#fff;font-weight:800;font-size:13px;
}
.more-account__avatar svg{width:19px;height:19px;}
.more-account__text{min-width:0;display:flex;flex-direction:column;gap:2px;}
.more-account__text strong{font-size:14px;font-weight:700;line-height:1.25;}
.more-account__text span{
  font-size:11.5px;line-height:1.35;color:var(--text-muted,#5b6b63);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.more-account__go{margin-left:auto;flex-shrink:0;color:var(--brand-green,#1FA463);}
.more-account__go svg{width:18px;height:18px;display:block;}
[data-theme="dark"] .more-account{border-color:rgba(24,201,121,.3);background:rgba(24,201,121,.1);}

@media (prefers-reduced-motion:reduce){
  .bottom-nav .bnav-item .bnav-ico,
  .bottom-nav .bnav-item .bnav-label,
  .bottom-nav .bnav-cta .bnav-cta-inner,
  .bottom-nav .bnav-item .bnav-ico::before{transition:none;}
  .bottom-nav .bnav-item:active .bnav-ico{transform:none;}
  .bottom-nav .bnav-cta:active .bnav-cta-inner{transform:translateY(-15px);}
  .bottom-nav .bnav-item.active .bnav-ico::before{transform:translateX(-50%) scale(1);}
}

/* ── Two inherited rules that have to be neutralised here ────────────────

   style.css:3666   .bnav-cta { position:relative; top:-20px }
     The original lift was a positional offset on the whole anchor, which
     took the label up with it — that is the 2px the five labels disagreed
     by, and it became 20px once the lift also moved to the inner button.
     The anchor sits flat now; only the circle rises, via transform, out of
     a normal-height grid row. One lift, one mechanism.

   style.css:432    .bnav-cta-inner:active { transform: scale(.96)!important }
     A blanket press rule that replaces the whole transform — including the
     translateY that holds the button up. Tapping Calcs would have dropped
     it 15px into the bar and snapped it back. Restated here with the lift
     preserved, at equal weight but later in the cascade. */

.bottom-nav .bnav-cta{top:0;}
.bottom-nav .bnav-cta .bnav-cta-inner:active{
  transform:translateY(-15px) scale(.9)!important;
  transition:transform .12s ease!important;
}
.bottom-nav .bnav-item:active{transform:none!important;}

@media (prefers-reduced-motion:reduce){
  .bottom-nav .bnav-cta .bnav-cta-inner:active{transform:translateY(-15px)!important;}
}

/* ── Making the sheet's taps land ────────────────────────────────────────
   Every item here was verified working with scripted clicks, yet reported
   dead on a real phone. The difference between the two is touch, so these
   are the touch-specific traps, closed defensively:

   - touch-action: manipulation removes the browser's wait-for-double-tap
     delay. Without it a tap can be held ~300ms and, if the finger shifts a
     pixel, discarded as a scroll.
   - The panel and its items are given their own stacking position so a tap
     can never resolve to the scrim sitting behind them, which would close
     the sheet and look exactly like "nothing happened".
   - 48px minimum target. Several cells were 52px tall but the anchor's own
     hit area was smaller than the cell it painted. */

.more-sheet__panel{touch-action:manipulation;}
.more-sheet__panel,
.more-item,
.more-account{position:relative;z-index:2;}
.more-sheet__scrim{z-index:0;}
.more-item,
.more-account{
  touch-action:manipulation;
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.more-item:active,
.more-account:active{background:rgba(31,164,99,.14);}

/* ── No padlocks ─────────────────────────────────────────
   A lock badge used to sit on every gated item in the bar while signed
   out. It was removed on 11 Oct 2026: five icons wearing padlocks is
   the first impression a new visitor gets, and it says "most of this
   is closed to you" before they have any reason to want it open.

   The restriction has not gone anywhere — auth-gate.js still stops the
   navigation and the login box still names what it is for. The account
   is mentioned when someone reaches for something, which is when it is
   worth mentioning. The rule is deleted rather than hidden so nothing
   can switch it back on by setting a class. */

/* ── The reason on the login box ─────────────────────────────────────────
   An unexplained login box reads as a paywall. This names what is behind
   it, in the words of the thing the visitor just tapped. */
.gate-note{
  margin:0 0 16px;
  padding:11px 14px;
  border-radius:12px;
  background:rgba(31,164,99,.09);
  border:1px solid rgba(31,164,99,.24);
  color:var(--brand-green,#0E7C4A);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
[data-theme="dark"] .gate-note{
  background:rgba(24,201,121,.12);
  border-color:rgba(24,201,121,.3);
  color:#5FD9A0;
}

/* ── [hidden] has to actually hide ───────────────────────────────────────
   style.css:6528 declares `.more-item { display: flex }`. That is an author
   style, and the `hidden` attribute is only a user-agent style, so flex
   wins: setting el.hidden = true on a .more-item changed the property and
   nothing on screen.

   Two things were silently broken by that. auth-gate.js hides the
   members-only entries from signed-out visitors, and crm.js hides the Lead
   Pipeline entry from anyone without an employee role — so the staff CRM
   was being advertised in the menu to every visitor on the site. Both read
   as working, because both set .hidden and both were tested by reading
   .hidden back.

   !important rather than a more specific selector, so it cannot be lost to
   whichever stylesheet happens to load last. */
.more-sheet__grid .more-item[hidden],
.more-item[hidden]{display:none !important;}