/* RAQMANA — News: the news pages (news.html, ar/news-ar.html). Rendered by assets/js/news.js.
   Everything shared (tokens, themes, type, .cut-frame, .bg-grid, .tag, .link, .btn, header, footer) comes from
   raqmana.css; this file only adds the news components. No new colours: every value is a raqmana.css token or
   an alpha of one of its channel triplets. Spacing uses the --s-* scale; px appear only where no token exists
   (hairlines, icon boxes, the tag column's 44 px minimum target).
   The page sits on the one night base; the lead story and side panel are raised night-2 surfaces, featured cards
   are steel plates, other cards are hairline frames, and cyan is the single accent. */

.page-news { background-color: var(--rq-night); }
.page-news .page-hero { --grid-x: 28%; --grid-y: 40%; --atmos-x: 80%; --atmos-y: 20%; padding-bottom: var(--s-7); }
.page-news .page-hero-grid { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- Hero: the live stamp */
.news-stamp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); color: var(--fg-3); }
.news-stamp-sep { color: var(--rq-cyan); }
.news-stamp time { color: var(--rq-frost); }
.news-stale { font-size: var(--fs-small); color: var(--rq-frost); padding-inline-start: var(--s-3); box-shadow: inset 2px 0 0 var(--rq-cyan); }
[dir="rtl"] .news-stale { box-shadow: inset -2px 0 0 var(--rq-cyan); }
[data-state="loading"] .news-stamp, [data-state="error"] .news-stamp { visibility: hidden; }   /* keeps its space: no jump */
.spec dd[data-news-source-list] { text-wrap: pretty; }

/* ---------------------------------------------------------------- Hero: the situation board
   A raised night-2 panel with a cyan frame: live status, a decorative radar of every story, and three counts. */
.board {
  --cut: var(--cut-xl);
  --frame: var(--rq-cyan-line);
  display: grid;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 2.6vw, var(--s-6));
  background-color: rgba(var(--rq-night2-rgb), .86);
  background-image: radial-gradient(110% 80% at 0% 0%, rgba(var(--rq-cyan-rgb), .1), transparent 60%);
}
[dir="rtl"] .board { background-image: radial-gradient(110% 80% at 100% 0%, rgba(var(--rq-cyan-rgb), .1), transparent 60%); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.board-live, .board-cadence { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; }
.board-live { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--rq-frost); }
.board-cadence { color: var(--rq-silver); }
html[lang="ar"] :is(.board-live, .board-cadence, .stat dt, .kev-ticker-label) { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }
.board-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }

/* The live dot: a cyan point with a ring that keeps rippling out */
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rq-cyan); box-shadow: 0 0 12px rgba(var(--rq-cyan-rgb), .8); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--rq-cyan); animation: rq-ripple 2.2s var(--ease) infinite; }
@keyframes rq-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* Radar: rings for Libya (core), the region and the world; one sweep every 8 s (SWEEP_SECONDS in news.js) */
.radar { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; justify-self: center; direction: ltr; }
.radar-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.radar-ring, .radar-cross { fill: none; stroke: var(--rq-cyan-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar-ring--outer { stroke: var(--rq-cyan-line); }
.radar-ring--core { fill: rgba(var(--rq-cyan-rgb), .06); stroke: rgba(var(--rq-cyan-rgb), .3); stroke-dasharray: 2 3; }
.radar-sweep {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 285deg, rgba(var(--rq-cyan-rgb), .04) 285deg, rgba(var(--rq-cyan-rgb), .3) 358deg, rgba(var(--rq-cyan-rgb), .85) 360deg);
  animation: rq-turn 8s linear infinite;
  pointer-events: none;
}
@keyframes rq-turn { to { transform: rotate(1turn); } }
.blip { fill: var(--rq-mist); transform-box: fill-box; transform-origin: center; animation: rq-blip 8s linear infinite; }
.blip--mena, .blip--libya { fill: var(--rq-cyan); }
.blip--kev { fill: var(--rq-frost); }
@keyframes rq-blip {
  0% { opacity: 1; transform: scale(1.9); }
  8% { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: .32; transform: scale(1); }
}
.blip-halo { fill: none; stroke: var(--rq-cyan); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: rq-ripple 2.4s var(--ease) infinite; }
.radar-label { position: absolute; left: calc(50% + 6px); font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1; letter-spacing: .08em; color: var(--rq-silver); pointer-events: none; }
.radar-label--ly { top: 36.5%; color: var(--rq-cyan); }
.radar-label--mena { top: 21%; }
.radar-label--global { top: 6%; }

/* Counts: big light numerals over mono labels */
.board-stats { display: grid; }
.stat { display: flex; flex-direction: column-reverse; gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.stat:first-child { border-top: 0; padding-top: 0; }
.stat:last-child { padding-bottom: 0; }
.stat dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--rq-silver); }
.stat dd { font-size: clamp(2rem, 1.4rem + 1.5vw, 2.875rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--rq-white); font-variant-numeric: tabular-nums; }
.stat--kev dd { color: var(--rq-cyan); text-shadow: 0 0 24px rgba(var(--rq-cyan-rgb), .45); }

