/* academy.css — صفحات الأكاديمية (فوق shell.css) */
.page{max-width:980px;margin:0 auto;padding:28px 16px}
.page.wide{max-width:1200px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:6px}
.crumbs a{color:var(--mute);text-decoration:none}
.kicker{font-family:var(--head);font-weight:700;color:var(--gold);font-size:14px;letter-spacing:.3px}
h1{font-family:var(--head);font-weight:900;font-size:40px;line-height:1.3;margin:4px 0 10px;color:var(--ivory)}
h2{font-family:var(--head);font-weight:800;font-size:26px;color:var(--gold);margin:44px 0 10px;line-height:1.4}
h3{font-family:var(--head);font-weight:700;font-size:18px;margin:0;color:var(--ivory)}
.lead{font-size:20px;color:#DCE3EF;margin:0 0 22px;max-width:820px}
p{margin:0 0 14px}
strong{color:var(--gold2);font-weight:600}
a.g{color:var(--ivory);text-decoration:none;border-bottom:1px dashed var(--gold);cursor:help}
a.g:hover{color:var(--gold2)}
.cta a{display:inline-block;font-family:var(--head);font-weight:700;background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);padding:8px 18px;border-radius:10px;text-decoration:none}
.note{font-size:14px;color:var(--mute);border-inline-start:3px solid var(--gold3);padding-inline-start:12px}

.video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at center,#173a73,#0a1834);margin:8px 0 26px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mute);text-align:center;padding:16px}
.video .ph .play{width:72px;height:72px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center}
.video .ph .play:after{content:"";border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--gold);margin-left:6px}
.video .ph b{font-family:var(--head);color:var(--ivory);font-size:18px}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 10px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center}
.fact b{display:block;font-family:var(--head);font-weight:900;font-size:30px;color:var(--gold);line-height:1.3}
.fact span{font-size:14px;color:var(--mute)}

