/* Observability page animation (obs-anim.js). Window chrome, the terminal,
   the HUD, and the fade come from hero-anim.css; sizes here are world px. */
.obs-anim {
  position: relative;
  max-width: var(--frame);
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #101012;
}
@media (max-width: 640px) { .obs-anim { aspect-ratio: 4 / 3; } }

/* Session table */
.oa-table { font-size: 15px; }
.oa-head,
.oa-row {
  display: grid;
  grid-template-columns: 96px 120px 150px 84px 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 20px;
  white-space: nowrap;
}
.oa-head {
  height: 40px;
  border-bottom: 1px solid #2c2c33;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f8a98;
}
.oa-rows { position: relative; height: calc(100% - 68px); overflow: hidden; }
.oa-row {
  position: relative;
  height: 38px;
  border-bottom: 1px solid #222228;
  color: #c9c5d1;
}
.oa-row span:nth-child(4),
.oa-row span:nth-child(5) { text-align: right; color: #a5a0ad; }
.oa-ok { color: #4eba65; }
.oa-bad { color: #ff7b72; font-weight: 600; }
/* Caught rows pulse red with --p (0 to 1), set on .obs-anim by the script each frame (rules at the end) */
.oa-row-fixed { background: rgba(78, 186, 101, 0.1); box-shadow: inset 4px 0 0 #4eba65; }
/* HypAware's read: a purple line sweeping down the table */
.oa-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 24px 6px rgba(183, 139, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}

/* Failing sessions flowing into the finding */
.oa-flow { pointer-events: none; }
.oa-line { fill: none; stroke: #b78bff; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0; }
.oa-dot { fill: #ff7b72; }

/* The finding */
.oa-card {
  position: absolute;
  box-sizing: border-box;
  padding: 26px 30px;
  background: #1c1c21;
  border: 2px solid #3a2f4e;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font-family: var(--font-body);
  color: #ece6f5;
  opacity: 0;
}
.oa-card-held { border-color: #2f5a3a; }
.oa-card-top { display: flex; align-items: center; justify-content: space-between; }
.oa-card-id { font-family: var(--font-mono); font-size: 14px; color: #8f8a98; }
.oa-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(229, 83, 75, 0.16);
  color: #ff7b72;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.oa-chip-applied { background: rgba(183, 139, 255, 0.16); color: var(--accent-link); }
.oa-chip-held { background: rgba(78, 186, 101, 0.16); color: #4eba65; }
.oa-card-title { margin: 22px 0 12px; font-size: 27px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.oa-card-title code { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent-link); background: none; border: 0; padding: 0; }
.oa-card-meta { font-family: var(--font-mono); font-size: 15px; color: #a5a0ad; }
.oa-card-meta b { color: #ff7b72; font-weight: 700; }
.oa-meta-held b { color: #4eba65; }
.oa-card-fix {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #2c2c33;
  font-family: var(--font-mono);
  font-size: 15px;
  color: #8f8a98;
  opacity: 0;
  transition: opacity 400ms ease;
}
.oa-card-fix span { color: #ece6f5; }
.oa-card-fixon .oa-card-fix { opacity: 1; }

/* The agent's terminal: 56 columns by 18 rows */
.oa-term { opacity: 0; }
.oa-term-body { height: calc(100% - 28px); box-sizing: border-box; }

.obs-anim.is-still .oa-card-fix,
.obs-anim.is-still .oa-card-impact { transition: none; }

/* The session count sits on a band that fades out, so whatever the camera shows behind it drops away */
.obs-anim .ha-hud {
  left: 0;
  right: 0;
  top: 0;
  padding: 12px 16px 20px;
  background: linear-gradient(to bottom, #101012 70%, rgba(16, 16, 18, 0));
  z-index: 1;
}
@media (max-width: 560px) { .obs-anim .ha-hud { padding: 8px 12px 14px; } }

/* A gamed session reads "done · tests pass" until the scan line passes it */
.oa-st { display: inline-grid; }
.oa-st > span { grid-area: 1 / 1; }
.oa-found { visibility: hidden; }
.oa-row-bad.oa-found-on {
  background: rgba(229, 83, 75, calc(0.08 + 0.16 * var(--p, 0)));
  box-shadow: inset 4px 0 0 #e5534b;
}
.oa-row-bad.oa-found-on .oa-looks { visibility: hidden; }
.oa-row-bad.oa-found-on .oa-found { visibility: visible; }
.oa-card-impact {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: #ff7b72;
  opacity: 0;
  transition: opacity 400ms ease;
}
.oa-card-impact.oa-impact-on { opacity: 1; }
.oa-meta-held { color: #4eba65; }
.oa-split > span { white-space: nowrap; }

/* Slack messages at stage scale: the question that starts it, and the alert that ends it */
.oa-toast {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 10px;
  width: min(340px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1f1f24;
  border: 1px solid #34343b;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  font-family: var(--font-body);
  color: #ece6f5;
  opacity: 0;
  pointer-events: none;
}
.oa-toast-av {
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #5e4a86;
  font-weight: 700;
  font-size: 15px;
}
.oa-toast-bot .oa-toast-av { background: #2f5a3a; color: #4eba65; }
.oa-toast-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.oa-toast-head b { font-size: 14px; font-weight: 700; }
.oa-toast-head span { font-size: 12px; color: #8f8a98; }
.oa-toast p { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: #d9d4e2; }
@media (max-width: 560px) {
  .oa-toast { right: 8px; bottom: 8px; width: calc(100% - 16px); padding: 6px 8px; gap: 7px; border-radius: 8px; }
  .oa-toast-av { flex-basis: 20px; height: 20px; font-size: 11px; border-radius: 5px; }
  .oa-toast-head b { font-size: 11px; }
  .oa-toast-head span { font-size: 10px; }
  .oa-toast p { margin-top: 1px; font-size: 11px; line-height: 1.3; }
}
.oa-toast .oa-nb { white-space: nowrap; }