/* ===========================================================================
   healthcare.med.sa — site styles
   Everything visual lives in this file. The colours are in one block at the
   top: change them there and the whole site follows.
   =========================================================================== */

:root {
  color-scheme: light;       /* native scrollbars and controls follow suit   */

  /* --- the national palette, used as accent on a calm ground -------------- */
  --green:        #046A38;   /* the accent: rules, buttons, the hero wash     */
  --green-deep:   #02351D;   /* dark panels                                  */
  --green-bright: #0C8A4B;   /* hover and focus                              */
  --sand:         #B98F44;   /* a single warm accent, used sparingly         */

  /* --- the ground -------------------------------------------------------- */
  --ground:  #F7F5EF;
  --panel:   #FFFFFF;
  --sunk:    #F0EDE3;
  --edge:    #E2DFD2;
  --ink:     #14201A;
  --ink-soft:#5C675F;
  --ink-dim: #5F6A62;

  --shadow-s: 0 1px 2px rgba(20, 32, 26, .05), 0 3px 10px rgba(20, 32, 26, .05);
  --shadow-m: 0 2px 6px rgba(20, 32, 26, .06), 0 14px 36px rgba(20, 32, 26, .09);

  --bar: 68px;                         /* height of the sticky top bar       */
  --gut: clamp(20px, 5vw, 64px);       /* page gutter                        */
  --maxw: 1180px;

  --f-display: "Saudi Font", "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Saudi Font", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "Saudi Font", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* ONE Arabic face, everywhere Arabic appears — the wordmark, the headings,
     the labels and the running text. Do not add a second: two Arabic styles
     on one page read as a mistake, and a Latin-only family named anywhere
     that Arabic can land silently hands the text to whatever the reader's
     system happens to have. */
  --f-ar: "Saudi Font", "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
}

/* Dark applies in two situations, and the two blocks below are deliberately
   identical: the reader's system is set to dark and they have NOT chosen
   light here, or they have chosen dark here outright. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --green:        #38B173;
    --green-deep:   #0B2318;
    --green-bright: #58C88F;
    --sand:         #D6AE68;
    --ground:  #0D1511;
    --panel:   #141E19;
    --sunk:    #101914;
    --edge:    #253129;
    --ink:     #E9EFEA;
    --ink-soft:#A3AFA7;
    --ink-dim: #9AA69E;
    --shadow-s: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.25);
    --shadow-m: 0 2px 6px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --green:        #38B173;
  --green-deep:   #0B2318;
  --green-bright: #58C88F;
  --sand:         #D6AE68;
  --ground:  #0D1511;
  --panel:   #141E19;
  --sunk:    #101914;
  --edge:    #253129;
  --ink:     #E9EFEA;
  --ink-soft:#A3AFA7;
  --ink-dim: #9AA69E;
  --shadow-s: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.25);
  --shadow-m: 0 2px 6px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.4);
}

/* --------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* A jump to #tools must clear the sticky bar, which is taller by the
     status-bar inset on a notched phone. */
  scroll-padding-top: calc(var(--bar) + env(safe-area-inset-top, 0px) + 18px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: 12px 20px;
  text-decoration: none; border-radius: 0 0 8px 0;
}
.skip:focus { inset-inline-start: 0; }

/* The page is declared viewport-fit=cover, so on a notched phone the layout
   runs edge to edge — under the notch in landscape and under the home
   indicator at the foot. Every gutter therefore takes the larger of the design
   gutter and the device's own safe inset. */
.wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left, 0px))
                  max(var(--gut), env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------------ typography -- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0;
             text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.06; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.22; font-weight: 600; }
p  { margin: 0; }
.lede { font-size: clamp(1.12rem, 1.8vw, 1.35rem); line-height: 1.6;
        color: var(--ink-soft); max-width: 62ch; }
