/* ═══════════ CogniWatch public SPA additive styles ═══════════ */
/* Used only by cogniwatch.dev/ and cogniwatch.dev/staging/. The ops
   dashboard at /app/ uses the base style.css from cogniwatch-v3/ and
   does NOT load this file — so changes here never affect /app/. */

/* ═══════════ UNIFIED PANELS ═══════════ */
.observatory-panel{padding:0;overflow:hidden}
.observatory-panel .hero{margin-bottom:0;gap:0;align-items:stretch}
.observatory-panel .hero-main,
.observatory-panel .globe-card{border:none;border-radius:0;background:transparent;backdrop-filter:none}
.observatory-panel .hero-main{padding:clamp(1.6rem,3.5vw,2.6rem);justify-content:flex-start}
.observatory-panel .globe-card{padding:clamp(1rem,2.5vw,1.6rem) clamp(1.2rem,2.5vw,1.6rem)}
.newsroom-panel{padding:clamp(1.6rem,3.5vw,2.4rem)}

/* ═══════════ KICKER + MISSION LEDE ═══════════ */
/* Upgraded kicker: animated pulsing dot (not a static bullet character)
   so the very first line of the page literally pulses — sets the tone. */
.kicker{position:relative;display:inline-flex;width:fit-content;align-items:center;gap:.55rem;
  font:600 .64rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding:.4rem .85rem .4rem .8rem;border:1px solid var(--border);border-radius:99px;background:rgba(8,13,21,.5)}
.kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:kickerPulse 1.6s ease-out infinite}
@keyframes kickerPulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* Mission lede — single sentence with the antagonist in it.
   Bigger than the eyebrow, smaller than the H1. The em clause gets
   cyan accent so the stakes read instantly. */
.mission-lede{font-family:var(--disp);font-weight:500;font-size:clamp(1rem,1.55vw,1.16rem);
  line-height:1.45;letter-spacing:-.01em;color:var(--text);max-width:58ch;margin:1.1rem 0 1.4rem}
.mission-lede em{font-style:normal;color:var(--accent-2);font-weight:600}

/* ═══════════ HERO H1 + PUNCH ═══════════ */
/* Restructured: the stat is one line, "Most are wide open." is its own
   line in a heavier weight so the actual hook lands as a headline,
   not as an afterthought. */
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.55rem,3vw,2.3rem);
  line-height:1.14;letter-spacing:-.03em;margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:transparent;
  background:linear-gradient(90deg,var(--accent),#7dd3fc);-webkit-background-clip:text;background-clip:text;
  font-variant-numeric:tabular-nums}
.h1-shout{display:block;color:var(--red);font-weight:700;font-style:italic;font-size:1.04em;
  text-shadow:0 0 24px rgba(251,90,110,.25);margin-top:.1em}

/* Hero stats row — replaces the .hero-badges style with cleaner separator-aligned stats.
   Each stat: tiny mono label on top, big value below, tiny unit suffix.
   Hover lifts the value slightly to signal interactivity. */
.hero-stats{display:flex;gap:1.4rem;flex-wrap:wrap;padding-top:1.1rem;
  border-top:1px solid var(--border);margin-top:.4rem}
