/* Fonts are self-hosted (public/fonts): Aileron (CC0) for Latin, Almarai (SIL OFL 1.1, see fonts/OFL-Almarai.txt) for Arabic. */
@font-face{font-family:'Aileron'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/aileron-300.woff2') format('woff2')}
@font-face{font-family:'Aileron'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/aileron-400.woff2') format('woff2')}
@font-face{font-family:'Aileron'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/aileron-600.woff2') format('woff2')}
@font-face{font-family:'Aileron'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/aileron-700.woff2') format('woff2')}
@font-face{font-family:'Almarai'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/almarai-300-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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:'Almarai'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/almarai-300-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Almarai'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/almarai-400-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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:'Almarai'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/almarai-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Almarai'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/almarai-700-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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:'Almarai'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/almarai-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Almarai'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/almarai-800-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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:'Almarai'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/almarai-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =====================================================================
   EEC · To The Top — light by default (white, mist and the brand blues), with an opt-in dark theme
   (:root[data-scheme="dark"], ROUND 8 block at the end). Type: Aileron (Latin) + Almarai (Arabic) only.
   Tokens: colour roles · type · 4/8pt space · radii · glass · motion
   ===================================================================== */
@property --flood { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --shine { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
:root{
  color-scheme:light;
  /* official palette — never changes */
  --royal:#061bb0; --navy:#01286c; --electric:#0057ff; --sky:#019cec; --peri:#768fc8; --white:#ffffff;
  /* light, navy-tinted neutrals */
  --bg:#ffffff; --bg-2:#f5f7fc; --bg-3:#edf1fa; --mist:#e2e9f7;
  --ink:#0a1433; --ink-2:#36426a; --ink-3:#556188;
  --line:rgba(1,40,108,.09); --line-2:rgba(1,40,108,.15); --line-3:rgba(1,40,108,.24);
  --accent:#0057ff; --accent-ink:#0b3fd6; --accent-soft:rgba(0,87,255,.07); --accent-soft-2:rgba(0,87,255,.12);
  --focus:#0057ff;
  --on-brand:#ffffff; --on-brand-2:rgba(255,255,255,.86); --on-brand-3:rgba(232,239,255,.78);
  --grad-sig:linear-gradient(100deg, #01286c 0%, #061bb0 30%, #0057ff 64%, #768fc8 100%);
  --grad-deep:linear-gradient(135deg, #01286c 0%, #061bb0 46%, #0057ff 100%);
  --shadow-1:0 1px 2px rgba(1,24,80,.05), 0 10px 26px -14px rgba(1,24,80,.20);
  --shadow-2:0 2px 6px rgba(1,24,80,.06), 0 28px 64px -28px rgba(1,24,80,.36);
  --shadow-lift:0 2px 6px rgba(1,24,80,.06), 0 22px 44px -20px rgba(1,24,80,.32);
  --shadow-blue:0 18px 44px -18px rgba(0,60,220,.55), 0 4px 12px -4px rgba(1,24,80,.22);
  /* surface roles (light values; the dark scheme redefines every one under :root[data-scheme="dark"]) */
  --page:#ffffff; --surface:#ffffff; --surface-hover:#f7f9ff; --card:#ffffff;
  --thumb:#ffffff; --thumb-shadow:0 1px 2px rgba(10,20,60,.10), 0 6px 16px rgba(10,20,60,.08), inset 0 0 0 .5px rgba(1,40,108,.08);
  --ink-brand:#061bb0; --ink-dim:#848eb0; --word-hot:#0057ff; --badge-ring:#ffffff; --fly-ring:rgba(255,255,255,.95);
  --btn-ink:#061bb0; --btn-ink-hover:#0a24c8; --btn-ink-shadow:0 10px 24px -12px rgba(6,27,176,.7);
  --due-hot:#061bb0;
  --hdr-calm:rgba(248,250,255,.96); --hdr-calm-2:rgba(248,250,255,.86);
  --lens:linear-gradient(180deg, rgba(0,87,255,.14), rgba(0,87,255,.06)); --lens-rim:inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1.5px rgba(0,87,255,.62);
  --sel-ring:inset 0 0 0 1.5px var(--accent);
  /* the phone bars: near-opaque so page text never reads through their labels */
  --bar-tint:linear-gradient(180deg, rgba(255,255,255,.93), rgba(246,249,255,.9)); --bar-tint-brand:linear-gradient(180deg, rgba(28,62,206,.9), rgba(6,27,150,.92));
  --sres-bg:rgba(255,255,255,.88); --sres-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(6,27,176,.08), 0 24px 60px -20px rgba(6,27,176,.35);
  --scrim:rgba(10,24,72,.22); --scrim-2:rgba(10,24,72,.3); --scrim-solid:rgba(10,24,72,.55);
  --hl-grad:linear-gradient(100deg, #061bb0 0%, #0057ff 58%, #2f8cff 100%);
  --stat-grad:linear-gradient(100deg, #01286c, #061bb0 45%, #0057ff); --stat-p:#0057ff; --stat-bar:#0057ff, #061bb0;
  --shelf-bg:#edf3ff; --shelf-deep:#d6e2ff; --shelf-deep-2:#d0ddff;
  --term-fill:rgba(6,27,176,.42); --term-done:rgba(6,27,176,.55); --term-next:#0057ff; --term-next-ring:rgba(0,87,255,.13); --term-hot:rgba(0,87,255,.55);
  --sw-num:#36426a; --sw-num-on:#0b3fd6;
  --field-line:rgba(1,40,108,.55); --ink-ph:#4a5578;
  --scope-s:rgba(6,27,176,.55); --scope-l:#0057ff; --scope-g:rgba(1,40,108,.16);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%230b3fd6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --film-tools-bg:rgba(255,255,255,.84); --film-tools-shadow:0 18px 50px -18px rgba(1,20,90,.55), inset 0 1px 0 rgba(255,255,255,.9);

  /* Liquid Glass (control layer only) */
  --glass-ink:#0a1433;
  --glass-tint:linear-gradient(180deg, rgba(255,255,255,.80), rgba(244,248,255,.58));
  --glass-rim:rgba(255,255,255,.95); --glass-rim-2:rgba(1,40,108,.10);
  --glass-shadow:0 12px 32px -14px rgba(1,24,80,.32), 0 2px 6px rgba(1,24,80,.08);
  --glass-dark-tint:linear-gradient(180deg, rgba(64,100,235,.30), rgba(8,26,130,.24));
  --glass-solid:#ffffff; --glass-solid-dark:#0b1f86; --glass-solid-calm:rgba(255,255,255,.96);
  --glass-edge:linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,255,255,.18) 32%, rgba(190,210,255,.10) 55%, rgba(120,150,230,.32) 85%, rgba(255,255,255,.8));
  --glass-sheen:.95;

  /* type */
  --font-latin:'Aileron', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:'Almarai', 'Aileron', system-ui, sans-serif;
  --font-body:var(--font-latin);
  --fs-display:clamp(60px, 7.6vw, 124px);
  --fs-h2:clamp(42px, 5.4vw, 80px);
  --fs-statement:clamp(28px, 3.4vw, 50px);
  --fs-lead:clamp(17px, 1.3vw, 19px);

  /* space · radii · motion */
  --gutter:clamp(16px, 5vw, 80px);
  --maxw:1264px;
  --band:clamp(80px, 8.4vw, 128px);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --pill:999px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --spring:linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1 28.4%, 1.042 34.6%, 1.008 39.7%, .994 44.6%, .997 56.6%, 1);
  --t-fast:160ms; --t-med:240ms;
  --hdr-h:72px;
}
:root[lang="ar"]{ --font-body:var(--font-arabic); }

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:92px; background:var(--page)}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; text-rendering:optimizeLegibility}
:root[lang="ar"] body{line-height:1.8}
img{max-width:100%; display:block}
a{color:inherit}
button,input{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0; -webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2.5px solid var(--focus); outline-offset:3px; border-radius:8px}
[data-tone="brand"] :focus-visible, .hdr[data-on="brand"] :focus-visible{outline-color:#ffffff; box-shadow:0 0 0 6px rgba(0,87,255,.55)}
/* light glass inside a brand section (hero search + next line) and the phone course bar: a blue ring between two white ones,
   so it reads on the light glass and on the film or page around it */
.hero__tools :focus-visible, .cbar :focus-visible, .tabbar :focus-visible{outline:2.5px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 6px #ffffff}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.ar{font-family:var(--font-arabic); letter-spacing:0}
.lat{font-family:var(--font-latin)}
.skip{position:fixed; inset-inline-start:16px; top:calc(8px + env(safe-area-inset-top,0px)); z-index:200; background:var(--surface); color:var(--ink-brand); padding:10px 16px; border-radius:var(--pill); font-weight:600; transform:translateY(-200%); transition:transform var(--t-med) var(--ease-out); box-shadow:var(--shadow-1)}
.skip:focus{transform:none}
.wrap{max-width:calc(var(--maxw) + 2 * var(--gutter)); margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.band{padding-block:var(--band)}
.caps{font-family:var(--font-latin); font-weight:600; font-size:12px; letter-spacing:.38em; text-transform:uppercase}
:root[lang="ar"] .caps{font-family:var(--font-arabic); letter-spacing:0; text-transform:none; font-size:14px; font-weight:700}
[hidden]{display:none!important}
.flip-rtl{transition:transform var(--t-med) var(--ease-out)}
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}
svg.i{width:20px; height:20px; flex:none}

/* ------------------------------------------------------------------ Liquid Glass
   gradient rim · soft sheen · a specular highlight that follows the pointer · refraction (Chromium) */
.lg{position:relative; isolation:isolate; color:var(--glass-ink); background:var(--glass-tint);
  -webkit-backdrop-filter:blur(18px) saturate(170%) brightness(1.04); backdrop-filter:blur(18px) saturate(170%) brightness(1.04);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-2), inset 0 0 0 .5px var(--glass-rim-2);
  --mx:30%; --my:-20%}
.lg::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:var(--glass-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.lg::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(150px 96px at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%);
  mix-blend-mode:soft-light; opacity:var(--glass-sheen)}
.lg--dark, [data-tone="brand"] .lg, .hdr[data-on="brand"] .lg{color:#ffffff; background:var(--glass-dark-tint);
  box-shadow:0 14px 40px -14px rgba(0,6,40,.6), 0 2px 8px rgba(0,6,40,.18), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 22px rgba(140,180,255,.12)}
.lg--dark::before, [data-tone="brand"] .lg::before, .hdr[data-on="brand"] .lg::before{background:linear-gradient(140deg, rgba(255,255,255,.88), rgba(255,255,255,.12) 30%, rgba(255,255,255,0) 55%, rgba(170,205,255,.32) 82%, rgba(255,255,255,.58))}
.lg--dark::after, [data-tone="brand"] .lg::after, .hdr[data-on="brand"] .lg::after{mix-blend-mode:screen; opacity:.5}
.refract-on .lg--refract{-webkit-backdrop-filter:blur(14px) saturate(175%) brightness(1.05); backdrop-filter:var(--lg-filter, blur(0px)) blur(14px) saturate(175%) brightness(1.05)}
@media (prefers-reduced-transparency: reduce){
  .lg, .refract-on .lg--refract, .sres.lg{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-solid-calm); box-shadow:var(--glass-shadow), inset 0 0 0 1px rgba(6,27,176,.12)}
  .lg--dark, [data-tone="brand"] .lg, .hdr[data-on="brand"] .lg{background:var(--glass-solid-dark)}
  .lg::after{display:none}
}
.lowfx .lg, .lowfx .refract-on .lg--refract{-webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%)}
.press{transition:transform var(--t-fast) var(--ease-out), background-color var(--t-med), box-shadow var(--t-med), color var(--t-med), opacity var(--t-med)}
.press:active{transform:scale(.97)}

/* ------------------------------------------------------------------ buttons, chips */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:var(--pill);
  font-family:var(--font-latin); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap}
:root[lang="ar"] .btn{font-family:var(--font-arabic); font-weight:700}
.btn svg{width:16px; height:16px; flex:none}
.btn--white{background:#ffffff; color:var(--royal); box-shadow:0 10px 26px -12px rgba(0,10,60,.6)}
.btn--white:hover{box-shadow:0 14px 32px -12px rgba(0,87,255,.75)}
.btn--ink{background:var(--btn-ink); color:#ffffff; box-shadow:var(--btn-ink-shadow)}
.btn--ink:hover{background:var(--btn-ink-hover)}
.btn--line{color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--line-2); background:var(--surface)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn .arr{transition:transform var(--t-med) var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.icon-btn{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none}
.icon-btn svg{width:20px; height:20px}
.pill{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 14px; border-radius:var(--pill); font-size:14px; font-weight:600; white-space:nowrap; line-height:1}
:root[lang="ar"] .pill{font-weight:700}
.pill svg{width:15px; height:15px; flex:none}
.pill--glass{color:#ffffff; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.38), inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.pill--soft{color:var(--ink-2); background:var(--bg-3)}
.pill--blue{color:var(--accent-ink); background:var(--accent-soft-2)}
.badge{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--electric); color:#ffffff; font-size:11px; font-weight:700; display:inline-grid; place-items:center; line-height:1; font-family:var(--font-latin); box-shadow:0 0 0 2px var(--badge-ring)}
.badge.bump{animation:bump 220ms cubic-bezier(.3,.7,.4,1)}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}

/* ------------------------------------------------------------------ header */
.hdr{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:60; pointer-events:none; --edge:rgba(6,27,176,.35)}
.hdr::before{content:""; position:absolute; left:0; right:0; top:calc(-1 * env(safe-area-inset-top,0px)); height:calc(max(96px, 100% + 24px) + env(safe-area-inset-top,0px)); pointer-events:none; opacity:0;
  transition:opacity 200ms var(--ease-out); background:linear-gradient(180deg, var(--edge) 0, var(--edge-2) 60%, transparent 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 66%, transparent 100%); mask-image:linear-gradient(180deg, #000 0, #000 66%, transparent 100%)}
.hdr.is-scrolled::before{opacity:1}
/* the scroll edge: a near-white scrim on light content, a royal veil over the brand bands */
.hdr{--edge-2:rgba(6,27,176,.22)}
.hdr[data-on="calm"]{--edge:var(--hdr-calm); --edge-2:var(--hdr-calm-2)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; max-width:1480px; margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.hdr a, .hdr button{pointer-events:auto}
.brand{position:relative; display:block; flex:none; height:40px; border-radius:8px}
.brand img{height:40px; width:auto; transition:opacity var(--t-med)}
.brand .logo-white{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0}
.hdr[data-on="brand"] .brand .logo-white{opacity:1}
.hdr[data-on="brand"] .brand .logo-blue{opacity:0}
.nav{position:relative; display:flex; align-items:center; gap:2px; padding:5px; border-radius:var(--pill)}
.nav a{position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap}
.nav a > span{transition:opacity var(--t-med)}
:root[lang="ar"] .nav a{font-weight:700; font-size:14.5px}
.nav a:not([aria-current="true"]) > span{opacity:.78}
.nav a:hover > span{opacity:1}
.nav__thumb{position:absolute; left:0; top:5px; height:38px; width:0; border-radius:var(--pill); z-index:0; pointer-events:none; will-change:transform; opacity:0;
  background:var(--lens); box-shadow:var(--lens-rim);
  transition:transform 480ms var(--spring), width 480ms var(--spring), opacity 200ms}
.hdr[data-on="brand"] .nav__thumb{background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 .5px rgba(255,255,255,.4), 0 4px 12px -4px rgba(0,10,60,.35)}
.nav .badge{box-shadow:none}
.hdr__tools{display:flex; align-items:center; gap:8px}
.pill-btn{height:44px; min-width:44px; padding:0 16px; border-radius:var(--pill); display:inline-grid; place-items:center; font-weight:700; font-size:15px}
.pill-btn .ar{font-size:15.5px}

/* ------------------------------------------------------------------ HERO · Lights On */
.hero{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; user-select:none; -webkit-user-select:none}
.hero input{user-select:text; -webkit-user-select:text}

.hero__in{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:calc(var(--hdr-h) + 8px); padding-bottom:clamp(28px, 4.4vh, 52px); pointer-events:none}
.hero__in > *{pointer-events:auto}
.hero__head{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px}
.hero__title{font-family:var(--font-latin); font-weight:300; font-size:var(--fs-display); line-height:.92; letter-spacing:-.045em; color:var(--ink);
  padding-inline:.04em; padding-bottom:.06em}
.hero__title .t{display:inline-block;
  background-image:linear-gradient(100deg, #0a1433 0%, #0a1433 34%, #6fb0ff 42%, #01286c 47%, #061bb0 58%, #0057ff 76%, #3f74e0 100%);
  background-size:300% 100%; background-position:0% 0; -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__alt{font-family:var(--font-arabic); font-weight:400; font-size:clamp(24px, 2.5vw, 36px); line-height:1.3; color:var(--navy)}
:root[lang="ar"] .hero__title{font-family:var(--font-arabic); font-weight:300; letter-spacing:0; line-height:1.18; font-size:clamp(56px, 7vw, 112px)}
:root[lang="ar"] .hero__alt{font-family:var(--font-latin); font-weight:300; letter-spacing:-.02em; font-size:clamp(22px, 2.3vw, 32px)}
.hero__tools{display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr); gap:14px; width:min(1060px, 100%); margin-top:clamp(18px, 3vh, 34px);
  padding-inline:max(16px, env(safe-area-inset-left,0px))}

/* search field */
.sfield{position:relative; display:flex; align-items:center; gap:10px; height:60px; padding:0 8px 0 20px; border-radius:var(--pill); text-align:start}
[dir="rtl"] .sfield{padding:0 20px 0 8px}
.sfield > svg{width:20px; height:20px; flex:none; color:var(--accent-ink)}
.sfield input{flex:1; min-width:0; height:100%; border:0; background:none; outline:none; font-size:17px; color:var(--ink)}
.sfield input::placeholder{color:var(--ink-3); opacity:1}
.hero__tools .sfield input::placeholder{color:var(--ink-ph)}
.hero__tools .kbd{color:var(--ink-ph); box-shadow:inset 0 0 0 1px var(--field-line)}
.sfield input::-webkit-search-cancel-button{display:none}
.sfield:focus-within{box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-rim), 0 0 0 2.5px var(--focus)}
.kbd{display:none; place-items:center; min-width:30px; height:30px; padding:0 8px; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2); font-family:var(--font-latin)}
@media (pointer: fine){ .sfield .kbd{display:inline-grid} }
.sfield .go{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--btn-ink); color:#ffffff; flex:none}
.sfield .go svg{width:18px; height:18px}
/* the next-event line */
.next{display:flex; align-items:center; gap:12px; height:60px; padding:0 8px 0 18px; border-radius:var(--pill); text-align:start; min-width:0}
[dir="rtl"] .next{padding:0 18px 0 8px}
.next__dot{width:10px; height:10px; border-radius:50%; background:var(--electric); flex:none; box-shadow:0 0 0 4px rgba(0,87,255,.16)}
.next__txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.next__t{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.next__t .ar{font-weight:700}
.next__m b{font-weight:600; color:var(--accent-ink)}
.next__m{font-size:13.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.next .btn{min-height:44px; padding:0 18px; font-size:14px}


/* search results (inline dropdown under the hero field and inside the spotlight sheet) */
.sres{position:absolute; inset-inline:0; top:calc(100% + 10px); z-index:20; padding:8px; border-radius:26px; text-align:start;
  transform-origin:50% 0; animation:popIn 220ms var(--ease-out)}
.sres.lg{background:var(--sres-bg); -webkit-backdrop-filter:blur(28px) saturate(1.6); backdrop-filter:blur(28px) saturate(1.6);
  box-shadow:var(--sres-shadow)}
/* the hero field sits at the foot of the stage: its results open upwards, over the title */
.qwrap .sres{top:auto; bottom:calc(100% + 10px); transform-origin:50% 100%; animation-name:popUp}
@keyframes popUp{from{opacity:0; transform:translateY(8px) scale(.98)}}
@keyframes popIn{from{opacity:0; transform:translateY(-8px) scale(.98)}}
.opt{display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:18px; text-decoration:none; cursor:pointer}
.opt[aria-selected="true"]{background:var(--accent-soft-2)}
.opt__code{font-family:var(--font-latin); font-weight:300; font-size:26px; letter-spacing:-.03em; min-width:92px; color:var(--ink)}
.opt__txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.opt__n{font-weight:600; font-size:15px}
.opt__m{font-size:13px; color:var(--ink-3)}
.opt mark{background:none; color:var(--accent-ink); font-weight:700; box-shadow:inset 0 -2px 0 rgba(0,87,255,.35)}
.opt .chev{width:18px; height:18px; color:var(--ink-3)}
.sres__none{padding:14px 14px; color:var(--ink-2); font-size:15px}
.sres__h{padding:6px 12px 4px; font-size:12px; font-weight:600; color:var(--ink-3)}

/* ------------------------------------------------------------------ section heads */
.sec-head{display:flex; flex-direction:column; gap:14px; max-width:920px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--accent-ink)}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor}
.h2{font-family:var(--font-latin); font-weight:300; font-size:var(--fs-h2); line-height:1; letter-spacing:-.04em; color:var(--ink); text-wrap:balance}
:root[lang="ar"] .h2{font-family:var(--font-arabic); font-weight:300; letter-spacing:0; line-height:1.25}
.lead{font-size:var(--fs-lead); color:var(--ink-2); max-width:640px}

/* ------------------------------------------------------------------ COURSES */
.courses{background:var(--bg); position:relative}
.finder{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:40px}
.ffield{position:relative; flex:1 1 360px; display:flex; align-items:center; gap:10px; height:54px; padding:0 14px 0 18px; border-radius:var(--pill);
  background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--field-line); transition:box-shadow var(--t-med), background var(--t-med)}
[dir="rtl"] .ffield{padding:0 18px 0 14px}
.ffield:focus-within{background:var(--surface); box-shadow:inset 0 0 0 1px var(--field-line), 0 0 0 2.5px var(--focus)}
.ffield svg{width:19px; height:19px; color:var(--ink-3); flex:none}
.ffield input{flex:1; min-width:0; border:0; background:none; outline:none; height:100%; font-size:16px; text-overflow:ellipsis}
.ffield input::placeholder{color:var(--ink-3)}
.ffield input::-webkit-search-cancel-button{display:none}
.ffield .clear{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2); background:var(--bg-3)}
.ffield .clear svg{width:14px; height:14px}
.ffield__n{font-size:13px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.seg{position:relative; display:inline-flex; padding:4px; border-radius:var(--pill); background:var(--bg-3); box-shadow:inset 0 0 0 1px var(--line)}
.seg button{position:relative; z-index:1; height:46px; padding:0 18px; border-radius:var(--pill); font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color var(--t-med)}
:root[lang="ar"] .seg button{font-weight:700}
.seg button[aria-checked="true"]{color:var(--ink)}
.seg__thumb{position:absolute; top:4px; left:0; height:46px; width:0; border-radius:var(--pill); background:var(--thumb); z-index:0;
  box-shadow:var(--thumb-shadow), var(--sel-ring);
  transition:transform 460ms var(--spring), width 460ms var(--spring)}

/* My courses */
.mine{margin-top:40px}
.mine__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
.mine__h{display:flex; align-items:center; gap:10px; font-size:13px}
.mine__h .badge{box-shadow:none}
.mine__note{font-size:13px; color:var(--ink-3)}
.mine__row{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px}
.mine__row > .mine__empty{grid-column:1 / -1}
.pcard{position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg); color:#ffffff; padding:22px 22px 18px; min-height:196px; display:flex; flex-direction:column; gap:10px;
  background:#061bb0; box-shadow:var(--shadow-blue); text-decoration:none}
.pcard__bg{position:absolute; inset:0; z-index:-1; background:url("/media/gradients/gradient-7.jpg") center/cover, var(--grad-deep)}
.pcard__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(1,40,108,.15), rgba(1,20,90,.45))}
.pcard__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.pcard__code{font-family:var(--font-latin); font-weight:300; font-size:40px; line-height:.95; letter-spacing:-.04em}
.pcard__name{font-size:14.5px; font-weight:600; color:var(--on-brand-2); margin-top:4px}
.pcard__cd{display:flex; align-items:baseline; gap:8px; margin-top:auto}
.pcard__n{font-family:var(--font-latin); font-weight:300; font-size:44px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.pcard__w{font-size:13.5px; line-height:1.35; color:var(--on-brand-2)}
.pcard__w b{display:block; color:#ffffff; font-weight:600}
.pcard__x{width:38px; height:38px; flex:none; position:relative; z-index:2}
.pcard__x svg{width:16px; height:16px}
.pcard__link{position:absolute; inset:0; z-index:1; border-radius:inherit}
.pcard__link:focus-visible{outline:2.5px solid #ffffff; outline-offset:-5px}
.pcard.is-new{animation:landed 340ms cubic-bezier(.3,.7,.4,1)}
@keyframes landed{0%{transform:scale(.92); opacity:.4}55%{transform:scale(1.04); opacity:1}100%{transform:none}}
/* pin flight: the spark trail and the landing ring */
.spark{position:fixed; z-index:96; left:-1.5px; top:-1.5px; width:3px; height:3px; border-radius:50%; background:#2e6bff; box-shadow:0 0 6px 1px rgba(46,107,255,.7); pointer-events:none}
.land-ring{position:fixed; z-index:94; pointer-events:none}
.mine__empty{display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--r-lg); background:var(--bg-2); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-2); font-size:15px}
.mine__empty .pinmini{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--line-2); background:var(--surface)}
.mine__empty .pinmini svg{width:18px; height:18px}

/* course grid */
.grid-h{display:flex; align-items:baseline; justify-content:space-between; margin:48px 0 16px; font-size:13px}
.grid{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px}
.card{position:relative; display:flex; flex-direction:column; gap:6px; padding:24px 24px 20px; border-radius:var(--r-lg); background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1); transition:transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out)}
.card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow-lift)}
.card:has(.card__link:active){transform:scale(.985)}
.card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card__code{font-family:var(--font-latin); font-weight:300; font-size:54px; line-height:.92; letter-spacing:-.045em; color:var(--ink); display:inline-block}
.card__lv{font-size:12.5px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); padding:4px 10px; border-radius:var(--pill); margin-top:4px}
.card__name{font-size:19px; font-weight:600; margin-top:12px; line-height:1.3}
.card__link{text-decoration:none; color:inherit}
.card__link::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:1}
.card__link:focus-visible{outline:none}
.card:has(.card__link:focus-visible){box-shadow:inset 0 0 0 1px var(--line-2), 0 0 0 3px var(--focus)}
.card__meta{font-size:14px; color:var(--ink-3)}
.card__res{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2); min-height:3.1em}
.card__exam{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; font-size:14px}
.card__exam b{font-weight:600; color:var(--accent-ink)}
.card__go{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--accent-ink); background:var(--accent-soft); transition:transform var(--t-med) var(--ease-out), background var(--t-med)}
.card__go svg{width:16px; height:16px}
.card:hover .card__go{transform:translateX(3px); background:var(--accent-soft-2)}
[dir="rtl"] .card__go svg{transform:scaleX(-1)}
[dir="rtl"] .card:hover .card__go{transform:translateX(-3px)}
.card .pin{position:relative; z-index:2}
.empty{padding:40px 24px; text-align:center; color:var(--ink-2); border-radius:var(--r-lg); background:var(--bg-2); font-size:16px}
.ghost{position:fixed; z-index:5; pointer-events:none; margin:0}
.grid > .card{z-index:1}
.grid > .ghost{position:absolute; z-index:0}

