/* Mission 001 dashboard v2 — refined hybrid */
:root {
  --bg: #04070D;
  --panel: #0A1018;
  --panel2: #060B13;
  --line: #1C2A3D;
  --line2: #131F30;
  --dim: #2A4A78;
  --mid: #5A6E88;
  --txt: #F2F6FB;
  --txt2: #8FA3BC;
  --blue: #5B9DF5;
  --blue2: #3D7EDB;
  --bluepale: #8FB7F0;
  --ok: #3DDB8E;
  --bad: #C2564E;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
  --disp: 'Oswald', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--txt); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.app { min-height: 100vh; padding-bottom: 128px; }
.wrap { max-width: 1480px; margin: 0 auto; padding: 38px 44px 0; }

/* ---------- masthead ---------- */
.mh { margin-bottom: 24px; }
.mh-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mh-kicker {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--blue);
}
.mh-clock { color: var(--txt2); }
.mh-livedot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 10px var(--blue); animation: pulse 2s infinite; flex: none;
}
.mh-livedot.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: none; }
.mh-share {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--txt2);
  background: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px;
  cursor: pointer; flex: none; transition: all 0.15s;
}
.mh-share:hover { color: var(--txt); border-color: var(--dim); }
.mh-title {
  font-family: var(--disp); font-weight: 600; text-transform: uppercase;
  font-size: clamp(22px, 2.5vw, 35px); line-height: 1.18; margin: 14px 0 10px;
  text-wrap: balance; max-width: 52ch;
}
.mh-explainer { font-size: 15px; line-height: 1.55; color: var(--txt2); margin: 0; max-width: 62ch; text-wrap: pretty; }

/* ---------- telemetry strip ---------- */
.strip {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr 1.6fr;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel2);
  overflow: hidden;
}
.strip-cell { padding: 16px 20px 14px; min-width: 0; }
.strip-cell + .strip-cell { border-left: 1px solid var(--line2); }
.strip-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--mid); }
.strip-val {
  font-family: var(--disp); font-weight: 600; font-size: 23px; text-transform: uppercase;
  margin-top: 7px; line-height: 1.1; letter-spacing: 0.02em;
}
.strip-val.num { font-size: 28px; color: var(--blue); }
.strip-val.num.ok { color: var(--ok); }
.strip-val em { font-style: normal; font-family: var(--mono); font-size: 12px; margin-left: 8px; vertical-align: 4px; }
.strip-sub { font-family: var(--mono); font-size: 11px; color: var(--mid); margin-top: 5px; letter-spacing: 0.04em; }
.strip-sub s { color: var(--dim); }
.strip-update { font-size: 13.5px; line-height: 1.5; color: var(--txt2); margin-top: 9px; }
.strip-update b { font-family: var(--mono); font-size: 11px; color: var(--blue); font-weight: 500; margin-right: 7px; }
em.up, .up { color: var(--ok); }
em.down, .down { color: var(--bad); }

/* ---------- main grid ---------- */
.main { display: grid; grid-template-columns: 1fr 328px; gap: 14px; margin-top: 14px; align-items: stretch; }
.graphwrap {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column;
}
.graphwrap .ng-svg { flex: 1; }
.rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rail .rp { flex: 1; }
.lower { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; margin-top: 14px; }

/* ---------- panels ---------- */
.panel-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--blue); margin-bottom: 12px; }
.panel-head.warn { color: var(--bad); margin-top: 16px; }

.rp { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.rp-dest { font-family: var(--disp); font-size: 19px; font-weight: 500; text-transform: uppercase; line-height: 1.2; }
.rp-prob { font-family: var(--disp); font-size: 40px; font-weight: 600; color: var(--blue); margin: 6px 0 12px; }
.rp-prob.ok { color: var(--ok); }
.rp-prob span { font-size: 21px; }
.rp-prob em { font-style: normal; font-family: var(--mono); font-size: 12px; margin-left: 8px; }
.rp-step { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line2); align-items: flex-start; }
.rp-n { font-family: var(--mono); font-size: 10px; color: var(--mid); padding-top: 3px; flex: none; }
.rp-step i { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--line); flex: none; }
.rp-step.done i { background: var(--ok); }
.rp-step.warn i { background: var(--bad); animation: pulse 1.6s infinite; }
.rp-step.active i { background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: pulse 1.6s infinite; }
.rp-step b { display: block; font-size: 13.5px; font-weight: 600; }
.rp-step span { font-family: var(--mono); font-size: 10px; color: var(--mid); letter-spacing: 0.06em; }
.rp-step.warn span { color: var(--bad); }
.rp-empty, .cd-empty { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--mid); padding: 18px 0 6px; }
.rp-empty span, .cd-empty span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.04em; color: var(--dim); }

