/*! ==========================================================================
    JBM share bar — floating, mobile-first, no third-party script.

    A calculator is the most shareable thing on a PPC site: an operator sends
    "this is the number I was missing" to a colleague or a client. So sharing
    has to be one thumb-reach away, not buried in a menu.

    Design decisions that matter on a phone:
      - bottom-anchored, above the home indicator (env(safe-area-inset-*))
      - every target is at least 44px and spaced so adjacent taps cannot be
        hit by mistake
      - the native share sheet is used when the OS provides one, because it is
        faster and includes apps this page cannot know about
      - WhatsApp is always present as a direct link: it is the dominant
        messaging app in the markets this audience is in, and a share sheet
        hides it behind one more tap
      - a copy-link fallback exists for every browser, so nothing is trapped
        behind an API that may not exist
      - the bar never covers the last line of content; body gets matching
        padding when the bar is mounted
    ========================================================================== */

/* The UA rule for [hidden] is display:none, but any explicit display in an
   author stylesheet outranks it. The sheet is display:flex, so without this
   the hidden attribute would do nothing and the sheet would sit in the page. */
.jbm-sharesheet[hidden],
.jbm-sharebar__scrim[hidden] { display: none !important; }

/* ── the bar ────────────────────────────────────────────────────────────── */

.jbm-sharebar {
  position: fixed;
  z-index: 150;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--jbm-surface-2) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--jbm-line-strong);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 38%);
  /* stops the iOS rubber-band from revealing the page behind the bar */
  transform: translateZ(0);
}

/* While the sheet is open the bar is inert, so a stray tap cannot land on a
   network link underneath the scrim. */
.jbm-sharebar[data-open="true"] .jbm-sharebar__row { visibility: hidden; }

.jbm-sharebar__row {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
}

.jbm-sharebar__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--jbm-ink-soft);
  font: inherit;
  font-size: .66rem;
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* the single most valuable mobile rule here: no 300ms delay, no ghost
     highlight, no double-tap zoom delay on these controls */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: color .15s ease, background-color .15s ease;
}

.jbm-sharebar__btn:active { background: color-mix(in srgb, var(--jbm-red) 16%, transparent); }
.jbm-sharebar__btn:hover,
.jbm-sharebar__btn:focus-visible { color: #fff; background: color-mix(in srgb, #fff 6%, transparent); }

.jbm-sharebar__btn:focus-visible {
  outline: 2px solid var(--jbm-red);
  outline-offset: -3px;
  border-radius: 4px;
}

.jbm-sharebar__btn svg { width: 22px; height: 22px; display: block; flex: none; }
.jbm-sharebar__btn[data-net="whatsapp"] { color: #4ee07a; }
.jbm-sharebar__btn[data-net="whatsapp"] svg { fill: currentColor; }
.jbm-sharebar__btn[data-net="copy"] svg { fill: none; stroke: currentColor; }
.jbm-sharebar__btn[data-net="x"] svg { fill: currentColor; }
.jbm-sharebar__btn[data-net="linkedin"] svg { fill: currentColor; }
.jbm-sharebar__btn[data-net="facebook"] svg { fill: currentColor; }
.jbm-sharebar__btn[data-net="mail"] svg { fill: none; stroke: currentColor; }
.jbm-sharebar__btn[data-net="share"] svg { fill: none; stroke: currentColor; }

/* ── the sheet ──────────────────────────────────────────────────────────── */

.jbm-sharebar__scrim {
  position: fixed;
  inset: 0;
  z-index: 151;
  background: rgb(0 0 0 / 62%);
  opacity: 0;
  transition: opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.jbm-sharebar__scrim[data-show="true"] { opacity: 1; }

.jbm-sharesheet {
  position: fixed;
  z-index: 152;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  padding: 0 max(.75rem, env(safe-area-inset-left))
           max(.75rem + env(safe-area-inset-bottom, 0px))
           max(.75rem, env(safe-area-inset-right));
  background: var(--jbm-surface-2);
  border-top: 1px solid var(--jbm-line-strong);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--jbm-shadow-lg);
  transform: translateY(101%);
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.jbm-sharesheet[data-show="true"] { transform: translateY(0); }

.jbm-sharesheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--jbm-line-strong);
  margin: .6rem auto .25rem;
  flex: none;
}

.jbm-sharesheet__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .25rem .6rem;
  flex: none;
}
.jbm-sharesheet__title { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; }
.jbm-sharesheet__title span { display: block; font-size: .74rem; font-weight: 400; color: var(--jbm-muted); }