/* ---------------------------------------------------------------- Exploited now: a slow ticker of CISA KEV stories
   Pauses on hover, on focus and with its button (WCAG 2.2.2); a still, scrollable row with reduced motion. */
.kev-ticker {
  position: relative;
  background: linear-gradient(90deg, rgba(var(--rq-cyan-rgb), .1), rgba(var(--rq-cyan-rgb), .03) 45%, transparent);
  box-shadow: inset 0 1px 0 var(--rq-cyan-edge);
}
[dir="rtl"] .kev-ticker { background: linear-gradient(-90deg, rgba(var(--rq-cyan-rgb), .1), rgba(var(--rq-cyan-rgb), .03) 45%, transparent); }
.kev-ticker-bar { display: flex; align-items: center; gap: var(--s-4); min-height: 52px; }
.kev-ticker-label { flex: none; display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--rq-cyan); }
.kev-ticker-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.kev-ticker-track { display: flex; width: max-content; animation: rq-tick 60s linear infinite; }
[dir="rtl"] .kev-ticker-track { animation-name: rq-tick-rtl; }
.kev-ticker:is(:hover, :focus-within, .is-paused) .kev-ticker-track { animation-play-state: paused; }
@keyframes rq-tick { to { transform: translateX(-50%); } }
@keyframes rq-tick-rtl { to { transform: translateX(50%); } }
.tk-item { flex: none; }
.tk-link { display: inline-flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-5); white-space: nowrap; color: var(--rq-mist); box-shadow: inset -1px 0 0 var(--rq-cyan-edge); transition: color var(--t-fast) var(--ease); }
.tk-cve { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--rq-frost); }
.tk-title { display: inline-block; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: var(--fs-small); }
.tk-link:hover, .tk-link:focus-visible { color: var(--rq-white); }
.tk-link:hover .tk-cve { color: var(--rq-cyan); }
.tk-link:focus-visible { outline-offset: -2px; }
.kev-ticker-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--rq-silver);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.kev-ticker-toggle:hover { color: var(--rq-cyan); border-color: var(--rq-cyan-line); }
.tk-icon { grid-area: 1 / 1; width: 14px; height: 14px; }
.kev-ticker-toggle[aria-pressed="false"] .tk-icon--play,
.kev-ticker-toggle[aria-pressed="true"] .tk-icon--pause { visibility: hidden; }

/* ---------------------------------------------------------------- Filters: the strategy page's on-this-page band */
.news-filters {
  position: relative;
  z-index: 90;
  background: rgba(var(--rq-night-rgb), .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--line), inset 0 1px 0 var(--line);
}
@media (min-width: 901px) {
  .news-filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); }
  html:has(.page-news) { scroll-padding-top: calc(var(--header-h) + 76px); }
}
.news-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  min-height: 60px;
  padding-block: var(--s-2);
}
.region-tabs { display: flex; gap: var(--s-1) var(--s-4); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s-2)); }
.region-tabs::-webkit-scrollbar { display: none; }
.region-tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  padding: 14px var(--s-2) 13px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rq-silver);
  transition: color var(--t-fast) var(--ease);
}
.region-tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-2);
  bottom: 0;
  height: 2px;
  background: var(--rq-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease);
}
[dir="rtl"] .region-tab::after { transform-origin: right center; }
.region-tab .num { font-size: var(--fs-micro); color: var(--rq-silver); transition: color var(--t-fast) var(--ease); }
.region-tab:hover:not(:disabled) { color: var(--rq-frost); }
.region-tab[aria-pressed="true"] { color: var(--rq-white); }
.region-tab[aria-pressed="true"]::after { transform: scaleX(1); }
.region-tab[aria-pressed="true"] .num { color: var(--rq-cyan); }
.region-tab:disabled { cursor: default; opacity: .45; }
.region-tab:focus-visible { outline-offset: 0; }
html[lang="ar"] .region-tab { font-family: var(--font-sans); font-size: var(--fs-small); text-transform: none; }
@media (forced-colors: active) {
  .region-tab[aria-pressed="true"] { border-bottom: 2px solid CanvasText; }
  .region-tab:disabled { color: GrayText; }
}

