/* ON1 mission control — M5-flavored HUD. Pre-flight for the public
 * landing aesthetic per o's "use the m5-stack inspired gui when ON1
 * goes live" directive. */

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

:root {
  --bg:       #0a0d12;
  --panel:    #11161e;
  --panel-2:  #161c26;
  --panel-3:  #1c2330;
  --rule:     #232a36;
  --rule-2:   #2f3849;
  --fg:       #e0e6ef;
  --dim:      #7c8493;
  --accent:   #ffaa00;     /* M5 orange */
  --accent-2: #ff6633;     /* M5 deep orange */
  --good:     #6dd49a;
  --good-2:   #3fa978;
  --warn:     #f5d27a;
  --bad:      #d6553a;
  --link:     #ffaa00;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 100vh;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,170,0,.025) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,170,0,.025) 23px 24px),
    radial-gradient(ellipse at 50% 0%, #14181f 0%, #0a0d12 70%);
}

a { color: var(--link); }
a:hover { color: var(--accent-2); }
code, kbd { background: #0d1219; border: 1px solid var(--rule); padding: 0 .25rem; color: var(--accent); font-size: .9em; }

/* =========================================================== HUD strip */
.hud-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.25rem;
  border-bottom: 2px solid var(--accent);
  background: linear-gradient(180deg, #0e1219 0%, #0a0d12 100%);
  position: sticky; top: 0; z-index: 10;
  font-size: .8rem; letter-spacing: .04em;
}
.brand-block {
  font: 900 1.5rem 'Major Mono Display', monospace;
  color: #0a0d12;
  background: var(--accent);
  padding: 0 .5rem;
  letter-spacing: .14em;
  display: inline-block;
  box-shadow: 0 3px 0 var(--accent-2);
  margin-right: .65rem;
  transition: box-shadow .15s, transform .15s;
}
.brand-block:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--accent-2); }
.brand-sub { color: var(--dim); letter-spacing: .12em; }
.strip-l { display: flex; align-items: center; gap: .65rem; }
.strip-c {
  display: flex; justify-content: center; gap: .5rem;
}
.rd-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: .15rem .7rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  min-width: 76px;
}
.rd-k {
  color: var(--dim);
  font: 400 .62rem 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
}
.rd-v {
  color: var(--fg);
  font: 700 .92rem 'Major Mono Display', monospace;
  letter-spacing: .04em;
}
.rd-v.good { color: var(--good); }
.rd-v.warn { color: var(--warn); }
.rd-v.bad  { color: var(--bad); }
.strip-r {
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  color: var(--dim);
}
.strip-sep { color: var(--rule-2); }
.strip-clock {
  font: 700 .82rem 'Major Mono Display', monospace;
  color: var(--accent);
  letter-spacing: .08em;
}
.strip-link {
  font-size: .78rem;
  letter-spacing: .08em;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.strip-link:hover { border-bottom-color: var(--accent); }

/* =========================================================== main grid */
.hud {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex; flex-direction: column;
  gap: 1.25rem;
}

.board-title {
  margin: 0 0 .65rem;
  font: 700 .78rem 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .35rem;
}

/* ─── service tiles ─── */
.board-cards { background: var(--panel); border: 1px solid var(--rule); padding: 1rem 1.1rem 1.1rem; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: .55rem;
}
@keyframes tile-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--rule-2), 0 0 0 0 rgba(109,212,154,0); }
  50%      { box-shadow: inset 0 0 0 1px var(--good), 0 0 0 3px rgba(109,212,154,.18); }
}
@keyframes tile-pulse-bad {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--rule-2), 0 0 0 0 rgba(214,85,58,0); }
  50%      { box-shadow: inset 0 0 0 1px var(--bad),  0 0 0 3px rgba(214,85,58,.22); }
}
.tile {
  position: relative;
  background: var(--panel-2);
  border-left: 4px solid var(--accent);
  padding: .65rem .8rem;
  cursor: pointer;
  transition: transform .12s, background .15s;
  text-decoration: none;
  color: var(--fg);
  display: block;
}
.tile:hover { background: var(--panel-3); transform: translateY(-2px); }
.tile .tile-name {
  font: 700 .98rem 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: var(--fg);
}
.tile .tile-tag {
  color: var(--dim);
  font-size: .73rem;
  letter-spacing: .03em;
  margin-top: .1rem;
  min-height: 1em;
}
.tile .tile-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .45rem;
}
.tile .tile-metric {
  font: 700 1.1rem 'Major Mono Display', monospace;
  color: var(--accent);
  letter-spacing: .04em;
}
.tile .tile-state {
  font-size: .7rem;
  letter-spacing: .1em;
}
.tile .tile-state.good { color: var(--good); }
.tile .tile-state.bad  { color: var(--bad); }
.tile .tile-state.warn { color: var(--warn); }
.tile.alive { animation: tile-pulse 5s ease-in-out infinite; }
.tile.dead  { animation: tile-pulse-bad 3s ease-in-out infinite; border-left-color: var(--bad); }
.tile.dead .tile-metric { color: var(--bad); }
.tile.dead .tile-name { color: var(--dim); text-decoration: line-through; }
.tile.warm { border-left-color: var(--warn); }

