/* Mihrab — the site's whole stylesheet.
 *
 * One file, linked by all thirteen language pages. It lived inline in
 * index.html until the translations arrived; thirteen inline copies of 250
 * lines is thirteen copies that drift, and the pages would have stopped
 * looking like one site within a release or two. Same origin, no webfonts,
 * nothing third-party — the claim the privacy section makes about this
 * site still holds.
 */
:root {
  --emerald: #1F5F4A;
  --emerald-deep: #123A2D;
  --cream: #EEE4D4;
  --paper: #FBF8F2;
  --surface: #FFFFFF;
  --surface-2: #F4EEE3;
  --ink: #14231D;
  --ink-soft: #4A5C54;
  --line: #E3DACB;
  --accent: #1F5F4A;
  --accent-ink: #EEE4D4;
  --frame: #E8E0D2;
  --shadow: 0 1px 2px rgba(18,58,45,.06), 0 12px 32px -12px rgba(18,58,45,.18);
  --radius: 14px;
  --measure: 68ch;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1815;
    --surface: #16241F;
    --surface-2: #1B2C25;
    --ink: #EDE6DA;
    --ink-soft: #A9BAB1;
    --line: #26372F;
    --accent: #7FD3B4;
    --accent-ink: #EEE4D4;
    --frame: #22332C;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0; font-weight: 650; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; display: block; }
code {
  font-family: var(--mono); font-size: .875em; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: .12em .4em;
  overflow-wrap: anywhere;
}
:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* The skip link is CLIPPED out of sight, never PUSHED out of sight.
 *
 * It used to sit ten thousand pixels off the left edge, which is the old
 * trick and works in a left-to-right page: the overflow is off the start edge, the viewport
 * opens at the start, nobody sees it. Turn the same page right-to-left and
 * the document is 11,279 px wide with the content at the far end — and the
 * Arabic and Urdu pages opened on ten thousand pixels of empty background.
 * A blank page, from one line of CSS that had been correct for years.
 *
 * A one-pixel clipped box takes part in no overflow in either direction,
 * and still reaches a screen reader and a tab key. */
.skip {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--emerald); color: var(--cream);
  border-radius: 0 0 10px 0; z-index: 20;
}
.skip:focus {
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  overflow: visible; clip-path: none;
}
section { padding: 72px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.eyebrow {
  font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
h2 { font-size: clamp(26px, 4vw, 34px); }
.lede { color: var(--ink-soft); max-width: var(--measure); margin-top: 12px; }
/* ---- hero ---- */
.hero {
  /* NOT `overflow: hidden`. The ornament is an <svg>, and an SVG clips to
     its own viewport by default — the hidden overflow here was doing
     nothing for it, and it cut the open language menu off at the bottom
     edge of the hero. */
  position: relative; border-top: 0;
  background: linear-gradient(170deg, #1F5F4A 0%, #1A4E3D 52%, #123A2D 100%);
  color: var(--cream); padding: 0;
}
.hero .wrap { position: relative; z-index: 2; padding-top: 84px; padding-bottom: 88px; }
.hero-art {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; color: var(--cream);
}
.brandline { display: flex; align-items: center; gap: 16px; }
.brandline img {
  width: 62px; height: 62px; border-radius: 15px; flex: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 14px 30px -10px rgba(0,0,0,.55);
  background: rgba(238,228,212,.08);
}
.wordmark {
  font-size: clamp(38px, 7vw, 54px); font-weight: 700; letter-spacing: -0.025em;
  color: var(--cream);
}
.hero h1 {
  font-size: clamp(23px, 3.5vw, 31px); font-weight: 600; letter-spacing: -0.02em;
  margin: 26px 0 0; max-width: 22ch; color: var(--cream);
}
.hero .sub { margin: 14px 0 0; max-width: 56ch; color: rgba(238,228,212,.88); }
.hero .meta {
  margin: 26px 0 0; font-size: 14.5px; color: rgba(238,228,212,.86);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
.hero .meta a { color: rgba(238,228,212,.92); text-decoration-color: rgba(238,228,212,.45); }
.hero .meta a:hover { color: #fff; }
.hero :focus-visible { outline-color: var(--cream); }
.dot { opacity: .45; }
/* The three claims that decide the download, above the fold. A section at
   60% scroll is not where someone stops deciding. */
.trust { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.trust li {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(238,228,212,.10);
  border: 1px solid rgba(238,228,212,.24);
  font-size: 14.5px; color: rgba(238,228,212,.94);
}
.trust svg { flex: none; opacity: .85; }
/* ---- install ---- */
.install { background: var(--surface); }
/* Store badges. The four files are cropped to their ink, so a single height
   makes them genuinely the same size. Shipped uncropped they are not: Apple's
   is drawn tight to its box, while the Google Play, GitHub and Obtainium files
   are 646x250 canvases holding only 564x168 of artwork, a third of their
   height being the clear space their brand guidelines ask for. Sized to a
   common box, three of the four therefore rendered noticeably smaller than
   Apple's with dead space around them. That clear space is a layout
   requirement rather than something the file has to carry, so it lives in the
   flex gap below instead. Only the height is set here; width follows the
   aspect ratio, and the img attributes just reserve the box before load. */
.badges {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 16px;
}
.badges li { margin: 0; }
.badges a {
  display: block; border-radius: 12px;
  transition: transform .15s ease, opacity .15s ease;
}
.badges img {
  display: block; height: 68px; width: auto;
}
.badges a:hover { transform: translateY(-1px); opacity: .88; }
.badges a:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }
@media (prefers-color-scheme: dark) {
  .badges a:focus-visible { outline-color: var(--accent); }
}
@media (max-width: 420px) {
  .badges { justify-content: center; }
  .badges img { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .badges a { transition: none; }
  .badges a:hover { transform: none; }
}
.channels {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
}
.channel {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 16px 18px; min-height: 100%;
}
.channel .glyph { flex: none; margin-top: 2px; color: var(--emerald); }
@media (prefers-color-scheme: dark) { .channel .glyph { color: var(--accent); } }
.channel b { display: block; font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.channel span { display: block; font-size: 14.5px; color: var(--ink-soft); margin-top: 3px; }
.channel a { font-weight: 600; }
.channel code { font-size: 13px; }
.note {
  margin-top: 22px; font-size: 14.5px; color: var(--ink-soft); max-width: var(--measure);
}
/* ---- features ---- */
.groups {
  margin-top: 34px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(390px, 100%), 1fr));
}
.group {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 24px 24px 26px; box-shadow: var(--shadow);
}
.group h3 {
  font-size: 19px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.group h3 .glyph { color: var(--emerald); flex: none; }
@media (prefers-color-scheme: dark) { .group h3 .glyph { color: var(--accent); } }
.group ul { margin: 0; padding: 0; list-style: none; }
.group li { position: relative; padding: 0 0 0 20px; margin-bottom: 12px; font-size: 15.5px; }
.group li:last-child { margin-bottom: 0; }
.group li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px;
  background: var(--emerald); opacity: .55;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
@media (prefers-color-scheme: dark) { .group li::before { background: var(--accent); opacity: .7; } }
.group li b { font-weight: 650; }
.group li span { color: var(--ink-soft); }
/* ---- screenshots ---- */
.sweden { background: var(--surface-2); }
.sweden .cols {
  /* Two columns, not three: the section is one wide explanation and two
     questions, and two questions across three columns leaves a hole. */
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
/* A card that carries the whole argument runs the width of the row rather
   than standing alone at the end of the grid with two empty cells beside
   it. Its list splits into columns so it does not become a tall ribbon. */
.card.span { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .card.span ul { columns: 2; column-gap: 40px; }
  .card.span li { break-inside: avoid; }
}
.shots { background: var(--surface); }
.gallery {
  margin: 32px 0 0; padding: 0; list-style: none;
  display: grid; gap: 26px 20px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gallery figure { margin: 0; }
.gallery img, .spread img {
  width: 100%; height: auto; border: 1px solid var(--frame);
  background: var(--surface-2); color: var(--ink-soft); font-size: 13px;
  box-shadow: var(--shadow); object-fit: cover;
}
.gallery img { aspect-ratio: 9 / 20; border-radius: 16px; }
.gallery figcaption, .spread figcaption {
  margin-top: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.45;
}
.spread { margin: 34px 0 0; }
.spread img { aspect-ratio: 800 / 439; border-radius: 12px; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .gallery figcaption, .spread figcaption { font-size: 13.5px; }
}
/* ---- a row of cards ----
 *
 * `.cols` IS the grid, rather than the grid being granted to a list of
 * sections that happen to use it. It was written as `.privacy .cols,
 * .support .cols, .faq .cols`, which is a list that has to be remembered:
 * the translated pages use the same markup for their feature section, that
 * section was not on the list, and its three cards stacked flush against
 * each other with no gap at all — on twelve pages at once. A layout that
 * has to be re-granted per section is a layout that will be forgotten
 * again. */
.cols {
  margin-top: 32px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 22px 24px;
}
.card h3 { font-size: 17px; margin-bottom: 10px; }
.card p, .card li { font-size: 15.5px; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
/* A command must not break mid-token; let it scroll inside its own box. */
.card p.cmd { overflow-x: auto; }
.card p.cmd code { white-space: nowrap; }
.card ul { margin: 0; padding-left: 18px; }
.card li { margin-bottom: 8px; }
.card li:last-child { margin-bottom: 0; }
.card strong { color: var(--ink); font-weight: 600; }
/* ---- footer ---- */
footer {
  border-top: 1px solid var(--line); background: var(--surface-2);
  padding: 46px 0 56px; font-size: 15px; color: var(--ink-soft);
}
footer h2 { font-size: 17px; color: var(--ink); margin-bottom: 12px; }
footer p { max-width: var(--measure); }
footer .foot-grid {
  display: grid; gap: 26px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 7px; }
footer .colophon {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px;
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  section { padding: 56px 0; }
  .wrap { padding: 0 20px; }
  .hero .wrap { padding-top: 60px; padding-bottom: 64px; }
  .brandline img { width: 54px; height: 54px; border-radius: 13px; }
  .hero .meta { gap: 4px 16px; }
  .hero .meta .dot { display: none; }
}
/* Solidarity banner — the first thing on the page, above the hero.
   Drawn inline rather than hotlinked from the banner project's repository:
   this site makes no third-party requests at all, and adding one for a
   decorative image would quietly break that. The link is the same page the
   README's banner points to. */
.solidarity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: #101010;
  color: #F2EFE8;
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid #007A3D;
}
.solidarity:hover, .solidarity:focus-visible { background: #1c1c1c; color: #FFFFFF; }
.solidarity .flag { flex: none; border-radius: 2px; }
.solidarity b { font-weight: 650; }
.solidarity .go { flex: none; opacity: .75; }
@media (max-width: 620px) {
  .solidarity { font-size: 13.5px; padding: 9px 14px; gap: 8px; }
  .solidarity .wide { display: none; }
}
@media print { .solidarity { display: none; } }
@media print { .hero { background: none; color: #000; } .hero-art { display: none; } }

/* ---- the Swedish page's list of towns ---- */
.towns { background: var(--surface); }
.townlist {
  margin: 26px 0 0; padding: 0; list-style: none;
  columns: 6 140px; column-gap: 26px;
  font-size: 15px; color: var(--ink-soft);
}
.townlist li { break-inside: avoid; margin-bottom: 6px; }

/* ---- the language button ----
 *
 * It sat in a bar of its own under the solidarity banner, and two full-width
 * strips stacked on top of each other read as one heavy double band before
 * the page had said anything. So it lives in the brand row instead, at the
 * far end from the wordmark — the corner every site puts this control in,
 * and a place that costs no vertical space at all.
 *
 * A <details> element, not a script. The site ships no JavaScript and says
 * so on the privacy section as a claim someone can check, so the picker is
 * a native disclosure; a visitor arriving from a search engine is already
 * on their own language, because the pages declare each other in hreflang.
 */
.brandline .langpicker { margin-inline-start: auto; position: relative; }
.langpicker { font-size: 14.5px; }
.langpicker summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  list-style: none; cursor: pointer; user-select: none;
  color: rgba(238, 228, 212, .92);
  background: rgba(238, 228, 212, .10);
  border: 1px solid rgba(238, 228, 212, .26);
}
.langpicker summary::-webkit-details-marker { display: none; }
.langpicker summary:hover {
  background: rgba(238, 228, 212, .18); color: #fff;
}
.langpicker[open] summary { background: rgba(238, 228, 212, .2); color: #fff; }
.langpicker summary svg { flex: none; opacity: .85; }
.langpicker ul {
  position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none;
  min-width: 190px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(9, 24, 19, .45);
  /* Thirteen languages is taller than a phone in landscape. */
  max-height: min(70vh, 460px); overflow-y: auto;
}
.langpicker li { margin: 0; }
.langpicker a {
  display: block; padding: 7px 11px; border-radius: 7px;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.langpicker a:hover { background: rgba(31, 95, 74, .08); color: var(--ink); }
.langpicker a[aria-current] { color: var(--emerald); font-weight: 650; }
@media (max-width: 620px) {
  /* The globe alone. A wordmark and a full label do not share a phone. */
  .langpicker .lang-label { display: none; }
  .langpicker summary { padding: 9px 11px; }
  .langpicker ul { min-width: 168px; }
}

/* ---- right-to-left ----
 *
 * Arabic and Urdu. Only two rules in the whole sheet are side-specific;
 * everything else is flex, grid or logical, and mirrors on its own.
 */
[dir="rtl"] .card ul { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .group li { padding: 0 20px 0 0; }
[dir="rtl"] .group li::before { left: auto; right: 0; }
[dir="rtl"] .hero-art { transform: scaleX(-1); }