/* Kill Chain Compass — Tactical HUD.
   Dark only, by design: the light counterpart was dropped rather than half-maintained.

   Colour here is load-bearing, not decorative. --tier-a/b/c carry IOC confidence, --warn
   flags a non-discriminating family or a stale source, --error is failure. So the palette
   is split by ROLE: cyan is the interface and never means anything about the data; amber
   is reserved for warnings and Tier B and is never used as chrome. If the interface
   itself glowed amber, the amber warnings would stop reading as warnings. */
:root {
  /* Native form controls (the <select> in the indicator toolbar, input[type=search])
     follow the OS unless told otherwise. Without this, a light-mode machine renders a
     white dropdown on a near-black panel. */
  color-scheme: dark;

  --bg:         #07090d;
  --panel:      #0d1219;
  --panel-2:    #121a24;
  --border:     #1b2b3a;
  --rule:       #22384c;      /* brighter hairline: corner brackets, tick marks */

  --text:       #dbe4ee;
  --muted:      #94a3b8;

  --accent:     #22d3ee;      /* interface only */
  --accent-2:   #67e8f9;      /* links */
  --accent-ink: #04141a;      /* text on a filled cyan button */

  --tier-a:     #35d399;      /* semantic — meaning unchanged by the repalette */
  --tier-b:     #f5a524;
  --tier-c:     #94a3b8;
  --warn:       #f5a524;
  --error:      #f87171;

  --glow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 12px rgba(34, 211, 238, 0.25);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 1140px;
  padding: 28px 20px 80px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
code, .mono { font-family: var(--mono); }

/* --- header + tabs -------------------------------------------------------- */
header { display: flex; align-items: center; gap: 14px; }
header .logo { width: 38px; height: 38px; flex: none; color: var(--accent); }
header h1 { font-size: 1.6rem; margin: 0 0 4px; letter-spacing: -0.01em; }
header h1 .mark { color: var(--accent); }
.subtitle { color: var(--muted); margin: 0; font-size: 0.92rem; }

nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  margin: 22px 0 22px;
  position: relative;
}
/* Periodic ticks hanging off the rule — the cheapest honest HUD cue there is. */
nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
  background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 22px);
  opacity: 0.55; pointer-events: none;
}
nav a {
  padding: 9px 18px; font-size: 0.92rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
nav a:hover { color: var(--text); text-decoration: none; }
nav a.active {
  color: var(--text); border-bottom-color: var(--accent); font-weight: 600;
  box-shadow: 0 3px 12px -6px var(--accent);
}

/* --- search --------------------------------------------------------------- */
form.search { display: flex; gap: 8px; margin-bottom: 20px; }
form.search input {
  flex: 1; padding: 11px 14px; font-size: 0.95rem;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
form.search input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; box-shadow: var(--glow);
}
form.search button {
  padding: 11px 22px; font-size: 0.95rem; font-weight: 600;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 6px;
}
.hint { color: var(--muted); font-size: 0.85rem; margin: -12px 0 20px; }

/* --- panels --------------------------------------------------------------- */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 18px 20px; margin-bottom: 16px;
  position: relative;
}
/* Corner brackets, drawn on pseudo-elements so no markup changes and the render tests
   stay untouched. They read as brackets because --rule is brighter than --border. */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-style: solid; border-color: var(--rule); pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; border-top-left-radius: 8px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-bottom-right-radius: 8px; }

/* Only titled panels, not the identity block whose h2 is nested inside .identity. */
.panel > h2 { display: flex; align-items: center; gap: 9px; }
.panel > h2::before {
  content: ""; width: 3px; height: 0.95em; flex: none;
  background: var(--accent); border-radius: 1px;
}
.panel h2 { font-size: 1.05rem; margin: 0 0 12px; }
.panel h3 { font-size: 0.95rem; margin: 18px 0 8px; }
.lead { color: var(--muted); font-size: 0.9rem; }

.identity h2 { font-size: 1.45rem; margin-bottom: 2px; }
.identity .idline { color: var(--muted); font-size: 0.85rem; margin-bottom: 12px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.fact { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 11px 13px; }
.fact .label { color: var(--muted); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-family: var(--mono); }
.fact .value { font-size: 0.98rem; margin-top: 3px; font-weight: 600; }
.fact .value.absent { font-weight: 400; color: var(--muted); font-style: italic; font-size: 0.88rem; }

.stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 4px; }
.stat .value { font-size: 1.5rem; font-weight: 700; }
.stat .label { color: var(--muted); font-size: 0.74rem; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.08em; }

