/* Elwekalah v3 Capabilities (UX v13.4). Loads after home.css (v7 port). */

.team--red, .jump--red, .o--red { --tc: #C8102E; }
.team--blue, .jump--blue, .o--blue { --tc: #1E5BD8; }
.team--purple, .jump--purple, .o--purple { --tc: #7B3FC4; }
.team--yellow, .jump--yellow, .o--yellow { --tc: #F2C230; }
.team--green, .jump--green, .o--green { --tc: #1FA35B; }
.team--white, .jump--white, .o--white { --tc: #ECEEF2; }
.team--cyan, .jump--cyan, .o--cyan { --tc: #12B5CB; }
:root[data-theme="light"] .team--white, :root[data-theme="light"] .jump--white, :root[data-theme="light"] .o--white { --tc: #8A93A6; }

.ch {
  display: grid; gap: 28px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: clamp(48px, 9cqi, 112px) clamp(16px, 4cqi, 40px) clamp(32px, 5cqi, 64px);
}
@container site (min-width: 900px) { .ch { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; } }
.ch__copy { display: grid; gap: 18px; min-width: 0; }
.ch__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 400 14px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.site:lang(ar) .ch__eyebrow { font: 700 16px/1.4 var(--font-ar); letter-spacing: 0; text-transform: none; }
.ch__eyebrow .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--glow); }
.ch__lede { margin: 0; font-weight: 700; font-size: clamp(2.1rem, 5.6cqi, 4.4rem); line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; max-width: 17ch; }
.site:lang(ar) .ch__lede { letter-spacing: 0; line-height: 1.35; max-width: 20ch; }
.ch__body { margin: 0; font-size: 18px; color: var(--text); max-width: 56ch; }
.ch__for { margin: 0; font-size: 15px; color: var(--muted); max-width: 60ch; padding-inline-start: 14px; border-inline-start: 2px solid var(--accent); }

.corbit { position: relative; width: min(360px, 78cqi); aspect-ratio: 1; justify-self: center; }
.corbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.corbit__ring--2 { inset: 18%; border-color: var(--hair-2); }
.corbit__core { position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle, var(--glow-strong), transparent 70%); }
.corbit__spin { position: absolute; inset: 0; animation: corbit-spin 60s linear infinite; will-change: transform; }
.ch.off .corbit__spin, .site.tab-hidden .corbit__spin { animation-play-state: paused; will-change: auto; }
.o { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tc) 18%, transparent); transform: rotate(var(--a)) translateY(calc(min(360px, 78cqi) / -2)); }
.o--red { --a: 0deg; } .o--blue { --a: 51.43deg; } .o--purple { --a: 102.86deg; } .o--yellow { --a: 154.29deg; } .o--green { --a: 205.71deg; } .o--white { --a: 257.14deg; } .o--cyan { --a: 308.57deg; }
@keyframes corbit-spin { to { transform: rotate(360deg); } }

.cbar {
  position: sticky; top: 76px; z-index: 10;
  max-width: 1180px; margin: 0 auto; padding: 10px clamp(16px, 4cqi, 40px);
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-block: 1px solid var(--hair);
}
.stages { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.stage-b {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--muted);
  font: 500 14px/1 var(--font-sans); cursor: pointer; transition: border-color var(--t-fast) var(--spring), color var(--t-fast) var(--spring), background var(--t-fast) var(--spring);
}
.site:lang(ar) .stage-b { font-family: var(--font-ar); font-size: 15px; }
.stage-b[aria-pressed="true"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.stage-b[aria-pressed="false"] .mk { opacity: .45; }
.jump { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.jump a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px; border-radius: 999px; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.jump a:hover { color: var(--text); background: var(--surface); }
.jump a i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); }
@container site (max-width: 699px) { .cbar { top: 70px; } .jump a span { font-size: 13px; } }

.mk { flex: none; width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.mk--have { background: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.mk--oven { border: 2px solid var(--hot); background: linear-gradient(to top, var(--hot) 50%, transparent 50%); }
.mk--soon { border: 2px dashed var(--muted); }

.teams {
  max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 4cqi, 40px) 24px;
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
}
@container site (min-width: 700px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team--cyan { grid-column: 1 / -1; } }
@container site (min-width: 1100px) { .teams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team {
  position: relative; overflow: hidden; min-width: 0;
  display: grid; gap: 18px; align-content: start;
  padding: 24px 22px 22px; border-radius: var(--r-core);
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--tc) 13%, var(--surface)), var(--surface) 62%);
  border: 1px solid var(--hair); box-shadow: var(--inner-hi);
}
.site[dir="rtl"] .team { background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--tc) 13%, var(--surface)), var(--surface) 62%); }
.team::before { content: ""; position: absolute; inset-inline: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tc); }
.team__head { display: grid; gap: 2px; }
.team__name { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.site:lang(ar) .team__name { font: 400 14px/1.4 var(--font-ar); letter-spacing: 0; text-transform: none; }
.team__name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); }
.team h2 { margin: 0; font-size: clamp(1.6rem, 3cqi, 2rem); line-height: 1.1; letter-spacing: -.03em; }
.site:lang(ar) .team h2 { letter-spacing: 0; line-height: 1.3; }

