/* ==========================================================================
   Beacon Capital - Global Floating Contact / Social / Download Dock
   Shared stylesheet. Loaded once on every public frontend view.

   Scope: every rule is namespaced under #bc-dock. Nothing in this file can
   reach Global Header 3945, Global Footer 3944, Marble V2, Granite V2,
   Stone Solutions or any page layout. The component is position:fixed and
   therefore contributes zero geometry to the document flow.

   z-index 9985 is deliberate. Audited site stacking order:
     10060  header identity panel (sticky)
     10050  ElementsKit offcanvas mobile menu panel
     10040  ElementsKit mobile menu overlay
     10002  header inner layers
      9999  header root
      9990  legacy landing-page WhatsApp float (retired below)
      9985  <- this dock: above all page content, below every header layer
   ========================================================================== */

#bc-dock {
  /* Brand system */
  --bc-obsidian:   #070909;
  --bc-carbon:     #111414;
  --bc-teal-deep:  #012F31;
  --bc-teal:       #024548;
  --bc-gold:       #D1AA6D;
  --bc-gold-warm:  #D9AE63;
  --bc-ivory:      #F3EFE7;
  --bc-white:      #FCFAF6;
  --bc-wa:         #25D366;

  --bc-size: 44px;
  --bc-dur: 190ms;
  --bc-ease: cubic-bezier(.22,.61,.36,1);

  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9985;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  /* Never contribute to document width. */
  max-width: 100vw;
}

#bc-dock *,
#bc-dock *::before,
#bc-dock *::after { box-sizing: border-box; }

/* The rail is a flex column with a capped height on touch layouts. Flex children
   default to flex-shrink:1, so instead of the cap triggering the intended
   internal scroll, the rows silently COMPRESSED to fit - measured at 390x760 the
   close control collapsed to 30.6px, under the 44px minimum touch target, and on
   shorter phones every row would squash further. Pinning the rail's direct
   children to their natural height makes the overflow real, so the tray scrolls
   and every control keeps its designed size. */
#bc-dock .bc-dock__rail > * { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Rail (expanded state)
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 7px 6px;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(7,9,9,.97) 0%, rgba(1,47,49,.97) 100%);
  border: 1px solid rgba(209,170,109,.22);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  box-shadow:
    0 18px 46px rgba(0,0,0,.46),
    0 1px 0 rgba(209,170,109,.10) inset;
  transform-origin: left center;
  transition:
    transform var(--bc-dur) var(--bc-ease),
    opacity var(--bc-dur) var(--bc-ease),
    visibility var(--bc-dur) var(--bc-ease);
}

#bc-dock[data-state="collapsed"] .bc-dock__rail {
  transform: translateX(-104%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bc-size);
  height: var(--bc-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--bc-ivory);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--bc-dur) var(--bc-ease),
    border-color var(--bc-dur) var(--bc-ease),
    color var(--bc-dur) var(--bc-ease);
}

#bc-dock .bc-dock__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

#bc-dock .bc-dock__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  transition: transform var(--bc-dur) var(--bc-ease);
}

#bc-dock .bc-dock__item:hover,
#bc-dock .bc-dock__item:focus-visible {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold-warm);
  color: var(--bc-obsidian);
}

#bc-dock .bc-dock__item:hover .bc-dock__icon svg,
#bc-dock .bc-dock__item:focus-visible .bc-dock__icon svg {
  transform: scale(1.07);
}

/* WhatsApp: primary direct-contact action. Restrained green wash at rest plus a
   gold hairline so it reads as first-among-equals, resolving to the shared gold
   hover so the brand system stays dominant. */
#bc-dock .bc-dock__item--wa {
  background-color: rgba(37,211,102,.10);
  border-color: rgba(209,170,109,.42);
  color: var(--bc-white);
}

#bc-dock .bc-dock__item--wa:hover,
#bc-dock .bc-dock__item--wa:focus-visible {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold-warm);
  color: var(--bc-obsidian);
}

/* Document actions read as a distinct class of action via a gold icon at rest. */
#bc-dock .bc-dock__item--doc { color: var(--bc-gold); }

#bc-dock .bc-dock__item--doc:hover,
#bc-dock .bc-dock__item--doc:focus-visible { color: var(--bc-obsidian); }