.jbm-sharesheet__close {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--jbm-ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.jbm-sharesheet__close:hover,
.jbm-sharesheet__close:focus-visible { color: #fff; background: color-mix(in srgb, #fff 8%, transparent); }

.jbm-sharesheet__preview {
  margin: 0 0 .75rem;
  padding: .7rem .8rem;
  border: 1px solid var(--jbm-line);
  border-left: 3px solid var(--jbm-red);
  border-radius: var(--jbm-radius-sm);
  background: var(--jbm-surface-3);
}
.jbm-sharesheet__preview b { display: block; color: #fff; font-size: .92rem; line-height: 1.3; }
.jbm-sharesheet__preview span {
  display: block;
  margin-top: .2rem;
  color: var(--jbm-muted);
  font-size: .78rem;
  word-break: break-all;
}

.jbm-sharesheet__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  overflow-y: auto;
  padding-bottom: .25rem;
}

.jbm-sharesheet__net {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem;
  min-height: 76px;
  padding: .6rem .25rem;
  border: 1px solid var(--jbm-line);
  border-radius: 10px;
  background: var(--jbm-surface-3);
  color: var(--jbm-ink-soft);
  font-size: .7rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .15s ease, background-color .15s ease;
}
.jbm-sharesheet__net:hover,
.jbm-sharesheet__net:focus-visible { border-color: var(--jbm-line-strong); background: var(--jbm-surface-2); color: #fff; }
.jbm-sharesheet__net:focus-visible { outline: 2px solid var(--jbm-red); outline-offset: 2px; }
.jbm-sharesheet__net:active { transform: scale(.96); }
.jbm-sharesheet__net svg { width: 24px; height: 24px; flex: none; }
.jbm-sharesheet__net[data-net="whatsapp"] { color: #4ee07a; }
.jbm-sharesheet__net[data-net="whatsapp"] svg,
.jbm-sharesheet__net[data-net="x"] svg,
.jbm-sharesheet__net[data-net="linkedin"] svg,
.jbm-sharesheet__net[data-net="facebook"] svg { fill: currentColor; }
.jbm-sharesheet__net[data-net="copy"] svg,
.jbm-sharesheet__net[data-net="mail"] svg,
.jbm-sharesheet__net[data-net="native"] svg { fill: none; stroke: currentColor; }

/* ── page compensation so the bar never hides content ──────────────────── */

body[data-jbm-sharebar="on"] {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
/* lift toasts clear of the bar */
body[data-jbm-sharebar="on"] .jbm-toasts {
  bottom: calc(56px + .75rem + env(safe-area-inset-bottom, 0px));
}
/* the footer should not end flush against the bar */
body[data-jbm-sharebar="on"] footer.jbm-section { padding-bottom: 1.5rem; }

/* ── desktop: stop being a full-width bar, become a compact dock ────────── */

@media (min-width: 760px) {
  .jbm-sharebar {
    left: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    width: auto;
    border: 1px solid var(--jbm-line-strong);
    border-radius: 999px;
    padding-bottom: 0;
    box-shadow: var(--jbm-shadow-lg);
  }
  .jbm-sharebar__row { padding: 2px; gap: 0; }
  .jbm-sharebar__btn {
    flex: 0 0 auto;
    min-height: 48px;
    width: 52px;
    border-radius: 999px;
    font-size: 0;
    gap: 0;
  }
  .jbm-sharebar__btn svg { width: 21px; height: 21px; }
  body[data-jbm-sharebar="on"] { padding-bottom: 0; }
  body[data-jbm-sharebar="on"] .jbm-toasts { bottom: 1.25rem; }

  .jbm-sharesheet {
    left: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(420px, calc(100vw - 2.5rem));
    border-radius: 16px;
    max-height: 80dvh;
  }
  .jbm-sharesheet__grip { display: none; }
  .jbm-sharesheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Very small phones: five targets will not fit at 44px without crowding. */
@media (max-width: 340px) {
  .jbm-sharebar__btn { font-size: .6rem; min-height: 52px; }
  .jbm-sharebar__btn svg { width: 20px; height: 20px; }
  .jbm-sharesheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .jbm-sharesheet,
  .jbm-sharebar__scrim,
  .jbm-sharesheet__net { transition: none; }
  .jbm-sharesheet { transform: translateY(0); }
  .jbm-sharesheet:not([data-show="true"]) { display: none; }
}

@media print {
  .jbm-sharebar,
  .jbm-sharebar__scrim,
  .jbm-sharesheet { display: none !important; }
  body[data-jbm-sharebar="on"] { padding-bottom: 0; }
}