/* Catalysts: the activity ticker (home + game), the game's chip, the home "Live catalysts" strip and the /catalysts/ page.
   Filled by site/catalysts-live.js and site/catalysts/catalysts.js. Built on tidelings.css tokens (zones, pebbles, tags). */

/* ---------- activity ticker: a slim bar stuck to the top; the nav (home) and the top bar (game) sit under it ---------- */
:root { --ticker-h: 0px; }
html.has-ticker { --ticker-h: 30px; }
.tl-ticker { --fg: var(--foam); --fg-dim: var(--dim); --focus: var(--sun);
  position: sticky; top: 0; z-index: 55; display: flex; align-items: center; gap: var(--s3); height: 30px; overflow: hidden;
  padding-left: var(--gutter); font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--fg);
  background: rgba(6, 36, 63, .94); box-shadow: 0 1px 0 rgba(233, 251, 255, .08); }
.tl-ticker[hidden] { display: none; }
/* on the home page it floats over the surface water: frosted light water and ink text, like the nav */
.tl-ticker--surface { --fg: var(--ink); --fg-dim: var(--ink-dim); --focus: var(--ink);
  background: rgba(214, 246, 252, .84); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 rgba(4, 34, 58, .1); }
.tl-ticker__label { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.tl-ticker__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 89, .25);
  animation: tl-live 1.6s ease-in-out infinite alternate; }
.tl-ticker__view { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
.tl-ticker__track { display: flex; width: max-content; animation: tl-ticker var(--ticker-s, 40s) linear infinite; }
.tl-ticker:hover .tl-ticker__track, .tl-ticker:focus-within .tl-ticker__track { animation-play-state: paused; }
.tl-ticker__list { display: flex; gap: 28px; margin: 0; padding: 0 28px 0 0; list-style: none; white-space: nowrap; }
.tl-ticker__list a { color: var(--fg); text-decoration: none; }
.tl-ticker__list a:hover { text-decoration: underline; text-underline-offset: .2em; }
.tl-ticker__list a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tl-ticker__list time { color: var(--fg-dim); font-weight: 500; }
@keyframes tl-ticker { to { transform: translateX(-50%); } }
@keyframes tl-live { to { opacity: .45; } }
/* reduced motion: no scrolling; the newest events stay put and can be scrolled by hand */
.tl-ticker.is-still .tl-ticker__view { overflow-x: auto; scrollbar-width: none; }
.tl-ticker.is-still .tl-ticker__track { animation: none; }
.tl-ticker.is-still .tl-ticker__list[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tl-ticker__view { overflow-x: auto; scrollbar-width: none; }
  .tl-ticker__track, .tl-ticker__label::before { animation: none; }
  .tl-ticker__list[aria-hidden] { display: none; }
}
/* the home depth gauge, the game's sticky top bar and its desktop side rail move down under the ticker */
html.has-ticker .tl-depth { top: calc(92px + var(--ticker-h)); }
body.app .bar { top: var(--ticker-h); }
@media (min-width: 1024px) { body.app .tabs:not([hidden]) { top: calc(var(--bar-h) + var(--ticker-h)); } }

/* ---------- the game's chip: the Burn Race at a glance, opens /catalysts/ ---------- */
.cat-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-tag); flex: none;
  font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--foam); text-decoration: none;
  background: rgba(255, 122, 89, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .55); transition: background var(--t-quick); }
