/* ==========================================================================
   جماعة مراكش — انتخابات 2026
   ========================================================================== */

:root{
  /* PAM palette — white and #01017d with its variants, nothing else.
     --pam-900 is the party blue itself; the rest of the ramp is the same
     hue lightened or darkened. --accent-* is the one brighter variant,
     used for actions and highlights so they read against the deep blue. */
  --pam-950:#01013f;
  --pam-900:#01017d;   /* PAM blue */
  --pam-800:#0b0b90;
  --pam-700:#1c1caa;
  --pam-600:#3232c6;
  --pam-500:#4f4fdd;

  --accent-700:#1f45db;
  --accent-600:#2f5cff;
  --accent-500:#5b83ff;
  --accent-100:#e4ebff;

  --paper-50:#f7f8ff;
  --paper-100:#eef0fb;
  --line:#dcdff4;
  --surface:#ffffff;

  --ink-900:#0a0a2e;
  --ink-700:#2f2f57;
  --ink-500:#61618a;
  --ink-300:#8b8bb0;

  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;

  --ff-head:'Cairo', 'Tajawal', system-ui, sans-serif;
  --ff-body:'Tajawal', 'Cairo', system-ui, sans-serif;

  --sidebar-w:132px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--ff-body);
  background:var(--paper-100);
  color:var(--ink-900);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{ font-family:var(--ff-head); margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }
.ic{ width:1em; height:1em; display:inline-block; }

/* ============ APP SHELL ============ */
.app{
  display:flex;
  flex-direction:row; /* sidebar sits on the inline start: right under rtl, left under ltr */
  height:100dvh;
  height:100vh;
  padding:14px;
  gap:14px;
}

/* ============ SIDEBAR ============ */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(10,10,60,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px 10px 12px;
  overflow:hidden; /* the nav is sized to always fit — no inner scrollbar */
}
.sidebar-top{ width:100%; display:flex; justify-content:flex-start; margin-bottom:2px; }
.sidebar-top .brand-dot{
  display:none;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--line); background:#fff;
  align-items:center;justify-content:center;color:var(--ink-700);
}
.nav{ display:flex; flex-direction:column; gap:3px; width:100%; flex:0 0 auto; margin-top:8px; }
.nav-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; padding:10px 2px;
  color:var(--ink-500); font-size:12.5px; font-weight:600;
  border-radius:10px;
  transition:color .15s ease, background .15s ease;
}
.nav-item .ic{ width:21px; height:21px; }
.nav-item .nav-bar{
  position:absolute; left:-14px; top:50%; transform:translateY(-50%) scaleY(0); /* inner edge under rtl */
  width:3px; height:60%; border-radius:3px; background:var(--accent-600);
  transition:transform .18s ease;
}
.nav-item:hover{ color:var(--pam-700); background:var(--paper-100); }
.nav-item.is-active{ color:var(--accent-600); }
.nav-item.is-active .nav-bar{ transform:translateY(-50%) scaleY(1); }

.lang-switch{
  display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:12px;
  font-size:12px; font-weight:700; color:var(--ink-300);
}
.lang-btn{ background:none; border:none; color:inherit; padding:2px; }
.lang-btn.is-active{ color:var(--pam-700); }
.lang-btn:disabled{ color:var(--line); cursor:not-allowed; }
.lang-sep{ color:var(--line); }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(5,5,32,.45);
  z-index:40; backdrop-filter:blur(2px);
}

/* ============ MOBILE TOPBAR ============ */
.mobile-topbar{
  display:none;
  position:fixed; top:0; inset-inline:0; z-index:30;
  align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--paper-50);
  box-shadow:0 2px 10px rgba(10,10,60,.06);
}
.mobile-title{ font-weight:800; font-size:14px; }
.mobile-year{ font-size:11px; color:var(--ink-500); }
.icon-btn{ background:none; border:none; color:var(--ink-900); width:30px; height:30px; }
.icon-btn .ic{ width:100%; height:100%; }

/* ============ MAIN / PANELS ============ */
.main{ flex:1; position:relative; overflow:hidden; border-radius:var(--radius-lg); }

.panel{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  overflow-y:auto;
  scrollbar-width:thin;
  background:var(--surface);
  border-radius:var(--radius-lg);
}
.panel.is-active{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease;
}

