/* Campania strike monitor — osint.nelsonstack.com */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, serif;

  --color-bg: #f6f5f1;
  --color-panel: #ffffff;
  --color-fg: #1d1c1a;
  --color-fg-muted: #6b675f;
  --color-border-line: #e3e0d8;
  --color-ok: #1f7a4d;
  --color-warn: #a86400;
  --color-bad: #c42b1c;

  --series-1: #2f62c9;
  --series-2: #7d5bd0;
  --series-3: #e0592a;
  --series-4: #c98a10;
  --series-5: #1f8a7a;
  --series-6: #b8487c;
  --series-7: #5f7a2a;
  --series-8: #7a6a58;

  --cds-chart-muted: #c5c1b7;
  --cds-chart-status-critical: #c42b1c;
  --cds-chart-grid: #ebe8e1;
  --cds-chart-axis: #c9c5bb;
  --cds-chart-reference: #8c877c;
  --cds-surface-popover: #ffffff;
  --cds-border: #dcd8ce;
  --cds-shadow-popover: 0 6px 24px rgba(30, 25, 15, .12), 0 1px 3px rgba(30, 25, 15, .08);
  --cds-text-secondary: #6b675f;
  --skeleton: #ebe8e1;

  --cds-font-size-caption: .8125rem;
  --cds-font-size-body: .9375rem;
  --cds-font-size-heading: 1.0625rem;
  --cds-font-size-title: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --cds-font-weight-medium: 550;

  --cds-gap-xs: .25rem;
  --cds-gap-sm: .5rem;
  --cds-gap-md: 1rem;
  --cds-gap-lg: 1.5rem;
  --cds-gap-xl: 2.5rem;
  --cds-pad-xs: .25rem;
  --cds-pad-sm: .5rem;
  --cds-pad-lg: 1.25rem;
  --cds-radius: 10px;
  --cds-dur-slow: 420ms;
  --cds-ease-out: cubic-bezier(.2, .8, .2, 1);

  --gutter: clamp(16px, 4vw, 48px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #121314;
    --color-panel: #1b1c1e;
    --color-fg: #ecebe7;
    --color-fg-muted: #9d9a93;
    --color-border-line: #2c2d30;
    --color-ok: #4cc38a;
    --color-warn: #e6a740;
    --color-bad: #ff6b5c;

    --series-1: #6b97f0;
    --series-2: #a68cf0;
    --series-3: #ff7a45;
    --series-4: #e8b23c;
    --series-5: #3fbfa8;
    --series-6: #e07aa8;
    --series-7: #9cbf5a;
    --series-8: #a8998a;

    --cds-chart-muted: #4a4b4f;
    --cds-chart-status-critical: #ff5a48;
    --cds-chart-grid: #26272a;
    --cds-chart-axis: #3a3b3f;
    --cds-chart-reference: #8a8780;
    --cds-surface-popover: #232427;
    --cds-border: #34353a;
    --cds-shadow-popover: 0 8px 28px rgba(0, 0, 0, .5);
    --cds-text-secondary: #9d9a93;
    --skeleton: #26272a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--cds-font-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

.site-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cds-gap-md);
  padding: .75rem var(--gutter);
  border-bottom: 1px solid var(--color-border-line);
  font-size: var(--cds-font-size-caption);
  color: var(--color-fg-muted);
}
.site-bar .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-fg); text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.site-bar .brand svg { width: 18px; height: 18px; }
.site-bar .tag { white-space: nowrap; }

#dash-root { padding: var(--cds-gap-lg) var(--gutter) var(--cds-gap-xl); max-width: 1400px; margin-inline: auto; }

.site-foot {
  max-width: 1400px; margin: 0 auto; padding: var(--cds-gap-lg) var(--gutter) var(--cds-gap-xl);
  border-top: 1px solid var(--color-border-line);
  color: var(--color-fg-muted); font-size: var(--cds-font-size-caption);
}
.site-foot p { margin: 0 0 var(--cds-gap-sm); max-width: 70ch; }

/* Loading placeholders */
.dash-skeleton { color: transparent !important; position: relative; }
.dash-skeleton:empty, b.dash-skeleton, .cs-num.dash-skeleton, .cs-sub.dash-skeleton, p.dash-skeleton { display: inline-block; min-width: 3ch; background: var(--skeleton); border-radius: 6px; }
p.dash-skeleton { display: block; min-height: 1.2em; }
.cs-chart.dash-skeleton, .cs-map.dash-skeleton, .cs-bars.dash-skeleton { display: block; background: var(--skeleton); border-radius: var(--cds-radius); }
.cs-ticker.dash-skeleton, .cs-watch.dash-skeleton { display: block; min-height: 1.6rem; background: var(--skeleton); border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .dash-skeleton { animation: skel 1.4s ease-in-out infinite; }
  @keyframes skel { 50% { opacity: .55; } }
}

