/* Site pages beyond the reference home (brand/web/page.css). Built on brand/web/tokens.css only:
   no colour or size here that isn't a token. */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.preview-banner{background:var(--alert);color:var(--ink);text-align:center;font-weight:700;font-size:var(--fs-small);padding:var(--s2) var(--s4)}

/* hero on inner pages and the lead story link */
.hero__link{color:inherit}
.hero__link:hover{text-decoration:none}
.hero--article{padding-block:var(--s7) var(--s8)}
.hero--article .container{position:relative}
.hero--article h1{max-width:24ch}
.stat__list{list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-block:var(--s4);font-size:var(--fs-small);line-height:1.7}
.stat__list li{padding-inline-start:var(--s4);position:relative}
.stat__list li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:8px;height:8px;border-radius:2px;background:var(--signal)}

/* page head for list and info pages */
.page-head{background:var(--surface);border-bottom:1px solid var(--line);padding-block:var(--s7)}
.page-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-block:var(--s3) var(--s2)}
.page-head p{color:var(--muted)}
.crumbs{font-size:var(--fs-small);color:var(--muted)}
.crumbs a{color:inherit}
.crumbs--dark{margin-bottom:var(--s4)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.chips .tag:hover{text-decoration:none}

/* article and job pages */
.article{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s7);align-items:start}
.article + .article{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
.article__body p{font-size:20px;line-height:1.9}
.article__body p + p{margin-top:var(--s4)}
.article__body h2{font-size:var(--fs-h2);margin-block:var(--s3) var(--s5)}
/* news and job pages are text: one readable column, no post image (it repeats the headline) */
.article--text{grid-template-columns:minmax(0,760px)}
.article__image{position:sticky;top:100px}
.article__image img{border-radius:var(--r-md);border:1px solid var(--line);height:auto}
.source-box{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s6)}
.source-box strong{display:block;margin-bottom:var(--s1)}
.share{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s5);font-size:var(--fs-body)}
.facts dt{color:var(--muted)}
.facts dd{font-weight:700}
/* on a phone the text and its source come first; the post image repeats the headline, so it follows */
@media (max-width:860px){.article{grid-template-columns:1fr}.article__image{position:static;max-width:360px}}

/* weekly summary */
.weekly-items{list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.weekly-items li{display:flex;gap:var(--s4);align-items:flex-start}
.weekly-items .num{flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--signal);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center}
.weekly-items p{font-size:var(--fs-body);line-height:1.7}

/* empty states and notes */
.empty{background:var(--bg);border:2px dashed var(--line);border-radius:var(--r-xl);padding:var(--s8) var(--s6);text-align:center}
.empty__icon svg{width:64px;height:64px;margin:0 auto var(--s4)}
.empty h2{font-size:var(--fs-h2);margin-bottom:var(--s2)}
.empty p{color:var(--muted);max-width:52ch;margin:0 auto var(--s5)}
.empty-note{color:var(--muted);font-size:var(--fs-body)}
.note{margin-top:var(--s6);padding:var(--s4) var(--s5);border-inline-start:4px solid var(--link);background:var(--surface);border-radius:var(--r-sm);color:var(--muted);font-size:var(--fs-small)}

/* about */
.prose{max-width:760px}
.prose p{font-size:19px}
.prose p + p{margin-top:var(--s3)}
.prose h2{font-size:var(--fs-h2);margin-block:var(--s7) var(--s3)}
.pillars{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.pillars li{padding-inline-start:var(--s5);position:relative}
.pillars li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:10px;height:10px;border-radius:3px;background:var(--signal)}

/* on phones the shadow would run under the text and buttons */
@media (max-width:640px){.hero .motif,.newsletter .motif{display:none}}