/* --------------------------------------------------------------------------
   Unconfigured social items (no verified URL yet)

   Deliberately close to a normal dock item so the complete design can be
   reviewed: the icon stays legible ivory, only slightly softened, with a
   marginally quieter border. No heavy greying out. Still keyboard focusable
   and still reveals its platform name on hover, plus a small gold note.
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__item.is-unconfigured {
  color: rgba(243,239,231,.80);
  border-color: rgba(209,170,109,.13);
  cursor: default;
}

#bc-dock .bc-dock__item.is-unconfigured:hover,
#bc-dock .bc-dock__item.is-unconfigured:focus,
#bc-dock .bc-dock__item.is-unconfigured:focus-visible {
  background-color: rgba(209,170,109,.18);
  border-color: rgba(209,170,109,.42);
  color: var(--bc-gold);
}

#bc-dock .bc-dock__item.is-unconfigured:hover .bc-dock__icon svg,
#bc-dock .bc-dock__item.is-unconfigured:focus-visible .bc-dock__icon svg {
  transform: none;
}

#bc-dock .bc-dock__soon {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bc-gold);
  opacity: .85;
}

/* --------------------------------------------------------------------------
   Divider between social and downloads
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__divider {
  height: 1px;
  margin: 6px 7px;
  border: 0;
  background: linear-gradient(90deg,
    rgba(209,170,109,0) 0%,
    rgba(209,170,109,.55) 50%,
    rgba(209,170,109,0) 100%);
}

/* --------------------------------------------------------------------------
   Desktop hover / focus label panel
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-7px);
  white-space: nowrap;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--bc-white);
  background: linear-gradient(180deg, #0B0F0F 0%, var(--bc-teal-deep) 100%);
  border: 1px solid rgba(209,170,109,.32);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--bc-dur) var(--bc-ease),
    transform var(--bc-dur) var(--bc-ease),
    visibility var(--bc-dur) var(--bc-ease);
}

/* Caret */
#bc-dock .bc-dock__label::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: #0B0F0F;
  border-left: 1px solid rgba(209,170,109,.32);
  border-bottom: 1px solid rgba(209,170,109,.32);
}

#bc-dock .bc-dock__item:hover .bc-dock__label,
#bc-dock .bc-dock__item:focus .bc-dock__label,
#bc-dock .bc-dock__item:focus-visible .bc-dock__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* --------------------------------------------------------------------------
   Collapse control (in-rail)
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__collapse {
  color: rgba(243,239,231,.62);
  border-radius: 10px;
}

#bc-dock .bc-dock__collapse .bc-dock__icon { width: 13px; height: 13px; }

#bc-dock .bc-dock__collapse:hover,
#bc-dock .bc-dock__collapse:focus-visible {
  background-color: rgba(209,170,109,.16);
  border-color: rgba(209,170,109,.34);
  color: var(--bc-gold);
}

#bc-dock .bc-dock__collapse-text { display: none; }

/* --------------------------------------------------------------------------
   Collapsed handle
   -------------------------------------------------------------------------- */

#bc-dock .bc-dock__handle {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 54px;
  padding: 0;
  background: linear-gradient(180deg, rgba(7,9,9,.97) 0%, rgba(1,47,49,.97) 100%);
  border: 1px solid rgba(209,170,109,.28);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  color: var(--bc-gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(-50%) translateX(-104%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--bc-dur) var(--bc-ease),
    opacity var(--bc-dur) var(--bc-ease),
    visibility var(--bc-dur) var(--bc-ease),
    background-color var(--bc-dur) var(--bc-ease),
    color var(--bc-dur) var(--bc-ease);
}

#bc-dock .bc-dock__handle .bc-dock__icon { width: 16px; height: 16px; }

#bc-dock[data-state="collapsed"] .bc-dock__handle {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
}

#bc-dock .bc-dock__handle:hover,
#bc-dock .bc-dock__handle:focus-visible {
  background: linear-gradient(180deg, var(--bc-gold) 0%, var(--bc-gold-warm) 100%);
  border-color: var(--bc-gold-warm);
  color: var(--bc-obsidian);
}

/* Handle micro tooltip */
#bc-dock .bc-dock__handle-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-7px);
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bc-white);
  background: linear-gradient(180deg, #0B0F0F 0%, var(--bc-teal-deep) 100%);
  border: 1px solid rgba(209,170,109,.32);
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--bc-dur) var(--bc-ease),
    transform var(--bc-dur) var(--bc-ease),
    visibility var(--bc-dur) var(--bc-ease);
}

