/* /cloud1/css/recording_hud_inline.css
   PURPOSE: Pill under video in the Step 2 card.
*/

:root{
  --swHudBg: rgba(13, 18, 34, 0.72);
  --swHudBorder: rgba(255,255,255,0.22);
  --swHudInk: #00ffff;
  --swHudMuted: rgba(0,255,255,0.70);
  --swHudWarn: #E6A23A;
  --swHudGood: #3be19f;
  --swHudShadow: 0 10px 28px rgba(0,0,0,.25);
}

#swHudMount .swHudWrap{
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 6px;
  width: 100%;
}

#swHudMount .swHudPill{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* KEY: keep it inside the card */
  max-width: 100%;
  width: fit-content;

  padding: 10px 12px;
  border-radius: 9999px;
  background: var(--swHudBg);
  border: 1px solid var(--swHudBorder);
  box-shadow: var(--swHudShadow);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* KEY: allow wrapping instead of overflow */
  flex-wrap: wrap;

  /* KEY: prevent long strings from pushing outside */
  text-align: center;
  box-sizing: border-box;
}

#swHudMount .swHudDot{
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--swHudMuted);
  box-shadow: 0 0 10px rgba(0,255,255,.25);
}
#swHudMount .swHudDot.active{
  background: var(--swHudGood);
  box-shadow: 0 0 10px rgba(59,225,159,.35);
}
#swHudMount .swHudDot.warn{
  background: var(--swHudWarn);
  box-shadow: 0 0 10px rgba(230,162,58,.35);
}

#swHudMount .swHudRow{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  color: var(--swHudInk);

  /* KEY: let each group wrap cleanly */
  white-space: normal;
}

#swHudMount .swHudK{ color: var(--swHudMuted); letter-spacing: .25px; }
#swHudMount .swHudV{ color: var(--swHudInk); font-weight: 700; }

@media (max-width: 520px){
  #swHudMount .swHudPill{
    gap: 8px;
    padding: 9px 10px;
  }
  #swHudMount .swHudRow{
    font-size: 0.74rem;
  }
}

@media (max-width: 420px){
  #swHudMount .swHudPill{ padding: 9px 11px; gap: 8px; }
  #swHudMount .swHudRow{ font-size: 0.74rem; }
}