/* ==========================================================================
   AMS Labs — site layer.

   theme.css is the committed Violet Pulse system, copied verbatim from
   BrandIdentity/ams-labs-theme.css. Do not edit it here: a newer theme should
   drop straight in. Everything this particular surface needs on top of it
   lives in this file, and every block below says why it exists.

   Load order:  theme.css  then  brand.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faces, self-hosted.

   The theme's header comment loads these from fonts.googleapis.com. This site
   serves them itself instead, so a reader opening the privacy policy does not
   have their IP sent to a third party by the page that explains what data the
   app shares. Same faces, same weights — delivery only.

   All three are variable fonts: one file per subset carries every weight, so
   each @font-face declares a weight range rather than a single value.

   Cairo is a third face, which the Two Faces Rule in DESIGN.md forbids. The
   rule was written for a Latin-only reference page; this site is Arabic-first,
   and neither Hanken Grotesk nor Montserrat draws a single Arabic glyph. The
   amendment is deliberate and recorded — see docs/adr/0003.

   Cairo claims only the Arabic range, so Latin text never reaches it and the
   Latin faces keep their jobs exactly as the rule intends. Script routing is
   done by unicode-range, not by per-element font switching.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Cairo sits behind each Latin face rather than beside it. A Latin glyph is
     claimed by Hanken or Montserrat first; an Arabic glyph finds no Latin face
     that claims it and falls through to Cairo automatically. */
  --ams-font-display: "Hanken Grotesk", "Cairo", "Segoe UI", system-ui, sans-serif;
  --ams-font-body: "Montserrat", "Cairo", "Segoe UI", system-ui, sans-serif;

  /* The brand field this surface paints its hero and nav with. Primary sits
     1.14:1 from the dark page ground, so on dark it lifts one ramp step —
     the rule DESIGN.md states and the reason the hero stays visible at all. */
  --site-brand-field: var(--ams-primary);

  /* Arabic ascenders and descenders need more room than Latin at the same
     size; Cairo set at the theme's Latin line-heights crowds itself. */
  --site-leading-arabic: 1.9;
}

:root[data-theme="dark"] { --site-brand-field: var(--ams-primary-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --site-brand-field: var(--ams-primary-500); }
}

/* --------------------------------------------------------------------------
   2. Right-to-left.

   The theme carries seven physical-direction properties and no logical ones,
   because it was authored for a left-to-right reference page. This site is
   Arabic-first and RTL by decision, so each of those is restated logically.
   Overriding here rather than editing theme.css keeps a newer theme droppable.
   -------------------------------------------------------------------------- */

ul, ol {
  padding-left: 0;
  padding-inline-start: 1.15em;
}

.ams-table th,
.ams-table td { text-align: start; }
.ams-table th:first-child,
.ams-table td:first-child { padding-left: var(--ams-space-3); padding-inline-start: 0; }
.ams-table th:last-child,
.ams-table td:last-child { padding-right: var(--ams-space-3); padding-inline-end: 0; }

.ams-select { padding-right: 0.75rem; padding-inline-end: 2.25rem; }

/* --------------------------------------------------------------------------
   3. Page frame
   -------------------------------------------------------------------------- */

body {
  line-height: var(--site-leading-arabic);
  caret-color: var(--ams-accent);
}
[lang="en"] { line-height: var(--ams-leading-body); }

.site-skip {
  position: absolute;
  inset-inline-start: var(--ams-space-4);
  top: -100%;
  z-index: 10;
  background: var(--ams-accent-650);
  color: var(--ams-neutral-light);
  padding: var(--ams-space-3) var(--ams-space-4);
  border-radius: var(--ams-radius-control);
  font: 500 var(--ams-text-sm) / 1 var(--ams-font-body);
  text-decoration: none;
}
.site-skip:focus { top: var(--ams-space-4); }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ams-space-4);
  background: var(--site-brand-field);
  padding: var(--ams-space-3) var(--ams-space-5);
}
.site-nav a { text-decoration: none; }
.site-nav__links {
  display: flex;
  gap: var(--ams-space-5);
  font: 500 var(--ams-text-sm) / 1 var(--ams-font-body);
}
.site-nav__links a {
  color: var(--ams-ink-on-brand-muted);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--ams-duration-1) var(--ams-ease),
              border-color var(--ams-duration-1) var(--ams-ease);
}
.site-nav__links a:hover { color: var(--ams-ink-on-brand); border-bottom-color: var(--ams-accent); }
.site-nav :focus-visible { outline: 2px solid var(--ams-focus-ring-on-brand); outline-offset: 3px; }

