/* HALØ live — continuation of thrice.
 * Black ground. Sulfur signal. One white. State colors only where they carry meaning.
 * Flat. No gradients. Depth from tone hierarchy and typography.
 */

:root {
  --ground-0: #0A0A0A;   /* page */
  --ground-1: #121212;   /* panel */
  --ground-2: #1A1A1A;   /* inset */
  --ground-3: #262626;   /* rule / grid */
  --ground-4: #333333;   /* raised edge */

  --ink-1:   #F5F5F5;
  --ink-2:   #A8A8A8;
  --ink-3:   #6B6B6B;

  --signal:  #E8FF3D;    /* sulfur — thrice's primary */
  --arc:     #FFB84A;    /* wound / attention */
  --cool:    #6AA9FF;    /* NATIVE */
  --ember:   #FF7A2E;    /* AURA */
  --heat:    #FF3B4F;    /* firing / SEALED */
  --violet:  #9B7CFF;    /* DORMANT */

  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--ground-0);
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.01em;
}
body { min-height: 100vh; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.005em; }

/* ============================================================
   MASTHEAD
============================================================ */
#masthead {
  padding: 18px 32px;
  border-bottom: 1px solid var(--ground-3);
}
.brandRow {
  display: flex; justify-content: space-between; align-items: center;
}
.brand { display: flex; align-items: center; }
.brand .mark {
  /* Heritage mark at 64px. Rendered via mask so the source PNG's color
     doesn't matter — background-color is what you see. */
  height: 64px;
  width: 64px;
  background-color: var(--signal);
  -webkit-mask-image: url("/static/halo-mark.png");
          mask-image: url("/static/halo-mark.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.clock {
  font-family: var(--mono);
  color: var(--ink-2);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.clock #wall_clock { color: var(--ink-1); }
.clock .sep { color: var(--ground-4); margin: 0 8px; }
#state_top { color: var(--signal); }

.tagline {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 780px;
}

/* ============================================================
   HERO — countdown + Ø
============================================================ */
#hero {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 32px;
  padding: 44px 32px 36px;
  border-bottom: 1px solid var(--ground-3);
  align-items: center;
}
@media (max-width: 1000px) { #hero { grid-template-columns: 1fr; } }

.heroLeft {}
.countdownLabel {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
body[data-alarm="leaning"] .countdownLabel { color: var(--arc); }
body[data-alarm="firing"]  .countdownLabel { color: var(--heat); }

.countdownBig {
  display: flex; align-items: baseline; gap: 12px;
}
.countdownBig #countdownValue {
  font-size: 96px; font-weight: 800;
  color: var(--ink-1);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.countdownUnit {
  font-size: 32px; font-weight: 700;
  color: var(--ink-3);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
body[data-alarm="firing"] .countdownBig #countdownValue { color: var(--heat); }
body[data-alarm="leaning"] .countdownBig #countdownValue { color: var(--arc); }

.countdownSub {
  margin-top: 14px;
  font-size: 13px; color: var(--ink-2);
  font-family: var(--sans);
  letter-spacing: 0.005em;
}
.countdownSub #dequeText { color: var(--ink-1); font-family: var(--mono); }

.verdictRow {
  margin-top: 28px;
  display: flex; align-items: baseline; gap: 20px;
}
.verdictLabel {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3);
}
.verdictValue {
  font-size: 22px; font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--signal);
}
body[data-alarm="leaning"] .verdictValue { color: var(--arc); }
body[data-alarm="firing"]  .verdictValue { color: var(--heat); }

.heroObject {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 320px;
}
#object { display: block; width: 100%; height: 100%; }
.objectMeta {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   CHANNELS — thrice's scored tiles, but for the predicate
============================================================ */
#channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1px;
  background: var(--ground-3);
  border-bottom: 1px solid var(--ground-3);
}
@media (max-width: 1100px) {
  #channels { grid-template-columns: repeat(2, 1fr); }
  #channels .scoreTile { grid-column: span 2; }
}

.channelTile, .scoreTile {
  background: var(--ground-1);
  padding: 20px 22px;
  display: flex; flex-direction: column;
  min-height: 152px;
}
.channelGlyph {
  font-size: 42px; font-weight: 800;
  color: var(--ink-3);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}
.channelTile.met .channelGlyph { color: var(--heat); }
.channelName {
  margin-top: 4px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3);
}
.channelValue {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--mono);
}
.channelValue > span:first-child {
  font-size: 24px; font-weight: 700;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.channelTile.met .channelValue > span:first-child { color: var(--heat); }
.channelLim {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
}
.channelBar {
  position: relative; height: 4px;
  background: var(--ground-2);
  margin-top: 8px;
  overflow: visible;
}
.channelFill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--signal);
  transition: width 0.6s ease, background 0.3s;
}
.channelTile.met .channelFill { background: var(--heat); }
.channelTile[data-channel="W"] .channelFill { background: var(--arc); }
.channelThr {
  position: absolute; top: -2px; bottom: -2px;
  width: 1px; background: var(--ink-1); opacity: 0.5;
}
.channelCells { display: flex; gap: 4px; margin-top: 8px; }
.channelCells span {
  flex: 1; height: 10px;
  background: var(--ground-2);
  transition: background 0.3s ease;
}
.channelCells span.on { background: var(--heat); }
.channelFoot {
  margin-top: 8px;
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.005em;
  font-family: var(--sans);
}

