/* ===========================================================================
   yt — the whole stylesheet. Hand written, no framework, no build step.

   Light only. The theme toggle is gone, so there is no stored preference, no
   blocking inline script in <head>, and no second palette to keep in step.
   =========================================================================== */

/* Arabic gets real fonts; English uses the system stack.
   
   Alexandria for headings, IBM Plex Sans Arabic for everything else — and the
   second one is what fixes the thickness. Left to the system, Arabic lands on
   Geeza Pro on a Mac and Tahoma on Windows, and neither ships a semibold, so
   the browser invents one by smearing the regular. Every label and button came
   out blobbed. A face that actually has the weight is drawn, not thickened. */
@font-face {
  font-family: 'Alexandria';
  src: url('/fonts/alexandria-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+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'ArabicText';
  src: url('/fonts/plex-ar-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'ArabicText';
  src: url('/fonts/plex-ar-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'ArabicText';
  src: url('/fonts/plex-ar-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* A grey page, white cards, one blue for every action. Borrowed because it
     is familiar: a visitor has used this exact colour relationship for years
     and does not have to work out which thing on the page is the button. */
  --paper: #f0f2f5;
  --surface: #fff;
  --hover: #f2f2f2;
  --grey-btn: #e4e6eb;
  --grey-btn-hover: #d8dadf;
  --line: #ced0d4;
  --line-soft: #e4e6eb;
  --fg: #050505;
  --muted: #65676b;
  --faint: #8a8d91;
  --accent: #1877f2;
  --accent-hover: #166fe5;
  --accent-soft: #e7f3ff;
  --on-accent: #fff;
  --go: #42b72a;
  --go-hover: #36a420;
  --bad: #c5221f;

  --shadow: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-lift: 0 12px 28px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .1);

  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
    'Noto Sans Arabic', 'Segoe UI Arabic', Tahoma, Arial, sans-serif;
  --display: var(--body);

  --r-card: 8px;
  --r: 6px;
  --wrap: 42rem;
}

html[lang='ar'] {
  --display: 'Alexandria', 'ArabicText', -apple-system, 'Segoe UI', sans-serif;
  --body: 'ArabicText', -apple-system, 'Segoe UI', system-ui, Tahoma, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  /* Never invent a weight or a slant. If a face lacks the weight asked for,
     the nearest real one beats a smeared approximation. */
  font-synthesis: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--fg);
  font: 400 .9375rem/1.5 var(--body);
}

html[dir='rtl'] body { line-height: 1.8; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3 { letter-spacing: 0; line-height: 1.45; }

/* Fluid, not stepped: a heading that changes size at one breakpoint is wrong
   at every width in between. */
h1 { font-size: clamp(1.375rem, 5vw, 1.75rem); }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input {
  font: inherit;
  /* iOS zooms the page when a focused input is under 16px. */
  font-size: 16px;
}

/* Forces a Latin run left-to-right inside an Arabic page. `isolate` is the
   part that matters: without it the bidi algorithm reorders the Arabic around
   the run, which throws trailing punctuation to the wrong end. */
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.nums { font-variant-numeric: tabular-nums; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sr:focus {
  position: fixed; inset-inline-start: 12px; top: 12px; width: auto; height: auto;
  margin: 0; clip-path: none; padding: 8px 16px; border-radius: var(--r);
  background: var(--fg); color: #fff; z-index: 50;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 12px; }
@media (min-width: 480px) { .wrap { padding-inline: 16px; } }

/* --- Header -------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); box-shadow: var(--shadow); }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; border-radius: var(--r); }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font: 700 1.3125rem/1 var(--display); letter-spacing: -.02em; color: var(--accent); }

.top-right { display: flex; align-items: center; gap: 6px; }
.lang { display: flex; gap: 4px; }
.lang a { padding: 7px 12px; border-radius: var(--r); font-size: .8125rem; font-weight: 600; color: var(--muted); }
.lang a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.lang a:hover:not([aria-current]) { background: var(--hover); }

/* --- Cards --------------------------------------------------------------- */
main { flex: 1; }
.page { padding-block: 16px 0; }
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 12px; }
@media (min-width: 480px) { .card { padding: 20px; } }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--faint); }

.lead { margin-top: 6px; color: var(--muted); }
.body-text { margin-top: 8px; color: var(--muted); }
.note { margin-top: 12px; font-size: .8125rem; color: var(--faint); }

/* --- The tool ------------------------------------------------------------ */
.tool { margin-top: 16px; }
/* One joined bar: the field and the button share a frame with no seam
   between them, so the whole thing reads as a single control. Nothing stacks
   at any width — a bar that breaks into two pieces on a phone loses exactly
   the quality that makes it worth having. */
.field-row {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--accent);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}

/* The glow belongs to the bar, not to the input inside it. */
.field-row:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

.field { position: relative; flex: 1; min-width: 0; display: flex; }

.field input {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  line-height: 1.3;
}
.field input::placeholder { color: var(--faint); }
.field input:focus { outline: none; }

.btn-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-go:hover { background: var(--accent-hover); }
.btn-go[disabled] { opacity: .75; cursor: default; }
/* The arrow points the way the language reads. */
html[dir='rtl'] .btn-go svg { transform: scaleX(-1); }

/* The clear button sits where the text ends, just before the button. */
.field-btns { position: absolute; inset-block: 5px; inset-inline-end: 5px; display: flex; align-items: center; gap: 4px; }
.btn-clear { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--faint); }
.btn-clear svg { width: 16px; height: 16px; }
.btn-clear:hover { background: var(--grey-btn); color: var(--fg); }
html[dir='ltr'] .field input { padding-right: 40px; }
html[dir='rtl'] .field input { padding-left: 40px; }

