/* Energy Sector CSR Forum: shared design tokens and primitives.
   Palette strictly from the approved identity (أكواد الألوان.txt + allowed list). */
@font-face{font-family:"Plex";src:url(/assets/fonts/IBMPlexSansArabic-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/IBMPlexSansArabic-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/IBMPlexSansArabic-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/IBMPlexSansArabic-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --depth:#173F35; --depth-2:#102C25; --depth-3:#0C201B;
  --eco:#23AD37; --eco-2:#187926; --eco-soft:#D5ECDC;
  --sky:#00A9E0; --sky-2:#00769D;
  --gold:#BC8C3D; --gold-2:#D0AF77; --gold-soft:#FBF6E9;
  --alert:#B0473B; --alert-soft:#F2D4CC;
  --ink:#1C1C1C; --ink-2:#3A4A44; --muted:#5A6B62; --faint:#999999;
  --line:#E1E7E2; --line-2:#EAF1EE; --mist:#F0F5F3; --paper:#FFFFFF; --bg:#F7FAF8;
  --grad:linear-gradient(90deg,#00A9E0,#23AD37 55%,#BC8C3D);
  --grad-r:linear-gradient(90deg,#00A9E0,#23AD37 55%,#BC8C3D);
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,44,37,.06),0 8px 28px -10px rgba(16,44,37,.18);
  --shadow-lg:0 2px 6px rgba(16,44,37,.06),0 24px 60px -20px rgba(16,44,37,.32);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Plex",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--eco-2)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(0,169,224,.45);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* official gradient bar */
.gbar{height:6px;background:var(--grad-r)}
.gbar.thin{height:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:999px;padding:.78em 1.5em;font-weight:600;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;text-decoration:none;white-space:nowrap;line-height:1.2}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--depth);color:#fff;box-shadow:0 10px 24px -12px rgba(23,63,53,.8)}
.btn-primary:hover{background:var(--depth-2);transform:translateY(-1px)}
.btn-eco{background:var(--eco);color:#fff;box-shadow:0 10px 24px -12px rgba(35,173,55,.9)}
.btn-eco:hover{background:var(--eco-2)}
.btn-ghost{background:transparent;color:var(--depth);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--depth)}
.btn-soft{background:var(--mist);color:var(--depth)}
.btn-soft:hover{background:var(--eco-soft)}
.btn-danger{background:var(--alert-soft);color:var(--alert)}
.btn-sm{padding:.5em 1em;font-size:.88rem}
.btn[disabled]{opacity:.5;pointer-events:none}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-weight:600;font-size:.92rem;color:var(--depth)}
.hint{font-size:.82rem;color:var(--muted)}
.input,select.input,textarea.input{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:var(--radius-sm);padding:.75em .95em;transition:border-color .2s,box-shadow .2s;outline:none}
.input:focus{border-color:var(--eco);box-shadow:0 0 0 4px rgba(35,173,55,.14)}
.input[readonly]{background:var(--mist);color:var(--ink-2)}
textarea.input{resize:vertical;min-height:90px}

.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(225,231,226,.7)}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.25em .75em;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--mist);color:var(--depth);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.st-done{color:var(--eco-2);background:var(--eco-soft)}
.st-prog{color:var(--sky-2);background:#E1F4FB}
.st-behind{color:#8a6420;background:var(--gold-soft)}
.st-late{color:var(--alert);background:var(--alert-soft)}
.st-none{color:var(--muted);background:#F2F2F2}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

/* logo mark bloom: conic sweep reveals petals in order */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
.bloom{-webkit-mask:conic-gradient(from -90deg,#000 var(--sweep),transparent calc(var(--sweep) + 1deg));mask:conic-gradient(from -90deg,#000 var(--sweep),transparent calc(var(--sweep) + 1deg));animation:bloom 1.8s var(--ease) .2s forwards, sway 9s ease-in-out 2.2s infinite}
@keyframes bloom{to{--sweep:361deg}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}

/* ambient background: blurred drifting blobs */
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.ambient i:nth-child(1){width:46vmax;height:40vmax;background:#23AD37;opacity:.18;top:-18vmax;inset-inline-start:-10vmax}
.ambient i:nth-child(2){width:34vmax;height:30vmax;background:#00A9E0;opacity:.16;bottom:-14vmax;inset-inline-end:-8vmax;animation-duration:28s}
.ambient i:nth-child(3){width:26vmax;height:24vmax;background:#BC8C3D;opacity:.16;top:30%;inset-inline-end:30%;animation-duration:34s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,-3vmax) scale(1.08)}100%{transform:translate(-3vmax,3vmax) scale(.95)}}

/* contour lines that flow */
.contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.contours path{fill:none;stroke-width:1.2;stroke-dasharray:6 10;animation:flow 30s linear infinite}
.contours path:nth-child(2n){animation-duration:42s;animation-direction:reverse}
@keyframes flow{to{stroke-dashoffset:-600}}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--depth);color:#fff;padding:.8em 1.3em;border-radius:14px;box-shadow:var(--shadow-lg);opacity:0;transition:.35s var(--ease);z-index:1000;font-weight:500;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--alert)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .bloom{-webkit-mask:none;mask:none}
}

/* charts render LTR (correct text anchors); their tooltips stay RTL */
.ec [style*="z-index: 9999999"]{direction:rtl;text-align:right}