/* ==========================================================================
   Livio — floating live races panel
   Tokens are inherited from the :root block in index.html; the fallbacks
   keep this file standalone if it is ever reused on another page.
   All selectors are namespaced .lr-* — nothing here touches existing classes.
   ========================================================================== */

.lr {
  /* Top of the safe band. The fixed header is 72px tall and its open language
     dropdown reaches 205px (measured), so 224px guarantees the panel can never
     overlap the dropdown or the Upgrade button at any scroll position. */
  --lr-safe-top: 224px;
  --lr-navy: 13, 34, 53;                 /* --ink #0D2235, as rgb parts */
  --lr-lime: #C7D92C;                    /* --lime */
  --lr-lime-glow: #E2F24B;               /* --lime-glow */
  --lr-hairline: rgba(255, 255, 255, .12);
  --lr-divider: rgba(255, 255, 255, .09);
  --lr-text: #fff;
  --lr-text-2: rgba(255, 255, 255, .70); /* ~8:1 on the navy surface */
  --lr-width: 320px;

  position: fixed;
  right: 0;
  top: var(--lr-safe-top);
  bottom: 24px;
  z-index: 40;                           /* header.nav is 50 — it always wins */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;                  /* only the card and tab are clickable */
  font-family: var(--body, 'Inter', system-ui, sans-serif);
}

.lr[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.lr-card {
  pointer-events: auto;
  width: var(--lr-width);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  margin-right: 14px;
  padding: 18px 18px 14px;
  border-radius: var(--radius, 18px);
  border: 1px solid var(--lr-hairline);
  background: rgba(var(--lr-navy), .72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -20px rgba(8, 19, 31, .65),
              0 2px 10px -4px rgba(8, 19, 31, .45);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
}

/* Browsers without backdrop-filter get a solid surface instead of a
   washed-out translucent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lr-card { background: rgba(var(--lr-navy), .96); }
}

.lr[data-collapsed="true"] .lr-card {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Header — mirrors the .eyebrow treatment used by "LIVE TRACKING & RESULTS"
   -------------------------------------------------------------------------- */
.lr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  margin-bottom: 4px;
}

.lr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, 'Space Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lr-lime);
  white-space: nowrap;
  min-width: 0;
}

.lr-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--lr-lime);
  box-shadow: 0 0 0 4px rgba(199, 217, 44, .25);
}

/* Pulse only while something is genuinely live. */
.lr[data-state="live"] .lr-dot { animation: lr-pulse 2s ease-out infinite; }

@keyframes lr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(199, 217, 44, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(199, 217, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(199, 217, 44, 0); }
}

.lr-count {
  margin-left: auto;
  flex: none;
  font-family: var(--mono, 'Space Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink, #0D2235);
  background: var(--lr-lime);
  border-radius: 100px;
  padding: 2px 8px;
  line-height: 1.5;
}

.lr[data-state="soon"] .lr-count {
  color: var(--lr-lime);
  background: rgba(199, 217, 44, .16);
}

/* --------------------------------------------------------------------------
   Rows
   -------------------------------------------------------------------------- */
.lr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.lr-list::-webkit-scrollbar { width: 5px; }
.lr-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 100px;
}

.lr-row {
  border-top: 1px solid var(--lr-divider);
  transition: opacity .3s ease, transform .3s ease;
}
.lr-row:first-child { border-top: 0; }

.lr-row-inner {
  display: block;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  color: inherit;
  transition: background .2s ease, transform .2s ease;
}

/* Only lift when the row actually goes somewhere. */
a.lr-row-inner:hover,
a.lr-row-inner:focus-visible {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-1px);
}

.lr-row-inner:focus-visible {
  outline: 2px solid var(--lr-lime);
  outline-offset: 2px;
}

.lr-name {
  display: block;
  font-family: var(--display, 'Archivo', system-ui, sans-serif);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--lr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-date {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--lr-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-row[data-today="true"] .lr-date { color: var(--lr-lime); }

/* Enter / exit — set by the diffing renderer, never a full re-render. */
.lr-row.is-enter { opacity: 0; transform: translateY(8px); }
.lr-row.is-exit  { opacity: 0; transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   Footer bits
   -------------------------------------------------------------------------- */
.lr-status {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--lr-text-2);
  opacity: .85;
}
.lr-status[hidden] { display: none; }
.lr-status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: lr-fade 1.4s ease-in-out infinite;
}

@keyframes lr-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Quiet state — a small pill, never an empty box. */
.lr[data-state="quiet"] .lr-card {
  width: auto;
  max-width: var(--lr-width);
  padding: 11px 16px;
}
.lr[data-state="quiet"] .lr-list,
.lr[data-state="quiet"] .lr-count { display: none; }
.lr[data-state="quiet"] .lr-head { margin-bottom: 0; }
/* Card matches the rail: lime eyebrow, hollow lime dot. Greying it out while
   the tab beside it stays lime read as two different components. */
.lr[data-state="quiet"] .lr-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(199, 217, 44, .6);
}

/* --------------------------------------------------------------------------
   Collapse tab
   -------------------------------------------------------------------------- */
