/* وصلها 4 — standalone pages (privacy, security report, offline, offline reader).
   Same tokens and type as the app, without the app shell. */
.static-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.static-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%; max-width: 880px; margin-inline: auto; padding: var(--space-4) var(--space-4);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
}
.static-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; }
.static-brand img { width: 44px; height: auto; }
.static-brand strong { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); }
.static-main { width: 100%; max-width: 760px; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-8); outline: none; }
.static-main > h1 { font-size: var(--text-2xl); margin-block-end: var(--space-2); }
.prose { display: grid; gap: var(--space-4); line-height: var(--leading-body); }
.prose h2 { font-size: var(--text-xl); margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.prose p { color: var(--text-2); max-width: 68ch; }
.prose strong { color: var(--text); }
.toc { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.toc h2 { font-size: var(--text-sm); color: var(--text-3); border: 0; margin: 0; padding: 0; }
.toc ol { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--accent); }
.static-foot { width: 100%; max-width: 880px; margin-inline: auto; padding: var(--space-5) var(--space-4) max(var(--space-5), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); color: var(--text-3); font-size: var(--text-sm); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.static-foot a { color: var(--text-2); }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--text-2); }
.steps-list li::before { content: counter(step, arabic-indic); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* Offline */
.offline-hero { display: grid; justify-items: center; gap: var(--space-4); text-align: center; padding-block: var(--space-8) var(--space-6); }
.offline-hero .offline-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--accent); }
.offline-hero .offline-mark svg { width: 34px; height: 34px; }
.offline-hero p { color: var(--text-2); max-width: 48ch; }
.offline-hero .btn-row { justify-content: center; }
.offline-packs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.offline-pack { display: grid; gap: var(--space-3); padding: var(--space-5); }
.offline-pack h2 { font-size: var(--text-lg); }
.offline-pack p { color: var(--text-2); font-size: var(--text-sm); }
.offline-viewer { display: grid; gap: var(--space-4); }
.offline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.offline-controls .select { width: auto; min-width: 140px; }
.offline-sheet { margin: 0; border-radius: var(--radius-sheet); overflow: auto; background: #fff; border: 1px solid var(--line); max-height: 80dvh; }
.offline-sheet img { display: block; width: 100%; height: auto; }
.offline-sheet.is-zoomed img { width: 180%; max-width: none; }
.prose .notice-title { margin: 0 0 var(--space-2); padding: 0; border: 0; font-size: var(--text-lg); color: var(--text); }
.prose .notice div { display: grid; gap: var(--space-2); }