.tier { display: grid; gap: 8px; }
.tier__h { margin: 0; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 12px 4px 9px; border-radius: 999px; font: 500 12.5px/1.4 var(--font-mono); }
.site:lang(ar) .tier__h { font: 700 13.5px/1.4 var(--font-ar); }
.tier__h .mk { width: 11px; height: 11px; }
.tier--have .tier__h { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tier--oven .tier__h { color: var(--hot); border: 1px solid color-mix(in srgb, var(--hot) 45%, transparent); }
.tier--soon .tier__h { color: var(--muted); border: 1px dashed var(--hair-2); }
:root[data-theme="light"] .tier--oven .tier__h { color: #A2401F; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tier li { position: relative; padding-inline-start: 22px; font-size: 15.5px; line-height: 1.5; }
.tier li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .52em; width: 10px; height: 10px; border-radius: 50%; }
.tier--have li { color: var(--text); }
.tier--have li::before { background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); }
.tier--oven li { color: var(--text); opacity: .86; }
.tier--oven li::before { border: 2px solid var(--tc); background: linear-gradient(to top, var(--tc) 50%, transparent 50%); }
.tier--soon li { color: var(--muted); }
.tier--soon li::before { border: 2px dashed color-mix(in srgb, var(--tc) 75%, var(--muted)); }
.tier + .tier { padding-top: 14px; border-top: 1px solid var(--hair); }

@container site (min-width: 700px) {
  .team--cyan { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); align-items: start; column-gap: 28px; }
  .team--cyan .tier + .tier { padding-top: 0; border-top: 0; padding-inline-start: 24px; border-inline-start: 1px solid var(--hair); }
}

.teams[data-hide~="have"] .tier--have, .teams[data-hide~="oven"] .tier--oven, .teams[data-hide~="soon"] .tier--soon { display: none; }
.teams[data-hide] .tier.is-first { border-top: 0; padding-top: 0; }
.team.is-empty { display: none; }

.site.js-rise .team { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--spring), transform 600ms var(--spring); }
.site.js-rise .team.in { opacity: 1; transform: none; }

.report { margin: 0; font-size: 14px; color: var(--muted); }
.report a { color: var(--muted); text-underline-offset: 3px; }
.report a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .corbit__spin { animation: none; will-change: auto; }
  .site.js-rise .team { opacity: 1; transform: none; transition: none; }
}

.site .team { scroll-margin-top: 208px; }

/* ---------- v13.4 layout (UX, 2026-10-20; Tamer: "4 cards in one row, 2nd row 2 cards, no alignment") ----------
   Seven teams never fill a grid evenly, so Governance (white, the team that governs and plays no side) becomes one
   full-width band on top, and the six others fill the grid with no half-empty row: 3 + 3 from 1100 px, 2 + 2 + 2 from
   700 px, one column on a phone.
   Alignment: every team card spans four rows of the page grid (name, What we have, In the oven, Coming soon) through
   subgrid, so in one row of cards each stage starts on the same line and every card has the same height and edges.
   A card without a stage leaves that row empty. Items: one line each from 1100 px (BA cap EN 44, AR 40), at most two below. */
.teams { max-width: 1320px; row-gap: 16px; }
.team { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 14px; align-content: stretch; }
.team__head { grid-row: 1; }
.team .tier--have { grid-row: 2; }
.team .tier--oven { grid-row: 3; }
.team .tier--soon { grid-row: 4; }
.team .tier { align-content: start; }
.team--cyan { grid-column: auto; }
.team--white { grid-column: 1 / -1; grid-row: span 1; grid-template-rows: none; display: grid; gap: 14px; }
.team--white .tier { grid-row: auto; }
/* every stage below the name carries the same rule line, so a card whose first stage is not "What we have"
   still starts that stage on the same line as its neighbours */
.team:not(.team--white) .tier--oven, .team:not(.team--white) .tier--soon { padding-top: 14px; border-top: 1px solid var(--hair); }
@container site (min-width: 700px) {
  .team--cyan { grid-template-columns: none; }
  .team--cyan .tier + .tier { padding-top: 14px; border-top: 1px solid var(--hair); padding-inline-start: 0; border-inline-start: 0; }
}
@container site (min-width: 900px) { .team--white .tier ul { grid-template-columns: repeat(2, max-content); column-gap: 40px; } }
@container site (min-width: 1100px) {
  .teams { padding-inline: 24px; }
  .tier li { font-size: 15px; }
  .team--white { grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 40px; padding-block: 20px; }
  .team--white .tier { grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 28px; }
}