/*
 * The "Install Lahub" banner. Paired with install-prompt.js.
 *
 * Colours are Lahub's own (frontend/tailwind.config.js): ink #211F1D,
 * burgundy #7A2230, kraft #C9A472, parchment #FBF7EC. Hard-coded rather than
 * shared with lahub.css because that file is a MINIFIED BUILD ARTIFACT —
 * editing it by hand would be overwritten by the next Tailwind build.
 *
 * Bottom sheet, not a modal: it must never stand between an advocate and the
 * page they came to read. One tap on × ends it for a week.
 */

.lh-install {
  position: fixed;
  left: 12px;
  right: 12px;
  /* Clears the iOS home indicator; 12px on anything without one. */
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9997;              /* below the app's own overlays, same as PWAInstallPrompt */

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;

  background: #FFFFFF;
  color: #3A3733;
  border: 1px solid #E1DDD3;
  border-radius: 16px;
  box-shadow: 0 10px 30px -10px rgba(33, 31, 29, .28);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* Starts off-screen and slides up once the class lands, so the first frame
     of the page is never covered by something the reader did not ask for. */
  transform: translateY(140%);
  opacity: 0;
  transition: transform .22s ease-out, opacity .22s ease-out;
}

.lh-install.is-in {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lh-install { transition: opacity .01s; transform: none; }
}

.lh-install__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #FBF7EC;
  border: 1px solid #ECE6D8;
  border-radius: 11px;
  color: #211F1D;
}

.lh-install__icon svg { width: 15px; height: 22px; }

.lh-install__text {
  flex: 1 1 auto;
  min-width: 0;               /* lets the long line ellipsise instead of pushing the buttons off */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lh-install__text b {
  font-size: .93rem;
  font-weight: 600;
  color: #211F1D;
  line-height: 1.25;
}

.lh-install__text span {
  font-size: .8rem;
  color: #6F6A5E;
  line-height: 1.35;
}

.lh-install__cta {
  flex: 0 0 auto;
  border: 0;
  background: #7A2230;
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 10px;
  cursor: pointer;
}

.lh-install__cta:hover { background: #9A3545; }

.lh-install__x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #6F6A5E;
  font-size: 1.4rem;
  line-height: 1;
  /* A 44px target: this is the control most people reach for, and a cramped
     dismiss on a phone reads as a dark pattern. */
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
}

.lh-install__x:hover { background: #F2EBDB; color: #211F1D; }

.lh-install__cta:focus-visible,
.lh-install__x:focus-visible {
  outline: 2px solid #7A2230;
  outline-offset: 2px;
}

/* The phone's own dark mode. The site itself is light-only, but a bottom sheet
   sits over the system UI at night and a white slab is the one element that
   would glare. */
@media (prefers-color-scheme: dark) {
  .lh-install {
    background: #232120;
    color: #DDD7CB;
    border-color: #3A3733;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
  }
  .lh-install__icon { background: #2E2B28; border-color: #3A3733; color: #F3EEE3; }
  .lh-install__text b { color: #F3EEE3; }
  .lh-install__text span { color: #9C9484; }
  .lh-install__x { color: #9C9484; }
  .lh-install__x:hover { background: #2E2B28; color: #F3EEE3; }
  .lh-install__cta { background: #9A3545; }
}

/* Desktop never sees this — the JS also refuses, but a stylesheet that agrees
   means a cached script cannot leave a banner on a laptop. */
@media (min-width: 769px) and (pointer: fine) {
  .lh-install { display: none; }
}