/* ============================================================================
 * IGNYX FireIntel — panel styles
 * Brand tokens only. Dark throughout, orange as punctuation, generous space.
 * Falls back to its own values if the host page has not defined the tokens.
 * ==========================================================================*/

.fi-root {
  --fi-bg:      var(--bg, #0B0F14);
  --fi-panel:   var(--panel, #141C27);
  --fi-tile:    var(--tile, #1C2735);
  --fi-border:  var(--border, #232F3F);
  --fi-acc:     var(--accent, #F97316);
  --fi-ember:   var(--ember, #FB923C);
  --fi-tx:      var(--text, #E2E8F0);
  --fi-mu:      var(--muted, #94A3B8);
  --fi-dim:     var(--dim, #64748B);

  color: var(--fi-tx);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fi-root *, .fi-root *::before, .fi-root *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- header -- */

.fi-head { padding: 4px 0 18px; border-bottom: 1px solid var(--fi-border); margin-bottom: 22px; }
.fi-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fi-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fi-title-name {
  font-size: 20px; font-weight: 600; color: #fff; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fi-title-id {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--fi-dim); letter-spacing: .06em;
}
.fi-sub {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px;
  font-size: 13px; color: var(--fi-mu);
}
.fi-dot { color: var(--fi-dim); }

.fi-badge {
  flex-shrink: 0; padding: 5px 11px; border-radius: 5px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid transparent; white-space: nowrap;
}
.fi-conf-veryhigh { background: rgba(220,38,38,.16);  color: #FCA5A5; border-color: rgba(220,38,38,.4); }
.fi-conf-high     { background: rgba(249,115,22,.16); color: #FDBA74; border-color: rgba(249,115,22,.4); }
.fi-conf-moderate { background: rgba(234,179,8,.14);  color: #FDE047; border-color: rgba(234,179,8,.35); }
.fi-conf-low      { background: rgba(100,116,139,.16);color: #CBD5E1; border-color: rgba(100,116,139,.4); }
.fi-conf-verylow  { background: rgba(100,116,139,.10);color: var(--fi-mu); border-color: var(--fi-border); }

/* ------------------------------------------------------------ sections -- */

.fi-sec { margin-bottom: 30px; }
.fi-h {
  margin: 0 0 14px; font-size: 12px; font-weight: 700; color: var(--fi-acc);
  text-transform: uppercase; letter-spacing: .1em;
}
.fi-h-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fi-h-row .fi-h { margin: 0; }

.fi-note {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--fi-dim);
  border-left: 2px solid var(--fi-border); padding-left: 12px;
}
.fi-note-warn { border-left-color: var(--fi-acc); color: var(--fi-mu); margin-top: 14px; }

/* ------------------------------------------------------------ metrics -- */

.fi-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
/* These three numbers are read together - FRP, power density and fireline
   intensity only mean something as a set. Stacking them on a phone put three
   screens of scrolling between the first and the last, so they stay in one
   row and the type shrinks instead. Only below 360px do they stack. */
@media (max-width: 560px) {
  .fi-metrics { gap: 7px; }
  .fi-metric { padding: 11px 10px; }
  .fi-metric-label { font-size: 9.5px; letter-spacing: .05em; margin-bottom: 6px; }
  .fi-metric-num { font-size: 21px; }
  .fi-metric-unit { font-size: 11px; }
  .fi-metric-band { font-size: 9.5px; padding: 2px 6px; margin-top: 7px; }
}
@media (max-width: 360px) { .fi-metrics { grid-template-columns: 1fr; } }

.fi-metric {
  background: var(--fi-panel); border: 1px solid var(--fi-border);
  border-radius: 9px; padding: 15px 16px;
}
.fi-metric-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fi-mu); margin-bottom: 8px;
}
.fi-metric-value { display: flex; align-items: baseline; gap: 6px; }
.fi-metric-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 27px; font-weight: 600; color: #fff; line-height: 1;
}
.fi-metric-unit { font-size: 13px; color: var(--fi-mu); }
.fi-metric-band {
  margin-top: 9px; display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; padding: 3px 8px; border-radius: 4px;
  background: rgba(148,163,184,.12); color: var(--fi-mu);
}
.fi-band-low       { background: rgba(34,197,94,.14);  color: #86EFAC; }
.fi-band-medium,
.fi-band-moderate  { background: rgba(234,179,8,.14);  color: #FDE047; }
.fi-band-high      { background: rgba(249,115,22,.16); color: #FDBA74; }
.fi-band-veryhigh  { background: rgba(220,38,38,.16);  color: #FCA5A5; }
.fi-band-extreme   { background: rgba(220,38,38,.28);  color: #FECACA; }

.fi-doctrine {
  margin-top: 14px; display: flex; gap: 12px; align-items: flex-start;
  background: var(--fi-tile); border-radius: 8px; padding: 13px 15px;
  border-left: 3px solid var(--fi-acc);
}
.fi-doctrine-tag {
  flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fi-acc); padding-top: 2px;
}
.fi-doctrine-text { font-size: 13.5px; color: var(--fi-tx); }

/* -------------------------------------------------------------- facts -- */

.fi-facts { display: flex; flex-direction: column; }
.fi-fact {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--fi-border);
}
.fi-fact:last-child { border-bottom: 0; }
.fi-fact-k { font-size: 13.5px; color: var(--fi-mu); flex-shrink: 0; }
.fi-fact-v { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.fi-fact-v > span:first-child {
  font-size: 14px; color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fi-fact-sub { font-size: 11.5px; color: var(--fi-dim); }

/* --------------------------------------------------------- confidence -- */

.fi-conf-list { display: flex; flex-direction: column; }
.fi-conf-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--fi-border);
}
.fi-conf-row:last-child { border-bottom: 0; }
.fi-conf-ours { position: relative; padding-left: 12px; }
.fi-conf-ours::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; background: var(--fi-acc); border-radius: 2px;
}
.fi-conf-left { min-width: 0; }
.fi-conf-label { font-size: 13.5px; color: var(--fi-tx); }
.fi-conf-detail { font-size: 11.5px; color: var(--fi-dim); margin-top: 2px; }
.fi-conf-right { flex-shrink: 0; width: 168px; text-align: right; }
.fi-conf-value { font-size: 12.5px; color: var(--fi-mu); margin-bottom: 6px; }

.fi-bar { height: 4px; background: var(--fi-tile); border-radius: 3px; overflow: hidden; }
.fi-bar-fill { height: 100%; border-radius: 3px; transition: width .35s ease; }
.fi-bar-fill[data-strength="strong"] { background: var(--fi-acc); }
.fi-bar-fill[data-strength="mid"]    { background: var(--fi-ember); opacity: .75; }
.fi-bar-fill[data-strength="weak"]   { background: var(--fi-dim); }

/* ---------------------------------------------------------- landcover -- */

.fi-lc { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.fi-lc-legend { flex: 1 1 240px; display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.fi-lc-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fi-lc-swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.fi-lc-name { color: var(--fi-tx); flex: 1; }
.fi-lc-pct {
  color: var(--fi-mu);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.fi-lc-chart { width: 132px; height: 132px; flex-shrink: 0; }
.fi-lc-centre-num {
  fill: #fff; font-size: 21px; font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fi-lc-centre-lbl { fill: #94A3B8; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

/* ------------------------------------------------------------ cameras -- */

.fi-camera-confirmed {
  display: flex; gap: 10px; align-items: center;
  background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.28);
  border-radius: 8px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.fi-tick { color: #86EFAC; font-weight: 700; }
.fi-towers { display: flex; flex-direction: column; }
.fi-tower {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--fi-border); font-size: 13px;
}
.fi-tower:last-child { border-bottom: 0; }
.fi-tower-name { color: #fff; flex: 1; }
.fi-tower-meta {
  color: var(--fi-mu);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.fi-tower-prov { color: var(--fi-dim); font-size: 11.5px; }

/* ------------------------------------------------------------- passes -- */

.fi-geo-band {
  background: var(--fi-panel); border: 1px solid var(--fi-border);
  border-radius: 9px; padding: 14px 16px; margin-bottom: 16px;
}
.fi-geo-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fi-acc); margin-bottom: 10px;
}
.fi-geo-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.fi-geo-name { color: #fff; min-width: 118px; }
.fi-geo-cad {
  color: var(--fi-tx);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.fi-geo-q { color: var(--fi-dim); font-size: 11.5px; margin-left: auto; }

.fi-passes { display: flex; flex-direction: column; }
.fi-pass {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--fi-border); font-size: 13px;
}
.fi-pass:last-child { border-bottom: 0; }
.fi-pass-time {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fi-tx); min-width: 118px; font-size: 12.5px;
}
.fi-pass-sat { color: #fff; flex: 1; }
.fi-pass-q { color: var(--fi-dim); font-size: 11.5px; }

.fi-gaps { margin-top: 18px; }
.fi-gaps-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fi-mu); margin-bottom: 10px;
}
.fi-gap {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: 7px; margin-bottom: 7px; font-size: 12.5px;
  background: var(--fi-tile);
}
.fi-gap-ok  { border-left: 3px solid rgba(34,197,94,.6); }
.fi-gap-bad { border-left: 3px solid var(--fi-acc); }
.fi-gap-window {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fi-tx);
}
.fi-gap-len { color: var(--fi-acc); font-weight: 600; }
.fi-gap-note { color: var(--fi-dim); margin-left: auto; }

/* ---------------------------------------------------- spread / assets -- */

.fi-iso { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.fi-iso-row { display: flex; align-items: center; gap: 12px; }
.fi-iso-t {
  width: 52px; flex-shrink: 0; font-size: 12.5px; color: var(--fi-mu);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fi-iso-row .fi-bar { flex: 1; height: 8px; }
.fi-iso-a {
  width: 72px; flex-shrink: 0; text-align: right; font-size: 12.5px; color: var(--fi-tx);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fi-assets { display: flex; flex-direction: column; }
.fi-asset {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--fi-border); font-size: 13.5px;
}
.fi-asset:last-child { border-bottom: 0; }
.fi-asset-name { color: var(--fi-tx); flex: 1; }
.fi-asset-dist {
  color: var(--fi-dim); font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fi-asset-eta {
  color: var(--fi-mu); font-weight: 600; min-width: 82px; text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fi-asset-hit .fi-asset-eta { color: var(--fi-acc); }
.fi-asset-hit .fi-asset-name { color: #fff; }

/* ------------------------------------------------------------ buttons -- */

.fi-btn-row { display: flex; flex-wrap: wrap; gap: 9px; }
.fi-btn {
  appearance: none; cursor: pointer; text-decoration: none;
  background: transparent; color: var(--fi-tx);
  border: 1px solid var(--fi-border); border-radius: 7px;
  padding: 9px 15px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .03em; transition: border-color .18s, background .18s, color .18s;
  font-family: inherit;
}
.fi-btn:hover { border-color: var(--fi-acc); color: #fff; background: rgba(249,115,22,.08); }
.fi-btn-p {
  background: var(--fi-acc); border-color: var(--fi-acc); color: #0B0F14;
  display: inline-flex; align-items: center;
}
.fi-btn-p:hover { background: var(--fi-ember); border-color: var(--fi-ember); color: #0B0F14; }

/* --------------------------------------------------------------- foot -- */

.fi-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--fi-border);
  font-size: 12px; color: var(--fi-dim); letter-spacing: .02em;
}

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

/* ------------------------------------------------- bridge / app additions -- */

.fi-empty {
  background: var(--fi-panel); border: 1px solid var(--fi-border);
  border-radius: 10px; padding: 20px 18px;
}
.fi-empty-title { font-size: 15px; color: #fff; font-weight: 600; margin-bottom: 8px; }
.fi-empty-body { font-size: 13.5px; color: var(--fi-mu); line-height: 1.65; }

/* coverage strip */
.fi-cov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .fi-cov { grid-template-columns: 1fr; } }
.fi-cov-item {
  background: var(--fi-panel); border: 1px solid var(--fi-border);
  border-radius: 9px; padding: 13px 14px;
}
.fi-cov-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px; font-weight: 600; color: #fff; line-height: 1.2;
}
.fi-cov-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fi-mu); margin-top: 5px;
}
.fi-cov-sub { font-size: 11.5px; color: var(--fi-dim); margin-top: 4px; }

/* satellite board */
.fi-satgroups { display: flex; flex-direction: column; gap: 14px; }
.fi-satgroup-t {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--fi-dim); margin-bottom: 6px;
}
.fi-sat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--fi-border); font-size: 13px;
}
.fi-sat:last-child { border-bottom: 0; }
.fi-sat-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--fi-dim);
}
.fi-sat-active .fi-sat-dot { background: var(--fi-acc); box-shadow: 0 0 7px rgba(249,115,22,.7); }
.fi-sat-name { color: var(--fi-tx); flex: 1; min-width: 0; }
.fi-sat-available .fi-sat-name { color: var(--fi-mu); }
.fi-sat-meta {
  color: var(--fi-dim); font-size: 11.5px; white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fi-sat-status {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
  background: rgba(100,116,139,.16); color: var(--fi-dim);
}
.fi-sat-active .fi-sat-status { background: rgba(249,115,22,.16); color: var(--fi-ember); }

/* other clusters nearby */
.fi-others { display: flex; flex-direction: column; }
.fi-other {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--fi-border); font-size: 13px;
}
.fi-other:last-child { border-bottom: 0; }
.fi-other-id {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--fi-mu);
}
.fi-other-meta { color: var(--fi-tx); flex: 1; font-size: 12.5px; }
.fi-other-conf {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 4px;
}