.cd { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.cd-list { display: flex; flex-direction: column; }
.cd-row {
  display: grid; grid-template-columns: 26px 1fr auto 70px 44px; gap: 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line2); min-width: 0;
}
.cd-rank { font-family: var(--mono); font-size: 11px; color: var(--mid); }
.cd-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--mid); }
.cd-row.lead .cd-state { color: var(--blue); }
.cd-row.confirmed .cd-state, .cd-row.verified .cd-state { color: var(--ok); }
.cd-row.downgraded .cd-state, .cd-row.archived .cd-state { color: var(--bad); }
.cd-row.downgraded .cd-name, .cd-row.archived .cd-name { color: var(--mid); text-decoration: line-through; text-decoration-color: rgba(194, 86, 78, 0.6); }
.cd-row.paused .cd-name { color: var(--mid); }
.cd-bar { height: 4px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: var(--blue2); border-radius: 2px; transition: width 0.6s ease; }
.cd-row.confirmed .cd-bar i, .cd-row.verified .cd-bar i { background: var(--ok); }
.cd-row.downgraded .cd-bar i, .cd-row.archived .cd-bar i { background: #54392F; }
.cd-prob { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--txt2); }
.cd-row.lead .cd-prob { color: var(--blue); font-weight: 600; }
.cd-row.confirmed .cd-prob, .cd-row.verified .cd-prob { color: var(--ok); font-weight: 600; }

.fd { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.fd-row { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line2); }
.fd-row b { font-family: var(--mono); font-size: 10.5px; color: var(--blue); font-weight: 500; flex: none; width: 56px; padding-top: 2px; }
.fd-row p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--txt2); }
.fd-row em { font-style: normal; font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.fd-dead-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line2); }
.fd-dead-row i { font-style: normal; color: var(--bad); font-size: 11px; flex: none; }
.fd-dead-row s { font-size: 12.5px; color: var(--mid); text-decoration-color: rgba(194, 86, 78, 0.5); }

.na { background: linear-gradient(160deg, #0C1626, var(--panel)); border: 1px solid var(--dim); border-radius: 12px; padding: 18px 22px; }
.na.ok { border-color: rgba(61, 219, 142, 0.45); background: linear-gradient(160deg, #0A1A14, var(--panel)); }
.na.ok .panel-head { color: var(--ok); }
.na p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--txt); text-wrap: pretty; }

/* ---------- graph ---------- */
.ng-svg { display: block; width: 100%; height: auto; }
.ng-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 12px 22px; border-top: 1px solid var(--line2);
  font-family: var(--mono); font-size: 10.5px; color: var(--mid); letter-spacing: 0.08em;
}
.ng-legend span { display: flex; align-items: center; gap: 7px; }
.ng-legend i { display: inline-block; width: 9px; height: 9px; flex: none; }
.ng-l-person { border-radius: 50%; background: var(--blue); }
.ng-l-event { transform: rotate(45deg); border: 1px solid var(--blue2); }
.ng-l-org { border: 1px solid var(--blue2); }
.ng-l-dest { transform: rotate(45deg); background: var(--blue2); }
.ng-l-frontier { border-radius: 50%; background: var(--dim); }
.ng-l-cleared { border-radius: 50%; background: var(--ok); }
.ng-l-dead { border-radius: 50%; border: 1px solid var(--bad); }
.ng-l-deg { margin-left: auto; color: var(--dim); }

.ng-flow { animation: ngdash 1.2s linear infinite; }
.ng-frontier { animation: pulse 2.4s infinite; }
.ng-destpulse { animation: pulse 3s infinite; }
.ng-ring { animation: ngring 2.6s infinite; transform-origin: 0 0; }
.ng-new { animation: ngring 2s infinite; transform-origin: 0 0; }

/* ---------- scrubber ---------- */
.sc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center;
  background: rgba(6, 11, 19, 0.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(6px); height: 92px;
}
.sc-label {
  display: flex; align-items: center; padding: 0 22px; align-self: stretch;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--blue);
  border-right: 1px solid var(--line); flex: none;
}
.sc-track {
  position: relative; flex: 1; display: flex; justify-content: space-between;
  padding: 0 36px; align-items: center; min-width: 0; overflow-x: auto;
}
.sc-line {
  position: absolute; left: 44px; right: 44px; top: 50%; height: 2px;
  transform: translateY(calc(-50% - 11px)); background: var(--line2);
}
.sc-line i { display: block; height: 100%; background: var(--blue2); transition: width 0.4s ease; }
.sc-stop {
  position: relative; z-index: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; min-width: 58px; color: var(--mid); font-family: var(--mono);
}
.sc-stop i { width: 11px; height: 11px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line); transition: all 0.2s; }
.sc-stop.past i { border-color: var(--blue2); background: var(--blue2); }
.sc-stop.on i { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.sc-stop b { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; }
.sc-stop span { font-size: 8.5px; letter-spacing: 0.12em; white-space: nowrap; }
.sc-stop.on { color: var(--txt); }
.sc-stop.on span { color: var(--blue); }
.sc-stop:hover i { border-color: var(--blue); }
.sc-hint {
  display: flex; align-items: center; padding: 0 22px; align-self: stretch;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--dim);
  border-left: 1px solid var(--line); flex: none;
}

