/* =========================================================
   GlobeWarn — install.css

   A single control, centred on the bottom edge, on a phone and on a PC.

   "Wrap the text, zero margin in the padding" — the button is sized by its
   text and nothing else: padding is the small amount needed to keep the
   border off the letters, and there is no extra width, no stretch, no
   fixed height, and no bar behind it. The label wraps rather than pushing
   the control wider than the screen.

   The page gets bottom room while the control is up, so the footer is
   never hidden behind it.
   ========================================================= */

/* The base gap is published as a variable so the script can read it and
   add whatever lift is needed to clear another pinned control. */
:root { --gw-install-base: 0px; }   /* touching the edge, as asked */

#gw-install {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* The script overwrites this with the measured value. */
  bottom: calc(var(--gw-install-base) + env(safe-area-inset-bottom, 0px));
  /* Below the pop-up (900) and below a sticky header, above page content. */
  z-index: 800;

  /* As wide as the text needs, never wider than the screen. */
  width: max-content;
  max-width: calc(100vw - 2 * max(0.7rem, env(safe-area-inset-left)));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

/* Inside the dock the strip is a row item, not a fixed thing of its own. */
#gw-dock #gw-install {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  width: auto;
  max-width: calc(100vw - 1rem);
  padding: 0;
}

#gw-dock .gw-install-btn {
  border-radius: 999px 999px 0 0;
  border-bottom: 0;
  padding: 0.42rem 0.8rem;
  box-shadow: 0 -2px 10px rgba(12, 18, 26, 0.12);
}

.gw-install-btn {
  display: block;
  margin: 0;
  /* Padding hugs the label: enough to clear the border, nothing spare. */
  padding: 0.5rem 0.9rem;
  max-width: 100%;

  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: center;
  white-space: normal;          /* the label wraps instead of overflowing */
  overflow-wrap: anywhere;

  border: 1px solid var(--line-strong, #8c99a8);
  border-radius: 999px;
  background: var(--panel, #fff);
  color: inherit;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(12, 18, 26, 0.16);
}

.gw-install-btn:hover { border-color: var(--accent, #D9480F); }

.gw-install-btn:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 2px;
}

/* Shown only on browsers that cannot install for us; it explains the taps. */
.gw-install-note {
  margin: 0;
  padding: 0.5rem 0.8rem;
  max-width: min(24rem, 100%);
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
  color: var(--text-dim, #55606d);
  background: var(--panel, #fff);
  border: 1px solid var(--line, #c9d2dc);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(12, 18, 26, 0.16);
}

/* Room at the end of the page, exactly the height the control occupies —
   measured by the script, with a sane value before it has measured. The
   footer can therefore always be scrolled clear of the control. */
body.gw-install-showing {
  /* Exactly the height the control covers. The offset and the safe-area
     inset are already inside the measured value, so nothing is counted
     twice and the page gains no empty scroll. */
  padding-bottom: var(--gw-install-room, 2.6rem);
}

/* Running as the installed app: the control has no reason to exist. */
@media (display-mode: standalone), (display-mode: minimal-ui),
       (display-mode: fullscreen) {
  #gw-install { display: none !important; }
  body.gw-install-showing { padding-bottom: 0; }
}