/* ============================================================
   Article page — reuses the site tokens, header, footer, widgets.
   ============================================================ */

.crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:18px 0 14px;flex-wrap:wrap}
.crumbs a:hover{color:var(--red)}
.crumbs .sep{color:var(--line-strong)}

.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

.art-head{padding:24px 28px 0}
/* comment counter — top-left corner of the article header */
.art-head{position:relative}
.art-cmc{
  position:absolute;top:24px;left:28px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  color:var(--muted);font-size:11.5px;line-height:1;transition:.15s
}
.art-cmc .icon{width:13px;height:13px}
.art-cmc b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.art-cmc:hover{border-color:var(--red);color:var(--red)}
.art-cmc:hover b{color:var(--red)}
.art-sponsored{background:var(--gold-soft,#fff3d6);color:var(--gold,#b8860b);font-weight:800}
.art-head h1{font-size:28px;font-weight:800;line-height:1.6;margin:10px 0}
.art-sub{font-size:15px;color:var(--ink-2);line-height:1.9}
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0 0;margin-top:16px;font-size:12px;color:var(--muted)}
.art-meta .sp-avatar{width:40px;height:40px;font-size:13px}
.art-author b{display:block;color:var(--ink);font-size:13.5px}
.art-meta .vr{width:1px;height:24px;background:var(--line)}
.art-meta .stat{display:flex;align-items:center;gap:5px}
.art-meta .stat .icon{width:13px;height:13px}
/* view counter closes the byline row, pushed to its far (inline-end) side */
.art-meta .art-views{margin-inline-start:auto}
.art-meta .art-views[hidden]{display:none}
@media (max-width:520px){.art-meta .art-views{margin-inline-start:0}}

.art-share{display:flex;gap:8px;align-items:center;padding:12px 28px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.art-share>span{font-size:12px;color:var(--muted);margin-left:4px}

.art-fig{margin:0;position:relative}
.art-fig .ph{aspect-ratio:15/10;background:var(--surface-2)}
.art-fig .ph img{width:100%;height:100%;object-fit:cover}
.art-fig .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.art-fig .play span{width:64px;height:64px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.art-fig .play .icon{width:26px;height:26px;fill:#fff;stroke:none;margin-right:-3px}

/* video embed */
.art-fig--video .art-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin-inline:auto;overflow:hidden}
.art-video,.art-video .brid,.art-video iframe,.art-video video,.vbrid,.vbrid .brid,.vbrid iframe{border-radius:0}
/* portrait (9/16) clips: keep them narrow and centred instead of full-bleed */
.art-fig--video .art-video.is-portrait{aspect-ratio:9/16;max-width:min(340px,78vw)}

/* portrait video relocated into the sidebar on desktop (above الأكثر قراءة) */
.side-video{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.side-video:empty{display:none}                 /* mobile: video stays in place, mount is empty */
.side-video .art-fig{margin:0}
.side-video .art-video.is-portrait{max-width:100%}
.side-video .art-fig figcaption{padding:9px 14px}
.art-video__poster{position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;cursor:pointer}
.art-video__poster::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.art-video__poster .play{position:relative;z-index:2;border:none;background:none;cursor:pointer;padding:0}
.art-video__poster .play span{width:70px;height:70px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.4);transition:transform .2s}
.art-video__poster .play:hover span{transform:scale(1.08)}
.art-video__poster .play .icon{width:28px;height:28px;fill:#fff;stroke:none;margin-right:-3px}
.art-video__frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0}
/* Brid injects its own wrapper with inline px dimensions — force it to fill
   the responsive parent (inline styles need !important to be overridden). */
#playerconfiguration,
#playerconfiguration > div,
#playerconfiguration .brid,
#playerconfiguration iframe,
#playerconfiguration video{width:100%!important;height:100%!important;max-width:100%!important;inset-inline:0!important}
#playerconfiguration video{object-fit:contain;background:#000}

/* ---------------- inline image gallery: Facebook-style mosaic -------------
   The shape class (.g-wide / .g-tall / .g-sq + .g-n1…4) is decided in PHP from
   the album's orientation and photo count; overflow photos stay in the DOM as
   bare anchors (.g-hidden) so PhotoSwipe can page through the full album.   */
.art-gallery{display:grid;gap:4px;padding:0 28px 8px}
.art-gallery .g-item{
  position:relative;display:block;overflow:hidden;border-radius:6px;
  background:var(--surface-2);cursor:zoom-in
}
.art-gallery .g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.art-gallery .g-item:hover img{transform:scale(1.045)}
.art-gallery .g-hidden{display:none}
.g-more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,46,.55);color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:clamp(20px,4.2vw,40px);line-height:1;letter-spacing:.5px;direction:ltr;
  text-shadow:0 2px 10px rgba(0,0,0,.4);transition:background .2s
}
.art-gallery .g-item:hover .g-more{background:rgba(8,10,46,.66)}
.g-note{font-size:12px;color:var(--muted);padding:0 28px 10px}

/* landscape albums */
.g-wide.g-n1,.g-wide.g-n2{grid-template-columns:1fr}
.g-wide.g-n1 .g-item,.g-wide.g-n2 .g-item{aspect-ratio:16/9}
.g-wide.g-n3{grid-template-columns:1fr 1fr}
.g-wide.g-n3 .g-item:first-child{grid-column:1/-1;aspect-ratio:16/9}
.g-wide.g-n3 .g-item:not(:first-child){aspect-ratio:4/3}
.g-wide.g-n4{grid-template-columns:repeat(3,1fr)}
.g-wide.g-n4 .g-item:first-child{grid-column:1/-1;aspect-ratio:16/9}
.g-wide.g-n4 .g-item:not(:first-child){aspect-ratio:1/1}

/* portrait albums */
.g-tall.g-n1{grid-template-columns:1fr;justify-items:center}
.g-tall.g-n1 .g-item{aspect-ratio:3/4;width:min(100%,400px)}
.g-tall.g-n2{grid-template-columns:1fr 1fr}
.g-tall.g-n2 .g-item{aspect-ratio:3/4}
/* Rows are sized by the two square side tiles rather than by the container,
   so the geometry is deterministic instead of falling out of the images'
   intrinsic sizes (grid items default to min-height:auto). */
.g-tall.g-n3{grid-template-columns:1.45fr 1fr}
.g-tall.g-n3 .g-item:first-child{grid-row:1/3;min-height:0}
.g-tall.g-n3 .g-item:not(:first-child){aspect-ratio:1/1}

/* square albums */
.g-sq .g-item{aspect-ratio:1/1}
.g-sq.g-n1{grid-template-columns:1fr;justify-items:center}
.g-sq.g-n1 .g-item{width:min(100%,460px)}
.g-sq.g-n2,.g-sq.g-n4{grid-template-columns:1fr 1fr}
.g-sq.g-n3{grid-template-columns:repeat(3,1fr)}

/* Article reactions now use the Facebook-style bar — see `.art-reactions--top`
   and the shared `.c-react-*` picker styles further down this file. */

/* soft CTAs */
.art-cta{margin:20px 28px;display:flex;flex-direction:column;gap:12px}
.cta-wa{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:10px;background:linear-gradient(135deg,#128C7E,#25D366);color:#fff;text-decoration:none}
.cta-wa .cta-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta-wa .cta-ico .icon{width:24px;height:24px;fill:#fff}
.cta-wa .cta-txt{flex:1}
.cta-wa .cta-txt b{display:block;font-size:14.5px}
.cta-wa .cta-txt small{font-size:12px;opacity:.9}
.cta-wa .cta-go{background:#fff;color:#128C7E;font-weight:800;font-size:12.5px;padding:8px 16px;border-radius:999px;white-space:nowrap}
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-mini{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cta-mini[role="button"]{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.cta-mini[role="button"]:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.cta-app[role="button"]:hover{border-color:var(--red)}
.cta-mini[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cta-mini .cta-link{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta-mini .cta-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--brand-soft)}
.cta-mini .cta-ico .icon{width:19px;height:19px;color:var(--brand)}
.cta-app .cta-ico{background:var(--red-soft)}
.cta-app .cta-ico .icon{color:var(--red)}
.cta-mini b{display:block;font-size:13px}
.cta-mini small{font-size:11.5px;color:var(--muted);line-height:1.7}
.cta-mini a{color:var(--brand);font-weight:700}
.cta-app a{color:var(--red)}

/* follow card — two networks per row */
.follow-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.follow-grid li a{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px;transition:.15s}
.follow-grid li a:hover{border-color:var(--brand);background:var(--brand-soft)}
.follow-grid .sp-avatar{width:34px;height:34px;flex-shrink:0}
.follow-grid .fg-txt{min-width:0}
.follow-grid .fg-txt b{display:block;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.follow-grid .fg-txt small{font-size:11px;color:var(--muted)}

/* comment list */
.c-list{margin-top:8px}
.c-empty{font-size:13px;color:var(--muted);padding:14px 0;text-align:center}
/* ---------------- lightbox (PhotoSwipe 5) ----------------
   Base theme ships with the vendored photoswipe.css; only the bits that have
   to match the site — the bottom ad bar and the caption — live here.       */
.pswp{--pswp-bg:#06081a;--pswp-icon-color:#fff;--pswp-icon-color-secondary:#06081a}
.pswp__ka-caption{
  position:absolute;left:0;right:0;top:0;z-index:10;
  padding:60px 76px 12px;text-align:center;color:#e7e9f6;font-size:13px;line-height:1.7;
  background:linear-gradient(to bottom,rgba(6,8,26,.75),transparent);
  text-shadow:0 1px 6px rgba(0,0,0,.6)
}
/* PhotoSwipe puts `pointer-events:auto` on every registered element via
   `.pswp--ui-visible .pswp__hide-on-close`, which outranks a plain
   `.pswp__ka-caption` rule. The caption is a full-width overlay lying across
   the toolbar, so without this it eats the close/zoom/save clicks. */
.pswp .pswp__ka-caption.pswp__hide-on-close{pointer-events:none}
/* The page is RTL, which would otherwise render "1 / 10" as "10 / 1". Forcing
   direction:ltr also re-resolves PhotoSwipe's `margin-inline-start:20px` to the
   left, so the counter loses its gap from the (RTL) right edge and clips —
   restate both margins explicitly. */
.pswp__counter{
  direction:ltr;margin-inline-start:0;margin-right:20px;
  font-variant-numeric:tabular-nums;opacity:.85
}

/* Ad bar pinned to the bottom of the viewport while the gallery is open.
   It sits above the PhotoSwipe root (z-index 100000) rather than inside it,
   so opening/closing never re-creates the ad iframe. */
.lb-adbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:100050;
  align-items:center;justify-content:center;padding:6px 8px;
  background:rgba(6,8,26,.92);border-top:1px solid rgba(255,255,255,.1)
}
.lb-adbar.is-on{display:flex}
/* no slot left to show (unfilled ads are stripped from the DOM) */
.lb-adbar.is-empty{display:none}
.lb-adbar .gam-slot-box.gam-slot-box{margin:0 auto}
.art-fig figcaption{font-size:11.5px;color:var(--muted);padding:9px 28px;border-bottom:1px solid var(--line);background:var(--surface-2)}

.art-fontbar{display:flex;align-items:center;gap:12px;padding:12px 28px 0;justify-content:flex-end}
/* when it sits inside the share row, push it to the left (inline-end) of the row */
.art-share .art-fontbar{margin-inline-start:auto;padding:0;gap:8px}
.art-fontbar .af-label{font-size:12px;color:var(--muted)}
.af-group{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.af-btn{display:flex;align-items:center;justify-content:center;min-width:38px;height:32px;border:none;background:none;cursor:pointer;font-family:var(--font-head);font-weight:800;color:var(--ink-2);transition:.15s;line-height:1}
.af-btn+.af-btn{border-inline-start:1px solid var(--line)}
.af-btn small{font-size:11px;margin-inline-start:1px}
.af-btn:hover{background:var(--brand-soft);color:var(--brand)}
.af-btn.af-reset{font-size:13px}
.af-btn.af-reset.is-active{color:var(--brand)}

.art-body{padding:16px 28px 8px;font-size:15.5px;line-height:2.05;color:var(--ink)}
.art-body p{margin-bottom:16px}
.art-body h2{font-size:19px;margin:24px 0 12px;display:flex;gap:10px;align-items:center}
.art-body h2::before{content:"";width:4px;height:20px;background:var(--red);border-radius:2px}
.art-body h3{font-size:17px;margin:20px 0 10px}
.art-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.art-body img{max-width:100%!important;width:auto;height:auto!important;object-fit:contain;border-radius:var(--radius);margin:14px auto;display:block}
.art-body ul,.art-body ol{margin:0 0 16px;padding-inline-start:22px}
.art-body li{margin-bottom:8px;line-height:1.9}
.art-body blockquote{border-inline-start:3px solid var(--red);background:var(--surface-2);padding:16px 20px;border-radius:4px;margin:20px 0;font-weight:600;font-size:15px;line-height:1.9}
.art-body blockquote footer{background:none;border:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--muted);font-weight:400}

.read-also{border:1px solid var(--line);border-inline-start:3px solid var(--red);border-radius:4px;padding:13px 18px;margin:20px 0;background:var(--surface-2)}
.read-also b{font-size:11.5px;color:var(--red);font-family:var(--font-head)}
.read-also a{display:block;font-weight:700;font-size:14px;padding-top:5px;line-height:1.7;color:var(--ink);text-decoration:none}
.read-also a:hover{color:var(--red)}

.art-tags{display:flex;gap:8px;flex-wrap:wrap;padding:6px 28px 20px}
.art-tags a{font-size:11.5px;border:1px solid var(--line);border-radius:4px;padding:4px 13px;color:var(--muted);transition:.15s}
.art-tags a:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}

.author-box{margin:0 28px 24px;border:1px solid var(--line);border-radius:4px;padding:16px 18px;display:flex;gap:14px;align-items:center;background:var(--surface-2)}
.author-box .sp-avatar{width:56px;height:56px;font-size:16px;flex-shrink:0}
.author-box b{display:block;font-family:var(--font-head);font-size:14.5px}
.author-box p{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:3px}
.author-box .fol{margin-inline-start:auto;height:36px;padding:0 18px;font-size:12.5px;white-space:nowrap}

.art-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.art-nav a{padding:15px 22px;transition:.15s}
.art-nav a:first-child{border-inline-end:1px solid var(--line)}
.art-nav a:last-child{text-align:left}
.art-nav small{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.art-nav b{font-size:13px;font-weight:700;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-nav a:hover b{color:var(--red)}

.comments{margin-top:24px}

/* ---- composer (rounded box + toolbar + submit) ---- */
.cm-composer{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px 10px}
.cm-input{width:100%;border:none;background:none;color:var(--ink);font-family:inherit;font-size:14.5px;line-height:1.7;outline:none;resize:vertical;min-height:46px}
.cm-input::placeholder{color:var(--muted)}
.cm-toolbar{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.cm-tools{display:flex;align-items:center;gap:2px;flex:1;min-width:0;flex-wrap:wrap}
.cm-tool{width:32px;height:32px;border-radius:7px;color:var(--muted);font-size:15px;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
.cm-tool b,.cm-tool i,.cm-tool u{font-size:14px;font-family:var(--font-head)}
.cm-tool:hover{background:var(--line);color:var(--ink)}
.cm-tool-sep{width:1px;height:18px;background:var(--line-strong);margin:0 4px}
.cm-name{flex:1;min-width:110px;border:1px solid var(--line);border-radius:7px;padding:7px 11px;font-family:inherit;font-size:12.5px;background:var(--surface);color:var(--ink);outline:none}
.cm-name:focus{border-color:var(--red)}
.cm-submit{background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;font-size:13px;padding:9px 22px;border-radius:999px;transition:.15s;white-space:nowrap}
.cm-submit:hover{background:var(--red-deep,#c81e2b)}
.cm-submit:disabled{opacity:.6;cursor:default}
.cm-emoji{display:flex;flex-wrap:wrap;gap:2px;margin-top:8px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.cm-emoji[hidden]{display:none}
.cm-emoji button{width:34px;height:34px;font-size:19px;border-radius:8px;transition:.12s}
.cm-emoji button:hover{background:var(--surface-2);transform:scale(1.15)}
.c-note{font-size:11.5px;color:var(--muted);margin-top:9px}

/* ---- header + sort ---- */
.cm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 6px}
.comments .c-head{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:18px}
.cm-countpill{background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 11px;min-width:26px;text-align:center}
.cm-sort{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-family:var(--font-head);font-weight:700;font-size:13px;padding:6px 10px;border-radius:8px;transition:.14s}
.cm-sort:hover{background:var(--surface-2);color:var(--ink)}
.cm-sort svg{opacity:.7}

/* article sidebar (sticky) + related grid + ad slots — not in the base v2 css */
.article-grid .sidebar{position:sticky;top:64px;display:flex;flex-direction:column;gap:22px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
.rel-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel-card .ph{aspect-ratio:15/10;background:var(--surface-2)}
.rel-card .ph img{width:100%;height:100%;object-fit:cover}
.rel-card .b{padding:12px 14px}
.rel-card h3{font-size:14px;font-weight:700;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel-card:hover h3{color:var(--red)}
/* .art-ad sits on the .gam-slot-box itself, which already carries the
   background/label/radius. We only reserve height so the empty slot has a
   non-zero box for the IntersectionObserver (threshold .01) to fire on. */
.art-ad{min-height:250px}
.art-ad[data-gam-size="300x600"]{min-height:600px}
.art-ad--lb{margin:24px 0;display:flex;justify-content:center}
.art-ad--lb .gam-slot-box{margin:0}

@media (max-width:1080px){
  .article-grid{grid-template-columns:1fr}
  .article-grid .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
}
@media (max-width:720px){
  .art-head{padding:18px 18px 0}
  .art-cmc{top:18px;left:18px;height:22px;padding:0 8px;font-size:11px}
  .art-head h1{font-size:21px}
  .art-share,.art-fig figcaption,.art-body,.art-tags{padding-inline:18px}
  .art-gallery,.g-note{padding-inline:18px}
  .author-box{margin-inline:18px}
  .author-box .fol{display:none}
  .art-nav{grid-template-columns:1fr}
  .art-nav a:first-child{border-inline-end:none;border-bottom:1px solid var(--line)}
  .rel-grid{grid-template-columns:1fr}
  .article-grid .sidebar{grid-template-columns:1fr}
}

/* Facebook page follow card (sidebar) — lightweight, no FB iframe plugin */
.fb-follow{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#1877F2,#0b5fcc);color:#fff;border-radius:var(--radius);padding:13px 15px;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px rgba(24,119,242,.28)}
.fb-follow:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(24,119,242,.4);color:#fff}
.fb-follow__ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.fb-follow__ic .icon{width:22px;height:22px;color:#fff;fill:currentColor}
.fb-follow__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-follow__txt b{font-family:var(--font-head);font-weight:800;font-size:14px;line-height:1.35}
.fb-follow__txt small{font-size:11px;color:rgba(255,255,255,.85)}
.fb-follow__go{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;font-family:var(--font-head);font-weight:700;font-size:12px}
.fb-follow__go .icon{width:13px;height:13px}
.fb-follow:hover .fb-follow__go{background:rgba(255,255,255,.3)}

/* Elections promo banner (sidebar, on election articles) */
.elex-promo{display:block;position:relative;overflow:hidden;border-radius:var(--radius);padding:16px 16px 15px;background:linear-gradient(135deg,#0a0630 0%,var(--brand-deep) 55%,var(--red) 165%);color:#fff;box-shadow:0 6px 20px rgba(10,6,48,.28);transition:transform .15s,box-shadow .15s}
.elex-promo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 15px);pointer-events:none}
.elex-promo:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,6,48,.4);color:#fff}
.elex-promo>*{position:relative}
.elex-promo__badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:800;font-size:10.5px;letter-spacing:.4px;background:var(--red);color:#fff;padding:4px 11px;border-radius:999px;margin-bottom:11px}
.elex-promo__title{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:16.5px;line-height:1.4}
.elex-promo__title .icon{color:#fff;flex-shrink:0}
.elex-promo__desc{display:block;font-size:12px;color:#cdd3ff;line-height:1.7;margin:8px 0 13px}
.elex-promo__btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 15px;font-family:var(--font-head);font-weight:800;font-size:12.5px}
.elex-promo:hover .elex-promo__btn{background:#fff;color:var(--brand-deep);border-color:#fff}

/* ============================================================
   Comments — flat rows, 👍/👎 voting, connector-line replies
   ============================================================ */
.c-list{display:flex;flex-direction:column;margin-top:6px}
.c-empty{font-size:13px;color:var(--muted);padding:18px 0;text-align:center}
.comment{display:block}
/* separator line between top-level comments */
.c-list > .comment{padding:18px 0}
.c-list > .comment:first-child{padding-top:8px}
.c-list > .comment + .comment{border-top:1px solid var(--line)}
.c-row{display:flex;gap:11px}
.comment .sp-avatar{width:38px;height:38px;flex-shrink:0;font-size:14px}
.c-main{flex:1;min-width:0}
.c-hl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3}
.c-hl b{font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--ink)}
.c-hl time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.c-text{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:4px 0 0;white-space:pre-wrap;word-break:break-word}
.c-text b{font-weight:800;color:var(--ink)}

.c-actions{display:flex;align-items:center;gap:14px;margin-top:9px}
.c-vote{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-family:var(--font-head);font-weight:700;font-size:13px;transition:color .14s}
.c-vote .cv-ic{transition:transform .14s}
.c-vote.down .cv-ic{transform:scaleY(-1)}
.c-vote:hover{color:var(--ink)}
.c-vote.up.on{color:var(--red)}
.c-vote.down.on{color:var(--ink)}
.c-vote.on .cv-ic{transform:scale(1.08)}
.c-vote.down.on .cv-ic{transform:scaleY(-1) scale(1.08)}
.cv-n{font-variant-numeric:tabular-nums}
.c-reply-btn{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-family:var(--font-head);font-weight:700;font-size:13px;transition:color .14s}
.c-reply-btn:hover{color:var(--ink)}

.c-menu-wrap{position:relative}
.c-menu{width:28px;height:24px;border-radius:6px;color:var(--muted);font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
.c-menu:hover{background:var(--line);color:var(--ink)}
.c-menu-pop{position:absolute;inset-inline-end:0;top:28px;z-index:25;min-width:170px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:5px}
.c-menu-pop[hidden]{display:none}
.c-menu-pop button{text-align:start;font-family:var(--font-head);font-weight:600;font-size:12.5px;color:var(--ink-2);padding:9px 11px;border-radius:8px;transition:.12s}
.c-menu-pop button:hover{background:var(--surface-2);color:var(--ink)}

.c-replies{margin-top:16px;margin-inline-start:18px;padding-inline-start:20px;border-inline-start:2px solid var(--line);display:flex;flex-direction:column;gap:16px}
.c-replies .sp-avatar{width:32px;height:32px;font-size:12px}
.c-replies>.comment>.c-row{position:relative}
.c-replies>.comment>.c-row::before{content:"";position:absolute;inset-inline-start:-20px;top:18px;width:15px;height:2px;background:var(--line)}

.c-reply-form{margin-top:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px}
.c-reply-form input,.c-reply-form textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-family:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);outline:none;margin-bottom:8px}
.c-reply-form textarea{min-height:64px;resize:vertical}
.c-reply-form .crf-row{display:flex;align-items:center;gap:12px}
.c-reply-form .crf-row .cm-submit{padding:7px 18px}
.c-reply-form .crf-note{font-size:12px;color:var(--muted)}

/* ---- reaction chips — Slack/GitHub pattern: one slim row between hairlines ---- */
.art-reactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0;padding:9px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art-reactions .rx-total{font-size:12.5px;color:var(--muted);font-weight:600;margin-inline-start:4px;white-space:nowrap}
.rx-row{display:flex;gap:7px;flex-wrap:wrap}
.rx-b{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:13.5px;color:var(--ink-2);line-height:1;transition:border-color .14s,background .14s,color .14s}
.rx-b .rx-e{font-size:17px;line-height:1}
.rx-b .rx-c{font-variant-numeric:tabular-nums;color:var(--muted)}
.rx-b:hover{border-color:var(--line-strong,#c9c9cf);background:var(--surface-2)}
.rx-b.on{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.rx-b.on .rx-c{color:var(--red)}
/* font-size control shares the reactions row, pinned to the end */
/* total sits right next to the chips; the font control is pushed to the far end */
.art-reactions .art-fontbar{padding:0;gap:8px;margin-inline-start:auto}
@media (max-width:520px){.art-reactions .art-fontbar .af-label{display:none}}

/* ---- desktop: sticky vertical share rail (NYT/Medium), only where there's margin room ---- */
.share-rail{display:none}
.sr-b{position:relative;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s,background .15s,color .15s}
.sr-b .icon{width:19px;height:19px}
.sr-b:hover{transform:translateY(-2px)}
.sr-b.s-wa:hover{background:var(--wa);border-color:var(--wa);color:#fff}
.sr-b.s-fb:hover{background:var(--fb);border-color:var(--fb);color:#fff}
.sr-b.s-tg:hover{background:var(--tg);border-color:var(--tg);color:#fff}
.sr-b.s-x:hover{background:var(--xx);border-color:var(--xx);color:#fff}
.sr-b.share-copy{width:46px;height:46px;border-radius:50%;padding:0;font-size:0}
.sr-b.share-copy:hover{border-color:var(--red);color:var(--red)}
.sr-b.share-copy.copied{background:#16a34a;border-color:#16a34a;color:#fff}
.sr-tip{position:absolute;inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.9);white-space:nowrap;background:#16a34a;color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:7px;opacity:0;visibility:hidden;transition:.15s;pointer-events:none}
.sr-b.share-copy.copied .sr-tip{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}

/* ---- mobile/laptop: fixed bottom share bar ---- */
.share-bar{position:fixed;inset-inline:0;bottom:0;z-index:200;display:flex;align-items:center;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.sb-b{flex:0 0 auto;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:8px}
.sb-b .icon{width:19px;height:19px}
.sb-b.s-wa{flex:1;background:var(--wa);border-color:var(--wa);color:#fff;font-family:var(--font-head);font-weight:800;font-size:14px}
.sb-b.s-fb:hover{color:var(--fb)}
.sb-b.s-tg:hover{color:var(--tg)}
.sb-b.s-x:hover{color:var(--ink)}
.sb-b.share-copy.copied{background:#16a34a;border-color:#16a34a;color:#fff}
body:has(.share-bar) .site-foot{padding-bottom:78px}

/* wide screens: rail appears in the margin, bottom bar hides */
@media (min-width:1366px){
  .share-bar{display:none}
  body:has(.share-bar) .site-foot{padding-bottom:0}
  /* Anchored below the Welcomer ad / sticky nav / ticker via --gam-rail-top
     (maintained by kulalarab-ads.js), so the welcome ad never covers it. */
  .share-rail{display:flex;flex-direction:column;gap:11px;position:fixed;top:calc(var(--gam-rail-top, 90px) + 22px);inset-inline-start:max(10px,calc((100vw - var(--maxw,1280px)) / 2 - 58px));z-index:200}
}

/* ---- shared FB reaction picker + summary ---- */
.c-react-wrap{position:relative}
.c-react-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--muted);padding:5px 9px;border-radius:8px;transition:background .15s,color .15s;background:var(--surface)}
.c-react-btn:hover{color:var(--ink)}
.c-react-btn .crb-ic{font-size:15px;line-height:1}
.c-react-btn[data-active]{font-weight:800}
.c-react-btn[data-active="like"]{color:#1877f2;border-color:#1877f2}
.c-react-btn[data-active="love"]{color:#e0245e;border-color:#e0245e}
.c-react-btn[data-active="haha"],.c-react-btn[data-active="wow"],.c-react-btn[data-active="sad"]{color:#e8a30c;border-color:#e8a30c}
.c-react-btn[data-active="angry"]{color:#e9710f;border-color:#e9710f}
.c-react-picker{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;z-index:30;display:flex;gap:2px;padding:6px 9px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(8px) scale(.85);transform-origin:bottom center;transition:opacity .18s,transform .18s,visibility .18s}
.c-react-picker::after{content:"";position:absolute;top:100%;inset-inline-start:0;width:100%;height:12px}
.c-react-wrap:hover .c-react-picker,.c-react-picker:hover,.c-react-picker.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.c-react-picker .crp{font-size:25px;line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform .14s}
.c-react-picker .crp:hover{transform:scale(1.4) translateY(-6px)}
.c-react-wrap:hover .crp,.c-react-picker.open .crp{animation:crpIn .3s backwards}
.c-react-picker .crp:nth-child(1){animation-delay:.02s}
.c-react-picker .crp:nth-child(2){animation-delay:.05s}
.c-react-picker .crp:nth-child(3){animation-delay:.08s}
.c-react-picker .crp:nth-child(4){animation-delay:.11s}
.c-react-picker .crp:nth-child(5){animation-delay:.14s}
.c-react-picker .crp:nth-child(6){animation-delay:.17s}
@keyframes crpIn{from{opacity:0;transform:translateY(10px) scale(.4)}to{opacity:1}}
.c-react-summary{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.c-react-summary:empty{display:none}
.cr-stack{display:inline-flex;align-items:center}
.cr-stack i{width:19px;height:19px;border-radius:50%;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;box-shadow:0 0 0 1.5px var(--surface-2);margin-inline-start:-6px}
.cr-stack i:first-child{margin-inline-start:0}
@media (prefers-reduced-motion:reduce){.c-react-picker .crp{animation:none!important}}