.news-fields { display: flex; gap: var(--s-3); flex: 0 1 520px; min-width: 0; }
.news-field { position: relative; display: block; min-width: 0; }
.news-field--select { flex: 0 0 200px; }
.news-field--search { flex: 1 1 auto; }
.news-field select,
.news-field input {
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  font: inherit;
  font-size: var(--fs-body);   /* 16 px: iOS Safari does not zoom on focus */
  line-height: 1.4;
  color: var(--rq-frost);
  background: transparent;
  border: 1px solid rgba(var(--rq-mist-rgb), .6);   /* 3.6:1 on night (WCAG 1.4.11) */
  border-radius: var(--radius);
  appearance: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.news-field select { padding-inline-end: var(--s-7); cursor: pointer; text-overflow: ellipsis; }
.news-field input { padding-inline-start: 40px; }
.news-field input::placeholder { color: var(--rq-silver); opacity: 1; }
.news-field input::-webkit-search-decoration { appearance: none; }
.news-field :is(select, input):hover:not(:disabled) { border-color: var(--rq-mist); }
.news-field :is(select, input):focus { border-color: var(--rq-cyan); background-color: var(--rq-night-2); }
.news-field :is(select, input):focus-visible { outline: none; box-shadow: 0 0 0 1px var(--rq-cyan); }   /* one ring, not two */
.news-field :is(select, input):disabled { opacity: .5; cursor: default; }
.news-field select option { color: var(--rq-ink); background: var(--rq-white); }
/* The select's chevron, drawn in CSS so it takes a token colour */
.news-field--select::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: var(--s-4);
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--rq-silver);
  border-bottom: 1.5px solid var(--rq-silver);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.news-field-icon { position: absolute; top: 50%; inset-inline-start: var(--s-4); width: var(--s-4); height: var(--s-4); translate: 0 -50%; color: var(--rq-silver); pointer-events: none; }
.news-field--search:focus-within .news-field-icon { color: var(--rq-cyan); }

/* ---------------------------------------------------------------- Bands */
.news-band { padding-block: var(--s-8) var(--s-9); }
.news-regional { --grid-x: 90%; --grid-y: 0%; --grid-w: 50%; --grid-h: 640px; }
.news-global { box-shadow: inset 0 1px 0 var(--rq-cyan-edge); }
.news-band .section-head--split { row-gap: var(--s-4); }

