/* Sardaana — additions on top of the original stylesheet (legacy/sardaana-original.css).
   Uses the original palette: bg #090619, panels #100a28, cyan-100 glass borders, section accent colours. */
:root { --sd-panel: rgba(16, 10, 40, .82); --sd-border: rgba(207, 250, 254, .2); }

/* Hero background layer is limited to the first screen so article feeds can scroll below it. */
.sd-hero-bg { position: absolute; inset-inline: 0; top: 0; height: 100svh; overflow: hidden; pointer-events: none; }
.sd-hero-bg--short { height: 460px; }
.sd-hero-fade { position: absolute; inset-inline: 0; bottom: 0; height: 38%; background: linear-gradient(to bottom, transparent, #090619); }
.sd-hero-bg--full .sd-hero-fade { height: 18%; }

/* Language menu (replaces the Radix dropdown; same look: bg-[#100a28]/88, rounded-2xl, cyan border) */
details.sd-lang { position: relative; }
details.sd-lang > summary { list-style: none; cursor: pointer; }
details.sd-lang > summary::-webkit-details-marker { display: none; }
.sd-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 11rem; padding: .375rem; border-radius: 1rem;
  border: 1px solid rgba(207, 250, 254, .25); background: rgba(16, 10, 40, .88); backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); z-index: 50; }
.sd-menu-item { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border-radius: .75rem; font-size: .875rem; color: #fff; text-decoration: none; }
.sd-menu-item:hover, .sd-menu-item:focus-visible { background: rgba(207, 250, 254, .12); outline: none; }
.sd-check { width: 1rem; height: 1rem; margin-inline-start: auto; color: #cefafe; }

/* Dialogs: sign-in modal + "Inside this space" side sheet */
.sd-dialog, .sd-sheet { color: #fff; border: 1px solid rgba(207, 250, 254, .25); background: var(--sd-panel);
  backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); box-shadow: 0 30px 100px rgba(0, 0, 0, .6); padding: 0; }
.sd-dialog::backdrop, .sd-sheet::backdrop { background: rgba(0, 0, 0, .5); }
.sd-dialog { width: min(28rem, calc(100vw - 2rem)); border-radius: 1.5rem; padding: 2rem; }
.sd-dialog-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 1rem; border: 1px solid rgba(207, 250, 254, .3); background: rgba(236, 254, 255, .1); }
.sd-dialog-title, .sd-sheet-title { font-size: 1.875rem; line-height: 1.2; font-weight: 900; letter-spacing: -.04em; margin: 0 0 .5rem; }
.sd-dialog-desc, .sd-sheet-desc { font-size: 1rem; line-height: 1.625; color: rgba(255, 255, 255, .66); margin: 0; }
.sd-dialog-actions { display: grid; gap: .75rem; margin: 1.25rem 0 1rem; }
.sd-oauth { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 52px; border-radius: 1rem; font-size: 1rem; color: #fff; cursor: pointer; }
.sd-ico { width: 1.15rem; height: 1.15rem; }
.sd-dialog-note { border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .1); padding: .75rem 1rem; font-size: .875rem; line-height: 1.6; color: rgba(255, 255, 255, .62); margin: 0; }
.sd-oauth-msg { font-size: .875rem; color: #cefafe; margin: .75rem 0 0; }
.sd-oauth-msg:empty { display: none; }
.sd-x { position: absolute; top: .75rem; inset-inline-end: 1rem; background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.sd-x:hover { color: #fff; }
.sd-sheet { position: fixed; margin: 0; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; height: 100dvh; max-height: 100dvh; width: min(28rem, 100vw);
  display: none; flex-direction: column; border-block: 0; border-inline-end: 0; overflow-y: auto; }
.sd-sheet[open] { display: flex; animation: sd-slide .45s ease-out; }
[dir=rtl] .sd-sheet[open] { animation-name: sd-slide-rtl; }
@keyframes sd-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sd-slide-rtl { from { transform: translateX(-100%); } to { transform: none; } }
.sd-sheet-head { padding: 1.5rem 3rem 1.5rem 1.5rem; padding-inline: 1.5rem 3rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sd-chip { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .5rem; border-radius: 999px; border: 1px solid rgba(207, 250, 254, .25); background: rgba(236, 254, 255, .08); padding: .25rem .75rem; font-size: .75rem; font-weight: 600; color: #ecfeff; }
.sd-sheet-body { flex: 1; padding: 1.25rem 1.5rem; }
.sd-sheet-label { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .48); }
.sd-features { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sd-features li { display: flex; align-items: flex-start; gap: .75rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .055); padding: 1rem; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.sd-feat-check { display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: .125rem; border-radius: 999px; border: 1px solid rgba(207, 250, 254, .3); background: rgba(207, 250, 254, .1); color: #cefafe; }
.sd-feat-check svg { width: .875rem; height: .875rem; }
.sd-sheet-foot { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.5rem; font-size: .875rem; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.sd-sheet-foot p { margin: 0 0 .5rem; }
.sd-join { width: 100%; height: 3rem; border-radius: 999px; color: #fff; font-weight: 600; cursor: pointer; }

/* Hero extras */
.sd-jump { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: #fff; text-decoration: none; border-bottom: 1px solid var(--active); padding-bottom: 2px; }
.sd-jump:hover { color: var(--active); }
[dir=rtl] .sd-flip { transform: scaleX(-1); }
[dir=rtl] .sd-flip-inline { display: inline-block; transform: scaleX(-1); }

/* Feed / cards */
.sd-feed { position: relative; z-index: 10; padding: 1rem 1.25rem 9rem; background: linear-gradient(to bottom, #090619, #0c0822 40%, #090619); }
.sd-wrap { max-width: 1180px; margin: 0 auto; }
.sd-wrap--narrow { max-width: 760px; }
.sd-feed-title { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.04em; margin: 0 0 1.5rem; }
.sd-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--active); box-shadow: 0 0 18px var(--active); }
.sd-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.sd-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.25rem 1.1rem; border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .12); background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.08), transparent 40%), rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.25); transition: transform .2s, border-color .2s; }
.sd-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.25rem; bottom: 1.25rem; width: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 14px var(--c); }
.sd-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.sd-card--opinion { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), rgba(255, 224, 120, .05); border-style: dashed; }
.sd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(255, 255, 255, .62); }
.sd-tag { padding: .15rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); font-weight: 700; }
.sd-type { padding: .15rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 600; }
.sd-type--opinion { background: #ffe078; color: #231128; text-transform: uppercase; letter-spacing: .06em; }
.sd-card-title { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; }
.sd-card-title a { color: #fff; text-decoration: none; }
.sd-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sd-card-sum { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .74); }
.sd-more { margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--c); text-decoration: none; }
[dir=rtl] .sd-more { direction: rtl; }
.sd-empty { color: rgba(255, 255, 255, .62); border: 1px dashed rgba(255, 255, 255, .2); border-radius: 1.25rem; padding: 1.5rem; margin: 0; }

