/*
 * Live session viewing (plan package H-5; CONTRACT-LIVE §12.7, §13): the "Live now" chip, the
 * live view's header, the coherence ring, the locally drawn pacer and the greyed states.
 *
 * Tokens only (narbis-tokens.css, through styles.css): no raw colour, and no text under 12 px.
 * State is never told by colour alone: every pill and chip carries its words, and motion
 * honours prefers-reduced-motion (the dot stops pulsing and the pacer ring does not move; the
 * pacer's word still changes once a second).
 */

/* ── Presence ─────────────────────────────────────────────────────────── */

.lv-chip-row { margin-top: var(--space-2); }
.lv-now { gap: 6px; }
.lv-dot { width: 8px; height: 8px; background: currentColor; }
.lv-why { margin: calc(-1 * var(--space-1)) 0 var(--space-3); font-size: var(--type-label-medium-size); line-height: var(--type-label-medium-line); }
.cell-sub.lv-why { margin: var(--space-1) 0 0; max-width: 32ch; }
.lv-empty { padding: var(--space-6) var(--space-4); text-align: center; }

/* ── The view ─────────────────────────────────────────────────────────── */

.lv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 32px;
  margin-bottom: var(--space-3);
}
.lv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--shape-full);
  padding: 3px var(--space-3);
  background: var(--tone-good-fill);
  color: var(--tone-good-text);
  font-size: var(--type-label-large-size);
  line-height: var(--type-label-large-line);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.lv-state {
  font-size: var(--type-title-small-size);
  line-height: var(--type-title-small-line);
  font-weight: 500;
  color: var(--on-surface);
}
.lv-updated, .lv-elapsed {
  color: var(--on-surface-variant);
  font-size: var(--type-label-large-size);
  line-height: var(--type-label-large-line);
  font-variant-numeric: tabular-nums;
}
/* The state, read when it changes and never seen (the header shows it). */
.lv-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lv-provisional { margin: 0 0 var(--space-4); }
.lv-ended:empty { display: none; }
.lv-ended { margin: 0 0 var(--space-4); }

/* Stale, lost or no longer current: the whole body is greyed (§12.5); the header stays legible. */
.lv-root.lv-grey .lv-body { opacity: 0.5; filter: grayscale(1); }
/* Before the first frame, and once access has ended, there are no values to show. */
.lv-root.lv-novalues .lv-body { display: none; }

/* ── The coherence ring: the app's ring style, primary → positive ───── */

.lv-coh-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.lv-ring { flex: none; width: 128px; height: 128px; }
.lv-ring svg { display: block; }
.lv-ring-track { fill: none; stroke: var(--surface-variant); stroke-width: 12; }
.lv-ring-arc { fill: none; stroke-width: 12; stroke-linecap: round; }
.lv-ring-a { stop-color: var(--primary); }
.lv-ring-b { stop-color: var(--positive); }
.lv-ring-zone { stroke: var(--threshold); stroke-width: 2; }
.lv-ring-value { fill: var(--on-surface); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lv-ring-unit, .lv-ring-note { fill: var(--on-surface-variant); font-size: 12px; }
.lv-coh-row .kv { flex: 1 1 200px; margin: 0; }
.lv-chart-note { padding: var(--space-5) 0; font-size: var(--type-label-large-size); }

/* ── The pacer, drawn locally (§13.3) ─────────────────────────────────── */

.lv-pacer { display: grid; place-items: center; padding: var(--space-2) 0 var(--space-4); }
.lv-pacer-ring { position: relative; width: 176px; height: 176px; display: grid; place-items: center; }
.lv-pacer-halo, .lv-pacer-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: scale(0.62);
  transform-origin: 50% 50%;
  will-change: transform;
}
.lv-pacer-halo { border: 2px solid var(--primary); }
.lv-pacer-core { inset: 18%; background: color-mix(in srgb, var(--primary) 18%, transparent); }
.lv-pacer-label { position: relative; text-align: center; }
.lv-pacer-word {
  font-size: var(--type-title-medium-size);
  line-height: var(--type-title-medium-line);
  font-weight: 500;
  color: var(--primary);
}
.lv-pacer-rate { color: var(--on-surface-variant); font-size: var(--type-label-large-size); line-height: var(--type-label-large-line); }

.lv-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.lv-chips:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lv-pacer-halo, .lv-pacer-core { will-change: auto; transition: none; }
}

@media print {
  .lv-pacer { display: none; }
}