.lr-tab {
  pointer-events: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 9px;
  /* Solid lime with ink text — the same treatment as the "Upgrade account"
     button, so the two read as one accent family rather than as decoration.
     Only the TAB: the card behind it stays navy. The tab is a control, the
     card is content; lime on both would be louder without being clearer. */
  border: 1px solid rgba(13, 34, 53, .14);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: var(--lr-lime);
  /* No backdrop-filter — pointless behind a solid fill, and it costs a layer.
     Neutral depth, NOT a lime glow: Upgrade is the commercial action and has
     to stay the brightest thing on the first screen, so lime does the standing
     out and shadow only does the lifting. The inset line is a milled top edge
     catching the light — the one detail that reads as machined. */
  box-shadow: -6px 12px 28px -16px rgba(8, 19, 31, .55),
              -2px 3px 10px -6px rgba(8, 19, 31, .3),
              inset 0 1px 0 rgba(255, 255, 255, .38);
  color: var(--ink, #0D2235);
  font-family: var(--mono, 'Space Mono', ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  /* .2em reads gappy once mono is rotated onto a solid fill. */
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  cursor: pointer;
  transition: background .22s ease, transform .22s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s ease;
}

/* One movement, toward the viewer. Nothing else on hover. */
.lr-tab:hover {
  background: var(--lr-lime-glow);
  transform: translateX(-2px);
  box-shadow: -8px 14px 32px -16px rgba(8, 19, 31, .6),
              -2px 3px 10px -6px rgba(8, 19, 31, .3),
              inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Ink, not lime — a lime ring on a lime tab is invisible. */
.lr-tab:focus-visible { outline: 3px solid var(--ink, #0D2235); outline-offset: 3px; }

.lr-tab-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ink, #0D2235);
}
.lr[data-state="live"] .lr-tab-dot { animation: lr-pulse-ink 2s ease-out infinite; }
/* Quiet: same lime tab, hollow dot. The rail is the brand's marker on this
   page, so it holds its colour whether or not races are on — the state lives
   in this one detail instead. */
.lr[data-state="quiet"] .lr-tab-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(13, 34, 53, .55);
}

/* The card's lr-pulse ring is lime rgba, which vanishes against the lime tab. */
@keyframes lr-pulse-ink {
  0%   { box-shadow: 0 0 0 0 rgba(13, 34, 53, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(13, 34, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 34, 53, 0); }
}

/* The tab is never hidden in the quiet state. It used to be, which left anyone
   who had previously collapsed the panel with no card AND no control — the
   collapsed flag persists in localStorage, so the rail vanished permanently
   until they cleared it. No colour overrides here: quiet inherits the full
   lime treatment. */

.lr[data-state="quiet"] .lr-tab-dot { background: rgba(255, 255, 255, .35); }

/* --------------------------------------------------------------------------
   < 1024px — bottom-anchored bar that expands upward into a sheet.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .lr {
    /* How far the panel is lifted off the bottom edge. Dial this one value
       to move the whole thing (card + pill) up or down together. */
    --lr-lift: 20vh;

    top: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--lr-lift) + env(safe-area-inset-bottom, 0px));
    display: block;
  }

  /* Lifted clear of the edge, so it reads as a floating card rather than a
     sheet welded to the bottom: full radius, hairline all the way round. */
  .lr-card {
    width: auto;
    max-width: none;
    margin: 0 12px;
    max-height: min(60vh, 420px);
    border-radius: 16px;
    padding: 14px 18px 12px;
    box-shadow: 0 22px 48px -20px rgba(8, 19, 31, .75);
  }

  /* Collapse downward, not sideways — far enough to clear the lift too. */
  .lr[data-collapsed="true"] .lr-card {
    transform: translateY(calc(100% + var(--lr-lift) + 24px));
    opacity: 0;
  }

  .lr[data-state="quiet"] .lr-card {
    width: auto;
    max-width: none;
  }

  .lr-tab {
    position: absolute;
    right: 12px;                 /* flush with the card's side inset */
    bottom: calc(100% + 10px);
    writing-mode: horizontal-tb;
    border: 1px solid rgba(13, 34, 53, .14);
    border-radius: 100px;
    padding: 9px 16px;
    box-shadow: 0 14px 30px -14px rgba(8, 19, 31, .8);
  }

  /* Collapsed: the card is gone, so the pill drops to the lifted baseline.
     No safe-area term here — .lr's own bottom already carries it. */
  .lr[data-collapsed="true"] .lr-tab { bottom: 0; }
}

/* --------------------------------------------------------------------------
   < 480px — collapsed by default (handled in JS), count-only pill.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .lr[data-collapsed="true"] .lr-tab-label { display: none; }
  .lr-tab { padding: 9px 14px; }
  .lr-card { max-height: min(56vh, 360px); }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep every state legible, drop the movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lr-dot,
  .lr-tab-dot,
  .lr-status::before { animation: none !important; }

  .lr-card,
  .lr-row,
  .lr-tab,
  .lr-row-inner { transition: none !important; }

  .lr-row.is-enter,
  .lr-row.is-exit { opacity: 1; transform: none; }

  a.lr-row-inner:hover { transform: none; }
  .lr-tab:hover { transform: none; }
}