.site-lockup { display: inline-flex; align-items: center; gap: 0.6em; }
.site-lockup svg { width: 2.4em; height: auto; display: block; color: var(--ams-accent); }
.site-lockup span {
  font: 600 var(--ams-text-lg) / 1 var(--ams-font-display);
  letter-spacing: -0.014em;
  color: var(--ams-ink-on-brand);
}

.site-main { display: block; }

.site-wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: var(--ams-space-5);
}

/* --------------------------------------------------------------------------
   4. Hero — the brand field.

   Primary dominates; the mark is the only Accent in it. The field runs full
   bleed so the violet is a plane rather than a banner sitting in a box.
   -------------------------------------------------------------------------- */

.site-hero {
  background: var(--site-brand-field);
  color: var(--ams-ink-on-brand);
  padding-block: clamp(3rem, 9vw, var(--ams-space-9));
}
.site-hero__mark {
  width: clamp(56px, 9vw, 84px);
  height: auto;
  color: var(--ams-accent);
  display: block;
  margin-bottom: var(--ams-space-5);
}
.site-hero h1 {
  font: 700 clamp(2.1rem, 6vw, var(--ams-text-4xl)) / 1.25 var(--ams-font-display);
  letter-spacing: -0.022em;
  margin: 0 0 var(--ams-space-4);
  text-wrap: balance;
  color: var(--ams-ink-on-brand);
}
.site-hero p {
  max-width: 46ch;
  margin: 0;
  color: var(--ams-ink-on-brand-muted);
  font-size: var(--ams-text-lg);
}
.site-hero p + p { margin-top: var(--ams-space-3); }

/* The one authored moment. The default state is fully visible — the animation
   only exists inside the no-preference query, so a reader who asks for less
   motion gets the finished page rather than a hidden one. */
@media (prefers-reduced-motion: no-preference) {
  .site-hero__mark,
  .site-hero h1,
  .site-hero p {
    animation: site-rise var(--ams-duration-3) var(--ams-ease) both;
  }
  .site-hero h1 { animation-delay: 60ms; }
  .site-hero p { animation-delay: 110ms; }
}
@keyframes site-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. Sections and the language split.

   Both languages carry the full text: Arabic for the people who use the app,
   English for a Play reviewer checking the policy against the Data safety
   form. Rather than a toggle, the English half sits on the sunken surface so
   it reads as the same content restated, not as more content.
   -------------------------------------------------------------------------- */

.site-section { padding-block: var(--ams-space-8); }
.site-section--alt {
  background: var(--ams-surface-sunken);
  border-top: 1px solid var(--ams-border-subtle);
}

.site-section h2 {
  font: 700 var(--ams-text-2xl) / 1.3 var(--ams-font-display);
  letter-spacing: -0.022em;
  margin: 0 0 var(--ams-space-4);
  color: var(--ams-ink);
}
.site-section h2 + p { margin-top: 0; }
.site-section h3 {
  font: 600 var(--ams-text-xl) / 1.35 var(--ams-font-display);
  margin: var(--ams-space-7) 0 var(--ams-space-3);
  color: var(--ams-ink);
}
.site-section p, .site-section li { max-width: var(--ams-measure); }
.site-section > * + h2 { margin-top: var(--ams-space-8); }

.site-lede { font-size: var(--ams-text-lg); color: var(--ams-ink); }