#bc-dock .bc-dock__handle:hover .bc-dock__handle-tip,
#bc-dock .bc-dock__handle:focus-visible .bc-dock__handle-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* --------------------------------------------------------------------------
   Focus visibility (accessible replacement for the default outline)
   -------------------------------------------------------------------------- */

/* :focus is the fallback so a visible ring is guaranteed even where
   :focus-visible is unsupported or not inferred; :focus-visible then refines it
   for pointer users. The outline is never removed without a replacement. */
#bc-dock .bc-dock__item:focus,
#bc-dock .bc-dock__handle:focus,
#bc-dock .bc-dock__item:focus-visible,
#bc-dock .bc-dock__handle:focus-visible {
  outline: 2px solid var(--bc-gold);
  outline-offset: 2px;
}

#bc-dock .bc-dock__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Suppress while the ElementsKit offcanvas mobile menu is open
   -------------------------------------------------------------------------- */

body.bc-dock-suppressed #bc-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms var(--bc-ease), visibility 140ms var(--bc-ease);
}

/* --------------------------------------------------------------------------
   RESCUE LAYER  (the responsive-visibility guarantee)

   bc-floating-dock.js measures the real bounding rects of the rail and the
   handle. If NEITHER is on-screen and hit-testable - a stuck suppression class,
   a third-party rule, an overflow ancestor, an unforeseen breakpoint gap - it
   adds .bc-dock--rescue and forces the collapsed state, so the restore handle
   is guaranteed to come back.

   !important is used here and nowhere else in this file. It is the point of the
   layer: it must outrank whatever caused the disappearance, including the
   suppression rule directly above. It is inert in normal operation - the class
   is only ever present while the dock is genuinely unreachable.
   -------------------------------------------------------------------------- */

body #bc-dock.bc-dock--rescue {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body #bc-dock.bc-dock--rescue .bc-dock__handle {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   DESKTOP SHORT-VIEWPORT CONTAINMENT  (>= 1025px, limited height)

   The rail's natural height is ~534px. On a short desktop window or a landscape
   tablet above the touch breakpoint (e.g. 1280x450) a vertically centred 534px
   rail runs off both edges of the viewport and the outermost actions become
   unreachable - and because the handle is hidden while expanded at these widths,
   there was no fallback. Measured before the fix at 1280x450: rail top -42px,
   2 of 11 actions off-screen.

   Fixed by scaling the rail down rather than scrolling it: overflow on the rail
   would clip the hover label panels, which sit outside its right edge and must
   be preserved. Geometry only - no colours, spacing rhythm or behaviour change.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) and (max-height: 660px) {
  #bc-dock { --bc-size: 38px; }
  #bc-dock .bc-dock__icon { width: 15px; height: 15px; }
  #bc-dock .bc-dock__divider { margin: 5px 7px; }
}

@media (min-width: 1025px) and (max-height: 560px) {
  #bc-dock { --bc-size: 33px; }
  #bc-dock .bc-dock__icon { width: 14px; height: 14px; }
  #bc-dock .bc-dock__divider { margin: 4px 7px; }
  #bc-dock .bc-dock__rail { padding: 6px 5px; }
}

