/* =========================================================
   Měřák: ručičkový VU metr, segmentové VU pruhy, verdikt a lístek
   ---------------------------------------------------------
   Sdílí úvod (Roast webu) a profil (ROAST v sedení). HTML skládá
   assets/js/merak.js. Žlutá a hlína jen u skutečného výsledku,
   ukázku kreslí písek (relacia.css, .is-ukazka).
   ========================================================= */
.roast__skore { display: flex; align-items: baseline; gap: 0.35rem; }
.roast__skore b {
  font: 800 clamp(3.4rem, 8vw, 4.6rem)/0.9 var(--font-display);
  font-stretch: 112%; letter-spacing: -0.05em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.roast__skore span { font-weight: 700; color: var(--sand); }
.roast__kat { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.roast__kat li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 1.5rem; gap: 0.75rem; align-items: center; font-size: 0.9rem; color: var(--paper-dim); }
.roast__kat b { text-align: right; font-variant-numeric: tabular-nums; color: var(--paper); }
.roast__vu {
  height: 0.6rem; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--ink-line) 0 6px, transparent 6px 8px);
}
.roast__vu i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 6px, transparent 6px 8px);
  transform-origin: left;
  animation: roast-vu 0.6s var(--e-out) both;
}
.roast__vu.is-cervena i { background: repeating-linear-gradient(90deg, var(--clay) 0 6px, transparent 6px 8px); }
@keyframes roast-vu { from { transform: scaleX(0); } }
.roast__lbl {
  margin-bottom: 0.35rem;
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand);
}
.roast__verdikt p:not(.roast__lbl) { font-size: 1.05rem; line-height: 1.5; color: var(--paper); }
/* „Oprav ako prvé": vytištěný lístek, jako rozpis relácie. */
.roast__listok {
  padding: 1rem 1.15rem;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-0.5deg);
  box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .9);
}
.roast__listok .roast__lbl { color: var(--ink-72); }
.roast__listok p:not(.roast__lbl) { font-weight: 600; line-height: 1.5; }
.roast__listok ::selection { background: var(--ink); color: var(--paper); }
/* ---------- Roast: ručičkový VU metr a ukázka ---------- */
.roast__merak { position: relative; width: min(100%, 15rem); }
.roast__merak svg { display: block; width: 100%; height: auto; overflow: visible; }
.roast__merak line { stroke: var(--sand-deep); stroke-width: 1.4; stroke-linecap: round; }
.roast__merak line.je-velka { stroke: var(--paper-dim); stroke-width: 2.2; }
.roast__merak line.je-cervena { stroke: var(--clay); }
.roast__merak text {
  fill: var(--sand);
  font: 800 9px var(--font-body); font-stretch: 72%;
  text-anchor: middle;
}
.roast__rucicka { transform-origin: 100px 100px; transform: rotate(var(--uhol, -90deg)); }
.roast__rucicka line { stroke: var(--yellow); stroke-width: 3; }
.roast__merak circle { fill: var(--ink); stroke: var(--yellow); stroke-width: 2.5; }
.roast__merak.is-cervena .roast__rucicka line { stroke: var(--clay); }
.roast__merak.is-cervena circle { stroke: var(--clay); }
/* Vyhoupnutí: přeletí a usadí se, jako skutečná ručička s tlumením. */
@media (prefers-reduced-motion: no-preference) {
  .roast__rucicka { animation: rucicka 1.1s cubic-bezier(.3, 1.45, .55, 1) both 0.15s; }
}
@keyframes rucicka { from { transform: rotate(-90deg); } }
.roast__merak .roast__skore { justify-content: center; }
.roast__merak .roast__skore b { font-size: clamp(2.6rem, 6vw, 3.4rem); }
.roast__merak.is-cervena .roast__skore b { color: var(--clay-text); }

.roast__merak .roast__skore { margin-top: 0.35rem; }
@media (prefers-reduced-motion: reduce) {
  .roast__vu i { animation: none; }
}
/* Stĺpec pre ručičku pevne: „auto" so šírkou v percentách sa
   rozťahoval a ukrajoval pruhom. */
@media (min-width: 640px) {
  .roast__mer { grid-template-columns: 14rem minmax(0, 1fr); }
  .roast__mer .roast__merak { width: 100%; }
}

/* Dôvod pod riadkom kategórie („Lebo …"), Roast webu aj ROAST v sedení. */
.roast__kat-pozn { grid-column: 1 / -1; margin-top: -0.2rem; font-size: 0.82rem; line-height: 1.45; color: var(--sand); }
.roast__kat li { row-gap: 0.25rem; }