/* ============================================================================
 * install-banner.css — Platform-aware "Get the app" banner for the TBC Live Monitor.
 *
 * Renders directly under the hero's channel tiles via JS injection.
 * Hides itself when:
 *   - The page is already running as an installed PWA (display-mode: standalone)
 *   - The user dismissed the banner in the last 30 days (localStorage)
 *
 * SMU CGI · 2026-05-28
 * ========================================================================== */

/* Banner sits inside the hero block, *after* the channel tiles. The hero is
   navy, so we use a transparent overlay that reads as a callout, not a fork
   of the design system. */
.install-banner {
  position: relative;
  margin-top: var(--space-6, 2rem);
  padding: 22px 26px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(217, 101, 68, 0.42);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 26px;
  align-items: center;
  color: var(--cream-on-navy, #e8dfd0);
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(6px);
  animation: install-banner-in 0.4s ease 0.5s forwards;
}
@keyframes install-banner-in {
  to { opacity: 1; transform: translateY(0); }
}
.install-banner.is-hidden { display: none; }

.install-banner__lead {
  display: flex; gap: 14px; align-items: flex-start;
}
.install-banner__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 101, 68, 0.45);
  border-radius: 10px;
  color: var(--accent-warm, #d96544);
}
.install-banner__icon svg { width: 22px; height: 22px; }

.install-banner__copy { min-width: 0; }
.install-banner__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-warm, #d96544);
  margin: 0 0 4px;
}
.install-banner__title {
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.install-banner__body {
  font-size: 13.5px; line-height: 1.55;
  color: var(--cream-on-navy, #e8dfd0);
  margin: 0;
  max-width: 56ch;
}
.install-banner__body strong { color: #fff; font-weight: 600; }
.install-banner__body kbd {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -2px;
  width: 22px; height: 22px;
  margin: 0 2px;
  border: 1px solid rgba(232, 223, 208, 0.4);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 11px; color: #fff;
}
.install-banner__steps {
  list-style: none; padding: 0; margin: 8px 0 0;
  font-size: 13px; line-height: 1.6;
  color: var(--cream-on-navy, #e8dfd0);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.install-banner__steps li { display: inline-flex; align-items: center; gap: 6px; }
.install-banner__steps li::before {
  content: counter(install-step);
  counter-increment: install-step;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-warm, #d96544);
  color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}
.install-banner__steps { counter-reset: install-step; }
.install-banner__steps svg { width: 14px; height: 14px; color: var(--accent-warm, #d96544); vertical-align: -2px; }

.install-banner__cta {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 180px;
}
.install-banner__btn {
  appearance: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--accent-warm, #d96544);
  background: var(--accent-warm, #d96544);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.install-banner__btn:hover { background: #c2543b; transform: translateY(-1px); }
.install-banner__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.install-banner__btn--ghost {
  background: transparent; color: var(--cream-on-navy, #e8dfd0);
  border-color: rgba(232, 223, 208, 0.3);
}
.install-banner__btn--ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }
.install-banner__btn svg { width: 16px; height: 16px; }
.install-banner__sub {
  font-size: 11px; color: var(--subtle-on-navy, #b9b3a3); text-align: center;
  margin: 0; line-height: 1.4;
}

/* QR code panel for desktop-Safari users (no in-page install path on macOS Safari) */
.install-banner__qr {
  display: flex; align-items: center; gap: 14px;
}
.install-banner__qr-img {
  width: 92px; height: 92px; flex-shrink: 0;
  background: #fff; padding: 6px; border-radius: 8px;
}
.install-banner__qr-img svg { display: block; width: 100%; height: 100%; }
.install-banner__qr-text {
  font-size: 12.5px; line-height: 1.5; color: var(--cream-on-navy, #e8dfd0);
  max-width: 230px;
}
.install-banner__qr-text strong { color: #fff; }

.install-banner__dismiss {
  position: absolute; top: 8px; right: 10px;
  appearance: none; background: transparent; border: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--subtle-on-navy, #b9b3a3); font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.install-banner__dismiss:hover { background: rgba(255,255,255,0.08); color: #fff; }

@media (max-width: 720px) {
  .install-banner { grid-template-columns: 1fr; padding: 18px 18px 16px; }
  .install-banner__cta { width: 100%; }
  .install-banner__qr { justify-content: flex-start; }
}

/* Already installed (PWA running in standalone mode) — hide entirely. */
@media (display-mode: standalone) {
  .install-banner { display: none !important; }
}