/* ============================================================
   RECKON — Shared design system
   All pages import this. Do not duplicate here in page styles.
   ============================================================ */

/* ── Variables ── */
:root {
  /* Backgrounds */
  --bg:         #08080d;
  --surface:    #0d0d14;
  --surface-2:  #111118;
  --surface-3:  #16161f;

  /* Borders */
  --border:     #1c1c2a;
  --border-lt:  #252535;
  --border-dim: #141420;

  /* Text */
  --text:       #c4d8e8;
  --text-dim:   #5a6a7a;
  --text-muted: #2a3540;

  /* Accent / status */
  --accent:       #00aaff;
  --accent-dim:   rgba(0,170,255,.1);
  --accent-glow:  rgba(0,170,255,.25);
  --alert:        #ff2d55;
  --alert-dim:    rgba(255,45,85,.12);
  --warn:         #ffaa00;
  --warn-dim:     rgba(255,170,0,.1);
  --success:      #00cc88;
  --success-dim:  rgba(0,204,136,.1);
  --purple:       #9955ff;
  --purple-dim:   rgba(153,85,255,.1);

  /* Aliases for legacy compatibility */
  --dim:   #5a6a7a;   /* = --text-dim */
  --muted: #2a3540;   /* = --text-muted */

  /* Typography */
  --mono: 'IBM Plex Mono','Courier New',monospace;

  /* Layout dims */
  --nav-h:      44px;
  --filter-h:   34px;
  --ticker-h:   22px;
  --sidebar-w:  360px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--mono); cursor: pointer; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-lt); }

/* ── Nav ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: 300; display: flex; align-items: stretch;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.nav-brand {
  padding: 0 16px; display: flex; align-items: center; gap: 10px;
  border-right: 1px solid var(--border); flex-shrink: 0;
}
/* ── Logo mark (SVG) ── */
.nav-logo-mark {
  flex-shrink: 0;
  display: block;
}
/* legacy: keep .nav-orb for pages not yet updated, but make it invisible */
.nav-orb { display: none; }
.nav-wordmark {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; color: var(--accent);
  white-space: nowrap;
}
.nav-links { display: flex; align-items: stretch; }
.nav-link {
  padding: 0 14px; display: flex; align-items: center;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); border-right: 1px solid var(--border);
  transition: all .15s; white-space: nowrap;
}
.nav-link:hover  { color: var(--accent); background: var(--accent-dim); }
.nav-link.active { color: var(--accent); background: var(--accent-dim); border-bottom: 2px solid var(--accent); }

/* Nav search */
.nav-search {
  flex: 1; display: flex; align-items: center; padding: 0 12px; gap: 8px;
  border-right: 1px solid var(--border);
}
.nav-search svg { color: var(--text-muted); flex-shrink: 0; }
.nav-search input {
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--mono); font-size: .63rem;
  width: 100%; caret-color: var(--accent);
}
.nav-search input::placeholder { color: var(--text-muted); }

/* Nav stats */
.nav-meta { display: flex; align-items: stretch; }
.nav-stat {
  padding: 0 12px; display: flex; align-items: center; gap: 6px;
  font-size: .55rem; color: var(--text-dim);
  border-right: 1px solid var(--border); white-space: nowrap;
}
.nav-stat .v     { color: var(--accent); font-weight: 700; }
.nav-stat .v.red { color: var(--alert); }

/* Nav button (used in network toolbar) */
.nav-btn {
  padding: 0 12px; background: transparent; border: none;
  border-right: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; transition: all .15s;
}
.nav-btn:hover  { color: var(--accent); background: var(--accent-dim); }
.nav-btn.on     { color: var(--accent); background: var(--accent-dim); }

/* UTC clock */
.nav-time {
  padding: 0 14px; display: flex; align-items: center;
  font-size: .52rem; color: var(--text-muted);
  letter-spacing: .05em; white-space: nowrap;
}

/* ── Filter bar ── */
.filterbar, #filterbar {
  position: fixed; top: var(--nav-h); left: 0; right: 0; height: var(--filter-h);
  z-index: 299; display: flex; align-items: stretch;
  background: rgba(13,13,20,.97); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.filterbar::-webkit-scrollbar, #filterbar::-webkit-scrollbar { display: none; }
.fbtn {
  height: 100%; padding: 0 11px; background: transparent; border: none;
  border-right: 1px solid var(--border-dim); color: var(--text-dim);
  font-family: var(--mono); font-size: .52rem; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; transition: all .15s;
}
.fbtn:hover { color: var(--text); background: rgba(255,255,255,.03); }
.fbtn.on    { color: var(--accent); border-bottom: 1.5px solid var(--accent); background: var(--accent-dim); }

