/* ShareAyah stylesheet: the approved mockup (phone first, then desktop) on the brand tokens. Logical properties only
   (inline-start/end, inline-size, block-size), so Arabic mirrors: chips flow right to left, bars fill from the right. */
@font-face { font-family: "Lora"; src: url("fonts/Lora.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("fonts/NotoKufiArabic-Medium.ttf") format("truetype"); font-display: swap; }

:root {
  --sa-night: #0d1117;
  --sa-dusk: #171d26;
  --sa-gold: #eacb6c;   /* the recited word only, never interface chrome */
  --sa-mist: #eeeeee;
  --sa-stone: #98a2ae;
  --sa-paper: #efe9dc;
  --sa-line: #2a323e;
  --sa-soft: #c9d0d8;
  --sa-faint: #7d8794;
  --sa-font-en: "Lora", Georgia, serif;
  --sa-font-ar: "Noto Kufi Arabic", "Geeza Pro", sans-serif;
  --sa-gutter: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--sa-night); color: var(--sa-mist); font-family: var(--sa-font-en); -webkit-text-size-adjust: 100%; }
html[lang="ar"] { font-family: var(--sa-font-ar); }

body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sa-night);
  text-align: start;
  overflow-wrap: anywhere;
}

a { color: var(--sa-mist); }
button { font: inherit; cursor: pointer; color: inherit; }
/* mist, never gold: gold is the recited word only */
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--sa-mist); outline-offset: 3px; }
button[aria-disabled="true"] { cursor: default; }

/* header: the mark and name at the start, the language switch at the end */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 22px 0;
  padding-inline: var(--sa-gutter);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 19px; font-weight: 500; color: var(--sa-mist); }
.mark { inline-size: 26px; block-size: 26px; flex: none; }
.lang-switch {
  margin-inline-start: auto;
  min-block-size: 36px;
  padding-block: 6px;
  padding-inline: 14px;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  background: none;
  color: var(--sa-stone);
  font-size: 13px;
}
.lang-switch span:lang(ar) { font-family: var(--sa-font-ar); }
.lang-switch span:lang(en) { font-family: var(--sa-font-en); }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav .lang-switch { margin-inline-start: 0; }
.about-link {
  min-block-size: 36px;
  padding-block: 6px;
  padding-inline: 10px;
  border: 0;
  background: none;
  color: var(--sa-stone);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--sa-line);
  text-underline-offset: 4px;
}
.about-link:hover { color: var(--sa-mist); }

/* About the sources: a calm modal on dusk, mist text, no gold (that is the recited word's). It scrolls inside, so a
   phone never loses its last section, and the page behind does not move. */
.about {
  inline-size: min(560px, calc(100% - 32px));
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--sa-line);
  border-radius: 18px;
  background: var(--sa-dusk);
  color: var(--sa-mist);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.about[open] { display: flex; flex-direction: column; }
.about::backdrop { background: rgba(13, 17, 23, 0.78); }
body:has(.about[open]) { overflow: hidden; }
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px 12px; padding-inline: 22px; }
.about-head h2 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
.about-close { flex: none; min-block-size: 44px; padding-inline: 18px; font-size: 14px; }
.about-body { overflow-y: auto; padding-block: 4px 22px; padding-inline: 22px; overscroll-behavior: contain; }
.about-body section + section { margin-block-start: 22px; }
.about h3 { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sa-stone); }
.about:lang(ar) h3 { letter-spacing: 0; text-transform: none; font-size: 13px; }
.about p, .about li { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sa-soft); }
.about p + p { margin-block-start: 8px; }
.about ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.about a { color: var(--sa-mist); text-underline-offset: 3px; }
/* the contact: the name and the address (a mailto link, mist like the dialog's other link: never gold) */
.about .contact { margin-block-start: 10px; overflow-wrap: anywhere; }

.stage { flex: 1; display: flex; flex-direction: column; padding-inline: var(--sa-gutter); }

/* The screens: home (intro), making, ready, failed. On a phone one at a time: home is the intro alone, then the card
   (the steps inside it while making, the reel on ready) with its actions under it. */
