/* install.css - install-the-app page. Layout/prose comes from policy.css
   (.policy-wrap + .policy-lang-en/he); only install-specific pieces live here. */

.install-cta-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}

/* Size bump over .btn/.btn-primary so the one action on the page reads as such.
   The color repeats .btn-primary's because the page-level `.policy-wrap a`
   link rule (policy.css) otherwise outranks it and paints the label
   primary-on-primary. */
.policy-wrap .install-cta {
  font-size: 15px;
  padding: 14px 32px;
  color: #fff;
}

/* USB installer block: the reliable path when Play Protect blocks the browser
   sideload. Revealed by install.js only on a WebUSB-capable desktop browser. */
.install-usb-block {
  border: 1px solid var(--color-border, #1e293b);
  background: var(--color-surface-2, #141725);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 8px 0 24px;
}

.install-usb-block h2 {
  margin-top: 0;
}

.install-usb-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* Same primary-on-primary guard as .install-cta: `.policy-wrap a` would
   otherwise repaint a link-styled button; the button here is a real <button>,
   but keep the size bump consistent with the download CTA. */
.install-usb-btn {
  font-size: 15px;
  padding: 14px 32px;
}

.install-usb-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.install-usb-status {
  margin: 0;
  text-align: center;
  color: var(--color-text-primary, #f1f5f9);
}

/* Raw device/tool text (adb output, error names) — always LTR, muted, wraps. */
.install-usb-detail {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary, #94a3b8);
  word-break: break-word;
}

.install-usb-status.is-error {
  color: var(--color-error, #ef4444);
}

.install-usb-status.is-success {
  color: var(--color-success, #34d399);
}

/* USB install needs a cable and a desktop browser; on phones it only confuses.
   Hidden here for the same reason the QR is — both are desktop-to-phone tools. */
@media (max-width: 720px) {
  .install-usb-block {
    display: none;
  }
}

.install-inapp-note {
  border: 1px solid var(--color-border, #1e293b);
  background: var(--color-surface-2, #141725);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0;
}

.install-inapp-note p {
  margin: 0;
  color: var(--color-text-primary, #f1f5f9);
}

.install-qr-block {
  margin-top: 32px;
  text-align: center;
}

/* The QR carries its own white quiet zone, so it stays scannable on both themes. */
.install-qr-img {
  width: 180px;
  height: 180px;
  border-radius: 8px;
}

/* Phone visitors install directly; the QR is a desktop-to-phone bridge only. */
@media (max-width: 720px) {
  .install-qr-block {
    display: none;
  }
}