/*
 * Shared styling for the public legal and support pages.
 *
 * These three pages are the ones app stores and users read outside the app —
 * `privacy.html`, `terms.html`, `support.html` — so they are deliberately
 * plain: no fonts to fetch, no scripts required to read the text, and every
 * colour taken from the app's own palette (`lib/core/theme/app_colors.dart`)
 * so the page and the product look like the same thing.
 *
 * The language switch is progressive: with JavaScript off, both languages
 * render stacked, which is correct-but-long rather than broken.
 */

:root {
  color-scheme: light dark;

  --bg: #fafaf8;
  --surface: #fefdfe;
  --surface-2: #f3f5f2;
  --primary: #3c8a7b;
  --primary-tint: #dff5ef;
  --text: #202124;
  --text-secondary: #5f6b68;
  --border: #e3e7e3;
  --note-bg: #f5ecd4;
  --note-border: #e0cda2;
  --note-text: #6d4f11;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1c19;
    --surface: #17251f;
    --surface-2: #1f2f29;
    --primary: #6fcbb6;
    --primary-tint: #1c332c;
    --text: #e8efeb;
    --text-secondary: #9aaba4;
    --border: #2b3c36;
    --note-bg: #2c2517;
    --note-border: #4a3d20;
    --note-text: #e0bd6c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
}

.page { max-width: 720px; margin: 0 auto; }

/* Masthead ---------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--border);
}

.mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--primary-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.masthead .wordmark { font-size: 17px; font-weight: 700; }
.masthead .tagline { font-size: 13px; color: var(--text-secondary); }

.langbar { margin-inline-start: auto; display: flex; gap: 6px; }

.langbar button {
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}

.langbar button.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
  font-weight: 600;
}

.langbar button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Document ---------------------------------------------------------------- */

.doc { padding-top: 28px; }
.doc[hidden] { display: none; }

.doc h1 { font-size: 27px; line-height: 1.35; margin: 0 0 6px; }

.doc .updated {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--text-secondary);
}

.doc h2 {
  font-size: 19px;
  margin: 36px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.doc h2:first-of-type { border-top: none; padding-top: 0; }

.doc h3 { font-size: 15px; margin: 22px 0 6px; color: var(--primary); }

.doc p { margin: 0 0 14px; }

.doc ul { margin: 0 0 16px; padding-inline-start: 22px; }
.doc li { margin-bottom: 8px; }

.doc a { color: var(--primary); }

.doc strong { font-weight: 600; }

/* A definition-style row for "what we collect" and "who we share with". */
.rows { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.rows > div { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.rows > div:last-child { border-bottom: none; }
.rows b { display: block; font-size: 15px; margin-bottom: 2px; }
.rows span { display: block; font-size: 14.5px; color: var(--text-secondary); line-height: 1.75; }

/* Something the reader must act on, or that we must not bury. */
.note {
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  color: var(--note-text);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 15px;
}

.note b { display: block; margin-bottom: 2px; }

/* Contact card on the support page. */
.contact { display: grid; gap: 12px; margin-bottom: 22px; }

.contact a,
.contact div.item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}

.contact a:hover { border-color: var(--primary); }
.contact .icon { font-size: 19px; flex: none; }
.contact .label { font-size: 13px; color: var(--text-secondary); display: block; }
.contact .value { font-size: 15.5px; font-weight: 600; }
.contact .value.ltr { direction: ltr; unicode-bidi: isolate; }

footer {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

footer a { color: var(--primary); }

@media (max-width: 520px) {
  body { font-size: 15.5px; }
  .doc h1 { font-size: 23px; }
  .langbar { margin-inline-start: 0; width: 100%; }
}