/* ============================================================================
 *  TASK FORCE PALADIN — Core stylesheet
 *  Aesthetic derived from the ISC intelligence slides: near-black panels,
 *  hairline borders, a single disciplined red accent, monospace product data,
 *  condensed uppercase display type. The red is the only bold move; everything
 *  else stays quiet so the slide content reads as "classified document".
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --black:        #0a0a0c;
  --panel:        #121317;
  --panel-2:      #16181d;
  --panel-edge:   #25272e;
  --ink:          #e9ebee;
  --ink-dim:      #9aa0a8;
  --ink-faint:    #5d626b;
  --red:          #c0252b;
  --red-bright:   #e63329;
  --red-deep:     #7a1418;
  --amber:        #d8902a;
  --green:        #4f9d4a;
  --blue:         #4a78c0;

  --display: 'Oswald', sans-serif;
  --body:    'Barlow Condensed', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --hairline: 1px solid var(--panel-edge);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red-bright); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; margin: 0; }

.mono { font-family: var(--mono); }
.red { color: var(--red-bright); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.uppercase { text-transform: uppercase; letter-spacing: .08em; }

/* ----------------------------- TOP NAV ----------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .55rem 1.5rem;
  background: linear-gradient(180deg, #0c0d10, #0a0a0c);
  border-bottom: 1px solid var(--panel-edge);
}
.topbar .brand { display: flex; align-items: center; gap: .65rem; }
.topbar .brand img { width: 34px; height: 34px; }
.topbar .brand b {
  font-family: var(--display); font-weight: 700; letter-spacing: .12em;
  font-size: 1.02rem; text-transform: uppercase;
}
.topbar nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; color: var(--ink-dim);
  padding: .45rem .7rem; border: 1px solid transparent; border-radius: 2px;
}
.topbar nav a:hover { color: var(--ink); border-color: var(--panel-edge); }
.topbar nav a.active { color: var(--ink); border-color: var(--red-deep); background: rgba(192,37,43,.08); }
.topbar .who {
  display: flex; align-items: center; gap: .5rem; padding-left: 1rem;
  border-left: 1px solid var(--panel-edge); margin-left: .5rem;
}
.topbar .who img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--panel-edge); }
.rankchip {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  color: var(--red-bright); border: 1px solid var(--red-deep);
  padding: .1rem .35rem; border-radius: 2px; letter-spacing: .05em;
}

/* ------------------------------ LAYOUT ----------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.page-head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-edge); }
.page-head h1 { font-size: 1.9rem; text-transform: uppercase; letter-spacing: .06em; }
.page-head .sub { color: var(--ink-dim); font-family: var(--mono); font-size: .8rem; margin-top: .25rem; }

/* ----------------------------- BUTTONS ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--panel-edge);
  padding: .5rem .9rem; border-radius: 2px; cursor: pointer;
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn-red { background: var(--red-deep); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red); border-color: var(--red-bright); color:#fff; }
.btn-sm { padding: .3rem .6rem; font-size: .72rem; }

/* ----------------------------- PANELS ------------------------------------ */
.panel {
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 3px;
}
.panel-h {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .85rem; color: var(--red-bright);
  padding: .55rem .85rem; border-bottom: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, rgba(192,37,43,.06), transparent);
}
.panel-b { padding: .85rem; }

/* Badges for threat / confidence. */
.badge {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; font-size: .78rem; padding: .25rem .6rem; border-radius: 2px;
  display: inline-block;
}
.badge.low { background: rgba(79,157,74,.15); color: var(--green); border: 1px solid var(--green); }
.badge.moderate { background: rgba(216,144,42,.15); color: var(--amber); border: 1px solid var(--amber); }
.badge.high { background: rgba(192,37,43,.18); color: var(--red-bright); border: 1px solid var(--red); }

/* Classification banner used on intel. */
.classbar {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .15em;
  text-align: center; font-size: .78rem; color: var(--red-bright);
  padding: .4rem; border-top: 1px solid var(--red-deep); border-bottom: 1px solid var(--red-deep);
  background: repeating-linear-gradient(45deg, rgba(192,37,43,.05) 0 10px, transparent 10px 20px);
}

footer.site {
  border-top: 1px solid var(--panel-edge); color: var(--ink-faint);
  font-family: var(--mono); font-size: .72rem; text-align: center;
  padding: 1.5rem; letter-spacing: .05em;
}

/* Forms */
input[type=text], input[type=url], input[type=datetime-local], select, textarea {
  width: 100%; background: var(--panel-2); border: 1px solid var(--panel-edge);
  color: var(--ink); font-family: var(--body); font-size: .95rem;
  padding: .5rem .6rem; border-radius: 2px;
}
textarea { font-family: var(--mono); font-size: .85rem; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red-deep); outline-offset: 0; border-color: var(--red); }
label { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--ink-dim); display: block; margin-bottom: .25rem; }
.field { margin-bottom: .9rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}