.panel-head{ padding:56px 56px 22px; max-width:900px; }
.panel-kicker{
  font-size:12.5px; font-weight:800; letter-spacing:.06em; color:var(--accent-600);
  margin-bottom:8px;
}
.panel-title{ font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--ink-900); line-height:1.35; }
.panel-desc{ margin-top:10px; color:var(--ink-500); font-size:14.5px; line-height:1.8; max-width:640px; }
.panel-head-dark .panel-title,.panel-head-dark .panel-desc{ color:#fff; }
.panel-head-dark .panel-desc{ color:rgba(255,255,255,.72); }

/* generic filter chip */
.filter-chip{
  border:1.5px solid var(--line); background:#fff; color:var(--ink-700);
  font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:100px;
  white-space:nowrap; transition:all .15s ease;
}
.filter-chip:hover{ border-color:var(--pam-600); color:var(--pam-700); }
.filter-chip.is-active{ background:var(--pam-800); border-color:var(--pam-800); color:#fff; }

.link-btn{
  background:none; border:none; color:var(--accent-600); font-weight:800; font-size:13.5px;
  padding:0 56px 40px; display:block;
}
.link-btn:hover{ text-decoration:underline; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:100px; padding:14px 22px; font-size:14px; font-weight:800;
  border:1.5px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent-600); color:#fff; box-shadow:0 10px 24px rgba(47,92,255,.28); }
.btn-primary:hover{ background:var(--accent-700); }
.btn-ghost{ background:#fff; color:var(--ink-900); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink-300); }
.btn-ico{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.btn-ico .ic{ width:14px; height:14px; }
.btn-ghost .btn-ico{ background:var(--paper-100); color:var(--ink-900); }
.btn-ico-play .ic{ width:16px; height:16px; }

/* ==========================================================================
   HOME
   ========================================================================== */
.panel-home{ overflow:hidden; }
/* soft inner edge — reads as a framed scene instead of a flat crop */
.panel-home::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 70px 100px -80px rgba(1,1,60,.4);
}
.home-bg{ position:absolute; inset:0; z-index:0; }
.home-bg-city{
  position:absolute; inset:-3%;
  background-image:url('img/koutoubia-mosque-marrakech-morocco-during-a-brig-2026-03-20-01-01-23-utc.jpg');
  background-size:cover;
  background-position:center 22%;
  opacity:.55;
  /* the only photograph in the chrome: desaturated so the hero reads in the
     PAM blue and white rather than in the picture's own warm tones */
  filter:saturate(.16) brightness(1.04);
  animation:homeCityPan 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes homeCityPan{
  0%{ transform:scale(1.06) translate3d(0,0,0); }
  100%{ transform:scale(1.15) translate3d(-1.6%,-1.2%,0); }
}
/* a white card (white zellige motif on a solid white base) sitting as one
   unit slightly transparent over the city photo — not a thin tint, an
   actual white ground with the pattern on it */
/* the zellige motif as a plain background-image — a CSS mask-image
   recolor was used before, but that relies on browser mask support and can
   render as nothing at all if it fails, which is safer to avoid for
   something this visible */
.home-bg-photo{
  position:absolute; inset:0;
  background-image:url('img/pano-banner-pattern-white.png');
  background-repeat:repeat;
  background-size:460px auto;
}
.home-bg-wash{
  position:absolute; inset:0;
  /* just a faint overall grade for depth — clear at the top, slightly
     lifted toward the bottom — no corner glows */
  background:linear-gradient(180deg, rgba(1,1,125,.14) 0%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.46) 100%);
}
.home-portrait{
  position:absolute; z-index:1; top:50%; left:3%; transform:translateY(-50%);
  height:72%; width:auto; max-width:34%; object-fit:contain; object-position:center;
  filter:drop-shadow(0 20px 34px rgba(1,1,60,.3));
  -webkit-mask-image:linear-gradient(to bottom, #000 76%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 76%, transparent 100%);
  pointer-events:none;
}
.home-content{
  position:relative; z-index:2;
  height:100%; display:flex; flex-direction:column; justify-content:center;
  padding-inline-start:8%; max-width:700px;
  margin-inline-start:64px;
}
/* a soft light halo behind the hero text — keeps it legible no matter
   what the photo underneath looks like, without boxing it in */
.home-title .line{
  text-shadow:0 1px 2px rgba(255,255,255,.9), 0 2px 22px rgba(255,255,255,.85), 0 0 40px rgba(255,255,255,.6);
}
.home-title{ margin:0 0 34px; }
.home-title .line{ display:block; font-weight:900; letter-spacing:.01em; }
/* a short lead-in, then the campaign slogan as the line that carries the page */
.line-lead{ font-size:clamp(22px,2.7vw,36px); line-height:1.2; color:var(--pam-800); letter-spacing:.02em; }
.line-claim{ font-size:clamp(28px,3.5vw,48px); line-height:1.28; color:var(--accent-600); margin-top:8px; }
.home-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.home-scroll{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:3; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--ink-300);
  background:rgba(255,255,255,.7); color:var(--ink-700); display:flex; align-items:center; justify-content:center;
  animation:bounce 2.2s infinite; backdrop-filter:blur(4px);
}
.home-scroll-line{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px;
  width:1px; height:26px; background:linear-gradient(180deg, transparent, var(--ink-300));
}
.home-scroll .ic{ width:16px; height:16px; }
@keyframes bounce{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(6px);} }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-head-row{ display:flex; align-items:center; gap:18px; margin-bottom:2px; }
.about-avatar{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, var(--pam-700), var(--pam-950));
  object-fit:cover; object-position:center 12%;
  box-shadow:0 10px 22px rgba(1,1,90,.22);
}

.about-facts-row{ display:flex; flex-wrap:wrap; gap:10px; padding:0 56px 24px; }
.about-facts-row li{
  display:flex; align-items:center; gap:8px; background:var(--paper-50);
  border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  font-size:12.5px; font-weight:600; color:var(--ink-700);
}
.about-facts-row .ic{ width:15px; height:15px; color:var(--accent-600); flex-shrink:0; }

.about-tabs{ display:flex; flex-wrap:wrap; gap:10px; padding:0 56px 26px; }

.about-content{ padding:0 56px 60px; }
.about-pane{
  display:none; animation:fadeUp .35s ease; max-width:820px;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:34px 38px; box-shadow:0 10px 26px rgba(10,10,60,.05);
}
.about-pane.is-active{ display:block; }
.about-pane-badge{
  display:inline-block; background:var(--accent-100); color:var(--accent-700);
  font-weight:800; font-size:12px; padding:5px 14px; border-radius:100px; margin-bottom:14px;
}
.about-pane h3{ font-size:20px; font-weight:800; color:var(--pam-800); margin-bottom:16px; }
.about-pane p{ font-size:14.5px; line-height:2; color:var(--ink-700); margin-bottom:14px; }
.about-pane p:last-child{ margin-bottom:0; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ==========================================================================
   PATH / TIMELINE
   ========================================================================== */
.panel-path{ background:var(--paper-50); }
.timeline-filters{ display:flex; flex-wrap:wrap; gap:8px; padding:0 56px 24px; }
.timeline-wrap{ padding:6px 56px 36px; }
.timeline-track{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.tl-item{ position:relative; transition:opacity .2s ease; }
.tl-item.is-hidden{ display:none; }
.tl-card{
  background:#fff; border-radius:16px; padding:16px; box-shadow:0 8px 22px rgba(10,10,60,.06);
  /* a floor, not a ceiling: the grid row stretches to its tallest card, so a
     longer entry (or a longer translation) grows instead of being clipped */
  min-height:150px; height:100%; display:flex; flex-direction:column;
}
.tl-year{ font-size:11px; font-weight:800; color:var(--accent-600); text-transform:uppercase; letter-spacing:.04em; }
.tl-card h4{ font-size:15px; font-weight:800; color:var(--ink-900); margin:8px 0 8px; line-height:1.4; }
.tl-card p{ font-size:12.5px; color:var(--ink-500); line-height:1.7; }

@media (max-width:1100px){ .timeline-track{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:760px){ .timeline-track{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .timeline-track{ grid-template-columns:1fr; } }

/* ==========================================================================
   VISION
   ========================================================================== */
.panel-vision{ background:linear-gradient(165deg, var(--pam-950), var(--pam-800) 70%); }
.panel-vision .panel-kicker{ color:var(--accent-500); }
/* the chip filters only make sense as a mobile "pick one theme" control —
   kept in the DOM (see index.html comment) so the mobile clone still has
   them, just not shown in the desktop reading layout below */
.vision-filters{ display:none; }

.vision-layout{ display:flex; flex-direction:row-reverse; gap:48px; padding:4px 56px 48px; align-items:flex-start; }

.vision-toc{ display:flex; flex-direction:column; gap:2px; flex:0 0 220px; position:sticky; top:4px; }
.vision-toc-item{
  text-align:right; padding:11px 16px; border-radius:10px; font-size:13px; font-weight:700;
  color:rgba(255,255,255,.55); background:none; border:none; border-inline-end:2px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.vision-toc-item:hover{ color:#fff; background:rgba(255,255,255,.05); }
.vision-toc-item.is-active{ color:#fff; background:rgba(255,255,255,.08); border-inline-end-color:var(--accent-500); }

.vision-layout .vision-grid{ display:block; flex:1; min-width:0; }
.vision-layout .vision-card{
  background:none; border:none; border-radius:0; padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.1); scroll-margin-top:16px;
}
.vision-layout .vision-card:first-child{ padding-top:0; }
.vision-layout .vision-card:last-child{ border-bottom:none; }
.vision-layout .vision-card:hover{ background:none; }
.vision-layout .vision-card .vq{ width:22px; height:22px; color:var(--accent-500); opacity:.8; margin-bottom:14px; }
.vision-layout .vision-card h3{ color:#fff; font-size:19px; font-weight:800; margin-bottom:12px; }
.vision-layout .vision-card p{ color:rgba(255,255,255,.75); font-size:15px; line-height:2; max-width:680px; }

/* fallback for mobile's cloned copy, which lives in .m-stack rather than
   .vision-layout and keeps the original card look */
.vision-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:24px;
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
}
.vision-card.is-hidden{ display:none; }
.vision-card:hover{ background:rgba(255,255,255,.09); }
.vision-card .vq{ width:26px; height:26px; color:var(--accent-500); opacity:.8; margin-bottom:12px; }
.vision-card h3{ color:#fff; font-size:16px; font-weight:800; margin-bottom:10px; }
.vision-card p{ color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.9; }

.panel-vision .link-btn{ color:var(--accent-500); }

/* ==========================================================================
   RESULTS / الحصيلة
   ========================================================================== */
.panel-results{ background:var(--paper-50); }
.axis-tabs{ display:flex; flex-wrap:wrap; gap:10px; padding:0 56px 26px; }
.axis-tab{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line);
  border-radius:14px; padding:10px 16px; font-size:12.5px; font-weight:700; color:var(--ink-700);
}
.axis-tab em{ font-style:normal; font-family:var(--ff-head); font-weight:900; color:var(--line); font-size:15px; }
.axis-tab:hover{ border-color:var(--pam-600); }
.axis-tab.is-active{ background:var(--pam-800); border-color:var(--pam-800); color:#fff; }
.axis-tab.is-active em{ color:rgba(255,255,255,.45); }

.axis-body{ padding:0 56px 60px; }
.axis-pane{ display:none; animation:fadeUp .35s ease; }
.axis-pane.is-active{ display:block; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:8px;
}
.stat-card-accent{ background:var(--pam-800); border-color:var(--pam-800); }
.stat-card-accent .stat-num,.stat-card-accent .stat-label{ color:#fff; }
.stat-num{
  font-family:var(--ff-head); font-weight:900; font-size:26px; color:var(--pam-800);
  direction:ltr; unicode-bidi:isolate; text-align:right; /* keeps the +/- sign on the left */
}
.stat-label{ font-size:12.5px; color:var(--ink-500); line-height:1.6; }
.axis-note{ margin-top:18px; font-size:12.5px; color:var(--ink-500); background:var(--paper-100); border-radius:12px; padding:14px 18px; line-height:1.8; }

.reforms{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:22px; }
.reform-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }
.reform-badge{ display:inline-block; background:var(--accent-100); color:var(--accent-700); font-weight:800; font-size:12px; padding:5px 12px; border-radius:100px; margin-bottom:10px; }
.reform-card p{ font-size:13px; color:var(--ink-700); line-height:1.8; }

.platform-table{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.pt-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; padding:13px 20px; font-size:12.5px; }
.pt-row:not(:last-child){ border-bottom:1px solid var(--paper-100); }
.pt-head{ background:var(--paper-100); font-weight:800; color:var(--ink-900); }
.pt-row span:nth-child(2){ color:var(--pam-700); font-weight:600; text-align:center; }
.pt-row a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(1,1,125,.28); transition:color .15s ease, border-color .15s ease; }
.pt-row a:hover{ color:var(--accent-600); border-color:var(--accent-600); }

/* ==========================================================================
   AGENDA / الأجندة — أجندة الالتزامات
   ========================================================================== */
.panel-agenda{ background:var(--paper-50); }

/* ---- banner: the slogan, then the four headline figures ---- */
.pledge-banner{
  position:relative; overflow:hidden;
  margin:0 56px 24px; padding:28px 34px;
  background:var(--pam-900); border-radius:var(--radius-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 44px;
}
.pledge-banner::after{
  content:""; position:absolute; inset-inline-start:-70px; top:-90px;
  width:280px; height:280px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(47,92,255,.32), transparent 70%);
}
.pledge-banner-head{ position:relative; z-index:1; flex:1 1 320px; max-width:440px; }
.pledge-tag{
  display:inline-block; margin-bottom:12px; padding:5px 13px; border-radius:100px;
  font-size:11.5px; font-weight:800; letter-spacing:.03em;
  color:var(--accent-100); background:rgba(47,92,255,.28);
}
.pledge-slogan{
  font-family:var(--ff-head); font-weight:900; color:#fff;
  font-size:clamp(20px,2.1vw,26px); line-height:1.55;
}
.pledge-kpis{
  position:relative; z-index:1; flex:1 1 440px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:16px 26px;
}
.pledge-kpi{ display:flex; flex-direction:column; gap:4px; }
.pledge-kpi-num{
  font-family:var(--ff-head); font-weight:900; font-size:27px; color:#fff;
  direction:ltr; unicode-bidi:isolate; text-align:right;
}
.pledge-kpi-num-sm{ font-size:20px; white-space:nowrap; }
.pledge-kpi-lbl{ font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.66); }

/* ---- charter tabs + panes ---- */
.charter-tabs{ padding-bottom:22px; }
.charter-body{ padding:0 56px 60px; }
.charter-pane{ display:none; animation:fadeUp .35s ease; }
.charter-pane.is-active{ display:block; }

.charter-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px;
  margin-bottom:18px; padding:18px 22px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
}
.charter-lede{ flex:1 1 420px; font-size:13.5px; line-height:1.95; color:var(--ink-700); }
.charter-budget{
  flex:0 0 auto; display:flex; flex-direction:column; gap:2px; text-align:center;
  padding:10px 18px; border-radius:12px; background:var(--paper-100);
  font-size:11.5px; color:var(--ink-500);
}
.charter-budget em{
  font-style:normal; font-family:var(--ff-head); font-weight:900;
  font-size:16px; color:var(--pam-800);
}

/* ---- one commitment ---- */
.pledge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start; }
.pledge-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pledge-card:hover{
  border-color:var(--pam-600); transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(10,10,60,.07);
}
.pledge-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; margin-bottom:12px;
  background:var(--pam-800); color:#fff;
  font-family:var(--ff-head); font-weight:900; font-size:14px;
  direction:ltr; unicode-bidi:isolate;
}
.pledge-card h3{ font-size:15.5px; font-weight:800; line-height:1.6; color:var(--ink-900); margin-bottom:12px; }
.pledge-list{ display:flex; flex-direction:column; gap:9px; }
.pledge-list li{
  position:relative; padding-inline-start:16px;
  font-size:12.8px; line-height:1.85; color:var(--ink-500);
}
.pledge-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--accent-500);
}

/* ---- blocks used by the growth and financing panes ---- */
.charter-block{
  margin-top:18px; padding:22px 24px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
}
.charter-block-title{ font-size:14.5px; font-weight:800; color:var(--ink-900); margin-bottom:16px; }
.charter-block-title small{ font-weight:600; font-size:11.5px; color:var(--ink-300); }
.charter-pane .stat-grid + .charter-block{ margin-top:18px; }

.cond-list{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:11px 26px;
  counter-reset:cond;
}
.cond-list li{
  counter-increment:cond; position:relative; padding-inline-start:31px;
  font-size:12.8px; line-height:1.8; color:var(--ink-700);
}
.cond-list li::before{
  content:counter(cond); position:absolute; inset-inline-start:0; top:1px;
  width:22px; height:22px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-100); color:var(--pam-700);
  font-family:var(--ff-head); font-weight:900; font-size:11px;
}