/* Paste is a phone control. On a wide screen pasting is one keystroke, and a
   chip inside the field would crowd the button it is welded to. Below the
   breakpoint it moves to the leading edge — the far side from the button —
   so the two can never be mistaken for one another. */
.btn-paste {
  position: absolute;
  inset-block: 5px;
  inset-inline-start: 5px;
  padding: 0 12px;
  border-radius: var(--r);
  background: var(--grey-btn);
  font-size: .875rem;
  font-weight: 600;
  color: var(--fg);
}
.btn-paste:hover { background: var(--grey-btn-hover); }
html[dir='ltr'] .field input { padding-left: 76px; }
html[dir='rtl'] .field input { padding-right: 76px; }

@media (min-width: 560px) {
  .btn-paste { display: none; }
  html[dir='ltr'] .field input { padding-left: 16px; }
  html[dir='rtl'] .field input { padding-right: 16px; }
}

/* Outside the card, under it: this is the legal line, not part of the tool. */
.terms { margin-top: 12px; padding-inline: 8px; font-size: .75rem; line-height: 1.5; color: var(--faint); text-align: center; }

.chip-clip {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  margin-top: 10px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--grey-btn); font-size: .8125rem; font-weight: 600;
}
.chip-clip:hover { background: var(--grey-btn-hover); }
.chip-clip svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.chip-clip .u { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--muted); }

