/* ==========================================================================
   Installable app (w9_pwa): offline fallback page, update toast, install card.
   Token-only (no colour literals). Logical properties only (EN/AR). Loaded by the shell, the sign-in pages and the offline page itself.
   ========================================================================== */

/* ---- Offline fallback page (/offline) --------------------------------------------------------------------------------------------------------------- */
body.rq-offline {
  margin: 0; min-block-size: calc(100 * var(--rq-dvh, 1dvh)); display: grid; place-items: center;
  padding: max(var(--rq-s-4), env(safe-area-inset-top)) max(var(--rq-s-4), env(safe-area-inset-right)) max(var(--rq-s-4), env(safe-area-inset-bottom)) max(var(--rq-s-4), env(safe-area-inset-left));
  background: var(--rq-bg); color: var(--rq-text); font-family: var(--rq-font); font-size: var(--rq-fs-md); line-height: var(--rq-lh-base);
}
[lang="ar"] body.rq-offline, html[lang="ar"] body.rq-offline { line-height: var(--rq-lh-ar); }
/* c1_q5 Q5-11: the offline page loads no global reset: without border-box the card (100% + padding + border) overflowed every phone width by 9px */
body.rq-offline, body.rq-offline *, body.rq-offline *::before, body.rq-offline *::after { box-sizing: border-box; }
.rq-offline__card {
  inline-size: min(440px, 100%); padding: var(--rq-s-8) var(--rq-s-6); text-align: center;
  background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-2xl); box-shadow: var(--rq-shadow-2);
}
.rq-offline__logo { display: block; margin: 0 auto var(--rq-s-5); border-radius: var(--rq-r-xl); }
.rq-offline__title { margin: 0 0 var(--rq-s-2); font-size: var(--rq-fs-xl); font-weight: var(--rq-fw-semibold); line-height: var(--rq-lh-tight); letter-spacing: var(--rq-tracking-tight); }
.rq-offline__text { margin: 0 0 var(--rq-s-2); color: var(--rq-text-2); max-inline-size: 36ch; margin-inline: auto; }
.rq-offline__hint { margin: 0 0 var(--rq-s-6); color: var(--rq-muted); font-size: var(--rq-fs-sm); max-inline-size: 40ch; margin-inline: auto; }
.rq-offline__btn {
  min-block-size: var(--rq-h-touch); min-inline-size: 160px; padding: 0 var(--rq-s-6); border: 0; border-radius: var(--rq-r-md); cursor: pointer;
  background: var(--rq-accent); color: var(--rq-on-accent); font: inherit; font-weight: var(--rq-fw-semibold);
  transition: background-color var(--rq-dur-fast) var(--rq-ease);
}
.rq-offline__btn:hover { background: var(--rq-accent-hover); }
.rq-offline__btn:active { background: var(--rq-accent-press); }
.rq-offline__btn:disabled { opacity: 0.7; cursor: progress; }
.rq-offline__btn:focus-visible { outline: 3px solid var(--rq-focus); outline-offset: 3px; }
.rq-offline__status { min-block-size: 1.5em; margin: var(--rq-s-4) 0 0; color: var(--rq-muted); font-size: var(--rq-fs-sm); }

