/* ==========================================================================
   NAHDI: THE KINGDOM'S HEALTH PULSE — page styles (extends tokens.css/app.css)
   ========================================================================== */
.back-link { color: var(--ink-2); font-size: 0.62rem; transition: color var(--dur-fast); }
.back-link:hover { color: var(--green-bri); }

/* cross-page nav (all pages) */
.cs-nav { display: flex; gap: 0.2rem; justify-content: center; }
.cs-nav a { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  padding: 0.4rem 0.7rem; border-radius: 100px; transition: color var(--dur-fast), background var(--dur-fast); }
.cs-nav a:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.cs-nav a.active { color: #06120e; background: var(--green-bri); }
@media (max-width: 620px) { .cs-nav a { padding: 0.35rem 0.45rem; font-size: 0.5rem; } }

/* ---------- Hero ---------- */
.pulse-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  gap: 2rem; max-width: var(--maxw); margin: 0 auto; padding: 6rem clamp(1.1rem, 4vw, 2.6rem) 4rem; }
@media (max-width: 900px) { .pulse-hero { grid-template-columns: 1fr; padding-top: 5rem; } }
.pulse-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0.8rem 0 1rem; }
.pulse-title .l1 { display: block; color: var(--ink-2); font-weight: 500; font-size: 0.42em; letter-spacing: 0.02em; }
.pulse-title .l2 { display: block; background: linear-gradient(100deg, var(--mint), var(--cyan) 60%, var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pulse-title em { font-style: normal; }
.pulse-sub { font-size: var(--text-lead); color: var(--ink); font-weight: 500; margin: 0 0 1.8rem; }
.pulse-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1.8rem; }
@media (max-width: 520px) { .pulse-kpis { grid-template-columns: 1fr 1fr; } }
.pk { background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; }
.pk-v { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--ink); line-height: 1.15; }
.pk-k { display: block; font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-top: 0.35rem; }

/* ---------- KSA map ---------- */
.ksa-wrap { position: relative; }
.ksa-svg { width: 100%; height: auto; overflow: visible; }
.ksa-outline { fill: rgba(16,70,82,0.32); stroke: var(--line-2); stroke-width: 0.4; }
.ksa-dot { fill: var(--ink-4); transition: fill var(--dur-fast), r var(--dur-fast); }
.ksa-node { cursor: pointer; }
.ksa-node:hover .ksa-dot, .ksa-node:focus .ksa-dot { fill: var(--cyan); }
.ksa-node.has-signal .ksa-dot { fill: var(--green-bri); }
.ksa-pulse { fill: var(--green-bri); opacity: 0.5; transform-origin: center; animation: ksaPulse 2.6s ease-out infinite; }
@keyframes ksaPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3.2); opacity: 0; } }
.ksa-label { font-family: var(--font-mono); font-size: 1.7px; fill: var(--ink-3); text-anchor: middle; pointer-events: none; }
.ksa-node:hover .ksa-label, .ksa-node.has-signal .ksa-label { fill: var(--ink); }
.ksa-tooltip { position: absolute; transform: translate(-50%, -100%); background: rgba(6,15,18,0.96); border: 1px solid var(--line-2); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.72rem; color: var(--ink); pointer-events: none; z-index: 5; max-width: 240px; }
.ksa-tooltip b { display: block; margin-bottom: 0.2rem; color: var(--green-bri); }
.tip-none { color: var(--ink-4); } .tip-sig { color: var(--ink-2); }
.ksa-legend { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ksa-cov { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.ksa-disc { font-size: 0.7rem; color: var(--ink-4); }
.map-full { max-width: 720px; margin: 1.4rem auto 0; }

/* ---------- Data source status ---------- */
.ds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 900px) { .ds-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ds-grid { grid-template-columns: 1fr; } }
.ds-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: linear-gradient(165deg, var(--surface-2), var(--surface)); }
.ds-on { border-left: 3px solid var(--green-bri); } .ds-off { border-left: 3px solid var(--orange); border-style: dashed; }
.ds-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.ds-dot { width: 9px; height: 9px; border-radius: 50%; }
.ds-on .ds-dot { background: var(--green-bri); box-shadow: 0 0 10px var(--green-bri); } .ds-off .ds-dot { background: var(--orange); }
.ds-state { font-size: 0.54rem; letter-spacing: 0.1em; } .ds-on .ds-state { color: var(--green-bri); } .ds-off .ds-state { color: var(--orange); }
.ds-label { font-weight: 500; font-size: 0.9rem; color: var(--ink); margin: 0 0 0.6rem; }
.ds-req { font-size: 0.76rem; color: var(--ink-3); margin: 0; }
.ds-req .mono { font-size: 0.5rem; color: var(--ink-4); letter-spacing: 0.1em; margin-right: 0.3rem; }
.ds-live .mono { color: var(--green-bri); }

