/* flopticker.css - the news/announcement ticker shared by flopco.in + flopgen.top.

   Trent's brief (2026-08-07): "Some people will think its annoying so it needs a
   hide button thats persistent, but i like it."  So: it runs by default, the
   close button is always visible (never a hover-reveal), and once dismissed it
   STAYS dismissed - flopticker.js writes localStorage.

   Design notes that are load-bearing, not decoration:
   - The track holds the item strip TWICE and animates 0 -> -50%. That is what
     makes the loop seamless; a single strip snaps at the wrap.
   - Hover/focus pauses it. A moving target you cannot finish reading is the
     single most-hated thing about tickers.
   - prefers-reduced-motion stops the animation entirely and lets the bar scroll
     normally instead. Vestibular disorders are a real accessibility concern with
     continuous motion, and a scrolling marquee is the textbook trigger.
   ASCII only - no raw non-ASCII glyphs anywhere (standing NO TOFU rule). */

/* Background is the flopco.in dark header navy, sampled off the live page
   (rgb(7,14,27)). It is NOT the #1d1b16 from the error pages - that is the LIGHT
   theme's ink colour, and using it put a warm brown bar on top of a cool navy
   header. Sample the real page before picking a chrome colour. */
.flopticker {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #070e1b;
  color: #fffaf0;
  border-bottom: 1px solid rgba(244, 181, 58, .35);
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
}

/* The viewport clips; the track slides. Two strips ride inside the track. */
.flopticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  /* fade the ends so items enter and leave instead of popping at a hard edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.flopticker-track {
  display: flex;
  width: max-content;
  animation-name: flopticker-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* animation-duration is set inline per render, scaled to the item count */
}

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

.flopticker-strip {
  display: flex;
  flex: 0 0 auto;
}

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

.flopticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  color: #fffaf0;
  text-decoration: none;
  white-space: nowrap;
}

.flopticker-item::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 22px;
  border-radius: 50%;
  background: rgba(244, 181, 58, .55);
}

.flopticker-item:hover,
.flopticker-item:focus-visible {
  color: #f4b53a;
  text-decoration: underline;
}

.flopticker-date {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #f4b53a;
  opacity: .9;
}

/* Persistent, always-visible dismiss. Sits above the mask so it never fades. */
.flopticker-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 250, 240, .16);
  background: #070e1b;
  color: rgba(255, 250, 240, .72);
  cursor: pointer;
}

.flopticker-close:hover,
.flopticker-close:focus-visible {
  color: #f4b53a;
  background: #10192b;
}

/* Motion-sensitive users: no animation at all. The bar becomes an ordinary
   horizontally scrollable strip, and the duplicate copy is hidden so the list
   does not read twice. */
@media (prefers-reduced-motion: reduce) {
  .flopticker-track {
    animation: none;
    width: auto;
  }
  .flopticker-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .flopticker-strip[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 640px) {
  .flopticker { font-size: 13px; }
  .flopticker-item { padding: 10px 16px; }
  .flopticker-item::after { margin-left: 16px; }
}

/* ---- the /?view=<slug> article ------------------------------------------- */

.flopnews {
  max-width: 44em;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.flopnews-date {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b8860b;
}

.flopnews-title {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.15;
}

.flopnews-lede {
  margin: 0 0 24px;
  font-size: 19px;
  line-height: 1.5;
  opacity: .85;
}

.flopnews-body { font-size: 17px; line-height: 1.65; }
.flopnews-body p { margin: 0 0 16px; }
.flopnews-body ul { margin: 0 0 16px; padding-left: 22px; }
.flopnews-body li { margin: 0 0 7px; }
.flopnews-body h2 { margin: 30px 0 10px; font-size: 22px; }

/* Links MUST be styled explicitly. Caught on the 2026-08-07 screenshot pass:
   flopgen styles its own anchors so article links looked fine there, but on
   flopco.in they inherited nothing and rendered as plain body text - an
   invisible link is a broken link. Do not rely on the host site's anchor CSS. */
.flopnews-body a,
.flopnews-back a {
  color: #f4b53a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.flopnews-body a:hover,
.flopnews-back a:hover { filter: brightness(1.15); }

/* Both sites are DARK. A light-theme code chip (black at 7%) is invisible on
   near-black, which is exactly how /v1/models rendered as bare text. */
.flopnews-body code {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .93em;
}

.flopnews-back { margin-top: 36px; font-size: 15px; }

/* Wide content inside an article must scroll in its own box, never the page. */
.flopnews-body pre,
.flopnews-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ---- flopgen.top variant -------------------------------------------------
   flopgen runs a near-black blue-accent theme (#05070c / #7fd1ff), not
   FlopCoin's cream-and-gold. Same markup, same JS, different paint, so the two
   sites never look like one site wearing the other's bar. */

.flopticker--fg {
  background: #05070c;
  color: #c7d3e8;
  border-bottom: 1px solid #1a2740;
}

.flopticker--fg .flopticker-item { color: #c7d3e8; }
.flopticker--fg .flopticker-item:hover,
.flopticker--fg .flopticker-item:focus-visible { color: #7fd1ff; }
.flopticker--fg .flopticker-item::after { background: rgba(127, 209, 255, .5); }
.flopticker--fg .flopticker-date { color: #7fd1ff; }

.flopticker--fg .flopticker-close {
  background: #05070c;
  color: rgba(199, 211, 232, .72);
  border-left: 1px solid #1a2740;
}
.flopticker--fg .flopticker-close:hover,
.flopticker--fg .flopticker-close:focus-visible {
  color: #7fd1ff;
  background: #0b111c;
}

/* flopgen's article page sits on the dark theme too */
.flopticker--fg-page .flopnews-date { color: #7fd1ff; }

/* flopgen's article links follow its blue accent, not FlopCoin gold. */
.flopticker--fg-page .flopnews-body a,
.flopticker--fg-page .flopnews-back a { color: #7fd1ff; }