/* ---------- share card ---------- */
.shc-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(2, 4, 8, 0.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  backdrop-filter: blur(4px); cursor: pointer;
}
.shc-hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mid); }
.shc-sizer { flex: none; }
.shc-card {
  position: relative; width: 1200px; height: 630px; cursor: default;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transform-origin: top left;
}
.shc-graph { position: absolute; inset: 0; opacity: 0.5; }
.shc-graph .ng-svg { width: 100%; height: 100%; }
.shc-content {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 48px 56px;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.1) 30%, rgba(4, 7, 13, 0.88) 78%);
}
.shc-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; color: var(--blue); }
.shc-title {
  font-family: var(--disp); font-weight: 600; text-transform: uppercase;
  font-size: 36px; line-height: 1.15; margin: 14px 0 26px; max-width: 44ch; text-wrap: balance;
}
.shc-stats { display: flex; gap: 56px; }
.shc-stats b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--mid); font-weight: 500; }
.shc-stats span { display: block; font-family: var(--disp); font-size: 26px; font-weight: 600; text-transform: uppercase; margin-top: 6px; }
.shc-stats span.blue { color: var(--blue); }
.shc-stats span.ok { color: var(--ok); }
.shc-foot { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--mid); margin-top: 26px; }

/* ---------- animations ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ngdash { to { stroke-dashoffset: -24; } }
@keyframes ngring { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .main { grid-template-columns: 1fr; }
  .rail { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip-cell.wide { grid-column: span 2; border-top: 1px solid var(--line2); }
  .strip-cell:nth-child(3) { border-left: none; border-top: 1px solid var(--line2); }
}
@media (max-width: 880px) {
  .wrap { padding: 26px 18px 0; }
  .app { padding-bottom: 150px; }
  .mh-title { font-size: 22px; }
  .mh-explainer { font-size: 14px; }
  .strip { grid-template-columns: 1fr; }
  .strip-cell + .strip-cell { border-left: none; border-top: 1px solid var(--line2); }
  .strip-cell.wide { grid-column: auto; }
  .rail, .lower { grid-template-columns: 1fr; }
  .ng-legend { padding: 12px 16px 14px; }
  .ng-l-deg { display: none; }
  .sc { height: auto; flex-wrap: wrap; }
  .sc-label { padding: 10px 16px; border-right: none; width: 100%; border-bottom: 1px solid var(--line2); }
  .sc-hint { display: none; }
  .sc-track { padding: 2px 12px 6px; }
  .sc-stop { min-width: 50px; }
  .sc-line { left: 32px; right: 32px; }
  .mh-share { display: none; }
}