/* --------------------------------------------------------------------------
   6. The app listing.

   One app today. A grid of equal cards would be a container pretending to be
   structure, so this is an editorial row: the name carries the weight, the
   state is a badge, and the whole row is the link.
   -------------------------------------------------------------------------- */

.site-apps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ams-space-4); }

.site-app {
  display: block;
  padding: var(--ams-space-5);
  background: var(--ams-surface-raised);
  border: 1px solid var(--ams-border-subtle);
  border-radius: var(--ams-radius-panel);
  box-shadow: var(--ams-shadow-1);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ams-duration-2) var(--ams-ease),
              box-shadow var(--ams-duration-2) var(--ams-ease),
              transform var(--ams-duration-2) var(--ams-ease);
}
.site-app:hover {
  border-color: var(--ams-primary-300);
  box-shadow: var(--ams-shadow-2);
}
@media (prefers-reduced-motion: no-preference) {
  .site-app:hover { transform: translateY(-2px); }
}
.site-app__head {
  display: flex;
  align-items: baseline;
  gap: var(--ams-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ams-space-2);
}
.site-app__name {
  font: 700 var(--ams-text-2xl) / 1.3 var(--ams-font-display);
  letter-spacing: -0.022em;
  color: var(--ams-ink);
}
.site-app__desc { color: var(--ams-ink-muted); margin: 0; max-width: 52ch; }
.site-app__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--ams-space-3);
  color: var(--ams-link);
  font: 500 var(--ams-text-sm) / 1 var(--ams-font-body);
}
.site-app:hover .site-app__more { color: var(--ams-link-hover); }
/* The chevron points the way the language runs, so it flips with direction. */
.site-app__more svg { width: 1em; height: 1em; }
[dir="rtl"] .site-app__more svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   7. Contact and inline pieces
   -------------------------------------------------------------------------- */

.site-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--ams-text-lg);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.site-contact svg { width: 1.05em; height: 1.05em; flex: none; }

.site-meta {
  color: var(--ams-ink-muted);
  font-size: var(--ams-text-sm);
}

.site-footer {
  background: var(--ams-surface-inset);
  border-top: 1px solid var(--ams-border-subtle);
  padding-block: var(--ams-space-6);
  color: var(--ams-ink-muted);
  font-size: var(--ams-text-sm);
}
.site-footer p { margin: 0; max-width: none; }
.site-footer a { color: var(--ams-ink-muted); }
.site-footer a:hover { color: var(--ams-link-hover); }

/* Policy pages run long; the list markers are the one place Accent appears at
   full strength in body text, which is legal because a marker is a mark. */
.site-prose ul { list-style: none; padding-inline-start: 0; }
.site-prose ul li {
  position: relative;
  padding-inline-start: 1.5em;
  margin-bottom: var(--ams-space-2);
}
.site-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: var(--ams-radius-control);
  background: var(--ams-accent);
}

.site-updated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ams-space-2) var(--ams-space-5);
  padding: var(--ams-space-4) 0 0;
  border-top: 1px solid var(--ams-border-subtle);
  margin-top: var(--ams-space-6);
  color: var(--ams-ink-muted);
  font-size: var(--ams-text-sm);
}

/* --------------------------------------------------------------------------
   8. Breakpoint. DESIGN.md's One Break Rule: 860px is where anything
   two-dimensional becomes one-dimensional. Nothing else changes structure.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .site-nav { padding-inline: var(--ams-space-4); }
  .site-nav__links { gap: var(--ams-space-4); }
  .site-wrap { padding-inline: var(--ams-space-4); }
  .site-section { padding-block: var(--ams-space-7); }
}

@media (max-width: 520px) {
  .site-nav { flex-wrap: wrap; gap: var(--ams-space-3); }
  .site-hero { padding-block: var(--ams-space-7); }
}

/* An LTR line inside an RTL hero rags against the Arabic above it. Sharing the
   right edge keeps one clean column while the text itself still runs LTR. */
[dir="rtl"] .site-hero__en { text-align: right; }