.msg { margin-top: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); }
.msg[data-bad] { background: #ffebe9; color: var(--bad); }

/* Results: the video on one side, the formats on the other. */
.result {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 14px;
  display: grid;
  gap: 16px;
}
@media (min-width: 620px) {
  .result { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}

.result-media img {
  width: 100%;
  /* `height: auto` is what makes aspect-ratio work. The width and height
     attributes stay on the tag so the browser reserves the right space before
     the image loads, but a specified height also pins the box — leaving both
     dimensions fixed, ignoring aspect-ratio, and letting object-fit crop the
     sides off every thumbnail. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--grey-btn);
}
.result-title { margin-top: 10px; font-size: .9375rem; line-height: 1.35; }
.result-meta { margin-top: 2px; font-size: .8125rem; color: var(--muted); }
.link-btn { margin-top: 8px; font-size: .8125rem; font-weight: 600; color: var(--accent); }
.link-btn:hover { text-decoration: underline; }

.result-panel { min-width: 0; }

.seg { margin-bottom: 10px; }
.seg-inner { display: inline-flex; gap: 4px; }
.seg button { padding: 7px 18px; border-radius: var(--r); font-size: .875rem; font-weight: 600; color: var(--muted); background: var(--grey-btn); }
.seg button[aria-selected='true'] { background: var(--accent-soft); color: var(--accent); }
.seg button[disabled] { opacity: .4; cursor: default; }

.fmt-table { width: 100%; border-collapse: collapse; }
.fmt-table th {
  padding: 8px 10px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  text-align: start;
  border-bottom: 1px solid var(--line);
}
html[dir='rtl'] .fmt-table th { letter-spacing: 0; text-transform: none; }
.fmt-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.fmt-table tr:last-child td { border-bottom: 0; }
.fmt-table .q { font-weight: 600; white-space: nowrap; }
.fmt-table .c { font-size: .8125rem; color: var(--muted); }
.fmt-table .end { text-align: end; white-space: nowrap; }

/* Green, and the only green on the page: this is the button that produces
   the file, as distinct from the blue one that only reads the link. */
.btn-get {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--r);
  background: var(--go); color: #fff; font-size: .875rem; font-weight: 600;
}
.btn-get:hover { background: var(--go-hover); }
/* The finished button carries the file size, so it is wider than the one it
   replaces. Without nowrap it breaks onto two lines and that one row grows
   taller than the rest of the table. */
.btn-save {
  display: inline-block; padding: 8px 16px; border-radius: var(--r);
  background: var(--go); color: #fff; font-size: .875rem; font-weight: 600;
  white-space: nowrap;
}
.btn-save:hover { background: var(--go-hover); }
.btn-retry { padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--muted); }

/* The same footprint as .btn-get, so the table does not reflow when a
   conversion starts. The fill is the background, not a second element. */
.prog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 8px 16px;
  border-radius: var(--r);
  font-size: .875rem;
  font-weight: 600;
  color: var(--go);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--go) 22%, transparent) var(--p, 0%), var(--grey-btn) var(--p, 0%));
  transition: background .4s linear;
}

html[dir='rtl'] .prog {
  background:
    linear-gradient(to left, color-mix(in srgb, var(--go) 22%, transparent) var(--p, 0%), var(--grey-btn) var(--p, 0%));
}

/* The action buttons share that width so the column never changes size. */
.btn-get, .btn-save, .btn-retry { min-width: 118px; justify-content: center; }

