/* EarthWatch shell redesign, stage 1: header.
   Loaded last so it wins the cascade without deleting the legacy rules in
   ewV450/ewV460/ewV470/ewV491/ewV7140/ew730/ew7301/ew7470/ew756/inline-2/v220-polish
   that still style `header` elsewhere -- those are superseded here, not removed yet.
   Deliberately does not touch .live.health-live/.health-degraded/.health-error
   (inline-2.css) so the data-feed health colour/pulse contract is untouched. */

:root{
  --ew2-bg:#0B0F14;
  --ew2-surface:#10151C;
  --ew2-surface2:#12181F;
  --ew2-raised:#161D26;
  --ew2-border:#1C2530;
  --ew2-border-strong:#28333F;
  --ew2-text:#E8EDF2;
  --ew2-text2:#9BAAB6;
  --ew2-text3:#5A6873;
  --ew2-accent:#2FBFE0;
  --ew2-accent-soft:rgba(47,191,224,0.12);
  --ew2-good:#3ED9A0;
  --ew2-font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ew2-font-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;
  /* Redefines the shared --head token (was 66px in ewV491.css) rather than
     hardcoding the header's own height, so #app's grid row (grid-template-rows,
     ewV450/ewV491) and footer sizing that also reads --foot stay in lockstep
     with no gap/seam. Anything else that reads var(--head) picks this up too. */
  --head:56px!important;
}

header{
  height:var(--head)!important;min-height:var(--head)!important;
  background:var(--ew2-surface)!important;
  border-bottom:1px solid var(--ew2-border)!important;
  box-shadow:none!important;
  display:flex!important;align-items:center!important;gap:14px!important;
  padding:0 18px!important;
  grid-template-columns:none!important;
}

header .brand{
  font:800 16.5px/1.15 var(--ew2-font-body)!important;
  letter-spacing:.01em!important;
  color:#fff!important;
  display:flex!important;flex-direction:column!important;gap:1px!important;
  flex:0 0 auto!important;
}
header .brand span{color:var(--ew2-accent)!important;}
header .brand::after{
  content:"GLOBAL HAZARD INTELLIGENCE";
  font:600 7.5px/1 var(--ew2-font-mono);
  letter-spacing:.15em;
  color:var(--ew2-text3);
}

#dataHealthButton{
  flex:0 0 auto!important;
  height:26px!important;padding:0 11px!important;border-radius:14px!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  font:700 10px/1 var(--ew2-font-mono)!important;letter-spacing:.07em!important;
  box-sizing:border-box!important;
}

#coverageButton{
  flex:0 0 auto!important;
  height:28px!important;padding:0 11px!important;border-radius:7px!important;
  border:1px solid var(--ew2-border-strong)!important;
  background:var(--ew2-raised)!important;
  color:var(--ew2-text2)!important;
  font:700 9.5px/1 var(--ew2-font-body)!important;letter-spacing:.03em!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
#coverageButton:hover{border-color:var(--ew2-accent)!important;color:var(--ew2-text)!important;}

#modeText{
  flex:0 0 auto!important;
  font:700 10px/1 var(--ew2-font-mono)!important;letter-spacing:.08em!important;
  color:var(--ew2-text2)!important;
  padding-left:12px!important;border-left:1px solid var(--ew2-border)!important;
  background:none!important;
}

#incidentSummary{
  flex:1 1 auto!important;
  min-width:0!important;
  align-self:center!important;
  padding-bottom:0!important;
}

.updated,
#updated{
  flex:0 0 auto!important;
  font:600 9.5px/1.3 var(--ew2-font-mono)!important;
  color:var(--ew2-text3)!important;
  text-align:right!important;
  white-space:nowrap!important;
  max-width:none!important;
  margin-left:auto!important;
}