/* stories.css — the Stories viewer (js/stories.js): a full-screen dialog whose
   body is a vertical scroll-snap feed, one short film per screen, the way the
   phone apps page through them. The window chrome dresses the bar on the OS
   themes (data-window="dialog"). Colours are tokens; the stage is black. */
.st-viewer { position: fixed; inset: 0; z-index: 2050; display: flex; flex-direction: column; background: rgba(var(--cga-black-rgb), .92); }
.st-viewer[hidden] { display: none; }
.st-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--fx-card-header-bg); color: var(--surface-accent-text); border-bottom: 1px solid var(--border); flex: 0 0 auto; user-select: none; }
.st-bar-title { font-weight: bold; }
.st-bar-count { opacity: .8; font-weight: normal; }
.st-bar-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.st-bar[data-win] .st-close { display: none; }
.st-bar[data-win] .st-bar-title { color: inherit; }
.st-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.st-feed::-webkit-scrollbar { display: none; }
.st-slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; position: relative; }
.st-frame { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: var(--cga-black); box-shadow: 0 0 0 1px var(--border-soft); }
.st-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-frame .st-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-frame .st-poster[hidden] { display: none; }
.st-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; color: var(--pal-15); background: linear-gradient(rgba(var(--pal-0-rgb), 0), rgba(var(--pal-0-rgb), .8)); pointer-events: none; }
.st-caption-title { font-weight: bold; }
.st-caption-date { font-size: .8em; opacity: .8; }
.st-slide.is-active .st-caption { opacity: 0; transition: opacity 1.2s 2s; }
.st-nav { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.st-nav button, .st-close { width: 40px; height: 40px; font-size: 1.1rem; line-height: 1; }
.st-nav button { font-family: var(--font-cp437); }
.st-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: var(--pal-15); opacity: .6; font-size: .8em; pointer-events: none; }
@media (max-width: 767.98px) { .st-nav { display: none; } .st-frame { width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 100%; } }