.intro, .ready, .failed { display: flex; flex-direction: column; }
.intro, .failed { flex: 1; }
body:not([data-screen="home"]) .intro { display: none; }
body[data-screen="home"] .card, body[data-screen="failed"] .card { display: none; }
body[data-screen="making"] .card { flex: 1; justify-content: center; padding-block: 0 20px; }

.intro { justify-content: center; gap: 34px; padding-block: 0 40px; padding-inline: 4px; }
.lede { display: flex; flex-direction: column; gap: 14px; }
h1 { margin: 0; font-size: 38px; line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
html[lang="ar"] h1 { letter-spacing: 0; line-height: 1.4; }
.lede p { margin: 0; color: var(--sa-stone); font-size: 16px; line-height: 1.55; }

.feeling { display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sa-stone); }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 13px; }
.feelings { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-block-size: 40px;
  padding-block: 0;
  padding-inline: 16px;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sa-soft);
  font-size: 14px;
}
.chip[aria-pressed="true"] { background: var(--sa-mist); border-color: var(--sa-mist); color: var(--sa-night); }

.primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 62px;
  padding-inline: 24px;
  border: 0;
  border-radius: 16px;
  background: var(--sa-mist);
  color: var(--sa-night);
  font-size: 18px;
  font-weight: 500;
}
.secondary {
  min-block-size: 50px;
  padding-inline: 12px;
  border: 1px solid var(--sa-line);
  border-radius: 14px;
  background: var(--sa-dusk);
  color: var(--sa-mist);
  font-size: 15px;
}
.secondary[aria-disabled="true"] { color: var(--sa-faint); }

.notice { margin: 0; color: var(--sa-stone); font-size: 13px; line-height: 1.5; text-align: center; }
.intro .notice { text-align: start; }

/* the card: one reel frame on every screen. Home: the muted sample reel (desktop and tablet); making: the steps over
   it; ready: the reel. The caption names what plays. */
.card { margin: 0; padding-block: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.frame {
  position: relative;
  inline-size: min(276px, 70vw, calc((100dvh - 360px) * 9 / 16));
  min-inline-size: 180px;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--sa-line);
}
.frame { isolation: isolate; }
.frame canvas { position: relative; display: block; inline-size: 100%; block-size: 100%; }
.frame .plate { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; opacity: 0; pointer-events: none; }
/* the sample's poster under its canvas; the canvas fades in over it once it has drawn a frame that is not black */
.poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
#sample { opacity: 0; transition: opacity 0.6s ease-out; }
#sample.lit { opacity: 1; }
body[data-screen="ready"] .poster { display: none; }
body[data-screen="failed"] .frame::after { content: ""; position: absolute; inset: 0; background: rgba(13, 17, 23, 0.8); }
body[data-screen="ready"] #sample, body:not([data-screen="ready"]) #reel { display: none; }

/* the ready reel's controls: one strip over its bottom edge (the reel keeps its bottom fifth clear), on a soft shade so
   the mist icons read over any footage. Play/pause/replay, the progress, the sound. The strip is dir=ltr in both
   languages, like the reel canvas: it shows time, which runs left to right (the media-control convention), while
   everything around it mirrors. Mist focus ring: gold is the recited word's. */
.controls {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-block: 28px 6px;
  padding-inline: 6px;
  background: linear-gradient(to top, rgba(13, 17, 23, 0.62), rgba(13, 17, 23, 0));
}
body:not([data-screen="ready"]) .controls, body:not([data-screen="ready"]) .hint { display: none; }
.ctl {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sa-mist);
  -webkit-tap-highlight-color: transparent;
}
.ctl svg { display: none; inline-size: 22px; block-size: 22px; }
.ctl:hover { background: rgba(238, 238, 238, 0.12); }
.ctl:active { background: rgba(238, 238, 238, 0.2); }
.ctl:focus-visible { outline: 2px solid var(--sa-mist); outline-offset: -3px; }
.controls[data-state="playing"] .i-pause, .controls[data-state="paused"] .i-play, .controls[data-state="ended"] .i-replay,
.controls[data-sound="on"] .i-on, .controls[data-sound="off"] .i-off { display: block; }
.controls .bar { flex: 1; block-size: 3px; margin-inline: 6px; border-radius: 2px; background: rgba(238, 238, 238, 0.28); overflow: hidden; }
.bar > span { display: block; block-size: 100%; inline-size: 0; background: var(--sa-mist); }
body[data-screen="ready"] #reel { cursor: pointer; }
/* "Tap for sound": while the reel plays muted (made on open, no tap yet), a bright pill in the progress bar's place, in
   the strip over the reel's bottom fifth (never over the ayah). Mist on night like the primary button, never gold. It
   reads in the page's language (the strip itself is ltr). */