.stat{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.stat-l{font:500 .6rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stat-v{display:flex;align-items:baseline;gap:.3rem;font-family:var(--disp);font-weight:700;
  font-size:1.1rem;color:var(--text);letter-spacing:-.02em;line-height:1}
.stat-v em{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.stat-u{font:500 .68rem var(--mono);color:var(--muted);letter-spacing:.02em;text-transform:lowercase}
.live-stat .stat-v em{color:var(--green)}
.live-stat.is-stale .stat-v em{color:var(--amber)}
.live-stat.is-offline .stat-v em{color:var(--red)}

/* ═══════════ "MOST ARE WIDE OPEN" PUNCH ═══════════ */
/* This is the hook. It must be the heaviest, loudest, most
   eye-catching line on the page — not a footnote under the headline.
   Heavy weight, big size, red glow, slight italic for menace. */
.h1-shout{display:block;color:var(--red);font-weight:900;font-style:italic;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:.98;
  text-shadow:0 0 40px rgba(251,90,110,.45),0 0 12px rgba(251,90,110,.3);
  margin-top:.3em;letter-spacing:-.04em}
.h1-shout::before{content:'⚠';display:inline-block;margin-right:.35em;font-size:.6em;
  vertical-align:.12em;opacity:.95}

/* Shrink the headline one step so the shout wins the hierarchy. */
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.18;letter-spacing:-.03em;margin-bottom:.4rem}

/* ═══════════ LIVE DETECTION TICKER (full-width strip) ═══════════ */
/* Lives below the hero as a standalone strip — full width, rows visible
   all at once. Streams from /api/events/stream. Rows show framework +
   confidence only, no IPs. New rows flash cyan briefly. */
.ticker-card{display:flex;flex-direction:column;padding:clamp(1rem,2.5vw,1.6rem);
  gap:.85rem;background:linear-gradient(180deg,rgba(45,212,238,.025),transparent 30%)}
.live-chip{display:inline-flex;align-items:center;gap:.4rem;font:500 .62rem var(--mono);
  color:var(--green);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(52,211,153,.25);border-radius:99px;padding:.2rem .55rem;background:rgba(8,13,21,.5)}
.live-pulse{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(52,211,153,.5);animation:kickerPulse 1.6s ease-out infinite}
.live-chip>i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}

/* Ticker header: title + KPI tiles + legend. Wraps gracefully on narrow. */
.ticker-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.ticker-head .card-title{margin-bottom:0}

/* Severity legend — small color chips with labels so users know what
   the bar colors mean. */
.ticker-legend{display:flex;align-items:center;gap:.85rem;flex:1 1 100%;
  font:500 .55rem var(--mono);color:var(--muted);letter-spacing:.12em;text-transform:uppercase;
  padding-top:.4rem}
.ticker-legend .leg-sev{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:.35rem;vertical-align:-1px}
.ticker-legend .leg-low{background:linear-gradient(90deg,#34d399,#67e8f9)}
.ticker-legend .leg-med{background:linear-gradient(90deg,#a78bfa,#67e8f9)}
.ticker-legend .leg-high{background:linear-gradient(90deg,#fb5a6e,#fbbf24)}
.ticker-legend .leg-crit{background:linear-gradient(90deg,#fb5a6e,#ff8a98)}

/* Three KPI tiles inside the ticker header: seen · high risk · /min. */
.ticker-stats{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:.5rem;flex:0 0 auto}
.ticker-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:.45rem .6rem;border:1px solid var(--border);border-radius:9px;background:rgba(8,13,21,.4);
  min-width:0;overflow:hidden}
.ts-num{font:700 1.05rem var(--mono);color:var(--accent);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.ts-lab{font:500 .56rem var(--mono);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

/* The ticker itself — monospace rows in a grid: time | framework | severity-bar | conf%.
   No host/IP — moving away from showing IPs in the public ticker. */
.ticker{flex:1 1 auto;display:grid;grid-template-columns:1fr;
  gap:.3rem;min-height:0;padding:.25rem 0}
.ticker-row{display:grid;grid-template-columns:96px 1fr 140px 70px;gap:.7rem;align-items:center;
  padding:.5rem .75rem;border-radius:8px;border:1px solid transparent;background:rgba(8,13,21,.4);
  font-family:var(--mono);font-size:.78rem;line-height:1.2;color:var(--text-2);flex-shrink:0;
  animation:rowIn .35s ease-out}
.ticker-row.is-new{background:rgba(45,212,238,.14);border-color:rgba(45,212,238,.5);
  animation:rowFlash 1.6s ease-out}
.ticker-row.is-high{border-left:3px solid var(--red)}
.ticker-row.is-medium{border-left:3px solid var(--amber)}
.ticker-row.is-low{border-left:3px solid var(--green)}
.tr-time{color:var(--muted);font-size:.72rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tr-frame{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);
  text-transform:lowercase;font-weight:600;font-size:.85rem}
.tr-frame::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.tr-bar{position:relative;height:6px;border-radius:3px;background:rgba(56,80,106,.25);overflow:hidden}
.tr-bar>i{display:block;height:100%;border-radius:3px;transition:width .4s ease-out}
.tr-bar>i.is-critical{background:linear-gradient(90deg,#fb5a6e,#ff8a98)}
.tr-bar>i.is-high{background:linear-gradient(90deg,#fb5a6e,#fbbf24)}
.tr-bar>i.is-medium{background:linear-gradient(90deg,#a78bfa,#67e8f9)}
.tr-bar>i.is-low{background:linear-gradient(90deg,#34d399,#67e8f9)}
.tr-conf{font-weight:700;font-variant-numeric:tabular-nums;font-size:.85rem;text-align:right}
.tr-conf.hi{color:var(--red)}
.tr-conf.md{color:var(--amber)}
.tr-conf.lo{color:var(--green)}

.ticker-empty{padding:1.2rem .8rem;text-align:center;color:var(--muted);font-size:.85rem;
  border:1px dashed var(--border);border-radius:8px;background:rgba(8,13,21,.3);grid-column:1/-1}

@keyframes rowIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes rowFlash{
  0%{background:rgba(45,212,238,.32);border-color:rgba(45,212,238,.8)}
  60%{background:rgba(45,212,238,.13);border-color:rgba(45,212,238,.45)}
  100%{background:rgba(8,13,21,.35);border-color:transparent}
}

/* ═══════════ HOW IT WORKS STRIP ═══════════ */
/* A 4-step horizontal ribbon that makes the mission operational.
   "Discover → Probe → Score → Report" — so even a non-security person
   knows exactly what CogniWatch does. Equal columns + tiny arrow columns. */
.how-card{padding:clamp(1.2rem,3vw,1.8rem) clamp(1.4rem,3vw,2.2rem)}
.how-strip{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
  gap:0;padding:0;align-items:start}
.how-step{display:flex;flex-direction:column;gap:.4rem;padding:0 1.2rem;
  border-left:2px solid var(--border);min-width:0}
.how-step:first-child{border-left:none;padding-left:0}
.how-num{font:700 .65rem var(--mono);color:var(--accent);letter-spacing:.18em}
.how-name{font:600 1.05rem var(--disp);color:var(--text);letter-spacing:-.02em;line-height:1.2}
.how-desc{font:400 .8rem 'Inter';color:var(--text-2);line-height:1.5}
.how-arrow{color:var(--muted);font-size:1.1rem;opacity:.55;align-self:center;
  font-family:var(--mono);text-align:center;padding-top:.5rem}
@media(max-width:1080px){
  .how-strip{grid-template-columns:1fr 1fr;gap:1.4rem;padding:1rem 0}
  .how-arrow{display:none}
  .how-step{padding:0;border-left:none}
}
@media(max-width:560px){
  .how-strip{grid-template-columns:1fr;gap:.8rem}
}

/* ═══════════ DIVIDER + SECTION RHYTHM ═══════════ */
.section-divider{display:flex;align-items:center;gap:1rem;margin:1.6rem 0 .9rem;color:var(--muted)}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider-label{font:600 .62rem var(--mono);letter-spacing:.22em;text-transform:uppercase;padding:0 .6rem}

/* ═══════════ RESPONSIVE — stack the hero on narrow screens, hide ticker bar ═══════════ */
@media(max-width:960px){
  .observatory-panel .hero{grid-template-columns:1fr}
  .observatory-panel .hero-main,.observatory-panel .globe-card{padding:1.2rem}
  .observatory-panel .globe-card{border-top:1px solid var(--border)}
  .ticker-row{grid-template-columns:72px 1fr 100px 60px;font-size:.7rem;gap:.6rem}
  .tr-frame{font-size:.78rem}
}
@media(max-width:680px){
  .hero-stats{gap:1rem}
  .stat-v{font-size:.95rem}
  .ticker-stats{grid-template-columns:repeat(3,1fr)}
  .ticker-row{grid-template-columns:64px 1fr 70px;font-size:.66rem;gap:.4rem;padding:.4rem .5rem}
  .tr-bar{display:none}   /* hide severity bar on tiny screens */
}

/* ═══════════ HERO MISSION COPY (replaces red "Most are wide open" shout) ═══════════ */
.hero-mission{
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(.94rem,1.35vw,1.04rem);
  line-height:1.62;
  color:var(--text);
  max-width:62ch;
  margin:0 0 1.1rem;
}
.hero-mission-sub{
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(.86rem,1.18vw,.96rem);
  line-height:1.6;
  color:var(--muted);
  max-width:62ch;
  margin:0 0 1.4rem;
}
/* When the shout H1 is gone, give the hero stats a bit more top breathing room. */
.observatory-panel .hero-main h1 + .hero-mission{margin-top:.25rem}
.observatory-panel .hero-stats{margin-top:.6rem}