/* Article page */
.sd-article { position: relative; z-index: 10; padding: 2.5rem 1.25rem 10rem; }
.sd-back { display: inline-block; margin-bottom: 1.25rem; color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .9rem; }
.sd-back:hover { color: #fff; }
.sd-article-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; font-weight: 900; letter-spacing: -.045em; margin: 1rem 0; text-shadow: 0 8px 30px rgba(0,0,0,.48); }
.sd-lede { font-size: 1.2rem; line-height: 1.55; color: rgba(255, 255, 255, .86); margin: 0 0 1.75rem; }
.sd-prose { font-size: 1.075rem; line-height: 1.75; color: rgba(255, 255, 255, .88); }
.sd-prose p { margin: 0 0 1.1rem; }
.sd-prose h2, .sd-prose h3 { font-weight: 800; letter-spacing: -.02em; margin: 2rem 0 .75rem; line-height: 1.25; }
.sd-prose h2 { font-size: 1.5rem; } .sd-prose h3 { font-size: 1.2rem; }
.sd-prose a { color: var(--c); }
.sd-prose ul, .sd-prose ol { padding-inline-start: 1.4rem; margin: 0 0 1.1rem; }
.sd-prose li { margin: .35rem 0; }
.sd-prose blockquote { margin: 1.25rem 0; padding: .5rem 1rem; border-inline-start: 3px solid var(--c); color: rgba(255,255,255,.8); background: rgba(255,255,255,.04); border-radius: .5rem; }
.sd-opinion-banner { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 1rem; background: rgba(255, 224, 120, .12); border: 1px solid rgba(255, 224, 120, .45); color: #fff3c4; }
.sd-sources { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(207, 250, 254, .22); background: rgba(16, 10, 40, .7); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.sd-sources h2 { margin: 0 0 .75rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; color: #cefafe; }
.sd-sources ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .45rem; }
.sd-sources a { color: #fff; font-weight: 600; }
.sd-src-host { color: rgba(255, 255, 255, .5); font-size: .85rem; margin-inline-start: .35rem; }
.sd-editorial { margin: 1rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .55); }
.sd-translations { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .9rem; color: rgba(255,255,255,.6); }
.sd-translations a { color: #fff; }

/* RTL (Arabic): no negative letter-spacing / uppercase tracking — it breaks joined script */
[dir=rtl] body, [dir=rtl] .sd-menu-item[lang=ar] { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", Arial, sans-serif; }
[dir=rtl] .sd-h1, [dir=rtl] .sd-article-title, [dir=rtl] .sd-feed-title, [dir=rtl] .sd-card-title, [dir=rtl] .sd-dialog-title, [dir=rtl] .sd-sheet-title { letter-spacing: 0; }
[dir=rtl] .sd-kicker, [dir=rtl] .sd-sheet-label, [dir=rtl] .sd-sources h2 { letter-spacing: 0; }
[dir=rtl] .sd-h1 { line-height: 1.1; }
.sd-flag { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .sd-sheet[open] { animation: none; } .sd-card { transition: none; } }
/* Article pages: darken the poster strip so meta text stays readable */
.sd-hero-bg--short .sd-hero-fade { height: 100%; background: linear-gradient(to bottom, rgba(9,6,25,.25), rgba(9,6,25,.78) 55%, #090619); }
.sd-article .sd-meta, .sd-back { text-shadow: 0 1px 6px rgba(0,0,0,.6); }