/* Notification ticker (RSPH-195) — see templates/app/_ticker.html.twig for the markup and why the
   item list appears twice. The track holds both copies side by side and slides left by exactly
   50% of its own width (one copy), so the loop has no visible seam. Tokens (--bs-*) are the same
   ones app.css re-tokenises for dark mode, so this follows the theme toggle with no extra rule.

   --ticker-height is the authoritative rendered height (single-line content, so it's genuinely
   fixed) — app.css's mobile block (@media max-width:860px) reads the same variable to push the
   fixed .appbar/.sidebar/.appbar__scrim down when a ticker is actually present, via
   #app-ticker-mount:has(.ticker). Keep min-height in step with .ticker__item's padding/font-size
   below if either changes, or the mobile offset drifts out of sync. */
:root {
    --ticker-height: 55px;
}

.ticker {
    background: var(--bs-ink);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-line);
    min-height: var(--ticker-height);
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 30s linear infinite;
}

.ticker:hover .ticker__track {
    animation-play-state: paused;
}

/* min-width guarantees each group spans at least a full viewport, so the loop technique above
   (translate by exactly one group's width) always keeps the second, aria-hidden copy clipped
   outside .ticker's overflow:hidden box. Without this, short content (few items, a short
   message) made each group narrower than the ticker bar itself, so BOTH copies sat inside the
   visible area at once — the message appeared to be duplicated on screen rather than looping.
   vw, not a percentage, so it resolves against the viewport rather than the track's own
   max-content-sized containing block (a percentage min-width there computes to 0/auto). */
.ticker__group {
    display: flex;
    flex-shrink: 0;
    min-width: 100vw;
}

.ticker__item {
    padding: 0.85rem 2.5rem;
    font-size: 1.1rem;
    font-family: var(--bs-font-ui);
}

.ticker__item a {
    color: inherit;
    text-decoration: none;
}

.ticker__item a:hover,
.ticker__item a:focus-visible {
    text-decoration: underline;
}

/* The category badge (RSPH-195 follow-up) — "Job:", "Parts:", "Finance:" — replaces the plain
   colour dot this used to be: same colour-coding-by-tone principle as the alerts panel's
   badge-flag--{tone} chips (see NotificationType::tone(), whose values these modifiers are named
   after, and templates/notification/index.html.twig which pairs badge-flag--{tone} with the
   type's own label the same way). Same chip shape/typography as .badge-flag (mono, uppercase,
   letter-spacing, 6px radius) for one visual "badge" language app-wide, but its own colours: the
   ticker bar is always the dark --bs-ink surface regardless of the page's own light/dark theme, so
   badge-flag's pastel-on-white palette would read flat/washed-out here — these borrow app.css's
   dark-mode "neon" badge palette instead, at low opacity so the badge reads as a tinted chip
   rather than a solid block. */
.ticker__badge {
    display: inline-block;
    font-family: var(--bs-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    margin-right: 0.6rem;
    vertical-align: middle;
}

.ticker__badge--green { background: rgba(63, 245, 184, 0.16); color: #3ff5b8; border: 1px solid rgba(63, 245, 184, 0.4); }
.ticker__badge--amber { background: rgba(255, 207, 77, 0.16); color: #ffcf4d; border: 1px solid rgba(255, 207, 77, 0.4); }
.ticker__badge--red { background: rgba(255, 138, 128, 0.16); color: #ff8a80; border: 1px solid rgba(255, 138, 128, 0.4); }
.ticker__badge--blue { background: rgba(127, 216, 255, 0.16); color: #7fd8ff; border: 1px solid rgba(127, 216, 255, 0.4); }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* A seizure/vestibular-safety concern, not just a preference: an infinite sideways scroll is
   exactly the motion prefers-reduced-motion exists to suppress. Falls back to a plain scrollable
   bar so the content is still reachable. */
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
    .ticker { overflow-x: auto; }
}