/* ── Ticker ── */
.ticker, #ticker {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--ticker-h);
  z-index: 299; background: var(--surface); border-top: 1px solid var(--border);
  display: flex; align-items: center; overflow: hidden;
}
.ticker-label {
  padding: 0 10px; font-size: .46rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  border-right: 1px solid var(--border); flex-shrink: 0;
  height: 100%; display: flex; align-items: center;
}
.ticker-track, #ticker-track { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ticker-scroll, #ticker-scroll {
  display: flex; gap: 20px; white-space: nowrap;
  animation: ticker-move 140s linear infinite; padding: 0 16px;
}
.tk { font-size: .5rem; color: var(--text-dim); }
.tk .s { color: var(--text); font-weight: 700; }
.tk .u { color: var(--success); }
.tk .d { color: var(--alert); }
@keyframes ticker-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Section color tokens ── */
/* Badges — background 18% opacity tint, text is the section color */
/* MUST match SEC_COLORS JS object in all pages */
.sc-conflict,.sc-military,.sc-iran { background: rgba(255,68,85,.18);   color: #ff4455; }
.sc-russia,.sc-ukraine              { background: rgba(68,153,255,.18);  color: #5599ff; }
.sc-tech,.sc-cyber                  { background: rgba(0,170,255,.18);   color: #00aaff; }
.sc-climate,.sc-health,.sc-human    { background: rgba(0,204,136,.18);   color: #00cc88; }
.sc-economy,.sc-business,.sc-sanctions { background: rgba(255,170,0,.18); color: #ffaa00; }
.sc-politics,.sc-europe             { background: rgba(153,85,255,.18);  color: #9966ff; }
.sc-palestine                       { background: rgba(34,221,102,.18);  color: #22dd66; }
.sc-default                         { background: rgba(0,170,255,.15);   color: #00aaff; }
.sc-science                         { background: rgba(6,182,212,.18);   color: #06c8e0; }
.sc-vr,.sc-hardware,.sc-leaks       { background: rgba(168,85,247,.18);  color: #bb77ff; }
.sc-accountability                  { background: rgba(249,115,22,.18);  color: #fb8c00; }

/* ── HUD cards ── */
.hud { position: absolute; top: 10px; left: 10px; z-index: 50; display: flex; gap: 6px; flex-wrap: wrap; }
.hud-card {
  background: rgba(13,13,20,.9); border: 1px solid var(--border);
  padding: 7px 11px; border-radius: 3px; backdrop-filter: blur(12px);
}
.hud-label { font-size: .42rem; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1px; }
.hud-val   { font-size: 1rem; font-weight: 700; color: var(--accent); line-height: 1; }
.hud-val.red   { color: var(--alert); }
.hud-val.amber { color: var(--warn); }

/* ── Tag pills ── */
.tag-pill {
  font-size: .42rem; padding: 2px 6px; border-radius: 2px;
  background: rgba(255,255,255,.05); color: var(--text-dim);
  letter-spacing: .04em; text-transform: uppercase;
}
.tag-pill.hot { background: var(--alert-dim); color: #ff6680; }

/* ── Loading spinner ── */
.spin {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Sanction badge ── */
.badge-active   { font-size: .4rem; padding: 1px 5px; border-radius: 2px; background: var(--alert-dim); color: #ff6680; text-transform: uppercase; letter-spacing: .05em; }
.badge-inactive { font-size: .4rem; padding: 1px 5px; border-radius: 2px; background: rgba(255,255,255,.04); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Skeleton loader ── */
.skel { background: var(--border); border-radius: 2px; animation: skel-pulse 1.4s ease-in-out infinite; }
@keyframes skel-pulse { 0%,100% { opacity: .4; } 50% { opacity: .8; } }

/* ── Empty / error states ── */
.state-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: .62rem; }
.state-error { color: var(--alert); font-size: .58rem; padding: 12px 0; }
.state-loading { color: var(--text-muted); font-size: .55rem; padding: 12px 0; }

/* ── Generic section header ── */
.section-title {
  font-size: .42rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border-dim);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .nav-meta .nav-stat:not(:first-child) { display: none; }
}

/* ── Responsive breakpoints ── */
/* Mobile: < 768px */
/* Tablet: 768px - 1024px */
/* Desktop: > 1024px */

/* ── Mobile nav ── */
@media (max-width: 768px) {
  :root {
    --nav-h: 52px;
    --filter-h: 44px;
    --ticker-h: 0px; /* hide ticker on mobile */
    --sidebar-w: 100%;
  }

  nav {
    height: var(--nav-h);
  }

  .nav-meta { display: none; } /* hide stats in mobile nav */
  .nav-time { display: none; }

  /* Mobile bottom navigation */
  #mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    z-index: 400;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-dim);
    font-size: 0.5rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: color .15s;
  }
  .mobile-nav-item.active { color: var(--accent); }
  .mobile-nav-item svg { width: 20px; height: 20px; }

  /* Ticker hidden on mobile */
  .ticker, #ticker { display: none; }

  /* Mobile filter bar: horizontal scroll, taller */
  .filterbar, #filterbar {
    height: var(--filter-h);
  }
  .fbtn {
    height: 100%;
    padding: 0 16px;
    font-size: 0.65rem;
    min-width: 70px;
  }
}

/* ── Font size fixes ── */
/* Current sizes are too small. Override the worst offenders. */
@media (max-width: 768px) {
  .fi-title { font-size: 0.85rem; }
  .fi-src { font-size: 0.65rem; }
  .fi-time { font-size: 0.62rem; }
  .fi-sec { font-size: 0.58rem; }
  .hud-val { font-size: 1.3rem; }
  .hud-label { font-size: 0.55rem; }
  .fp-name { font-size: 0.9rem; }
  .fp-role { font-size: 0.65rem; }
  .card-name { font-size: 0.85rem; }
  .card-role { font-size: 0.65rem; }
  .card-badge { font-size: 0.55rem; padding: 3px 8px; }
  .card-tag { font-size: 0.55rem; padding: 2px 7px; }
  .nav-link { font-size: 0.72rem; }
  .nav-wordmark { font-size: 0.85rem; }
  .fbtn { font-size: 0.65rem; }
  .sb-title { font-size: 0.6rem; }
}

/* Hide mobile nav on desktop */
@media (min-width: 769px) {
  #mobile-nav { display: none !important; }
}

/* Desktop: slightly larger than current tiny sizes */
@media (min-width: 1024px) {
  .fi-title { font-size: 0.75rem; }
  .fi-src { font-size: 0.58rem; }
  .hud-val { font-size: 1.15rem; }
  .card-name { font-size: 0.78rem; }
  .fp-name { font-size: 0.82rem; }
}