/* Language support shared by both sites: script fonts, RTL rules, language bar.
   Both sites load this one file, so it holds no personal text. Colors come only from the tokens in styles.css. */

/* Self-hosted, as on the .de site. The language bar names Arabic and Tifinagh in their own scripts on every page,
   so the two regular weights are fetched everywhere (about 67 KB); unicode-range only holds back Arabic 600.
   SIL OFL 1.1, see the OFL-*.txt files in ../assets/fonts. */
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/noto-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/noto-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "Noto Sans Tifinagh"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/noto-sans-tifinagh-tifinagh-400-normal.woff2") format("woff2"); unicode-range: U+02C7,U+0301-0302,U+0304,U+0306-0307,U+0309,U+0323,U+0331,U+200C-200D,U+202E,U+25CC,U+2D30-2D7F; }

/* Inter stays first so Latin brand names and domains keep the house face; the script font covers the rest.
   body and the monospace labels set their own family in styles.css, so they are restated here. */
[lang="ar"], [lang="ar"] body { font-family: "Inter", "Noto Sans Arabic", system-ui, sans-serif; }
[lang="ar"] :is(.cmd, .tags li, .frame-bar, .when, .fit-label, .layer-table td:last-child) { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; }
[lang="kab-Tfng"], [lang="kab-Tfng"] body { font-family: "Inter", "Noto Sans Tifinagh", system-ui, sans-serif; }
[lang="kab-Tfng"] :is(.cmd, .tags li, .frame-bar, .when, .fit-label, .layer-table td:last-child) { font-family: "JetBrains Mono", "Noto Sans Tifinagh", monospace; }
/* Arabic letters lose their joins when tracked, and need more line height than Latin. */
[lang="ar"] body { line-height: 1.8; }
[lang="ar"] :is(h1, h2, h3, .cmd, .tags li, .status, .proof-lead, .stat strong, .contact-card dt, .case-facts dt, .case-nav .label, .layer-table thead th, .next-project small, .fit-label) { letter-spacing: 0; }

/* Screenshots run left to right in every language, so arrows, dots and swipe keep their meaning;
   only the caption text follows the page direction. */
[dir="rtl"] .slider { direction: ltr; }
[dir="rtl"] .slide-caption { direction: rtl; }
/* A figure like ~40% needs dir="ltr" to keep its signs in place, which would also pull it to the left of its card. */
[dir="rtl"] .stat strong[dir="ltr"] { text-align: right; }

/* styles.css uses logical properties, so the page mirrors by itself. Two things cannot:
   the slider's own direction is ltr, so its logical border would stay on the wrong side of the card;
   and a gradient has no logical direction, so the fades on the scrolling strips are restated. */
[dir="rtl"] .card.lg .slider { border-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 1080px) {
  [dir="rtl"] .nav { -webkit-mask-image: linear-gradient(to left, currentColor calc(100% - 40px), transparent); mask-image: linear-gradient(to left, currentColor calc(100% - 40px), transparent); }
  [dir="rtl"] .nav.at-end { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 1000px) { [dir="rtl"] .card.lg .slider { border-left: 0; } }
@media (max-width: 760px) {
  /* The filter strip scrolls toward the left in RTL, so the "more" fade belongs on that edge. */
  [dir="rtl"] .filters { -webkit-mask-image: linear-gradient(to left, currentColor calc(100% - 40px), transparent); mask-image: linear-gradient(to left, currentColor calc(100% - 40px), transparent); }
  [dir="rtl"] .filters.at-end { -webkit-mask-image: none; mask-image: none; }
}

/* Commands and tag lists stay ltr so they read correctly, but in an RTL page they still sit on its right edge. */
[dir="rtl"] .cmd[dir="ltr"] { text-align: end; }
[dir="rtl"] .tags[dir="ltr"] { justify-content: flex-end; }

/* The resume exists in English only; pages in other languages say so beside the button. */
.resume-note { align-self: center; font-size: .8rem; color: var(--muted); }
.sticky .resume-note { display: block; margin-top: 6px; }

/* Language switcher: a thin strip above the sticky header, so the header row keeps its layout. */
.lang-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
.lang-bar .wrap { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; min-height: 40px; padding-block: 4px; }
.lang-switch { display: flex; flex-wrap: wrap; gap: 2px; }
.lang-switch a, .script-toggle { padding: 4px 10px; border-radius: 8px; font-size: .84rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: .2s; }
.lang-switch a:hover, .script-toggle:hover { color: var(--text); background: var(--surface-2); }
.lang-switch a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.script-toggle { margin-inline-start: auto; border: 1px solid var(--line); }
.script-toggle .on { color: var(--accent); font-weight: 600; }
@media (pointer: coarse) { .lang-switch a, .script-toggle { display: inline-flex; align-items: center; min-height: 44px; } }
/* On phones a wrapped bar pushes the page down a whole row; keep it to one row that scrolls sideways. */
@media (max-width: 760px) {
  .lang-bar .wrap { flex-wrap: nowrap; gap: 8px; }
  .lang-switch { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lang-switch::-webkit-scrollbar { display: none; }
  .lang-switch a { flex: none; white-space: nowrap; padding-inline: 7px; }
  /* The switcher already lists Tamaziɣt and ⵜⴰⵎⴰⵣⵉⵖⵜ side by side, so the script toggle only costs room here. */
  .script-toggle { display: none; }
}