/* score tile */
.scoreTile {
  min-width: 200px;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.scoreLabel { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); }
.scoreValue {
  font-size: 56px; font-weight: 800;
  color: var(--signal);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.scoreOf { font-size: 22px; color: var(--ink-3); font-weight: 500; }
body[data-alarm="leaning"] .scoreValue > span:first-child { color: var(--arc); }
body[data-alarm="firing"]  .scoreValue > span:first-child { color: var(--heat); }
.scoreState {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================
   CHRONOLOGY RIBBON
============================================================ */
#chronology {
  padding: 24px 32px;
  border-bottom: 1px solid var(--ground-3);
}
.chronoHead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.chronoLabel { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); }
.chronoMeta  { font-size: 10px; letter-spacing: 0.2em;  text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#ribbon { width: 100%; height: 60px; display: block; }
.chronoScale {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   HUBS
============================================================ */
#hubs { padding: 32px; border-bottom: 1px solid var(--ground-3); }
.sectionHead {
  max-width: 780px;
  margin: 0 0 22px;
}
.sectionHead h2 {
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 8px;
}
.sectionHead p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

.hubsOverlayPane {
  background: var(--ground-1);
  border: 1px solid var(--ground-3);
  margin-bottom: 12px;
}
.paneHead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--ground-3);
}
.paneLabel { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.paneMeta  { font-size: 10px; letter-spacing: 0.2em;  text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.paneBody  { padding: 16px; position: relative; }
#hubsOverlay { width: 100%; height: 220px; display: block; }
.overlayLegend {
  position: absolute; top: 20px; right: 20px;
  display: flex; gap: 14px;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2);
}
.overlayLegend .swatch { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }

.hubsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ground-3);
}
@media (max-width: 900px) { .hubsGrid { grid-template-columns: repeat(2, 1fr); } }

.hubCard {
  background: var(--ground-1);
  padding: 18px;
  display: flex; flex-direction: column;
  min-height: 180px;
  border-top: 3px solid transparent;   /* accent set via JS */
}
.hubCard .name {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
}
.hubCard .value {
  font-size: 34px; font-weight: 800;
  color: var(--signal);
  line-height: 1;
  margin-top: 8px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hubCard .subline {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.hubCard canvas { width: 100%; flex: 1; margin-top: 12px; min-height: 60px; display: block; }
.hubCard.hot .value { color: var(--heat); }

/* ============================================================
   STORY
============================================================ */
#story {
  padding: 40px 32px 48px;
  max-width: 780px;
  border-bottom: 1px solid var(--ground-3);
}
#story p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 16px;
}
#story b { color: var(--ink-1); font-weight: 700; }
#story .storyDim { color: var(--ink-3); font-size: 13px; }

/* ============================================================
   MUTTER
============================================================ */
#mutter {
  display: flex; justify-content: space-between;
  padding: 12px 32px;
  background: var(--ground-0);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--signal);
  border-top: 1px solid var(--ground-3);
}
#mutter_chain { color: var(--ink-3); font-variant-numeric: tabular-nums; }
body[data-alarm="leaning"] #mutter_text { color: var(--arc); }
body[data-alarm="firing"]  #mutter_text { color: var(--heat); }

/* ============================================================
   CRACK OVERLAY
============================================================ */
#crack {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4;
  opacity: 0;
  transition: opacity 300ms ease;
}
#crack path {
  fill: none; stroke: var(--arc);
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
body[data-alarm="leaning"] #crack { opacity: 0.4; }
body[data-alarm="firing"]  #crack { opacity: 1; }
body[data-alarm="firing"]  #crack path { stroke: var(--heat); }
body[data-alarm="firing"] #masthead { border-bottom-color: var(--heat); }
body[data-alarm="firing"] #mutter   { border-top-color: var(--heat); }