/* ─── quick actions ─── */
.board-actions { background: var(--panel); border: 1px solid var(--rule); padding: 1rem 1.1rem; }
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .85rem;
}
.action-card {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.action-card label {
  color: var(--dim);
  font: 700 .7rem 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
}
.action-card input, .action-card select {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--rule);
  font: 400 .85rem 'IBM Plex Mono', monospace;
  padding: .35rem .55rem;
  width: 100%;
}
.action-card input:focus, .action-card select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,170,0,.15);
}
.action-row { display: flex; gap: .4rem; align-items: stretch; }
.action-row select { flex: 1; }
.primary {
  background: var(--accent); color: #0a0d12;
  border: 1px solid var(--accent);
  font: 700 .76rem 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  padding: .4rem .7rem;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--accent-2);
  transition: background .12s, transform .08s;
}
.primary:hover { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.primary:active { transform: translateY(2px); box-shadow: none; }
.primary:disabled { opacity: .5; cursor: not-allowed; }
.action-out {
  border-top: 1px dashed var(--rule);
  padding-top: .45rem;
  margin-top: .15rem;
  font-size: .8rem;
  color: var(--dim);
  min-height: 1.4em;
  line-height: 1.45;
  max-height: 9em;
  overflow-y: auto;
}
.action-out .ok { color: var(--good); }
.action-out .err { color: var(--bad); }
.action-out strong { color: var(--fg); font-weight: 600; }
.concept-display {
  font-size: .9rem; color: var(--fg);
  background: var(--bg); padding: .55rem .7rem;
  border: 1px solid var(--rule);
  min-height: 4em;
  line-height: 1.5;
}
.concept-display .score { color: var(--accent); font-weight: 700; margin-right: .4rem; }
.concept-display .cat   { color: var(--dim); font-size: .75rem; letter-spacing: .08em; }
.concept-display .titl  { display: block; margin-top: .1rem; }

/* ─── stream ─── */
.board-stream {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 880px) {
  .board-stream { grid-template-columns: 1fr; }
}
.board-stream-l, .board-stream-r {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 1rem 1.1rem;
}
.ticker, .commit-feed {
  list-style: none; margin: 0; padding: 0;
  max-height: 320px; overflow-y: auto;
}
.ticker li, .commit-feed li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: .55rem;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--rule);
  font-size: .82rem;
  align-items: baseline;
}
.ticker li:last-child, .commit-feed li:last-child { border-bottom: none; }
.tick-id, .commit-sha {
  font-weight: 700;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
}
.tick-label { color: var(--fg); letter-spacing: .04em; }
.tick-state {
  font-size: .72rem; letter-spacing: .1em; color: var(--dim);
  white-space: nowrap;
}
.tick-state.completed { color: var(--good); }
.tick-state.running   { color: var(--warn); }
.tick-state.failed    { color: var(--bad); }
.tick-state.paused    { color: var(--dim); }
.tick-state.queued    { color: var(--accent); }

.commit-meta { color: var(--dim); font-size: .72rem; white-space: nowrap; }
.commit-subject { color: var(--fg); }

/* =========================================================== footer */
.hud-foot {
  text-align: center;
  padding: 1.1rem;
  color: var(--dim);
  font-size: .72rem;
  letter-spacing: .04em;
}

/* small-screen tweaks */
@media (max-width: 720px) {
  .hud-strip { grid-template-columns: 1fr; gap: .5rem; padding: .55rem .75rem; }
  .strip-c { justify-content: flex-start; }
  .strip-r { justify-content: flex-start; }
}