.eyebrow {
  font-family: var(--f-mono); font-size: 0.838rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--green); flex: none;
}
/* Any Arabic anywhere: the one face, and no Latin letter-spacing. */
.ar, .ar * { font-family: var(--f-ar); letter-spacing: 0; }
.ar { direction: rtl; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------------------------------------------------------- the top bar --- */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 120;
  background: linear-gradient(90deg, var(--green), var(--green-bright));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
.topbar {
  /* Sticks to the very top — the status-bar inset is added as padding inside
     the bar, so the blurred background reaches the top edge and no content
     ever scrolls through a gap above the bar. */
  position: sticky; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.topbar.stuck { border-bottom-color: var(--edge); }
.topbar-in {
  height: var(--bar); display: flex; align-items: center; gap: 18px;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left, 0px))
                  max(var(--gut), env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand .mk { height: 34px; width: auto; fill: var(--ink); display: block; }
.brand b {
  font-family: var(--f-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.01em; white-space: nowrap;
}
.brand span { color: var(--ink-dim); font-size: .78rem; display: none; }
@media (min-width: 900px) { .brand span { display: inline; } }

.nav {
  margin-inline-start: auto; display: flex; align-items: center; gap: 2px;
  /* On a narrow phone three labels plus the brand are wider than the screen.
     Let the strip scroll inside itself rather than pushing the page sideways. */
  min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
.nav .long { display: inline; }
.nav .short { display: none; }
.nav a {
  position: relative; text-decoration: none; padding: 9px 14px;
  font-size: .95rem; font-weight: 500; color: var(--ink-soft);
  border-radius: 8px; white-space: nowrap; transition: color .18s, background .18s;
}
.nav a:hover { color: var(--ink); background: var(--sunk); }
.nav a[aria-current="true"], .nav a[aria-current="page"] { color: var(--green); }
.nav a[aria-current="true"]::after, .nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 2px;
  background: var(--green); border-radius: 2px;
}
@media (max-width: 640px) {
  .nav a { padding: 8px 10px; font-size: .86rem; }
  .brand b { font-size: .95rem; }
  .topbar-in { gap: 10px; }
}
@media (max-width: 560px) {
  /* the long label is the first thing to go */
  .nav .long { display: none; }
  .nav .short { display: inline; }
}
@media (max-width: 430px) {
  /* Next to go is the wordmark. The mark itself still links home, so nothing
     is lost — and without this the light/dark button pushes "The author" off
     the end of the strip, where nobody would think to scroll for it. */
  .brand b { display: none; }
  .topbar-in { gap: 6px; }
  /* the button is shrunk further down, where it is defined — a rule here
     would sit before it in the file and lose */
}

/* -------------------------------------------------------------- sections -- */
.sec { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.sec + .sec { border-top: 1px solid var(--edge); }
.sec-head { display: flex; flex-direction: column; gap: 14px;
            align-items: flex-start; margin-bottom: clamp(32px, 4vw, 54px); }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(46px, 7vw, 92px) clamp(40px, 5vw, 70px);
}
.hero-wash {
  position: absolute; inset: -30% -10% auto -10%; height: 150%; z-index: 0;
  background:
    radial-gradient(48% 52% at 18% 8%, color-mix(in srgb, var(--green) 20%, transparent), transparent 70%),
    radial-gradient(40% 44% at 88% 22%, color-mix(in srgb, var(--sand) 17%, transparent), transparent 72%);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 1; }

.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 15.5vw, 11rem);
  line-height: .86; letter-spacing: -.035em; font-weight: 600;
  margin: 0;
}
.hero h1 .en { display: block; }
.hero h1 .ar {
  /* RTL text in an LTR page aligns right by default; the lockup wants both
     words flush to the same edge. */
  display: block; width: fit-content; text-align: start;
  /* 600, not 500: the Arabic face ships 400 and 600, and a request for 500
     resolves down to 400 — too light to sit under a 600-weight Latin line. */
  font-family: var(--f-ar); font-weight: 600;
  font-size: .5em; line-height: 1.3; letter-spacing: 0;
  color: var(--green); margin-top: .1em;
}
.hero .lede { margin-top: clamp(22px, 3vw, 34px); font-size: clamp(1.15rem, 2vw, 1.5rem); }
.hero-rule { height: 3px; width: 92px; background: var(--green); margin-top: 30px;
             border-radius: 2px; }

/* ------------------------------------------------------- the jump tiles --- */
.tiles { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 60px);
         grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
  padding: 22px 24px 20px; box-shadow: var(--shadow-s);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-m);
              border-color: color-mix(in srgb, var(--green) 40%, var(--edge)); }
.tile .n { font-family: var(--f-mono); font-size: 0.813rem; color: var(--green);
           letter-spacing: .14em; }