/* ============================================================
   SYSTEMS SURFACE — dense, traversable ERCOT context
============================================================ */
#systems { border-bottom:1px solid var(--ground-3); }
.systemsTopbar,.densityHead,.matrixHead {
  display:flex; align-items:center; justify-content:space-between;
  text-transform:uppercase; font-size:9px; letter-spacing:.22em;
}
.systemsTopbar { padding:14px 32px; background:var(--ground-1); border-bottom:1px solid var(--ground-3); }
.eyebrow { color:var(--signal); font-weight:700; }
.surfaceTime { color:var(--ink-3); margin-left:14px; }
.surfaceControls { display:flex; align-items:center; gap:5px; }
.surfaceControls button {
  appearance:none; border:1px solid var(--ground-4); background:transparent; color:var(--ink-3);
  font:700 9px var(--mono); padding:6px 9px; cursor:pointer; letter-spacing:.12em;
}
.surfaceControls button:hover,.surfaceControls button.active { color:var(--ground-0); background:var(--signal); border-color:var(--signal); }
.sourceKey { color:var(--ink-3); margin-left:8px; }
.sourceKey i { width:6px; height:6px; display:inline-block; border-radius:50%; margin-right:5px; }
.realDot { background:var(--signal); }.demoDot { border:1px solid var(--arc); }.derivedDot { background:var(--cool); }
.vitalRail { display:grid; grid-template-columns:repeat(6,1fr); background:var(--ground-3); gap:1px; border-bottom:1px solid var(--ground-3); }
.vital { background:var(--ground-0); padding:12px 14px; cursor:pointer; min-width:0; }
.vital:hover,.vital.selected { background:var(--ground-2); box-shadow:inset 0 -2px var(--signal); }
.vitalLabel { color:var(--ink-3); font-size:8px; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
.vitalValue { color:var(--ink-1); font-size:20px; font-weight:750; margin-top:5px; white-space:nowrap; }
.vitalValue small { color:var(--ink-3); font-size:9px; font-weight:500; margin-left:4px; }
.vitalDelta { color:var(--ink-3); font-size:9px; margin-top:3px; }
.systemMatrix { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); border-bottom:1px solid var(--ground-3); }
.matrixMain { min-width:0; padding:14px 16px 10px 32px; border-right:1px solid var(--ground-3); }
.matrixHead { color:var(--ink-2); margin-bottom:10px; }
.matrixHead span:last-child { color:var(--ink-3); }
#focusChart { display:block; width:100%; height:230px; }
.focusScale { display:flex; justify-content:space-between; color:var(--ink-3); font-size:9px; margin-top:5px; }
.relationPane { padding:14px 32px 12px 16px; }
.relationList { display:flex; flex-direction:column; }
.relationRow { display:grid; grid-template-columns:1fr 62px 52px; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--ground-3); cursor:pointer; }
.relationRow:hover { color:var(--signal); }
.relationName { font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.rhoTrack { height:3px; background:var(--ground-3); position:relative; }
.rhoTrack i { height:100%; display:block; background:var(--cool); }
.relationRow.negative .rhoTrack i { background:var(--arc); }
.rhoValue { font-variant-numeric:tabular-nums; text-align:right; color:var(--ink-2); }
.relationNote { color:var(--ink-3); font:10px/1.4 var(--sans); margin-top:12px; }
.densitySection { padding:14px 32px 18px; border-bottom:1px solid var(--ground-3); min-width:0; }
.densityHead { color:var(--ink-2); margin-bottom:9px; }
.densityHead span:last-child { color:var(--ink-3); }
.densitySplit { display:grid; grid-template-columns:1fr 1fr; }
.densitySplit > .densitySection:first-child { border-right:1px solid var(--ground-3); }
.metricGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--ground-3); }
.metricGrid.compact { grid-template-columns:repeat(3,1fr); }
.metricCell { background:var(--ground-1); padding:10px 11px 8px; min-width:0; cursor:pointer; border-top:2px solid transparent; }
.metricCell:hover,.metricCell.selected { background:var(--ground-2); border-top-color:var(--signal); }
.metricCell .mHead { display:flex; justify-content:space-between; gap:4px; color:var(--ink-3); font-size:8px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; overflow:hidden; }
.metricCell .mSource { font-size:7px; letter-spacing:.05em; }
.metricCell .mSource.live { color:var(--signal); }.metricCell .mSource.demo { color:var(--arc); }.metricCell .mSource.derived { color:var(--cool); }
.metricCell .mValue { font-size:17px; font-weight:750; margin-top:5px; font-variant-numeric:tabular-nums; }
.metricCell .mValue small { font-size:8px; color:var(--ink-3); font-weight:500; }
.metricCell canvas { width:100%; height:34px; display:block; margin-top:5px; }
.priceMatrix { display:grid; grid-template-columns:100px repeat(4,1fr); gap:1px; background:var(--ground-3); }
.priceCell { background:var(--ground-1); padding:9px 11px; cursor:pointer; }
.priceCell.header { color:var(--ink-3); font-size:8px; text-transform:uppercase; letter-spacing:.16em; cursor:default; }
.priceCell.hub { color:var(--ink-2); font-size:9px; letter-spacing:.14em; }
.priceCell:hover:not(.header) { background:var(--ground-2); }
.priceCell strong { font-size:15px; }.priceCell small { color:var(--ink-3); margin-left:4px; }
@media(max-width:1000px){.vitalRail{grid-template-columns:repeat(3,1fr)}.systemMatrix{grid-template-columns:1fr}.matrixMain{border-right:0}.densitySplit{grid-template-columns:1fr}.metricGrid{grid-template-columns:repeat(3,1fr)}.priceMatrix{grid-template-columns:80px repeat(4,minmax(100px,1fr));overflow-x:auto}}

