/* ---------------------------------------------------------------------------
   Mobile bottom bar — "the Dock". Rendered by Ppt\Frontend\MobileNav.
   Phones only: 860px is the line the site header itself collapses at
   (HeaderParts::foundationCss), so the bar appears exactly when the desktop
   nav goes away.

   Every colour is one of the design's own tokens with a literal fallback, so
   the bar already matches whichever of the 400+ designs is active, in light
   and dark, without a setting.
   --------------------------------------------------------------------------- */

:root {
  /* Space the page reserves for the bar. 0 above the breakpoint; set below.
     Deliberately CONSTANT within the breakpoint — it does not shrink when the
     bar compacts, or the page would jump under the reader's thumb. */
  --ppt-mnav-h: 0px;
}

.ppt-mnav { display: none; }

@media (max-width: 860px) {

  :root {
    --ppt-mnav-h: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  body {
    /* So the last card, the footer's final link and any sticky CTA all clear
       the bar instead of sitting under it. */
    padding-bottom: var(--ppt-mnav-h);
  }

  .ppt-mnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    display: block;
    /* Under the off-canvas drawer + scrim (9000/9001) so an open menu covers
       the bar, and under the floating widgets (99989+) so toasts still show. */
    z-index: 8990;
    padding: 0 11px calc(11px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }

  .ppt-mnav-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    /* Visible, not hidden: the raised circle overhangs the top edge. */
    overflow: visible;
    height: 60px;
    padding: 0 4px;
    border: 1px solid var(--ppt-line, rgba(127, 127, 127, .22));
    border-radius: 26px;
    background: var(--ppt-surface, #fff);
    box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .38);
    transition: height .18s ease;
  }

  /* Translucency only where the browser can actually blur behind it — a flat
     85% surface with no blur just looks like a mistake. */
  @supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
    .ppt-mnav-bar {
      background: color-mix(in srgb, var(--ppt-surface, #fff) 88%, transparent);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
  }

  /* ---- a tab ---- */

  .ppt-mnav-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;               /* WCAG target size */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 2px;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: none;
    color: var(--ppt-muted, #6b7280);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  .ppt-mnav-ico {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    line-height: 0;
  }

  .ppt-mnav-ico svg { display: block; }

  .ppt-mnav-lb {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .005em;
  }

  /* ---- the active tab ---- */

  .ppt-mnav-tab.is-on { color: var(--ppt-accent, var(--ppt-brand, #2563eb)); }
  .ppt-mnav-tab.is-on .ppt-mnav-lb { font-weight: 750; }

  /* The glyphs are stroke-only, so filling them at low opacity reads as the
     "selected" weight without needing a second icon set. */
  .ppt-mnav-tab.is-on .ppt-mnav-ico svg {
    fill: currentColor;
    fill-opacity: .16;
  }

  /* A soft plate behind the glyph. ::before rather than a background on the
     tab itself so it hugs the icon and never stretches to the label. */
  .ppt-mnav-tab.is-on::before {
    content: "";
    position: absolute;
    top: 4px;
    width: 38px;
    height: 26px;
    border-radius: 9px;
    background: currentColor;
    opacity: .13;
  }

  .ppt-mnav-tab:hover { color: var(--ppt-accent, var(--ppt-brand, #2563eb)); }

  .ppt-mnav-tab:focus-visible {
    outline: 2px solid var(--ppt-accent, var(--ppt-brand, #2563eb));
    outline-offset: -3px;
    border-radius: 14px;
  }

  /* ---- the raised circle (the `big` slot) ---- */

  /* The circle carries no visible caption — there is no room under a 56px disc in a
     60px bar, and a caption there rendered 7px UNDERNEATH the disc. MobileNav::render()
     puts it on aria-label/title instead, so the control still has a name. */
  .ppt-mnav-tab.is-big {
    flex: 0 0 58px;
    color: var(--ppt-accent, var(--ppt-brand, #2563eb));
  }

  .ppt-mnav-tab.is-big .ppt-mnav-ico {
    position: absolute;
    top: -22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ppt-accent, var(--ppt-brand, #2563eb));
    color: var(--ppt-accent-ink, #fff);
    /* The ring is the PAGE colour, not the bar's — that is what makes the
       circle read as lifted out of the bar rather than pasted onto it. */
    box-shadow:
      0 0 0 5px var(--ppt-bg, #fff),
      0 8px 20px -4px color-mix(in srgb, var(--ppt-accent, #2563eb) 55%, transparent);
  }

  /* Not every scheme declares --ppt-accent-ink: 66 of the 344 accents in
     Design\Tokens leave it unset, and 21 of those are pale (ambers, yellows, cyans)
     where the #fff fallback lands at 1.5-2.9:1 — an invisible glyph on the one
     control the bar is built around. Where the browser supports relative colour,
     derive the ink from the accent's own lightness instead: black on a pale accent,
     white on a dark one. A scheme that DOES set --ppt-accent-ink still wins, because
     it is the first term of the var() chain. */
  @supports (color: oklch(from red l c h)) {
    .ppt-mnav-tab.is-big .ppt-mnav-ico {
      color: var(
        --ppt-accent-ink,
        oklch(from var(--ppt-accent, var(--ppt-brand, #2563eb)) clamp(0, (0.62 - l) * 1000, 1) 0 0)
      );
    }
  }

  .ppt-mnav-tab.is-big:focus-visible { outline-offset: 2px; }

  /* ---- badges ---- */

  .ppt-mnav-badge {
    position: absolute;
    top: 1px;
    inset-inline-start: calc(50% + 5px);
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: #d92d20;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--ppt-surface, #fff);
  }

  /* ---- compacted while the visitor is scrolling down ---- */

  .ppt-mnav.is-compact .ppt-mnav-bar { height: 50px; }
  .ppt-mnav.is-compact .ppt-mnav-lb { display: none; }
  .ppt-mnav.is-compact .ppt-mnav-tab.is-on::before { top: 2px; height: 30px; width: 34px; }
  .ppt-mnav.is-compact .ppt-mnav-tab.is-big .ppt-mnav-ico { top: -17px; width: 50px; height: 50px; }

  @media (prefers-reduced-motion: reduce) {
    .ppt-mnav-bar { transition: none; }
  }

  /* ---- get out of the way of the other fixed furniture ----
     These four already sit at the bottom of the viewport and would stack on
     top of the bar. Lifting them by the bar's height keeps every floating
     element in its own lane. */
  .ppt-nc  { bottom: calc(20px + var(--ppt-mnav-h)) !important; }
  .ppt-mgr { bottom: calc(20px + var(--ppt-mnav-h)) !important; }
  .ppt-toasts,
  .ppt-toast-stack { bottom: calc(18px + var(--ppt-mnav-h)) !important; }

  /* The consent bar is a full-width blocker that must be dealt with before the
     visitor browses at all — it sits over the bar on purpose, and the bar is
     pushed up above it while it is on screen. */
  body.ppt-consent-open .ppt-mnav { display: none; }
}

/* Never on desktop, whatever a design's own CSS does. */
@media (min-width: 861px) {
  .ppt-mnav { display: none !important; }
}

/* Printing a page should not print a navigation bar. */
@media print {
  .ppt-mnav { display: none !important; }
  body { padding-bottom: 0 !important; }
}