/* Videos section (landing page, app Home, and /videos). Colours come from the host page's tokens. */
.vid-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin; }
.vid-rail .vid-card { flex: 0 0 168px; scroll-snap-align: start; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 18px 14px; }
.vid-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 0;
  background: none; border: none; color: inherit; font: inherit; cursor: pointer;
}
.vid-poster {
  position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: var(--surface-2, #1a1d2a); border: 1px solid var(--border, #262a3d);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.vid-card:hover .vid-poster, .vid-card:focus-visible .vid-poster { transform: translateY(-3px); border-color: var(--red, #ff2d6a); }
.vid-card:focus-visible { outline: none; }
.vid-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-topic {
  position: absolute; top: 8px; left: 8px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(5, 6, 10, 0.78); color: var(--green, #2dffa0); border: 1px solid rgba(45, 255, 160, 0.5);
}
.vid-dur { position: absolute; bottom: 8px; right: 8px; font-family: var(--mono, var(--font-mono, monospace)); font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(5, 6, 10, 0.8); color: #fff; }
.vid-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 3px; font-size: 1rem; color: #fff; background: rgba(255, 45, 106, 0.9);
  box-shadow: 0 0 22px rgba(255, 45, 106, 0.55);
}
.vid-title { font-weight: 800; font-size: 0.88rem; line-height: 1.3; color: var(--ink, #f2f3f8); }
.vid-date { font-size: 0.74rem; color: var(--muted, #7d81a0); }
.vid-follow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.vid-follow-label { font-size: 0.8rem; font-weight: 700; color: var(--ink-2, #c7cadb); margin-right: 4px; }
.vid-follow-link { font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border, #262a3d); color: var(--ink, #f2f3f8); text-decoration: none; }
.vid-follow-link:hover { border-color: var(--red, #ff2d6a); }

.vid-dialog { border: 1px solid var(--border, #262a3d); border-radius: 18px; padding: 0; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--surface, #12141d); color: var(--ink-2, #c7cadb); }
.vid-dialog::backdrop { background: rgba(5, 6, 10, 0.86); }
.vid-player { display: block; width: 100%; max-height: 72vh; aspect-ratio: 9 / 16; background: #000; }
.vid-close {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: #fff; background: rgba(5, 6, 10, 0.75);
}
.vid-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.vid-info-title { font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: var(--ink, #f2f3f8); }
.vid-info-sum { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2, #c7cadb); }
.vid-links { display: flex; flex-wrap: wrap; gap: 8px; }
.vid-link { font-size: 0.82rem; font-weight: 700; padding: 8px 14px; border-radius: 10px; background: var(--red, #ff2d6a); color: #fff; text-decoration: none; }
.vid-disclaimer { margin: 0; font-size: 0.74rem; color: var(--muted, #7d81a0); }
@media (prefers-reduced-motion: reduce) { .vid-poster { transition: none; } }

/* One example video on the landing page */
.vid-feature-row { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; margin-top: 26px; }
.vid-featured .vid-card { width: 240px; }
.vid-feature-text ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vid-feature-text li { color: var(--ink, #f2f3f8); font-weight: 700; padding-left: 26px; position: relative; }
.vid-feature-text li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; border-radius: 50%; background: var(--red, #ff2d6a); box-shadow: 0 0 10px rgba(255, 45, 106, 0.6); }
@media (max-width: 640px) { .vid-feature-row { grid-template-columns: 1fr; gap: 22px; } .vid-featured .vid-card { width: min(260px, 70vw); } }