/* ---- Update toast ("A new version is available. Reload") --------------------------------------------------------------------------------------------- */
.rq-pwa-toast {
  position: fixed; z-index: 2000; inset-inline: var(--rq-s-4); inset-block-end: max(var(--rq-s-4), env(safe-area-inset-bottom));
  margin-inline: auto; inline-size: fit-content; max-inline-size: min(520px, calc(calc(100 * var(--rq-vw, 1vw)) - 2 * var(--rq-s-4)));
  display: flex; align-items: center; gap: var(--rq-s-3); padding: var(--rq-s-2) var(--rq-s-2) var(--rq-s-2) var(--rq-s-4);
  padding-inline: var(--rq-s-4) var(--rq-s-2);
  background: var(--rq-ink-deep); color: var(--rq-on-ink); border: 1px solid var(--rq-border-strong); border-radius: var(--rq-r-lg); box-shadow: var(--rq-shadow-pop);
  font-size: var(--rq-fs-base); animation: rq-pwa-rise var(--rq-dur) var(--rq-ease);
}
.rq-pwa-toast__msg { flex: 1 1 auto; min-inline-size: 0; }
.rq-pwa-toast__btn {
  flex: none; min-block-size: var(--rq-h-touch); padding: 0 var(--rq-s-4); border: 0; border-radius: var(--rq-r-md); cursor: pointer;
  background: var(--rq-on-ink); color: var(--rq-ink-deep); font: inherit; font-weight: var(--rq-fw-semibold);
}
.rq-pwa-toast__btn:focus-visible, .rq-pwa-toast__close:focus-visible { outline: 3px solid var(--rq-accent-bright); outline-offset: 2px; }
.rq-pwa-toast__close {
  flex: none; inline-size: var(--rq-h-touch); block-size: var(--rq-h-touch); border: 0; border-radius: var(--rq-r-md); background: transparent; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.rq-pwa-toast__close:hover { background: var(--rq-nav-tint-2); }
@keyframes rq-pwa-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Install card (My settings) ------------------------------------------------------------------------------------------------------------------------- */
.rq-pwa-state { margin: 0; color: var(--rq-ok); font-weight: var(--rq-fw-medium); }
.rq-pwa-ios__lead, .rq-pwa-fallback { margin: 0 0 var(--rq-s-2); color: var(--rq-text-2); }
.rq-pwa-fallback { color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.rq-pwa-ios__steps { margin: 0; padding-inline-start: var(--rq-s-6); color: var(--rq-text-2); display: grid; gap: var(--rq-s-2); }
[data-rq-install-group-actions]:not(:has([data-rq-install]:not([hidden]))) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rq-pwa-toast { animation: none; }
  .rq-offline__btn { transition: none; }
}

/* ---- c1_qa_pwainstall: browser-specific guides, diagnostics, done state, mobile banner, login link ---------------------------------------------------- */
.rq-pwa-state__line { display: flex; align-items: center; gap: var(--rq-s-2); margin: 0; }
.rq-pwa-done { display: grid; gap: var(--rq-s-1); padding: var(--rq-s-3) var(--rq-s-4); border: 1px solid var(--rq-ok); border-radius: var(--rq-r-lg); background: var(--rq-surface-2); }
.rq-pwa-done__title { display: flex; align-items: center; gap: var(--rq-s-2); margin: 0; color: var(--rq-ok); font-weight: var(--rq-fw-semibold); }
.rq-pwa-done__text { margin: 0; color: var(--rq-text-2); }
.rq-pwa-fallback { display: grid; gap: var(--rq-s-3); color: var(--rq-text-2); font-size: var(--rq-fs-base); }
.rq-pwa-fallback[hidden], .rq-pwa-guide[hidden], .rq-pwa-done[hidden], .rq-pwa-banner[hidden] { display: none; }
.rq-pwa-fallback__lead { margin: 0; color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.rq-pwa-guide { padding: var(--rq-s-3) var(--rq-s-4); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); background: var(--rq-surface-2); }
.rq-pwa-guide__lead, .rq-pwa-ios__lead { display: flex; align-items: center; gap: var(--rq-s-2); margin: 0 0 var(--rq-s-2); color: var(--rq-text); font-weight: var(--rq-fw-semibold); }
.rq-pwa-guide__lead i, .rq-pwa-ios__lead i { color: var(--rq-accent); font-size: 1.25em; }
.rq-pwa-guide__steps { margin: 0; padding-inline-start: var(--rq-s-6); display: grid; gap: var(--rq-s-2); }
.rq-pwa-diag { margin-block-start: var(--rq-s-4); border-block-start: 1px solid var(--rq-border); padding-block-start: var(--rq-s-3); }
.rq-pwa-diag__sum { cursor: pointer; display: flex; align-items: center; gap: var(--rq-s-2); color: var(--rq-text-2); font-weight: var(--rq-fw-medium); min-block-size: var(--rq-h-touch); }
.rq-pwa-diag__sum:focus-visible { outline: 3px solid var(--rq-focus); outline-offset: 2px; border-radius: var(--rq-r-sm); }
.rq-pwa-diag__intro { margin: var(--rq-s-2) 0; color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.rq-pwa-diag__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rq-s-2); }
.rq-pwa-diag__row { display: flex; align-items: flex-start; gap: var(--rq-s-3); }
.rq-pwa-diag__ico { flex: none; inline-size: 1.5em; text-align: center; line-height: var(--rq-lh-base); }
.rq-pwa-diag__ico i { display: none; }
.rq-pwa-diag__row[data-state="ok"] i[data-ico="ok"] { display: inline; color: var(--rq-ok); }
.rq-pwa-diag__row[data-state="fail"] i[data-ico="fail"] { display: inline; color: var(--rq-danger); }
.rq-pwa-diag__row[data-state="warn"] i[data-ico="warn"] { display: inline; color: var(--rq-warn); }
.rq-pwa-diag__row[data-state="na"] i[data-ico="na"] { display: inline; color: var(--rq-muted); }
.rq-pwa-diag__body { display: grid; gap: var(--rq-s-1); min-inline-size: 0; }
.rq-pwa-diag__label { color: var(--rq-text); }
.rq-pwa-diag__tip { display: none; color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.rq-pwa-diag__row[data-state="fail"] .rq-pwa-diag__tip, .rq-pwa-diag__row[data-state="warn"] .rq-pwa-diag__tip { display: block; }
/* standalone row: "not opened as an app" is informational, show its tip only as a hint when the state is na and the browser is plain */
.rq-pwa-diag__row[data-rq-diag="standalone"][data-state="na"] .rq-pwa-diag__tip { display: block; }

/* mobile-only banner on the dashboard; the media query is a second guard next to the script's own width check */
.rq-pwa-banner { display: none; }
@media (max-width: 768px) {
  .rq-pwa-banner:not([hidden]) {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--rq-s-2) var(--rq-s-3);
    padding: var(--rq-s-3) var(--rq-s-4); margin-block-end: var(--rq-s-3);
    background: var(--rq-surface); border: 1px solid var(--rq-border-strong); border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-1);
  }
  .rq-pwa-banner__ico { color: var(--rq-accent); font-size: 1.5em; }
  .rq-pwa-banner__text { margin: 0; color: var(--rq-text); font-size: var(--rq-fs-base); }
  .rq-pwa-banner__acts { grid-column: 1 / -1; display: flex; gap: var(--rq-s-2); justify-content: flex-end; flex-wrap: wrap; }
  .rq-pwa-banner__acts .btn { min-block-size: var(--rq-h-touch); }
}
.rq-auth-install { display: inline-flex; align-items: center; gap: var(--rq-s-2); margin-block-end: var(--rq-s-3); padding: var(--rq-s-1) var(--rq-s-2); border: 0; background: transparent; color: var(--rq-accent); font: inherit; cursor: pointer; text-decoration: underline; }
.rq-auth-install[hidden] { display: none; }
.rq-auth-install:focus-visible { outline: 3px solid var(--rq-focus); outline-offset: 2px; border-radius: var(--rq-r-sm); }
.rq-auth-links { display: flex; flex-direction: column; align-items: center; }