/* Installed app and stability states (PWA 2026-10-19): offline banner, «حاول تاني» error boundary, update notice and
   the «ثبّت التطبيق» guide. Colours are the mobile tokens (light on :root, dark on phones in mobile.css), so both looks
   and the desktop work without a generated twin. Phone text sizes stay on the 13/16/20/24 scale. */
.app-offline{position:fixed;z-index:30;right:16px;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--m-amber-soft);color:var(--m-amber-deep);border:1px solid var(--m-amber-line);box-shadow:var(--m-shadow);font-size:13px;line-height:1.6}
.app-offline[hidden]{display:none}
.app-offline b{display:block;font-size:16px;font-weight:700}
.app-offline small{display:block;font-size:13px;color:var(--m-text2)}
.app-offline-ico{display:inline-flex;flex:none}
@media(min-width:769px){.app-offline{right:auto;left:24px;bottom:24px;max-width:420px}}
@media(max-width:768px){
  body.m-on .app-offline{bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom) + 8px);right:12px;left:12px}
  body.driver-mode .app-offline{display:none}
  body.m-on.app-offline-on main{padding-bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom) + 96px)}
  body.m-mode-map.app-offline-on #m-mapcard:not([hidden]){bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom) + 84px)}
  body.m-on #toast{z-index:31}
}
.app-boundary{margin:12px 0 16px;padding:16px;border-radius:16px;background:var(--m-surface);border:1px solid var(--m-danger-line);color:var(--m-ink);box-shadow:var(--m-shadow);position:relative;z-index:8}
.app-boundary strong{display:block;font-size:16px;line-height:1.6}
.app-boundary p{margin:4px 0 12px;font-size:13px;line-height:1.7;color:var(--m-text2)}
.app-boundary-actions{display:flex;flex-wrap:wrap;gap:8px}
.app-boundary-actions button{min-height:44px;padding:0 16px;border-radius:12px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.app-boundary-retry{background:var(--m-teal);color:#fff;border:1px solid var(--m-teal)}
.app-boundary-reload{background:transparent;color:var(--m-ink);border:1px solid var(--m-line-2)}
#tracking-workspace>.app-boundary{position:absolute;top:12px;right:12px;left:12px;margin:0}
#driver-app>.app-boundary{margin:16px}
/* Phone pages: the card keeps the page gutter and clears the status bar (Khattat A1). */
.m-page-section>.app-boundary{margin:calc(env(safe-area-inset-top) + 12px) 16px 16px}
.app-update{position:fixed;z-index:32;top:calc(env(safe-area-inset-top) + 12px);right:12px;left:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;background:var(--m-surface);color:var(--m-ink);border:1px solid var(--m-teal-line);box-shadow:var(--m-shadow);font-size:13px;line-height:1.6}
.app-update button{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--m-teal);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
@media(min-width:769px){.app-update{right:auto;left:24px;max-width:420px}}
.m-install{color:var(--m-ink)}
.m-install-lead{margin:8px 0 16px;font-size:16px;line-height:1.7}
.m-install-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.m-install-step{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px;border-radius:16px;background:var(--m-surface);border:1px solid var(--m-line)}
.m-install-step p{margin:0;font-size:16px;line-height:1.7}
.m-install-num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--m-teal-soft);color:var(--m-teal-ink);font-size:16px;font-weight:700}
.m-install-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--m-surface-2);color:var(--m-teal-ink)}
.m-install-art{display:block;width:100%;max-width:320px;height:auto;margin-top:10px}
.m-install-bar{fill:var(--m-surface-2);stroke:var(--m-line-2)}
.m-install-dim{fill:none;stroke:var(--m-text3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-install-hit{fill:var(--m-teal-soft);stroke:var(--m-teal);stroke-width:2}
.m-install-key{fill:none;stroke:var(--m-teal-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m-install-note{margin:16px 0;font-size:13px;line-height:1.8;color:var(--m-text2)}
/* Install guide 2026-10-25: the one-tap button and the أندرويد / آيفون switch. */
.m-install-now{margin:0 0 16px}
.m-install-os{margin:0 0 16px}
/* «المساعدة»: both phones' steps, readable on the desktop and the phone. */
.help-side{display:grid;gap:20px;align-content:start}
.help-install h3{margin:0 0 4px;font-size:15px;font-weight:650}
.help-install ol{margin:0;padding-inline-start:22px;font-size:14px;line-height:1.9;color:var(--muted)}
.help-install-state{font-weight:600;color:var(--teal)}
#help-install-link{white-space:normal;overflow-wrap:anywhere}
.help-install .button{min-height:44px}
:where(body.m-on) .help-install h3,:where(body.m-on) .help-install-state{color:var(--m-teal-ink)}
:where(body.m-on) .help-install ol{color:var(--m-text2)}
:where(body.m-on) .help-install .button{width:100%;min-height:48px;font-size:16px}
/* Phone type scale 13/16/20/24 (Khattat 2026-10-25). */
:where(body.m-on) .help-install h2{font-size:20px}
:where(body.m-on) .help-install h3{font-size:16px;font-weight:700}
:where(body.m-on) .help-install p,:where(body.m-on) .help-install ol{font-size:16px;line-height:1.7}
.m-nowrap{white-space:nowrap}
.m-install-step.no-ico{grid-template-columns:auto 1fr}
@media(max-width:400px){.m-install-step{grid-template-columns:32px 1fr}.m-install-ico{display:none}}
/* The map's error line used to cover the left control column (refresh button), so after a failed refresh the button
   could not be pressed. It now starts right of the column. */
@media(max-width:768px){body.m-mode-map #error,body.m-mode-map #loading-bar{left:72px}}