/* ---------------------------------------------------------------- Story parts (shared by lead, rows, cards) */
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.story-source, .story-time { font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.4; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.story-source { color: var(--fg-2); overflow-wrap: anywhere; min-width: 0; }
.story-time { color: var(--fg-3); white-space: nowrap; unicode-bidi: isolate; }
.story-kicker { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.story-title { font-weight: 400; color: var(--fg); text-wrap: pretty; overflow-wrap: anywhere; }
.story-title a { transition: color var(--t-fast) var(--ease); }
.story-excerpt { color: var(--fg-2); text-wrap: pretty; overflow-wrap: anywhere; }
.story-also { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); }
.story-also a { position: relative; z-index: 2; color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.story-also a:hover { color: var(--rq-cyan); text-decoration-color: currentColor; }
/* The headline link covers the whole story, so the story is one target; "also reported by" links sit above it */
.story-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@supports selector(:has(*)) {
  :is(.story-row, .story-card, .tl-item):has(.story-title a:focus-visible) { outline: 2px solid var(--rq-cyan); outline-offset: 3px; }
  .story-title a:focus-visible { outline: none; }
  /* The lead's cut frame clips outlines, so its ring is drawn as a shadow that follows the chamfer */
  .lead-story:has(.story-title a:focus-visible) { --frame: var(--rq-cyan); background-color: var(--rq-steel); }
  [data-lead]:has(.story-title a:focus-visible) {
    filter: drop-shadow(2px 0 0 var(--rq-cyan)) drop-shadow(-2px 0 0 var(--rq-cyan)) drop-shadow(0 2px 0 var(--rq-cyan)) drop-shadow(0 -2px 0 var(--rq-cyan));
  }
}
@media (forced-colors: active) {
  :is([data-lead], .story-row, .story-card, .tl-item):has(.story-title a:focus-visible) { outline: 2px solid CanvasText; outline-offset: 3px; }
}

/* Arabic: stories in Arabic use the site's Arabic face and leading; Arabic labels are never set in the mono face
   (its word space is wider than DIN's), as on the homepage */
.page-news :is(.story-title, .story-excerpt, .story-row-body, .lead-story, .story-card, .tl-body, .tk-title):lang(ar) { font-family: 'DIN Next Arabic', 'IBM Plex Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; }
.page-news .story-title:lang(ar) { line-height: 1.55; letter-spacing: 0; }
.page-news .story-excerpt:lang(ar) { line-height: 1.75; }
.page-news :is(.story-source, .story-time, .story-kicker, .story-also):lang(ar),
html[lang="ar"] .page-news :is(.news-stamp, .spec-caption, .state-kicker, .alerts-host) {
  font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none;
}
html[lang="ar"] .page-news .spec-caption { color: var(--fg-3); }
html[lang="ar"] .page-news .state-kicker { color: var(--accent-text); }
/* English stories on the Arabic page: DIN Next Arabic's Latin, at Latin line heights */
html[lang="ar"] .story-title:lang(en) { line-height: 1.35; }
html[lang="ar"] .story-card--feature .story-title:lang(en) { line-height: 1.25; }
html[lang="ar"] .lead-story .story-title:lang(en) { line-height: 1.2; }

/* Arrows follow the story's own direction */
.page-news .icon-arrow:not(.icon-arrow--down):dir(ltr) { scale: none; }
.page-news .icon-arrow:not(.icon-arrow--down):dir(rtl) { scale: -1 1; }

/* Badges: the site's .tag. LY is the one filled accent; MENA a tint; exploited a frost plate; vendor an outline */
.tag--libya { color: var(--rq-night); background: var(--rq-cyan); }
.tag--mena { color: var(--rq-cyan); background: var(--rq-cyan-edge); }
.tag--kev { color: var(--rq-night); background: var(--rq-frost); }
.tag--vendor { color: var(--fg-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag:lang(ar) { font-family: var(--font-sans); letter-spacing: 0; }

/* ---------------------------------------------------------------- Regional: lead story + list + LibyaCERT panel */
.regional-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s-6) var(--s-7);
  align-items: start;
  margin-top: var(--s-7);
}
.regional-main { display: grid; gap: var(--s-5); min-width: 0; }
.news-note { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); padding-block: var(--s-3); border-bottom: 1px solid var(--rq-cyan-edge); }
[data-lead]:empty { display: none; }
/* A soft cyan glow behind the lead, from its far corner */
[data-lead] { position: relative; }
[data-lead]::before {
  content: "";
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -8%;
  width: 55%;
  height: 110%;
  background: radial-gradient(closest-side, rgba(var(--rq-cyan-rgb), .18), transparent);
  filter: blur(28px);
  pointer-events: none;
}

/* Two panel insets only: large (lead, state panels) and standard (cards, LibyaCERT panel) */
.lead-story {
  --cut: var(--cut-xl);
  --frame: rgba(var(--rq-cyan-rgb), .55);
  background-image: radial-gradient(90% 120% at 100% 0%, rgba(var(--rq-cyan-rgb), .12), transparent 55%);
  --grid-x: 100%;   /* the grid only in the far corner, clear of the headline */
  --grid-y: 0%;
  --grid-w: 34%;
  --grid-h: 70%;
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-height: 320px;
  padding: clamp(var(--s-5), 3.6vw, var(--s-7));
  background-color: var(--rq-night-2);
  transition: background-color var(--t-med) var(--ease);
}
.lead-story:dir(rtl) { background-image: radial-gradient(90% 120% at 0% 0%, rgba(var(--rq-cyan-rgb), .12), transparent 55%); }
.lead-story .story-kicker { display: inline-flex; align-items: center; gap: var(--s-3); }
.lead-story > * { position: static; }   /* undo .cut-frame > * so the headline link can cover the panel */
.lead-story .story-title {
  max-width: 26em;
  font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lead-story .story-title:lang(ar) { line-height: 1.45; letter-spacing: 0; }
.lead-story .story-excerpt { max-width: 36em; font-size: 1.0625rem; line-height: 1.6; }
.lead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-3); }
.lead-foot .link { position: relative; z-index: 2; pointer-events: none; }   /* the headline link handles the click */
.lead-story:hover { background-color: var(--rq-steel); }
.lead-story:hover .link { background-size: calc(100% - 24px) 1px; }
.lead-story:hover .link .icon-arrow { transform: translateX(3px); }

/* Rows sit on the container edge: the hover tint bleeds into the gutter instead of moving the text */
.story-list { border-top: 1px solid var(--rq-cyan-edge); }
.story-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s-4);
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-3);
  margin-inline: calc(-1 * var(--s-3));
  border-bottom: 1px solid var(--rq-cyan-edge);
  transition: background-color var(--t-fast) var(--ease);
}
.story-row-body { display: grid; gap: var(--s-2); min-width: 0; }
.story-row .story-title { font-size: 1.0625rem; line-height: 1.4; }
.story-row .story-excerpt { max-width: 36em; font-size: var(--fs-small); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-row .story-excerpt:lang(ar) { font-size: .9375rem; line-height: 1.75; }
.story-row > .icon-arrow { align-self: center; color: var(--rq-cyan); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.story-row:hover { background: rgba(var(--rq-cyan-rgb), .06); }
.story-row:hover > .icon-arrow { opacity: 1; transform: none; }
.story-row:hover .story-title { color: var(--rq-white); }

.alerts-panel {
  --cut: var(--cut-l);
  --frame: var(--line-strong);
  position: sticky;
  top: calc(var(--header-h) + 76px + var(--s-5));
  display: grid;
  gap: var(--s-4);
  padding: clamp(var(--s-5), 2.6vw, var(--s-6));
  background: var(--rq-night-2);
}
.alerts-copy-block, .alerts-action { display: grid; gap: var(--s-4); align-content: start; }
.alerts-title { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -.012em; color: var(--fg); }
html[lang="ar"] .alerts-title { font-size: 1.25rem; line-height: 1.5; letter-spacing: 0; }
.alerts-copy { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
.alerts-panel .link { justify-self: start; }
.alerts-host { padding-top: var(--s-3); border-top: 1px solid var(--line); }
/* NISSA's own latest posts: official updates, dated, apart from the news */
.official-updates { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.official-head { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
html[lang="ar"] .official-head { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }
.official-list li { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-bottom: 1px solid var(--rq-cyan-edge); }
.official-list li:last-child { border-bottom: 0; }
.official-list a { font-size: var(--fs-small); line-height: 1.5; color: var(--fg); text-wrap: pretty; transition: color var(--t-fast) var(--ease); }
.official-list a:hover { color: var(--rq-cyan); }
.official-list li:lang(ar) a { font-family: 'DIN Next Arabic', 'IBM Plex Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; line-height: 1.7; }
.official-date { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.official-list li:lang(ar) .official-date { font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: 0; }

/* No regional stories, or the Global filter: the band collapses to the LibyaCERT panel, laid out across */
.news-regional:is([data-mode="empty"], [data-mode="panel-only"]) .regional-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.news-regional:is([data-mode="empty"], [data-mode="panel-only"]) .alerts-panel {
  position: static;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  column-gap: var(--s-7);
  align-items: end;
}
.news-regional[data-mode="empty"] :is([data-lead], .story-list) { display: none; }
.news-regional[data-mode="panel-only"] :is(.news-regional-head, .regional-main) { display: none; }
.news-regional[data-mode="panel-only"] { padding-block: var(--s-7); }
.news-regional[data-mode="panel-only"] .regional-grid { margin-top: 0; }

/* ---------------------------------------------------------------- Global: two leads, then the grid */
.story-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.story-card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: clamp(var(--s-5), 2.6vw, var(--s-6));
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
/* Border illumination, as on the homepage tiles: the top edge lights on hover */
.story-card::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--rq-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}
.story-card:dir(rtl)::after { transform-origin: right center; }
.story-card:hover { background: var(--rq-steel-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.story-card:hover::after { transform: scaleX(1); }
.story-card .story-title { font-size: var(--fs-h4); line-height: 1.35; }
.story-card .story-excerpt { font-size: .9375rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.story-card .story-excerpt:lang(ar) { line-height: 1.75; }
.story-card--feature { grid-column: span 3; gap: var(--s-4); background: linear-gradient(160deg, var(--rq-steel), var(--rq-night-2) 85%); }
.story-card--feature:hover { background: var(--rq-steel-2); }
.story-card--feature:has(.tag--kev)::after { transform: scaleX(1); box-shadow: 0 0 18px rgba(var(--rq-cyan-rgb), .6); }   /* exploited: the edge stays lit */
.story-card--feature .story-title { font-size: var(--fs-h3); font-weight: 300; line-height: 1.22; letter-spacing: -.012em; }
.story-card--feature .story-title:lang(ar) { font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.story-card--feature .story-excerpt { font-size: var(--fs-body); -webkit-line-clamp: 5; }
.story-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--rq-cyan-edge); }
.story-foot--plain { padding-top: 0; border-top: 0; }
.story-foot .icon-arrow { flex: none; margin-inline-start: auto; color: var(--rq-cyan); transition: transform var(--t-med) var(--ease); }
.story-card:hover .story-foot .icon-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------- Global: the day-by-day timeline
   Day labels stick beside their stories; each story hangs off a cyan rail by its Libya-time clock. */
.timeline { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
.tl-day { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.tl-day-label {
  position: sticky;
  top: calc(var(--header-h) + 76px + var(--s-5));
  display: grid;
  gap: var(--s-2);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--rq-white);
}
.tl-day-date { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--rq-silver); }
html[lang="ar"] .tl-day-label { line-height: 1.4; letter-spacing: 0; }
html[lang="ar"] .tl-day-date { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; }
.tl-list { box-shadow: inset 1px 0 0 var(--rq-cyan-line); }
[dir="rtl"] .tl-list { box-shadow: inset -1px 0 0 var(--rq-cyan-line); }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) var(--s-4);
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rq-cyan-edge);
  transition: background-color var(--t-fast) var(--ease);
}
[dir="rtl"] .tl-item { padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4); }
.tl-item:last-child { border-bottom: 0; }
/* The node on the rail; it lights with the story */
.tl-item::before {
  content: "";
  position: absolute;
  top: calc(var(--s-4) + 5px);
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rq-night);
  box-shadow: inset 0 0 0 1.5px var(--rq-cyan-line);
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
[dir="rtl"] .tl-item::before { left: auto; right: -4px; }
.tl-item:hover { background: linear-gradient(90deg, rgba(var(--rq-cyan-rgb), .08), transparent 70%); }
[dir="rtl"] .tl-item:hover { background: linear-gradient(-90deg, rgba(var(--rq-cyan-rgb), .08), transparent 70%); }
.tl-item:hover::before { background: var(--rq-cyan); box-shadow: 0 0 12px rgba(var(--rq-cyan-rgb), .9); }
.tl-time { padding-top: 2px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--rq-cyan); font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: isolate; }
.tl-body { display: grid; gap: var(--s-2); min-width: 0; }
.tl-item .story-title { font-size: 1.125rem; line-height: 1.4; }
.tl-item .story-excerpt { max-width: 46em; font-size: var(--fs-small); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-item .story-excerpt:lang(ar) { font-size: .9375rem; line-height: 1.75; }
.tl-item > .icon-arrow { align-self: center; color: var(--rq-cyan); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.tl-item:hover > .icon-arrow { opacity: 1; transform: none; }
.tl-item:hover .story-title { color: var(--rq-white); }
.tl-item.skeleton-block { grid-template-columns: minmax(0, 1fr); }
.tl-sk-label { width: 70%; }

.news-more { display: flex; justify-content: center; margin-top: var(--s-7); }

/* ---------------------------------------------------------------- States */
.news-state { padding-block: var(--s-8); }
.state-panel {
  --cut: var(--cut-l);
  --frame: var(--line-strong);
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  max-width: 720px;
  padding: clamp(var(--s-5), 3.6vw, var(--s-7));
  background: var(--rq-night-2);
}
.state-panel .btn { margin-top: var(--s-2); }

/* Skeletons: the same shapes as the stories, a slow pulse (static with reduced motion). --line reads on every surface */
.skeleton-block { pointer-events: none; }
.sk { display: block; height: 12px; background: var(--line); border-radius: var(--radius); animation: rq-pulse 1.6s var(--ease-io) infinite; }
.sk--meta { width: 38%; height: 10px; }
.sk--title { width: 92%; height: 20px; }
.sk--text { width: 100%; }
.sk--short { width: 58%; }
.lead-story .sk--title { height: 32px; }
.story-row.skeleton-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@keyframes rq-pulse { 50% { opacity: .45; } }
.no-js .news-filters, .no-js [data-band] { display: none; }

/* ---------------------------------------------------------------- How this page works (credit + the spec) */
.news-about { padding-block: var(--s-8); box-shadow: inset 0 1px 0 var(--rq-cyan-edge); }
.news-about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-8); align-items: start; }
.news-about-copy { display: grid; gap: var(--s-4); }
.news-about-copy p { max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; }

/* ---------------------------------------------------------------- Motion: first load rises in; reduced motion stills it all */
@media (prefers-reduced-motion: no-preference) {
  .is-entering :is(.lead-story, .story-row, .story-card, .tl-item) { animation: rq-rise 700ms var(--ease) both; animation-delay: calc(var(--n, 0) * 45ms); }
}
@media (prefers-reduced-motion: reduce) {
  .radar-sweep, .blip-halo, .live-dot::after, .kev-ticker-toggle, .tk-item[aria-hidden="true"] { display: none; }
  .blip { animation: none; opacity: .8; }
  .kev-ticker-track { animation: none; }
  .kev-ticker-viewport { overflow-x: auto; scrollbar-width: thin; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .regional-grid { grid-template-columns: minmax(0, 1fr); }
  .alerts-panel { position: relative; top: auto; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-card, .story-card--feature { grid-column: span 1; }
}
@media (max-width: 900px) {
  .news-filters-bar { flex-direction: column; align-items: stretch; gap: var(--s-2); padding-block: var(--s-2) var(--s-4); }
  .news-fields { flex: 1 1 auto; }
  .news-field :is(select, input) { min-height: 44px; }
  .news-band { padding-block: var(--s-7) var(--s-8); }
  .news-regional:is([data-mode="empty"], [data-mode="panel-only"]) .alerts-panel { grid-template-columns: minmax(0, 1fr); }
  .tl-day { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .tl-day-label { position: static; display: flex; align-items: baseline; gap: var(--s-3); font-size: 1.375rem; }
  .news-about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .board { max-width: 640px; }
}
@media (max-width: 640px) {
  .page-news .page-hero { padding-bottom: var(--s-6); }
  .board-body { gap: var(--s-4); }
  .board-cadence { display: none; }
  .stat { padding-block: var(--s-3); }
  .kev-ticker-bar { gap: var(--s-3); }
  .kev-ticker-label { font-size: 0; gap: 0; }   /* the dot alone on a phone; the label stays for screen readers below */
  .tl-item { grid-template-columns: 3rem minmax(0, 1fr); padding-inline-end: var(--s-2); }
  .tl-item > .icon-arrow { display: none; }
  .news-fields { flex-direction: column; }
  .news-field--select { flex: 1 1 auto; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .story-row > .icon-arrow { display: none; }
  .story-row { grid-template-columns: minmax(0, 1fr); }
  .lead-story { min-height: 0; }
  .lead-story .story-title { font-size: 1.5rem; }
}