/* Favabeans site chrome: the header (logo, nav, language link, "Aa Comfort" button + panel) and
   the footer, shared by every site page (home, sections, All apps, ReadThis, privacy, sync, 404).
   Markup: tools/site_chrome.py. Behaviour: /assets/chrome.js. Load after the page's own stylesheet.
   Own colour tokens (--c-*), so it looks the same on top of front.css, home.css or page.css.
   Theme and Comfort settings come from /assets/prefs.js: <html data-theme> when the visitor
   forces a theme (otherwise the device decides), data-text / data-text-xl, data-spacing, data-pictures. */
/* Fallback faces (shared by every site page) sized to match the web fonts, so nothing moves when they arrive (no layout
   shift). Latin only, so Arabic text still falls through to IBM Plex Sans Arabic. */
@font-face { font-family: 'Atkinson Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'), local('Roboto');
  size-adjust: 99.4%; ascent-override: 99%; descent-override: 31.8%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Instrument Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('Georgia Italic');
  size-adjust: 87.3%; ascent-override: 113%; descent-override: 35.5%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F; }
@font-face { font-family: 'Instrument Fallback'; font-style: normal; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Georgia');
  size-adjust: 87.3%; ascent-override: 113%; descent-override: 35.5%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F; }

/* Arabic: local fonts sized to IBM Plex Sans Arabic's measures (one face per common system font). */
@font-face { font-family: 'PA Fallback 1'; font-weight: 100 449; src: local('Segoe UI'), local('Arial'), local('Geeza Pro'), local('SF Arabic'); size-adjust: 100.0%; ascent-override: 108.5%; descent-override: 41.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 2'; font-weight: 100 449; src: local('Noto Sans Arabic'), local('NotoSansArabic-Regular'), local('Noto Sans Arabic UI'); size-adjust: 93.3%; ascent-override: 116.3%; descent-override: 44.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 3'; font-weight: 100 449; src: local('Noto Naskh Arabic'), local('NotoNaskhArabic-Regular'), local('Noto Naskh Arabic UI'); size-adjust: 103.1%; ascent-override: 105.2%; descent-override: 40.3%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 4'; font-weight: 100 449; src: local('DejaVu Sans'), local('DejaVuSans'); size-adjust: 88.5%; ascent-override: 122.6%; descent-override: 46.9%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

@font-face { font-family: 'PA Fallback 1'; font-weight: 550 900; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), local('Arial Bold'), local('Arial-BoldMT'), local('Geeza Pro Bold'); size-adjust: 100.0%; ascent-override: 108.5%; descent-override: 41.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 2'; font-weight: 550 900; src: local('Noto Sans Arabic Bold'), local('NotoSansArabic-Bold'); size-adjust: 92.0%; ascent-override: 117.9%; descent-override: 45.1%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 3'; font-weight: 550 900; src: local('Noto Naskh Arabic Bold'), local('NotoNaskhArabic-Bold'); size-adjust: 106.2%; ascent-override: 102.2%; descent-override: 39.1%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 4'; font-weight: 550 900; src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold'); size-adjust: 79.4%; ascent-override: 136.6%; descent-override: 52.3%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 1'; font-weight: 450 549; src: local('Segoe UI'), local('Arial'), local('Geeza Pro'), local('SF Arabic'); size-adjust: 100.0%; ascent-override: 108.5%; descent-override: 41.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 2'; font-weight: 450 549; src: local('Noto Sans Arabic'), local('NotoSansArabic-Regular'), local('Noto Sans Arabic UI'); size-adjust: 94.1%; ascent-override: 115.3%; descent-override: 44.1%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 3'; font-weight: 450 549; src: local('Noto Naskh Arabic'), local('NotoNaskhArabic-Regular'), local('Noto Naskh Arabic UI'); size-adjust: 105.2%; ascent-override: 103.1%; descent-override: 39.4%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'PA Fallback 4'; font-weight: 450 549; src: local('DejaVu Sans'), local('DejaVuSans'); size-adjust: 91.4%; ascent-override: 118.7%; descent-override: 45.4%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
/* Amiri (Arabic accent words): the same local fonts, with Amiri's measures. */
@font-face { font-family: 'AM Fallback 1'; src: local('Segoe UI'), local('Arial'), local('Geeza Pro'), local('SF Arabic'); size-adjust: 89.6%; ascent-override: 125.4%; descent-override: 70.8%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'AM Fallback 2'; src: local('Noto Sans Arabic'), local('NotoSansArabic-Regular'), local('Noto Sans Arabic UI'); size-adjust: 83.6%; ascent-override: 134.4%; descent-override: 75.8%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'AM Fallback 3'; src: local('Noto Naskh Arabic'), local('NotoNaskhArabic-Regular'), local('Noto Naskh Arabic UI'); size-adjust: 92.4%; ascent-override: 121.6%; descent-override: 68.6%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'AM Fallback 4'; src: local('DejaVu Sans'), local('DejaVuSans'); size-adjust: 79.3%; ascent-override: 141.7%; descent-override: 79.9%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  --c-bg: #f7f6f2; --c-card: #ffffff; --c-ink: #18181b; --c-ink2: #3d3d44; --c-ink3: #4a4a52; --c-onink: #ffffff;
  --c-soft: #f0efea; --c-hover: rgba(0,0,0,.05); --c-line: rgba(0,0,0,.08); --c-line2: rgba(0,0,0,.16);
  --c-hdr: rgba(247,246,242,.92); --c-blue: #2b55e6; --c-link: #2b55e6; --c-link-h: #1a3db8;
  --c-serif: 'Instrument Serif', 'Instrument Fallback', 'Amiri', Georgia, serif;
  --c-wrap: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #121214; --c-card: #1d1d21; --c-ink: #f2f1ec; --c-ink2: #c8c7c2; --c-ink3: #a9a8a3; --c-onink: #121214;
    --c-soft: #26262b; --c-hover: rgba(255,255,255,.07); --c-line: rgba(255,255,255,.10); --c-line2: rgba(255,255,255,.22);
    --c-hdr: rgba(18,18,20,.9); --c-blue: #9fb4ff; --c-link: #9fb4ff; --c-link-h: #c4d1ff;
  }
}
:root[data-theme="dark"] {
  --c-bg: #121214; --c-card: #1d1d21; --c-ink: #f2f1ec; --c-ink2: #c8c7c2; --c-ink3: #a9a8a3; --c-onink: #121214;
  --c-soft: #26262b; --c-hover: rgba(255,255,255,.07); --c-line: rgba(255,255,255,.10); --c-line2: rgba(255,255,255,.22);
  --c-hdr: rgba(18,18,20,.9); --c-blue: #9fb4ff; --c-link: #9fb4ff; --c-link-h: #c4d1ff;
}