.tap-sound {
  flex: 1;
  min-inline-size: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  block-size: 38px;
  margin-inline: 4px;
  padding-inline: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--sa-mist);
  color: var(--sa-night);
  font-size: 14px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  animation: sa-fade 0.4s ease-out;
}
html[lang="ar"] .tap-sound { direction: rtl; }
.tap-sound svg { flex: none; inline-size: 18px; block-size: 18px; }
.tap-sound span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tap-sound:focus-visible { outline: 2px solid var(--sa-mist); outline-offset: 2px; }
.controls[data-quiet="true"] .tap-sound { display: flex; }
.controls[data-quiet="true"] .bar { display: none; }
/* the silent hint: under the reel, in the caption's place while it shows (the reel's text is never covered, whatever
   the phone's height); a quiet pill, mist on dusk */
.hint {
  max-inline-size: 300px;
  margin: 0;
  padding-block: 7px;
  padding-inline: 14px;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: var(--sa-dusk);
  color: var(--sa-mist);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.card:has(.hint:not([hidden])) .caption { display: none; }
.caption { min-block-size: 1.5em; color: var(--sa-stone); font-size: 13px; line-height: 1.5; text-align: center; text-wrap: balance; }
.caption .who, .caption bdi { white-space: nowrap; }   /* the ref never breaks inside "94:5–6" */
body[data-screen="making"] .caption { visibility: hidden; }

/* making: over the card, the mark turning slowly and the steps ticking */
.making:focus { outline: none; }   /* focused on each making screen (announced), not a control: no ring */
.making {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding-inline: 18px;
  background: rgba(13, 17, 23, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.spin { inline-size: 64px; block-size: 64px; color: var(--sa-mist); animation: sa-spin 2.4s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #4a5260; }
.steps li.now { color: var(--sa-mist); }
.steps li.done { color: var(--sa-stone); }
.tick { inline-size: 18px; flex: none; text-align: center; }
.steps li.now .tick::before { content: "\00B7"; }
.steps li.done .tick::before { content: "\2713"; }

/* ready: Share, then Save video and Copy link, the feelings, Another ayah; all under the reel on a phone */
.ready { align-items: center; padding-block: 18px 22px; animation: sa-fade 0.5s ease-out; }
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }
.actions { inline-size: 100%; max-inline-size: 420px; display: flex; flex-direction: column; gap: 10px; }
.share { min-block-size: 58px; font-size: 17px; overflow: hidden; isolation: isolate; }
.share svg { inline-size: 20px; block-size: 20px; }
/* Share: preparing (dark, a turning ring, "Preparing… 40%", a mist bar filling along its bottom from the start side)
   -> ready (the bright primary, the share icon) -> shared (a tick); the label never wraps, its digits never jitter.
   waiting (the recorder path before any tap: nothing is being made, a tap starts it): plain Share with its icon */
.share .label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.share svg { display: none; flex: none; }
.share[data-state="preparing"] .i-wait { display: block; animation: sa-spin 1.1s linear infinite; }
.share[data-state="ready"] .i-share, .share[data-state="waiting"] .i-share, .share[data-state="failed"] .i-share, .share[data-state="shared"] .i-done { display: block; }
.share .fill {
  position: absolute;
  inset-block-end: 7px;
  inset-inline-start: 16px;
  block-size: 2px;
  inline-size: calc((100% - 32px) * var(--done, 0));
  border-radius: 2px;
  background: var(--sa-mist);
  transition: inline-size 0.3s linear;
}
.share[data-state="preparing"] { gap: 8px; padding-inline: 14px; }
.share[aria-disabled="true"], .share[data-state="waiting"] { background: var(--sa-dusk); color: var(--sa-mist); box-shadow: inset 0 0 0 1px var(--sa-line); }
.share[data-state="failed"] { color: var(--sa-faint); }
.share[data-state="ready"] { animation: sa-arm 0.45s ease-out; }
@keyframes sa-arm { from { transform: scale(0.97); } to { transform: none; } }
.give[aria-disabled="true"] { background: var(--sa-dusk); color: var(--sa-faint); box-shadow: inset 0 0 0 1px var(--sa-line); cursor: default; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.again { flex-wrap: nowrap; justify-content: safe center; gap: 6px; margin-block-start: 6px; overflow-x: auto; scrollbar-width: none; }
.again::-webkit-scrollbar { display: none; }
.again .chip { flex: none; min-block-size: 36px; padding-inline: 13px; font-size: 13px; }

.failed { align-items: center; justify-content: center; gap: 22px; padding-block: 0 60px; }
.failed .primary { min-inline-size: 220px; }


/* tablet and desktop: two columns on every screen, the intro on the start side and the card beside it, so nothing
   moves between home and ready. The intro stays in view (its feelings too); its Give button steps aside on ready,
   where Another ayah sits with the actions. */
@media (width >= 720px) and (height >= 600px) {
  .top, .stage { inline-size: 100%; max-inline-size: 1160px; margin-inline: auto; padding-inline: 32px; }
  .top { padding-block-start: 28px; }
  .brand { font-size: 21px; gap: 10px; }
  .mark { inline-size: 30px; block-size: 30px; }
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(200px, auto);   /* the actions' row kept on home too: the card stays put */
    align-content: center;
    align-items: center;
    column-gap: 48px;
    row-gap: 22px;
    padding-block: 24px;
  }
  body:not([data-screen="home"]) .intro { display: flex; }
  body[data-screen="home"] .card, body[data-screen="failed"] .card { display: flex; }
  .intro { grid-column: 1; grid-row: 1 / span 2; min-inline-size: 0; gap: 30px; padding: 0; }
  .card, body[data-screen="making"] .card { grid-column: 2; grid-row: 1; padding: 0; }
  .ready, .failed { grid-column: 2; grid-row: 2; align-self: start; padding: 0; }
  h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.015em; }
  .lede { gap: 16px; }
  .lede p { max-inline-size: 440px; font-size: 17px; line-height: 1.6; }
  .give { align-self: flex-start; min-block-size: 60px; padding-inline: 34px; font-size: 17px; }
  body:not([data-screen="home"]) .give { visibility: hidden; }
  .frame { inline-size: min(420px, 50vw, calc((100dvh - 440px) * 9 / 16)); min-inline-size: 220px; border-radius: 26px; }
  .actions { max-inline-size: none; }
  .again { display: none; }
  .failed { gap: 16px; }
}

/* a desktop (or a tablet held sideways): the actions beside the card, in a column kept for them on every screen */
@media (width >= 720px) and (height >= 600px) and (orientation: landscape), (width >= 1100px) and (height >= 600px) {
  .stage { grid-template-columns: minmax(0, 1fr) auto 210px; grid-template-rows: auto; column-gap: 28px; padding-block: 36px 28px; }
  .intro { grid-row: 1; margin-inline-end: 44px; }
  h1 { font-size: 56px; }
  .lede p { font-size: 18px; }
  .card, .ready, .failed { grid-row: 1; }
  .ready, .failed { grid-column: 3; align-self: center; }
  .ready { align-items: stretch; }
  .failed { align-items: stretch; }
  .failed .primary { min-inline-size: 0; }
  .failed .notice { text-align: start; }
  .frame { inline-size: min(340px, calc((100dvh - 260px) * 9 / 16)); }
  /* the caption hangs under the frame, out of the grid: one line or two, the frame and the actions stay put */
  .card { position: relative; }
  .card .caption, .card .hint { position: absolute; inset-block-start: calc(100% + 10px); inset-inline: 0; }
  .card .hint { max-inline-size: none; }
  .share { min-block-size: 56px; }
  .pair { display: flex; flex-direction: column; gap: 10px; }
  .secondary { min-block-size: 48px; }
  .notice { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .spin, .ready, .share[data-state="preparing"] .i-wait, .share[data-state="ready"], .tap-sound { animation: none; }
  .share .fill { transition: none; }
  #sample { transition: none; }
}