/* Global app styles */

/* Fixed-width digits and box to prevent jitter while time updates */
:root {
  --time-ago-ch: 12; /* adjust if you show longer strings like "1d 23h ago" */
}

.time-ago {
  display: inline-block;
  width: calc(var(--time-ago-ch) * 1ch);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Helpful utility if you have other numeric cells */
.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Responsive YouTube embed (16:9) */
.yt-embed {
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 12px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.yt-embed .yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-embed .yt-open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}
.yt-embed .yt-open:hover { background: rgba(0,0,0,.75); }