/* --- chips ---------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.75rem; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--muted);
}
.chip.src { text-transform: lowercase; }
.chip.strong { color: var(--text); border-color: var(--accent); }
.chip.warn { color: var(--warn); border-color: var(--warn); }

/* --- tiers ---------------------------------------------------------------- */
.tier { border-left: 4px solid var(--tier-c); }
.tier-A { border-left-color: var(--tier-a); }
.tier-B { border-left-color: var(--tier-b); }
.tier-C { border-left-color: var(--tier-c); }
.tier-badge { font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-family: var(--mono); }
.tier-A .tier-badge { color: var(--tier-a); }
.tier-B .tier-badge { color: var(--tier-b); }
.rationale { font-size: 0.92rem; margin: 8px 0 0; }

.notice {
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--warn); border-radius: 4px;
  padding: 10px 13px; font-size: 0.88rem; color: var(--muted); margin: 10px 0;
}
.notice.plain { border-left-color: var(--border); }

/* --- tables --------------------------------------------------------------- */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.87rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-family: var(--mono); }
tbody tr:hover { background: var(--panel-2); }
td.mono { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.aged { color: var(--muted); }

/* --- tactic bars ---------------------------------------------------------- */
.tactics { display: grid; gap: 5px; }
.tactic-row { display: grid; grid-template-columns: 170px 1fr 40px; gap: 10px; align-items: center; font-size: 0.82rem; }
.tactic-row .bar { background: var(--accent); height: 14px; border-radius: 3px; min-width: 2px; }
.tactic-row .n { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

details.more { margin-top: 10px; }
details.more summary { cursor: pointer; color: var(--accent-2); font-size: 0.88rem; }
details.more[open] summary { margin-bottom: 10px; }

/* --- footer --------------------------------------------------------------- */
footer {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.8rem;
}
footer .srcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 18px; margin: 10px 0; }
footer .stale { color: var(--warn); }

/* Technique ids and chips must never wrap character-by-character in a narrow column. */
td.mono a, .idline { white-space: nowrap; }
table td:first-child { white-space: nowrap; }
table td.mono:not(:first-child) { white-space: normal; }

/* Tags are pivots, so they are links: give the clickable chips affordance. */
a.chip { text-decoration: none; }
a.chip:hover {
  border-color: var(--accent); color: var(--text); text-decoration: none;
  box-shadow: var(--glow);
}

/* type="search" adds a WebKit clear button and a different default appearance. */
form.search input[type="search"] { -webkit-appearance: none; appearance: none; }
form.search input::-webkit-search-decoration,
form.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- indicator table controls --------------------------------------------- */
.table-tools {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
}
.table-tools input.ioc-filter, .table-tools select {
  padding: 5px 9px; font-size: 0.83rem; font-family: inherit;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
}
.table-tools input.ioc-filter { flex: 1; min-width: 170px; -webkit-appearance: none; appearance: none; }
.table-tools input.ioc-filter:focus, .table-tools select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; box-shadow: var(--glow);
}
.table-tools .lead { margin: 0; white-space: nowrap; }

th button.sort {
  background: none; border: none; padding: 0; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
th button.sort:hover { color: var(--accent); text-shadow: 0 0 8px rgba(34, 211, 238, 0.4); }

.link-button {
  background: none; border: none; padding: 6px 0 0;
  color: var(--accent-2); font-size: 0.88rem;
}
.link-button:hover { text-decoration: underline; }


/* --- glow, on interaction only ---------------------------------------------
   Nothing glows while you are only reading. Headings, the wordmark and static text stay
   flat; the accent lights up when a control is focused, hovered or active. */
form.search button:hover, form.search button:focus-visible {
  box-shadow: var(--glow); outline: none;
}
.link-button:focus-visible, details.more summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}


/* --- world globe background -------------------------------------------------
   A close-up angled globe behind the page: continent outlines and a graticule, which is
   what makes the sphere read as tilted rather than as a flat silhouette. Cards stay
   heavier than it by construction — panels are fully opaque and the globe sits at
   z-index -1, so it only ever reads in the gutters, the header and the footer, never
   through text.

   Masked rather than embedded, so the artwork is one cached request and the colour still
   comes from the theme token. The mask reads alpha only; worldmap.svg is painted white. */
.worldmap {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1;
  /* Non-negotiable: this covers the whole viewport. Without it every tab, filter box and
     sort header on the site stops responding to the pointer. */
  pointer-events: none;

  background-color: var(--rule);
  opacity: 0.55;
  -webkit-mask-image: url("/static/worldmap.svg");
          mask-image: url("/static/worldmap.svg");
  -webkit-mask-size: cover;      mask-size: cover;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}