/* generated-by: Claude | source: player.html + card-grid.html sync rule | purpose: single source of truth for active-card width and label/ttext geometry so player and card-grid never drift */

/* ── Card scaling system ──
   The whole player layout (card + page chrome in player-core.css) is sized
   from a single design width: --card-w. Everything inside the card box is
   `calc(var(--card-w) * ratio)`. Smaller screens shrink uniformly; wider
   screens cap at 500px so the design never grows past its canonical size.
   Why not transform: scale()? It rasterizes the scaled layer and blurs text
   during the player's 0.8s height/top transitions (especially on Safari).
   --active-bar-w / --active-bar-inner-w are preserved as aliases so any
   external consumer continues to work. */
:root {
  --card-w: min(500px, 100vw - 16px);
  --card-gutter: calc(var(--card-w) * 0.03);
  --active-bar-w: var(--card-w);
  --active-bar-inner-w: calc(var(--card-w) - var(--card-gutter) * 2);
}

/* ── Active-block label geometry ──
   Shared by player (.seg-label inside .content-group) and card-grid
   (.card-label). Animation, opacity, and font-size live in each
   consumer's stylesheet because they differ (player animates in;
   card is static at --card-w * 0.32). */
/* Never truncate. Full container width is available; the 15% horizontal
   padding is the only side gutter. Vertical fit is handled by
   HIIT.fitLabelFontSize (shared.js): it auto-shrinks the font so the title
   fits on a SINGLE line — auto-wrapping is never allowed, long titles just
   get smaller. Author hard breaks (\n via white-space:pre-line) are kept, so
   "Active\nRecovery" renders as two lines, each capped to one visual line.
   Removing the old webkit-line-clamp/overflow combo also fixes single-line
   descender clipping (`g`, `p`, `y`). */
/* Title is TOP-anchored at a fixed gap below the time's bottom edge so
   the visible space between time and title is independent of font-size
   shrinking. Ratios are derived from the SVG mockup (469px card, 128px
   time → 0.272; 56px label → 0.119; ~22px gap → 0.05).
     1 line  →  25px gap (default) at 500px ref
     2 lines →   0px gap (title top touches time bottom; author \n labels)
   time center = 40% of container height
   time height = 0.272 × card-w (= 136px at 500px ref), half = 0.136 × card-w (68px at ref)
   ⇒ 1-line top = calc(40% + var(--card-w) * (0.136 + 0.05)) = calc(40% + var(--card-w) * 0.186)
   ⇒ 2-line top = calc(40% + var(--card-w) * 0.136)
   `data-lines` is set by HIIT.fitLabelFontSize in shared.js. */
.seg-label,
.card-label {
  position: absolute;
  top: calc(40% + var(--card-w) * 0.186);
  left: 0;
  right: 0;
  transform: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
  /* 15% side padding keeps the label inside the inscribed ring across
     viewports (chord at the title's y-band is ~85% of bar width at the
     smallest viewport). */
  padding: 0 15%;
}

.seg-label[data-lines="2"],
.card-label[data-lines="2"] {
  /* 2-line (an author \n label): title top sits right at time bottom (0px gap). */
  top: calc(40% + var(--card-w) * 0.136);
}

/* ── Active-block time text geometry ──
   Shared by player (.content-group .ttext) and card-grid (.card-ttext).
   Font-size is consumer-specific (player sets inline to
   calc(var(--card-w) * 0.32) when active; card-grid uses the same in its
   own stylesheet). */
.content-group .ttext,
.card-ttext {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  padding: 0 calc(var(--card-w) * 0.02);
}