/* Playlist */
.plist { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.plist-head { padding: 12px; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.plist-head p { margin-top: 2px; font-size: .8125rem; color: var(--muted); }
.plist li + li { border-top: 1px solid var(--line-soft); }
.plist button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; text-align: start; }
.plist button:hover { background: var(--hover); }
.plist .n { width: 24px; flex: none; font-size: .75rem; color: var(--muted); }
.plist .t { flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .d { flex: none; font-size: .75rem; color: var(--muted); }

/* --- Index hero ----------------------------------------------------------
   The index is a doorway: a headline, the box, and the sites it accepts.
   Everything that explains anything is on the page the link routes you to. */
.hero { text-align: center; padding-block: 4px; }
.hero h1 { font-size: clamp(1.5rem, 6vw, 2.125rem); }
/* No cap of its own: the paste box, the tile grid and the steps card are the
   three blocks of the index and they share one column, the same one the rest
   of the site runs in. Capping this one narrower left three stacked cards at
   three different widths. */
.hero-card { text-align: start; }
.hero-card .tool { margin-top: 0; }

.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  margin-top: 12px; font-size: .8125rem; color: var(--muted);
}
.trust li { display: flex; align-items: center; gap: 6px; }
.trust svg { width: 15px; height: 15px; flex: none; color: var(--go); }

/* Supported sites. A name and an icon of ours, not the platforms' logos:
   those are trademarks and we have no licence to use them. */
/* The index gets more room than a page of prose needs: the grid wants eight
   across and reading width cannot hold them. */
/* The index used to run in a wider wrapper than the rest of the site, with
   the paste box and the tile grid each capped to a different width inside
   it — three blocks, three widths, stacked. It now sits on the same 42rem
   column every other page uses, so the cards line up with each other and
   with the rest of the site. That column also happens to make a tile track
   94px, just inside the tile's own 96px cap, so the gap between tiles on
   screen is the 8px the grid asks for and not a track's leftover padding. */

/* Three across on a phone, growing to seven on a desktop. Stepped rather than
   auto-fill so the count is deliberate at every width — auto-fill kept
   stranding one tile alone on a second row. Five is the tablet step because
   it divides the current roster evenly; seven leaves four on the last row,
   which still reads as a row rather than a leftover. */
/* The track fills the row; the tile inside it does not. Left to fill, a tile
   came out 115px wide against 54px tall and the 13px mark floated in all that
   rectangle — that was the part that looked wrong. Capping the track instead
   left the row short of the card edge, so the cap sits on the tile and the
   spare width spreads itself evenly down the gaps. Every row shares the same
   tracks, so the short last row still lines up with the ones above it. */
.sites { display: grid; gap: 8px; margin-top: 12px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 480px) { .sites { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) { .sites { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 860px) { .sites { grid-template-columns: repeat(6, 1fr); } }

.sites a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 4px; border-radius: var(--r-card); background: var(--paper);
  width: 100%; max-width: 96px; margin-inline: auto;
  /* The grid item is the <li>, which stretches to the tallest tile in its
     row; without this the link inside stays its own height and a two-line
     name like "Internet Archive" leaves its neighbours visibly short. */
  height: 100%;
  font-size: .75rem; font-weight: 600; text-align: center; line-height: 1.3;
  /* A long name wraps rather than pushing the tile past its cap. */
  overflow-wrap: anywhere;
}
.sites a:hover { background: var(--grey-btn); }
/* On the all-sites page a heading follows the lead paragraph and then each
   grid, and with only the grid's own 12px above it the two ran together. */
.sites + h2, .body-text + h2 { margin-top: 26px; }
/* The way out of the short list. Tinted in the site's own accent rather than
   a platform's colour, and outlined, so it reads as the one tile that is not
   a site. */
.sites a.more {
  --c: var(--accent);
  background: none; border: 1px dashed var(--line); color: var(--accent);
}
.sites a.more:hover { background: color-mix(in srgb, var(--accent) 7%, #fff); }
/* Twenty-five of these sit together, so the mark carries the row and the tile
   only has to hold it. Both shrank together: a smaller circle under the old
   mark read as a logo straining against its backing. The label keeps its size
   — it is the part being read. */
.sites-badge {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, #fff); color: var(--c, var(--accent));
}
.sites-badge svg { width: 13px; height: 13px; }

/* --- Formats ------------------------------------------------------------- */
.fmt-row { margin-top: 16px; }
.fmt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fmt-head h3 { font-size: .8125rem; color: var(--muted); }
.fmt-head a { font-size: .8125rem; font-weight: 600; color: var(--accent); }
.fmt-head a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips li { padding: 5px 12px; border-radius: 999px; background: var(--grey-btn); font-size: .8125rem; font-weight: 600; }
.chips li.unit { background: none; color: var(--faint); font-weight: 400; align-self: center; }

.inline-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: .8125rem;
}
.inline-links a { font-weight: 600; color: var(--accent); }
.inline-links a:hover { text-decoration: underline; }

/* --- Steps / FAQ / lists -------------------------------------------------- */
.steps { margin-top: 12px; display: grid; gap: 14px; }
.steps li { display: flex; gap: 12px; }
.steps .n {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: .8125rem; font-weight: 700;
}
.steps p { margin-top: 2px; color: var(--muted); }

.faq { margin-top: 4px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; align-items: center; padding-block: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-inline-start: auto; padding-inline-start: 16px; font-size: 1.25rem; line-height: 1; color: var(--faint); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { padding-bottom: 12px; color: var(--muted); }

.link-list li { border-bottom: 1px solid var(--line-soft); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { display: block; padding-block: 11px; font-weight: 600; color: var(--accent); }
.link-list a:hover { text-decoration: underline; }

.index li { border-bottom: 1px solid var(--line-soft); }
.index li:last-child { border-bottom: 0; }
.index a { display: block; padding-block: 14px; }
.index h2 { font-size: .9375rem; color: var(--accent); }
.index a:hover h2 { text-decoration: underline; }
.index p { margin-top: 4px; color: var(--muted); }

.prose h2 { margin-top: 24px; }
.prose p { margin-top: 8px; color: var(--muted); }

/* --- Footer -------------------------------------------------------------- */
.foot { margin-top: 24px; background: var(--surface); box-shadow: var(--shadow); }
.foot .wrap { padding-block: 20px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8125rem; }
.foot a { color: var(--muted); }
.foot a:hover { text-decoration: underline; }
.foot .copy { margin-top: 14px; font-size: .75rem; color: var(--faint); }

/* --- 404 ----------------------------------------------------------------- */
.nf { text-align: center; padding-block: 32px; }
.nf .code { font: 700 2.5rem/1 var(--display); color: var(--muted); }
.nf p { margin-top: 12px; font-size: 1.0625rem; font-weight: 600; }
.nf .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.nf .acts a { padding: 10px 20px; border-radius: var(--r); font-size: .875rem; font-weight: 600; background: var(--grey-btn); }
.nf .acts a:first-child { background: var(--accent); color: var(--on-accent); }

[hidden] { display: none !important; }

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

/* --- Status chip ---------------------------------------------------------
   The page claims the service is running, so it checks. Neutral until the
   answer arrives and neutral again if the check itself fails: a chip that
   cries wolf over one dropped request is worse than no chip at all. */
.trust .status { gap: 7px; }
.trust .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faint) 18%, transparent);
}
.trust .status[data-state='up'] .dot {
  background: var(--go);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--go) 20%, transparent);
}
.trust .status[data-state='down'] .dot {
  background: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent);
}

