/* P25X Live -- SSTV tab (js/tab-sstv.js).
   Builds on app.css (.panel, .ph-row, .ph, .ph-meta, .empty, .call).

   ANIMATION AUDIT: .sstv-new = one-shot 2.6 s glow on a newly received
   picture (never repeats; the class is removed after it plays; not added at
   all under reduced motion, and app.css kills animations under
   prefers-reduced-motion / body.rm anyway). Nothing loops. */

.sstv-panel { max-width: 1100px; margin: 0 auto; }
.sstv-intro { margin: 0 0 14px; color: var(--muted); font-size: 0.86rem; }
.sstv-meta-bad { color: var(--warn); }
.sstv-err { color: var(--warn); }

.sstv-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* the newest picture gets a double-width tile when there's room */
@media (min-width: 720px) {
  .sstv-grid { grid-template-columns: repeat(4, 1fr); }
  .sstv-latest { grid-column: span 2; grid-row: span 2; }
}

.sstv-card {
  border: 1px solid var(--panel-b); border-radius: 12px; overflow: hidden;
  background: rgba(6, 12, 30, 0.55);
}
.sstv-latest { border-color: rgba(255, 207, 122, 0.45); }
.sstv-fig { margin: 0; display: flex; flex-direction: column; height: 100%; }
.sstv-link { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; background: #01020a; min-height: 140px; }
.sstv-img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; image-rendering: auto; }
.sstv-broken .sstv-img { visibility: hidden; }
.sstv-broken .sstv-link::after { content: 'Picture no longer available'; color: var(--dim); font-size: 0.8rem; position: absolute; }

.sstv-cap {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 8px 12px 10px; border-top: 1px solid var(--panel-b);
}
.sstv-from { font-weight: 700; color: var(--ink); }
.sstv-from.unid { color: var(--dim); font-weight: 500; }
.sstv-latest .sstv-from { color: var(--gold); }
.sstv-time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; text-align: right; }
.sstv-facts { grid-column: 1 / -1; color: var(--dim); font-size: 0.76rem; }

/* one-shot highlight for a newly received picture */
.sstv-new { animation: sstvnew 2.6s ease-out 1 both; }
@keyframes sstvnew {
  0% { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(255, 207, 122, 0.55); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}