/* pwa-card: the save / install / QR panel, presented as a MODAL that opens from
   the header QR button. Same hairline shell grammar as the profile card (1px
   structure, 4px corners, mono MICRO labels, no pills, accent spent only on
   interaction). Tokens and ground live in theme.css; this file owns only this
   panel and its overlay so the parallel orb work stays conflict free.
   Open / close / Escape wiring lives in pwa-card.js (strict CSP, no inline JS). */

pwa-card {
  /* The host holds only the fixed-position modal, so it must not occupy flow. */
  display: contents;
}

/* Overlay: full viewport dim + blur stage, centering the dialog. Hidden by
   default via the [hidden] attribute toggled in pwa-card.js. */
.pwa-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pwa-modal[hidden] {
  display: none;
}

/* Lock the page scroll behind the open modal. */
body.pwa-modal-open {
  overflow: hidden;
}

.pwa-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Dialog wrapper: caps width + height and scrolls its own overflow on short
   viewports so the modal always fits and centers on mobile. */
.pwa-modal__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

/* Close: hairline square matching .theme-toggle so the two controls read as one
   family. */
.pwa-modal__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dim);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.pwa-modal__close svg {
  width: 15px;
  height: 15px;
  display: block;
}

.pwa-modal__close:hover,
.pwa-modal__close:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--hover-bg);
}

.pwa-modal__close:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.pwa-card__shell {
  width: 100%;
  background: var(--shell-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(18px, 3.5vw, 28px);
  display: grid;
  gap: clamp(16px, 3vw, 22px);
}

/* Right cluster of the modal topbar: install status glyph beside the close. */
.pwa-card__topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pwa-card__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.pwa-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--faint);
}

/* Status glyph on the right of the topbar: a small signal that flips to the
   accent + "INSTALLED" once the app is on the home screen. */
.pwa-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--faint);
}

/* The status flips to visible only when the app is installed; keep the
   [hidden] attribute authoritative (the display rule above would otherwise
   override the UA hidden default). */
.pwa-card__status[hidden] {
  display: none;
}

.pwa-card__status svg {
  width: 12px;
  height: 12px;
  display: block;
}

.pwa-card__status.is-installed {
  color: var(--accent);
}

.pwa-card__lead {
  margin: 0;
  color: var(--dim);
  line-height: 1.6;
  font-size: 0.9375rem;
  max-width: 52ch;
}

.pwa-card__lead strong {
  color: var(--text);
  font-weight: 600;
}

/* Action row: primary install fills, QR share is a compact companion. */
.pwa-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

@media (max-width: 460px) {
  .pwa-card__actions {
    grid-template-columns: 1fr;
  }
}

.pwa-card__btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--list-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.pwa-card__btn svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.pwa-card__btn:hover,
.pwa-card__btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--hover-bg-strong);
}

.pwa-card__btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Primary install: accent hairline from the start so it reads as the lead
   action, still no fill until interaction (accent spent only on state). */
.pwa-card__btn--install {
  border-color: var(--accent);
  color: var(--accent);
}

.pwa-card__btn--install:hover,
.pwa-card__btn--install:focus-visible {
  background: var(--selection);
}

/* Install is revealed only when the browser reports the app is installable. */
.pwa-card__btn--install[hidden] {
  display: none;
}

.pwa-card__label-mono {
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
}

/* QR reveal: hidden until the share control is pressed. */
.pwa-card__qr {
  display: none;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 3vw, 20px);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--list-bg);
  padding: clamp(14px, 3vw, 18px);
}

.pwa-card__qr.is-open {
  display: grid;
}

@media (max-width: 460px) {
  .pwa-card__qr.is-open {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* The QR itself always sits on a solid light tile so it scans reliably on the
   dark ground; hairline framed, 4px corners, no pill. */
.pwa-card__qr-tile {
  width: clamp(132px, 34vw, 160px);
  aspect-ratio: 1;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px;
}

.pwa-card__qr-tile img {
  width: 100%;
  height: 100%;
  display: block;
}

.pwa-card__qr-meta {
  display: grid;
  gap: 6px;
}

.pwa-card__qr-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.pwa-card__qr-sub {
  margin: 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.5;
}

.pwa-card__qr-url {
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  letter-spacing: var(--micro-track);
  color: var(--accent);
  word-break: break-all;
}

/* iOS hint: shown only on iOS Safari (no beforeinstallprompt there), an honest
   instruction with the correct share glyph instead of a fake prompt. */
.pwa-card__ios {
  display: none;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--list-bg);
  padding: 13px 16px;
  color: var(--dim);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pwa-card__ios.is-visible {
  display: flex;
}

.pwa-card__ios svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

.pwa-card__ios strong {
  color: var(--text);
  font-weight: 600;
}