/* anom.app — what every page shares: the colours (light and dark), the base,
   the header (wordmark, language link, light/dark switch) and the footer.
   Light or dark: html[data-theme], set in the <head> from the visitor's own
   choice (the switch, remembered across pages) or else the phone's setting;
   without JavaScript the phone's setting still applies. Each page sets --font.
   The landing pages add /assets/landing.css; the others /assets/page.css. */

:root {
  color-scheme: light;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F3F3F5;
  --text: #111111;
  --text-2: #5F5F64;
  --text-3: #8A8A8F;
  --accent: #34C759;
  --accent-hover: #2BB14E;
  --accent-ink: #1E8C3E;              /* green for small text: readable on #FAFAFA */
  --accent-soft: rgba(52, 199, 89, 0.10);
  --accent-line: rgba(52, 199, 89, 0.45);
  --border: rgba(17, 17, 17, 0.08);
  --border-strong: rgba(17, 17, 17, 0.14);
  --error: #D70015;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1120px;
  --gutter: 20px;
  --radius: 20px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111111;
  --surface: #1B1B1D;
  --surface-2: #242427;
  --text: #FAFAFA;
  --text-2: #ABABB0;
  --text-3: #7D7D82;
  --accent-ink: #34C759;
  --accent-soft: rgba(52, 199, 89, 0.14);
  --accent-line: rgba(52, 199, 89, 0.5);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --error: #FF6961;
}
/* no JavaScript: the phone decides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #111111;
    --surface: #1B1B1D;
    --surface-2: #242427;
    --text: #FAFAFA;
    --text-2: #ABABB0;
    --text-3: #7D7D82;
    --accent-ink: #34C759;
    --accent-soft: rgba(52, 199, 89, 0.14);
    --accent-line: rgba(52, 199, 89, 0.5);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --error: #FF6961;
  }
  :root:not([data-theme]) .only-light { display: none !important; }
  :root:not([data-theme]) .brand-mark.only-dark { display: block; }
  :root:not([data-theme]) .badge .only-dark { display: inline; }
}
/* the theme's own images: the wordmark and the store badges */
img.only-dark, .brand-mark.only-dark { display: none; }
[data-theme="dark"] .only-light { display: none !important; }
[data-theme="dark"] .brand-mark.only-dark { display: block; }
[data-theme="dark"] .badge .only-dark { display: inline; }

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The forms' honeypot (the waitlist and delete-account forms): never seen, not
   tab-reachable; clipped where it stands. (Parked 10,000 px to the left, it
   made an Arabic page 10,000 px wide: a right-to-left page scrolls to the left.) */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -200px; background: var(--surface); border: 1px solid var(--border-strong); padding: 8px 14px; border-radius: 10px; z-index: 10; text-decoration: none; }
.skip:focus { top: 12px; }

/* Arabic: letter-spacing breaks the joining of letters. */
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] body { font-size: 18px; line-height: 1.7; }

/* ── Header: the wordmark with its pulsing dot ── */
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; gap: 16px; }
.brand { position: relative; display: flex; align-items: center; text-decoration: none; color: var(--text); flex-shrink: 0; }
.brand-mark { height: 55px; width: auto; aspect-ratio: 512 / 172; max-width: 440px; object-fit: contain; display: block; }
.brand-status-dot {
  position: absolute; top: 33%; left: 87%;
  width: 8px; height: 8px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.22);
  opacity: 0; transition: opacity 260ms ease; pointer-events: none;
}
.brand.is-loaded .brand-status-dot { opacity: 1; animation: anom-pulse 1.4s linear infinite; }
/* The app's pulse (AnomWordmark), for every pulsing dot on the site (this one
   and the landing page's status dot): 1 → 0.3 in 700 ms, back to 1 in 700 ms, each
   with Animated.timing's easing, Easing.inOut(Easing.ease). inOut runs
   ease = cubic-bezier(0.42, 0, 1, 1) over the first half of each fade and its
   mirror, cubic-bezier(0, 0, 0.58, 1), over the second: four quarters, exact. */
@keyframes anom-pulse {
  0%   { opacity: 1;    animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  25%  { opacity: 0.65; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  50%  { opacity: 0.3;  animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  75%  { opacity: 0.65; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { opacity: 1; }
}
.nav-links { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--text-2); text-decoration: none; transition: color 0.18s var(--easing); }
.nav-links a:hover { color: var(--text); }
.nav-links .nav-section { display: none; }
.theme-toggle {
  display: inline-flex; align-items: center; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-2); background: transparent; border: 1px solid var(--border-strong);
  border-radius: 100px; padding: 6px 12px 6px 10px; cursor: pointer; line-height: 1.2;
  transition: color 0.18s var(--easing), border-color 0.18s var(--easing);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-3); }
.theme-toggle > span { display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle .to-light { display: none; }
[data-theme="dark"] .theme-toggle .to-dark { display: none; }
[data-theme="dark"] .theme-toggle .to-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .to-dark { display: none; }
  :root:not([data-theme]) .theme-toggle .to-light { display: inline-flex; }
}
[dir="rtl"] .theme-toggle { padding: 6px 10px 6px 12px; font-size: 15px; }
[dir="rtl"] .nav { direction: ltr; }             /* the wordmark stays on the left, as before */
[dir="rtl"] .nav-links { direction: rtl; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding-block: 36px 44px; display: grid; gap: 18px; }
.footer-slogan { font-weight: 700; font-size: 17px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.footer-links a { color: var(--text-2); text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--text); }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --gutter: 32px; }
  .nav { padding-block: 24px; }
  .nav-links { gap: 22px; }
  .brand-mark { height: 70px; max-width: 540px; }
  .brand-status-dot { width: 10px; height: 10px; box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.22); }
  .footer { grid-template-columns: 1fr auto; align-items: center; }
}

/* ── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 980px) {
  .nav-links .nav-section { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}