/* ---- financing: one series, one colour, every value printed ---- */
.fin-bars{ display:flex; flex-direction:column; gap:16px; }
.fin-row-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:7px; }
.fin-name{ font-size:13px; font-weight:700; color:var(--ink-900); }
.fin-val{
  font-family:var(--ff-head); font-weight:900; font-size:15px; color:var(--pam-800);
  direction:ltr; unicode-bidi:isolate;
}
.fin-track{ height:14px; border-radius:4px; background:var(--paper-100); }
/* under dir=rtl the bar is anchored to the right baseline and grows leftwards,
   so only its left (data) end is rounded */
.fin-fill{ height:100%; background:var(--pam-800); border-radius:4px 0 0 4px; }

.fin-res{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.fin-res-card{ background:var(--paper-50); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.fin-res-num{
  display:block; font-family:var(--ff-head); font-weight:900; font-size:26px; color:var(--pam-800);
  direction:ltr; unicode-bidi:isolate; text-align:right;
}
.fin-res-unit{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-300); margin-bottom:8px; }
.fin-res-card p{ font-size:12.5px; line-height:1.8; color:var(--ink-500); }
.charter-pane .axis-note{ margin-top:18px; }

/* ==========================================================================
   PROGRAM
   ========================================================================== */
.program-filters{ display:flex; flex-wrap:wrap; gap:8px; padding:0 56px 24px; }
.program-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; padding:0 56px 60px; }
.program-card{
  background:var(--paper-50); border:1px solid var(--line); border-radius:20px; padding:26px;
  transition:opacity .25s ease, transform .2s ease, border-color .2s ease;
}
.program-card.is-hidden{ display:none; }
.program-card:hover{ border-color:var(--pam-600); transform:translateY(-3px); }
.pc-num{ font-family:var(--ff-head); font-weight:900; font-size:22px; color:var(--accent-600); opacity:.55; }
.program-card h3{ font-size:16px; font-weight:800; color:var(--pam-800); margin:10px 0 10px; }
.program-card p{ font-size:13px; color:var(--ink-500); line-height:1.85; }