.tile b { font-family: var(--f-display); font-size: 1.22rem; font-weight: 600; }
.tile span { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.tile .go { margin-top: auto; padding-top: 10px; color: var(--green);
            font-weight: 600; font-size: .9rem; display: inline-flex; gap: 7px;
            align-items: center; }
.tile .go svg { width: 15px; height: 15px; transition: transform .2s; }
.tile:hover .go svg { transform: translateX(4px); }

/* ------------------------------------------------------------ news band --- */
.news { margin-top: clamp(44px, 6vw, 76px); }
.news-top { display: flex; align-items: baseline; justify-content: space-between;
            gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.news-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--edge);
  box-shadow: var(--shadow-m);
}
.news-track { display: flex; transition: transform .58s cubic-bezier(.4, 0, .15, 1); }
@media (prefers-reduced-motion: reduce) { .news-track { transition: none; } }
.slide { flex: 0 0 100%; display: grid; grid-template-columns: 1.05fr 1fr;
         min-height: 340px; }
.slide-art { position: relative; overflow: hidden; background: var(--sunk); }
.slide-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-body { padding: clamp(26px, 3.4vw, 44px); display: flex;
              flex-direction: column; gap: 14px; justify-content: center; }
.slide-kick { font-family: var(--f-mono); font-size: 0.813rem; letter-spacing: .15em;
              text-transform: uppercase; color: var(--green); }
.slide-body h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.12; }
.slide-body p { color: var(--ink-soft); font-size: 1rem; max-width: 46ch; }
.slide-date { font-family: var(--f-mono); font-size: 0.856rem; color: var(--ink-dim); }
.pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: 100px; font-weight: 600; font-size: .92rem;
  transition: background .18s, transform .18s;
}
.pill svg { width: 15px; height: 15px; flex: none; transition: transform .2s; }
.pill:hover { background: var(--green-bright); transform: translateY(-2px); }
.card:hover .pill svg, .pill:hover svg { transform: translateX(4px); }
.pill.ghost { background: transparent; color: var(--green);
              box-shadow: inset 0 0 0 1.5px var(--green); }
.pill.ghost:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.pill[aria-disabled="true"] { background: var(--sunk); color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--edge); pointer-events: none; }

.news-nav { display: flex; align-items: center; gap: 10px; }
.dots { display: flex; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
       background: var(--edge); cursor: pointer; transition: background .2s, width .2s; }
.dot[aria-current="true"] { background: var(--green); width: 26px; border-radius: 5px; }
.arw { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--edge);
       background: var(--panel); color: var(--ink); cursor: pointer;
       display: grid; place-items: center; transition: border-color .2s, color .2s; }
.arw:hover { border-color: var(--green); color: var(--green); }
.arw svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; }
  .slide-art { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------- tools --- */
.cards { display: grid; gap: 22px;
         grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: 14px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 18px;
  padding: 30px 30px 26px; box-shadow: var(--shadow-s); position: relative;
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--green), var(--sand));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.card:hover::before { transform: scaleX(1); }
.card.soon { background: var(--sunk); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge {
  font-family: var(--f-mono); font-size: 0.813rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 100px;
  background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green);
  font-weight: 600; white-space: nowrap;
}
.badge.grey { background: var(--edge); color: var(--ink-soft); }
.card h3 { font-size: clamp(1.32rem, 2.2vw, 1.62rem); }
.card .sub { font-family: var(--f-ar); direction: rtl; unicode-bidi: isolate;
             color: var(--ink-soft); font-size: 1.02rem; }
.card p { color: var(--ink-soft); font-size: .97rem; line-height: 1.6; }
.card ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex;
           flex-direction: column; gap: 7px; }
.card li { position: relative; padding-inline-start: 18px; font-size: .92rem;
           color: var(--ink-soft); }
.card li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green); opacity: .55;
}
/* the card's button. Not called "foot": the page footer already owns that
   class, and the two collided. */
.card .cta { margin-top: auto; align-self: flex-start; }

.beta-note {
  margin-top: 28px; padding: 18px 22px; border-radius: 12px;
  background: var(--sunk); border: 1px solid var(--edge);
  color: var(--ink-soft); font-size: .93rem; line-height: 1.6;
}
.beta-note b { color: var(--ink); }