/* Comfort: text size (A / A+ / A++). Every site stylesheet sizes text in rem, so it all grows. */
:root[data-text="large"] { font-size: 115%; }
:root[data-text="large"][data-text-xl="on"] { font-size: 130%; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--c-hdr); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); line-height: 1.5; }
.hdr-in { max-width: var(--c-wrap); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.hdr a { text-decoration: none; }
.hdr .logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.hdr .logo picture { display: contents; }
.hdr .logo img { display: block; height: 24px; width: auto; max-width: none; }
.hdr-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.hdr-nav a, .hdr .lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--c-ink); text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.hdr-nav a:hover, .hdr .lang-link:hover { background: var(--c-hover); color: var(--c-ink); text-decoration: none; }
.hdr-nav a[aria-current="page"] { background: var(--c-ink); color: var(--c-onink); }
.hdr .lang-link[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Plex Arabic Fallback', 'PA Fallback 1', system-ui, sans-serif; font-weight: 500; }
.hdr .lang-link[lang="en"] { font-family: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, sans-serif; }
.hdr .tools { display: flex; align-items: center; gap: 8px; }
.hbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--c-ink); background: var(--c-card); color: var(--c-ink); font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.hbtn:hover { background: var(--c-hover); }
.hbtn[aria-expanded="true"] { background: var(--c-ink); color: var(--c-onink); }
.hbtn .aa { font-family: var(--c-serif); font-size: 1.25rem; line-height: 1; }
.hdr :focus-visible, .foot :focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 8px; }