.cat-chip[hidden] { display: none; }
.cat-chip:hover { background: rgba(255, 122, 89, .26); }
.cat-chip:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.cat-chip.is-race { background: rgba(255, 122, 89, .3); animation: race-glow 1.8s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .cat-chip.is-race { animation: none; } }
/* small phones: the chip, the wallet and Log out share the top bar with the wordmark */
@media (max-width: 479px) {
  body.app .bar { gap: var(--s3); }
  body.app .bar-right { gap: 6px; min-width: 0; flex: 0 1 auto; }
  .cat-chip { padding: 0 7px; font-size: 12px; min-height: 28px; }
  body.app .wallet-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- home: "Live catalysts", right under the hero (surface water: glass pebbles, ink text) ---------- */
.cat-strip { margin-top: clamp(40px, 6vw, 72px); }
.cat-strip[hidden] { display: none; }
.cat-strip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.cat-strip__head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cat-strip__all { color: var(--fg); font-weight: 650; text-underline-offset: .2em; }
.cat-strip__grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cat-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-strip__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.cat-tile { display: grid; align-content: start; gap: var(--s2); padding: var(--s4) var(--s4) var(--s5); min-width: 0; }
.cat-tile[hidden] { display: none; }
.cat-tile p { margin: 0; }
.cat-tile h3 { font-size: 1.15rem; line-height: 1.2; }
.cat-tile h3 a { color: var(--fg); text-decoration: none; }
.cat-tile h3 a::after { content: " →"; color: var(--fg-dim); }
.cat-tile h3 a:hover { text-decoration: underline wavy; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.cat-tile__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cat-tile__big b { font: 700 1.75rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--amount); }
.cat-tile__big span, .cat-tile__line { font-size: var(--fs-small); color: var(--fg-dim); }
.cat-tile__line[hidden] { display: none; }
.cat-tile__rule { font-weight: 700; color: var(--fg); }
.cat-tile__locks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-ui); }
.cat-tile__locks a { color: var(--fg); font-weight: 600; text-underline-offset: .2em; }
.cat-tile.is-race { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 26px rgba(255, 122, 89, .45); }

/* ---------- /catalysts/ (a reading page: docs.css lays out the text, tables and stats) ---------- */
.catalysts-page .cat-how { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); counter-reset: how; }
.catalysts-page .cat-how li { counter-increment: how; position: relative; padding-left: 34px; margin: 0; }
.catalysts-page .cat-how li::before { content: counter(how); position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--font-body); color: var(--ink); background: var(--sun); }
.catalysts-page .cat-live { margin-top: var(--s5); }
.catalysts-page .cat-off { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: 12px; color: var(--fg-dim); background: var(--card);
  box-shadow: inset 3px 0 0 var(--line); }
.catalysts-page .cat-off[hidden], .catalysts-page [hidden] { display: none !important; }
.catalysts-page .cat-verify { margin-top: var(--s5); font-size: var(--fs-small); color: var(--fg-dim); }
.catalysts-page .cat-share { margin-top: var(--s4); }
.catalysts-page .cat-share .tl-btn, .catalysts-page #you-connect { text-decoration: none; }
.catalysts-page .cat-you { margin-top: var(--s2); }
.catalysts-page .cat-you #you-connect { margin-top: var(--s4); }
.cat-you__goal { margin-top: var(--s5); display: grid; gap: var(--s2); max-width: 32rem; }
.catalysts-page .cat-you__goal-row { display: flex; justify-content: space-between; margin: 0; font-size: var(--fs-small); color: var(--fg-dim); }
.cat-you__goal-row b { color: var(--fg); font-variant-numeric: tabular-nums; }
.cat-you .tl-tube[data-tone="ok"] { --gc: var(--ok); }
.catalysts-page .cat-locks { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: var(--s2); }
.catalysts-page .cat-milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.catalysts-page .cat-milestones li { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: var(--s3); margin: 0; padding: 12px 4px;
  border-top: 1.5px dotted rgba(233, 251, 255, .16); }
.catalysts-page .cat-milestones li:last-child { border-bottom: 1.5px dotted rgba(233, 251, 255, .16); }
.cat-milestones__mark { font-size: var(--fs-small); font-weight: 700; color: var(--fg-dim); }
.cat-milestones .is-next .cat-milestones__mark { display: inline-block; justify-self: start; padding: 3px 7px; border-radius: var(--r-tag); color: var(--ink); background: var(--sun); }
.cat-milestones .is-next .cat-milestones__title { color: var(--fg-dim); }
.cat-milestones time { font-size: var(--fs-small); color: var(--fg-dim); white-space: nowrap; }
.catalysts-page .cat-disclaimer { margin-top: var(--s8); padding: var(--s4) var(--s5); border-radius: var(--r-pebble-b); background: var(--card);
  box-shadow: inset 3px 0 0 var(--accent); color: var(--fg); font-weight: 600; }
@media (max-width: 559px) { .catalysts-page .cat-milestones li { grid-template-columns: 44px 1fr; } .cat-milestones time { grid-column: 2; } }