/* airmap.my — shared styles
   Two layers on one domain: ARCHIVE (frozen, cited gov material, blue)
   and LIVE (current independent analysis, vermilion).
   Signature element: the vertical status rail. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ink: #14181F;
  --paper: #FBFAF7;
  --state-blue: #1F3A5F;
  --state-blue-soft: #2C4E78;
  --signal: #C8492B;
  --mist: #E7E9ED;
  --muted: #5C6470;
  --rail-w: 56px;
  --maxw: 920px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Status rail (signature) ---------- */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  border-right: 1px solid var(--mist);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: var(--paper);
  z-index: 50;
}
.rail__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  color: var(--muted);
}
.rail__status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  font-weight: 500;
}
.rail__status--archive { color: var(--state-blue); }
.rail__status--live { color: var(--signal); }
.rail__dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-bottom: 2px;
}
.rail__dot--archive { background: var(--state-blue); }
.rail__dot--live { background: var(--signal); }

/* ---------- Shell ---------- */
.shell {
  margin-left: var(--rail-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--mist);
  padding: 18px 0;
  position: sticky; top: 0;
  background: rgba(251,250,247,0.92);
  backdrop-filter: blur(8px);
  z-index: 40;
}
.masthead__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand b { color: var(--state-blue); }
.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.nav a:hover, .nav a:focus { color: var(--signal); }

/* ---------- Non-affiliation banner ---------- */
.disclaimer {
  background: #FCF3F0;
  border-bottom: 1px solid #F0D9D2;
  font-size: 13.5px;
  color: #6B3225;
  padding: 11px 0;
}
.disclaimer .wrap { display: flex; gap: 10px; align-items: flex-start; }
.disclaimer__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  white-space: nowrap;
  padding-top: 1px;
}
.disclaimer a { color: var(--signal); font-weight: 500; }

/* ---------- Page header ---------- */
.page-head { padding: 52px 0 34px; }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .pip { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pip--archive { background: var(--state-blue); }
.pip--live { background: var(--signal); }
h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 18ch;
}
.lede {
  font-size: 19px;
  color: var(--muted);
  margin-top: 18px;
  max-width: 62ch;
}

/* ---------- Body content ---------- */
.content { padding-bottom: 64px; }
.content h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 26px;
  margin: 40px 0 14px;
  color: var(--state-blue);
}
.content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 8px;
}
.content p { margin: 0 0 16px; max-width: 68ch; }
.content ul { margin: 0 0 16px 22px; max-width: 66ch; }
.content li { margin-bottom: 7px; }
.content a { color: var(--state-blue); text-underline-offset: 2px; }

/* ---------- Source / attribution box ---------- */
.srcbox {
  border: 1px solid var(--mist);
  border-left: 3px solid var(--state-blue);
  background: #fff;
  padding: 16px 18px;
  margin: 28px 0;
  font-size: 14.5px;
}
.srcbox__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--state-blue);
  font-weight: 500;
  margin-bottom: 6px;
}
.srcbox__tag--live { color: var(--signal); }
.srcbox--live { border-left-color: var(--signal); }

/* ---------- PDF / document card ---------- */
.doccard {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--mist);
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  margin: 24px 0;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s;
}
.doccard:hover { border-color: var(--state-blue); }
.doccard__icon {
  width: 46px; height: 56px; flex: none;
  background: var(--state-blue);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500;
}
.doccard__t { font-weight: 600; font-size: 16px; }
.doccard__m { font-size: 13px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; margin-top: 3px; }

/* ---------- Card grid (sectors, feed) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.card {
  border: 1px solid var(--mist);
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--state-blue); transform: translateY(-2px); }
.card__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.card__t { font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.card__d { font-size: 14px; color: var(--muted); }

/* ---------- Feed (homepage living layer) ---------- */
.feed { border-top: 1px solid var(--mist); margin-top: 8px; }
.feed__item {
  display: flex; gap: 18px; align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--mist);
  text-decoration: none; color: var(--ink);
}
.feed__date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: var(--signal);
  white-space: nowrap; flex: none; width: 96px;
}
.feed__t { font-weight: 500; }
.feed__t:hover { color: var(--signal); }

/* ---------- Stub notice ---------- */
.stub {
  border: 1px dashed var(--mist);
  background: #fff;
  border-radius: 4px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  margin: 28px 0;
}
.stub__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 10px;
}

