/* ══════════════════════════════════════════════════════════════
   Static shims for the DS React components the widgets composed
   (Factuality, SourceStack, OutletLogo, Coverage, Tag). Rendered as
   plain HTML in parts/widget-*.php — no React/Babel at runtime.
   ══════════════════════════════════════════════════════════════ */

/* Factuality — pill */
.dsx-fact{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);white-space:nowrap}
.dsx-fact-dot{width:8px;height:8px;border-radius:50%;background:var(--fact-mixed);flex:none}
.dsx-fact-score{color:var(--ink);font-weight:700}
.dsx-fact--high{border-color:color-mix(in oklab,var(--fact-high) 32%,var(--line))}
.dsx-fact--high .dsx-fact-dot{background:var(--fact-high)}
.dsx-fact--mixed .dsx-fact-dot{background:var(--fact-mixed)}
.dsx-fact--low .dsx-fact-dot{background:var(--fact-low)}

/* Factuality — bar */
.dsx-bar{position:relative;display:block;width:100%;height:7px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.dsx-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--fact-mixed)}
.dsx-bar--high .dsx-bar-fill{background:var(--fact-high)}
.dsx-bar--mixed .dsx-bar-fill{background:var(--fact-mixed)}
.dsx-bar--low .dsx-bar-fill{background:var(--fact-low)}

/* SourceStack / OutletLogo */
.dsx-stack{display:inline-flex;align-items:center}
.dsx-stack .dsx-logo+.dsx-logo{margin-left:-7px}
.dsx-logo{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--font-sans);font-weight:700;font-size:9px;line-height:1;color:#fff;background:var(--ink);border:2px solid var(--surface);text-transform:uppercase;flex:none}
.dsx-logo--more{background:var(--paper-2);color:var(--ink-2);font-family:var(--font-mono);font-size:9px;font-weight:600}
.evt-rail-logos .dsx-logo{width:22px;height:22px}

/* Coverage + sparkline */
.dsx-cov{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.dsx-cov-num{color:var(--ink);font-weight:700;font-size:13px}
.dsx-cov b{color:var(--ink-2);font-weight:600}
.dsx-spark{width:64px;height:22px;flex:none;overflow:visible}
.dsx-spark polyline{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dsx-spark circle{fill:var(--accent)}

/* Tag */
.dsx-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.dsx-tag-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}

/* Cookie banner: honor the [hidden] attribute. site.css sets
   .cookie-banner{display:flex}, which overrides the UA [hidden]{display:none},
   so "Got it" (b.hidden=true) and the already-accepted state never hid it.
   This higher-specificity rule restores hide-on-[hidden]. */
.cookie-banner[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════
   Mobile adaptation. site.css hides .nav-link below 840px but ships
   no mobile menu — these rules add the hamburger + drop-down panel
   and tighten spacing on small screens. Loaded after site.css.
   ══════════════════════════════════════════════════════════════ */

/* hamburger button (hidden on desktop) */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-left:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;flex:none;padding:0}
.nav-toggle:hover{border-color:var(--ink-3)}
.nav-ico{width:22px;height:22px;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.nav-ico-close{display:none}

/* drop-down panel (closed by default) */
.mobile-menu{display:none;flex-direction:column;padding:8px 28px 22px;background:var(--paper);border-top:1px solid var(--line)}
.mobile-menu .nav-link{display:block;font-family:var(--font-sans);font-size:16px;font-weight:500;color:var(--ink-2);padding:14px 2px;border-bottom:1px solid var(--line)}
.mobile-menu .nav-link.is-active{color:var(--ink);font-weight:600}
.mobile-menu .ib-btn{margin-top:18px}

@media(max-width:840px){
  .nav-toggle{display:inline-flex}
  .nav-links .nav-cta{display:none}          /* bar = brand + hamburger; CTA lives in the panel */
  body.nav-open{overflow:hidden}
  body.nav-open .mobile-menu{display:flex}
  body.nav-open .nav-ico-open{display:none}
  body.nav-open .nav-ico-close{display:block}
}

/* tighter rhythm on phones (site.css uses generous desktop spacing) */
@media(max-width:640px){
  .section{padding:56px 0}
  .section--tight{padding:44px 0}
  .hero{padding:52px 0 44px}
  .hero-mock{margin-top:38px}
  .sec-head{margin-bottom:34px}
  .page-hero{padding:52px 0 8px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .article{padding:0 18px}
  .evt-body{padding:22px 18px}
  .cta-row .ib-btn{width:100%}              /* full-width CTAs, easier tap targets */
}