/* ============================================================================
   Space Traffic Digital Twin — demo styles
   Mirrored in two repos (edit once, copy to the other):
     · PHG04/space_traffic_digital_twin → web/css/digital-twin.css (home)
     · PHG04/website                    → assets/css/digital-twin.css (mirror)
   Uses the portfolio token sheet (tokens.css); the standalone page in the twin
   repo ships a minimal token fallback.
   ============================================================================ */

.twin { margin: var(--s-8, 48px) 0; }

/* The demo toggles panels with the hidden attribute; explicit display values
   below must never override it. */
.twin [hidden] { display: none !important; }

/* In split stages the per-half clocks replace the HUD clock chip. */
.twin:not([data-stage="live"]) [data-tw-chip-clock] { display: none; }

/* ---- Stepper -------------------------------------------------------------- */
.twin__stepper {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--s-4, 16px);
  overflow-x: auto; scrollbar-width: none;
}
.twin__stepper::-webkit-scrollbar { display: none; }
.twin__step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px;
  background: var(--bg-1, #121721);
  border: 1px solid var(--line, #222A3A);
  border-radius: var(--r-full, 999px);
  color: var(--ink-3, #7F8AA0);
  font: 500 0.8rem/1 var(--font-sans, sans-serif);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color var(--dur-fast, 140ms), color var(--dur-fast, 140ms), background var(--dur-fast, 140ms);
}
.twin__step:hover { color: var(--ink, #E8EDF5); border-color: var(--line-strong, #323B50); }
.twin__step[aria-selected="true"] {
  color: var(--accent-hi, #B6E5D6);
  border-color: var(--accent-lo, #5FA890);
  background: var(--accent-wash, rgba(143,213,192,0.10));
}
.twin__step--done { color: var(--ink-4, #55607A); }
.twin__step--done .twin__step-n { background: var(--accent-lo, #5FA890); color: var(--bg, #0A0E14); }
.twin__step-n {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-3, #242C40);
  font: 600 0.68rem/1 var(--font-mono, monospace);
  color: var(--ink-2, #B9C2D1);
}
.twin__step[aria-selected="true"] .twin__step-n { background: var(--accent, #8FD5C0); color: var(--bg, #0A0E14); }
.twin__step-sep { width: 14px; height: 1px; background: var(--line-strong, #323B50); flex-shrink: 0; }

/* ---- Stage layout ----------------------------------------------------------- */
.twin__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: var(--s-4, 16px);
  align-items: stretch;
}
.twin__viewport {
  position: relative;
  border: 1px solid var(--line, #222A3A);
  border-radius: var(--r-3, 12px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 10%, #0d1320 0%, var(--bg, #0A0E14) 70%);
  min-height: 420px;
}
.twin__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; touch-action: none; cursor: grab;
}
.twin__canvas:active { cursor: grabbing; }

/* ---- Floating labels (ISS etc.) --------------------------------------------- */
.twin__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.twin__label {
  position: absolute; top: 0; left: 0;
  padding: 2px 7px 2px 6px;
  font: 500 0.66rem/1.4 var(--font-mono, monospace);
  letter-spacing: 0.06em;
  color: var(--accent-hi, #B6E5D6);
  background: rgba(10, 14, 20, 0.72);
  border: 1px solid rgba(143, 213, 192, 0.35);
  border-radius: var(--r-1, 4px);
  white-space: nowrap;
  margin-top: -26px;
}
.twin__label::after {
  content: "";
  position: absolute; left: 50%; bottom: -7px;
  width: 1px; height: 7px;
  background: rgba(143, 213, 192, 0.5);
}

/* ---- Split overlay ------------------------------------------------------------ */
.twin__split {
  position: absolute; inset: 0;
  display: flex; pointer-events: none;
}
.twin__split-half {
  flex: 1; display: flex; flex-direction: column; align-items: flex-end;
  padding: 10px 10px 0 0; gap: 3px; min-width: 0;
}
.twin__split-divider {
  width: 1px; align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--accent-lo, #5FA890) 18%, var(--accent-lo, #5FA890) 82%, transparent);
  opacity: 0.65;
}
.twin__split--enter .twin__split-divider { animation: twinDividerIn 700ms var(--ease-out, ease-out); }
@keyframes twinDividerIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.twin__split--enter .twin__split-half:last-child { animation: twinHalfIn 900ms var(--ease-out, ease-out); }
@keyframes twinHalfIn { from { opacity: 0; } to { opacity: 1; } }
.twin__split-tag {
  font: 600 0.62rem/1 var(--font-mono, monospace);
  letter-spacing: 0.14em;
  padding: 4px 9px;
  border-radius: var(--r-full, 999px);
  background: rgba(10, 14, 20, 0.7);
  border: 1px solid var(--line-strong, #323B50);
  color: var(--ink-3, #7F8AA0);
}
.twin__split-tag--twin { color: var(--accent-hi, #B6E5D6); border-color: var(--accent-lo, #5FA890); }
.twin__split-clock {
  font: 500 0.66rem/1 var(--font-mono, monospace);
  color: var(--ink-4, #55607A);
  background: rgba(10, 14, 20, 0.55);
  padding: 2px 7px; border-radius: var(--r-1, 4px);
}
.twin__split-clock--ahead { color: var(--accent, #8FD5C0); }

/* ---- HUD chips ------------------------------------------------------------------ */
.twin__hud {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  pointer-events: none; max-width: 46%;
}
.twin__chip {
  font: 500 0.66rem/1.3 var(--font-mono, monospace);
  color: var(--ink-2, #B9C2D1);
  background: rgba(10, 14, 20, 0.72);
  border: 1px solid var(--line, #222A3A);
  border-radius: var(--r-1, 4px);
  padding: 3px 8px;
  backdrop-filter: blur(4px);
}
.twin__chip--live {
  color: var(--accent-hi, #B6E5D6);
  border-color: var(--accent-lo, #5FA890);
}
.twin__chip--live::before {
  content: "●"; margin-right: 5px; color: var(--accent, #8FD5C0);
  animation: twinBlink 2.2s ease-in-out infinite;
}
@keyframes twinBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.twin__chip--accent { color: var(--accent-hi, #B6E5D6); }

/* ---- Scan progress ----------------------------------------------------------------- */
.twin__scanbar {
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: min(440px, 86%);
  background: rgba(10, 14, 20, 0.85);
  border: 1px solid var(--accent-lo, #5FA890);
  border-radius: var(--r-2, 8px);
  padding: 9px 12px 10px;
  backdrop-filter: blur(6px);
}
.twin__scanbar-head {
  display: flex; align-items: center; gap: 8px;
  font: 500 0.7rem/1.3 var(--font-mono, monospace);
  color: var(--accent-hi, #B6E5D6);
  margin-bottom: 7px;
}
.twin__scanbar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #8FD5C0);
  animation: twinBlink 0.9s ease-in-out infinite;
}
.twin__scanbar-track {
  height: 4px; border-radius: 2px;
  background: var(--bg-3, #242C40);
  overflow: hidden;
}
.twin__scanbar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-lo, #5FA890), var(--accent, #8FD5C0));
  transition: width 120ms linear;
}

/* ---- Loading / hint ------------------------------------------------------------------ */
.twin__loading {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px;
  font: 500 0.78rem/1.4 var(--font-mono, monospace);
  color: var(--ink-2, #B9C2D1);
  background: rgba(10, 14, 20, 0.85);
  border: 1px solid var(--line-strong, #323B50);
  border-radius: var(--r-2, 8px);
  padding: 10px 16px;
  z-index: 3;
}
.twin__loading-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #8FD5C0);
  animation: twinBlink 1s ease-in-out infinite;
}
.twin__hint {
  position: absolute; right: 12px; bottom: 10px;
  margin: 0;
  font: 400 0.64rem/1 var(--font-mono, monospace);
  color: var(--ink-4, #55607A);
  pointer-events: none;
}

/* ---- Side panel ------------------------------------------------------------------------ */
.twin__panel {
  display: flex; flex-direction: column; gap: var(--s-3, 12px);
  min-width: 0;
}
.twin__card {
  background: var(--bg-1, #121721);
  border: 1px solid var(--line, #222A3A);
  border-radius: var(--r-3, 12px);
  padding: var(--s-4, 16px);
  display: flex; flex-direction: column; gap: var(--s-3, 12px);
  max-height: 560px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--bg-3, #242C40) transparent;
}
.twin__kicker {
  margin: 0;
  font: 600 0.66rem/1.4 var(--font-mono, monospace);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-lo, #5FA890);
}
.twin__copy { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-2, #B9C2D1); }
.twin__copy strong { color: var(--ink, #E8EDF5); font-weight: 600; }
.twin__copy em { color: var(--accent-hi, #B6E5D6); font-style: italic; }
.twin__copy--dim { font-size: 0.78rem; color: var(--ink-3, #7F8AA0); }
.t-coral { color: #ff8c6a; }
.t-coral-dim { color: #ffb39a; }

/* ---- Buttons ------------------------------------------------------------------------------ */
.twin__btn {
  appearance: none;
  background: var(--bg-2, #1A2030);
  border: 1px solid var(--line-strong, #323B50);
  border-radius: var(--r-2, 8px);
  color: var(--ink-2, #B9C2D1);
  font: 500 0.8rem/1.2 var(--font-sans, sans-serif);
  padding: 9px 13px;
  cursor: pointer;
  transition: border-color var(--dur-fast, 140ms), color var(--dur-fast, 140ms), box-shadow var(--dur-fast, 140ms);
}
.twin__btn:hover { border-color: var(--accent-lo, #5FA890); color: var(--ink, #E8EDF5); }
.twin__btn:disabled { opacity: 0.45; cursor: default; }
.twin__btn:disabled:hover { border-color: var(--line-strong, #323B50); color: var(--ink-2, #B9C2D1); }
.twin__btn--primary {
  background: var(--accent-wash, rgba(143,213,192,0.10));
  border-color: var(--accent-lo, #5FA890);
  color: var(--accent-hi, #B6E5D6);
  font-weight: 600;
}
.twin__btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-glow, 0 0 24px rgba(143,213,192,0.22)); color: var(--accent-hi, #B6E5D6); }
.twin__row { display: flex; gap: 8px; flex-wrap: wrap; }
.twin__row .twin__btn { flex: 1; }

/* ---- Segmented control ----------------------------------------------------------------------- */
.twin__seg {
  display: flex;
  border: 1px solid var(--line-strong, #323B50);
  border-radius: var(--r-2, 8px);
  overflow: hidden;
}
.twin__seg button {
  flex: 1;
  appearance: none; border: none;
  background: transparent;
  color: var(--ink-3, #7F8AA0);
  font: 500 0.74rem/1 var(--font-mono, monospace);
  padding: 8px 0;
  cursor: pointer;
  border-right: 1px solid var(--line, #222A3A);
  transition: background var(--dur-fast, 140ms), color var(--dur-fast, 140ms);
}
.twin__seg button:last-child { border-right: none; }
.twin__seg button:hover { color: var(--ink, #E8EDF5); }
.twin__seg button[aria-pressed="true"] {
  background: var(--accent-wash, rgba(143,213,192,0.10));
  color: var(--accent-hi, #B6E5D6);
}

/* ---- Groups / sliders / selects ----------------------------------------------------------------- */
.twin__group { display: flex; flex-direction: column; gap: 8px; }
.twin__group-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 0.64rem/1.4 var(--font-mono, monospace);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3, #7F8AA0);
}
.twin__group-value { color: var(--accent, #8FD5C0); letter-spacing: 0; text-transform: none; }
.twin__slider { display: flex; flex-direction: column; gap: 6px; }
.twin__slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.twin__slider-head .label { font-size: 0.76rem; color: var(--ink-2, #B9C2D1); }
.twin__slider-head .value { font: 500 0.74rem/1 var(--font-mono, monospace); color: var(--accent, #8FD5C0); }

.twin input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 18px;
  background: transparent; cursor: pointer;
}
.twin input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: var(--bg-3, #242C40);
}
.twin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #8FD5C0);
  border: 2px solid var(--bg, #0A0E14);
  margin-top: -5px;
}
.twin input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: var(--bg-3, #242C40);
}
.twin input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent, #8FD5C0);
  border: 2px solid var(--bg, #0A0E14);
}
.twin input[type="range"]:disabled { opacity: 0.4; }

.twin__select {
  appearance: none;
  background: var(--bg-2, #1A2030) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237F8AA0' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--line-strong, #323B50);
  border-radius: var(--r-2, 8px);
  color: var(--ink-2, #B9C2D1);
  font: 500 0.78rem/1.2 var(--font-sans, sans-serif);
  padding: 8px 28px 8px 10px;
  width: 100%;
  cursor: pointer;
}
.twin__select:hover { border-color: var(--accent-lo, #5FA890); }
.twin__srcinfo { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--ink-3, #7F8AA0); }
.twin__srcinfo a { color: var(--accent, #8FD5C0); text-decoration: none; }
.twin__srcinfo a:hover { text-decoration: underline; }

.twin__toggle {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8rem; color: var(--ink-2, #B9C2D1);
  cursor: pointer;
}
.twin__toggle input { accent-color: var(--accent, #8FD5C0); width: 15px; height: 15px; }
.twin__noisectl { display: flex; flex-direction: column; gap: 8px; }

/* ---- Event list -------------------------------------------------------------------------------------- */
.twin__events {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line, #222A3A);
  border-radius: var(--r-2, 8px);
  overflow: hidden;
  background: var(--bg, #0A0E14);
}
.twin__event {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line, #222A3A);
}
.twin__event:last-child { border-bottom: none; }
.twin__event--sel { background: var(--accent-wash, rgba(143,213,192,0.10)); box-shadow: inset 2px 0 0 var(--accent, #8FD5C0); }
.twin__event-main {
  appearance: none; border: none; background: transparent;
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  padding: 8px 10px;
  cursor: pointer; text-align: left;
}
.twin__event-main:hover { background: rgba(143, 213, 192, 0.05); }
.twin__event-rank {
  font: 600 0.66rem/1 var(--font-mono, monospace);
  color: var(--ink-4, #55607A);
  width: 14px; flex-shrink: 0; text-align: right;
}
.twin__event-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.twin__event-pair {
  font: 500 0.76rem/1.3 var(--font-sans, sans-serif);
  color: var(--ink, #E8EDF5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.twin__event-pair .arr { color: var(--accent-lo, #5FA890); }
.twin__event-meta {
  font: 400 0.66rem/1.3 var(--font-mono, monospace);
  color: var(--ink-3, #7F8AA0);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.twin__sev { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.twin__sev--crit  { background: #ff6b57; box-shadow: 0 0 6px rgba(255, 107, 87, 0.7); }
.twin__sev--high  { background: #ff8c6a; }
.twin__sev--watch { background: var(--cat-research, #C8B87A); }
.twin__sev--low   { background: var(--accent-lo, #5FA890); }
.twin__event-watch {
  appearance: none; border: none;
  border-left: 1px solid var(--line, #222A3A);
  background: transparent;
  font: 500 0.64rem/1 var(--font-mono, monospace);
  color: var(--accent-lo, #5FA890);
  padding: 0 10px;
  cursor: pointer; white-space: nowrap;
}
.twin__event-watch:hover { color: var(--accent-hi, #B6E5D6); background: rgba(143, 213, 192, 0.06); }
.twin__event-empty {
  padding: 12px;
  font-size: 0.76rem; color: var(--ink-4, #55607A);
}
.twin__events--compact .twin__event-pair { font-size: 0.72rem; }

/* ---- ACT panel ------------------------------------------------------------------------------------------- */
.twin__act { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.twin__missrow { display: flex; align-items: center; gap: 10px; }
.twin__miss {
  flex: 1;
  background: var(--bg-2, #1A2030);
  border: 1px solid var(--line-strong, #323B50);
  border-radius: var(--r-2, 8px);
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  text-align: center;
  transition: border-color var(--dur-med, 260ms);
}
.twin__miss-k {
  font: 600 0.58rem/1 var(--font-mono, monospace);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4, #55607A);
}
.twin__miss-v { font: 600 1.1rem/1.2 var(--font-sans, sans-serif); color: var(--ink, #E8EDF5); }
.twin__miss-p { font: 400 0.62rem/1 var(--font-mono, monospace); color: var(--ink-3, #7F8AA0); }
.twin__miss--safe { border-color: var(--accent-lo, #5FA890); }
.twin__miss--safe .twin__miss-v { color: var(--accent, #8FD5C0); }
.twin__miss--warn { border-color: #b06046; }
.twin__miss--warn .twin__miss-v { color: #ff8c6a; }
.twin__miss-arrow { color: var(--ink-4, #55607A); font-size: 1rem; }

.twin__profile svg { width: 100%; height: 88px; display: block; }
.twin__profile .pf-th { stroke: #ff8c6a; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.45; }
.twin__profile .pf-thlabel { fill: var(--ink-4, #55607A); font: 400 8px var(--font-mono, monospace); }
.twin__profile .pf-base { stroke: #ff8c6a; stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.twin__profile .pf-base--ghost { opacity: 0.4; stroke-dasharray: 4 3; }
.twin__profile .pf-burn { stroke: var(--accent, #8FD5C0); stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.twin__profile .pf-tca { stroke: var(--ink-4, #55607A); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.twin__profile-axis {
  display: flex; justify-content: space-between;
  font: 400 0.6rem/1.4 var(--font-mono, monospace);
  color: var(--ink-4, #55607A);
  margin-top: 2px;
}

/* ---- Footnote ----------------------------------------------------------------------------------------------- */
.twin__foot {
  margin: var(--s-3, 12px) 2px 0;
  font-size: 0.72rem; line-height: 1.6;
  color: var(--ink-4, #55607A);
}
.twin__foot-sep { margin: 0 6px; }

/* ---- Responsive ----------------------------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .twin__stage { grid-template-columns: 1fr; }
  .twin__viewport { min-height: 0; aspect-ratio: 4 / 3.1; }
  .twin__card { max-height: none; }
  .twin__hud { max-width: 60%; }
  .twin__split-tag { font-size: 0.56rem; padding: 3px 7px; }
  .twin__split-clock { font-size: 0.58rem; }
}
@media (max-width: 520px) {
  .twin__viewport { aspect-ratio: 1 / 1.05; }
  .twin__chip { font-size: 0.6rem; }
  .twin__hint { display: none; }
}

/* ---- Reduced motion --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .twin__chip--live::before,
  .twin__scanbar-dot,
  .twin__loading-dot { animation: none; }
  .twin__split--enter .twin__split-divider,
  .twin__split--enter .twin__split-half:last-child { animation: none; }
}