/* The photo story in the Operators panel and its viewer (v2, 2026-11-04).
   Ported from terrain/src/style.css; tokens resolved locally. */
.story-slot[hidden] { display: none; }
.story { --white: #fff; --r-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); margin-top: 24px; }
.story-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-title { font-size: 19px; font-weight: 600; line-height: 1.2; text-wrap: balance; }
.story-play {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 10px; border: 0; border-radius: var(--r-pill);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--white); background: var(--ink);
  cursor: pointer; transition: transform 0.2s var(--ease), background-color 0.2s ease;
}
.story-play svg { width: 14px; height: 14px; }
.story-play:hover { background: #2b3036; }
.story-play:active { transform: scale(0.96); }
.story-sub { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.story-band {
  --amb: #6b6f73;
  position: relative; margin: 18px -28px 0;
  padding: 22px 0 14px;
  background: color-mix(in oklab, var(--amb) 52%, #0b0f13);
  transition: background-color 0.8s var(--ease);
}
.story-rail {
  position: relative; container-type: inline-size;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.story-rail::-webkit-scrollbar { display: none; }
.story-rail:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; border-radius: 6px; }
.story-track { display: flex; gap: 4cqi; list-style: none; margin: 0; padding-inline: 19cqi; width: max-content; }
.story-slide { flex: none; width: 62cqi; scroll-snap-align: center; scroll-snap-stop: always; }
.story-shot {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in;
  transform-origin: 50% 60%; will-change: transform, opacity;
}
.story-shot img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.story-shot img.is-in { opacity: 1; }
.story-shot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.story-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 0; }
.story-dots { display: flex; align-items: center; gap: 2px; }
.story-dot { position: relative; width: 14px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.45s var(--ease); }
.story-dot::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 6px; margin-top: -3px;
  border-radius: 3px; background: rgba(255, 255, 255, 0.42); transition: background-color 0.3s ease;
}
.story-dot:hover::before { background: rgba(255, 255, 255, 0.7); }
.story-dot.is-on { width: 30px; }
.story-dot.is-on::before { background: var(--white); }
.story-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 0; border-radius: 6px; }
.story-paddles { display: flex; gap: 8px; }
.story-paddle, .vw-paddle, .vw-btn {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.story-paddle { width: 32px; height: 32px; }
.story-paddle svg, .vw-paddle svg, .vw-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.story-play svg .fill, .vw-btn svg .fill { fill: currentColor; stroke: none; }
.story-paddle:hover:not(:disabled), .vw-paddle:hover:not(:disabled), .vw-btn:hover { background: rgba(255, 255, 255, 0.28); }
.story-paddle:active:not(:disabled), .vw-paddle:active:not(:disabled), .vw-btn:active { transform: scale(0.92); }
.story-paddle:disabled, .vw-paddle:disabled { opacity: 0.32; cursor: default; }
.story-paddle:focus-visible, .vw-paddle:focus-visible, .vw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.story-cap { margin-top: 16px; min-height: 96px; }
.story-time { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.story-time::before { content: ""; width: 7px; height: 7px; background: var(--signal-bright); }
.story-text { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.story-text b { font-weight: 600; color: var(--ink); }

/* the viewer: full screen, the photo grows out of its thumbnail */
html.viewer-open { overflow: hidden; }
.viewer {
  --amb: #2c2f33; --white: #fff; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-family: inherit;
  overflow: hidden;
}
.viewer::backdrop { background: transparent; }
.viewer:focus { outline: none; }
.vw-bg { position: absolute; inset: 0; background: #0b0e12; }
.vw-amb {
  position: absolute; inset: -10%;
  background: radial-gradient(60% 55% at 50% 48%, color-mix(in oklab, var(--amb) 70%, transparent), transparent 72%);
  opacity: 0.55; transition: background 1s var(--ease); pointer-events: none;
}
.vw-top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: max(14px, env(safe-area-inset-top)) clamp(16px, 3vw, 28px) 0; }
.vw-bars { display: flex; gap: 4px; }
.vw-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.26); overflow: hidden; }
.vw-bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.vw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.vw-meta { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 14px; margin: 0; }
.vw-meta b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-meta time { color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-actions { display: flex; gap: 8px; flex: none; }
.vw-btn { width: 36px; height: 36px; }
.vw-rail { position: absolute; z-index: 1; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.vw-rail::-webkit-scrollbar { display: none; }
.vw-rail:focus { outline: none; }
.vw-track { display: flex; list-style: none; margin: 0; padding: 0; }
.vw-slide {
  flex: none; width: 100vw; height: 100dvh; scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; place-items: center;
  padding: calc(max(14px, env(safe-area-inset-top)) + 74px) 16px calc(max(16px, env(safe-area-inset-bottom)) + 112px);
}
.vw-frame {
  position: relative; margin: 0; overflow: hidden; border-radius: 8px;
  height: min(100%, calc((100vw - 32px) * 4 / 3)); aspect-ratio: 3 / 4;
  background-size: cover; background-position: center; transform-origin: 50% 50%;
}
.vw-frame img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.vw-frame img.is-in { opacity: 1; }
.vw-slide.is-active .vw-frame img { animation: vw-drift 12s cubic-bezier(0.33, 0, 0.2, 1) both; }
@keyframes vw-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.vw-paddle { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; margin-top: -22px; }
.vw-prev { left: clamp(12px, 3vw, 32px); }
.vw-next { right: clamp(12px, 3vw, 32px); }
.vw-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 24px max(22px, env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.vw-cap p { max-width: 54ch; min-height: 3em; margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); text-align: center; text-wrap: balance; }
.vw-cap b { font-weight: 600; color: #fff; }

@media (pointer: coarse), (max-width: 640px) { .vw-paddle { display: none; } }
@media (max-width: 800px) {
  .v2 .panel:has(.story-slot:not([hidden])) { max-height: 84%; }
  .story { margin-top: 22px; }
  .story-band { margin-inline: -20px; }
  .story-track { padding-inline: 25cqi; }
  .story-slide { width: 50cqi; }
  .story-paddles { display: none; }
  .story-nav { justify-content: center; }
  .vw-cap p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-band, .story-dot, .story-shot img, .vw-amb, .vw-frame img { transition: none; }
  .vw-slide.is-active .vw-frame img { animation: none; }
  .story-rail, .vw-rail { scroll-behavior: auto; }
}

/* the Operators ticker (Ryan, 2026-11-08): loops forever, hover does not stop it */
.op-reel { margin-top: 22px; }
.op-reel-band { margin: 0 -28px; overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.op-reel-track { --w: 220px; --gap: 12px; display: flex; gap: var(--gap); width: max-content;
  animation: op-reel-roll calc(var(--n) * 5.5s) linear infinite; will-change: transform; }
.op-reel-shot { flex: none; width: var(--w); aspect-ratio: 3 / 4; margin: 0; border-radius: 12px; overflow: hidden; }
.op-reel-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes op-reel-roll { to { transform: translateX(calc(var(--n) * (var(--w) + var(--gap)) * -1)); } }
.op-reel-credit { margin-top: 10px; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .op-reel-track { animation: none; } .op-reel-band { overflow-x: auto; } }

.tech-ground .op-reel-band { margin: 0 -32px; }

/* the sourced photo at the top of the Incident command and Relay pop-ups (Ryan, 2026-11-08) */
.pt-photo { margin: 16px 0 0; }
.pt-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: #d9dcd8; }
.pt-photo-credit { margin-top: 8px; font-size: 10.5px; line-height: 1.4; letter-spacing: 0.02em; color: var(--muted); }
.pt-photo-relay img { aspect-ratio: 960 / 754; }   /* keep the antenna tops in frame */