/* ---------- Languages detected ---------- */
.lang-bar { margin: 0.4rem 0 1.4rem; }
.lang-title { font-size: 0.56rem; letter-spacing: 0.1em; color: var(--ink-4); display: block; margin-bottom: 0.5rem; }
.lang-track { display: flex; height: 30px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.lang-seg { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.62rem; color: #04160f; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; }
.lang-ar { background: linear-gradient(90deg, var(--green), var(--green-bri)); }
.lang-en { background: linear-gradient(90deg, var(--cyan), var(--blue)); color: var(--ink); }
.lang-note { font-size: 0.74rem; color: var(--ink-3); margin: 0.6rem 0 0; max-width: 80ch; }

/* ---------- Content sample cards ---------- */
.pulse-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 1.4rem; }
.pf-btn { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 100px; border: 1px solid var(--line-2); color: var(--ink-3); cursor: pointer; transition: all var(--dur-fast); }
.pf-btn:hover { color: var(--ink); } .pf-btn.active { background: var(--green-bri); color: #06120e; border-color: transparent; }
.xsamples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 950px) { .xsamples-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .xsamples-grid { grid-template-columns: 1fr; } }
.xcard { position: relative; background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; }
.xc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.7rem; }
.xc-handle { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.xc-verif { color: var(--cyan); font-size: 0.75rem; }
.xc-name { display: block; font-size: 0.66rem; color: var(--ink-4); }
.xc-win { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 100px; flex: none; }
.win-in { color: var(--green-bri); border: 1px solid rgba(22,199,132,0.34); } .win-hist { color: var(--ink-4); border: 1px solid var(--line-2); }
.xc-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.8rem; }
.xc-tag { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.18rem 0.45rem; border-radius: 100px; border: 1px solid var(--line-2); color: var(--ink-3); }
.xc-tag.sent-positive { color: var(--green-bri); border-color: rgba(22,199,132,0.34); }
.xc-tag.sent-negative { color: var(--red); border-color: rgba(236,28,36,0.34); }
.xc-tag.sent-neutral { color: var(--cyan); border-color: rgba(38,169,224,0.3); }
.xc-tag.rel { color: var(--ink-2); }
.xc-text { font-size: 0.86rem; color: var(--ink); line-height: 1.55; margin: 0 0 0.6rem; }
.xc-toggle { align-self: flex-start; background: none; border: none; color: var(--cyan); font-size: 0.56rem; letter-spacing: 0.06em; cursor: pointer; padding: 0 0 0.6rem; }
.xc-geo { font-size: 0.56rem; color: var(--ink-3); margin: 0 0 0.5rem; }
.xc-why { font-size: 0.74rem; color: var(--ink-3); font-style: italic; margin: 0 0 0.9rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.xc-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: auto; flex-wrap: wrap; }
.xc-metrics { font-size: 0.6rem; color: var(--ink-3); }
.xc-src { font-size: 0.58rem; color: var(--green-bri); }
.xc-date { position: absolute; bottom: 1.2rem; right: 1.2rem; font-size: 0.5rem; color: var(--ink-4); display: none; }

/* ---------- X reach ---------- */
.xreach-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.2rem; }
.xr-row { display: grid; grid-template-columns: 110px 180px 1fr 80px; align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
@media (max-width: 720px) { .xr-row { grid-template-columns: 90px 1fr 60px; } .xr-handle { display: none; } }
.xr-lead { border-color: var(--cyan); background: linear-gradient(90deg, rgba(38,169,224,0.1), var(--surface)); }
.xr-none { opacity: 0.55; }
.xr-brand { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.xr-v { color: var(--cyan); font-size: 0.7rem; }
.xr-handle { font-size: 0.66rem; color: var(--ink-4); }
.xr-bar { height: 8px; border-radius: 100px; background: rgba(255,255,255,0.05); overflow: hidden; }
.xr-bar span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.xr-lead .xr-bar span { background: linear-gradient(90deg, var(--green), var(--green-bri)); }
.xr-val { font-size: 0.78rem; color: var(--ink-2); text-align: right; }

/* ---------- Entity rules ---------- */
.term-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.qt { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink-2); background: rgba(255,255,255,0.02); }
.rule-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.4rem; }
@media (max-width: 620px) { .rule-cols { grid-template-columns: 1fr; } }
.rc h4 { font-size: 0.56rem; letter-spacing: 0.1em; margin: 0 0 0.6rem; }
.rc-in h4 { color: var(--green-bri); } .rc-ex h4 { color: var(--orange); }
.rc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.rc li { font-size: 0.78rem; color: var(--ink-2); padding-left: 0.9rem; position: relative; }
.rc li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; }
.rc-in li::before { background: var(--green-bri); } .rc-ex li::before { background: var(--orange); }