.cs-stamp { margin: 0 0 var(--cds-gap-sm); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.cs-stamp.cs-stale { color: var(--color-warn); font-weight: var(--cds-font-weight-medium); }
.cs-pwrap { max-height: 22rem; margin-top: var(--cds-gap-md); }

/* ---- Page styles (ported) ---- */
.cs-page { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
  .cs-head h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0 0 var(--cds-gap-xs); }
  .cs-take { color: var(--color-fg-muted); font-size: var(--cds-font-size-body); margin: 0; }
  .cs-take b, .cs-page b { font-weight: var(--cds-font-weight-medium); color: var(--color-fg); }
  .cs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--cds-gap-md); }
  .cs-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); min-width: 0; }
  .cs-tile .cs-label { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .cs-tile .cs-num { font-family: var(--font-serif); font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; margin-top: var(--cds-gap-xs); }
  .cs-tile .cs-sub { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin-top: var(--cds-gap-xs); }
  .cs-tile.cs-alert .cs-num { color: var(--color-bad); }
  .cs-next .cs-num { font-size: var(--cds-font-size-heading); font-family: var(--font-sans); font-weight: var(--cds-font-weight-medium); }
  .cs-card h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; }
  .cs-note { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin: var(--cds-gap-xs) 0 var(--cds-gap-md); }
  .cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--cds-gap-md); }
  .cs-controls { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; margin-bottom: var(--cds-gap-md); }
  .cs-seg { display: inline-flex; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); overflow: hidden; }
  .cs-seg button { font: inherit; font-size: var(--cds-font-size-caption); background: transparent; color: var(--color-fg-muted); border: 0; padding: var(--cds-pad-xs) var(--cds-pad-sm); cursor: pointer; }
  .cs-seg button[aria-pressed="true"] { background: var(--color-bg); color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
  .cs-check { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); display: inline-flex; gap: var(--cds-gap-xs); align-items: center; }
  .cs-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-bottom: var(--cds-gap-sm); }
  .cs-legend span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .35rem; background: var(--sw); vertical-align: -1px; }
  .cs-chart { position: relative; min-height: 18rem; }
  .cs-chart svg { display: block; }
  .cs-tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); max-width: 16rem; z-index: 2; }
  .cs-tip .cs-tip-d { color: var(--cds-text-secondary); }
  .cs-bars { min-height: 10rem; }
  .cs-sit p { margin: var(--cds-gap-sm) 0 0; font-size: var(--cds-font-size-body); }
  .cs-sit .cs-meta { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .cs-watch { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
  .cs-watch a { color: var(--color-fg); font-weight: var(--cds-font-weight-medium); text-decoration: underline; text-decoration-color: var(--color-border-line); }
  .cs-watch div { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .cs-search { font: inherit; font-size: var(--cds-font-size-caption); padding: var(--cds-pad-xs) var(--cds-pad-sm); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); color: var(--color-fg); min-width: 0; flex: 1 1 12rem; max-width: 20rem; }
  .cs-tablewrap { max-height: 32rem; overflow: auto; }
  .cs-table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
  .cs-table th { position: sticky; top: 0; background: var(--color-panel); text-align: left; font-weight: var(--cds-font-weight-medium); color: var(--color-fg-muted); padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); white-space: nowrap; }
  .cs-table th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  .cs-table td { padding: var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: top; }
  .cs-table td.cs-title { font-weight: var(--cds-font-weight-medium); min-width: 12rem; }
  .cs-pill { display: inline-block; padding: 0 .4rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
  .cs-s-Ongoing { color: var(--color-bad); }
  .cs-s-Confirmed { color: var(--color-warn); }
  .cs-s-Announced { color: var(--color-fg); }
  .cs-s-Revoked, .cs-s-Concluded { color: var(--color-fg-muted); }
  .cs-i-High { color: var(--color-bad); font-weight: var(--cds-font-weight-medium); }
  .cs-table a { color: var(--color-fg); }
  @media (max-width: 40rem) { .cs-hide-narrow { display: none; } }
  .cs-failed { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); min-height: inherit; }
  .cs-failed::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
  .cs-s-Atrisk { color: var(--color-warn); }
  .cs-map { position: relative; min-height: 22rem; }
  .cs-map svg { display: block; margin-inline: auto; }
  .cs-map .cs-prov { fill: var(--color-bg); stroke: var(--cds-chart-axis); stroke-width: 1; }
  .cs-map .cs-provlbl { fill: var(--color-fg-muted); font-size: var(--cds-font-size-caption); pointer-events: none; }
  .cs-map .cs-pt { cursor: pointer; stroke: var(--color-panel); stroke-width: 1.5; }
  .cs-map .cs-pt.cs-on { stroke: var(--color-fg); stroke-width: 2.5; }
  .cs-lg-dia::before { transform: rotate(45deg) scale(.8); border-radius: 1px !important; }
  .cs-lg-dot::before { border-radius: 50% !important; }
  .cs-ptable tr.cs-on td { background: var(--color-bg); }
  .cs-ptable tbody tr { cursor: pointer; }
  .cs-updated { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin-top: var(--cds-gap-xs); }
  .cs-live { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-bottom: var(--cds-gap-xs); }
  .cs-live i { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-bad); }
  .cs-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-bad); opacity: 0; }
  .cs-ticker { overflow: hidden; border-top: 1px solid var(--color-border-line); border-bottom: 1px solid var(--color-border-line); padding: var(--cds-pad-xs) 0; font-size: var(--cds-font-size-caption); white-space: nowrap; min-height: 1.6rem; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .cs-ticker-track { display: inline-flex; gap: var(--cds-gap-xl); padding-right: var(--cds-gap-xl); }
  .cs-ticker-item b { margin-right: .35rem; }
  .cs-ticker-item .cs-tk-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; margin-right: .4rem; vertical-align: 1px; }
  @media (prefers-reduced-motion: reduce) { .cs-ticker { overflow-x: auto; } .cs-ticker-track[aria-hidden] { display: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .cs-live i::after { animation: cs-ping 1.8s var(--cds-ease-out) infinite; }
    @keyframes cs-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
    .cs-ticker-inner { display: inline-flex; animation: cs-marquee var(--cs-dur, 60s) linear infinite; }
    .cs-ticker:hover .cs-ticker-inner { animation-play-state: paused; }
    @keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .cs-intro.cs-tiles .cs-tile { animation: cs-rise var(--cds-dur-slow) var(--cds-ease-out) both; }
    .cs-intro.cs-tiles .cs-tile:nth-child(2) { animation-delay: 60ms; }
    .cs-intro.cs-tiles .cs-tile:nth-child(3) { animation-delay: 120ms; }
    .cs-intro.cs-tiles .cs-tile:nth-child(4) { animation-delay: 180ms; }
    .cs-intro.cs-tiles .cs-tile:nth-child(5) { animation-delay: 240ms; }
    @keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } }
    .cs-intro .cs-grow { transform-box: fill-box; transform-origin: left center; animation: cs-grow var(--cds-dur-slow) var(--cds-ease-out) both; animation-duration: 700ms; animation-delay: calc(var(--i, 0) * 45ms); }
    @keyframes cs-grow { from { transform: scaleX(0); } }
    .cs-intro .cs-prov { stroke-dasharray: 1; animation: cs-draw 1.4s var(--cds-ease-out) both, cs-fill 1.4s var(--cds-ease-out) both; }
    @keyframes cs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes cs-fill { 0%, 40% { fill-opacity: 0; } 100% { fill-opacity: 1; } }
    .cs-intro .cs-pt { transform-box: fill-box; transform-origin: center; animation: cs-pop 500ms var(--cds-ease-out) both; animation-delay: calc(900ms + var(--i, 0) * 50ms); }
    @keyframes cs-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
    .cs-ring { transform-box: fill-box; transform-origin: center; animation: cs-ring 2.4s var(--cds-ease-out) infinite; animation-delay: var(--d, 0s); }
    @keyframes cs-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.8); opacity: 0; } }
    .cs-breathe { animation: cs-breathe 2.4s ease-in-out infinite; }
    @keyframes cs-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
    .cs-intro .cs-fade { animation: cs-fadein 600ms var(--cds-ease-out) both; animation-delay: 500ms; }
    @keyframes cs-fadein { from { opacity: 0; } }
  }
  .cs-ring { fill: none; stroke-width: 1.5; pointer-events: none; }
  [data-dash-source-state=empty] { color: transparent; }
  [data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
.cs-table td.cs-date { white-space: nowrap; }