/* ==========================================================================
   AGENDA / TEAM — empty states
   ========================================================================== */
.empty-state{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:40px; gap:6px;
}
.empty-ico{
  width:64px; height:64px; border-radius:50%; background:var(--paper-100); color:var(--pam-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.empty-ico .ic{ width:28px; height:28px; }
.empty-state .panel-desc{ max-width:420px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-form{ max-width:560px; padding:10px 56px 60px; display:flex; flex-direction:column; gap:16px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-field{ display:flex; flex-direction:column; gap:8px; }
.cf-field label{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.75); }
.cf-field input,.cf-field textarea{
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16); border-radius:12px;
  padding:12px 14px; color:#fff; font-size:14px; resize:vertical;
}
.cf-field input:focus,.cf-field textarea:focus{ outline:none; border-color:var(--accent-500); }
.cf-field input::placeholder,.cf-field textarea::placeholder{ color:rgba(255,255,255,.4); }
.cf-submit{ align-self:flex-start; margin-top:4px; }
.cf-success{
  display:none; align-items:center; gap:8px; color:#b9c6ff; font-size:13.5px; font-weight:700;
  background:rgba(47,92,255,.18); border:1px solid rgba(91,131,255,.4); border-radius:12px; padding:12px 16px;
}
.cf-success.is-shown{ display:flex; }
.cf-success .ic{ width:16px; height:16px; flex-shrink:0; }

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(4,4,28,.72); backdrop-filter:blur(6px); }
.modal-panel{
  position:relative; background:#fff; border-radius:22px; max-width:640px; width:100%;
  max-height:80vh; overflow-y:auto; padding:40px; box-shadow:0 30px 70px rgba(0,0,0,.35);
}
/* video variant: a fixed 16:9 frame so the player never grows past its box —
   no scrollbars, no letterboxing, whatever the source's native size is */
.modal-panel.modal-panel--video{
  max-width:920px; width:min(92vw,920px); max-height:none; padding:0; overflow:hidden;
  background:linear-gradient(155deg, var(--pam-800), var(--pam-950));
  box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.modal-panel.modal-panel--video .modal-close{
  top:14px; left:14px; background:rgba(1,1,60,.55); color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.35); backdrop-filter:blur(6px);
}
.modal-video-frame{
  position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;
  border-radius:18px; margin:10px;
}
.modal-video-frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000;
}
.modal-close{
  position:absolute; z-index:2; top:16px; left:16px; width:32px; height:32px; border-radius:50%;
  background:var(--paper-100); border:none; color:var(--ink-700); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.modal-close:hover{ transform:scale(1.08); }
.modal-close .ic{ width:16px; height:16px; }
.modal-body h3{ font-size:20px; font-weight:800; color:var(--pam-800); margin-bottom:18px; }
.modal-body p{ font-size:14px; line-height:2; color:var(--ink-700); margin-bottom:14px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* defensive compaction for short browser windows — the sidebar must
   never scroll, so on tight vertical space it tightens itself further */
@media (max-height:620px) and (min-width:901px){
  .sidebar{ padding:10px 10px 8px; }
  .nav{ margin-top:2px; }
  .nav-item{ padding:6px 2px; gap:3px; font-size:10.5px; }
  .nav-item .ic{ width:17px; height:17px; }
  .lang-switch{ padding-top:6px; }
}

/* below 900px the desktop shell is fully replaced by the dedicated
   .mobile-app experience — see the MOBILE APP section below */
@media (max-width:900px){
  .app{ display:none; }
}

/* ==========================================================================
   MOBILE APP — a dedicated app-style experience, not a squeezed desktop.
   Bottom tab bar + scrollable card screens. Reuses the same color tokens
   and, for shared content (stat/vision/program/timeline/about cards), the
   same base classes as the desktop panels — app.js clones that markup in
   at runtime so the copy lives in one place. Rules here only adapt the
   LAYOUT of those shared classes to a single-column phone screen.
   ========================================================================== */
.mobile-app{ display:none; }

@media (max-width:900px){
  html,body{ overflow:visible; }
  body{ background:var(--paper-100); }

  .mobile-app{
    display:block; position:relative; min-height:100dvh; min-height:100vh;
    padding-bottom:78px; /* clears the fixed tab bar */
  }

  .m-screen{ display:none; }
  .m-screen.is-active{ display:block; animation:mFadeIn .25s ease; }
  @keyframes mFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  /* ---- header bar (sub-screens reached via المزيد) ---- */
  .m-header{
    position:sticky; top:0; z-index:5; background:var(--paper-50);
    padding:16px 20px; box-shadow:0 2px 10px rgba(10,10,60,.05);
  }
  .m-header h2{ font-size:17px; font-weight:800; color:var(--ink-900); }
  .m-header-back{ display:flex; align-items:center; gap:10px; }
  .m-back{
    width:32px; height:32px; border-radius:50%; background:var(--paper-100); border:none;
    color:var(--ink-700); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .m-back .ic{ width:17px; height:17px; }
  .m-header-dark{ background:var(--pam-950); }
  .m-header-dark h2{ color:#fff; }
  .m-header-dark .m-back{ background:rgba(255,255,255,.1); color:#fff; }

  .m-page-desc{ padding:16px 20px 4px; color:var(--ink-500); font-size:14px; line-height:1.75; }
  .m-page-desc-dark{ color:rgba(255,255,255,.7); }

  /* ---- home ---- */
  .m-scroll{ min-height:100%; }
  .m-hero{ position:relative; height:56vh; min-height:340px; overflow:hidden; }
  .m-hero-img{
    position:absolute; inset:0;
    background-color:var(--pam-900);
    background-image:url('img/pano-banner-pattern.png');
    background-repeat:repeat;
    background-size:260px auto;
  }
  .m-hero-wash{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(1,1,60,.92) 0%, rgba(1,1,60,.55) 45%, rgba(1,1,60,.18) 75%, rgba(1,1,60,.05) 100%); }
  .m-hero-portrait{
    position:absolute; bottom:0; right:6%; height:88%; width:auto; object-fit:contain; object-position:bottom;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
  }
  .m-hero-text{ position:absolute; bottom:26px; right:20px; left:20px; z-index:2; text-align:center; }
  .m-eyebrow{ color:#9fb4ff; font-weight:700; font-size:13px; margin-bottom:6px; }
  .m-hero-text h1{ color:#fff; font-family:var(--ff-head); font-weight:900; font-size:26px; line-height:1.25; margin-bottom:8px; }
  .m-hero-scroll{
    position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); z-index:3;
    width:32px; height:32px; border-radius:50%; background:#fff; color:var(--pam-800);
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.2);
  }
  .m-hero-scroll .ic{ width:15px; height:15px; }

  .m-sheet{ background:var(--paper-50); border-radius:24px 24px 0 0; margin-top:-18px; position:relative; z-index:2; padding:26px 20px 30px; }
  .m-welcome{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
  .m-welcome-avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 12%; box-shadow:0 6px 14px rgba(1,1,90,.2); }
  .m-welcome-kicker{ font-size:12px; color:var(--ink-500); font-weight:600; }
  .m-welcome h2{ font-size:16px; font-weight:800; color:var(--ink-900); margin-top:1px; }

  .m-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:22px; }
  .m-grid-item{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 4px;
    font-size:11.5px; font-weight:700; color:var(--ink-700);
  }
  .m-grid-item:active{ transform:scale(.96); }
  .m-grid-ico{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; }
  .m-grid-ico .ic{ width:19px; height:19px; }
  .ico-a{ background:var(--pam-700); }
  .ico-b{ background:var(--accent-600); }
  .ico-c{ background:var(--pam-600); }
  .ico-d{ background:var(--accent-500); }
  .ico-e{ background:var(--pam-800); }
  .ico-f{ background:var(--accent-700); }

  .m-cta-row{ display:flex; flex-direction:column; gap:10px; }
  .m-cta,.m-cta-ghost{
    display:flex; align-items:center; justify-content:center; gap:10px;
    border-radius:100px; padding:16px; font-size:15px; font-weight:800; border:1.5px solid transparent;
  }
  .m-cta{ background:var(--accent-600); color:#fff; box-shadow:0 10px 22px rgba(47,92,255,.28); }
  .m-cta .ic{ width:15px; height:15px; }
  .m-cta-ghost{ background:#fff; border-color:var(--line); color:var(--ink-900); }
  .m-cta-ghost .ic{ width:15px; height:15px; color:var(--accent-600); }

  /* ---- shared card content, adapted to one column ---- */
  .m-chip-row{ display:flex; gap:8px; overflow-x:auto; padding:16px 20px; scrollbar-width:none; }
  .m-chip-row::-webkit-scrollbar{ display:none; }
  .m-chip-row .filter-chip,.m-chip-row .axis-tab{ flex:0 0 auto; }

  #mAxisBody{ padding:0 20px 30px; }
  #mAxisBody .stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  #mAxisBody .axis-note{ margin:14px 0 0; }
  #mAxisBody .reforms{ grid-template-columns:1fr; }
  #mAxisBody .platform-table{ font-size:12px; }
  #mAxisBody .pt-row{ grid-template-columns:1.2fr 1fr 1fr; padding:11px 14px; font-size:11.5px; }
  #mAxisBody .pt-row span{ min-width:0; overflow-wrap:anywhere; }


  #mPledgeBanner{ margin:16px 20px 4px; padding:22px 20px; gap:20px; }
  #mPledgeBanner .pledge-banner-head{ margin-bottom:0; }
  #mPledgeBanner .pledge-kpis{ grid-template-columns:1fr 1fr; gap:14px 18px; }
  #mCharterBody{ padding:0 20px 30px; }
  #mCharterBody .charter-head{ flex-direction:column; align-items:stretch; padding:16px 18px; }
  #mCharterBody .charter-budget{ align-self:flex-start; }
  #mCharterBody .pledge-grid,#mCharterBody .cond-list,#mCharterBody .fin-res{ grid-template-columns:1fr; }
  #mCharterBody .charter-block{ padding:18px; }

  .m-stack{ display:flex; flex-direction:column; gap:12px; padding:0 20px 30px; }
  .m-stack .tl-item{ display:contents; }
  .m-stack .tl-dot{ display:none; }
  .m-stack .tl-card{ height:auto; margin-top:0; }
  .m-stack .program-card{ margin:0; }
  .m-stack .vision-card{ margin:0; }

  #mVisionGrid{ padding:0 20px 6px; }
  #mVisionFilters ~ .m-stack .vision-card p{ font-size:14px; }
  .m-screen-dark #mVisionFilters .filter-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.75); }
  .m-screen-dark #mVisionFilters .filter-chip.is-active{ background:var(--accent-600); border-color:var(--accent-600); color:#fff; }
  .m-screen-dark .link-btn{ padding:0 20px 30px; color:var(--accent-500); }

  .m-screen-dark{
    background:linear-gradient(180deg, var(--pam-950), var(--pam-800) 60%);
    min-height:100vh; min-height:100dvh;
  }
  .m-screen-dark .m-page-desc{ color:rgba(255,255,255,.75); }

  /* ---- about (via المزيد) ---- */
  .m-about-head{ text-align:center; padding:22px 20px 6px; }
  .m-about-avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:center 12%; box-shadow:0 10px 22px rgba(1,1,90,.22); margin-bottom:12px; }
  .m-about-head h3{ font-size:19px; font-weight:800; color:var(--ink-900); margin-bottom:8px; }
  #mAboutFactsRow{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 20px 4px; list-style:none; }
  #mAboutFactsRow li{ display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 14px; font-size:12px; font-weight:600; color:var(--ink-700); }
  #mAboutFactsRow .ic{ width:13px; height:13px; color:var(--accent-600); flex-shrink:0; }
  #mAboutContent{ padding:6px 20px 30px; }
  #mAboutContent .about-pane{ max-width:none; padding:22px; }

  /* ---- empty states ---- */
  .m-empty{ text-align:center; padding:60px 30px; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .m-empty-ico{ width:58px; height:58px; border-radius:50%; background:var(--paper-100); color:var(--pam-700); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
  .m-empty-ico .ic{ width:26px; height:26px; }
  .m-empty h3{ font-size:17px; font-weight:800; color:var(--ink-900); }
  .m-empty p{ font-size:13.5px; color:var(--ink-500); line-height:1.75; max-width:320px; }

  /* ---- more list ---- */
  .m-list{ padding:16px 20px 0; display:flex; flex-direction:column; gap:8px; }
  .m-list-row{
    display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
    border-radius:14px; padding:14px 16px; width:100%;
  }
  .m-list-ico{ width:36px; height:36px; border-radius:11px; background:var(--paper-100); color:var(--pam-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .m-list-ico .ic{ width:17px; height:17px; }
  .m-list-label{ flex:1; text-align:right; font-size:14.5px; font-weight:700; color:var(--ink-900); }
  .m-list-chev{ width:15px; height:15px; color:var(--ink-300); }
  .m-lang-switch{ display:flex; align-items:center; justify-content:center; gap:8px; padding:26px 20px; font-size:13px; font-weight:700; color:var(--ink-300); }
  .m-lang-switch .lang-btn.is-active{ color:var(--pam-700); }

  /* ---- contact ---- */
  .m-contact-form{ padding:6px 20px 30px; max-width:none; }
  .m-screen-dark .cf-field label{ color:rgba(255,255,255,.75); }

  /* ---- bottom tab bar ---- */
  .m-tabbar{
    position:fixed; bottom:0; left:0; right:0; z-index:20;
    display:flex; background:#fff; box-shadow:0 -4px 18px rgba(10,10,60,.08);
    padding:8px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .m-tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; padding:6px 2px; color:var(--ink-300); font-size:10.5px; font-weight:700;
  }
  .m-tab .ic{ width:20px; height:20px; }
  .m-tab.is-active{ color:var(--accent-600); }
}

/* ==========================================================================
   LTR LAYER — French / English
   The Arabic layout is the base; these rules only mirror what is expressed in
   physical (left/right) terms. Logical properties above flip on their own.
   The main nav deliberately stays on the RIGHT in every language.
   ========================================================================== */
[dir="ltr"]{
  /* Cairo keeps the brand voice in the headings; Inter carries Latin body copy */
  --ff-body:'Inter', 'Cairo', system-ui, sans-serif;
}
/* Arabic keeps the nav on the right (its reading side); French and English
   put it on the left, where a Latin reader expects it. The sidebar is the
   first child, so the base `row` already lands it on the inline start. */
[dir="ltr"] .nav-item .nav-bar{ left:auto; right:-14px; }

/* hero: portrait and copy swap sides */
/* mirrored so she keeps facing into the copy: under ltr the portrait moves
   to the right of the hero, and unmirrored she would look off the page */
[dir="ltr"] .home-portrait{ left:auto; right:3%; transform:translateY(-50%) scaleX(-1); }
[dir="ltr"] .line-lead{ font-size:clamp(20px,2.3vw,30px); letter-spacing:0; }
[dir="ltr"] .line-claim{ font-size:clamp(26px,3.2vw,44px); }

/* the sticky vision index reads from the left */
[dir="ltr"] .vision-layout{ flex-direction:row; }
[dir="ltr"] .vision-toc-item{ text-align:left; }

/* figures are already LTR runs — they just align to the other edge */
[dir="ltr"] .stat-num,
[dir="ltr"] .pledge-kpi-num,
[dir="ltr"] .fin-res-num{ text-align:left; }

/* the bar now grows from the left baseline, so the rounded data-end moves */
[dir="ltr"] .fin-fill{ border-radius:0 4px 4px 0; }

[dir="ltr"] .modal-close{ left:auto; right:16px; }
[dir="ltr"] .modal-panel.modal-panel--video .modal-close{ left:auto; right:14px; }
[dir="ltr"] .m-list-label{ text-align:left; }

/* Direction-bearing glyphs: the sprite draws them pointing the RTL way
   ("forward" = leftwards), so LTR mirrors them. The play triangle is not
   directional in that sense and must keep its orientation. */
[dir="ltr"] .btn-ico:not(.btn-ico-play) .ic,
[dir="ltr"] .m-cta .ic,
[dir="ltr"] .m-list-chev,
[dir="ltr"] .m-back .ic{ transform:scaleX(-1); }

/* the slogan always breaks after the full stop, in every language */
.claim-line{ display:block; }