/* ---------- Footer ---------- */
.foot {
  margin-top: auto;
  border-top: 1px solid var(--mist);
  padding: 32px 0 48px;
  font-size: 13.5px;
  color: var(--muted);
}
.foot__grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot a { color: var(--muted); text-decoration: none; display: block; margin-bottom: 6px; }
.foot a:hover { color: var(--signal); }
.foot__col h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 12px; font-weight: 500;
}
.foot__legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--mist); max-width: 80ch; line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  :root { --rail-w: 38px; }
  body { font-size: 16px; }
  .rail__label { display: none; }
  .nav { display: none; }
  .page-head { padding: 36px 0 26px; }
  .feed__item { flex-direction: column; gap: 4px; }
  .feed__date { width: auto; }
}

/* ---------- A11y ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   SHARED COMPONENTS v2  (used by hub, pillars, and all child pages)
   ============================================================ */

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px;}
.chip{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.03em;
  border:1px solid var(--mist);background:#fff;border-radius:999px;padding:7px 13px;color:var(--muted);}
.chip b{color:var(--state-blue);font-weight:600;}
.chip--flag b{color:var(--signal);}

/* status badges */
.badge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;font-weight:500;display:inline-block;}
.b-superseded{background:#FBEAE5;color:#B23A1C;}
.b-partial{background:#FCF3E2;color:#9A6B14;}
.b-nodata{background:#ECEEF1;color:#5C6470;}
.b-overtaken{background:#EAE6F2;color:#5B4A88;}
.b-private{background:#E4EEE9;color:#2E6B49;}

/* filter pills */
.fils{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.fil{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;padding:7px 13px;
  border:1px solid var(--mist);background:#fff;border-radius:999px;color:var(--muted);cursor:pointer;transition:.12s;}
.fil:hover{border-color:var(--state-blue);color:var(--state-blue);}
.fil.active{background:var(--state-blue);border-color:var(--state-blue);color:#fff;}

/* bar charts */
.bar-row{display:grid;grid-template-columns:150px 1fr 56px;align-items:center;gap:10px;margin-bottom:9px;font-size:13px;}
.bar-row .bl{color:#3a3f47;}
.bar-track{height:14px;background:#eef0f3;border-radius:7px;overflow:hidden;}
.bar-fill{height:100%;border-radius:7px;background:var(--state-blue);width:0;transition:width 1s ease;}
.bar-fill.is-signal{background:var(--signal);}
.bar-val{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);text-align:right;}

/* link cards grid */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:13px;margin:16px 0;}
.lcard{border:1px solid var(--mist);border-radius:8px;padding:16px;text-decoration:none;color:var(--ink);display:block;transition:.15s;background:#fff;}
.lcard:hover{border-color:var(--state-blue);transform:translateY(-2px);}
.lcard__k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.lcard__t{font-weight:600;font-size:15px;margin-bottom:4px;}
.lcard__d{font-size:13px;color:var(--muted);line-height:1.4;}
.lcard--bridge{border-left:3px solid var(--signal);}

/* card variants reused from base .card; add a left-rule analysis card */
.callout{border:1px solid var(--mist);border-left:3px solid var(--signal);background:#fff;border-radius:6px;padding:22px 24px;margin:24px 0;}
.callout__tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);font-weight:500;margin-bottom:10px;}
.callout h2,.callout h3{font-family:'Fraunces',serif;font-weight:500;color:var(--ink);margin:0 0 10px;}
.callout p{font-size:15px;color:var(--muted);margin:0;max-width:72ch;}

/* scorecard table */
.score{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;}
.score th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:10px 12px;border-bottom:2px solid var(--mist);}
.score td{padding:13px 12px;border-bottom:1px solid var(--mist);vertical-align:top;}
.score tr:hover td{background:#fafafa;}
.score__name{font-weight:600;color:var(--ink);}
.score__why{font-size:13px;color:var(--muted);max-width:46ch;}
.score__link{font-size:12.5px;font-weight:500;color:var(--state-blue);text-decoration:none;white-space:nowrap;}
.score__link:hover{text-decoration:underline;}

/* status distribution bar */
.dist{display:flex;height:34px;border-radius:8px;overflow:hidden;margin:14px 0;border:1px solid var(--mist);}
.dist__seg{display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:#fff;font-weight:500;}
.dist-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.dist-legend span{display:flex;align-items:center;gap:7px;}
.dist-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;}

/* numbered reason blocks */
.reason{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--mist);}
.reason__n{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--state-blue);line-height:1;}
.reason h3{font-size:18px;font-weight:600;margin:0 0 8px;color:var(--ink);}
.reason p{font-size:14.5px;color:#3a3f47;margin:0 0 10px;max-width:70ch;}
.reason a.inline-link{font-size:13.5px;font-weight:500;color:var(--state-blue);text-decoration:none;}
.reason a.inline-link:hover{text-decoration:underline;}

@media (max-width:760px){
  .bar-row{grid-template-columns:110px 1fr 48px;}
  .score__why{display:none;}
  .reason{grid-template-columns:32px 1fr;gap:12px;}
}