/*
 * kasht.app — the one stylesheet.
 *
 * Mobile-first, Arabic-first. Direction-neutral: every box uses logical
 * properties (margin-inline, padding-inline, border-block, inset-inline), so
 * the Arabic (rtl) and English (ltr) sections share every rule.
 *
 * Colours are Kasht's brand tokens, copied from
 * apps/mobile/src/theme/tokens.ts (PALETTES.light / PALETTES.dark). If the
 * app's palette moves, move these with it.
 *
 * NO external resources: the font is self-hosted (Readex Pro, SIL OFL 1.1,
 * see fonts/OFL.txt) and the page's CSP allows only same-origin styles,
 * fonts and images. A privacy page must not hand its visitors to a CDN.
 */

@font-face {
  font-family: "Readex Pro";
  src: url("fonts/ReadexPro_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Readex Pro";
  src: url("fonts/ReadexPro_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Light: PALETTES.light */
:root {
  color-scheme: light dark;
  --bg: #f5f1e8;          /* bg */
  --line: #ded7c7;        /* line */
  --ink: #23211d;         /* ink */
  --dim: #726b62;         /* dim: 4.7:1 on bg */
  --accent: #c07e17;      /* accent (fills and marks only, never text) */
  --accent-text: #8f5d0e; /* accentText: 5.0:1 on bg */
  --accent-soft: #f3e6ce; /* accentSoftSolid */
  --accent-line: #e0cba0; /* accentLine */
  --surface: #fffdf8;     /* surface: raised cards (dim is 5.2:1 on it) */
  --on-accent: #23211d;   /* onAccent: INK on the accent, 4.8:1 (never white) */
}

/* Dark: PALETTES.dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d0e;
    --line: #23282b;
    --ink: #e4ded2;
    --dim: #8b857a;
    --accent: #e8a33d;
    --accent-text: #e8a33d;
    --accent-soft: #2e271b; /* accentSoftSolid (accentSoft made opaque) */
    --accent-line: rgba(232, 163, 61, 0.32);
    --surface: #101315;
    --on-accent: #17130b;   /* 8.6:1 on the accent */
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma,
    "Noto Sans Arabic", Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  /* Arabic needs the air: tall ascenders, dots and tashkeel. */
  line-height: 1.9;
  overflow-wrap: break-word;
}

/* Latin sets tighter than Arabic. */
:lang(en) {
  line-height: 1.65;
}

/* ---- Top bar: the language switch -------------------------------------- */

.bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}

.lang {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block: 0.5rem;
  padding-inline: 1rem;
}

.lang a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem; /* 44px touch target */
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
}

.lang a:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* ---- Reading column ---------------------------------------------------- */

main {
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block: 2rem 4rem;
  padding-inline: 1rem;
}

section {
  /* Clear the sticky bar when a #ar / #en jump lands. */
  scroll-margin-block-start: 4.5rem;
}

section + section {
  margin-block-start: 3rem;
  padding-block-start: 2.5rem;
  border-block-start: 1px solid var(--line);
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.5;
}

h1 {
  font-size: 1.625rem;
  margin-block: 0 0.75rem;
}

h2 {
  font-size: 1.25rem;
  margin-block: 2.25rem 0.5rem;
}

h3 {
  font-size: 1.0625rem;
  margin-block: 1.75rem 0.25rem;
}

:lang(en) :is(h1, h2, h3) {
  line-height: 1.3;
}

p,
ul,
ol,
dl,
table,
address {
  margin-block: 0 1rem;
}

ul,
ol {
  padding-inline-start: 1.5rem;
}

li + li {
  margin-block-start: 0.25rem;
}

dt {
  font-weight: 600;
}

dd {
  margin-inline-start: 0;
  margin-block-end: 0.75rem;
}

address {
  font-style: normal;
}

strong,
b {
  font-weight: 600; /* the heaviest face shipped: no synthetic bold */
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: 2rem;
}

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

th {
  font-weight: 600;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* ---- Placeholders ------------------------------------------------------ */

/* The effective-date line stays out of the layout until it has content. */
.effective {
  color: var(--dim);
  font-size: 0.9375rem;
  margin-block: 0 1.5rem;
}

.effective:empty {
  display: none;
}

.notice {
  margin-block: 1rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 0.625rem;
}

/* ---- Focus: always visible, on every interactive element --------------- */

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}

/* ---- Wider screens ----------------------------------------------------- */

@media (min-width: 48rem) {
  main {
    padding-block: 3rem 5rem;
  }

  h1 {
    font-size: 2rem;
  }
}

/* ======================================================================
 * The account pages: /confirmed/, /reset/, /delete/, /delete/link/
 * (Stage 1 step 5). Same tokens and rules as above: logical properties
 * only, both colour schemes, no motion. One column at most 34rem wide.
 * Arabic first; the English of each heading, label, button and message sits
 * directly under it (.en, smaller, dim — 4.7:1 on the page, 5.2:1 on a card).
 * Buttons are at least 48px high; focus is always visible (above); no state
 * is told by colour alone (every state is also words); nothing is red.
 * ==================================================================== */

