/* Brand chrome — the few things inline styles cannot express.

   Everything in this project is styled inline so each .dc.html opens on its own. That
   works for every static declaration, but not for keyframes or for the ::-moz/::-webkit
   bits below, which have nowhere to live in a style attribute. This file is that
   nowhere-else pile, and it is deliberately tiny.

   It is NOT the responsive layer — see rs-responsive.css for that, and for why nothing
   here uses !important. */

/* The live strip's status dot. The strip sits above the fold on every page and used to
   read as decoration; the pulse is what makes it read as a running system instead. */
@keyframes rs-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, .55); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);   opacity: .85; }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0);   opacity: 1; }
}
.rs-live-dot {
  animation: rs-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* The ticker itself. It scrolls only when it has to: the animation runs on a wrapper
   that is only wide enough to overflow on narrow screens, and the reduced-motion query
   below turns it off entirely. */
@keyframes rs-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rs-live-dot { animation: none; }
  .rs-ticker-track { animation: none !important; transform: none !important; }
}

/* Native select arrows are the one piece of browser chrome that survives an inline
   style, and they break the mono/hairline language everywhere they appear. */
.rs-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 11px top 52%, right 7px top 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.rs-select::-ms-expand { display: none; }

/* Firefox draws its own dotted focus ring inside a select on top of ours. */
.rs-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 currentColor; }

/* Keyboard focus has to survive on both grounds. Inline styles cannot carry :focus. */
.rs-focus:focus-visible {
  outline: 2px solid #E51F36;
  outline-offset: 2px;
}

/* The logo mark is raster art (the brand file is a 256px PNG). Browsers downscale it
   for the 30–38px lockups; this keeps that downscale from going soft on Safari. */
.rs-mark {
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}