/* Comfort panel */
.comfort { border-top: 1px solid var(--c-line); background: var(--c-card); color: var(--c-ink); }
.comfort[hidden] { display: none; }
.comfort-in { max-width: var(--c-wrap); margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; }
.comfort-intro { margin: 0; font-size: .9375rem; color: var(--c-ink3); max-width: 190px; }
.cgroup { display: flex; flex-direction: column; gap: 6px; }
.clabel { font-size: .8125rem; font-weight: 600; color: var(--c-ink3); }
.comfort .seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--c-soft); padding: 4px; border-radius: 12px; }
.comfort .seg button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; background: transparent; color: var(--c-ink); }
.comfort .seg button:hover { background: var(--c-hover); }
.comfort .seg button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-onink); }
.comfort .seg-text button { min-width: 56px; }
.comfort .seg-text button:nth-child(1) { font-size: .875rem; }
.comfort .seg-text button:nth-child(2) { font-size: 1.0625rem; }
.comfort .seg-text button:nth-child(3) { font-size: 1.25rem; }
.comfort .done { margin-inline-start: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--c-ink); color: var(--c-onink); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.comfort :focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--c-line); margin-top: clamp(40px, 6vw, 72px); background: var(--c-card); color: var(--c-ink2); line-height: 1.5; }
.foot-in { max-width: var(--c-wrap); margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; font-size: .9375rem; color: var(--c-ink2); }
.foot-in > span a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
.foot-nav a, .foot-nav button { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.foot-nav a:hover, .foot-nav button:hover { color: var(--c-link-h); }
.foot-nav a[aria-current="page"] { color: var(--c-ink); font-weight: 700; text-decoration: none; }
.foot-nav button { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.foot-nav button[hidden] { display: none; }
.add-tips { max-width: var(--c-wrap); margin: 0 auto; padding: 0 24px 24px; font-size: .9375rem; color: var(--c-ink2); }
.add-tips[hidden] { display: none; }
.add-tips:focus { outline: none; }
.add-tips p { margin: 0; }
.add-tips p[hidden], .add-tips [data-when][hidden], .add-tips button[hidden] { display: none; }
.add-tips kbd { font: inherit; font-size: .85em; padding: 1px 6px; border: 1px solid var(--c-line2); border-radius: 6px; background: var(--c-bg); }
.add-tips .btn-o { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--c-ink); background: none; color: var(--c-ink); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.add-tips .btn-o:hover { background: var(--c-ink); color: var(--c-onink); }

/* ---------- Narrow screens ---------- */
.hdr-nav .lang-m { display: none; }
@media (max-width: 760px) {
  /* Two rows of header would cover too much of a phone screen, so it scrolls away here. */
  .hdr { position: relative; }
  .hdr-in { padding: 8px 16px 6px; column-gap: 8px; }
  .hdr .logo { order: 1; margin-inline-end: auto; }
  .hdr .tools { order: 2; }
  .hdr-nav { order: 3; flex-basis: 100%; margin-inline-start: -10px; gap: 0; }
  .hdr-nav a, .hdr .lang-link { padding: 0 10px; }
  .hbtn { padding: 0 14px; }
  .hdr .logo img { height: 20px; }
  .comfort-in { padding: 16px; gap: 16px 24px; }
  .comfort-intro { max-width: none; flex-basis: 100%; }
  .comfort .done { margin-inline-start: 0; }
  .foot-in, .add-tips { padding-inline: 16px; }
}
@media (max-width: 420px) {
  .hdr .tools .lang-link { display: none; }
  /* Fixed width, so the row wraps the same way before and after the Arabic font arrives. */
  .hdr-nav .lang-m { display: inline-flex; justify-content: center; width: 3.75rem; padding: 0; }
  .hdr-nav a, .hdr .lang-link { padding: 0 7px; font-size: .875rem; }
  /* A fixed 3 x 2 grid: the links land in the same places before and after the web fonts arrive. */
  .hdr-nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 6px; margin-inline: -7px; flex-basis: calc(100% + 14px); }
  .hdr-nav a { justify-content: center; }
  .hbtn { padding: 0 12px; gap: 6px; }
}
@media (max-width: 360px) {
  .hdr .logo img { height: 17px; }
}