/* An element the page hides stays hidden whatever its class says. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.account main {
  max-inline-size: 34rem;
  padding-block: 1.5rem 3rem;
}

.brandbar {
  border-block-end: 1px solid var(--line);
}

.brand {
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block: 0;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  color: var(--accent-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The English line under each Arabic piece. */
.en {
  display: block;
  color: var(--dim);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

.account h1 .en {
  font-size: 1rem;
  margin-block-start: 0.125rem;
}

.account h2 {
  font-size: 1.125rem;
  margin-block: 0 0.75rem;
}

.account h2 .en {
  font-size: 0.875rem;
}

.account h3 {
  margin-block: 1.25rem 0.25rem;
}

.account li .en,
.account p > .en {
  margin-block-start: 0.125rem;
}

.card {
  margin-block: 1.25rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
}

.card > :last-child {
  margin-block-end: 0;
}

.step {
  margin-block: 1.5rem;
}

/* ---- Fields ------------------------------------------------------------ */

.field {
  margin-block: 0 1rem;
}

.field label {
  display: block;
  margin-block-end: 0.375rem;
  font-weight: 600;
}

.field input {
  display: block;
  inline-size: 100%;
  min-block-size: 3rem;
  padding-block: 0.5rem;
  padding-inline: 0.875rem;
  /* 3:1 or better against the page: the field's edge must be seen. */
  border: 1px solid var(--dim);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.field input[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--accent-text);
}

.hint {
  margin-block: 0.375rem 0;
  color: var(--dim);
  font-size: 0.875rem;
}

.field-error {
  display: block;
  margin-block-start: 0.375rem;
  padding-inline-start: 0.625rem;
  border-inline-start: 3px solid var(--accent-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-block: 1rem;
}

.check input {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: 0.35rem;
  accent-color: var(--accent);
}

.check label {
  font-weight: 600;
  cursor: pointer;
}

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3rem;
  margin-block: 0.75rem 0;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border: 1px solid var(--dim);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}

.btn .en {
  color: inherit;
  font-size: 0.8125rem;
}

/* The one main action of a step: ink on the accent (the app's onAccent). */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-google {
  flex-direction: row;
  gap: 0.75rem;
}

.btn-google img {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.btn-google .labels {
  display: flex;
  flex-direction: column;
}

.countdown {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* A text button (the deletion-link disclosure). */
.linkish {
  display: block;
  min-block-size: 3rem;
  margin-block: 1rem 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-align: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.linkish .en {
  color: var(--accent-text);
}

.or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1rem;
  color: var(--dim);
  font-size: 0.875rem;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--line);
}

/* ---- Messages: #status (role=status) and #alert (role=alert) ---------- */

.msg {
  margin-block: 1rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: 0.625rem;
}

.msg:empty {
  display: none;
}

.msg-alert {
  border-inline-start-width: 8px;
  border-inline-start-color: var(--accent-text);
}

.msg p {
  margin: 0;
}

.msg p + p {
  margin-block-start: 0.625rem;
}

.msg-link {
  display: inline-block;
  margin-block-start: 0.25rem;
  font-weight: 600;
}

.msg:focus {
  outline: none;
}

.msg:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
  border-block-start: 1px solid var(--line);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  max-inline-size: 34rem;
  margin-inline: auto;
  padding-block: 1rem 2rem;
  padding-inline: 1rem;
  font-size: 0.9375rem;
}

.site-footer a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 2.75rem;
}

.site-footer a .en {
  color: inherit;
}

/* An email address shown to the person (the confirm step): its own line,
   left-to-right, never broken in the middle of a word part. */
.addr {
  display: block;
  margin-block-start: 0.375rem;
  font-weight: 600;
  text-align: end;
  overflow-wrap: anywhere;
}

/* ======================================================================
 * The reading pages: / (home), /privacy/, /terms/ (Stage 1 step 6).
 * No scripts. <body class="doc">; the column is main's 40rem, both
 * languages in one page (Arabic section first). Same tokens and rules as
 * above: logical properties only, both colour schemes, no motion.
 * ==================================================================== */

/* Every heading a link can land on clears the sticky language bar. */
.doc [id] {
  scroll-margin-block-start: 4.5rem;
}

.doc .site-footer nav {
  max-inline-size: 40rem;
}

.site-footer a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}

/* A placeholder the owner still has to fill (the company's legal name, the
   hosting region …): marked, and never published
   (scripts/site/test/publish-guard.test.mjs). */
mark.placeholder {
  padding-inline: 0.25em;
  border-radius: 0.25rem;
  background: var(--accent-soft);
  outline: 1px dashed var(--accent-text);
  color: var(--ink);
  font-weight: 600;
  unicode-bidi: isolate;
}

/* The draft banner (removed when the owner approves the text). */
.draft {
  font-weight: 600;
}

/* Contents: one link per section, each a comfortable target. */
.toc {
  margin-block: 1.5rem 2rem;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
}

.toc h2 {
  margin-block: 0 0.25rem;
  font-size: 1rem;
}

.toc ol {
  margin: 0;
  padding-inline-start: 1.5rem;
}

.toc li + li {
  margin-block-start: 0;
}

.toc a {
  display: inline-block;
  padding-block: 0.3rem;
}

.doc .card ul {
  margin-block-end: 0;
}

/* How long we keep data: term over value, a line between entries. */
.retention > div {
  padding-block: 0.75rem;
  border-block-start: 1px solid var(--line);
}

.retention > div:last-child {
  border-block-end: 1px solid var(--line);
}

.retention dd {
  margin-block-end: 0;
}

/* The homepage. */
.hero {
  margin-block: 0 1.5rem;
}

.hero-mark {
  display: block;
  inline-size: 2.5rem;
  block-size: auto;
  margin-block-end: 0.75rem;
}

.hero h1 {
  margin-block-end: 0.25rem;
}

.tagline {
  margin-block: 0;
  color: var(--dim);
  font-size: 1.125rem;
}

/* Until the store listing exists: a quiet placeholder, not Google's badge. */
.store-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 3rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  border: 1px dashed var(--dim);
  border-radius: 0.75rem;
  color: var(--dim);
  font-weight: 600;
}

.features li + li {
  margin-block-start: 0.5rem;
}

.provider {
  margin-block-start: 2rem;
  color: var(--dim);
  font-size: 0.9375rem;
}