/* /facility-watch/fw-cams.css — CCTV on the facility page (fw-cams.js). Grid and cards take the page's palette
 * tokens; the full-screen viewer is always dark (a photo reads best on black, in every palette). */
.fwc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.fwc-bar .fw-seg button[aria-pressed="true"]{font-weight:700;color:var(--ground);background:var(--ink)}
.fwc-size{margin-left:0}.fwc-size button{min-height:32px;padding:0 11px}
.fwc-note{margin-left:auto;font-size:12.5px;color:var(--soft)}
.fwc-find{height:40px;width:160px;padding:0 10px;border:2px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);font:inherit}
.fwc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.fwc-grid.sz-S{grid-template-columns:repeat(8,minmax(0,1fr))}.fwc-grid.sz-L{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fwc-th,.fwc-card-img{position:relative;display:block;padding:0;border:0;background:#12110d;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.fwc-th{animation:fwc-rise .5s cubic-bezier(.2,.8,.2,1) backwards}
.fwc-th img,.fwc-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.fwc-th:hover img,.fwc-card:hover img{transform:scale(1.05)}
.fwc-th.stale img{filter:grayscale(1) brightness(.7)}
.fwc-th.flag{outline:3px solid var(--red);outline-offset:-3px}
.fwc-flag{position:absolute;left:0;top:0;z-index:1;padding:2px 6px;background:var(--red);color:var(--red-ink);font-size:11px;font-weight:700}
.fwc-th:focus-visible,.fwc-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fwc-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:6px;padding:5px 7px;background:linear-gradient(transparent,rgba(18,17,13,.85));color:#f2ede0;font:500 11px 'B612 Mono',ui-monospace,monospace;text-align:left}
.fwc-grid.sz-L .fwc-cap{font-size:13px;padding:8px 10px}
.fwc-cap .old{background:var(--amber);color:#16150f;padding:0 4px}.fwc-cap .dead{background:var(--red);color:#fff;padding:0 4px}
.fwc-more{margin-top:10px;min-height:40px;padding:0 14px;border:2px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
@keyframes fwc-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fwc-th{animation:none}.fwc-th img,.fwc-card-img img{transition:none}}
/* look at these first */
.fwc-look{margin:4px 0 6px;padding:14px;border:2px solid var(--red);border-radius:6px;background:var(--paper);color:var(--pink)}
.fwc-look-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}.fwc-look-h b{color:var(--red)}.fwc-look-h span{font-size:13px;color:var(--psoft)}
.fwc-look-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fwc-card{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fwc-card b{font-size:14px;margin-top:4px}.fwc-card small{font-size:12.5px;opacity:.8}
.fwc-un{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}.fwc-un span{font-size:12px;font-weight:700}.fwc-un small{font-size:12.5px;opacity:.8}
.fwc-un-more{display:none;align-self:flex-start;min-height:44px;margin-top:6px;padding:0 14px;border:2px solid currentColor;border-radius:3px;background:transparent;color:inherit;font:inherit;cursor:pointer}
/* a phone: flagged and latest stills become full-width swipe rows (one camera a screen, the next peeking in); S/M/L means nothing here */
@media (max-width:760px){.fwc-bar{gap:8px}.fwc-bar .fw-seg{flex:1 1 100%}.fwc-bar .fw-seg button{flex:1 1 0}.fwc-find{flex:1 1 100%;width:auto;height:44px;font-size:16px}.fwc-pick select{font-size:16px}.fwc-size{display:none}.fwc-note{flex-basis:100%;margin-left:0}
  .fwc-grid,.fwc-grid.sz-S,.fwc-grid.sz-M,.fwc-grid.sz-L,.fwc-look-g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:8px;align-items:start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:4px}
  .fwc-th,.fwc-card{scroll-snap-align:start}.fwc-cap,.fwc-grid.sz-L .fwc-cap{padding:6px 8px;font-size:12px}.fwc-flag,.fwc-ai i,.fwc-ai em,.fwc-pick em{font-size:12px}.fwc-look{padding:12px}.fwc-more{min-height:44px;width:100%}
  .fwc-un-more{display:block}.fwc-un:not(.open) small:nth-of-type(n+4),.fwc-un:not(.open) small:nth-of-type(n+4)+.fwc-pick{display:none}
  .fwc-pick{margin-left:0}.fwc-pick select,.fwc-pick button{height:44px}.fwc-pick select{max-width:100%}}
/* full-screen viewer */
.fwc-lb{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:#0b0a08;color:#f2ede0;font-family:'B612',system-ui,sans-serif;animation:fwc-in .18s ease-out}
.fwc-lb[hidden]{display:none}
@keyframes fwc-in{from{opacity:0}to{opacity:1}}
.fwc-lb-top{display:flex;align-items:center;gap:24px;padding:14px 22px;border-bottom:1px solid #2a2822}
.fwc-lb-id{display:flex;flex-direction:column;gap:2px;min-width:0}.fwc-lb-id span{font:500 11px 'B612 Mono',monospace;letter-spacing:.08em;color:#9c978a}
.fwc-lb-id b{font:700 26px/1.1 'B612',sans-serif;text-transform:uppercase}
.fwc-lb-when{display:flex;flex-direction:column;gap:2px;margin-left:12px}.fwc-lb-when b{font:700 26px/1 'B612 Mono',monospace}
.fwc-lb-when span{font:500 11px 'B612 Mono',monospace;letter-spacing:.06em;color:#9c978a}.fwc-lb-when .old{color:#e6a824}.fwc-lb-when .dead{color:#ff6a3d}
.fwc-lb-btns{display:flex;gap:8px;margin-left:auto}
.fwc-lb-btns button,.fwc-lb-btns a{height:40px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid #3a3830;background:transparent;color:#f2ede0;font:700 13px 'B612',sans-serif;cursor:pointer;text-decoration:none}
/* the label's space sits inside a flex item, where a bare space collapses: keep it (desk reads "▶ Time-lapse", "Original ↗") */
.fwc-tx{white-space:pre}
.fwc-lb-btns button:hover,.fwc-lb-btns a:hover,.fwc-lb-cams button:hover,.fwc-lb-nav:hover{background:#d63a0c;border-color:#d63a0c}
.fwc-lb-stage{position:relative;min-height:0;overflow:hidden}
.fwc-lb-frame{position:absolute;inset:0 72px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.fwc-lb-frame img{max-width:100%;max-height:100%;object-fit:contain;display:block;transition:transform .25s ease}
.fwc-lb-frame.zoom{cursor:zoom-out}.fwc-lb-frame.zoom img{transform:scale(2.5)}
.fwc-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:64px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:rgba(242,237,224,.06);color:#f2ede0;cursor:pointer}
.fwc-lb-nav span{font-size:44px;line-height:1}.fwc-lb-nav small{font:500 11px 'B612 Mono',monospace;color:#9c978a}.fwc-lb-nav:hover small{color:#f2ede0}
.fwc-lb-nav.l{left:4px}.fwc-lb-nav.r{right:4px}
.fwc-lb-cams{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(11,10,8,.78);padding:6px;font:500 11px 'B612 Mono',monospace;color:#9c978a;white-space:nowrap}
.fwc-lb-cams button{height:30px;padding:0 12px;border:1px solid #3a3830;background:transparent;color:#f2ede0;font:700 12px 'B612',sans-serif;cursor:pointer}
.fwc-lb-foot{min-width:0;display:flex;flex-direction:column;gap:6px;padding:10px 22px 12px;border-top:1px solid #2a2822}
.fwc-lb-fine{font:500 11px 'B612 Mono',monospace;letter-spacing:.06em;color:#9c978a}
.fwc-lb-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-color:#3a3830 transparent}
.fwc-lb-day{display:flex;flex-direction:column;gap:4px;flex:none}.fwc-lb-day>span{font:700 11px 'B612 Mono',monospace;border-left:2px solid #d63a0c;padding-left:6px}.fwc-lb-day>div{display:flex;gap:4px}
.fwc-lth{position:relative;width:112px;aspect-ratio:16/9;padding:0;border:0;background:#1a1915;cursor:pointer;opacity:.55;transition:opacity .15s}
.fwc-lth:hover{opacity:.9}.fwc-lth.on{opacity:1;outline:3px solid #d63a0c;outline-offset:-3px}
.fwc-lth img{width:100%;height:100%;object-fit:cover;display:block}
.fwc-lth span{position:absolute;left:0;bottom:0;padding:1px 4px;background:rgba(11,10,8,.8);font:500 10px 'B612 Mono',monospace;color:#f2ede0}
.fwc-swipe{display:none}
/* the viewer on a phone: a compact top clear of the notch (camera, time, three square buttons), the picture full width,
   the camera bar inside the screen, swipe for time and camera; touch-action leaves single-finger moves to the swipe */
@media (max-width:760px){.fwc-lb{overscroll-behavior:contain}.fwc-lb-stage{touch-action:pinch-zoom}.fwc-lb-frame{inset:0}
  .fwc-lb-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .fwc-lb-id{grid-row:1}.fwc-lb-id b{font-size:18px}.fwc-lb-id span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}/* the facility and area wrap to two lines, never "FLOO…" */
  .fwc-lb-when{grid-column:1/-1;margin-left:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}.fwc-lb-when b{font-family:'B612',sans-serif;font-size:16px}
  .fwc-lb-btns{grid-column:2;grid-row:1;align-self:center;margin-left:0;gap:6px}.fwc-lb-btns button,.fwc-lb-btns a{width:44px;height:44px;padding:0;justify-content:center}.fwc-tx{display:none}
  .fwc-lb-nav{width:40px;height:72px;background:rgba(11,10,8,.5)}.fwc-lb-cams{left:8px;right:8px;bottom:8px;transform:none;justify-content:space-between;white-space:normal;text-align:center}
  .fwc-lb-cams button{height:44px;max-width:38%;padding:0 10px;overflow:hidden;white-space:normal;line-height:1.15;text-align:left}
  .fwc-lb-foot{padding:8px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .fwc-lb-fine,.fwc-lb-id span,.fwc-lb-when span,.fwc-lb-cams,.fwc-lb-day>span,.fwc-lth span{font-size:12px}}
@media (max-width:760px),(hover:none){.fwc-keys{display:none}.fwc-swipe{display:block}}
@media (pointer:coarse){.fwc-cap{font-size:12px}.fwc-size button{min-width:44px;min-height:44px}.fwc-bar .fw-seg button,.fwc-more,.fwc-lb-btns button,.fwc-lb-btns a,.fwc-lb-cams button{min-height:44px}.fwc-find,.fwc-pick select,.fwc-pick button{height:44px}}
/* which camera to look at (fw-cams-look.js): no visible change, AI reading, silent cameras, staging map */
.fwc-card.still .fwc-card-img{outline:3px solid var(--red);outline-offset:-3px}
.fwc-still{align-self:flex-start;margin-top:4px;padding:2px 7px;background:var(--red);color:var(--red-ink);font-size:12px;font-weight:700}
.fwc-mo{font-size:12px!important;opacity:.75}
.fwc-ai{display:block;margin-top:4px;padding:6px 8px;border-left:3px solid var(--psoft);font-size:12.5px;line-height:1.4}
.fwc-ai i{font-style:normal;font-weight:700;font-size:11px;padding:1px 5px;margin-right:4px;background:var(--unlit);color:#11205e}
.fwc-ai i.v-confirms{background:var(--red);color:var(--red-ink)}.fwc-ai i.v-contradicts{background:var(--good);color:#fff}
.fwc-ai em{display:block;margin-top:3px;font-style:normal;font-size:11px;opacity:.65}
.fwc-dead{display:flex;flex-direction:column;gap:3px;margin:4px 0 10px;padding:10px 12px;border:2px solid var(--amber);border-radius:6px}
.fwc-dead b{font-size:14px}.fwc-dead small{font-size:12.5px;color:var(--soft)}
.fwc-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px 12px;font-size:12.5px}
.fwc-pick select{height:34px;max-width:260px;border:2px solid currentColor;border-radius:3px;background:transparent;color:inherit;font:inherit}
.fwc-pick button{height:34px;padding:0 12px;border:0;border-radius:3px;background:var(--pink);color:var(--paper);font:inherit;font-weight:700;cursor:pointer}
.fwc-pick button[disabled]{opacity:.5;cursor:default}.fwc-pick em{font-style:normal;font-size:11.5px;opacity:.7;flex-basis:100%}
/* last, so it outranks the viewer's own animation and transitions above */
@media (prefers-reduced-motion:reduce){.fwc-lb{animation:none}.fwc-lb-frame img,.fwc-lth{transition:none}}