/* ==========================================================================
   Kafel User Guide — the shared responsive layout, used by both editions.

   guide-en/web/assets/css/styles.css and guide-ar/web/assets/css/styles.css
   are the same file. tools/sync_css.py copies the English one over the Arabic
   one and fails the build if they have drifted, so a correction made once
   reaches both languages. Everything direction-specific is written with
   logical properties — inline-start, inline-end, text-align: start — so the
   RTL edition needs no overrides beyond its own type stack.

   Each package supplies two files of its own:
     fonts.css  the @font-face rules for that language's faces
     lang.css   the --font-head / --font-body / --font-mono stack, plus any
                nudge that is genuinely about the script rather than the layout

   The palette, the 45-degree cut and the pill shapes are sampled from the
   Kafel app itself, so the two editions read as one publication.

   Layout: a single content column that grows from one column on a phone to a
   content column plus a sticky contents rail on a desktop. Everything is
   readable with JavaScript switched off; JavaScript only upgrades the
   screenshot links into an in-page viewer and lights up the contents rail.
   ========================================================================== */

:root {
  /* Kafel greens, sampled from the app */
  --green:      #8BCF4E;
  --green-600:  #74BA28;
  --green-700:  #4A7D15;   /* link and accent green: 4.96:1 on paper, 4.56:1 on mint */
  --green-900:  #2C4F10;
  --mint:       #F1F8E8;
  --mint-2:     #E4F1D4;

  --ink:        #13201A;
  --ink-2:      #37473D;
  --muted:      #4E5C54;   /* 7.04:1 on paper, 6.48:1 on mint */
  --line:       #E3EADD;
  --line-2:     #F0F4EC;
  --paper:      #FFFFFF;
  --shell:      #0E1B10;

  --warn-bg:    #FDF5E4;
  --warn-line:  #E0B252;
  --warn-ink:   #7A4F06;
  --danger:     #A5291B;

  --mm:         #F5841F;
  --mm-blue:    #3B5CE0;

  /* Text on the dark shell. Checked against #0E1B10: 13.9:1, 17.8:1 and
     11.5:1 — every one of them clears AA for body text. */
  --on-dark:        #E7EFE4;
  --on-dark-strong: #FFFFFF;
  --on-dark-link:   #C6E8A5;

  /* The type stack lives in lang.css, which each edition supplies and loads
     after this file. Everything else here is shared byte for byte between the
     English and the Arabic packages, so a fix lands in both. */

  --rail: 250px;
  --gap: 24px;
  --measure: 720px;
  --measure-wide: 830px;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* so an anchor target is not hidden under the sticky header */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--paper);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.015em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 1.95rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.16rem; font-weight: 700; }
h4 { font-size: 1rem;    font-weight: 700; }

p, li { hanging-punctuation: first; }
p + p { margin-top: .85em; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green-900); }

:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 3px;
  border-radius: 4px;
}

strong, b { font-weight: 700; }

