/* ==========================================================================
   pwa.css - the PWA banners (wave-35 R4: the offline shell + the install
   prompt)
   --------------------------------------------------------------------------
   Both banners are APP-CHROME, not surface content: they live in the root
   layout (hidden by default) and slide in when app.js arms a data
   attribute on <body>:

     body[data-offline="true"]     -> the "you're offline" ribbon
     body[data-installable="true"] -> the calm "Install sneck" banner

   The state contract is deliberately the same one reactive.css uses on
   surfaces ([data-*] attributes CSS can react to) - app.js owns the
   attributes because only it can see navigator.onLine and the
   beforeinstallprompt event; CSS owns the slide (the transition lives
   on the resting state so it plays BOTH ways).

   The offline banner's persistence + show-once-dismiss use the rail's
   localStorage idiom (try/catch around a namespaced key - private
   modes refuse storage and the state simply doesn't survive).

   Tokens are app.css's; this sheet is a thin consumer - it never
   re-defines primitives, it styles two fixed chrome elements.
   ========================================================================== */

.pwa-banner {
  position: fixed;
  right: var(--sp-4, 16px);
  bottom: var(--sp-4, 16px);
  z-index: 90; /* above the work surfaces, below modals/palette layers */
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  max-width: min(24rem, calc(100vw - 32px));
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-2);
  font-size: var(--size-base, 13.5px);
  color: var(--text);

  /* the resting state: fully out of the flow's sight, still in the DOM
     so the transition plays on the way in AND the way out; visibility
     (not display) so assistive tech skips it until it slides in. */
  visibility: hidden;
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--dur-base, 200ms) var(--ease, ease),
    opacity var(--dur-base, 200ms) var(--ease, ease),
    visibility 0s linear var(--dur-base, 200ms);
}

/* -- the offline ribbon --------------------------------------------------- */

#pwa-offline-banner {
  left: var(--sp-4, 16px);
  right: auto;
  bottom: var(--sp-4, 16px);
}

.pwa-banner-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--warning, #d4a72c);
}

.pwa-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pwa-banner-title {
  font-weight: 600;
}

.pwa-banner-sub {
  font-size: var(--size-sm, 12.5px);
  color: var(--muted);
}

/* -- the install banner ---------------------------------------------------- */

#pwa-install-banner .pwa-banner-title {
  color: var(--accent);
}

.pwa-banner-install {
  flex-shrink: 0;
  border-radius: var(--r-pill, 999px);
  padding: 5px 12px;
  font-size: var(--size-sm, 12.5px);
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  border: none;
  transition: background var(--dur-fast, 120ms) var(--ease, ease);
}

.pwa-banner-install:hover {
  background: var(--accent-bright);
}

.pwa-banner-install:focus-visible,
.pwa-banner-dismiss:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-2), 0 0 0 4px var(--accent));
}

.pwa-banner-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm, 6px);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: color var(--dur-fast, 120ms) var(--ease, ease),
    background var(--dur-fast, 120ms) var(--ease, ease);
}

.pwa-banner-dismiss:hover {
  color: var(--text);
  background: var(--bg-3);
}

/* -- the slide-ins (body data-attributes - the reactive contract) ---------- */

body[data-offline="true"] #pwa-offline-banner,
body[data-installable="true"] #pwa-install-banner {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--dur-base, 200ms) var(--ease, ease),
    opacity var(--dur-base, 200ms) var(--ease, ease), visibility 0s;
}

/* the kill switch - the house rule for every motion */
@media (prefers-reduced-motion: reduce) {
  .pwa-banner,
  body[data-offline="true"] #pwa-offline-banner,
  body[data-installable="true"] #pwa-install-banner {
    transition-duration: 0.01ms;
  }
}