/* --------------------------------------------------------------------------
   TABLET + MOBILE  (<= 1024px)
   Left-edge trigger that opens a compact tray. Never a tall icon column.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  #bc-dock {
    top: auto;
    /* 22px, not 16: clears the overlaying bottom browser UI on iOS Safari and
       Chrome Android, where a 16px inset can leave the handle half-covered. */
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    transform: none;
    /* Single source of truth for the tray's inner padding. The sticky Close
       footer reads it to bleed exactly to the tray edges at every width. */
    --bc-tray-pad: 10px;
  }

  /* Handle is permanently visible on touch: it is both opener and closer. */
  #bc-dock .bc-dock__handle {
    position: relative;
    left: auto;
    top: auto;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(209,170,109,.28);
    border-radius: 15px;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  #bc-dock[data-state="collapsed"] .bc-dock__handle { transform: none; }

  #bc-dock[data-state="expanded"] .bc-dock__handle {
    background: linear-gradient(180deg, var(--bc-gold) 0%, var(--bc-gold-warm) 100%);
    border-color: var(--bc-gold-warm);
    color: var(--bc-obsidian);
  }

  #bc-dock .bc-dock__handle-tip { display: none; }

  /* Tray sits above the handle. */
  #bc-dock .bc-dock__rail {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: min(76vw, 300px);
    gap: 6px;
    padding: var(--bc-tray-pad);
    border: 1px solid rgba(209,170,109,.24);
    border-radius: 16px;
    transform-origin: left bottom;
    /* Ten actions is a taller tray than three. Cap it against the viewport so
       short phones scroll the tray instead of pushing it off-screen. */
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The tray scrolls itself; keep its scrollbar unobtrusive. */
  #bc-dock .bc-dock__rail::-webkit-scrollbar { width: 3px; }
  #bc-dock .bc-dock__rail::-webkit-scrollbar-thumb {
    background: rgba(209,170,109,.35);
    border-radius: 3px;
  }

  /* Hover-only affordance: no hover on touch, and the mobile label is already
     visible, so the secondary note would just add clutter. */
  #bc-dock .bc-dock__soon { display: none; }

  #bc-dock[data-state="collapsed"] .bc-dock__rail {
    transform: translateY(10px) scale(.97);
    opacity: 0;
    visibility: hidden;
  }

  #bc-dock[data-state="expanded"] .bc-dock__rail {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
  }

  /* Social items in a two-up grid; WhatsApp spans full width as primary. */
  #bc-dock .bc-dock__group--social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  #bc-dock .bc-dock__group--docs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #bc-dock .bc-dock__item--wa { grid-column: 1 / -1; }

  /* Touch targets: 48px tall, comfortably above the 44px minimum. */
  #bc-dock .bc-dock__item {
    width: auto;
    height: 48px;
    min-width: 0;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    border-color: rgba(209,170,109,.16);
    background-color: rgba(255,255,255,.035);
    border-radius: 11px;
  }

  #bc-dock .bc-dock__item--wa { background-color: rgba(37,211,102,.12); }

  /* Labels are permanently visible on touch: no hover to rely on. */
  #bc-dock .bc-dock__label {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .015em;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  #bc-dock .bc-dock__label::before { display: none; }

  /* Close row */
  /* 44px, not 40: the close control must clear the same minimum touch target
     as every other item in the tray. */
  #bc-dock .bc-dock__collapse {
    width: 100%;
    height: 44px;
    justify-content: center;
    gap: 8px;
    border-color: rgba(209,170,109,.2);
    background-color: rgba(255,255,255,.03);
  }

  #bc-dock .bc-dock__collapse-text {
    display: inline;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  #bc-dock .bc-dock__divider { margin: 3px 2px; }
}

/* Narrow phones: keep the tray inside the viewport at 320px. */
@media (max-width: 400px) {
  #bc-dock { left: 10px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  #bc-dock .bc-dock__rail { width: min(82vw, 272px); --bc-tray-pad: 9px; }
  #bc-dock .bc-dock__item { gap: 8px; padding: 0 9px; }
  #bc-dock .bc-dock__label { font-size: 11px; }
}

@media (max-width: 340px) {
  #bc-dock .bc-dock__rail { width: calc(100vw - 32px); }
  /* Stay two-up even at 320: eight social items in a single column would make
     the tray far taller than the viewport. The platform names are short enough
     to read in a half-width cell. */
  #bc-dock .bc-dock__item { padding: 0 8px; gap: 7px; }
  #bc-dock .bc-dock__label { font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   Motion, print, legacy retirement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #bc-dock,
  #bc-dock * { transition-duration: 1ms !important; }
  #bc-dock .bc-dock__item:hover .bc-dock__icon svg { transform: none; }
}

@media print { #bc-dock { display: none !important; } }

/* RETIREMENT of the legacy page-scoped floating WhatsApp button used by the four
   Google Ads landing pages (Romania 4108, Nigeria 4121, Kenya 4125,
   Australia 4130). The dock supersedes it and carries the same campaign number,
   pre-filled message and dataLayer event, so only one floating control is ever
   visible. Hidden by CSS only - no page _elementor_data is modified, and
   removing this block restores the legacy button exactly. */
body.bc-dock-active #bc-ro-wa-float,
body.bc-dock-active #bc-ng-wa-float,
body.bc-dock-active #bc-ke-wa-float,
body.bc-dock-active #bc-au-wa-float {
  display: none !important;
}

