/* Vantage read surface (Portal GOAT) — web-first slice-1. */
.vantage-shell { max-width: 1200px; margin: 0 auto; padding: 1.5rem; color: #c9d6e5; }
.vantage-head { margin-bottom: 1rem; }
.vantage-title { font-size: 1.5rem; margin: 0 0 .75rem; }
.vantage-sub { font-size: .8rem; color: #7f93aa; font-weight: 400; margin-left: .5rem; }
.vantage-ask { display: flex; gap: .5rem; }
.vantage-q {
  flex: 1; padding: .7rem .9rem; border-radius: 8px; border: 1px solid #2a3a52;
  background: #0f1826; color: #e6eef7; font-size: 1rem;
}
.vantage-ask-btn {
  padding: .7rem 1.2rem; border-radius: 8px; border: 0; cursor: pointer;
  background: #2f6ea5; color: #fff; font-weight: 600;
}
.vantage-ask-btn:hover { background: #3d84c4; }
.vantage-identity { margin-top: .5rem; font-size: .8rem; color: #7f93aa; }
.vantage-identity code { color: #9dd; background: #0f1826; padding: .1rem .4rem; border-radius: 4px; }
.vantage-identity-hint { color: #5f7288; }

.vantage-body { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; margin-top: 1rem; }
.vantage-answer {
  background: #0f1826; border: 1px solid #22314a; border-radius: 10px; padding: 1rem;
  align-self: start;
}
.vantage-answer-text { font-size: .95rem; line-height: 1.5; }
.vantage-answer-h { margin: 1rem 0 .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #7f93aa; }
.vantage-citations { list-style: none; margin: 0; padding: 0; }
.vantage-citations li { padding: .4rem 0; border-bottom: 1px solid #1a2740; font-size: .85rem; }
.cit-title { color: #d7e3f0; }
.cit-prov { color: #6f8298; font-size: .78rem; }

.vantage-stage {
  background: radial-gradient(circle at 50% 45%, #0d1826 0%, #080f1a 100%);
  border: 1px solid #22314a; border-radius: 10px; min-height: 480px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vantage-svg { width: 100%; display: flex; align-items: center; justify-content: center; }
.vantage-svg svg { max-width: 100%; height: auto; }
.vantage-empty { color: #5f7288; font-size: .9rem; }
.vantage-node { cursor: pointer; }
.vantage-node:hover circle { stroke: #9dd; }
.vantage-node:focus { outline: none; }
.vantage-node:focus circle { stroke: #ffd479; stroke-width: 3; }

@media (max-width: 800px) { .vantage-body { grid-template-columns: 1fr; } }

/* --- Hero identity toggle + Mission button (Vantage live demo) ------------- */
.vantage-identity { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vantage-identity-label { color: #7f93aa; }
.vantage-idtoggle { display: inline-flex; border: 1px solid #2a3a52; border-radius: 8px; overflow: hidden; }
.vantage-idbtn {
  padding: .35rem .7rem; font-size: .82rem; color: #9db2cc; text-decoration: none;
  background: #0f1826; border-right: 1px solid #2a3a52; transition: background .12s;
}
.vantage-idbtn:last-child { border-right: 0; }
.vantage-idbtn small { color: #5f7288; }
.vantage-idbtn:hover { background: #16273d; color: #d7e3f0; }
.vantage-idbtn.is-active { background: #2f6ea5; color: #fff; }
.vantage-idbtn.is-active small { color: #cfe3f5; }
.vantage-idbtn-ctrl { color: #b98; font-size: .78rem; }
.vantage-said { color: #9dd; background: #0f1826; padding: .15rem .45rem; border-radius: 4px; font-size: .78rem; }
.vantage-mission-btn {
  margin-left: auto; padding: .35rem .8rem; border-radius: 8px; text-decoration: none;
  background: #1c2c44; color: #ffd479; border: 1px solid #3a4a63; font-size: .85rem; font-weight: 600;
}
.vantage-mission-btn:hover { background: #26385a; }
.vantage-count { margin-top: .6rem; font-size: .82rem; color: #6fd3a8; font-weight: 600; }