/* ══ Organ monitors — shown only while the sign-in link is being waited on ══
   Compact single-column variant of staging/organ-monitors-mockup.html, sized
   for the login page's left panel. Everything is scoped under .om-*.         */

.om {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;      /* centre inside a wider host (help page) */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  animation: omFade .5s ease both;
}
@keyframes omFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* header */
.om-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.om-spec {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #7FE3C8;
}
.om-phase {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 700; color: #39F0B8; text-align: right;
}
.om-phase.warn { color: #FFC761; }
.om-phase.crit { color: #FF6E7C; }

/* organ stage */
.om-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 190px; }
.om-glow {
  position: absolute; width: 210px; height: 210px; border-radius: 50%;
  filter: blur(24px); opacity: .4; transition: background .8s ease;
}
.om-organ { position: relative; height: 100%; width: auto; max-width: 100%; display: none; overflow: visible; }
.om-organ.on { display: block; }

/* trace */
.om-mon {
  position: relative; height: 116px; border-radius: 10px; overflow: hidden;
  background: #000913; border: 1px solid rgba(120,220,255,.16);
}
.om-mon canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* vitals */
.om-vitals { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(120,220,255,.14);
             border: 1px solid rgba(120,220,255,.16); border-radius: 10px; overflow: hidden; }
.om-v { background: #000913; padding: .38rem .55rem; }
.om-v span { display: block; font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; color: #6f8fb0; }
.om-v b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92rem; font-weight: 700; color: #39F0B8; }
.om-v.warn b { color: #FFC761; }
.om-v.crit b { color: #FF6E7C; }

/* caption */
.om-note {
  font-size: .8rem; line-height: 1.55; color: #A9BBD8; min-height: 2.5rem;
  padding-left: .8rem; border-left: 2px solid rgba(53,224,196,.4);
  transition: border-color .4s ease;
}
.om-note.warn { border-left-color: rgba(255,176,32,.55); }
.om-note.crit { border-left-color: rgba(255,77,94,.6); }

/* specialty progress pips */
.om-pips { display: flex; gap: 5px; }
.om-pip { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.om-pip i { display: block; height: 100%; width: 0; background: #35E0C4; }
.om-pip.warn i { background: #FFB020; }
.om-pip.crit i { background: #FF4D5E; }

@media (max-width: 991.98px) {
  .om-stage { height: 150px; }
  .om-mon   { height: 92px; }
  .om-note  { font-size: .76rem; min-height: 0; }
}

/* Static, quiet fallback: no looping animation at all. */
@media (prefers-reduced-motion: reduce) {
  .om { animation: none; }
  .om-organ, .om-glow { animation: none !important; }
}