/* HUD telemetry: small uppercase mono lines typed bottom right. Typing is a
   clip per line (--chars written by sh-film-hud.ts), so the text stays whole
   for screen readers and for rtp-display.js. Keywords are tinted from the
   start and simply revealed by the clip. */
.sh-hud {
  grid-area: 3 / 2 / 4 / 3; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-end;
  margin: 0; color: rgb(243 242 238 / 78%); font: 500 11px/1.8 var(--sh-font-mono); letter-spacing: .14em; text-align: right; pointer-events: none;
}
.sh-hud__line { position: relative; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.film-live .sh-film .sh-hud__line { clip-path: inset(-2px calc(100% - (var(--chars, 0) + 1) * (1ch + .14em)) -2px -2px); }
html.film-live .sh-film .sh-hud__line.is-blank { clip-path: inset(0 100% 0 0); }
html.film-live .sh-film .sh-hud__line.is-typing::after {
  content: ""; position: absolute; left: 0; top: .3em; width: 1ch; height: 1.15em; background: var(--sh-fg);
  transform: translateX(calc(var(--chars, 0) * (1ch + .14em)));
}
html.sh-ambient .sh-hud__line.is-typing::after { animation: sh-caret 1s steps(1) infinite; }
@keyframes sh-caret { 50% { opacity: 0; } }
.sh-hud .k { color: var(--sh-fg); }
.sh-hud .k.is-gold { color: var(--sh-gold-hi); }
.sh-hud .k.is-teal { color: var(--sh-teal); }
.sh-hud .k.is-red { color: #ff6b7b; }
.sh-hud .is-key { color: var(--sh-fg); }
@media (prefers-reduced-motion: reduce) { .sh-hud__line::after { animation: none !important; } }