/* ============================================================
   STATUS BLOCKS · fixed cluster, top-right
   Currently holds the music block; the tea block joins it later.
   Markup is injected by status-blocks.js so it stays in one place.
   ============================================================ */

:root {
  --extra-yellow: #FFF0B2;
  /* Same value styles.css already uses for --accent, promoted to a global so
     it's available on the homepage too (which has no green token). */
  --dark-green: #3f5341;
}

.status-blocks {
  position: fixed;
  top: 22px;                 /* mirrors the nav's 22px inset */
  right: 22px;
  z-index: 500;              /* same layer as .site-nav */
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Tablet and desktop only for now. */
@media (max-width: 640px) {
  .status-blocks { display: none; }
}

/* Same glass, border and blur as .site-nav — only the radius differs (8px). */
.status-block {
  height: 60px;
  display: flex;
  align-items: stretch;
  background: rgba(255, 247, 226, 0.10);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--lines, #A2A2A2);
  border-radius: 8px;
  color: #FFF7E2;
  overflow: hidden;          /* keeps the dividers inside the rounded corners */
  transition: color 0.45s ease;
}

/* Over cream sections the cluster inverts, the same way .site-nav does.
   Toggled by the section probe in status-blocks.js. */
.status-blocks.on-light .status-block { color: var(--ink, #1a1712); }

.status-blocks.on-light .sb-icon,
.status-blocks.on-light .sb-arrow { color: var(--dark-green); }

/* Full-height hairline, no padding around it. */
.sb-divider {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: var(--lines, #A2A2A2);
}

/* ── Music icon · doubles as the play/pause control ───────── */
.sb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--extra-yellow);
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  align-self: stretch;
}

.sb-icon svg { display: block; width: 27px; height: 27px; overflow: visible; }

.sb-icon,
.sb-arrow { transition: color 0.45s ease; }

/* ── Smoke ────────────────────────────────────────────────
   No CSS animation here on purpose. The wisps are real geometry, rebuilt
   frame by frame in status-blocks.js from the audio level — a transform can
   only move a fixed shape rigidly, it can't bend one. Idle renders at
   amplitude 0, which is a dead-straight bar. */
.sb-wave {
  /* Softens the join between the generated quadratic segments. */
  shape-rendering: geometricPrecision;
}

/* ── Track text ───────────────────────────────────────────── */
.sb-track {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;      /* centres both lines on each other */
  gap: 4px;
  padding: 0 18px;
  flex: 0 0 auto;
  align-self: stretch;      /* full-height hit area */
  cursor: pointer;
  user-select: none;
}

.sb-label,
.sb-name {
  font-family: 'Satoshi', -apple-system, system-ui, sans-serif;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.sb-label { font-size: 12px; }
.sb-name  { font-size: 18px; }

/* A FIXED width, not a cap. With one track this was max-width and it never
   mattered, but eight names of different lengths made the whole block resize on
   every skip — and since the cluster is anchored to the right edge, it grew and
   shrank leftward each time. A constant box keeps it still: short names centre
   inside it, long ones scroll as before.
   Centring is done with flex rather than text-align because the inner track is
   a flex row; once a name overflows, justify-content stops applying on its own,
   which is exactly the behaviour the marquee needs. */
.sb-name {
  width: 139px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.sb-name-scroll {
  display: flex;
  gap: 32px;
  width: max-content;
  flex: none;          /* never let flex shrink it below its content */
}

.sb-name.is-scrolling .sb-name-scroll {
  animation: sb-marquee var(--sb-scroll-dur, 10s) linear infinite;
}

/* Soft edges so the text appears and disappears rather than being cut. */
.sb-name.is-scrolling {
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

/* Travels exactly one copy + gap, so the clone lands where the original was. */
@keyframes sb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--sb-scroll-w, 0px)), 0, 0); }
}

.sb-name.is-scrolling:hover .sb-name-scroll { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sb-name.is-scrolling .sb-name-scroll { animation: none; }
}

/* ── Arrows ───────────────────────────────────────────────── */
.sb-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  flex: 0 0 auto;
}

.sb-arrow {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--extra-yellow);
  cursor: pointer;
}

.sb-arrow svg { display: block; width: 23px; height: 24px; }

/* The supplied arrow points left; the next button is the same path mirrored. */
.sb-arrow-next svg { transform: scaleX(-1); }

/* The rule that used to hide .sb-controls and .sb-divider-right lived here, for
   as long as there was only one track and the arrows had nothing to switch
   between. There are eight now, so they are shown — the markup, the click
   handlers and the styling above were always in place and needed no changes. */

/* Hover and focus feedback, which the arrows never had while hidden. */
.sb-arrow {
  transition: color 0.45s ease, opacity 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sb-arrow:hover { opacity: 0.6; }
  .sb-arrow-prev:hover { transform: translateX(-2px); }
  .sb-arrow-next:hover { transform: translateX(2px); }
}

.sb-arrow:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}