/* CALL RECEIPT — a defensible alarm, not a confidence decoration */
.alarmReceipt { margin-top:28px; border:1px solid var(--ground-3); background:var(--ground-1); max-width:780px; }
.receiptHead { display:flex; justify-content:space-between; padding:9px 11px; border-bottom:1px solid var(--ground-3); color:var(--ink-3); font-size:8px; letter-spacing:.2em; }
.receiptHead span:last-child { color:var(--signal); }
.receiptConditions { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ground-3); }
.receiptCondition { background:var(--ground-0); padding:9px 10px; display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:6px; }
.receiptCondition i { width:6px; height:6px; border:1px solid var(--ink-3); border-radius:50%; }
.receiptCondition span { color:var(--ink-3); font-size:8px; letter-spacing:.12em; }
.receiptCondition b { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.receiptCondition em { grid-column:2/4; color:var(--ink-3); font-size:8px; font-style:normal; }
.receiptCondition.met i { background:var(--heat); border-color:var(--heat); box-shadow:0 0 0 2px rgba(255,59,79,.12); }
.receiptCondition.met b { color:var(--heat); }
.receiptFoot { display:flex; flex-wrap:wrap; gap:7px 18px; padding:9px 11px; color:var(--ink-3); font-size:8px; letter-spacing:.1em; }
.receiptFoot b { color:var(--ink-2); }.receiptFoot .withheld { color:var(--arc); }
.chainLink { border:0; padding:0; color:var(--cool); background:none; font:inherit; cursor:pointer; letter-spacing:.1em; }
.chainLink:hover { color:var(--signal); text-decoration:underline; }
body[data-alarm="firing"] .alarmReceipt { border-color:var(--heat); }
body[data-alarm="firing"] .receiptHead span:last-child { color:var(--heat); }
@media(max-width:720px){.receiptConditions{grid-template-columns:1fr}.receiptFoot{flex-direction:column}}

/* AUDIT DRAWER — every call opens into lineage */
.auditDrawer { position:fixed; z-index:20; top:0; right:0; width:min(520px,92vw); height:100vh; background:var(--ground-1); border-left:1px solid var(--ground-4); transform:translateX(101%); transition:transform .22s ease; }
.auditDrawer.open { transform:translateX(0); }
.auditScrim { position:fixed; z-index:19; inset:0; background:rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:opacity .22s; }
.auditScrim.open { opacity:1; pointer-events:auto; }
.auditHead { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--ground-3); color:var(--signal); font-size:10px; letter-spacing:.28em; }
.auditHead button { border:0; background:none; color:var(--ink-2); font:24px/1 var(--sans); cursor:pointer; }
.auditBody { padding:24px 20px; overflow:auto; height:calc(100vh - 58px); }
.auditVerdict { font-size:30px; font-weight:800; letter-spacing:.08em; margin-bottom:25px; }
.auditBody dl { display:grid; grid-template-columns:145px 1fr; margin:0; border-top:1px solid var(--ground-3); }
.auditBody dt,.auditBody dd { margin:0; padding:11px 0; border-bottom:1px solid var(--ground-3); font-size:9px; line-height:1.45; }
.auditBody dt { color:var(--ink-3); letter-spacing:.13em; }.auditBody dd { color:var(--ink-1); overflow-wrap:anywhere; }
.auditBody .auditWarn { color:var(--arc); }
.auditCopy { margin-top:24px; color:var(--ink-3); font:12px/1.55 var(--sans); }