/* Camera Center — self-contained presentation, independent of the generic Road Hub cards. */
body.camera-center-page .road-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px 0 22px;align-items:stretch;
}
body.camera-center-page .camera-card{
  min-width:0;border:1px solid #dbe5ed;border-radius:18px;background:#fff;
  box-shadow:0 7px 25px rgba(17,48,73,.06);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;
}
body.camera-center-page .camera-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(17,48,73,.11)}
body.camera-center-page .camera-card-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1;
  padding:17px 19px 18px;min-width:0;color:#18334c;
}
body.camera-center-page .camera-card-body h3{
  margin:0;font-size:1.09rem;font-weight:800;line-height:1.33;color:#122e49;overflow-wrap:anywhere;
}
body.camera-center-page .camera-card-body p{margin:0;font-size:.87rem;line-height:1.5;color:#516b80;overflow-wrap:anywhere}
body.camera-center-page .camera-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.camera-center-page .camera-meta span{
  display:inline-flex;align-items:center;padding:5px 9px;border-radius:8px;
  font-size:.74rem;font-weight:800;color:#1d526f;background:#ebf5f9;line-height:1.2
}
body.camera-center-page .camera-meta span:last-child{background:#f0f4f8;color:#53687c}
body.camera-center-page .camera-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:7px}
body.camera-center-page .camera-card-actions .road-link{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border-radius:10px;background:#0e4b77;border:1px solid #0e4b77;color:#fff;
  text-decoration:none;font-size:.83rem;font-weight:800;padding:9px 12px;line-height:1.25
}
body.camera-center-page .camera-card-actions .road-link:hover,
body.camera-center-page .camera-card-actions .road-link:focus-visible{
  background:#0a3457;color:#fff;outline:2px solid #98d4fa;outline-offset:1px
}
body.camera-center-page .camera-card-actions .road-link.secondary-link{
  color:#174b6b;background:#fff;border-color:#c8dce9
}
body.camera-center-page .camera-card-actions .road-link.secondary-link:hover{background:#edf6fc}
body.camera-center-page .camera-card-actions button.road-link{
  cursor:pointer;font:inherit;text-decoration:none
}
/* Maryland CHART: official video player is HTML, not a JPG snapshot. */
body.camera-center-page .camera-card-maryland{border-color:#d3e1ed}
body.camera-center-page .camera-md-video-btn{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:9px;aspect-ratio:16/9;min-height:185px;padding:24px 12px;border:0;
  background:linear-gradient(145deg,#0c3554,#125b84);
  color:#fff;text-align:center;cursor:pointer;width:100%;line-height:1.25;
}
body.camera-center-page .camera-md-video-btn:hover,
body.camera-center-page .camera-md-video-btn:focus-visible{
  background:linear-gradient(145deg,#0a304c,#176a91);outline:3px solid #91c9e8;outline-offset:-3px
}
body.camera-center-page .camera-md-play-icon{
  display:grid;place-items:center;width:55px;height:55px;border-radius:50%;
  font-size:21px;padding-left:3px;color:#0d4266;background:#e7f7ff;
  box-shadow:0 2px 15px rgba(0,0,0,.18);
}
body.camera-center-page .camera-md-video-btn strong{font-size:.98rem;font-weight:800}
body.camera-center-page .camera-md-video-btn small{font-size:.75rem;font-weight:600;color:#c5e7f9}
body.camera-center-page .camera-md-attribution{color:#54758c;font-size:.76rem}

/* Direct Maryland CHART HLS video, streamed only for up to three visible cards. */
body.camera-center-page .camera-md-live-stage{
  position:relative;aspect-ratio:16/9;min-height:175px;
  width:100%;background:linear-gradient(135deg,#0c304a,#0d4b75);overflow:hidden;
  isolation:isolate;
}
body.camera-center-page .camera-md-inline-video{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#081d2c;z-index:1;
}
body.camera-center-page .camera-md-live-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:13px;
  background:linear-gradient(180deg,rgba(8,29,44,.65),transparent 40%,rgba(8,29,44,.72));
}
body.camera-center-page .camera-md-live-tag{
  font-size:.73rem;font-weight:850;letter-spacing:.04em;
  color:#fff;background:rgba(181,30,42,.91);padding:5px 9px;border-radius:7px;
}
body.camera-center-page .camera-md-live-status{
  display:block;align-self:center;color:#e6f4ff;max-width:96%;
  text-align:center;font-size:.86rem;font-weight:750;
  line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.7);
}
body.camera-center-page .md-inline-playing .camera-md-live-status{display:none}
body.camera-center-page .md-inline-playing .camera-md-live-overlay{
  background:linear-gradient(180deg,rgba(8,29,44,.48),transparent 38%);justify-content:flex-start
}
body.camera-center-page .md-inline-failed .camera-md-live-tag{background:#576c81}
body.camera-center-page #mdPreviewToggle{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #b9d4e7;background:#f4faff;color:#155177;
  border-radius:10px;font-size:.81rem;font-weight:800;padding:10px 13px;
  cursor:pointer;
}
body.camera-center-page #mdPreviewToggle:hover{background:#e7f3fb}
body.camera-center-page #mdPreviewToggle[hidden]{display:none}

body.camera-center-page .camera-card-location{border-color:#c7dde9}
body.camera-center-page .camera-ky-photo{
  position:relative;aspect-ratio:16/9;background:#dfeaf2;overflow:hidden;min-height:155px
}
body.camera-center-page .camera-ky-photo img{
  display:block;width:100%;height:100%;object-fit:cover
}
body.camera-center-page .camera-image-credit{
  position:absolute;left:10px;bottom:9px;background:rgba(8,34,53,.82);
  color:#fff;font-size:.69rem;font-weight:750;letter-spacing:.01em;
  border-radius:7px;padding:5px 9px;line-height:1.15
}
body.camera-center-page .camera-ky-photo:has(.camera-image-fallback){
  display:flex;align-items:center;justify-content:center
}
body.camera-center-page .camera-ky-photo:has(.camera-image-fallback) .camera-image-credit{
  display:none
}

body.camera-center-page .camera-location-head{
  display:flex;align-items:center;gap:12px;padding:15px 19px;
  background:linear-gradient(115deg,#e8f5fd,#f4f9fe);
  border-bottom:1px solid #e0ecf5;min-height:70px;color:#124d73
}
body.camera-center-page .camera-location-icon{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  background:#cce8f7;border-radius:12px;color:#175a7d;font-size:21px
}
body.camera-center-page .camera-location-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
body.camera-center-page .camera-location-copy strong{font-size:.82rem;line-height:1.2;color:#173e5f}
body.camera-center-page .camera-location-copy span{font-size:.75rem;line-height:1.3;color:#517489}
body.camera-center-page .camera-id{font-size:.76rem;color:#738699;overflow-wrap:anywhere}
body.camera-center-page .camera-geo{color:#4a6f84;font-size:.8rem}
body.camera-center-page #cameraCount{
  background:#e7f2fa;border-radius:12px;border:1px solid #d3e6f1;
  color:#214c66;font-size:.88rem;font-weight:750;white-space:normal;
  padding:10px 13px;margin:8px 0 0;max-width:none;display:block
}
body.camera-center-page #cameraUpdated{max-width:360px;white-space:normal;text-align:right}
body.camera-center-page .road-toolbar select,
body.camera-center-page .road-toolbar input{
  min-height:39px;border-radius:9px;border:1px solid #c7d7e5;
  background:#fff;color:#173d59;padding:7px 11px
}
body.camera-center-page .road-toolbar label{
  display:flex;align-items:center;gap:8px;color:#203e57;font-weight:700;font-size:.85rem
}
body.camera-center-page .camera-image-fallback{
  padding:20px;color:#546f82;font-weight:650;text-align:center
}
@media(max-width:900px){body.camera-center-page .road-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  body.camera-center-page .road-card-grid{grid-template-columns:1fr;padding:10px 0;gap:12px}
  body.camera-center-page .camera-card-body{padding:15px}
  body.camera-center-page .road-toolbar{align-items:stretch;gap:12px}
  body.camera-center-page .road-toolbar label{width:100%;justify-content:space-between}
  body.camera-center-page .road-toolbar select,body.camera-center-page .road-toolbar input{width:65%;min-width:0}
  body.camera-center-page #cameraUpdated{max-width:100%;text-align:left}
}


/* Maryland polished picture -> on-demand live HLS. Snapshot lives in browser
   memory only; no website/server image storage or background streaming. */
body.camera-center-page .camera-md-poster-stage{
  position:relative;isolation:isolate;aspect-ratio:16/9;min-height:190px;
  overflow:hidden;background:linear-gradient(145deg,#143f5d,#1a607f);
  border-bottom:1px solid #bed7e5;
}
body.camera-center-page .camera-md-preview-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;display:block;
}
body.camera-center-page .camera-md-preview-image[hidden]{display:none!important}
body.camera-center-page .camera-md-capture-video{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  pointer-events:none;z-index:0;
}
body.camera-center-page .camera-md-poster-button{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;width:100%;height:100%;
  padding:18px;border:0;color:#fff;cursor:pointer;z-index:2;
  background:linear-gradient(180deg,rgba(6,25,42,.24),rgba(6,25,42,.58));
  font:inherit;text-align:center;
}
body.camera-center-page .md-preview-ready .camera-md-poster-button{
  background:linear-gradient(180deg,rgba(6,25,42,.48),transparent 35%,rgba(6,25,42,.65));
}
body.camera-center-page .camera-md-poster-button:hover,
body.camera-center-page .camera-md-poster-button:focus-visible{
  background:linear-gradient(180deg,rgba(6,25,42,.55),rgba(6,25,42,.46));
  outline:3px solid #8cdbfa;outline-offset:-3px;
}
body.camera-center-page .camera-md-poster-button[hidden]{display:none!important}
body.camera-center-page .camera-md-preview-pill{
  position:absolute;top:12px;left:12px;padding:5px 9px;
  border-radius:8px;background:rgba(5,29,48,.82);
  color:#fff;font-size:.69rem;font-weight:850;letter-spacing:.04em;
}
body.camera-center-page .camera-md-poster-center{
  display:flex;align-items:center;flex-direction:column;gap:9px;
  font-size:.96rem;font-weight:850;text-shadow:0 1px 5px rgba(0,0,0,.65)
}
body.camera-center-page .camera-md-poster-center .camera-md-play-icon{
  width:55px;height:55px;flex:none;border:2px solid rgba(255,255,255,.8);
  box-shadow:0 3px 18px rgba(0,0,0,.26);transition:transform .15s;
}
body.camera-center-page .camera-md-poster-button:hover .camera-md-play-icon{transform:scale(1.07)}
body.camera-center-page .camera-md-preview-caption{
  position:absolute;bottom:12px;left:13px;right:13px;
  font-size:.75rem;font-weight:750;color:#eff9ff;line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
body.camera-center-page .camera-md-inline-video{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  object-fit:contain;background:#071923;
}
body.camera-center-page .camera-md-player-actions{
  position:absolute;top:9px;right:9px;z-index:5;
  display:flex;align-items:center;gap:8px;
}
body.camera-center-page .camera-md-player-actions[hidden]{display:none!important}
body.camera-center-page .camera-md-stop-button,
body.camera-center-page .camera-md-expand-button{
  min-height:39px;padding:8px 11px;border-radius:8px;
  border:1px solid rgba(225,244,255,.6);background:rgba(5,29,48,.88);
  color:#fff;font-size:.78rem;font-weight:800;cursor:pointer;
}
body.camera-center-page .camera-md-stop-button:hover,
body.camera-center-page .camera-md-expand-button:hover,
body.camera-center-page .camera-md-stop-button:focus-visible,
body.camera-center-page .camera-md-expand-button:focus-visible{
  background:#145377;outline:2px solid #91d9ff;outline-offset:1px;
}
body.camera-center-page .md-preview-unavailable .camera-md-preview-pill{background:#526779}
body.camera-center-page #mdPreviewToggle{min-height:42px}
@media(max-width:640px){
  body.camera-center-page .camera-md-poster-stage{min-height:188px}
  body.camera-center-page .camera-md-stop-button,
  body.camera-center-page .camera-md-expand-button{min-height:44px;padding:9px 13px}
}

/* Wyoming official camera pages: accessible click-through without unauthorized embeds. */
body.camera-center-page .camera-wy-tile{
  min-height:104px;display:flex;text-decoration:none;cursor:pointer;
  background:linear-gradient(118deg,#e6f4fc,#f1f9ff);transition:background .18s,box-shadow .18s;
}
body.camera-center-page .camera-wy-tile:hover,
body.camera-center-page .camera-wy-tile:focus-visible{
  background:#d6eefb;box-shadow:inset 0 0 0 2px #8ac8e9;
}
body.camera-center-page .camera-wy-tile:focus-visible{outline:3px solid #2563eb;outline-offset:-3px}
body.camera-center-page .camera-wy-card .camera-card-body p{line-height:1.45}