/* ---------- Brand Health ---------- */
.bh-score { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.bh-kicker { font-size: 0.6rem; color: var(--r1); }
.bh-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 5vw, 5rem); color: var(--ink-3); line-height: 1; margin: 0.6rem 0; }
.bh-outof { font-size: 0.3em; color: var(--ink-4); }
.bh-status { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 1rem; }
.bh-conf { display: flex; justify-content: space-between; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.bh-conf .mono { font-size: 0.56rem; color: var(--ink-4); } .bh-conf-v { font-size: 0.8rem; color: var(--orange); }
.bh-components { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }
.bhc-top { display: flex; justify-content: space-between; align-items: baseline; }
.bhc-label { font-size: 0.86rem; color: var(--ink); } .bhc-w { font-size: 0.7rem; color: var(--ink-2); }
.bhc-bar { height: 5px; border-radius: 100px; background: rgba(255,255,255,0.05); overflow: hidden; margin: 0.35rem 0 0.25rem; }
.bhc-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bri)); border-radius: 100px; }
.bhc-status { font-size: 0.6rem; } .bhc-status.wait { color: var(--ink-4); } .bhc-status.part { color: var(--cyan); }

/* ---------- Geo signals ---------- */
.geo-signals { margin-top: 1.6rem; }
.gs-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.gs-item { display: grid; grid-template-columns: 130px 1fr 1.4fr auto; gap: 0.8rem; align-items: center; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
@media (max-width: 620px) { .gs-item { grid-template-columns: 1fr 1fr; } }
.gs-region { font-size: 0.6rem; color: var(--cyan); } .gs-city { font-weight: 600; color: var(--ink); font-size: 0.86rem; }
.gs-type { font-size: 0.8rem; color: var(--ink-2); } .gs-conf { font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-4); text-align: right; }

/* ---------- What the data means ---------- */
.means-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 860px) { .means-grid { grid-template-columns: 1fr; } }
.means-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; border-top: 3px solid var(--mc); background: linear-gradient(165deg, var(--surface-2), var(--surface)); }
.means-shows { --mc: var(--green-bri); } .means-interp { --mc: var(--cyan); } .means-cannot { --mc: var(--orange); }
.means-col h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.9rem; color: var(--mc); }
.means-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.means-col li { font-size: 0.84rem; color: var(--ink-2); padding-left: 1rem; position: relative; }
.means-col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--mc); }

/* ---------- Online presence ---------- */
.presence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: 1.2rem; }
@media (max-width: 900px) { .presence-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .presence-grid { grid-template-columns: 1fr; } }
.pres-card { display: flex; flex-direction: column; gap: 0.3rem; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; background: var(--surface); transition: all var(--dur-fast); }
.pres-card:hover { border-color: var(--purple); transform: translateY(-3px); }
.pres-top { display: flex; justify-content: space-between; align-items: baseline; }
.pres-plat { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.pres-focus { font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.pres-handle { font-size: 0.8rem; color: var(--ink-2); } .pres-role { font-size: 0.72rem; color: var(--ink-4); }
.pres-ver { font-size: 0.56rem; color: var(--green-bri); margin-top: 0.3rem; }

/* ---------- Methodology ---------- */
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 1.2rem; }
@media (max-width: 760px) { .method-grid { grid-template-columns: 1fr; } }
.method-card { border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--surface); }
.method-k { font-size: 0.56rem; letter-spacing: 0.1em; color: var(--r5); display: block; margin-bottom: 0.4rem; }
.method-v { font-size: 0.82rem; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* ---------- Main-page case-study card (injected on index.html) ---------- */
.case-studies { max-width: var(--maxw); margin: 0 auto; padding: var(--space-region) clamp(1.1rem, 4vw, 2.6rem) 0; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-card { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 2rem; min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(150deg, rgba(16,70,82,0.5), rgba(11,30,35,0.7)); transition: transform var(--dur), border-color var(--dur); }
.cs-card:hover { transform: translateY(-5px); border-color: var(--cyan); }
.cs-card .cs-cat { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.cs-card h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); margin: 0.5rem 0 0.5rem; }
.cs-card p { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 1.2rem; max-width: 42ch; }
.cs-cta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-bri); }
.cs-map { position: absolute; top: 1.5rem; right: 1.5rem; width: 130px; opacity: 0.5; pointer-events: none; }
.cs-card.cs-current { background: linear-gradient(150deg, rgba(15,42,48,0.7), rgba(11,30,35,0.7)); }
.cs-card.cs-current .cs-cat { color: var(--green-bri); }

@media (prefers-reduced-motion: reduce) { .ksa-pulse { animation: none; } }