.lede {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.small { font-size: .97rem; line-height: 1.62; }
.muted { color: var(--muted); }

/* An interface label exactly as it appears on screen, in English, in the app */
.ui {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .86em;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .06em .42em;
  white-space: nowrap;
}
.ui--go  { background: #E8F5D9; border-color: #CBE5A8; color: var(--green-900); }
.ui--mm  { background: #EEF1FE; border-color: #CBD4F8; color: #2B43A8; }
.ui--warn{ background: var(--warn-bg); border-color: #EBD4A2; color: var(--warn-ink); }

.mono {
  font-family: var(--font-mono);
  font-size: .86em;
  font-weight: 450;
  word-break: break-word;
}

/* ---------------------------------------------------------- skip + header */

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  transition: top .15s;
}
.skip:focus { top: 0; color: #fff; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.masthead__logo { height: 26px; width: auto; }
.masthead__t {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-2);
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 14px;
}
.masthead__t span { color: var(--muted); font-weight: 500; }
.masthead__sp { flex: 1; }
.masthead__pdf {
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--green-900);
  background: var(--mint);
  border: 1px solid var(--mint-2);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.masthead__pdf:hover { background: var(--mint-2); color: var(--green-900); }

@media (max-width: 560px) {
  .masthead__t { font-size: .85rem; padding-inline-start: 10px; }
  .masthead__t span { display: none; }
}

/* --------------------------------------------------------------- the hero */

.hero {
  background:
    radial-gradient(60% 90% at 78% 18%, rgba(139, 207, 78, .22), transparent 62%),
    radial-gradient(52% 74% at 12% 92%, rgba(116, 186, 40, .16), transparent 60%),
    var(--shell);
  color: #fff;
  padding: clamp(40px, 7vw, 84px) 0 clamp(36px, 6vw, 68px);
  position: relative;
  overflow: hidden;
}
.hero::after {           /* the faint grid from the printed cover */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin: 16px 0 14px; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero p {
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, .92rem + .4vw, 1.18rem);
  max-width: 56ch;
}
.hero__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 9px;
  background: var(--green);
  /* the 45-degree cut taken from the corner of the K in the logotype */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.eyebrow--ink { color: var(--green-700); }
.eyebrow--ink::before { background: var(--green-600); }

.chip {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(139, 207, 78, .16);
  color: #CDEBAE;
  border: 1px solid rgba(139, 207, 78, .2);
}
.chip--plain { background: rgba(255,255,255,.07); color: rgba(255,255,255,.76); border-color: rgba(255,255,255,.1); }

/* ------------------------------------------------------------ page shell  */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1040px) {
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 48px; }
}

main {
  min-width: 0;
  padding: 34px 0 60px;
  /* Cap the measure so long paragraphs stay comfortable to read on a wide
     screen; figures and grids still use the full column. */
  max-width: var(--measure-wide);
}

.section { scroll-margin-top: 88px; padding: 30px 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section > .lede { margin-top: 12px; }
.section h2 { margin-bottom: 4px; }

.part {
  margin-top: 46px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--shell);
  color: #fff;
  scroll-margin-top: 88px;
}
.part h2 { color: #fff; margin: 8px 0 6px; }
.part p { color: rgba(255,255,255,.76); max-width: 60ch; }

/* ------------------------------------------------------- contents (rail)  */

.toc { margin-bottom: 24px; }

/* On narrow screens the contents collapse into a disclosure that works with
   no JavaScript at all, because it is a real <details> element. */
.toc__sum {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  padding: 13px 16px;
  margin-top: 18px;
  background: var(--mint);
  border: 1px solid var(--mint-2);
  border-radius: 10px;
  color: var(--green-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toc__sum::-webkit-details-marker { display: none; }
.toc__sum::after {
  content: "";
  margin-inline-start: auto;
  width: 9px; height: 9px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.toc[open] .toc__sum::after { transform: rotate(-135deg) translateY(-2px); }

.toc__body { padding: 6px 2px 2px; }
.toc__h {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 7px;
}
.toc__h:first-child { margin-top: 8px; }
.toc ol { list-style: none; }
.toc a {
  display: flex;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: .94rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.toc a:hover { background: var(--line-2); color: var(--ink); }
.toc a .n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .86rem; padding-top: .1em; }
.toc a[aria-current="true"] {
  background: var(--mint);
  border-inline-start-color: var(--green-600);
  color: var(--green-900);
  font-weight: 600;
}
.toc a[aria-current="true"] .n { color: var(--green-700); }

@media (min-width: 1040px) {
  .toc {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 24px 0 24px;
    margin-bottom: 0;
    border-inline-end: 1px solid var(--line);
    padding-inline-end: 18px;
  }
  .toc__sum { display: none; }
  .toc__body { display: block !important; }
}

/* ------------------------------------------------------------- step lists */

.steps { list-style: none; margin: 20px 0 0; display: grid; gap: 16px; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 13px;
  row-gap: 3px;
  align-items: start;
}
/* The number occupies column one for the whole item; every other child —
   heading, paragraph, an inline figure — stacks down column two. */
.steps > li > * { grid-column: 2; min-width: 0; }
.steps > li::before {
  grid-column: 1;
  grid-row: 1 / -1;
  content: counter(step);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .86rem;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green-900);
  border: 1px solid var(--mint-2);
}
.steps h3 { font-size: 1.02rem; margin-bottom: 1px; }
.steps p { font-size: .98rem; color: var(--ink-2); }

.ticks { list-style: none; display: grid; gap: 9px; margin-top: 12px; }
.ticks li { position: relative; padding-inline-start: 26px; font-size: .98rem; color: var(--ink-2); }
/* Drawn, not typed: no brand font carries a tick or a cross, and pulling in a
   third font for two characters would put it in the exported PDF. */
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px; top: .52em;
  width: 11px; height: 6px;
  border-inline-start: 2.2px solid var(--green-600);
  border-bottom: 2.2px solid var(--green-600);
  transform: rotate(-45deg);
}
.ticks--no li::before {
  top: .58em; inset-inline-start: 4px;
  width: 11px; height: 11px;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent 43%, var(--danger) 43%, var(--danger) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--danger) 43%, var(--danger) 57%, transparent 57%);
}

/* ------------------------------------------------------------- components */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card--tint { background: var(--mint); border-color: var(--mint-2); }
.card h3, .card h4 { margin-bottom: 5px; }
.card p { font-size: .98rem; color: var(--ink-2); }

/* ------------------------------------------------------------ dark panels */

/* Everything that sits on the dark shell colour.
   The element list is spelled out rather than left to `*`, because `.card *`
   scores lower than `.card p` and the paragraphs in a dark card were losing to
   the light-card rule above — dark grey on #0E1B10, 1.9:1, effectively
   invisible. Wrapping the list in :is() keeps it at the same weight as
   `.card p` and later in the file, so it wins on order. */
.card--ink,
.part,
.hero,
.foot { color: var(--on-dark); }

.card--ink :is(p, li, dd, dt, span, small, em, code, td, th),
.part      :is(p, li, dd, dt, span, small, em, code),
.hero      :is(p, li, span, small, em),
.foot      :is(p, li, span, small, em) { color: var(--on-dark); }

.card--ink :is(h2, h3, h4, b, strong),
.part      :is(h2, h3, h4, b, strong),
.hero      :is(h1, h2, b, strong),
.foot      :is(h2, h3, h4, b) { color: var(--on-dark-strong); }

.card--ink a, .part a, .hero a, .foot a { color: var(--on-dark-link); }
.card--ink a:hover, .part a:hover, .hero a:hover, .foot a:hover { color: #fff; }

/* The accents keep their own colour — each is checked against the shell. */
.card--ink .eyebrow, .part .eyebrow, .hero .eyebrow { color: var(--green); }
.hero h1 em, .foot strong { color: var(--green); }
.card--ink { background: var(--shell); border-color: var(--shell); }

/* A UI label inside a dark panel needs its own light treatment, or it keeps
   the pale chip background with pale text on top of it. */
.card--ink .ui, .part .ui, .hero .ui, .foot .ui {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.card--ink .mono, .part .mono, .hero .mono, .foot .mono { color: #DCEFC7; }

.grid { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.note {
  margin-top: 20px;
  padding: 15px 18px 16px;
  border-radius: 10px;
  border-inline-start: 4px solid var(--green-600);
  background: var(--mint);
  font-size: .98rem;
  color: var(--ink-2);
}
.note > strong, .note__t {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: 3px;
}
.note--warn { background: var(--warn-bg); border-inline-start-color: var(--warn-line); }
.note--warn > strong, .note--warn .note__t { color: var(--warn-ink); }
.note--stop { background: #FCEEEC; border-inline-start-color: var(--danger); }
.note--stop > strong, .note--stop .note__t { color: var(--danger); }

/* --------------------------------------------------------------- figures  */

figure { margin: 22px 0 0; }
figcaption {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 9px;
}
figcaption b { color: var(--ink); font-weight: 700; }
.ts {
  font-family: var(--font-mono);
  font-size: .83rem;
  font-weight: 450;
  color: var(--green-700);
  background: var(--mint);
  border-radius: 4px;
  padding: .05em .4em;
  white-space: nowrap;
}

/* A phone screenshot keeps its portrait orientation, always. */
.shot {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--line-2);
  position: relative;
  max-width: 300px;
}
.shot img { width: 100%; }
.shot--wide { max-width: 100%; }
.shot--detail { max-width: 520px; }

a.shot { cursor: zoom-in; }
a.shot::after {              /* the enlarge affordance */
  content: "";
  position: absolute;
  inset-inline-end: 9px; bottom: 9px;
  width: 26px; height: 26px;
  border-radius: 7px;
  background:
    linear-gradient(currentColor, currentColor) center/11px 2.2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2.2px 11px no-repeat,
    rgba(19, 32, 26, .72);
  color: #fff;
  opacity: 0;
  transition: opacity .15s;
}
a.shot:hover::after, a.shot:focus-visible::after { opacity: 1; }

.shots {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
}
.shots figure { margin: 0; }
.shots .shot { max-width: 100%; }

/* A strip that stays in one column wherever it sits — used in the narrow
   column of a reversed split, where two abreast would be unreadable. */
.shots--stack { grid-template-columns: 1fr; }

/* A four-up strip: two columns on a tablet, four on a desktop, so a group of
   four never leaves one stranded on a row of its own. */
@media (min-width: 560px)  { .shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.split { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 760px) {
  .split { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .split--wide { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ------------------------------------------------------------ comparison  */

.cmp { margin-top: 22px; overflow-x: auto; }
.cmp table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .98rem; }
.cmp th, .cmp td { text-align: start; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th {
  font-family: var(--font-head);
  font-size: .9rem;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
}
.cmp tbody th { font-weight: 500; color: var(--muted); font-size: .9rem; }
.cmp td:last-child { background: var(--mint); }
.cmp caption { text-align: start; font-size: .92rem; color: var(--muted); padding-bottom: 8px; }

/* On a phone a three-column comparison is unreadable and a sideways scroller
   is a poor substitute, so each row becomes a small stack: the question, then
   each method's answer under its own label. */
@media (max-width: 620px) {
  .cmp { overflow-x: visible; }
  .cmp table { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { display: block; padding: 0 0 8px; font-size: .95rem; color: var(--ink); font-weight: 600; }
  .cmp tbody td { display: block; border: 0; padding: 4px 0 4px 12px; background: none !important; }
  .cmp tbody td::before {
    content: attr(data-m);
    display: block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
  }
  .cmp tbody td + td { border-inline-start: 2px solid var(--mint-2); }
  .cmp tbody td:first-of-type { border-inline-start: 2px solid var(--line); }
}

/* --------------------------------------------------------------- the flow */

.flow {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
}
.flow__box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--paper);
}
.flow__box strong { display: block; font-family: var(--font-head); font-size: .98rem; }
.flow__box span { font-size: .87rem; color: var(--muted); }
.flow__box--end { background: var(--green-600); border-color: var(--green-600); }
.flow__box--end strong { color: #fff; }
.flow__box--end span { color: rgba(255,255,255,.85); }
.flow__ar {                       /* arrow, drawn in CSS, points right (LTR) */
  align-self: center;
  justify-self: center;
  width: 30px; height: 12px;
  position: relative;
  color: var(--green-600);
  transform: rotate(90deg);
}
@media (min-width: 720px) { .flow__ar { transform: none; } }
.flow__ar::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 5px;
  width: 22px; height: 2px; background: currentColor;
}
.flow__ar::after {
  content: ""; position: absolute; inset-inline-end: 4px; top: 1px;
  width: 9px; height: 9px;
  border-top: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  /* in an RTL document the logical border flips with the text, which is
     exactly what the arrow should do: it points the way the reader reads */
  transform: rotate(45deg);
}

/* ------------------------------------------------------------ link lists  */

.links { list-style: none; display: grid; gap: 11px; margin-top: 16px; }
.links > li { display: grid; gap: 1px; }
.links b { font-family: var(--font-head); font-size: .96rem; font-weight: 700; }
.links a { font-family: var(--font-mono); font-size: .88rem; font-weight: 450; word-break: break-all; }

dl.kv { display: grid; gap: 5px 20px; margin-top: 14px; font-size: .97rem; }
@media (min-width: 620px) { dl.kv { grid-template-columns: auto minmax(0, 1fr); } }
dl.kv dt { font-weight: 600; color: var(--ink); }
dl.kv dd { color: var(--ink-2); margin-bottom: 8px; }

/* --------------------------------------------------------------- lightbox */

/* The viewer is a <dialog>. Without JavaScript it is never opened and the
   screenshot links behave as ordinary links to the image file, so nothing is
   lost; with JavaScript the page keeps its scroll position underneath. */
dialog.viewer {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}
dialog.viewer::backdrop { background: rgba(8, 15, 10, .93); }
.viewer__in {
  /* ::backdrop does the dimming in a current browser; this repeats it on the
     dialog itself so the viewer is never a picture floating on a bright page
     where ::backdrop is unsupported or not painted. */
  background: rgba(8, 15, 10, .93);
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}
.viewer__bar { display: flex; align-items: center; gap: 12px; color: #fff; }
.viewer__cap { font-size: .88rem; color: rgba(255,255,255,.78); min-width: 0; }
.viewer__x {
  margin-inline-start: auto;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.viewer__x:hover { background: rgba(255,255,255,.16); }
.viewer__img { min-height: 0; display: grid; place-items: center; overflow: hidden; }
.viewer__img img {
  /* A phone screenshot is far taller than it is wide, so the height is the
     binding constraint: cap it against the viewport, less the bar above. */
  max-width: 100%;
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

/* ----------------------------------------------------------------- footer */

.foot {
  background: var(--shell);
  color: rgba(255,255,255,.6);
  padding: 40px 0 46px;
  margin-top: 40px;
  font-size: .9rem;
}
.foot img { height: 30px; width: auto; margin-bottom: 18px; }
.foot p { max-width: 60ch; }
.foot strong { color: var(--green); }
.foot__rule { height: 1px; background: rgba(255,255,255,.12); margin: 22px 0; }
.foot a { color: #C6E8A5; }

/* -------------------------------------------------------- back-to-top link */

.totop {
  display: inline-block;
  margin-top: 26px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--green-700);
}
.totop:hover { text-decoration: underline; }

/* ------------------------------------------------- screen-reader only text */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------- the one Arabic string on the page */

/* Cairo is an Arabic typeface first, so the link to the Arabic edition is set
   in it. Without this the Arabic would fall back to a system font — and in the
   PDF export that means a whole extra font family embedded for six letters. */
.ar {
  font-family: var(--font-head);
  font-weight: 500;
  unicode-bidi: isolate;
}