/* the pin: a bolt that charges bottom → top */
.pin{width:46px; height:46px; border-radius:50%; flex:none; position:relative; display:grid; place-items:center; color:var(--accent-ink); overflow:hidden; isolation:isolate;
  box-shadow:inset 0 0 0 1.5px var(--line-2); background:var(--surface); transition:box-shadow var(--t-med), transform var(--t-fast) var(--ease-out), color 200ms}
.pin:hover{box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--surface-hover)}
.pin:active{transform:scale(.9)}
.pin__fill{position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, #0047e0, #2a7dff); transform:translateY(101%); transition:transform 380ms cubic-bezier(.5,0,.2,1)}
.pin__bolt{position:relative; width:22px; height:22px}
.pin__bolt svg{position:absolute; inset:0; width:100%; height:100%}
.pin__bolt .b-line{color:currentColor}
.pin__bolt .b-fill{color:#ffffff; clip-path:inset(100% 0 0 0); transition:clip-path 380ms cubic-bezier(.5,0,.2,1)}
.pin[aria-pressed="true"]{color:#ffffff; box-shadow:0 8px 18px -6px rgba(0,87,255,.75)}
.pin[aria-pressed="true"] .pin__fill{transform:none}
.pin[aria-pressed="true"] .b-fill{clip-path:inset(0 0 0 0)}
.pin.is-charging .pin__fill, .pin.is-charging .b-fill{transition-duration:280ms; transition-timing-function:cubic-bezier(.3,0,.2,1)}
.pin.is-draining .pin__fill, .pin.is-draining .b-fill{transition-duration:260ms}
.pin__label{position:relative}
.pin--wide{width:auto; height:48px; padding:0 20px 0 14px; border-radius:var(--pill); grid-auto-flow:column; gap:8px; font-weight:600; font-size:15px}
[dir="rtl"] .pin--wide{padding:0 14px 0 20px}
.on-brand .pin, [data-tone="brand"] .pin{color:#ffffff; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
[data-tone="brand"] .pin:hover{background:rgba(255,255,255,.2)}
[data-tone="brand"] .pin__fill{background:linear-gradient(0deg, #ffffff, #e2eeff)}
[data-tone="brand"] .pin .b-fill{color:var(--royal)}
[data-tone="brand"] .pin[aria-pressed="true"]{color:var(--royal); box-shadow:0 10px 24px -8px rgba(0,10,60,.6)}
.fly{position:fixed; z-index:95; left:0; top:0; pointer-events:none; display:inline-flex; align-items:center; gap:8px; padding:10px 18px 10px 12px; border-radius:var(--pill); background:linear-gradient(180deg, #2a72ff, #0047e0); color:#ffffff;
  font-family:var(--font-latin); font-weight:600; font-size:17px; box-shadow:0 12px 30px -6px rgba(0,87,255,.8), 0 0 0 3px var(--fly-ring); white-space:nowrap}
.fly svg{width:18px; height:18px}

/* ------------------------------------------------------------------ EVENTS */
.events{background:var(--bg-2)}
.ev-grid{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:22px; margin-top:44px; align-items:start}
.feat{position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); color:#ffffff; padding:clamp(26px, 3.4vw, 44px); min-height:420px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-blue)}
.feat__bg{position:absolute; inset:0; z-index:-1; background:url("/media/gradients/gradient-1.jpg") center/cover, var(--grad-deep)}
.feat__bg::after{content:""; position:absolute; inset:0; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath transform='translate(16 10)' d='M20.2 0 18.2 14.3 11.4 16.8 28.7 16.7 8.4 38.4 10.8 21.8 0 21.8Z'/%3E%3Cpath transform='translate(76 66)' d='M20.2 0 18.2 14.3 11.4 16.8 28.7 16.7 8.4 38.4 10.8 21.8 0 21.8Z'/%3E%3C/g%3E%3C/svg%3E"); background-size:120px 120px}
.feat__k{display:flex; align-items:center; gap:10px; color:var(--on-brand-2)}
.feat__k .live{width:9px; height:9px; border-radius:50%; background:#7fd0ff; box-shadow:0 0 0 4px rgba(127,208,255,.25)}
.feat__t{font-family:var(--font-latin); font-weight:300; font-size:clamp(40px, 4.6vw, 68px); line-height:1; letter-spacing:-.04em}
.feat__t .ar{display:block; font-family:var(--font-arabic); font-weight:400; font-size:.5em; letter-spacing:0; line-height:1.4; margin-top:10px; color:var(--on-brand-2)}
:root[lang="ar"] .feat__t{font-family:var(--font-arabic); letter-spacing:0; line-height:1.2}
:root[lang="ar"] .feat__t .ar{font-family:var(--font-latin); letter-spacing:-.02em}
.feat__d{max-width:520px; color:var(--on-brand-2); font-size:16.5px}
.feat__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
.feat__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px}
.elist{display:flex; flex-direction:column; gap:10px}
.elist h3{font-size:13px; color:var(--ink-3); margin:8px 4px 2px}
.erow{display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:var(--r-md); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow var(--t-med), transform var(--t-med) var(--ease-out)}
.erow:hover{box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow-1)}
.erow__d{width:58px; flex:none; text-align:center; line-height:1.1; padding:8px 0; border-radius:14px; background:var(--accent-soft)}
.erow__d b{display:block; font-family:var(--font-latin); font-weight:300; font-size:22px; letter-spacing:-.03em; color:var(--ink)}
.erow__d span{font-size:12px; font-weight:600; color:var(--accent-ink)}
.erow__t{flex:1; min-width:0}
.erow__t b{display:block; font-weight:600; font-size:15.5px; line-height:1.35}
.erow__t span{font-size:13.5px; color:var(--ink-3)}
.erow.is-past{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}
.erow.is-past .erow__d{background:var(--bg-3)}
.erow.is-past .erow__d span{color:var(--ink-3)}
.erow .tag{font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--pill); color:var(--accent-ink); background:var(--accent-soft-2); white-space:nowrap}
.erow.is-past .tag{color:var(--ink-3); background:var(--bg-3)}

/* ------------------------------------------------------------------ ABOUT */
.about{background:var(--bg)}
.statement{text-wrap:pretty; font-family:var(--font-latin); font-weight:300; font-size:var(--fs-statement); line-height:1.16; letter-spacing:-.03em; max-width:1040px; margin-top:22px}
:root[lang="ar"] .statement{font-family:var(--font-arabic); letter-spacing:0; line-height:1.55}
.statement .w{color:var(--ink); transition:color .35s var(--ease-out)}
.statement.is-armed .w{color:var(--ink-dim)}
.statement.is-armed .w.on{color:var(--ink)}
.statement.is-armed .w.hot{color:var(--word-hot)}
.comms{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:56px}
.comm{display:flex; flex-direction:column; gap:12px}
.comm__img{position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1); background:var(--royal)}
.comm__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.comm:hover .comm__img img{transform:scale(1.04)}
.comm h3{font-size:18px; font-weight:600}
.comm p{font-size:14.5px; color:var(--ink-3); margin-top:-6px}

/* ------------------------------------------------------------------ COUNCIL (the board roster, HomeDTO.council) */
.council{background:var(--bg)}
.cn{margin-top:36px}
.cn-year, .cn-term{font-size:15px; color:var(--ink-3)}
.cn-year b, .cn-term b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.cn-term{display:none; margin-bottom:-24px}
.cn-term--past{display:block}
/* one row that scrolls sideways when the years do not fit (a phone with three or more): it never wraps into a second row */
.cn-tabs{display:inline-flex; flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; gap:4px; padding:4px; border-radius:var(--pill); background:var(--bg-3); box-shadow:inset 0 0 0 1px var(--line)}
.cn-tabs::-webkit-scrollbar{display:none}
.cn-tab{flex:none; min-height:40px; padding:8px 18px; border:0; border-radius:var(--pill); background:transparent; color:var(--ink-2); font:inherit; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer; transition:background .2s var(--ease-out), color .2s var(--ease-out)}
.cn-tab:hover{color:var(--ink)}
/* the open year looks like the selected part of the site's other segmented controls (.seg): the thumb colours, in both themes */
.cn-tab[aria-selected="true"]{background:var(--thumb); color:var(--ink); box-shadow:var(--thumb-shadow), var(--sel-ring)}
/* inside the row's 4px padding, so the scrolling row does not clip it */
.cn-tab:focus-visible{outline-offset:1px}
.cn-tab__now{font-size:12px; font-weight:600; color:var(--accent-ink); margin-inline-start:2px}
.cn-panel{display:flex; flex-direction:column; gap:52px; margin-top:32px}
.cn-panel:focus-visible{outline-offset:8px}
.cn-h{display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
:root[lang="ar"] .cn-h{letter-spacing:0; text-transform:none; font-size:15px}
.cn-h::after{content:""; flex:1; height:1px; background:var(--line)}
.cn-h b{font-weight:500; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.cn-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:30px 18px; margin-top:22px}
.cn-grid--lead{grid-template-columns:repeat(3, minmax(0, 1fr))}
.mem{display:flex; flex-direction:column; gap:12px; min-width:0}
.mem__img{position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1); background:var(--royal)}
.mem--lead .mem__img{aspect-ratio:4 / 5}
.mem__img img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform .7s var(--ease-out)}
.mem:hover .mem__img img{transform:scale(1.03)}
.mem__mono{position:absolute; inset:0; display:grid; place-items:center; color:#ffffff; font-size:clamp(30px, 3.4vw, 46px); font-weight:300; letter-spacing:.04em; background:var(--grad-deep)}
.mem__row{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.mem__txt{min-width:0}
.mem h4{font-size:17px; font-weight:600; line-height:1.3; overflow-wrap:anywhere}
.mem--lead h4{font-size:20px}
.mem p{font-size:14px; line-height:1.4; color:var(--accent-ink); margin-top:3px}
.mem__in{flex:none; display:grid; place-items:center; width:40px; height:40px; margin-block-start:-8px; margin-inline-end:-10px; border-radius:50%; color:var(--ink-3); transition:color .2s var(--ease-out), background .2s var(--ease-out)}
.mem__in:hover{color:var(--accent-ink); background:var(--accent-soft-2)}
.mem__in svg{width:18px; height:18px}
@media (max-width: 1100px){ .cn-grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (max-width: 760px){
  .cn-panel{gap:40px}
  .cn-grid, .cn-grid--lead{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 14px}
  .cn-grid--lead .mem:first-child{grid-column:1 / -1}
  .mem--lead h4{font-size:18px}
  .mem h4{font-size:16px}
  .cn-tab{padding:8px 14px}
  .cn-term{margin-bottom:-16px}
}
/* the narrowest phones: the LinkedIn button goes under the name, so a long first name keeps the card's whole width */
@media (max-width: 340px){
  .mem__row{flex-direction:column; gap:0}
  .mem__in{margin-block-start:-2px; margin-inline:-10px 0}
}
@media (prefers-reduced-motion: reduce){ .mem__img img, .cn-tab{transition:none} .mem:hover .mem__img img{transform:none} }

/* ------------------------------------------------------------------ FOOTER */
.foot{position:relative; isolation:isolate; overflow:hidden; color:#ffffff; padding-top:clamp(72px, 8vw, 112px); padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.foot__bg{position:absolute; inset:0; z-index:-1; background:url("/media/gradients/gradient-5.jpg") center/cover, var(--grad-deep)}
.foot__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,30,110,.30), rgba(1,20,80,.62))}
.foot__line{font-family:var(--font-latin); font-weight:300; font-size:clamp(44px, 6.2vw, 96px); line-height:1; letter-spacing:-.045em}
.foot__line .ar{display:block; font-family:var(--font-arabic); font-weight:400; letter-spacing:0; font-size:.42em; line-height:1.5; margin-top:12px; color:var(--on-brand-2)}
:root[lang="ar"] .foot__line{font-family:var(--font-arabic); letter-spacing:0; line-height:1.3}
:root[lang="ar"] .foot__line .ar{font-family:var(--font-latin); letter-spacing:-.02em}
.foot__cols{display:grid; grid-template-columns:1.2fr 1fr 1fr 1.3fr; gap:32px; margin-top:64px; padding-top:40px; border-top:1px solid rgba(255,255,255,.18)}
/* the footer's column headings are h2 (the outline never jumps h1 → h3 on a page without sections) */
.foot h2, .foot h3{font-size:13px; font-weight:600; color:var(--on-brand-2); margin-bottom:14px}
.foot__links a{display:inline-flex; align-items:center; min-height:36px; text-decoration:none; color:#ffffff; font-size:15.5px; opacity:.92}
.foot__links a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.socials{display:flex; gap:10px; margin-top:4px}
.socials a{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#ffffff; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); transition:background var(--t-med)}
.socials a:hover{background:rgba(255,255,255,.22)}
.socials svg{width:19px; height:19px}
.handle{display:block; margin-top:14px; font-size:15px; color:var(--on-brand-2); unicode-bidi:isolate}
.tagline{display:inline-block; unicode-bidi:isolate}
.tagline{font-family:var(--font-latin); font-weight:400; font-size:22px; letter-spacing:-.01em}
.langseg{display:inline-flex; padding:4px; border-radius:var(--pill); background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.langseg button{height:38px; padding:0 16px; border-radius:var(--pill); font-weight:600; font-size:14px; color:var(--on-brand-2)}
.langseg button[aria-pressed="true"]{background:#ffffff; color:var(--royal)}
.support{display:flex; flex-direction:column; gap:12px}
.support img{height:44px; width:auto; max-width:100%; align-self:flex-start; object-fit:contain}  /* a flex column stretches its children: keep the logo at its own ratio */
.support p{font-size:14.5px; color:var(--on-brand-2); line-height:1.5}
.support .ar{font-size:15.5px; color:#ffffff}
.foot__base{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.18)}
.foot__base img{height:40px; width:auto; max-width:100%; align-self:flex-start; object-fit:contain}
.credits{font-size:12.5px; line-height:1.6; color:var(--on-brand-3); max-width:760px; margin-top:22px}

/* ------------------------------------------------------------------ NOTE PAGES (not found · back soon): the site's chrome,
   one calm message below the header, the ways on */
.view--note{display:flex; align-items:center; min-height:min(78svh, 820px); background:var(--bg); padding-top:calc(var(--hdr-h) + clamp(40px, 7vh, 88px)); padding-bottom:var(--band)}
.note{display:flex; flex-direction:column; align-items:flex-start; gap:18px; width:100%}
.note__t{max-width:15ch}
#noteTitle:focus{outline:none; box-shadow:none}
.note__go{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px}

/* ------------------------------------------------------------------ COURSE PAGE */
.view--course{min-height:100svh; background:var(--bg); padding-top:calc(var(--hdr-h) + 12px)}
.cp__back{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 10px; margin:6px 0 14px; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:14.5px; color:var(--accent-ink); transition:background var(--t-med)}
[dir="rtl"] .cp__back{padding:0 10px 0 14px}
.cp__back:hover{background:var(--accent-soft)}
.cp__back svg{width:18px; height:18px}
[dir="rtl"] .cp__back svg{transform:scaleX(-1)}
.cp-hero{position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); color:#ffffff; padding:clamp(26px, 3.6vw, 52px); display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(300px, 1fr); gap:clamp(24px, 3.4vw, 52px); box-shadow:var(--shadow-blue); background:#061bb0}
.cp-hero__bg{position:absolute; inset:0; z-index:-1; background:url("/media/gradients/gradient-3.jpg") center/cover, var(--grad-deep)}
.cp-hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(1,40,108,.64) 0%, rgba(6,27,176,.44) 52%, rgba(6,27,176,.40) 100%)}
.cp-hero__lv{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.cp-hero__code{font-family:var(--font-latin); font-weight:300; font-size:clamp(84px, 11vw, 168px); line-height:.86; letter-spacing:-.055em; margin-top:18px; display:block; width:max-content; max-width:100%}
#cpTitle:focus{outline:none; box-shadow:none}
.cp-hero__name{display:block; width:max-content; max-width:100%}
.cp-hero__name{font-size:clamp(24px, 2.4vw, 34px); font-weight:600; letter-spacing:-.01em; line-height:1.2; margin-top:16px}
.cp-hero__name .ar{display:block; font-weight:400; font-size:.62em; color:var(--on-brand-2); margin-top:4px}
.cp-hero__d{max-width:580px; color:var(--on-brand-2); font-size:16.5px; margin-top:12px}
.cp-hero__rel{margin-top:20px; font-size:13.5px; color:var(--on-brand-2)}
.rel__sc{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.rel__k{margin-inline-end:2px}
.rel__ph{display:none}
.chip-link{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--pill); font-weight:600; font-size:13.5px; color:#ffffff; text-decoration:none; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); transition:background var(--t-med)}
a.chip-link:hover{background:rgba(255,255,255,.26)}
.chip-link svg{width:13px; height:13px}
[dir="rtl"] .chip-link svg{transform:scaleX(-1)}
span.chip-link{opacity:.82}
.cp-hero__side{display:flex; flex-direction:column; gap:14px; align-self:stretch}
.exam-card{border-radius:var(--r-lg); padding:20px; color:#ffffff; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(1,16,80,.10)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%)}
.exam-card__k{font-size:13px; font-weight:600; color:var(--on-brand-2)}
.exam-card__t{font-size:17px; font-weight:600; margin-top:2px}
.epanel .exam-card__t{display:none}
.exam-card__w{font-size:14px; color:var(--on-brand-2)}
/* exam tabs (Major 1 · Major 2 · Final) with a spring thumb */
.etabs{position:relative; display:flex; padding:4px; margin-bottom:16px; border-radius:var(--pill); background:rgba(1,16,80,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.etabs button{position:relative; z-index:1; flex:1; height:38px; padding:0 10px; border-radius:var(--pill); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.84); white-space:nowrap; transition:color var(--t-med)}
:root[lang="ar"] .etabs button{font-weight:700}
.etabs button[aria-selected="true"]{color:var(--royal)}
.etabs button.is-done:not([aria-selected="true"]){color:rgba(255,255,255,.6)}
.etabs__thumb{position:absolute; top:4px; left:0; height:38px; width:0; border-radius:var(--pill); background:#ffffff; box-shadow:0 6px 16px -6px rgba(0,8,50,.5);
  transition:transform 460ms var(--spring), width 460ms var(--spring)}
.exam-when{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.exam-when .pill{gap:7px; background:rgba(1,16,80,.32); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.exam-when svg{width:15px; height:15px}
.exam-over{margin-top:14px; padding:14px 16px; border-radius:14px; background:rgba(1,20,90,.28); color:var(--on-brand-2); font-size:14px}
/* phone strip: the selected exam in one line; tap opens the tabs and the full countdown */
.exam-strip{display:none}
.exam-full{display:grid; grid-template-rows:1fr}
.exam-full__in{min-height:0}
.cd{display:flex; gap:6px; margin-top:14px}
.cd__u{flex:1; text-align:center; padding:10px 0 8px; border-radius:14px; background:rgba(1,20,90,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cd__n{display:block; position:relative; height:1.1em; overflow:hidden; font-family:var(--font-latin); font-weight:300; font-size:34px; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.cd__n{display:flex; justify-content:center; direction:ltr}
.rn{display:inline-flex; direction:ltr}
.rn i{display:block; font-style:normal}
.rw{white-space:pre}
.cd__n i{display:block; font-style:normal}
.cd__n i.roll, .exam-strip__cd i.roll{animation:roll 420ms var(--ease-out)}
.exam-strip__cd{align-items:baseline}
@keyframes roll{from{transform:translateY(-100%); opacity:.2}}
.cd__l{font-size:11.5px; font-weight:600; color:var(--on-brand-3)}
:root[lang="ar"] .cd__l{font-family:var(--font-arabic); font-size:12.5px}
.cp-hero .pin--wide{align-self:flex-start}

.cp-nav{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 6px); z-index:30; margin:26px auto 0; width:max-content; max-width:100%}
.secsw{position:relative; display:flex; gap:2px; padding:5px; border-radius:var(--pill); overflow-x:auto; scrollbar-width:none}
.secsw::-webkit-scrollbar{display:none}
.secsw a{position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap; color:var(--ink-2); transition:color var(--t-med)}
:root[lang="ar"] .secsw a{font-weight:700}
.secsw a[aria-current="true"]{color:var(--ink)}
.secsw a{gap:0}
.secsw a i{font-style:normal; font-size:12px; font-weight:400; color:var(--sw-num); font-variant-numeric:tabular-nums; margin-inline-start:4px}
.secsw a[aria-current="true"] i{color:var(--sw-num-on); font-weight:600}
.secsw a.is-empty{opacity:.55}
.secsw__thumb{position:absolute; top:5px; left:0; height:40px; width:0; border-radius:var(--pill); background:var(--thumb); z-index:0; box-shadow:var(--thumb-shadow), var(--sel-ring);
  transition:transform 460ms var(--spring), width 460ms var(--spring)}
.cp-body{display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:clamp(28px, 4vw, 64px); margin-top:34px; padding-bottom:var(--band)}
.rsec{padding-top:26px; scroll-margin-top:48px}   /* + html scroll-padding-top (92px) = lands just under the sticky switcher; cpSpy reads both */
.rsec + .rsec{margin-top:18px; border-top:1px solid var(--line)}
.rsec__h{display:flex; align-items:baseline; gap:10px; margin-bottom:14px}
.rsec__h h2{font-family:var(--font-latin); font-weight:300; font-size:clamp(28px, 2.8vw, 38px); letter-spacing:-.03em; line-height:1.1}
:root[lang="ar"] .rsec__h h2{font-family:var(--font-arabic); letter-spacing:0}
.rsec__h span{font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.files{display:flex; flex-direction:column}
.file{display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 12px; margin-inline:-12px; border-radius:16px; text-decoration:none; transition:background var(--t-med)}
.file:hover{background:var(--bg-2)}
.file:active{background:var(--bg-3)}
.file__ic{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none; color:#ffffff; background:var(--royal)}
.file__ic svg{width:19px; height:19px}
.file__ic--videos{background:linear-gradient(160deg, #0057ff, #061bb0)}
.file__ic--quizzes{background:linear-gradient(160deg, #019cec, #0057ff)}
.file__ic--homeworks{background:linear-gradient(160deg, #3d63d8, #01286c)}
.file__ic--notes{background:linear-gradient(160deg, #768fc8, #061bb0)}
.file__ic--exams{background:linear-gradient(160deg, #061bb0, #01286c)}
.file__ic--formula{background:linear-gradient(160deg, #0057ff, #01286c)}
.file__t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35}
.file__t b{font-weight:600; font-size:15.5px}
.file__t span{font-size:13px; color:var(--ink-3)}
.file__open{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--pill); font-size:13.5px; font-weight:600; color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--line-2); transition:box-shadow var(--t-med), background var(--t-med)}
.file:hover .file__open{box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--surface)}
.file__open svg{width:14px; height:14px}
[dir="rtl"] .file__open svg{transform:scaleX(-1)}
.nofiles{display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:16px; background:var(--bg-2); color:var(--ink-2); font-size:14.5px; line-height:1.5}
.nofiles a{color:var(--accent-ink); font-weight:600; text-underline-offset:3px}
.nofiles svg{width:18px; height:18px; flex:none}
/* old exams matrix */
.mx{width:100%; border-collapse:separate; border-spacing:0; font-size:14px}
.mx th{font-size:12.5px; font-weight:600; color:var(--ink-3); text-align:start; padding:0 8px 10px}
.mx td{padding:6px 8px; border-top:1px solid var(--line); vertical-align:middle}
.mx tbody th{font-size:14px; font-weight:600; color:var(--ink); text-align:start; padding:6px 8px; border-top:1px solid var(--line); white-space:nowrap; width:22%}
.xopen{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 7px; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:14px; color:var(--accent-ink);
  background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); transition:background var(--t-med), box-shadow var(--t-med), transform var(--t-fast) var(--ease-out)}
[dir="rtl"] .xopen{padding:0 7px 0 16px}
.xopen:hover{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--accent), var(--shadow-1)}
.xopen:active{transform:scale(.97)}
.xopen .fi{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#ffffff; background:linear-gradient(160deg, #061bb0, #01286c); flex:none}
.xopen .fi svg{width:14px; height:14px}
.xnone{display:inline-block; min-width:44px; padding-inline:8px; color:var(--ink-3); font-size:16px; line-height:44px}
.xstack{display:none}
.xsem + .xsem{margin-top:18px}
.xsem h3{font-size:16px; font-weight:600; margin-bottom:4px}
.xsem li{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-2)}
.aside{display:flex; flex-direction:column; gap:18px; align-self:start; position:sticky; top:calc(var(--hdr-h) + 84px)}
.abox{border-radius:var(--r-lg); padding:22px; background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line)}
.abox h3{font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:12px}
.learn li{position:relative; padding-inline-start:26px; font-size:15px; line-height:1.45; margin-top:10px}
.learn li::before{content:""; position:absolute; inset-inline-start:0; top:.2em; width:16px; height:16px; border-radius:50%; background:var(--accent-soft-2) var(--check) center/12px no-repeat}
.cp-enter > *:not(.cp-hero){animation:rise 560ms var(--ease-out) backwards}
.cp-enter > *:nth-child(2){animation-delay:60ms}
.cp-enter > *:nth-child(3){animation-delay:120ms}
.cp-enter > *:nth-child(4){animation-delay:180ms}
@keyframes rise{from{opacity:0; transform:translateY(14px)}}

/* course page bar for phones: back · sections · pin, one thumb */
.cbar{display:none}

/* ------------------------------------------------------------------ phone tab bar */
.tabbar{display:none}

/* ------------------------------------------------------------------ spotlight search */
.spot{position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center; padding:calc(88px + env(safe-area-inset-top,0px)) 16px 16px; background:var(--scrim);
  -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); animation:fade 200ms var(--ease-out)}
@keyframes fade{from{opacity:0}}
.spot__panel{position:relative; width:min(680px, 100%); border-radius:30px; padding:10px; animation:popIn 240ms var(--ease-out)}
.spot__panel .sfield{box-shadow:none; background:var(--surface)}
.spot__list{max-height:min(460px, calc(100svh - 220px)); overflow:auto; padding-top:6px}
.spot__close{display:none}
@media (prefers-reduced-transparency: reduce){ .spot{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--scrim-solid)} }

/* ------------------------------------------------------------------ toast */
.toast{position:fixed; z-index:110; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:12px; padding:8px 8px 8px 10px; border-radius:var(--pill); width:max-content; max-width:calc(100vw - 32px);
  color:#ffffff; background:linear-gradient(180deg, rgba(14,40,150,.9), rgba(4,22,100,.92)); box-shadow:0 18px 44px -14px rgba(1,16,70,.6), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  transform:translate(-50%, 16px); opacity:0; pointer-events:none; transition:transform 260ms var(--ease-out), opacity 260ms var(--ease-out)}
[dir="rtl"] .toast{padding:8px 10px 8px 8px}
.toast.show{transform:translate(-50%, 0); opacity:1; pointer-events:auto}
.toast__ic{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--electric)}
.toast__ic svg{width:15px; height:15px}
.toast__m{font-size:14.5px; font-weight:600; padding-inline-end:4px}
.toast button{height:38px; padding:0 16px; border-radius:var(--pill); background:#ffffff; color:var(--royal); font-weight:700; font-size:14px; flex:none}
.toast:not(.has-act){padding-inline-end:18px}

/* ------------------------------------------------------------------ entrances (one gentle rise, once) */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .8s var(--ease-out)}
.rv.in{opacity:1; transform:none}
.grid.is-pre .card{opacity:0; transform:translateY(18px)}
.grid.is-in .card{animation:rise 620ms var(--ease-out) both; animation-delay:calc(var(--i, 0) * 55ms)}

/* ------------------------------------------------------------------ view transitions */
::view-transition-group(*){animation-duration:480ms; animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation:220ms ease-out both vtOut}
::view-transition-new(root){animation:420ms var(--ease-out) 120ms both vtIn}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
/* the card becomes the page header: the shell grows as a window (no stretched snapshots), its old face leaves in 90 ms,
   the header's face arrives after 120 ms; code and name travel on their own */
::view-transition-group(c-card){background:linear-gradient(135deg, #01286c 0%, #061bb0 46%, #0057ff 100%); border-radius:28px; box-shadow:0 18px 44px -18px rgba(0,60,220,.55)}   /* a solid brand shell: the card charges blue as it grows, never an empty frame */
::view-transition-image-pair(c-card){overflow:clip; border-radius:28px}
::view-transition-old(c-card), ::view-transition-new(c-card){height:auto; width:auto; min-width:100%; min-height:100%; object-fit:none; object-position:left top}
:root[dir="rtl"]::view-transition-old(c-card), :root[dir="rtl"]::view-transition-new(c-card){object-position:right top; left:auto; right:0}
::view-transition-old(c-card){animation:90ms ease-out both vtOut}
::view-transition-new(c-card){animation:180ms ease-out 120ms both vtIn}
::view-transition-old(c-code), ::view-transition-new(c-code), ::view-transition-old(c-name), ::view-transition-new(c-name){height:100%; width:100%; object-fit:contain; object-position:left center}
:root[dir="rtl"]::view-transition-old(c-code), :root[dir="rtl"]::view-transition-new(c-code), :root[dir="rtl"]::view-transition-old(c-name), :root[dir="rtl"]::view-transition-new(c-name){object-position:right center}
::view-transition-old(c-code), ::view-transition-old(c-name){animation:140ms ease-out both vtOut}
::view-transition-new(c-code), ::view-transition-new(c-name){animation:260ms ease-out 40ms both vtIn}
::view-transition-group(hdr), ::view-transition-group(tabbar), ::view-transition-group(cbar){animation:none; z-index:100}
/* named only for the duration of a route transition (app.js transition() adds .vt-route): a view-transition-name makes
   the element a backdrop root, and the header's and bars' glass would then blur only themselves, never the page behind */
.vt-route .hdr{view-transition-name:hdr}
@media (max-width: 860px){ .vt-route .tabbar{view-transition-name:tabbar} .vt-route .cbar{view-transition-name:cbar} }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px){
  .grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .comms{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .foot__cols{grid-template-columns:1fr 1fr}
  .cp-body{grid-template-columns:minmax(0, 1fr)}
  .aside{position:static; display:block}
  .nav a{padding:0 12px}
}
@media (max-width: 900px){
  .ev-grid{grid-template-columns:minmax(0, 1fr)}
  .cp-hero{grid-template-columns:minmax(0, 1fr)}
  .hero__tools{grid-template-columns:minmax(0, 1fr); width:min(620px, 100%)}
}
@media (max-width: 860px){
  .nav{display:none}
  .hdr [data-open-search]{display:none}
  :root{--hdr-h:64px}
  .hdr__in{padding-block:12px}
  .brand, .brand img{height:36px}
  .tabbar{display:flex; position:fixed; z-index:70; left:max(12px, env(safe-area-inset-left,0px)); right:max(12px, env(safe-area-inset-right,0px)); bottom:calc(10px + env(safe-area-inset-bottom,0px)); gap:10px; align-items:center;
    transition:transform 360ms var(--ease-drawer), opacity 240ms}
  .tabbar__caps{flex:1; position:relative; display:flex; padding:5px; border-radius:var(--pill); min-width:0}
  .tab{position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:56px; border-radius:var(--pill); text-decoration:none; font-size:11px; font-weight:600; color:var(--ink-2); transition:color var(--t-med)}
  :root[lang="ar"] .tab{font-weight:700; font-size:11.5px}
  .tab svg{width:22px; height:22px}
  .tab[aria-current="true"]{color:var(--accent-ink)}
  .tab .badge{position:absolute; top:5px; inset-inline-end:calc(50% - 22px); min-width:17px; height:17px; font-size:10.5px}
  .tabbar__thumb{position:absolute; top:5px; left:0; height:56px; width:0; border-radius:var(--pill); background:var(--lens); box-shadow:var(--lens-rim);
    transition:transform 480ms var(--spring), width 480ms var(--spring), opacity 200ms}
  .tabbar__search{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--accent-ink); margin-inline-start:auto}
  .tabbar__caps{max-width:100%; transition:max-width 240ms var(--ease-out)}
  .tab{transition:color var(--t-med), flex-grow 240ms var(--ease-out), opacity 200ms var(--ease-out)}
  .tabbar.is-min .tabbar__caps{max-width:104px}
  .tabbar.is-min .tab:not([aria-current="true"]){flex-grow:0; flex-basis:0; opacity:0; overflow:hidden; pointer-events:none}
  .tabbar.is-min .tabbar__thumb{opacity:0!important}
  .tabbar.is-min .tab[aria-current="true"]{background:var(--lens); box-shadow:var(--lens-rim)}
  .tabbar.on-brand.is-min .tab[aria-current="true"]{background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12))}
  .tabbar__search svg{width:24px; height:24px}
  body.is-course .tabbar{transform:translateY(140%); opacity:0; pointer-events:none}
  .cbar{display:flex; position:fixed; z-index:71; left:max(12px, env(safe-area-inset-left,0px)); right:max(12px, env(safe-area-inset-right,0px)); bottom:calc(10px + env(safe-area-inset-bottom,0px)); gap:8px; align-items:center;
    transform:translateY(140%); opacity:0; pointer-events:none; transition:transform 420ms var(--ease-drawer), opacity 240ms}
  body.is-course .cbar{transform:none; opacity:1; pointer-events:auto}
  .cbar__back{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--accent-ink)}
  .cbar__back svg{width:22px; height:22px}
  [dir="rtl"] .cbar__back svg{transform:scaleX(-1)}
  .cbar .secsw{flex:1; min-width:0; height:58px; padding:0; overflow:hidden; display:block}
  .secsw__sc{position:relative; display:flex; align-items:center; gap:2px; height:100%; padding:5px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%)}
  .secsw__sc::-webkit-scrollbar{display:none}
  [dir="rtl"] .secsw__sc{-webkit-mask-image:linear-gradient(270deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(270deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%)}
  .secsw__sc a{position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; border-radius:var(--pill); text-decoration:none; font-weight:600; white-space:nowrap; color:var(--ink-2)}
  .secsw__sc a[aria-current="true"]{color:var(--ink)}
  .secsw__sc a{gap:0}
  .secsw__sc a i{font-style:normal; font-size:12px; font-weight:400; color:var(--sw-num); margin-inline-start:4px}
  .secsw__sc a[aria-current="true"] i{color:var(--sw-num-on); font-weight:600}
  .cbar .secsw a{height:48px; padding:0 14px; font-size:13.5px}
  .cbar .secsw__thumb{height:48px}
  .cbar .pin{width:58px; height:58px}
  .cbar .pin__bolt{width:24px; height:24px}
  .cp-nav{display:none}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .hero__in{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .foot{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .view--course{padding-bottom:110px}
}
@media (max-width: 760px){
  :root{--gutter:16px; --band:76px}
  .hero{min-height:max(640px, 100svh)}
  .hero__title{font-size:clamp(52px, 15.4vw, 72px)}
  :root[lang="ar"] .hero__title{font-size:clamp(50px, 14vw, 66px)}
  .hero__alt{font-size:24px}
  :root[lang="ar"] .hero__alt{font-size:21px}
  .hero__tools{gap:10px; margin-top:18px}
  .sfield, .next{height:56px}
  .sfield .kbd{display:none}
  .next__m .t-place{display:none}
  .grid{grid-template-columns:minmax(0, 1fr); gap:14px}
  .card{padding:20px 20px 18px}
  .card__code{font-size:46px}
  .finder{margin-top:28px; gap:12px}
  .ffield{flex-basis:100%}
  .seg{width:100%}
  .seg button{flex:1; padding:0 6px; font-size:13.5px}
  .mine__row{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-16px; padding:4px 16px 18px; gap:12px; scrollbar-width:none}
  .mine__row::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 82%; scroll-snap-align:center}
  .comms{gap:14px}
  .foot__cols{grid-template-columns:minmax(0, 1fr); gap:30px}
  .cp-hero{border-radius:28px; padding:24px 20px}
  .cp-hero__code{font-size:84px}
  .view--course .wrap{padding-inline:12px}
  .rsec .wrap{padding-inline:0}
  .aside{grid-template-columns:minmax(0, 1fr)}
  .cd__n{font-size:30px}
  .sres{position:fixed; inset-inline:12px; top:auto}
  .spot{padding:0; align-items:stretch; background:var(--scrim-2)}
  .spot__panel{width:100%; border-radius:0 0 30px 30px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 12px; animation:sheetDown 340ms var(--ease-drawer); align-self:flex-start}
  @keyframes sheetDown{from{transform:translateY(-30px); opacity:0}}
  .spot__close{display:grid}
  .spot__list{max-height:calc(100svh - 150px)}
  .feat{min-height:0}
}
@media (max-width: 560px){ .erow .tag{display:none} .erow{gap:14px; padding:12px 14px} }
@media (max-width: 400px){
  .next .btn{padding:0 14px}
  .next__m{font-size:12.5px}
}

/* ------------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:1ms!important; animation-delay:0ms!important; transition-duration:1ms!important; transition-delay:0ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .grid.is-pre .card{opacity:1; transform:none}
  .statement.is-armed .w{color:var(--ink)}
}

/* ------------------------------------------------------------------ dialog reset · tab bar on brand · capture hooks */
dialog.spot{max-width:none; max-height:none; width:100%; height:100%; margin:0; border:0; color:inherit; background:var(--scrim)}
dialog.spot:not([open]){display:none}
dialog.spot::backdrop{background:transparent}
.tabbar.on-brand .lg{color:#ffffff; background:var(--glass-dark-tint); box-shadow:0 14px 40px -14px rgba(0,6,40,.6), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12)}
.tabbar.on-brand .tab{color:rgba(255,255,255,.82)}
.tabbar.on-brand .tab[aria-current="true"]{color:#ffffff}
.tabbar.on-brand .tabbar__thumb{background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.tabbar.on-brand .tabbar__search{color:#ffffff}

/* bilingual pairs keep the page's alignment, whatever their own direction */
:root[dir="ltr"] .feat__t .ar, :root[dir="ltr"] .foot__line .ar{text-align:left}
:root[dir="rtl"] .feat__t .ar, :root[dir="rtl"] .foot__line .ar{text-align:right}
@media (max-width: 760px){ .next__alt{display:none} }

/* tall tablets: keep the circuit, the title and the tools together instead of spreading them down the screen */
@media (min-width: 761px) and (max-aspect-ratio: 4/5){
  .hero__in{justify-content:center; min-height:min(100svh, 1180px)}
  .hero__title{font-size:clamp(56px, 9vw, 96px)}
  .hero__tools{grid-template-columns:minmax(0, 1fr); gap:12px; width:min(720px, 100%)}
}

/* ------------------------------------------------------------------ course page on phones: organised for speed, one thumb */
@media (max-width: 560px){
  .mx{display:none}
  .xstack{display:block}
  .cp__back{display:none}
  .view--course .cp-enter{padding-top:6px}
  .cp-hero{gap:16px; padding:22px 18px 18px; border-radius:26px}
  .cp-hero__lv{display:none}
  .cp-hero__code{font-size:64px; line-height:.95; margin-top:0; letter-spacing:-.05em}
  .cp-hero__name{font-size:22px; margin-top:8px; width:auto}
  .cp-hero__d{font-size:16px; line-height:1.5; margin-top:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .cp-hero__rel{margin:14px -18px 0}
  .rel__sc{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-inline:18px; gap:8px; white-space:nowrap;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%)}
  [dir="rtl"] .rel__sc{-webkit-mask-image:linear-gradient(270deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); mask-image:linear-gradient(270deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%)}
  .rel__sc::-webkit-scrollbar{display:none}
  .rel__ph{display:inline-flex}
  .rel__sc > *{flex:none}
  .cp-hero__side{gap:10px}
  .exam-card{padding:0; border-radius:20px; overflow:hidden}
  .exam-strip{display:flex; align-items:center; gap:10px; width:100%; min-height:56px; padding:8px 14px; text-align:start; color:#ffffff}
  .exam-strip__dot{width:8px; height:8px; border-radius:50%; background:#7fd0ff; box-shadow:0 0 0 3px rgba(127,208,255,.25); flex:none}
  .exam-strip__t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
  .exam-strip__t b{font-size:14.5px; font-weight:600}
  /* the date line never cuts the time: on a narrow screen (320 px, 400 % zoom) the time takes a second line, date and time each whole */
  .exam-strip__t > span{font-size:12.5px; color:var(--on-brand-2)}
  .exam-strip__t .es__u{white-space:nowrap}
  .exam-strip__cd{display:inline-flex; font-family:var(--font-latin); font-weight:300; font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; height:1.3em; line-height:1.3}
  :root[lang="ar"] .exam-strip__cd{font-family:var(--font-arabic); font-weight:400; font-size:16px}
  .exam-strip__cd i{display:block; font-style:normal; white-space:pre}
  .exam-strip > svg{width:18px; height:18px; flex:none; transform:rotate(90deg); transition:transform 260ms var(--spring)}
  .exam-card[data-expanded="true"] .exam-strip > svg{transform:rotate(-90deg)}
  .exam-full{grid-template-rows:0fr; transition:grid-template-rows 260ms var(--spring)}
  .exam-card[data-expanded="true"] .exam-full{grid-template-rows:1fr}
  .exam-full__in{overflow:hidden; padding:0 14px; visibility:hidden; transition:visibility 0s 260ms, padding 260ms var(--spring)}
  .exam-card[data-expanded="true"] .exam-full__in{padding-bottom:14px; visibility:visible; transition:visibility 0s, padding 260ms var(--spring)}
  .exam-card .exam-card__k, .exam-card .exam-card__t{display:none}
  .exam-when{margin-top:0}
  .cd__n{font-size:28px}
  .cp-hero .pin--wide{align-self:stretch; height:52px; justify-content:center}
  .cp-body{margin-top:12px}
  .rsec{padding-top:20px}
  .rsec__h{margin-bottom:8px}
  .rsec__h h2{font-size:28px}
}

/* search feedback: a signal runs along the field on every keystroke */
.sig{position:absolute; left:22px; right:22px; bottom:0; height:2px; overflow:hidden; pointer-events:none; border-radius:2px; z-index:2}
.sig::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(46,107,255,0), #2e6bff 60%, rgba(46,107,255,0)); transform:translateX(-100%); opacity:0}
.sig.is-run::after{animation:sig 240ms ease-out}
[dir="rtl"] .sig.is-run::after{animation-name:sigR}
@keyframes sig{0%{transform:translateX(-100%); opacity:1} 100%{transform:translateX(100%); opacity:0}}
@keyframes sigR{0%{transform:translateX(100%); opacity:1} 100%{transform:translateX(-100%); opacity:0}}

/* =====================================================================
   ROUND 5 · ALIVE — everything below the hero powers on as you reach it.
   One idea, used everywhere: current arrives (a comet along the divider), then the section switches on
   (the heading rises word by word, the content follows). Live data ticks; nothing moves without a reason.
   Transform / opacity / translate only · IntersectionObserver · RTL mirrored · reduced motion = static.
   ===================================================================== */
:root{ --fs-h2:clamp(46px, 6.5vw, 108px); --spring-soft:linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.8%, 1); }
.h2{letter-spacing:-.045em; line-height:.98}
:root[lang="ar"] .h2{line-height:1.28}

/* -- the current: a hairline divider; on arrival a comet runs along it once and leaves it lit at the source */
.trace{position:relative; height:1px; margin-bottom:clamp(34px, 4vw, 56px); background:var(--line-2)}
.trace__node{position:absolute; inset-inline-start:-1px; top:-4px; width:9px; height:9px; border-radius:50%; background:var(--page); box-shadow:inset 0 0 0 2px var(--line-3); transition:background .3s, box-shadow .3s; z-index:1}
.trace__run{position:absolute; inset:-3px 0; overflow:hidden; pointer-events:none}
.trace__run::before{content:""; position:absolute; left:0; right:0; top:3px; height:1px; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, #0057ff, rgba(0,87,255,.42) 34%, rgba(0,87,255,0) 78%)}
.trace__run::after{content:""; position:absolute; left:0; right:0; top:1.5px; height:4px; border-radius:4px; transform:translateX(-101%); opacity:0;
  background:linear-gradient(90deg, rgba(0,87,255,0) calc(100% - 220px), rgba(0,87,255,.55) calc(100% - 60px), #6fb4ff calc(100% - 8px), #ffffff 100%)}
[dir="rtl"] .trace__run{transform:scaleX(-1)}
.is-live .trace__node{background:#0057ff; box-shadow:0 0 0 4px rgba(0,87,255,.14), 0 0 14px 2px rgba(0,87,255,.55)}
.is-live .trace__run::before{transform:none; transition:transform 1.25s cubic-bezier(.5,0,.15,1)}
.is-live .trace__run::after{animation:comet 1.25s cubic-bezier(.5,0,.15,1) both}
@keyframes comet{0%{transform:translateX(-101%); opacity:1} 82%{opacity:1} 100%{transform:translateX(0); opacity:0}}
[data-tone="brand"] .trace{background:rgba(255,255,255,.18)}
[data-tone="brand"] .trace__node{background:#0b2a9a; box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
[data-tone="brand"] .is-live .trace__node, [data-tone="brand"].is-live .trace__node{background:#ffffff; box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 0 16px 3px rgba(127,198,255,.8)}
[data-tone="brand"] .trace__run::before{background:linear-gradient(90deg, #ffffff, rgba(160,210,255,.55) 34%, rgba(160,210,255,0) 78%)}
[data-tone="brand"] .trace__run::after{background:linear-gradient(90deg, rgba(127,198,255,0) calc(100% - 220px), rgba(127,198,255,.6) calc(100% - 60px), #d9efff calc(100% - 8px), #ffffff 100%)}

/* -- kinetic headings: each word rises out of its own line on a spring; one word carries the brand gradient */
.kw{display:inline-block; overflow:hidden; vertical-align:top; padding:.08em .04em .16em; margin:-.08em -.04em -.16em}
.kw__i{display:inline-block; translate:0 112%; transition:translate 1100ms var(--spring-soft); transition-delay:calc(260ms + var(--k, 0) * 75ms)}
.is-live .kw__i{translate:none}
:root[lang="ar"] .kw{padding-top:.26em; margin-top:-.26em}
.kw__i.hl{padding-block:.26em; margin-block:-.26em}
.kw__i.hl{background:var(--hl-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-inline-end:.04em}
[data-tone="brand"] .kw__i.hl{background-image:linear-gradient(100deg, #8fd0ff 0%, #c9e6ff 55%, #ffffff 100%)}
.sec-head .eyebrow{opacity:0; translate:0 8px; transition:opacity .6s var(--ease-out) .12s, translate .8s var(--ease-out) .12s}
.lv-in{opacity:0; translate:0 14px; transition:opacity .8s var(--ease-out) .62s, translate 1s var(--ease-out) .62s}
.about .eyebrow{opacity:0; translate:0 8px; transition:opacity .6s var(--ease-out) .12s, translate .8s var(--ease-out) .12s}
.is-live .sec-head .eyebrow, .about.is-live .eyebrow, .is-live .lv-in{opacity:1; translate:none}

/* -- course finder: a tally that ticks with every filter, cards with an energised edge, a glow under the cursor */
.grid-h{align-items:center; gap:14px}
.tally{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.tally b{font-weight:600; color:var(--ink-2)}
.tally i{width:4px; height:4px; border-radius:50%; background:#0057ff; box-shadow:0 0 0 3px rgba(0,87,255,.12)}
.card{isolation:isolate; overflow:hidden}
.card::before{content:""; position:absolute; left:0; top:0; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,87,255,.09), rgba(0,87,255,0)); transform:translate(var(--gx, -400px), var(--gy, -400px)); opacity:0; transition:opacity .35s var(--ease-out)}
.card:hover::before{opacity:1}
.edge{position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3; opacity:0; overflow:hidden; transition:opacity .3s var(--ease-out);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.edge::before{content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(0,87,255,.7), rgba(0,87,255,.18) 38%, rgba(0,87,255,0) 60%, rgba(1,156,236,.35))}
.edge i{position:absolute; left:50%; top:50%; width:160%; aspect-ratio:1; margin:-80% 0 0 -80%;
  background:conic-gradient(from 0deg, rgba(0,87,255,0) 0 64%, rgba(0,87,255,.0) 64%, #0057ff 82%, #8fd0ff 88%, rgba(143,208,255,0) 91%)}
.card:hover .edge, .card:has(.card__link:focus-visible) .edge{opacity:1}
.card:hover .edge i, .card:has(.card__link:focus-visible) .edge i{animation:edgeRun 1.15s cubic-bezier(.45,0,.2,1) both}
[dir="rtl"] .card:hover .edge i{animation-name:edgeRunR}
@keyframes edgeRun{from{transform:rotate(-90deg); opacity:1} 85%{opacity:1} to{transform:rotate(270deg); opacity:0}}
@keyframes edgeRunR{from{transform:rotate(90deg) scaleX(-1); opacity:1} 85%{opacity:1} to{transform:rotate(-270deg) scaleX(-1); opacity:0}}
.ghost .edge{display:none}
.grid.is-in .card{animation:riseS 900ms var(--spring-soft) both; animation-delay:calc(var(--i, 0) * 70ms)}
@keyframes riseS{from{opacity:0; transform:translateY(26px) scale(.985)}}
/* my courses: the gradient breathes; each pinned course keeps its own clock */
.pcard__bg{inset:-12%; animation:drift 26s ease-in-out infinite alternate; will-change:transform}
.pcard:nth-child(2n) .pcard__bg{animation-duration:32s; animation-direction:alternate-reverse}
.pcard__tick{display:flex; align-items:center; gap:7px; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--on-brand-3); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.pcard__tick::before{content:""; width:6px; height:6px; border-radius:50%; background:#8fd0ff; box-shadow:0 0 0 3px rgba(143,208,255,.2); animation:blink 2s ease-in-out infinite}
.pcard__tick .rn{height:1.3em; overflow:hidden}
.pcard__tick .rn i{display:block; font-style:normal}
.pcard__tick i.roll, .ecd__n i.roll{animation:roll 420ms var(--ease-out)}
@keyframes blink{50%{opacity:.35}}
@keyframes drift{0%{transform:translate3d(-3%, -2%, 0) scale(1.02)} 100%{transform:translate3d(3%, 2.5%, 0) scale(1.1)}}

/* -- EVENTS: a deep band (the nights), on the official gradient, slowly moving */
.band--deep{position:relative; isolation:isolate; overflow:hidden; color:#ffffff; background:#01286c}
.events.band{padding-bottom:0}
.band__bg{position:absolute; inset:-10%; z-index:-1; background:url("/media/gradients/gradient-1.jpg") center/cover, var(--grad-deep); animation:drift 36s ease-in-out infinite alternate; will-change:transform}
.band__bg::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 10%, rgba(0,87,255,.0), rgba(1,22,90,.35)), linear-gradient(180deg, rgba(1,24,92,.78), rgba(1,30,110,.52) 46%, rgba(1,18,76,.86))}
.band--deep .h2{color:#ffffff}
.band--deep .lead{color:var(--on-brand-2)}
.band--deep .eyebrow{color:#cfe2ff}
.ev-grid{grid-template-columns:minmax(0, 1.42fr) minmax(0, 1fr); gap:24px; margin-top:clamp(40px, 4.4vw, 60px)}
/* the featured night: glass on the deep band, a photo slot, a live countdown; it tilts a little under the pointer */
.band--deep .feat{display:grid; grid-template-columns:minmax(0, .86fr) minmax(0, 1.14fr); gap:0; padding:0; min-height:0; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 55%, rgba(255,255,255,.08)); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.45), 0 40px 90px -40px rgba(0,6,40,.9);
  transform:perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s var(--ease-out)}
.feat.is-tilt{transition:transform .15s linear}
.feat::after{content:""; position:absolute; left:0; top:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0)); transform:translate(var(--gx, -600px), var(--gy, -600px)); opacity:0; transition:opacity .4s}
.feat:hover::after{opacity:1}
.feat__media{position:relative; overflow:hidden; min-height:100%; background:#061bb0}
.feat__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.6s var(--ease-out)}
.feat__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,20,80,0) 55%, rgba(1,20,80,.45))}
.feat:hover .feat__media img{transform:scale(1.12)}
.feat__body{display:flex; flex-direction:column; gap:14px; padding:clamp(24px, 2.8vw, 40px); min-width:0}
.feat__k{font-size:13px; font-weight:600; color:var(--on-brand-3); letter-spacing:.02em}
.band--deep .feat__t{font-size:clamp(38px, 4vw, 62px)}
.band--deep .feat__d{font-size:16px}
.band--deep .feat__foot{margin-top:auto; flex-direction:column; align-items:flex-start; gap:16px}
.band--deep .feat__chips{margin-top:0}
.soon{position:absolute; z-index:1; top:16px; inset-inline-start:16px; display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 14px 0 12px; border-radius:var(--pill);
  background:#ffffff; color:var(--royal); font-size:13px; font-weight:700; box-shadow:0 10px 24px -10px rgba(0,8,50,.6)}
[dir="rtl"] .soon{padding:0 12px 0 14px}
.soon[hidden]{display:none}
.soon__dot{position:relative; width:8px; height:8px; border-radius:50%; background:#0057ff}
.soon__dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:#0057ff; animation:ping 1.9s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes ping{0%{transform:scale(1); opacity:.75} 70%, 100%{transform:scale(3.4); opacity:0}}
.ecd{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:4px}
.ecd__u{padding:12px 4px 9px; border-radius:16px; text-align:center; background:rgba(1,14,70,.34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12)}
.ecd__n{display:flex; justify-content:center; direction:ltr; height:1.1em; overflow:hidden; font-family:var(--font-latin); font-weight:300; font-size:clamp(30px, 2.9vw, 44px); line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ecd__n i{display:block; font-style:normal}
.ecd__l{display:block; margin-top:3px; font-size:12px; font-weight:600; color:var(--on-brand-3)}
:root[lang="ar"] .ecd__l{font-size:12.5px}
/* the list: glass rows, each with its photo slot; the date sits on the photo */
.band--deep .elist h3{color:var(--on-brand-3); font-weight:600}
.band--deep .erow{position:relative; isolation:isolate; overflow:hidden; gap:14px; padding:10px 14px 10px 10px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); color:#ffffff;
  transition:transform .4s var(--ease-out), background .3s}
[dir="rtl"] .band--deep .erow{padding:10px 10px 10px 14px}
.band--deep .erow:hover{background:rgba(255,255,255,.13); transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.erow::before{content:""; position:absolute; left:0; top:0; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(143,208,255,.16), rgba(143,208,255,0)); transform:translate(var(--gx, -400px), var(--gy, -400px)); opacity:0; transition:opacity .3s}
.erow:hover::before{opacity:1}
.erow__ph{position:relative; flex:none; width:68px; height:68px; border-radius:14px; overflow:hidden; background:#061bb0}
.erow__ph img{width:100%; height:100%; object-fit:cover; transform:scale(1.15); transition:transform .8s var(--ease-out)}
.erow:hover .erow__ph img{transform:scale(1.25)}
.band--deep .erow__d{position:absolute; inset:0; width:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; border-radius:0; background:linear-gradient(180deg, rgba(1,22,90,.9), rgba(1,18,76,.96))}
.band--deep .erow__d b{color:#ffffff; font-size:22px; font-weight:400; text-shadow:0 1px 8px rgba(0,10,50,.5)}
.band--deep .erow__d span{color:#ffffff; font-size:12px}
.band--deep .erow__t span{color:var(--on-brand-3)}
.band--deep .erow .tag{color:#ffffff; background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.band--deep .erow.is-past{background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.band--deep .erow.is-past .erow__ph img{filter:grayscale(.5) brightness(.8)}
.band--deep .erow.is-past .erow__d{background:linear-gradient(180deg, rgba(1,18,76,.84), rgba(1,14,62,.92))}
.band--deep .erow.is-past .erow__d span{color:var(--on-brand-2)}
.band--deep .erow__d span{white-space:nowrap; max-width:100%; padding-inline:2px}
:root[lang="ar"] .band--deep .erow__d span{font-size:10.5px; letter-spacing:0}
.band--deep .erow.is-past .tag{background:transparent; color:var(--on-brand-3)}
.band--deep .erow.is-past .erow__t b{color:var(--on-brand-2)}
/* choreography: the night arrives first, then the list, row by row */
.ev-grid .feat{opacity:0; translate:0 28px; transition:opacity .8s var(--ease-out), translate 1.1s var(--spring-soft), transform .6s var(--ease-out)}
.ev-grid .feat.is-tilt{transition:opacity .8s var(--ease-out), translate 1.1s var(--spring-soft), transform .15s linear}
.ev-grid .erow, .ev-grid .elist h3{opacity:0; translate:0 18px; transition:opacity .6s var(--ease-out), translate .9s var(--spring-soft), transform .4s var(--ease-out), background .3s; transition-delay:calc(220ms + var(--i, 0) * 90ms)}
.ev-grid.is-live .feat, .ev-grid.is-live .erow, .ev-grid.is-live .elist h3{opacity:1; translate:none}
.ev-grid.is-live .erow:hover{transition-delay:0ms}
/* the ticker: what is coming, drifting along the foot of the band */
.ticker{position:relative; display:flex; align-items:center; margin-top:clamp(56px, 6vw, 92px); border-top:1px solid rgba(255,255,255,.16); background:rgba(1,14,66,.38)}
.ticker__vp{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.ticker__track{display:flex; width:max-content; animation:tick 80s linear infinite; will-change:transform}
[dir="rtl"] .ticker__track{animation-name:tickR}
.ticker__set{display:flex; flex:none}
.tk{display:inline-flex; align-items:center; gap:10px; height:66px; padding-inline:26px; white-space:nowrap; font-size:16px; color:#ffffff}
.tk b{font-weight:600}
.tk span{color:var(--on-brand-3); font-size:15px}
.tk .i{width:13px; height:15px; color:#8fd0ff; flex:none}
.tk--tag{font-family:var(--font-latin); font-weight:300; font-size:21px; letter-spacing:-.01em}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes tickR{to{transform:translateX(50%)}}
.ticker__vp:hover .ticker__track, .ticker.is-off .ticker__track, .ticker.is-paused .ticker__track{animation-play-state:paused}
.ticker__pp{flex:none; width:40px; height:40px; margin-inline:6px max(12px, calc((100vw - var(--maxw)) / 2 - 40px)); border-radius:50%; display:grid; place-items:center; color:#ffffff; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.ticker__pp:hover{background:rgba(255,255,255,.18)}
.ticker__pp svg{width:16px; height:16px}
.ticker__pp .tp-play, .ticker.is-paused .tp-pause{display:none}
.ticker.is-paused .tp-play{display:block}

/* -- ABOUT: numbers count up as a current charges each segment; committees power on one after another */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:clamp(52px, 5.4vw, 80px); border-top:1px solid var(--line)}
.stat{position:relative; display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:8px; padding:26px 20px 4px 0; margin:0; min-width:0}
.stat + .stat{padding-inline-start:24px; border-inline-start:1px solid var(--line)}
.stat::before{content:""; position:absolute; top:-1px; inset-inline:0; height:2px; background:linear-gradient(90deg, var(--stat-bar)); transform:scaleX(0); transform-origin:0 50%}
[dir="rtl"] .stat::before{transform-origin:100% 50%; background:linear-gradient(270deg, var(--stat-bar))}
.stats.is-live .stat::before{transform:none; transition:transform .9s cubic-bezier(.6,0,.2,1); transition-delay:calc(var(--i) * 160ms)}
.stat dd{margin:0; display:flex; align-items:baseline; gap:2px; font-family:var(--font-latin); font-weight:300; font-size:clamp(46px, 5.6vw, 88px); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.stat__n{background:var(--stat-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-inline-end:.03em}
:root[lang="ar"] .stat dd{font-family:var(--font-arabic); letter-spacing:0; font-weight:300}
.stat__p{font-size:.55em; color:var(--stat-p); font-weight:400}
.stat dt{font-size:14.5px; font-weight:600; color:var(--ink-2)}
.stat{opacity:0; translate:0 16px; transition:opacity .6s var(--ease-out), translate .9s var(--spring-soft); transition-delay:calc(var(--i) * 120ms)}
.stats.is-live .stat{opacity:1; translate:none}
.comm{position:relative; isolation:isolate; opacity:0; translate:0 26px; transition:opacity .7s var(--ease-out), translate 1.1s var(--spring-soft); transition-delay:calc(var(--i) * 110ms)}
.comms.is-live .comm{opacity:1; translate:none}
.comm__img{transition:transform .55s var(--ease-out)}
.comm__img::after{content:""; position:absolute; inset:0; background:#01286c; opacity:.72; pointer-events:none; transition:opacity 1.1s ease-out; transition-delay:calc(380ms + var(--i) * 190ms)}
.comms.is-live .comm__img::after{opacity:0}
.comm::before{content:""; position:absolute; top:0; inset-inline:0; aspect-ratio:1; border-radius:var(--r-lg); z-index:-1; pointer-events:none;
  box-shadow:0 36px 70px -26px rgba(0,87,255,.9), 0 0 0 1px rgba(0,87,255,.1); opacity:0; transition:opacity .45s var(--ease-out), transform .55s var(--ease-out)}
.comm:hover .comm__img, .comm:hover::before{transform:translateY(-8px)}
.comm:hover::before{opacity:1}
.comm:hover .comm__img img{transform:scale(1.06)}
.comm h3{transition:color .3s}
.comm:hover h3{color:var(--ink-brand)}

/* -- FOOTER: the living gradient, the closing line rises, the current runs under it */
.foot__bg{inset:-10%; animation:drift 34s ease-in-out infinite alternate-reverse; will-change:transform}
.trace--foot{margin:clamp(48px, 5vw, 64px) 0 0}
.foot__cols{margin-top:0; border-top:0}
.foot .kw__i{transition-delay:calc(120ms + var(--k, 0) * 70ms)}

/* -- micro-interactions: magnetic primary actions, press feedback that springs back */
.magnet{translate:var(--tx, 0px) var(--ty, 0px); transition:translate .45s var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-med), background-color var(--t-med)}
.btn.press:active{transform:scale(.96); transition-duration:80ms}
.btn--white{position:relative; overflow:hidden; isolation:isolate}
.btn--white::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(100deg, rgba(0,87,255,0) 30%, rgba(0,87,255,.14) 50%, rgba(0,87,255,0) 70%); transform:translateX(-110%)}
.btn--white:hover::after{transform:translateX(110%); transition:transform .8s var(--ease-out)}
[dir="rtl"] .btn--white::after{transform:translateX(110%)}
[dir="rtl"] .btn--white:hover::after{transform:translateX(-110%)}

/* -- COURSE PAGE: the header breathes, sections power on as you read, files arrive one by one */
.cp-hero__bg{inset:-10%; animation:drift 30s ease-in-out infinite alternate}
.rsec{position:relative}
.rsec + .rsec::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1.5px; transform-origin:0 50%; transform:scaleX(0); opacity:0;
  background:linear-gradient(90deg, #0057ff, rgba(0,87,255,.35) 40%, rgba(0,87,255,0) 80%)}
[dir="rtl"] .rsec + .rsec::before{transform-origin:100% 50%; background:linear-gradient(270deg, #0057ff, rgba(0,87,255,.35) 40%, rgba(0,87,255,0) 80%)}
.rsec.is-live::before{animation:zap 1.3s cubic-bezier(.5,0,.15,1) both}
@keyframes zap{0%{transform:scaleX(0); opacity:1} 60%{opacity:1} 100%{transform:scaleX(1); opacity:.35}}
.rsec__h h2{opacity:0; translate:0 12px; transition:opacity .6s var(--ease-out), translate .9s var(--spring-soft)}
.rsec__h span{display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 7px; border-radius:var(--pill); background:var(--accent-soft-2); color:var(--accent-ink); font-size:12.5px; font-weight:700;
  opacity:0; transform:scale(.6); transition:opacity .4s var(--ease-out) .25s, transform .7s var(--spring) .25s}
.rsec.is-live .rsec__h h2{opacity:1; translate:none}
.rsec.is-live .rsec__h span{opacity:1; transform:none}
.rsec .file, .rsec .nofiles, .rsec .mx, .rsec .xstack{opacity:0; translate:0 12px; transition:opacity .5s var(--ease-out), translate .8s var(--spring-soft), background var(--t-med); transition-delay:calc(140ms + var(--i, 0) * 55ms)}
.rsec.is-live .file, .rsec.is-live .nofiles, .rsec.is-live .mx, .rsec.is-live .xstack{opacity:1; translate:none}
.rsec.is-live .file:hover{transition-delay:0ms}
.file{position:relative; isolation:isolate; overflow:hidden}
.file::before{content:""; position:absolute; left:0; top:0; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,87,255,.08), rgba(0,87,255,0)); transform:translate(var(--gx, -400px), var(--gy, -400px)); opacity:0; transition:opacity .3s}
.file:hover::before{opacity:1}
.file__ic{transition:transform .45s var(--spring)}
.file:hover .file__ic{transform:scale(1.08) rotate(-4deg)}
[dir="rtl"] .file:hover .file__ic{transform:scale(1.08) rotate(4deg)}
.file__open svg{transition:transform .3s var(--ease-out)}
.file:hover .file__open svg{transform:translate(2px, -2px)}
[dir="rtl"] .file:hover .file__open svg{transform:scaleX(-1) translate(2px, -2px)}

/* -- responsive */
@media (max-width: 1100px){
  .band--deep .feat{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr)}
  .stats{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .stat:nth-child(3){border-inline-start:0; padding-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line); margin-top:18px}
}
@media (max-width: 900px){
  .ev-grid{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width: 760px){
  .band--deep .feat{grid-template-columns:minmax(0, 1fr)}
  .feat__media{min-height:0; aspect-ratio:16/9}
  .band--deep .feat__foot{align-items:stretch}
  .band--deep .feat__foot .btn{width:100%}
  .ecd__u{padding:10px 2px 8px; border-radius:14px}
  .tk{height:58px; padding-inline:18px; font-size:15px}
  .ticker__pp{margin-inline:4px 10px}
  .stat{padding:22px 12px 2px 0}
  .stat + .stat{padding-inline-start:16px}
  .stat:nth-child(3){padding-inline-start:0}
  .stat dd{font-size:clamp(44px, 13vw, 60px)}
  .grid-h{flex-wrap:wrap}
}
@media (max-width: 560px){
  .erow__ph{width:60px; height:60px}
  .band--deep .erow{padding:8px 12px 8px 8px}
  [dir="rtl"] .band--deep .erow{padding:8px 8px 8px 12px}
}

/* -- reduced motion: the same page, switched on, standing still */
@media (prefers-reduced-motion: reduce){
  .kw__i, .lv-in, .sec-head .eyebrow, .about .eyebrow, .comm, .stat, .ev-grid .feat, .ev-grid .erow, .ev-grid .elist h3, .rsec__h h2, .rsec .file, .rsec .nofiles, .rsec .mx, .rsec .xstack{opacity:1!important; translate:none!important}
  .rsec__h span{opacity:1!important; transform:none!important}
  .band__bg, .foot__bg, .pcard__bg, .cp-hero__bg, .ticker__track, .soon__dot::after, .pcard__tick::before, .trace__run::after, .rsec::before, .edge i, .grid.is-in .card{animation:none!important}
  .trace__run::before, .stat::before{transform:none!important}
  .comm__img::after{opacity:0!important}
  .feat{transform:none!important}
  .ticker__vp{-webkit-mask-image:none; mask-image:none}
  .ticker__track{width:auto; justify-content:center}
  .ticker__set{flex-wrap:wrap; justify-content:center; padding-block:8px}
  .ticker__set[aria-hidden="true"], .tk--dup, .ticker__pp{display:none}
  .tk{height:48px}
}
.band--deep .feat__chips{gap:6px} .band--deep .feat__chips .pill{padding:0 12px; font-size:13.5px}

/* ================================================================== ROUND 5 · FILM HERO
   The club's own blues come alive in a background film (Higgsfield / Kling, from the official gradient);
   electric filaments rise to the top. The real mark and words sit on it as crisp DOM — never baked into the video. */
.hero--film{background:#0634c9; color:#ffffff; min-height:max(680px, 100svh); max-height:1100px}
.film{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#0634c9 url("/media/hero/hero-film-desk.jpg") center / cover no-repeat}
@media (max-width: 760px){ .film{background-image:url("/media/hero/hero-film-phone.jpg")} }
.film__v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease-out)}
.film.is-playing .film__v{opacity:1}
.film__a{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease-out)}
.film__a:not([src]){display:none}
.film.is-anim .film__a{opacity:1}
/* legibility: a soft navy vignette behind the words, deepest at the edges and the top bar */
.film__veil{position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(2,20,96,.50), rgba(2,20,96,.22) 70%, rgba(2,20,96,.10)),
    linear-gradient(180deg, rgba(1,24,96,.72) 0, rgba(1,24,96,.30) 140px, rgba(1,24,96,.18) 40%, rgba(1,24,96,.28) 75%, rgba(1,24,96,.55) 100%)}
/* the lab footage takes the club's blue: a royal tint multiplied over it */
.film::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, #0b2bd0, #01286c); mix-blend-mode:multiply; opacity:.55; pointer-events:none}
.film__fade{z-index:1}
.film__grain{position:absolute; inset:-50%; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* the hand-off to the white page below */
.film__fade{position:absolute; inset:auto 0 0; height:120px; background:linear-gradient(180deg, transparent, transparent 30%, var(--page))}

.hero--film .hero__in{justify-content:center; gap:0; padding-top:calc(var(--hdr-h) + 24px); padding-bottom:clamp(64px, 9vh, 110px)}
/* the crest: the official mark fills with light from the bottom up — To The Top */
.crest{display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:clamp(14px, 2.4vh, 26px)}
.crest__mark{position:relative; width:clamp(88px, 9.5vw, 132px); aspect-ratio:714 / 952}
.crest__mark img{position:absolute; inset:0; width:100%; height:100%; display:block}
.crest__img{opacity:.28; filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
.crest__fill{position:absolute; inset:0; clip-path:inset(100% -60% -60% -60%); animation:crestFill 1.5s cubic-bezier(.65,0,.25,1) .35s forwards}
.crest__fill img{filter:drop-shadow(0 0 14px rgba(160,210,255,.85)) drop-shadow(0 0 42px rgba(0,120,255,.55))}
.crest__fill img{position:absolute; inset:0}
@keyframes crestFill{to{clip-path:inset(-60% -60% -60% -60%)}}
.crest__mark::after{content:""; position:absolute; left:50%; top:52%; width:260%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(120,190,255,.38), rgba(0,87,255,.14) 55%, rgba(0,87,255,0)); opacity:0;
  animation:crestGlow 1.2s ease-out 1.3s forwards, crestBreath 5.5s ease-in-out 2.6s infinite}
@keyframes crestGlow{to{opacity:1}}
@keyframes crestBreath{0%,100%{scale:1; opacity:1}50%{scale:1.08; opacity:.72}}
.crest__eyebrow{display:inline-flex; align-items:center; gap:12px; white-space:nowrap; font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.88);
  opacity:0; translate:0 10px; animation:heroRise .8s var(--ease-out) 1.25s forwards}
:root[lang="ar"] .crest__eyebrow{letter-spacing:0; font-size:15px; text-transform:none}
.crest__eyebrow .lat{letter-spacing:.32em}
.crest__sep{width:22px; height:1px; background:rgba(255,255,255,.55)}
@keyframes heroRise{to{opacity:1; translate:0 0}}

.hero--film .hero__title{color:#ffffff; text-shadow:0 2px 40px rgba(1,20,90,.35)}
.hero--film .hero__title .t, [dir="rtl"] .hero--film .hero__title .t{background-image:linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #bfe3ff 50%, #ffffff 60%, #ffffff 100%);
  background-size:260% 100%; background-position:100% 0; animation:titleIn 1s var(--ease-out) .9s both, sheen 7s ease-in-out 3s infinite; transition:none}
@keyframes titleIn{from{opacity:0; translate:0 22px; filter:blur(8px)}to{opacity:1; translate:0 0; filter:blur(0)}}
@keyframes sheen{0%,70%{background-position:100% 0}100%{background-position:-60% 0}}
.hero--film .hero__alt{color:rgba(255,255,255,.92); opacity:0; animation:heroRise .8s var(--ease-out) 1.25s forwards}
/* the entrance must not outlive itself: a held (fill: forwards) opacity animation makes the row a backdrop root,
   so the glass inside it stopped blurring and the title showed through the results. 'backwards' holds only the start. */
.hero--film .hero__tools{animation:toolsIn .8s var(--ease-out) 1.45s backwards}
@keyframes toolsIn{from{opacity:0; translate:0 14px}}
/* the tools stay light glass on the film so the search reads like the search everywhere else */
.hero--film .hero__tools .lg{color:var(--ink); background:var(--film-tools-bg); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:var(--film-tools-shadow)}
.hero--film .hero__tools .lg::before, .hero--film .hero__tools .lg::after{opacity:.5}
/* one focus ring, on the pill (the glass shadow above would otherwise hide it and leave a box round the bare input) */
.hero__tools .sfield input:focus-visible{outline:none; box-shadow:none}
.hero--film .hero__tools .sfield:focus-within{box-shadow:var(--film-tools-shadow), 0 0 0 2.5px var(--focus)}
.hero--film .next__m{color:var(--ink-2, #3b4766)}
.hero--film .next__dot{animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,87,255,.45)}80%,100%{box-shadow:0 0 0 12px rgba(0,87,255,0)}}

/* pause / play: the film loops for longer than 5 s, so it can always be stopped */
.film__ctl{position:absolute; z-index:3; inset-inline-end:max(20px, env(safe-area-inset-right,0px)); bottom:calc(clamp(64px, 9vh, 110px) - 8px); width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:#ffffff; cursor:pointer}
.film__ctl svg{width:16px; height:16px; fill:currentColor}
.film__ctl .i-play{display:none}
.film__ctl[aria-pressed="true"] .i-play{display:block}
.film__ctl[aria-pressed="true"] .i-pause{display:none}
.film__ctl:focus-visible{outline:2.5px solid #ffffff; outline-offset:3px}
@media (max-width: 760px){
  .hero--film{min-height:max(620px, 100svh)}
  .hero--film .hero__in{justify-content:center; padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .crest__mark{width:84px}
  .crest__eyebrow{font-size:11px; letter-spacing:.14em; gap:9px}
  .crest__eyebrow .lat{letter-spacing:.2em}
  .crest__sep{width:14px}
  .film__ctl{width:36px; height:36px; bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion: reduce){
  .crest__fill{animation:none; clip-path:none}
  .crest__mark::after, .crest__eyebrow, .hero--film .hero__alt, .hero--film .hero__tools, .hero--film .hero__title .t{animation:none; opacity:1; translate:none}
  .crest__mark::after{opacity:1}
  .film__grain{animation:none}
  .hero--film .next__dot{animation:none}
}

/* =====================================================================
   ROUND 6 · COURSES ALIVE — every moving thing is about the course:
   its subject (a scope that draws what it is about), its term (one
   shared axis), its files (a shelf). The generic hover glow and edge
   sweep are retired; hover now reveals the course's second idea.
   ===================================================================== */
.card::before{content:none}
.edge{display:none}
.card__res{margin-top:14px; padding-top:0; border-top:0; min-height:0}

/* -- the scope: a line drawing of the subject; the old hairline is its bench */
.scope{position:relative; height:56px; margin-top:14px; border-bottom:1px solid var(--line); contain:paint;
  --sc-s:var(--scope-s); --sc-l:var(--scope-l); --sc-t:var(--ink-2); --sc-g:var(--scope-g); --sc-bg:var(--card)}
.scope > svg{display:block; width:100%; height:100%; direction:ltr; unicode-bidi:isolate}
.scope .s, .scope .l, .scope .g{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.scope .s{stroke:var(--sc-s); stroke-width:1.5}
.scope .l{stroke:var(--sc-l); stroke-width:1.75}
.scope .g{stroke:var(--sc-g); stroke-width:1}
.scope .sf{fill:var(--sc-s)} .scope .lf{fill:var(--sc-l)}
.scope .dash{stroke-dasharray:2 3} .scope .dash2{stroke-dasharray:4 3}
.scope .tx{font-family:var(--font-latin); font-size:10px; font-weight:400; fill:var(--sc-t); letter-spacing:.01em}
.scope .chg{fill:var(--sc-bg); stroke:var(--sc-l); stroke-width:1.5; vector-effect:non-scaling-stroke}
.scope .chg--n{stroke:var(--sc-s)}
.scope .o{fill:var(--sc-bg); stroke:var(--sc-s); stroke-width:1.5; vector-effect:non-scaling-stroke}
.scope .tr1, .scope .tr2, .scope .tr3{opacity:0}
.scope .pr{opacity:0; transition:opacity .32s ease-out}
.scope.is-probe .pr{opacity:1; transition:opacity .42s cubic-bezier(.2,.8,.2,1)}
.scope--w{border-bottom:0; --sc-s:rgba(255,255,255,.5); --sc-l:#ffffff; --sc-t:rgba(255,255,255,.84); --sc-g:rgba(255,255,255,.22); --sc-bg:transparent}
/* drawn in on arrival, always in signal order (left → right, also in Arabic: time and I–V axes never mirror) */
.grid.is-pre .scope{clip-path:inset(0 100% 0 0)}
.grid.is-in .card .scope{animation:scWipe 900ms cubic-bezier(.65,0,.35,1) both; animation-delay:calc(260ms + var(--i, 0) * 70ms)}
@keyframes scWipe{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)}}
.ghost *, .ghost *::after, .ghost *::before{animation:none!important}

/* -- the shelf: one tile per kind of file; the old-exam stack looks as deep as it is */
.shelf{display:flex; flex-wrap:wrap; gap:6px}
.shelf__i{position:relative; display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 9px 0 7px; border-radius:9px; background:var(--shelf-bg); color:var(--accent-ink);
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; transition:box-shadow .24s var(--ease-out)}
.shelf__i .i{width:14px; height:14px; flex:none}
.shelf__i--w{padding-inline-end:11px; font-weight:500}
.shelf__i--w b{font-weight:600}
/* three or more old exams: one sheet behind the tile — a small stack, not an outline */
.shelf__i.is-deep{box-shadow:3px -3px 0 0 var(--shelf-deep); margin-inline-end:3px}
[dir="rtl"] .shelf__i.is-deep{box-shadow:-3px -3px 0 0 var(--shelf-deep)}
.card:hover .shelf__i.is-deep{box-shadow:4px -4px 0 0 var(--shelf-deep-2)}
[dir="rtl"] .card:hover .shelf__i.is-deep{box-shadow:-4px -4px 0 0 var(--shelf-deep-2)}
.card__res{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.card__hit{flex:none}
.card__res{margin-bottom:auto}   /* the term line and the exam row sit on the card's floor, whatever the shelf wraps to */
.shelf__none{display:inline-flex; align-items:center; gap:8px; height:28px; color:var(--ink-3); font-size:14px}
.shelf__none .i{width:15px; height:15px}
.card__res .pill{min-height:28px; font-size:13px}
.grid.is-in .card .shelf__i{animation:chipIn 460ms var(--spring) both; animation-delay:calc(520ms + var(--i, 0) * 70ms + var(--j, 0) * 40ms)}
@keyframes chipIn{from{opacity:0; transform:scale(.7)}}

/* -- the term line: term start → after the last final, the same axis on every card, filled up to today */
.term{position:relative; height:12px; margin:24px 0 0}
.term::before{content:""; position:absolute; inset-inline:0; top:5px; height:2px; border-radius:2px; background:var(--line)}
.term__fill{position:absolute; inset-inline-start:0; top:5px; height:2px; width:var(--now); border-radius:2px; background:var(--term-fill); transform-origin:0 50%}
[dir="rtl"] .term__fill{transform-origin:100% 50%}
.term__tk{position:absolute; top:2px; inset-inline-start:var(--x); width:8px; height:8px; margin-inline-start:-4px; border-radius:50%; background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line-3)}
.term__tk--fin{top:1px; width:10px; height:10px; margin-inline-start:-5px; border-radius:3px}
.term__tk.is-done{background:var(--term-done); box-shadow:none}
.term__tk.is-next{box-shadow:inset 0 0 0 2px var(--term-next), 0 0 0 4px var(--term-next-ring)}
.term__tk.is-hot::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 2px var(--term-hot); animation:tkRing 3.2s ease-out 1.6s infinite both}
.grid.is-off .term__tk.is-hot::after, .mine.is-off .term__tk.is-hot::after, .mine.is-off .pcard__tick::before{animation-play-state:paused}
@keyframes tkRing{0%{transform:scale(1); opacity:.9} 28%, 100%{transform:scale(2.6); opacity:0}}
.term__tk::before{content:attr(data-l); position:absolute; bottom:calc(100% + 5px); inset-inline-start:50%; translate:-50% 3px; font-size:10.5px; line-height:1; font-weight:600; font-style:normal; color:var(--ink-3); white-space:nowrap;
  opacity:0; transition:opacity .16s ease-out, translate .24s var(--ease-out); pointer-events:none}
[dir="rtl"] .term__tk::before{translate:50% 3px}
/* the next exam is always named (touch too); the others on hover or keyboard focus */
.term__tk.is-next::before, .card:hover .term__tk::before, .card:has(:focus-visible) .term__tk::before{opacity:1; translate:-50% 0}
[dir="rtl"] .term__tk.is-next::before, [dir="rtl"] .card:hover .term__tk::before, [dir="rtl"] .card:has(:focus-visible) .term__tk::before{translate:50% 0}
.term__tk.is-next::before{color:var(--accent-ink)}
.grid.is-in .card .term__fill{animation:termFill 800ms cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(420ms + var(--i, 0) * 70ms)}
.grid.is-in .card .term__tk{animation:tkPop 300ms var(--spring) both; animation-delay:calc(420ms + var(--i, 0) * 70ms + var(--p, 0) * 640ms)}
@keyframes termFill{from{transform:scaleX(0)}}
@keyframes tkPop{from{transform:scale(.3); opacity:0}}
.card__exam{margin-top:10px}
.card__exam .due{font-weight:600; color:var(--accent-ink)}
.card[data-due="soon"] .card__exam .due{display:inline-block; padding:3px 9px; border-radius:var(--pill); background:var(--accent-soft-2)}
.card[data-due="hot"] .card__exam .due{display:inline-block; padding:3px 10px; border-radius:var(--pill); background:var(--due-hot); color:#ffffff}

/* -- a missing course: one quiet line under the grid */
.gmore{margin-top:22px; font-size:14px; color:var(--ink-3); display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.gmore[hidden]{display:none}
.gmore a{display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); font-weight:600; text-decoration:none; border-radius:6px}
.gmore a:hover{text-decoration:underline; text-underline-offset:3px}
.gmore a:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px}
.gmore .i{width:14px; height:14px; transition:transform var(--t-med) var(--ease-out)}
.gmore a:hover .i{transform:translateX(3px)}
[dir="rtl"] .gmore .i{transform:scaleX(-1)}
[dir="rtl"] .gmore a:hover .i{transform:scaleX(-1) translateX(3px)}

/* -- My courses: your course runs its own drawing (the gradient no longer drifts — one meaningful motion, not two) */
.pcard__bg{inset:0; animation:none!important}
.pcard .scope{height:44px; margin-top:2px; flex:none; order:1}
.pcard .pcard__cd, .pcard > .pcard__w{margin-top:auto}
.pcard .term{display:none; order:2}
.pcard.is-new .scope{animation:scWipe 640ms cubic-bezier(.65,0,.35,1) 120ms both}
.term--w::before{background:rgba(255,255,255,.22)}
.term--w .term__fill{background:rgba(255,255,255,.66)}
.term--w .term__tk{background:#0a2bb8; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.term--w .term__tk.is-done{background:rgba(255,255,255,.8); box-shadow:none}
.term--w .term__tk.is-next{background:#0a2bb8; box-shadow:inset 0 0 0 2px #ffffff, 0 0 0 4px rgba(255,255,255,.2)}
.term--w .term__tk.is-hot::after{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.term--w .term__tk::before{opacity:1; translate:-50% 0; bottom:auto; top:calc(100% + 7px); color:var(--on-brand-3); font-weight:600; font-size:11px; white-space:pre; text-align:center; line-height:1.3}
.term--w .term__tk--fin::before{text-align:end}
[dir="rtl"] .term--w .term__tk::before{translate:50% 0}
.term--w .term__tk--fin::before{inset-inline-start:auto; inset-inline-end:-2px; translate:none}
[dir="rtl"] .term--w .term__tk--fin::before{translate:none}
.term--w .term__tk.is-next::before{color:#ffffff}
@media (min-width: 761px){
  .mine__row{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pcard.is-solo{grid-column:1 / -1; min-height:0}
}
@media (min-width: 761px) and (max-width: 1179px){
  /* a full-row pin: the countdown and the course's drawing side by side, not a drawing lost in the middle */
  .pcard.is-solo{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 360px); grid-template-areas:"top top" "cd sc"; align-items:end; column-gap:28px; row-gap:14px}
  .pcard.is-solo .pcard__top{grid-area:top}
  .pcard.is-solo .pcard__cd, .pcard.is-solo > .pcard__w{grid-area:cd}
  .pcard.is-solo .scope{grid-area:sc; height:56px; margin:0}
}
@media (min-width: 1180px){
  .pcard{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 290px); grid-template-rows:auto 1fr auto; grid-template-areas:"top top" "cd sc" "term term"; column-gap:28px; row-gap:16px; align-items:end; padding:24px 26px 18px}
  .pcard__top{grid-area:top; align-self:start}
  .pcard .pcard__cd, .pcard > .pcard__w{grid-area:cd}
  .pcard .scope{grid-area:sc; height:60px; margin:0}
  .pcard .term{grid-area:term; display:block; margin:2px 0 34px}
  /* a single (odd last) pin spans the row: countdown | drawing | term, one line */
  .pcard.is-solo{grid-template-columns:minmax(0, .85fr) minmax(0, 390px) minmax(0, 1.2fr); grid-template-rows:auto auto; grid-template-areas:"top top top" "cd sc term"; column-gap:44px; row-gap:4px}
  .pcard.is-solo .scope{height:66px; margin-bottom:6px}
  .pcard.is-solo .term{margin:0 0 30px}
}

/* -- the course page: the course's drawing becomes the header's baseline (with its second idea switched on) */
.cp-hero__scope{height:auto; width:min(100%, 560px); aspect-ratio:360 / 56; margin-top:24px; border:0}
::view-transition-old(c-scope), ::view-transition-new(c-scope){height:100%; width:100%; object-fit:contain; object-position:left center}
:root[dir="rtl"]::view-transition-old(c-scope), :root[dir="rtl"]::view-transition-new(c-scope){object-position:right center}
::view-transition-old(c-scope){animation:120ms ease-out both vtOut}
::view-transition-new(c-scope){animation:240ms ease-out 120ms both vtIn}

@media (max-width: 760px){
  .scope{height:46px; margin-top:12px}
  /* phones: only the main symbols, a size that can be read */
  .scope .tx{font-size:12.5px}
  .scope .tx.x2{display:none}
  .pcard:only-child{flex-basis:100%}
  .cp-hero__scope{margin-top:16px; width:100%}
  .term{margin-top:14px}
}
@media (prefers-reduced-motion: reduce){
  .grid.is-pre .scope{clip-path:none}
  .grid.is-in .card .scope, .grid.is-in .card .shelf__i, .grid.is-in .card .term__fill, .grid.is-in .card .term__tk,
  .pcard.is-new .scope, .term__tk.is-hot::after{animation:none!important}
  .term__tk.is-hot::after{transform:scale(1.9); opacity:.3}
  .scope .pr, .term__tk::before, .gmore .i{transition:none!important}
}

/* once the grid has arrived its entrance is spent: re-ordering on filter re-inserts nodes and must never replay it.
   (0,4,0)+ so it beats every .grid.is-in .card … entrance rule above */
.grid.is-in.is-settled .card, .grid.is-in.is-settled .card .scope, .grid.is-in.is-settled .card .shelf__i,
.grid.is-in.is-settled .card .term__fill, .grid.is-in.is-settled .card .term__tk{animation:none}

/* =====================================================================
   ROUND 8 · DARK THEME — opt-in only. Light is the default for every visitor.
   The page never follows the OS (prefers-color-scheme) or a host's [data-theme]; it follows its own
   attribute, :root[data-scheme="dark"], set before first paint from localStorage 'eec.theme' and by the
   header's theme button. Every colour role defined on :root above is redefined here; brand surfaces
   (hero film, My courses, Events band, course header, footer) are already deep blue and stay as they are.
   ===================================================================== */
:root, :root[data-theme]{color-scheme:light}
:root[data-scheme="dark"], :root[data-scheme="dark"][data-theme]{color-scheme:dark}
:root[data-scheme="dark"]{
  /* deep navy surfaces, lit from within */
  --bg:#050c26; --bg-2:#0a1536; --bg-3:#111e48; --mist:#17265a;
  --page:#050c26; --surface:#0e1a46; --surface-hover:#13225a; --card:#0b1640;
  --thumb:#1c2d6e; --thumb-shadow:0 1px 2px rgba(0,3,20,.45), 0 6px 16px rgba(0,4,30,.5), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 .5px rgba(160,190,255,.22);
  /* inks: white text, cool greys tinted blue (never grey on grey) */
  --ink:#eef3ff; --ink-2:#bcc8ec; --ink-3:#93a3d3;
  --line:rgba(150,180,255,.13); --line-2:rgba(150,180,255,.22); --line-3:rgba(160,190,255,.36);
  /* electric and sky, lifted for dark */
  --accent:#4d8dff; --accent-ink:#93bbff; --accent-soft:rgba(77,141,255,.13); --accent-soft-2:rgba(77,141,255,.22);
  --focus:#6aa3ff;
  --ink-brand:#a9c8ff; --ink-dim:#5a6aa3; --word-hot:#6aa8ff; --badge-ring:#0b1640; --fly-ring:rgba(150,190,255,.55);
  --btn-ink:#0057ff; --btn-ink-hover:#1f6bff; --btn-ink-shadow:0 10px 24px -10px rgba(0,87,255,.75);
  --due-hot:#0057ff;
  /* shadows: deeper and bluer */
  --shadow-1:0 1px 2px rgba(0,3,20,.5), 0 12px 28px -14px rgba(0,6,40,.85);
  --shadow-2:0 2px 6px rgba(0,3,20,.5), 0 28px 64px -28px rgba(0,8,50,.9);
  --shadow-lift:0 2px 6px rgba(0,3,20,.5), 0 24px 48px -20px rgba(0,30,140,.7);
  --shadow-blue:0 18px 44px -18px rgba(0,70,255,.5), 0 4px 12px -4px rgba(0,4,30,.6);
  /* Liquid Glass: a dark tint, a light rim, the same refraction */
  --glass-ink:#eef3ff;
  --glass-tint:linear-gradient(180deg, rgba(34,58,148,.68), rgba(12,26,84,.6));
  --glass-rim:rgba(255,255,255,.2); --glass-rim-2:rgba(150,180,255,.16);
  --glass-shadow:0 14px 36px -14px rgba(0,4,30,.85), 0 2px 6px rgba(0,4,30,.4);
  --glass-solid-calm:rgba(12,24,74,.97);
  --glass-edge:linear-gradient(140deg, rgba(255,255,255,.5), rgba(255,255,255,.08) 32%, rgba(150,180,255,.05) 55%, rgba(120,165,255,.3) 85%, rgba(255,255,255,.34));
  --glass-sheen:.45;
  --hdr-calm:rgba(5,12,38,.94); --hdr-calm-2:rgba(5,12,38,.78);
  --lens:linear-gradient(180deg, rgba(120,165,255,.28), rgba(77,141,255,.12)); --lens-rim:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 .5px rgba(140,180,255,.35);
  --sres-bg:rgba(10,20,62,.9); --sres-shadow:inset 0 0 0 1px rgba(150,180,255,.16), inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px -20px rgba(0,4,30,.85);
  --scrim:rgba(0,3,18,.5); --scrim-2:rgba(0,3,18,.6); --scrim-solid:rgba(0,3,18,.78);
  --film-tools-bg:rgba(8,18,62,.74); --film-tools-shadow:0 18px 50px -18px rgba(0,4,30,.8), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(150,180,255,.16);
  /* gradient words and numbers in the light end of the brand ramp */
  --hl-grad:linear-gradient(100deg, #5aa9ff 0%, #8fd0ff 55%, #d4ecff 100%);
  --stat-grad:linear-gradient(100deg, #ffffff, #bfe0ff 45%, #6aa8ff); --stat-p:#6aa8ff; --stat-bar:#4d8dff, #019cec;
  /* the course cards' diagrams, shelf and term line: lighter electric and sky strokes */
  --scope-s:rgba(160,195,255,.62); --scope-l:#5cb2ff; --scope-g:rgba(150,180,255,.2);
  --shelf-bg:rgba(77,141,255,.15); --shelf-deep:#1b2c66; --shelf-deep-2:#22397f;
  --term-fill:rgba(130,175,255,.55); --term-done:rgba(150,190,255,.8); --term-next:#6aa8ff; --term-next-ring:rgba(106,168,255,.2); --term-hot:rgba(106,168,255,.6);
  --sw-num:#bcc8ec; --sw-num-on:#93bbff;
  --field-line:rgba(150,180,255,.55); --ink-ph:#a3b1dc;
  --bar-tint:linear-gradient(180deg, rgba(16,30,86,.94), rgba(9,19,60,.94));
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23a9c8ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-scheme="dark"]{scrollbar-color:#2a3b80 var(--page)}
:root[data-scheme="dark"] ::selection{background:rgba(77,141,255,.45); color:#ffffff}
/* the white lockup on the dark page, whatever the header sits on */
:root[data-scheme="dark"] .hdr .brand .logo-white{opacity:1}
:root[data-scheme="dark"] .hdr .brand .logo-blue{opacity:0}
/* cards keep a faint top light so they lift off the page, not sink into it */
:root[data-scheme="dark"] .card{box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-1)}
:root[data-scheme="dark"] .card:hover{box-shadow:inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-lift)}
:root[data-scheme="dark"] .card:has(.card__link:focus-visible){box-shadow:inset 0 0 0 1px var(--line-2), 0 0 0 3px var(--focus)}
/* brand cards on the dark page: a hairline rim so their edge reads */
:root[data-scheme="dark"] .pcard, :root[data-scheme="dark"] .cp-hero{box-shadow:var(--shadow-blue), inset 0 0 0 1px rgba(160,200,255,.14)}
:root[data-scheme="dark"] .toast{box-shadow:0 18px 44px -14px rgba(0,3,20,.85), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(160,200,255,.22)}
:root[data-scheme="dark"] .comm__img{box-shadow:var(--shadow-1), inset 0 0 0 1px rgba(160,200,255,.1)}
@media (prefers-reduced-transparency: reduce){
  :root[data-scheme="dark"] .lg, :root[data-scheme="dark"] .refract-on .lg--refract, :root[data-scheme="dark"] .sres.lg{box-shadow:var(--glass-shadow), inset 0 0 0 1px rgba(150,180,255,.22)}
}

/* -- the theme button: a moon in light, a sun in dark; the icons swap on a spring */
.theme-btn{position:relative; overflow:hidden}
.theme-btn svg{position:absolute; inset:0; margin:auto; width:20px; height:20px; transition:transform 460ms var(--spring), opacity 220ms var(--ease-out)}
.theme-btn .i-sun{opacity:0; transform:rotate(-90deg) scale(.4)}
:root[data-scheme="dark"] .theme-btn .i-moon{opacity:0; transform:rotate(90deg) scale(.4)}
:root[data-scheme="dark"] .theme-btn .i-sun{opacity:1; transform:none}
@media (max-width: 860px){ .hdr .theme-btn{width:44px; height:44px} }
/* switching: one circular reveal from the button (the header and bars are part of the page snapshot for it) */
:root.vt-theme::view-transition-old(root), :root.vt-theme::view-transition-new(root){animation:none; mix-blend-mode:normal}
/* the new half starts closed at the button (app.js sets --vtx/--vty); the clip animation holds its last frame (fill: forwards) */
:root.vt-theme::view-transition-new(root){z-index:2; clip-path:circle(0px at var(--vtx, 100%) var(--vty, 0px))}
/* the page switches in one step under the reveal: no transition fades light → dark behind the circle, and every loop holds
   still for the 0.65 s, so the reveal composites two still pages (app.js setScheme / holdMotion) */
:root.vt-theme, :root.vt-theme *, :root.vt-theme *::before, :root.vt-theme *::after{transition:none!important; animation-play-state:paused!important}
.vt-theme .hdr, .vt-theme .tabbar, .vt-theme .cbar{view-transition-name:none!important}   /* never both: the theme reveal is one root snapshot */
/* the root group's own size animation is a no-op for the reveal, but it runs on the main thread next to the clip: none */
:root.vt-theme::view-transition-group(root){animation:none}
/* a rolling digit can never freeze on its first keyframe behind the circle (the clocks also hold: app.js liveTick / startCountdown) */
:root.vt-theme i.roll{animation:none}
/* the results over the film: denser dark glass so the title never reads through them */
:root[data-scheme="dark"] .hero--film .hero__tools .sres.lg{background:rgba(9,18,58,.93); box-shadow:var(--sres-shadow)}

/* =====================================================================
   ROUND 9 · HAND-OFF FIXES — what makes the prototype exact to port.
   ===================================================================== */
/* -- phone bars: a near-opaque backing behind every label (page text never reads through) */
@media (max-width: 860px){
  html{scroll-padding-bottom:100px}   /* focus and jumps never land under the bottom bar */
  .tabbar .lg, .cbar .lg{background:var(--bar-tint); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%)}
  .refract-on .tabbar .lg--refract, .refract-on .cbar .lg--refract{backdrop-filter:var(--lg-filter, blur(0px)) blur(26px) saturate(170%)}
  .tabbar.on-brand .lg{background:var(--bar-tint-brand)}
  .tabbar.on-brand .tab{color:rgba(255,255,255,.9)}
  /* the phone header over the film: a deeper veil so the title never strokes through the lockup */
  .hdr[data-on="brand"]{--edge:rgba(4,22,140,.62); --edge-2:rgba(6,27,176,.4)}
}
/* -- the exam strip clips its overflow: its ring sits inside */
#examStrip:focus-visible{outline-offset:-3px; box-shadow:none}
/* -- phones: the course facts wrap instead of hiding the prerequisite chips in a scroller */
@media (max-width: 560px){
  .rel__sc{flex-wrap:wrap; overflow:visible; white-space:normal; -webkit-mask-image:none; mask-image:none; row-gap:8px}
  [dir="rtl"] .rel__sc{-webkit-mask-image:none; mask-image:none}
}
/* -- off screen, every loop rests (one IntersectionObserver in app.js toggles .is-off on the hero, the events band and the footer) */
.hero.is-off .film__grain, .hero.is-off .crest__mark::after, .hero.is-off .hero__title .t, .hero.is-off .next__dot,
.events.is-off .band__bg, .events.is-off .soon__dot::after, .foot.is-off .foot__bg, .cp-hero.is-off .cp-hero__bg{animation-play-state:paused!important}
/* -- the hero's entrance plays once: coming back from a course page it is already there (only the slow loops resume) */
.hero.is-seen .crest__fill{animation:none; clip-path:inset(-60% -60% -60% -60%)}
.hero.is-seen .crest__mark::after{animation:crestBreath 5.5s ease-in-out infinite; opacity:1}
.hero.is-seen .crest__eyebrow, .hero--film.is-seen .hero__alt{animation:none; opacity:1; translate:none}
.hero--film.is-seen .hero__tools{animation:none}
.hero--film.is-seen .hero__title .t, [dir="rtl"] .hero--film.is-seen .hero__title .t{animation:sheen 7s ease-in-out 3s infinite}
/* -- reduced motion: loops are removed, not run at 1 ms */
@media (prefers-reduced-motion: reduce){
  .hero--film .hero__title .t, [dir="rtl"] .hero--film .hero__title .t, .film__grain, .crest__mark::after, .hero--film .next__dot,
  .band__bg, .foot__bg, .cp-hero__bg, .soon__dot::after, .pcard__tick::before, .term__tk.is-hot::after, .ticker__track{animation:none!important}
  .crest__mark::after{opacity:1}
}

/* -- the drawings' moving parts live on composited layers (app.js lifts each animated node into its own small <svg>
      in .scope__mv, scaled once to the drawing; only transform and opacity animate, so no layout per frame) */
.scope__mv{position:absolute; left:0; top:0; width:360px; height:56px; transform-origin:0 0; pointer-events:none; direction:ltr}
.scope__mv > svg, .scope__clip > svg{position:absolute; left:0; top:0; overflow:visible; transform-origin:0 0}
.scope__clip{position:absolute; overflow:hidden}

/* -- exams with no date yet (the API's exam dates are nullable) */
.tba{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--pill); font-size:13px; font-weight:600; color:var(--ink-2); background:var(--bg-3)}
[data-tone="brand"] .tba, .cp-hero .tba{color:#ffffff; background:rgba(255,255,255,.16)}
.exam-tba{margin-top:14px; padding:14px 16px; border-radius:14px; background:rgba(1,20,90,.28); color:var(--on-brand-2); font-size:14px}
.term__tk.is-tba{display:none}

/* -- old exams: a cell can hold several files (admin folders); exams by chapter get their own block */
.xcell{display:flex; flex-wrap:wrap; gap:6px}
.xopen--sm{height:38px; padding:0 12px 0 5px; font-size:13px; gap:6px}
[dir="rtl"] .xopen--sm{padding:0 5px 0 12px}
.xopen--sm .fi{width:26px; height:26px}
.xchap{margin-top:26px}
.xchap h3{font-size:13px; font-weight:600; color:var(--ink-3); margin-bottom:4px}
.files__g{font-size:12.5px; font-weight:600; color:var(--ink-3); margin:14px 0 2px; letter-spacing:.01em}
.files__g:first-child{margin-top:0}
.file__t span .sz{font-variant-numeric:tabular-nums}
/* -- no featured event: the hero keeps its search alone, the Events band its list alone */
.hero__tools.is-solo{grid-template-columns:minmax(0, 1fr); width:min(620px, 100%)}
.ev-grid.is-solo{grid-template-columns:minmax(0, 1fr)}

/* =====================================================================
   ROUND 10 · ALL COURSES — a dedicated page (#courses → /[locale]/courses).
   Head: the term at a glance (exams per week). A sticky search bar, filter chips that show their counts, two orders.
   Two views of the same results: Cards (the home page's cards, shelved) and Path (the curriculum as a circuit board).
   The home page's Courses section becomes the way in: a launcher, My courses, the exams coming up and "See all".
   Motion: arrivals once, reflow on input, one charge front on demand. Nothing loops that the cards did not already have.
   ===================================================================== */
:root{ --trace:#768fc8; --trace-lit:#0057ff; --board-dot:rgba(1,40,108,.11); }
:root[data-scheme="dark"]{ --trace:#768fc8; --trace-lit:#5cb2ff; --board-dot:rgba(150,180,255,.1); }

/* -- home: the launcher (a link that looks like the field), the exams coming up, See all */
.ffield--link{text-decoration:none; color:var(--ink-3); cursor:pointer; flex:1 1 100%; padding-inline-end:8px}
.ffield--link .ffield__t{flex:1; min-width:0; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ffield--link:hover{background:var(--surface); box-shadow:inset 0 0 0 1px var(--accent)}
.ffield--link:focus-visible{outline:none; border-radius:var(--pill); box-shadow:inset 0 0 0 1px var(--field-line), 0 0 0 2.5px var(--focus)}
.ffield__go{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--btn-ink); color:#ffffff; transition:transform var(--t-med) var(--ease-out)}
.ffield__go svg{width:17px; height:17px; color:#ffffff}
.ffield--link:hover .ffield__go{transform:translateX(3px)}
[dir="rtl"] .ffield--link:hover .ffield__go{transform:translateX(-3px)}
.soon-block .grid-h{margin-top:44px}
.cmore{display:flex; width:100%; min-height:56px; margin-top:26px; font-size:15.5px; font-variant-numeric:tabular-nums}
.cmore span{white-space:normal; text-align:center}

/* -- the view */
.view--catalog{min-height:100svh; background:var(--bg); padding-top:calc(var(--hdr-h) + 12px); padding-bottom:var(--band)}

/* -- the head: a brand panel (the course page's header family), the title, the numbers, the term */
.cat-hero{position:relative; isolation:isolate; overflow:hidden; margin-top:6px; border-radius:var(--r-xl); color:#ffffff; background:#061bb0; box-shadow:var(--shadow-blue);
  padding:clamp(28px, 3.4vw, 50px) clamp(24px, 3.6vw, 52px) clamp(20px, 2.4vw, 30px)}
:root[data-scheme="dark"] .cat-hero{box-shadow:var(--shadow-blue), inset 0 0 0 1px rgba(160,200,255,.14)}
.cat-hero__bg{position:absolute; inset:0; z-index:-1; background:url("/media/gradients/gradient-3.jpg") center/cover, var(--grad-deep)}
.cat-hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(1,40,108,.66) 0%, rgba(6,27,176,.46) 52%, rgba(6,27,176,.38) 100%)}
.cat-hero .eyebrow{color:#cfe2ff}
.cat-hero__t{margin-top:14px; font-family:var(--font-latin); font-weight:300; font-size:clamp(48px, 5.8vw, 92px); line-height:.98; letter-spacing:-.045em}
:root[lang="ar"] .cat-hero__t{font-family:var(--font-arabic); letter-spacing:0; line-height:1.28}
.cat-hero__lead{max-width:620px; margin-top:14px; font-size:var(--fs-lead); color:var(--on-brand-2)}
.cat-hero__facts{margin-top:10px; font-size:14.5px; font-weight:600; color:#ffffff; font-variant-numeric:tabular-nums}
#catTitle:focus{outline:none; box-shadow:none}
/* the term at a glance: a stem per week as tall as its exams (the pinned ones solid white), today as a bright line */
.spec{margin-top:clamp(22px, 2.6vw, 34px); padding-top:16px; border-top:1px solid rgba(255,255,255,.18)}
.spec__h{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; margin-bottom:12px; font-size:13.5px; color:var(--on-brand-2); min-height:21px}
.spec__h b{color:#ffffff; font-weight:600}
.spec__next a{display:inline-flex; align-items:center; gap:6px; color:#ffffff; font-weight:600; text-decoration:none; border-radius:6px}
.spec__next a:hover{text-decoration:underline; text-underline-offset:3px}
.spec__next .i{width:14px; height:14px; transition:transform var(--t-med) var(--ease-out)}
.spec__next a:hover .i{transform:translateX(3px)}
[dir="rtl"] .spec__next .i{transform:scaleX(-1)}
[dir="rtl"] .spec__next a:hover .i{transform:scaleX(-1) translateX(3px)}
.spec__wk{color:#ffffff}
.spec__plot{position:relative; height:42px}
.spec__plot::before{content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:rgba(255,255,255,.3)}
.spec__bars{position:absolute; inset:0; display:flex; align-items:flex-end; gap:clamp(3px, .5vw, 6px)}
.spec__w{position:relative; flex:1; height:40px}
.spec__w::before, .spec__w b{content:""; position:absolute; inset-inline:0; bottom:0; height:100%; border-radius:4px 4px 1px 1px; transform-origin:50% 100%; transform:scaleY(0);
  transition:transform 240ms var(--ease-out)}
.spec__w::before{background:rgba(255,255,255,.5)}
.spec__w.is-past::before{background:rgba(255,255,255,.42)}
.spec__w.is-pt::before{background:rgba(255,255,255,.78)}
.spec__w b{background:#ffffff}
.spec.is-grown .spec__w::before{transform:scaleY(var(--h, 0))}
.spec.is-grown .spec__w b{transform:scaleY(var(--b, 0))}
.spec.is-first .spec__w::before, .spec.is-first .spec__w b{transition:transform 420ms var(--spring); transition-delay:calc(300ms + var(--w, 0) * 24ms)}
.spec__today{position:absolute; top:-5px; bottom:-3px; inset-inline-start:var(--x); width:2px; margin-inline-start:-1px; border-radius:2px; background:#8fd0ff; box-shadow:0 0 10px rgba(143,208,255,.75);
  transform-origin:50% 0; transition:transform 220ms var(--ease-out)}
.spec:not(.is-grown) .spec__today{transform:scaleY(0)}
.spec.is-first .spec__today{transition-delay:780ms}
.spec__ax{position:relative; height:17px; margin-top:7px; font-size:12.5px; font-weight:600; color:#e8efff}
.spec__ax span{position:absolute; top:0; inset-inline-start:var(--x); translate:-50% 0; white-space:nowrap}
[dir="rtl"] .spec__ax span{translate:50% 0}
.spec.is-instant .spec__w::before, .spec.is-instant .spec__w b, .spec.is-instant .spec__today{transition:none}

/* -- the bar: the search field and the view switch; it docks under the header as a glass capsule (blur only, no refraction) */
.ctool{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 8px); z-index:40; display:flex; align-items:center; gap:12px; margin:22px -6px 0; padding:6px; border-radius:var(--pill)}
/* docked: ONE surface from the top of the screen to just under the capsule (a --bg scrim that fades out at its foot), so the page
   never reads through as fragments around the bar; the capsule itself is glass over it (::after). Both under the controls. */
.ctool::before, .ctool::after{content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity .2s var(--ease-out)}
.ctool::before{z-index:-2; left:50%; width:100vw; translate:-50% 0; top:calc(-1 * (env(safe-area-inset-top,0px) + var(--hdr-h) + 8px)); bottom:-22px; background:var(--bg);
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 12px), transparent); mask-image:linear-gradient(180deg, #000 calc(100% - 12px), transparent)}
.ctool::after{z-index:-1; inset:0; border-radius:inherit; background:var(--glass-tint); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-rim), inset 0 0 0 .5px var(--glass-rim-2)}
.ctool.is-stuck::before{opacity:.95}
.ctool.is-stuck::after{opacity:1}
.ctool .ffield{flex:1 1 auto; height:54px}
.ctool.is-stuck .ffield{background:var(--surface)}
.ctool .kbd{display:none}
@media (pointer: fine){ .ctool .kbd{display:inline-grid} .ctool .ffield:focus-within .kbd{display:none} }
.seg--view button{display:inline-flex; align-items:center; gap:8px; padding:0 18px}
.seg--view button svg{width:18px; height:18px; flex:none}
.seg--view button[aria-checked="true"] svg{color:var(--accent-ink)}
/* the chips: level (one of), then four filters (any of); each shows how many courses it would leave */
.cfil{margin-top:12px}
.cfil__sc{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 8px 0 14px; border-radius:var(--pill); font-size:14px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); transition:background-color .16s, color .16s, box-shadow .16s, opacity .16s}
[dir="rtl"] .chip{padding:0 14px 0 8px}
:root[lang="ar"] .chip{font-weight:700}
.chip:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.chip .i{width:15px; height:15px; color:var(--accent-ink)}
.chip--t{padding-inline-start:11px}
.chip__n{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; font-family:var(--font-latin); font-size:12px; font-weight:700; color:var(--ink-2); background:var(--bg-3); font-variant-numeric:tabular-nums}
:root[lang="ar"] .chip__n{font-family:var(--font-arabic)}
.chip[aria-checked="true"], .chip[aria-pressed="true"]{color:#ffffff; background:var(--btn-ink); box-shadow:var(--btn-ink-shadow)}
.chip[aria-checked="true"] .chip__n, .chip[aria-pressed="true"] .chip__n{color:#ffffff; background:rgba(255,255,255,.22)}
.chip[aria-pressed="true"] .i{color:#ffffff}
.chip.is-zero:not([aria-checked="true"]):not([aria-pressed="true"]){color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line)}
.chip.is-zero:not([aria-checked="true"]):not([aria-pressed="true"]) .chip__n{background:transparent; color:var(--ink-3)}
.chip.is-charging[aria-pressed="true"] .i{animation:chipCharge 280ms cubic-bezier(.3,0,.2,1)}
@keyframes chipCharge{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)}}
.cfil__sep{width:1px; height:24px; margin-inline:4px; background:var(--line-2)}
.cfil__clear{height:40px; padding:0 12px; border-radius:var(--pill); font-size:14px; font-weight:600; color:var(--accent-ink)}
.cfil__clear:hover{background:var(--accent-soft)}

/* -- Cards: shelves (a heading per group, inside the one grid so cards can glide between groups) */
.cres{position:relative}
.cgrid{row-gap:18px}
.cgh{grid-column:1 / -1; display:flex; align-items:center; gap:16px; margin-top:28px}
.cgh__t{display:flex; align-items:center; gap:10px; font-family:var(--font-latin); font-weight:300; font-size:clamp(28px, 2.6vw, 36px); line-height:1.1; letter-spacing:-.03em; color:var(--ink); white-space:nowrap}
:root[lang="ar"] .cgh__t{font-family:var(--font-arabic); letter-spacing:0}
.cgh__n{display:inline-grid; place-items:center; min-width:26px; height:24px; padding:0 8px; border-radius:var(--pill); background:var(--accent-soft-2); color:var(--accent-ink); font-family:var(--font-latin); font-size:13px; font-weight:700; letter-spacing:0}
:root[lang="ar"] .cgh__n{font-family:var(--font-arabic)}
.cgh__bus{flex:1; height:1px; background:linear-gradient(90deg, var(--accent), var(--line-2) 28%)}
[dir="rtl"] .cgh__bus{background:linear-gradient(270deg, var(--accent), var(--line-2) 28%)}
/* cards enter once, by row, as they reach the viewport: their entrance waits (paused) until then */
.cgrid .card:not(.is-seen), .cgrid .card:not(.is-seen) *, .cgrid .card:not(.is-seen) *::after{animation-play-state:paused!important}
.cgrid.is-off .term__tk.is-hot::after{animation-play-state:paused}
/* every empty list offers a next step */
.cempty{margin-top:26px; padding:34px 28px; border-radius:var(--r-lg); background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); text-align:center; color:var(--ink-2); font-size:15.5px;
  display:flex; flex-direction:column; align-items:center; gap:10px}
.cempty__t{font-size:19px; font-weight:600; color:var(--ink)}
.cempty__a{display:inline-flex; align-items:center; gap:5px; font:inherit; font-weight:600; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; border-radius:6px}
.cempty__a .i{width:14px; height:14px}
[dir="rtl"] .cempty__a .i{transform:scaleX(-1)}
.cempty__h{color:var(--ink-3); font-size:14px}
.cempty__chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px}
.chip--off{padding:0 14px 0 11px}
[dir="rtl"] .chip--off{padding:0 11px 0 14px}
.chip--off .i{width:13px; height:13px}
.view--catalog .gmore{margin-top:28px}

/* -- Path: the curriculum as a circuit board */
.board{position:relative; margin-top:26px; border-radius:var(--r-xl); background-color:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line);
  background-image:radial-gradient(var(--board-dot) 1px, transparent 1.3px); background-size:16px 16px}
.board__plot{position:relative}
.plv{position:absolute; display:flex; align-items:center; gap:10px; height:20px; margin:0; color:var(--ink-3)}
.plv .caps{font-size:11.5px; letter-spacing:.3em; color:var(--ink-2)}
:root[lang="ar"] .plv .caps{font-size:13px; letter-spacing:0}
.plv b{font-size:12px; font-weight:600; font-variant-numeric:tabular-nums}
.plv i{flex:1; height:1px; background:var(--line-2)}
.pwires{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.pw{fill:none; stroke:var(--trace); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s var(--ease-out), stroke .16s}
.board.is-web .pw, .board.is-web .pwh{opacity:1}
/* at catalog scale (crossings) the resting web steps back a little; a chosen course raises its chain above it */
.board.is-dense .pw, .board.is-dense .pwh{opacity:.62}
.board.has-sel .pw:not(.is-lit), .board.has-sel .pwh:not(.is-lit){opacity:.28}
.pw.is-lit{opacity:1; stroke:var(--trace-lit); stroke-width:2.25}
.pchip{position:absolute; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 34px 0 14px; border-radius:16px; text-decoration:none; color:var(--ink);
  background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line-2), var(--shadow-1); transition:box-shadow .2s var(--ease-out), background-color .2s, color .2s}
[dir="rtl"] .pchip{padding:0 14px 0 34px}
.pchip__code{font-family:var(--font-latin); font-weight:300; font-size:21px; line-height:1.05; letter-spacing:-.03em; white-space:nowrap}
.pchip__name{font-size:12.5px; font-weight:600; line-height:1.25; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pchip:hover, .pchip.is-sel{box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft-2), var(--shadow-1)}
.pchip:focus-visible{outline:none; border-radius:16px; box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 3px var(--focus), var(--shadow-1)}
.pchip.is-anc{box-shadow:inset 0 0 0 2px var(--accent), var(--shadow-1)}
.pchip.is-open{box-shadow:var(--shadow-1); outline:1.5px dashed var(--accent-ink); outline-offset:2px}
/* everything else goes quiet (still readable: ink-3, never opacity) */
.board.has-sel .pchip:not(.is-sel):not(.is-anc):not(.is-open), .pchip.is-filtered{color:var(--ink-3); background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line-2)}
.board.has-sel .pchip:not(.is-sel):not(.is-anc):not(.is-open) .pchip__name, .pchip.is-filtered .pchip__name{color:var(--ink-3)}
/* pinned: filled royal, like My courses */
.pchip.is-pin{color:#ffffff; background:linear-gradient(160deg, #0b2fd8, #061bb0 60%, #01286c); box-shadow:var(--shadow-blue)}
.pchip.is-pin .pchip__name{color:var(--on-brand-2)}
.pchip.is-pin:hover, .pchip.is-pin.is-sel{box-shadow:0 0 0 3px var(--card), 0 0 0 6px var(--accent), var(--shadow-blue)}
.board.has-sel .pchip.is-pin:not(.is-sel):not(.is-anc):not(.is-open), .pchip.is-pin.is-filtered{color:var(--ink-3); background:var(--bg-2); box-shadow:inset 0 0 0 1.5px rgba(6,27,176,.45)}
:root[data-scheme="dark"] .board.has-sel .pchip.is-pin:not(.is-sel):not(.is-anc):not(.is-open), :root[data-scheme="dark"] .pchip.is-pin.is-filtered{box-shadow:inset 0 0 0 1.5px rgba(120,165,255,.5)}
.pchip__pin{position:absolute; inset-inline-end:11px; bottom:10px; width:14px; height:14px; color:currentColor}
.pchip__pin .i{width:14px; height:14px}
.pchip__due{position:absolute; inset-inline-end:12px; top:11px; width:8px; height:8px; border-radius:50%}
.pchip__due--hot{background:var(--due-hot); box-shadow:0 0 0 3px var(--term-next-ring)}
.pchip__due--soon{box-shadow:inset 0 0 0 2px var(--accent)}
.pchip.is-pin .pchip__due--hot{background:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.pchip.is-pin .pchip__due--soon{box-shadow:inset 0 0 0 2px #ffffff}
/* pin stubs: one per prerequisite on the way in, one per course it opens on the way out (gateways stand out at rest) */
/* prerequisites outside the EE catalog: an off-sheet connector tag above the chip, never a long wire */
.ptags{position:absolute; bottom:calc(100% + 6px); inset-inline-start:0; display:flex; gap:6px}
.ptag{display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:6px; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); border:1px dashed var(--line-3); background:var(--bg-2)}
.pchip.is-sel .ptag{color:var(--accent-ink); border-color:var(--accent)}
.pchip.is-pin .ptag{color:var(--ink-2)}
/* the readout names the course under the pointer, what it needs and what it opens; it stays on screen at the board's foot */
.pread{position:sticky; bottom:16px; z-index:3; display:flex; align-items:center; gap:12px; min-height:64px; margin:0 14px 14px; padding:10px 10px 10px 18px; border-radius:22px;
  color:var(--glass-ink); background:var(--glass-tint); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-rim), inset 0 0 0 .5px var(--glass-rim-2)}
[dir="rtl"] .pread{padding:10px 18px 10px 10px}
.pread__t{flex:1; min-width:0; font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.pread__t b{color:var(--ink); font-weight:600}
.pread__act{display:flex; align-items:center; gap:8px; flex:none}
.pread__act:empty{display:none}
.pread__go{min-height:44px; padding:0 18px; font-size:14px}
.pread__go .i{width:16px; height:16px}
[dir="rtl"] .pread__go .i{transform:scaleX(-1)}
/* phones: levels become rows of code-only chips; stubs run top and bottom */
.board.is-phone .pchip{align-items:center; padding:0; border-radius:13px}
.board.is-phone .pchip__code{font-size:16.5px; letter-spacing:-.02em}
.board.is-phone .pchip__due{top:6px; inset-inline-end:6px; width:6px; height:6px}
.board.is-phone .pchip__pin{bottom:4px; inset-inline-end:5px; width:11px; height:11px}
.board.is-phone .pchip__pin .i{width:11px; height:11px}
.board.is-phone .plv{height:22px}
/* powering on: chips column by column, then the rest web */
.board.is-power .pchip{animation:pon 260ms var(--ease-out) both; animation-delay:calc(var(--c, 0) * 70ms)}
.board.is-power.is-web .pw{animation:pwIn 220ms ease-out 320ms both}
@keyframes pon{from{opacity:0; transform:translateY(6px)}}
@keyframes pwIn{from{opacity:0}}

/* -- small links on brand surfaces and in the search surfaces */
.pill--link{text-decoration:none; transition:background var(--t-med)}
.pill--link:hover{background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18))}
.opt--all{justify-content:space-between; margin-top:2px; box-shadow:inset 0 1px 0 var(--line)}
.opt--all .opt__n{color:var(--accent-ink)}
.opt--all .i{width:16px; height:16px; color:var(--accent-ink)}
[dir="rtl"] .opt--all .i{transform:scaleX(-1)}
.sres__all{color:var(--accent-ink); font-weight:600; text-underline-offset:3px}
.spot__all{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 2px 2px; padding:12px 14px; border-radius:16px; text-decoration:none; font-weight:600; font-size:14.5px; color:var(--accent-ink); box-shadow:inset 0 1px 0 var(--line)}
.spot__all:hover{background:var(--accent-soft)}
.spot__all .i{width:16px; height:16px}
[dir="rtl"] .spot__all .i{transform:scaleX(-1)}

/* -- responsive */
@media (max-width: 860px){
  .view--catalog{padding-bottom:120px}
  .ctool{top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 6px)}
}
@media (max-width: 760px){
  .cat-hero{border-radius:28px; padding:24px 20px 18px}
  .cat-hero__t{font-size:clamp(42px, 12vw, 56px); margin-top:10px}
  .cat-hero__lead{font-size:16px; margin-top:10px}
  .spec__h{font-size:12.5px; margin-bottom:10px}
  .spec__plot{height:38px} .spec__w{height:36px}
  .ctool{margin-top:14px; gap:8px}
  .ctool .ffield{height:52px; flex-basis:0; padding-inline:16px 10px}
  [dir="rtl"] .ctool .ffield{padding-inline:16px 10px}
  .ffield__n{display:none}
  .seg--view{flex:none}
  .seg--view button{width:44px; height:44px; padding:0; justify-content:center}
  .seg--view .seg__thumb{height:44px}
  .seg--view button span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  /* the chips scroll sideways under the bar, with an edge fade (one thumb, no sheet) */
  .cfil{margin-inline:-16px}
  .cfil__sc{flex-wrap:nowrap; overflow-x:auto; padding:2px 16px 8px; scrollbar-width:none; overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)}
  [dir="rtl"] .cfil__sc{-webkit-mask-image:linear-gradient(270deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image:linear-gradient(270deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)}
  .cfil__sc::-webkit-scrollbar{display:none}
  .cfil__sc > *, .chips{flex:none; flex-wrap:nowrap}
  .cgh{margin-top:22px; gap:12px}
  .cgh__t{font-size:26px}
  .cempty{padding:26px 18px}
  .board{border-radius:26px; margin-inline:-4px}
  .pread{bottom:calc(92px + env(safe-area-inset-bottom,0px)); flex-wrap:wrap; margin:0 8px 8px; padding:10px 10px 10px 14px; gap:8px 10px}
  [dir="rtl"] .pread{padding:10px 14px 10px 10px}
  .pread__t{font-size:13.5px; flex-basis:100%}
  .pread__act{margin-inline-start:auto}
  .pread__act .pin{width:44px; height:44px}
  /* home: the exams coming up are a snap row, like My courses */
  .grid--soon{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-16px; padding:4px 16px 18px; gap:12px; scrollbar-width:none}
  .grid--soon::-webkit-scrollbar{display:none}
  .grid--soon .card{flex:0 0 82%; scroll-snap-align:center}
  .grid--soon .card:only-child{flex-basis:100%}
  .cmore{margin-top:14px}
  .ffield--link .ffield__t{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .board.is-power .pchip, .board.is-power.is-web .pw, .chip.is-charging .i{animation:none!important}
  .spec__w::before, .spec__w b, .spec__today, .pw, .pchip, .chip{transition:none!important}
}

/* -- iteration 2: the shelf heading as the shelf's first tile on wide screens; the strip elsewhere */
.cgh__sub, .cgh__term, .cgh__next, .cgh__mix{display:none}
@media (min-width: 1101px){
  .cgh:not(.cgh--flat){grid-column:1 / span 1; flex-direction:column; align-items:stretch; gap:0; margin-top:0; padding:24px 24px 20px; border-radius:var(--r-lg);
    background:linear-gradient(170deg, var(--accent-soft) 0%, transparent 62%), var(--bg-2); box-shadow:inset 0 0 0 1px var(--line)}
  .cgh:not(.cgh--flat) .cgh__t{flex-direction:column; align-items:flex-start; gap:12px; font-size:54px; line-height:.92; letter-spacing:-.045em; white-space:normal}
  :root[lang="ar"] .cgh:not(.cgh--flat) .cgh__t{font-size:44px; line-height:1.2}
  .cgh:not(.cgh--flat) .cgh__t .cgh__n{order:2}
  .cgh:not(.cgh--flat) .cgh__bus{display:none}
  .cgh:not(.cgh--flat) .cgh__sub{display:block; margin-top:14px; font-size:14px; color:var(--ink-3)}
  .cgh:not(.cgh--flat) .cgh__term{display:block; margin-top:22px}
  .cgh:not(.cgh--flat) .cgh__mix{display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none}
  .cgh:not(.cgh--flat) .cgh__next{display:flex; flex-direction:column; gap:2px; margin-top:16px; font-size:14px; color:var(--ink-3); line-height:1.35}
  .cgh:not(.cgh--flat) .cgh__next b{font-weight:600; color:var(--accent-ink)}
    .cgrid > .cgh--flat{margin-top:8px}
}
.cgh__term .term__tk{background:var(--bg-2)}
.ctool .seg--view{width:auto}
.cgh:not(.cgh--flat) .cgh__next{margin-top:auto; padding-top:18px}
.cgh__next ul{margin:8px 0 0; padding:0; list-style:none; display:grid; gap:7px}
/* the level's files by kind (when no term planner is shown): a label, its count, and a bar against the largest */
.cgh__mix li{display:grid; grid-template-columns:16px minmax(0, 1fr) auto; align-items:center; column-gap:9px; row-gap:6px; font-size:13.5px; line-height:1.25; color:var(--ink-2)}
.cgh__mix li svg{width:15px; height:15px; color:var(--accent-ink)}
.cgh__mix li b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.cgh__mix li::after{content:''; grid-column:2 / -1; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--accent) calc(var(--w) * 100%), var(--line) 0)}
[dir="rtl"] .cgh__mix li::after{background:linear-gradient(270deg, var(--accent) calc(var(--w) * 100%), var(--line) 0)}
.cgh__next li{display:flex; align-items:baseline; gap:6px; font-size:14px; color:var(--ink-2)}
.cgh__next li .lat{font-weight:600; color:var(--ink)}
.cgh__next li b{margin-inline-start:auto; padding-inline-start:10px; font-weight:600; color:var(--accent-ink); white-space:nowrap}

/* the shelf planner: the courses' term lines stacked on one axis, today running through them */
.plan{position:relative; --cw:56px}
.plan__r{display:flex; align-items:center; gap:10px; height:20px}
.plan__c{flex:none; width:var(--cw); font-size:11.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.plan .term{flex:1; margin:0; height:12px}
.plan .term__tk::before{display:none}
.plan .term__tk.is-hot::after{animation:none; opacity:0}
.plan .term__tk{background:var(--bg-2)}
.plan .term__tk.is-done{background:var(--term-done)}
.plan__today{position:absolute; top:-4px; bottom:-4px; inset-inline-start:calc(var(--cw) + 10px + (100% - var(--cw) - 10px) * var(--nowf, 0)); width:1.5px; margin-inline-start:-.75px; background:var(--term-next); opacity:.45; border-radius:1px}
@media (min-width: 1101px){ .cgh:not(.cgh--flat) .cgh__t .cgh__n{display:none} }
/* a field never forces its row wider than the screen (an <input>'s intrinsic width is ~20 characters of the page's font) */
.ctool .ffield, .ffield--link{min-width:0}
.ctool .ffield input{width:0}

/* =====================================================================
   ROUND 10 · ITERATION 5 — the three reviews: the reveal holds everything, Arabic separators, the toolbar, Path, a11y
   ===================================================================== */
/* -- Pause motion (footer switch; app.js setMotion): every loop holds, every entrance still plays */
.motion-off .pcard__bg, .motion-off .pcard__tick::before, .motion-off .band__bg, .motion-off .soon__dot::after, .motion-off .ticker__track, .motion-off .foot__bg,
.motion-off .cp-hero__bg, .motion-off .film__grain, .motion-off .hero--film .next__dot, .motion-off .term__tk.is-hot::after{animation-play-state:paused!important}
/* the two loops that share their element with an entrance: the entrance (first) plays, the loop (second) holds */
.motion-off .crest__mark::after, .motion-off .hero--film .hero__title .t{animation-play-state:running, paused!important}
.motion-off .hero.is-seen .crest__mark::after, .motion-off .hero--film.is-seen .hero__title .t{animation-play-state:paused!important}
.foot__h2{margin-top:24px}
.motion-btn{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px 0 12px; border-radius:var(--pill); font-weight:600; font-size:14px; color:#ffffff;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
[dir="rtl"] .motion-btn{padding:0 12px 0 16px}
:root[lang="ar"] .motion-btn{font-weight:700}
.motion-btn svg{width:16px; height:16px; flex:none}
.motion-btn .mo-r{display:none}
.motion-btn[aria-pressed="true"]{background:#ffffff; color:var(--royal); box-shadow:none}
.motion-btn[aria-pressed="true"] .mo-p{display:none}
.motion-btn[aria-pressed="true"] .mo-r{display:inline}

/* -- Arabic: the separator between facts is a spaced, lighter bullet (app.js SEP) — a middle dot beside ٢ or ٣ reads as ٠ */
.sep{display:inline-block; margin-inline:.18em; opacity:.5; font-weight:400; transform:scale(.86)}

/* -- the toast: its message is the live region; the Undo sits beside it */
.toast button[hidden]{display:none}

/* -- the Sort menu, in the bar next to Cards | Path */
.sortm{position:relative; flex:none}
.sortm[hidden]{display:none}
.sortm__b{display:inline-flex; align-items:center; gap:8px; height:54px; padding:0 14px 0 16px; border-radius:var(--pill); font-size:14.5px; font-weight:600; color:var(--ink-2);
  background:var(--bg-3); box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; transition:box-shadow var(--t-med)}
[dir="rtl"] .sortm__b{padding:0 16px 0 14px}
:root[lang="ar"] .sortm__b{font-weight:700}
.sortm__b:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.sortm__b > svg:first-child{width:18px; height:18px; flex:none; color:var(--accent-ink)}
.sortm__v{color:var(--ink); font-weight:inherit}
.sortm__chev{width:14px; height:14px; flex:none; transform:rotate(90deg); transition:transform var(--t-med) var(--ease-out)}
.sortm__b[aria-expanded="true"] .sortm__chev{transform:rotate(-90deg)}
.sortm__m{position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:6; min-width:224px; padding:6px; border-radius:20px; background:var(--surface);
  box-shadow:var(--shadow-2), inset 0 0 0 1px var(--line-2)}
.sortm__m[hidden]{display:none}
.sortm__m button{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 14px; border-radius:14px; font-size:14.5px; font-weight:600; color:var(--ink-2); text-align:start}
:root[lang="ar"] .sortm__m button{font-weight:700}
.sortm__m button:hover{background:var(--accent-soft); color:var(--ink)}
.sortm__m button:focus-visible{outline:none; background:var(--accent-soft); color:var(--ink); box-shadow:inset 0 0 0 2px var(--focus)}
.sortm__m .i{width:16px; height:16px; flex:none; color:var(--accent-ink); visibility:hidden}
.sortm__m button[aria-checked="true"]{color:var(--ink)}
.sortm__m button[aria-checked="true"] .i{visibility:visible}
/* the chips row holds only filters now; when it wraps (tablets) the divider between levels and filters goes */
.cfil.is-wrapped .cfil__sep{display:none}
/* the chips carry a visually hidden count name: it is positioned inside its chip, never outside the sideways scroller */
.chip{position:relative}
:root[data-scheme="dark"] .chip[aria-checked="true"] .chip__n, :root[data-scheme="dark"] .chip[aria-pressed="true"] .chip__n{background:rgba(0,10,60,.34)}

/* -- the term strip: its micro-legend; the plot is a keyboard stop */
.spec__key{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:8px; font-size:12.5px; font-weight:600; color:#e8efff}
.spec__k{display:inline-flex; align-items:center; gap:7px}
.spec__kw{width:7px; height:12px; border-radius:2px 2px 1px 1px; background:rgba(255,255,255,.5)}
.spec__kw--mine{background:#ffffff}
.spec__kt{width:2px; height:14px; border-radius:2px; background:#8fd0ff; box-shadow:0 0 8px rgba(143,208,255,.75)}
.spec__plot:focus-visible{outline:2px solid #ffffff; outline-offset:5px; border-radius:6px; box-shadow:none}

/* -- Path: the level heading (a count pill, never "Level 2 2"), the legend line, the whole web at rest, arrowheads */
.plvl, .plist, .plist > li{margin:0; padding:0; list-style:none}
.plv{font-family:inherit; font-size:12px; font-weight:600; line-height:1; letter-spacing:0}
.plv__n{display:inline-grid; place-items:center; height:20px; padding:0 8px; border-radius:var(--pill); background:var(--accent-soft-2); color:var(--accent-ink); font-size:11.5px; font-weight:700;
  letter-spacing:0; white-space:nowrap; font-variant-numeric:tabular-nums}
:root[lang="ar"] .plv__n{font-size:12px}
.pkey{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:0; padding:16px 22px 2px; font-size:13.5px; line-height:1.4; color:var(--ink-2)}
.pkey__h{margin-inline-end:auto; color:var(--ink)}
.pkey__k{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.pkey .pchip__due{position:static; flex:none}
.pkey__pin{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:6px; background:linear-gradient(160deg, #0b2fd8, #061bb0 60%, #01286c); color:#ffffff}
.pkey__pin .i{width:11px; height:11px}
.pkey__kbd{flex:1 1 100%; font-size:12.5px; color:var(--ink-3)}
@media (pointer: coarse){ .pkey__kbd{display:none} }
.pw{stroke-width:1.5}
.pwh{fill:var(--trace); stroke:none; opacity:0; transition:opacity .2s var(--ease-out)}
.pwh.is-lit{opacity:1; fill:var(--trace-lit)}
:root[data-scheme="dark"] .pchip{box-shadow:inset 0 0 0 1.5px rgba(118,143,200,.62), var(--shadow-1)}
/* the chosen course: a ring with a gap — distinct from the courses before it (one inset ring) */
.pchip.is-sel, .pchip.is-pin.is-sel{box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 3px var(--bg-2), 0 0 0 5px var(--accent), var(--shadow-1)}
.pchip.is-anc .ptag{color:var(--accent-ink); border-color:var(--accent)}
/* a pinned course that is filtered out or quiet: readable ink, the normal urgency mark (never white on the pale board) */
.pchip.is-pin.is-filtered .pchip__name, .board.has-sel .pchip.is-pin:not(.is-sel):not(.is-anc):not(.is-open) .pchip__name{color:var(--ink-3)}
.pchip.is-pin.is-filtered .pchip__due--hot, .board.has-sel .pchip.is-pin:not(.is-sel):not(.is-anc):not(.is-open) .pchip__due--hot{background:var(--due-hot); box-shadow:0 0 0 3px var(--term-next-ring)}
.pchip.is-pin.is-filtered .pchip__due--soon, .board.has-sel .pchip.is-pin:not(.is-sel):not(.is-anc):not(.is-open) .pchip__due--soon{box-shadow:inset 0 0 0 2px var(--accent)}
/* the readout docks only while a course is chosen (at rest it is not there, so it never covers a row); near-opaque */
.pread{visibility:hidden; opacity:0; translate:0 8px; background:color-mix(in srgb, var(--surface) 94%, transparent);
  transition:opacity .18s var(--ease-out), translate .18s var(--ease-out), visibility 0s linear .18s}
.pread.is-on{visibility:visible; opacity:1; translate:none; transition:opacity .18s var(--ease-out), translate .18s var(--ease-out), visibility 0s}
@media (prefers-reduced-motion: reduce){ .pread{transition:none; translate:none} }
@media (max-width: 760px){
  .pkey{padding:14px 16px 0; font-size:12.5px; gap:4px 14px}
  .pkey__h{flex:1 1 100%}
  /* phones: the Path view's label is shown (the glyph alone does not explain itself); Sort is an icon button */
  .seg--view button[data-v="path"]{width:auto; padding:0 14px 0 12px; gap:6px}
  [dir="rtl"] .seg--view button[data-v="path"]{padding:0 12px 0 14px}
  .seg--view button[data-v="path"] span{position:static; width:auto; height:auto; overflow:visible; clip:auto}
  .sortm__b{width:44px; height:52px; padding:0; justify-content:center}
  [dir="rtl"] .sortm__b{padding:0}
  .sortm__k, .sortm__v{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .sortm__chev{display:none}
}

/* -- the docked bar on phones sits a little lower; the compact head: the title, the numbers, one term line over short stems */
@media (max-width: 600px){
  .cat-hero{padding:18px 18px 14px}
  .cat-hero .eyebrow, .cat-hero__lead{display:none}
  .cat-hero__t{font-size:40px; margin-top:0}
  :root[lang="ar"] .cat-hero__t{font-size:34px}
  .cat-hero__facts{margin-top:6px; font-size:13.5px}
  .spec{margin-top:12px; padding-top:10px}
  .spec__h{flex-wrap:nowrap; gap:10px; margin-bottom:8px; font-size:12.5px; white-space:nowrap; min-height:0}
  .spec__tl, .spec__tsep{display:none}
  .spec__term{flex:none}
  .spec__next{min-width:0; overflow:hidden; text-overflow:ellipsis}
  .spec__plot{height:24px} .spec__w{height:22px}
  .spec__ax{display:none}
  .spec__key{margin-top:7px; font-size:11.5px; gap:2px 12px}
}

/* -- the header over All courses' brand panel: a solid brand bar behind the nav (the photo never thins its labels) */
body.is-catalog .hdr[data-on="brand"] .lg{background:var(--bar-tint-brand)}
body.is-catalog .hdr[data-on="brand"] .nav a:not([aria-current="true"]) > span{opacity:.95}
body.is-catalog .hdr[data-on="brand"] .nav__thumb{background:rgba(0,12,80,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 .5px rgba(255,255,255,.34)}

/* -- the course page: each relation label stays with its courses (phones: one line each) */
.rel__g{display:inline-flex; align-items:center; gap:8px; flex:none}
.rel__g--gap{margin-inline-start:10px}
@media (max-width: 560px){ .rel__g{flex:1 1 100%; flex-wrap:wrap} .rel__g--gap{margin-inline-start:0} }

/* -- Windows High Contrast (forced colors): box shadows and tinted backgrounds are dropped there, so every focus ring drawn with
   a box shadow (a card, the search fields, the launcher, Path chips, the Sort menu) and the active search option get a real
   outline in the system's highlight colour */
@media (forced-colors: active){
  .card:has(.card__link:focus-visible), .sfield:focus-within, .ffield:focus-within, .pchip:focus-visible{outline:2px solid Highlight; outline-offset:2px}
  .sortm__m button:focus-visible, .opt[aria-selected="true"]{outline:2px solid Highlight; outline-offset:-2px}
  /* the selected part of a segmented control (a council year, Cards or Path, an exam, a course section) is shown by a thumb or a
     tint, which are dropped here: it gets an outline, and the row a border. While focused, the focus ring shows it instead. */
  .cn-tabs, .seg{border:1px solid CanvasText}
  .cn-tab[aria-selected="true"]:not(:focus-visible), .seg button[aria-checked="true"]:not(:focus-visible),
  .etabs button[aria-selected="true"]:not(:focus-visible), .secsw a[aria-current="true"]:not(:focus-visible){outline:2px solid Highlight; outline-offset:-2px}
  /* a member's photo or initials: their tile's colour and shadow are dropped, so it gets an edge. It sits just outside the
     tile, where the photo cannot cover it (on hover the photo zooms in a layer of its own, painted over anything inside) */
  .mem__img{outline:1px solid CanvasText; outline-offset:0}
}

/* -- QA ONLY: while the sample catalog is on, every other view says so */