/* --------------------------------------------------------------- author --- */
.author-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr);
               gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 800px) { .author-grid { grid-template-columns: 1fr; } }
.portrait {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--edge);
  box-shadow: var(--shadow-m); background: var(--sunk); max-width: 250px;
}
.portrait img { display: block; width: 100%; height: auto; }
.a-role { color: var(--ink-soft); font-size: 1.02rem; max-width: 54ch; }
.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
         border: 1px solid var(--edge); border-radius: 12px; overflow: hidden;
         background: var(--panel); margin-top: 26px; }
.stat { padding: 16px 18px; border-inline-end: 1px solid var(--edge); }
.stat:last-child { border-inline-end: 0; }
.stat b { display: block; font-family: var(--f-display); font-size: 1.5rem;
          font-weight: 600; color: var(--green); }
.stat span { font-size: 0.913rem; color: var(--ink-soft); }
.prose { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.prose p { color: var(--ink-soft); max-width: 66ch; line-height: 1.7; }
.prose p:first-child { font-size: 1.1rem; color: var(--ink); }

.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.chip { border: 1px solid var(--edge); border-radius: 100px; padding: 7px 15px;
        font-size: .88rem; color: var(--ink-soft); background: var(--panel); }

.rcards { display: grid; gap: 18px; margin-top: 22px;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rcard { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
         padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.rcard .n { font-family: var(--f-mono); font-size: 0.813rem; color: var(--green); }
.rcard h4 { margin: 0; font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; }
.rcard p { color: var(--ink-soft); font-size: .93rem; line-height: 1.62; margin: 0; }
.rcard a.more { margin-top: auto; padding-top: 8px; color: var(--green);
                font-weight: 600; font-size: .88rem; text-decoration: none; display: block; }
.rcard a.more:hover { text-decoration: underline; }

.edu { display: grid; gap: clamp(24px, 4vw, 48px); margin-top: 22px;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.edu h4 { margin: 0 0 12px; font-family: var(--f-mono); font-size: 0.813rem;
          letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
          font-weight: 600; }
.row { display: grid; grid-template-columns: 58px 1fr; gap: 14px;
       padding-block: 13px; border-top: 1px solid var(--edge); }
.row .yr { font-family: var(--f-mono); font-size: 0.894rem; color: var(--ink-dim);
           direction: ltr; unicode-bidi: isolate; }
.row b { display: block; font-size: .98rem; font-weight: 600; }
.row span { color: var(--ink-soft); font-size: .9rem; }

.contact { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
           margin-top: 30px; padding: 28px; border-radius: 16px;
           background: var(--panel); border: 1px solid var(--edge); }
.cline b { display: block; font-family: var(--f-mono); font-size: 0.813rem;
           letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
           margin-bottom: 5px; font-weight: 600; }
.cline a, .cline span { color: var(--ink); text-decoration: none; font-size: 1rem; }
.cline a:hover { color: var(--green); text-decoration: underline; }
.cnote { margin-top: 18px; color: var(--ink-dim); font-size: 0.938rem; max-width: 70ch; }

.langbtn {
  border: 1px solid var(--edge); background: var(--panel); color: var(--ink);
  border-radius: 100px; padding: 7px 16px; font: inherit; font-size: .86rem;
  font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s;
}
.langbtn:hover { border-color: var(--green); color: var(--green); }

/* ------------------------------------------------- light / dark switch ---- */
.themebtn {
  /* It does nothing without JavaScript, so without JavaScript it is not
     offered. app.js puts the .js class on <html>. */
  display: none;
  flex: none; width: 38px; height: 38px; padding: 0; margin-inline-start: 2px;
  place-items: center; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 100px;
  background: var(--panel); color: var(--ink-soft);
  transition: border-color .2s, color .2s, background .2s;
}
.js .themebtn { display: grid; }
.themebtn:hover { border-color: var(--green); color: var(--green); }
.themebtn svg { width: 18px; height: 18px; grid-area: 1 / 1; }

/* One icon shows at a time: the one for the mode you would switch TO.
   In light you see the moon; in dark you see the sun. */
.themebtn .i-moon { display: block; }
.themebtn .i-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn .i-moon { display: none; }
  :root:not([data-theme="light"]) .themebtn .i-sun  { display: block; }
}
:root[data-theme="dark"] .themebtn .i-moon { display: none; }
:root[data-theme="dark"] .themebtn .i-sun  { display: block; }
/* An explicit choice of light always wins, whatever the system says. */
:root[data-theme="light"] .themebtn .i-moon { display: block; }
:root[data-theme="light"] .themebtn .i-sun  { display: none; }

@media (max-width: 430px) {
  .themebtn { width: 34px; height: 34px; }
  .themebtn svg { width: 16px; height: 16px; }
}

/* ---------------------------------------------- Arabic on the author's page
   The face is set ONCE, on the section, and inherited by everything inside
   it. The previous version listed the elements that should get it, and the
   ones the list forgot — the eyebrows, the contact labels, the Scholar link
   — kept a Latin-only family, so the browser quietly handed their Arabic to
   whatever font the reader's own machine offered. A list cannot be trusted
   to stay complete; inheritance can.

   The `*` is there because several elements name a family of their own, and
   an element's own rule beats anything inherited.

   !important is deliberate, and is the only place in this file that uses it.
   Component rules like `.edu h4` and `.cline b` name the monospace face,
   which carries no Arabic at all; being more specific than any sane
   language selector, they would win and hand their Arabic to whichever font
   the reader's machine happened to offer. Which face carries a language is
   not a decision a component gets to make, so the language scope overrules
   it outright rather than by out-specifying each new component in turn.

   Letter-spacing goes with it: in Arabic it pulls the joined letters apart,
   the cursive connections break, and the word looks misspelt. It is a Latin
   device and has no place here at any size. */
[data-lang="ar"], [data-lang="ar"] * {
  font-family: var(--f-ar) !important;
  letter-spacing: 0 !important;
}
[data-lang="ar"] { direction: rtl; }

[data-lang="ar"] .prose p, [data-lang="ar"] .a-role, [data-lang="ar"] .rcard p,
[data-lang="ar"] .row span, [data-lang="ar"] .chip, [data-lang="ar"] .cnote,
[data-lang="ar"] .stat span, [data-lang="ar"] .row b, [data-lang="ar"] .lede {
  line-height: 1.95;
}
[data-lang="ar"] .stat b, [data-lang="ar"] .row .yr, [data-lang="ar"] .rcard .n {
  direction: ltr; unicode-bidi: isolate;
}
[data-lang="ar"] .eyebrow::before { display: none; }
/* Arabic has no upper case; the instruction is a no-op that only risks
   surprises in a future browser. */
[data-lang="ar"] .eyebrow { text-transform: none; }

/* --------------------------------------------------------------- footer --- */
.foot { background: var(--green-deep); color: #D9E5DE;
        padding-block: 54px calc(42px + env(safe-area-inset-bottom, 0px)); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 30px;
              justify-content: space-between; align-items: flex-start; }
.foot .mk { height: 46px; width: auto; fill: #fff; opacity: .92; display: block; }
.foot a { color: #fff; }
.foot-links { display: flex; flex-direction: column; gap: 9px; font-size: .93rem; }
.foot-note { font-size: 0.913rem; color: #94AFA1; max-width: 46ch; line-height: 1.6; }

/* --------------------------------------------------------- reveal motion -- */
.js .r { opacity: 0; transform: translateY(22px); }
.js .r.in { opacity: 1; transform: none;
            transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.js .r.d1.in { transition-delay: .07s; }
.js .r.d2.in { transition-delay: .14s; }
.js .r.d3.in { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .js .r { opacity: 1; transform: none; }
  .js .r.in { transition: none; }
}

/* print: the page is a document, not a screen */
.nav a{padding:9px 10px} .nav a[aria-current="true"]::after,.nav a[aria-current="page"]::after{display:none} .nav a[aria-current="true"],.nav a[aria-current="page"]{background:color-mix(in srgb,var(--green) 12%,transparent);font-weight:600} @media print {
  .topbar, .progress, .news, .tiles, .langbtn, .foot { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .js .r { opacity: 1 !important; transform: none !important; }
}


/* ===========================================================================
   Top bar refresh — 22 October 2026
   The active nav item carried a tinted pill AND a 2px underline. Two markers
   for one state read as a heavy button rather than "you are here", so the
   pill goes and the underline stays. Hover gets a lighter version of the same
   underline, which keeps one visual language instead of two.
   =========================================================================== */
.nav a{ border-radius:0; padding:10px 13px; }
.nav a:hover{ background:transparent; color:var(--ink); }
.nav a[aria-current="true"], .nav a[aria-current="page"]{ background:transparent; }

/* One shared underline geometry for hover and current, so the hover state
   previews exactly where the marker will land. */
.nav a::after{
  /* display is set explicitly: an earlier rule hides this pseudo-element by
     default and reveals it only for the current page, so without this the
     hover underline never appears and the current one stays hidden too. */
  content:""; display:block; position:absolute; left:13px; right:13px; bottom:4px;
  height:2px; border-radius:2px; background:var(--green);
  transform:scaleX(0); transform-origin:center;
  transition:transform .2s ease, opacity .2s ease; opacity:.45;
}
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="true"]::after, .nav a[aria-current="page"]::after{
  display:block; transform:scaleX(1); opacity:1;
  left:13px; right:13px; bottom:4px; width:auto;
}

/* A hairline between the links and the controls: the two do different jobs and
   were previously floating in the same undifferentiated row. */
.nav{ gap:0; padding-inline-end:12px; margin-inline-end:12px;
  border-inline-end:1px solid var(--edge); }

/* The language and theme buttons become a matched pair rather than one pill
   and one circle. */
.topbar-in .langbtn{
  height:38px; padding:0 15px; border-radius:999px;
  border:1px solid var(--edge); background:var(--panel); color:var(--ink-soft);
  font-size:.86rem; font-weight:500; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; white-space:nowrap;
  transition:color .18s, border-color .18s, background .18s;
  margin-inline-end:8px;
}
.topbar-in .langbtn:hover{ color:var(--green); border-color:var(--green); background:var(--panel); }
.topbar-in .langbtn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

@media (max-width:860px){
  /* On a phone the divider and the extra gutter cost width the labels need. */
  .nav{ border-inline-end:none; padding-inline-end:0; margin-inline-end:4px; }
  .topbar-in .langbtn{ height:34px; padding:0 11px; font-size:.8rem; margin-inline-end:6px; }
  .nav a::after{ left:10px; right:10px; }
}


/* ===========================================================================
   Top bar scale — 22 October 2026
   Measured first: at the 1180px max width the bar had 72px of horizontal slack
   once the brand, seven links and two controls were laid out. Height is free,
   so it grows generously; the type grows modestly and through clamp() rather
   than a fixed bump, because a flat increase overflowed that 72px at the wider
   end and would have pushed the strip back into internal scrolling at the
   narrower end — the thing the labels were shortened to avoid.
   =========================================================================== */
:root{ --bar:84px; }

.nav a{
  font-size:clamp(.88rem, .70rem + .52vw, 1.02rem);
  padding:13px 11px;
  letter-spacing:.005em;
}
.nav a::after{ left:11px; right:11px; bottom:6px; }
.nav a[aria-current="true"]::after, .nav a[aria-current="page"]::after{
  left:11px; right:11px; bottom:6px;
}

/* Controls scale with the bar so they stay optically centred against taller
   type rather than looking like leftovers from the shorter bar. */
.topbar-in .langbtn{ height:42px; padding:0 17px; font-size:.9rem; }
.themebtn{ width:42px; height:42px; }
.themebtn svg{ width:19px; height:19px; }

.brand b{ font-size:1.12rem; }
.brand .mk{ width:28px; height:38px; }

@media (max-width:1100px){
  /* Below this the slack is gone, so the bar keeps its height but the type and
     controls step back to what fits. */
  :root{ --bar:76px; }
  .topbar-in .langbtn{ height:38px; padding:0 14px; font-size:.84rem; }
  .themebtn{ width:38px; height:38px; }
  .brand b{ font-size:1.02rem; }
  .brand .mk{ width:25px; height:34px; }
}

@media (max-width:860px){
  :root{ --bar:68px; }
  .nav a{ padding:10px 10px; }
  .nav a::after{ left:10px; right:10px; bottom:5px; }
  .nav a[aria-current="true"]::after, .nav a[aria-current="page"]::after{ left:10px; right:10px; }
  .brand b{ font-size:.96rem; }
}