ul.pts{padding-inline-start:22px;margin:0 0 16px}
ul.pts li{margin-bottom:8px}
ol.steps{list-style:none;padding:0;margin:0 0 16px;border-inline-start:2px solid var(--gold3)}
ol.steps li{position:relative;padding:4px 18px 10px}
ol.steps li:before{content:"";position:absolute;inset-inline-start:-7px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
ol.steps b{font-family:var(--head);color:var(--gold2);margin-inline-end:8px}

.widget{background:linear-gradient(180deg,#0C1F3D,#0A1A33);border:1px solid var(--line);border-radius:16px;padding:16px;margin:22px 0 26px}
.w-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.w-tabs{display:flex;gap:6px;flex-wrap:wrap}
.w-tabs button,.btn{font-family:var(--head);font-weight:700;font-size:14px;background:#11284B;color:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:5px 12px;cursor:pointer}
.w-tabs button.on,.btn.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn:hover{border-color:var(--gold)}
.w-note{font-size:13px;color:var(--mute);margin:10px 0 0}
svg.map{width:100%;height:auto;display:block;direction:ltr}
svg.map path.st{stroke:#071525;stroke-width:.8;transition:fill .15s}
svg.map path.st:hover{stroke:var(--gold2);stroke-width:1.6}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--mute);margin-top:8px;align-items:center}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-inline-end:5px}
.tip{position:fixed;pointer-events:none;z-index:99;background:#0B1B33;border:1px solid var(--gold3);border-radius:10px;padding:8px 12px;font-size:14px;line-height:1.6;max-width:280px;box-shadow:0 8px 24px #0008;display:none}
.tip b{font-family:var(--head);color:var(--gold2)}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px}
.sw.R{background:var(--R)}.sw.D{background:var(--D)}.sw.T{background:var(--T)}

/* gerrymandering */
.gerry{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;align-items:center}
.gerry svg{width:100%;direction:ltr}
.gerry .res{font-family:var(--head)}
.gerry .res .big{font-size:34px;font-weight:900}
.gerry .res p{font-family:var(--body);font-size:15px;color:#DCE3EF}

/* senate seats */
.seats{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;direction:ltr;position:relative}
.seats i{aspect-ratio:1;border-radius:50%;display:block}
.thr{position:relative;height:56px;direction:ltr;margin-top:8px}
.thr div{position:absolute;top:0;bottom:0;border-left:2px dashed var(--gold);font-size:12px;color:var(--gold2);padding-left:4px;font-family:var(--head);white-space:nowrap}
.thr-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.thr-list div{background:#0E2445;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px}
.thr-list b{display:block;font-family:var(--head);color:var(--gold);font-size:22px}

/* compare / flow / steps */
table.cmp{width:100%;border-collapse:collapse;font-size:15px}
table.cmp th,table.cmp td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:start}
table.cmp th{font-family:var(--head);color:var(--gold2)}
table.cmp td:first-child{color:var(--mute)}
.flow{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.flow .n{flex:1 1 140px;background:#0E2445;border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
.flow .n b{display:block;font-family:var(--head);color:var(--gold2)}
.flow .n small{color:var(--mute);font-size:13px}
.flow .n.end{border-color:var(--gold)}
.flow .n.no{border-color:#5a2a2a}
.ecsteps{counter-reset:s;display:grid;gap:10px}
.ecstep{display:grid;grid-template-columns:56px 1fr;gap:14px;background:#0E2445;border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.ecstep .num{width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--navy);font-family:var(--head);font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center}
.ecstep h4{margin:0;font-family:var(--head);font-size:18px;color:var(--ivory)}
.ecstep .when{font-family:var(--head);font-size:13px;color:var(--gold2)}
.ecstep .more{display:none;margin-top:6px;font-size:15px;color:#DCE3EF}
.ecstep.open .more{display:block}
.ecstep.open{border-color:var(--gold3)}
.evbar{display:flex;height:46px;border-radius:10px;overflow:hidden;direction:ltr;font-family:var(--head);font-weight:700}
.evbar div{display:flex;align-items:center;justify-content:center;color:var(--navy);font-size:15px;white-space:nowrap;overflow:hidden}
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.cal div{background:#0E2445;border:1px solid var(--line);border-radius:12px;padding:12px}
.cal b{display:block;font-family:var(--head);color:var(--gold);font-size:18px}
.cal small{color:var(--mute)}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}
.calc .top{grid-column:1/-1}
.tally{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--head);margin-bottom:6px;direction:ltr}
.tally .s{text-align:center}
.tally .s b{display:block;font-size:44px;font-weight:900;line-height:1}
.tally .s span{font-size:14px;color:var(--mute)}
.tally .s.R b{color:#FF5A6E}.tally .s.D b{color:#6FA2FF}.tally .s.T b{color:#B9C3D3}
.tally .mid{text-align:center;color:var(--gold);font-size:15px}
.tally .mid b{display:block;font-size:20px}
.bar270{position:relative;height:30px;border-radius:8px;overflow:hidden;background:var(--T);direction:ltr;display:flex}
.bar270 .R{background:var(--R);transition:width .25s}.bar270 .D{background:var(--D);transition:width .25s;margin-left:auto}
.bar270 .mk{position:absolute;left:50%;top:-4px;bottom:-4px;border-left:3px solid var(--gold);transform:translateX(-1px)}
.winner{text-align:center;font-family:var(--head);font-weight:800;font-size:18px;min-height:30px;margin:8px 0 0;color:var(--gold2)}
.side{display:flex;flex-direction:column;gap:10px}
.side h4{margin:0;font-family:var(--head);color:var(--gold2);font-size:15px}
.chips2{display:flex;flex-wrap:wrap;gap:6px}
.chip2{font-family:var(--head);font-size:13px;font-weight:700;border-radius:8px;padding:4px 8px;cursor:pointer;border:1px solid var(--line);background:var(--T);color:#fff;min-width:54px;text-align:center}
.chip2.R{background:var(--R);border-color:var(--R)}.chip2.D{background:var(--D);border-color:var(--D)}
.splits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.splits .sp{background:#0E2445;border:1px solid var(--line);border-radius:10px;padding:8px}
.splits .sp b{font-family:var(--head);font-size:14px;display:block;margin-bottom:6px}
svg.map text.lab{font-family:Cairo,"DejaVu Sans",sans-serif;font-size:11px;font-weight:700;fill:#fff;pointer-events:none;text-anchor:middle;paint-order:stroke;stroke:#0007;stroke-width:2px}

/* index / hub */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ivory);transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card .k{font-family:var(--head);font-size:13px;color:var(--gold)}
.card h3{font-size:20px;margin:4px 0 6px}
.card p{font-size:15px;color:var(--mute);margin:0}
.card.soon{opacity:.55}
.badge{display:inline-block;font-family:var(--head);font-size:12px;border:1px solid var(--gold3);color:var(--gold2);padding:1px 8px;border-radius:999px;margin-inline-start:6px}
.hero{padding:40px 0 18px}
.hero h1{font-size:46px}
.secs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.secs .card h3{font-size:24px;color:var(--gold)}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px}
.pager a{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ivory)}
.pager a small{display:block;color:var(--mute);font-size:12px}
.pager a:hover{border-color:var(--gold)}
.sources{margin-top:46px;border-top:1px solid var(--line);padding-top:16px}
.sources h2{font-size:20px;margin-top:0}
.sources ol{padding-inline-start:22px;font-size:14px;color:var(--mute)}
.sources a{color:#C9D6EA;word-break:break-word}
.gl-list{columns:2;column-gap:30px}
.gl-item{break-inside:avoid;margin-bottom:14px}
.gl-item a{font-family:var(--head);font-weight:700;font-size:17px;text-decoration:none}
.gl-item small{color:var(--mute);direction:ltr;display:inline-block;margin-inline-start:6px}
.gl-item p{font-size:14px;color:#C9D3E3;margin:2px 0 0}
.mapframe{width:100%;height:78vh;min-height:560px;border:1px solid var(--line);border-radius:14px;background:#0A1A33}

@media (max-width:860px){
  .calc{grid-template-columns:1fr}
  .gerry{grid-template-columns:1fr}
  .secs{grid-template-columns:1fr}
}
@media (max-width:640px){
  h1,.hero h1{font-size:30px}
  h2{font-size:22px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact b{font-size:24px}
  .gl-list{columns:1}
  .thr-list{grid-template-columns:1fr}
  .tally .s b{font-size:34px}
  .seats{grid-template-columns:repeat(10,1fr)}
}

/* لوجو «السياسة 101» — معتمد 2026-10-28، ممنوع تعديله */
.p101-hero{display:flex;align-items:center;gap:28px;margin:6px 0 10px}
.p101-hero .p101-logo{width:380px;max-width:100%;height:auto;flex:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.crumbs .p101-mini{display:inline-flex;align-items:center;gap:8px;color:var(--gold2);font-family:var(--head);font-weight:700}
.crumbs .p101-mini img{width:40px;height:auto}
.p101-card img{width:150px;height:auto;display:block;margin:0 0 10px}
@media (max-width:700px){.p101-hero{flex-direction:column;text-align:center;gap:14px}.p101-hero .p101-logo{width:280px}}
.crumbs:has(.p101-mini){display:flex;align-items:center;gap:6px;flex-wrap:wrap}