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

:root{
  --green-950:#0c261c;
  --green-900:#123526;
  --green-800:#16412e;
  --green-700:#1c5238;
  --green-600:#256a48;
  --green-500:#2f8259;

  --orange-700:#a8380c;
  --orange-600:#c1440e;
  --orange-500:#d9591f;
  --orange-100:#fbe6d8;

  --cream-50:#faf6ee;
  --cream-100:#f3ecdd;
  --cream-200:#ece2cd;
  --cream-card:#ffffff;

  --ink-900:#201d15;
  --ink-700:#453f30;
  --ink-500:#726b58;
  --ink-300:#a49b85;

  --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(--cream-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-reverse; /* keeps sidebar physically on the LEFT under dir=rtl */
  height:100dvh;
  height:100vh;
  padding:14px;
  gap:14px;
}

/* ============ SIDEBAR ============ */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--cream-card);
  border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(20,40,25,.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(--cream-200); 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; right:-14px; top:50%; transform:translateY(-50%) scaleY(0);
  width:3px; height:60%; border-radius:3px; background:var(--orange-600);
  transition:transform .18s ease;
}
.nav-item:hover{ color:var(--green-700); background:var(--cream-100); }
.nav-item.is-active{ color:var(--orange-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(--green-700); }
.lang-btn:disabled{ color:var(--cream-200); cursor:not-allowed; }
.lang-sep{ color:var(--cream-200); }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(12,20,15,.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(--cream-50);
  box-shadow:0 2px 10px rgba(20,40,25,.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(--cream-card);
  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(--orange-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(--cream-200); 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(--green-600); color:var(--green-700); }
.filter-chip.is-active{ background:var(--green-800); border-color:var(--green-800); color:#fff; }

.link-btn{
  background:none; border:none; color:var(--orange-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(--orange-600); color:#fff; box-shadow:0 10px 24px rgba(193,68,14,.28); }
.btn-primary:hover{ background:var(--orange-700); }
.btn-ghost{ background:#fff; color:var(--ink-900); border-color:var(--cream-200); }
.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(--cream-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(12,38,28,.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;
  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 (red 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, pre-baked red (assets/img/pano-banner-pattern-red.png
   is the source pattern recolored to our brand red) 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(250,246,238,.06) 0%, rgba(250,246,238,.22) 50%, rgba(250,246,238,.4) 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(12,38,28,.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:0 8% 0 0; max-width:640px;
  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-eyebrow,.home-title .line{
  text-shadow:0 1px 2px rgba(250,246,238,.9), 0 2px 22px rgba(250,246,238,.85), 0 0 40px rgba(250,246,238,.6);
}
.home-eyebrow{
  font-size:13.5px; font-weight:800; letter-spacing:.03em; color:var(--orange-700);
  position:relative; display:inline-flex; align-items:center; align-self:flex-start; gap:8px;
  width:fit-content;
  margin-bottom:16px; padding:7px 16px 7px 6px; border-radius:100px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 20px rgba(168,56,12,.1);
  backdrop-filter:blur(6px);
}
.home-eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--orange-600); flex-shrink:0;
  box-shadow:0 0 0 4px rgba(217,89,31,.18);
}
.home-title{ margin:6px 0 18px; }
.home-title .line{ display:block; font-weight:900; line-height:1.05; letter-spacing:.01em; }
.line-city{ font-size:clamp(46px,6.4vw,86px); color:var(--green-800); letter-spacing:.04em; }
.line-claim{ font-size:clamp(30px,4.2vw,54px); color:var(--orange-600); margin-top:4px; }
.home-sub{
  font-size:15.5px; color:var(--ink-700); line-height:1.8; max-width:480px; margin-bottom:30px;
  padding:12px 18px; border-radius:14px; border-inline-start:3px solid var(--orange-600);
  background:rgba(255,253,248,.78); backdrop-filter:blur(6px);
  box-shadow:0 8px 20px rgba(20,40,25,.05);
}
.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(--green-700), var(--green-950));
  object-fit:cover; object-position:center 12%;
  box-shadow:0 10px 22px rgba(18,53,38,.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(--cream-50);
  border:1px solid var(--cream-200); 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(--orange-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(--cream-200); border-radius:22px;
  padding:34px 38px; box-shadow:0 10px 26px rgba(20,40,25,.05);
}
.about-pane.is-active{ display:block; }
.about-pane-badge{
  display:inline-block; background:var(--orange-100); color:var(--orange-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(--green-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(--cream-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(20,40,25,.06);
  height:150px; display:flex; flex-direction:column;
}
.tl-year{ font-size:11px; font-weight:800; color:var(--orange-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; overflow:hidden; }

@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(--green-950), var(--green-800) 70%); }
.panel-vision .panel-kicker{ color:var(--orange-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(--orange-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(--orange-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(--orange-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(--orange-500); }

/* ==========================================================================
   RESULTS / الحصيلة
   ========================================================================== */
.panel-results{ background:var(--cream-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(--cream-200);
  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(--cream-200); font-size:15px; }
.axis-tab:hover{ border-color:var(--green-600); }
.axis-tab.is-active{ background:var(--green-800); border-color:var(--green-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(--cream-200); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:8px;
}
.stat-card-accent{ background:var(--green-800); border-color:var(--green-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(--green-800); }
.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(--cream-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(--cream-200); border-radius:16px; padding:20px; }
.reform-badge{ display:inline-block; background:var(--orange-100); color:var(--orange-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(--cream-200); 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(--cream-100); }
.pt-head{ background:var(--cream-100); font-weight:800; color:var(--ink-900); }
.pt-row span:nth-child(2){ color:var(--green-700); font-weight:600; }

/* ==========================================================================
   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(--cream-50); border:1px solid var(--cream-200); 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(--green-600); transform:translateY(-3px); }
.pc-num{ font-family:var(--ff-head); font-weight:900; font-size:22px; color:var(--orange-600); opacity:.55; }
.program-card h3{ font-size:16px; font-weight:800; color:var(--green-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(--cream-100); color:var(--green-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(--orange-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:#9be3b4; font-size:13.5px; font-weight:700;
  background:rgba(50,140,90,.15); border:1px solid rgba(80,180,120,.3); 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(10,20,14,.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(--green-800), var(--green-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(12,38,28,.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(--cream-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(--green-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(--cream-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(--cream-50);
    padding:16px 20px; box-shadow:0 2px 10px rgba(20,40,25,.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(--cream-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(--green-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:rgba(193,68,14,.4);
    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(12,38,28,.92) 0%, rgba(12,38,28,.55) 45%, rgba(12,38,28,.18) 75%, rgba(12,38,28,.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:#f0a875; 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-sub{ color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.7; }
  .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(--green-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(--cream-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(18,53,38,.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(--cream-200); 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(--green-700); }
  .ico-b{ background:var(--orange-600); }
  .ico-c{ background:var(--green-600); }
  .ico-d{ background:var(--orange-500); }
  .ico-e{ background:var(--green-800); }
  .ico-f{ background:var(--orange-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(--orange-600); color:#fff; box-shadow:0 10px 22px rgba(193,68,14,.28); }
  .m-cta .ic{ width:15px; height:15px; }
  .m-cta-ghost{ background:#fff; border-color:var(--cream-200); color:var(--ink-900); }
  .m-cta-ghost .ic{ width:15px; height:15px; color:var(--orange-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; }

  .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(--orange-600); border-color:var(--orange-600); color:#fff; }
  .m-screen-dark .link-btn{ padding:0 20px 30px; color:var(--orange-500); }

  .m-screen-dark{
    background:linear-gradient(180deg, var(--green-950), var(--green-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(18,53,38,.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(--cream-200); border-radius:100px; padding:8px 14px; font-size:12px; font-weight:600; color:var(--ink-700); }
  #mAboutFactsRow .ic{ width:13px; height:13px; color:var(--orange-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(--cream-100); color:var(--green-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(--cream-200);
    border-radius:14px; padding:14px 16px; width:100%;
  }
  .m-list-ico{ width:36px; height:36px; border-radius:11px; background:var(--cream-100); color:var(--green-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(--green-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(20,40,25,.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(--orange-600); }
}