/* --------------------------------------------------------------------------
   TOUCH-LAYOUT TRAY HEIGHT CAP
   The tray's natural height is ~454px. On a short phone (e.g. 320x568) that is
   ~70% of the viewport, which buries the page behind it once opened. Cap it to
   a safe share of the viewport and let it scroll internally instead. This only
   engages when the natural height would exceed the cap (viewports under ~730px
   tall); on a 390x844 phone nothing changes. Presentation, spacing, colours and
   item sizes are untouched - this is a containment guard, not a redesign.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #bc-dock .bc-dock__rail {
    max-height: min(62vh, 454px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   STICKY TRAY FOOTER  (touch layouts only, <= 1024px)

   The tray scrolls internally on short phones, which meant the Close row could
   sit below the tray's own fold. Pinning it with position:sticky keeps it in
   view at every scroll offset without changing the tray's structure, contents
   or ordering.

   Why sticky rather than fixed/absolute: a sticky element stays IN FLOW, so it
   reserves its own space at the end of the list. Scrolled to the bottom it
   returns to its natural position and the last download row is fully clear of
   it - nothing is ever permanently hidden behind the footer. While the list is
   mid-scroll the content passes underneath, which is what makes it read as a
   footer bar.

   It bleeds across the tray's inner padding via --bc-tray-pad so it meets the
   tray's left, right and bottom edges exactly at both padding values (10px, and
   9px below 400px), leaving no strip for content to peek through.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  /* The scrolling list no longer needs a trailing hairline - the sticky footer
     carries its own top divider, and a scrolling one would drift away from it. */
  #bc-dock .bc-dock__rail > .bc-dock__divider:last-of-type { display: none; }

  /* The sticky footer seals the tray floor, so the tray's own bottom padding is
     dropped. Left in place it formed a ~10px strip below the footer that is part
     of the scrollport - measured with a download row scrolling visibly through
     it. Zeroing it makes the content box bottom and the scrollport bottom the
     same line, so bottom:0 pins the footer truly flush and nothing can pass
     beneath it. The footer's own height supplies the bottom spacing. */
  #bc-dock .bc-dock__rail {
    padding-bottom: 0;
    /* Reserve the footer's height (48px + its 4px margin) for programmatic and
       keyboard-driven scrolling. Without it, scrollIntoView and sequential focus
       navigation align an item's bottom to the scrollport bottom - which now
       sits behind the sticky footer - leaving the last download row half-
       covered. This is the "bottom padding for the scrollable content" the
       sticky footer requires. */
    scroll-padding-bottom: 52px;
  }

  #bc-dock .bc-dock__collapse {
    position: sticky;
    /* 0, not a negative offset: for a scroll container the sticky reference is
       the SCROLLPORT (the padding box), so 0 already pins the footer flush to
       the tray's inner bottom edge. A negative value pushes it past that edge,
       where the tray's own overflow clips it. */
    bottom: 0;
    z-index: 2;

    /* Full-bleed to the tray edges. */
    width: calc(100% + (var(--bc-tray-pad) * 2));
    margin: 4px calc(var(--bc-tray-pad) * -1) 0;
    padding: 0 var(--bc-tray-pad);

    /* 48px: comfortably above the 44x44 minimum touch target. */
    height: 48px;

    /* Deep Teal base so scrolling content cannot show through, with the gold
       hairline as the intentional top divider. Same brand pair as the tray. */
    background: linear-gradient(180deg, rgba(2,44,46,.99) 0%, rgba(1,38,40,1) 100%);
    border: 0;
    border-top: 1px solid rgba(209,170,109,.30);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 -12px 18px rgba(7,9,9,.42);
    color: var(--bc-gold);
  }

  /* The hover/focus rule in the desktop section sets background-color only,
     which the gradient above would paint over. Restated here as a gradient so
     touch focus feedback stays visible. */
  #bc-dock .bc-dock__collapse:hover,
  #bc-dock .bc-dock__collapse:focus,
  #bc-dock .bc-dock__collapse:focus-visible {
    background: linear-gradient(180deg, rgba(209,170,109,.24) 0%, rgba(1,38,40,1) 100%);
    border-top-color: var(--bc-gold-warm);
    color: var(--bc-gold);
  }

  /* Inset the focus ring: an outside ring would be clipped by the tray's
     overflow, leaving keyboard users without a visible focus state. */
  #bc-dock .bc-dock__collapse:focus,
  #bc-dock .bc-dock__collapse:focus-visible {
    outline: 2px solid var(--bc-gold);
    outline-offset: -4px;
  }
}