/* podcast */
.podcast__cover{border-radius:var(--r-lg);width:100%;max-width:360px;margin-inline-start:auto;height:auto}
.podcast__steps .tag{align-self:flex-start}
.podcast__lede{max-width:60ch;margin-top:var(--s3)}
.podcast__embed{width:100%;height:232px;border:0;border-radius:var(--r-md);margin-bottom:var(--s5)}
.podcast__audio{width:100%;margin-bottom:var(--s5)}
.podcast__quote{margin-block:var(--s5);padding-inline-start:var(--s5);border-inline-start:4px solid var(--link)}
.podcast__quote p{font-weight:700;font-size:var(--fs-h3)}
.podcast__quote footer{color:var(--muted);font-size:var(--fs-small);margin-top:var(--s2)}
.podcast-band{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:center;background:var(--surface);border-radius:var(--r-xl);padding:var(--s5)}
.podcast-band img{width:120px;height:120px;border-radius:var(--r-md)}
.podcast-band h2{font-size:var(--fs-h2)}
@media (max-width:640px){.podcast-band{grid-template-columns:1fr}.podcast-band img{width:96px;height:96px}}
.terms{display:flex;flex-direction:column;gap:var(--s6)}
/* phone header: the logo and one menu button; the sections open in a panel under the header */
.menu{display:none}
@media (max-width:860px){
  .site-header__row{flex-wrap:nowrap;min-height:64px}
  .site-header__row > .nav, .site-header__row > .btn{display:none}
  .menu{display:block;margin-inline-start:auto}
  .menu__toggle{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--line);cursor:pointer;color:var(--text)}
  .menu__toggle::-webkit-details-marker{display:none}
  .menu__toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .menu__close, .menu[open] .menu__icon{display:none}
  .menu[open] .menu__close{display:block}
  .menu__panel{position:absolute;inset-inline:0;top:100%;display:flex;flex-direction:column;padding:var(--s2) var(--s4) var(--s5);background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100dvh - 64px);overflow-y:auto}
  .menu__panel a:not(.btn){display:block;padding:var(--s3) 0;font-size:var(--fs-body);font-weight:500;color:var(--text);border-bottom:1px solid var(--line)}
  .menu__panel a[aria-current]{color:var(--link);font-weight:700}
  .menu__panel .btn{margin-top:var(--s4);align-self:stretch;justify-content:center}
}
.section--tight{padding-top:0}  /* «اقرأ أيضاً» follows the article without a second full gap */
/* «البُعد» on the article page: the cards' signature (alef + 45° shadow), first thing under the hero */
.hero .lede-line{font-size:20px;line-height:1.7;color:#C9D3CE;max-width:62ch;margin-bottom:var(--s3)}
.dim-block{margin-bottom:var(--s6);padding:var(--s5);background:var(--surface);border-top:4px solid var(--signal);clip-path:polygon(0 0,100% 0,100% 100%,28px 100%,0 calc(100% - 28px))}
.dim-block__k{display:flex;align-items:flex-end;gap:12px;font-weight:700;font-size:var(--fs-h3);line-height:1;color:var(--link);margin-bottom:var(--s3)}
.dim-block__k svg{width:26px;height:24px;overflow:visible;flex:none}
.dim-block__k polygon{fill:var(--signal)}
.dim-block__for{font-weight:500;font-size:var(--fs-small);color:var(--muted)}
.dim-block__k rect{fill:var(--text)}
.article__body .dim-block p{font-size:var(--fs-h3);line-height:1.7;font-weight:500}

/* النتائج المالية: سطر لكل إفصاح (الشركة ثم مؤشراته)، ويصير بطاقة في الجوال */
.results-table{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.result{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--line);color:var(--text)}
.result:hover{text-decoration:none;background:var(--surface)}
.result b{font-weight:700}
.result__co{display:flex;flex-direction:column;gap:var(--s1)}
.result__m{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.result__m b{font-size:var(--fs-h3)}
.chg{font-size:var(--fs-small);font-weight:700;color:var(--link)}
.chg--down{color:var(--alert-text)}
.results-note{margin-top:var(--s5)}
@media (max-width:760px){.result{grid-template-columns:repeat(3,minmax(0,1fr))}.result__co{grid-column:1/-1}}
.menu__more{font-size:var(--fs-small);color:var(--muted)}

/* التحليلات: اسم صاحب الرأي أولاً، ثم الرأي بصياغتنا */
.card__by{font-size:var(--fs-small);font-weight:700;color:var(--link);margin-top:var(--s2)}
.byline{font-size:var(--fs-body);color:var(--link)}
.opinion-view{font-size:var(--fs-h3);font-weight:700;line-height:1.6}
.opinion-quote{margin:var(--s4) 0;padding:var(--s3) var(--s4);border-inline-start:4px solid var(--signal);background:var(--surface);border-radius:var(--r-md)}
.opinion-points{display:flex;flex-direction:column;gap:var(--s3);padding-inline-start:var(--s5)}
/* signed figures read left to right («+١٢٪»، «−٣٪») inside the RTL page */
.chg,.result__m b{direction:ltr;unicode-bidi:isolate;display:inline-block}