.terms a { color: var(--muted); text-decoration: underline; }
.terms a:hover { color: var(--accent); }

/* --- Our own card -------------------------------------------------------- */
.promo-lead { margin-top: 8px; max-width: 62ch; color: var(--muted); }
.promo-steps { margin-top: 14px; display: grid; gap: 10px; }
@media (min-width: 720px) { .promo-steps { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.promo-steps li {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: var(--r-card); background: var(--paper);
  font-size: .875rem; font-weight: 600;
}
/* The sentence keeps the row it always had; the drawing goes under it. */
.step-say { display: flex; align-items: flex-start; gap: 10px; }
/* Wider on a guide page than inside a step card: there it sits under a
   sentence in a narrow column, here it has the width of the card and is the
   first thing that explains what the page is about. */
.card > .step-art { max-width: 300px; margin-block: 14px 18px; }
.step-art {
  display: block; width: 100%; max-width: 230px; height: auto;
  /* Pushed to the bottom of the card so the three line up with each other
     even when one sentence runs to an extra line. */
  margin-top: auto; margin-inline: auto;
}
/* SVG text does not inherit the page font on its own. And the drawings are
   left-to-right whatever the page is — an address bar reads one way — so the
   direction is pinned here. Without it, `text-anchor: start` on an Arabic
   page means the right-hand side and the URL runs off the left of the box. */
.step-art { direction: ltr; }
.step-art text { font-family: var(--body); font-weight: 700; text-anchor: middle; }
/* Each of these has to out-rank `.step-art text` above, or the shared
   text-anchor wins and the URL centres itself off the left of the box. */
.step-art .sa-url { font-size: 10px; font-weight: 500; fill: var(--muted); text-anchor: start; }
.step-art .sa-tag { font-size: 9px; fill: var(--muted); }
.step-art .sa-on { fill: var(--accent); }
.promo-steps .n {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: .75rem; font-weight: 700;
}

/* --- blocks inside a guide section --------------------------------------- */
.bullets { margin-top: 10px; padding-inline-start: 1.15em; list-style: disc; }
.bullets li { margin-top: 6px; color: var(--muted); line-height: 1.65; }
.bullets li::marker { color: var(--faint); }

/* Scrolls rather than squeezing: a three-column table at 320px either wraps
   every cell to one character or pushes the page sideways, and only one of
   those is recoverable. */
.t-wrap { margin-top: 12px; overflow-x: auto; }
.t { width: 100%; border-collapse: collapse; font-size: .875rem; }
.t th, .t td { padding: 9px 12px; text-align: start; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.t th { font-weight: 700; color: var(--fg); }
.t td { color: var(--muted); }
.t tr:last-child td { border-bottom: 0; }

/* --- related links above the footer -------------------------------------- */
.frel { margin-top: 24px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.frel .wrap { padding-block: 22px 4px; }
.fcols { display: grid; gap: 20px 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fcols { grid-template-columns: repeat(3, 1fr); } }
.fcol h2 { font-size: .8125rem; font-weight: 700; color: var(--fg); }
.fcol ul { margin-top: 8px; display: grid; gap: 6px; font-size: .8125rem; }
.fcol a { color: var(--muted); }
.fcol a:hover { color: var(--accent); text-decoration: underline; }
/* The nav row below is the site's own map; no double rule between them. */
.frel + .foot { margin-top: 0; box-shadow: none; border-top: 1px solid var(--line-soft); }