/* ============================================================================
   Dive Tools — "Bug Report / Feature Request" feedback button
   ----------------------------------------------------------------------------
   Loaded on every page. The button is JS-injected by /shared/feedback.js
   into the existing page header at the bottom-right corner (below the
   hamburger and install-button row). It's a plain mailto: link styled
   to match the ghost-on-dark palette used elsewhere in the header.
   ============================================================================ */

/* Position context. menu.css and install.css both already set these,
   but we duplicate the rule here so feedback.css works standalone if
   either of those isn't loaded on a given page. */
header.site-header .wrap,
header.app-header { position: relative; }

.dt-feedback-btn {
  position: absolute;
  bottom: 10px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 4px;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  z-index: 4;
}
.dt-feedback-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.50);
}
.dt-feedback-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Site header (portal home, privacy) — slightly tighter vertical
   padding, so anchor the button to the top-right .wrap area at the
   bottom of its content. */
header.site-header .dt-feedback-btn { bottom: 8px; right: 16px; }

/* On narrow screens the absolute-positioned button overlaps the header
   text (tagline / "Part of the Dive Tools toolkit..." subtitle). Drop
   it into the normal flow instead, so it sits on its own line below
   the header text. The injector appends the button as the last child
   of the header (or its .wrap), so static positioning lands it below
   everything else. */
@media (max-width: 640px) {
  .dt-feedback-btn,
  header.site-header .dt-feedback-btn {
    position: static;
    margin-top: 10px;
  }
}