/* SAS Dial Foundation, the news ticker in the fixed dock.

   A SEPARATE FILE ON PURPOSE. site.css and site.js are both being worked on by
   other hands, so nothing here edits either of them. The dock is injected by
   site.js at runtime and this sheet only styles a subtree that ticker.js adds
   inside it, plus one rule that hides the static line once a real headline has
   arrived. Every selector is scoped under .dock so nothing here can reach the
   rest of the page.

   The class .has-ticker is put on the dock by ticker.js and ONLY after at least
   one real item has been drawn. Until then, and for ever if the feed is empty
   or unreachable, the dock keeps the line it has always carried.

   The call button and the Sponsor button are untouched. The ticker sits in the
   message slot, which is the flexible one, and carries the same flex basis the
   message had, so the two buttons keep the width and the position they have
   today. */

.dock.has-ticker .dock-msg { display: none; }

.dock .dock-ticker {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
  /* A headline that runs off the edge of the bar reads as a rendering fault, so
     both ends are faded out and a headline arrives and leaves rather than being
     chopped. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 24px, rgba(0,0,0,1) calc(100% - 24px), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 24px, rgba(0,0,0,1) calc(100% - 24px), rgba(0,0,0,0) 100%);
}

.dock .dock-ticker-track {
  display: flex;
  flex: none;
  width: max-content;
  will-change: transform;
  animation: dock-ticker-roll var(--dock-ticker-duration, 48s) linear infinite;
}

/* The track holds the same strip twice and travels exactly one strip width, so
   the frame after the last item is the frame of the first item and the loop has
   no jump in it. */
@keyframes dock-ticker-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.dock .dock-ticker:hover .dock-ticker-track,
.dock .dock-ticker:focus-within .dock-ticker-track { animation-play-state: paused; }

.dock .dock-ticker-strip { display: flex; flex: none; align-items: center; }

.dock .dock-ticker-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  font-size: .86rem;
  line-height: 1.35;
  color: rgba(255,255,255,.8);
}

.dock .dock-ticker-src {
  flex: none;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f0cf92;
}

.dock .dock-ticker-head { color: rgba(255,255,255,.8); }

.dock .dock-ticker-item:hover .dock-ticker-head,
.dock .dock-ticker-item:focus-visible .dock-ticker-head {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dock .dock-ticker-item:focus-visible {
  outline: 2px solid #f0cf92;
  outline-offset: 3px;
  border-radius: 2px;
}

/* The separator sits on every item rather than between them, so the gap at the
   seam of the loop is the same gap as everywhere else. */
.dock .dock-ticker-item::after {
  content: "";
  display: block;
  flex: none;
  width: 1px;
  height: 13px;
  margin: 0 20px 0 24px;
  background: rgba(255,255,255,.22);
}

/* ---------- reduced motion: one headline at a time, no travel ---------- */

/* Nothing travels in this mode, so the fade at the two ends has no work to do
   and it dimmed the first letters of the publisher name. The headline is cut
   with an ellipsis instead, which is a deliberate ending rather than a smear. */
.dock .dock-ticker--still { -webkit-mask-image: none; mask-image: none; }
.dock .dock-ticker--still .dock-ticker-track { animation: none; transform: none; width: 100%; min-width: 0; }
.dock .dock-ticker--still .dock-ticker-item::after { display: none; }
.dock .dock-ticker--still .dock-ticker-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  transition: opacity .45s linear;
}
.dock .dock-ticker--still.is-fading .dock-ticker-item { opacity: 0; }
.dock .dock-ticker--still .dock-ticker-head {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A visitor who has asked for less motion gets none of it, whatever ticker.js
   decided, because this rule cannot be overridden from script. */
@media (prefers-reduced-motion: reduce) {
  .dock .dock-ticker-track { animation: none !important; transform: none !important; }
}

/* ---------- small screens ---------- */

/* Measured at 360px wide, the bar has about 280px left after the padding, the
   round call button and the gap. The Sponsor button is the site's conversion
   element and it can shrink, so a ticker placed here would take its width. A
   ticker narrow enough to fit beside it shows roughly three words. The message
   slot is already hidden below 620px for the same reason, and the ticker stays
   hidden with it. */
@media (max-width: 620px) {
  .dock .dock-ticker { display: none; }
}