/* Traffic cameras page. Builds on tokens.css and site.css. */

.cams-head { padding-block: var(--space-lg) var(--space-xl); }
.cams-head .sign-face { padding-block: var(--space-md); }

.cams-app { border-top: var(--rule-hair) solid var(--color-rule); }
.cams-layout {
  max-width: 120rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 24rem;
}

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); overflow: hidden; }
.seg-btn {
  font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  background: var(--color-paper); color: var(--color-ink); border: 0;
  padding: var(--space-3xs) var(--space-xs); min-width: 2.25rem; min-height: 2.25rem;
}
.seg-btn + .seg-btn { border-left: var(--rule-hair) solid var(--color-ink); }
.seg-btn:hover { background: var(--color-paper-3); }
.seg-btn[aria-pressed="true"], .seg-btn[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }

/* ---------- Wall ---------- */
.cams-wall-panel { padding: var(--space-md) var(--gutter) var(--space-xl); min-width: 0; }
.wall-bar, .finder-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-md);
}
.wall-title, .finder-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.wall-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.add-jump { display: none; }

.shared-notice { margin-bottom: var(--space-md); }
.shared-notice .actions { margin-top: var(--space-sm); }

.wall-empty { border: var(--rule-ink) dashed var(--color-field); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-md); }
.wall-empty .muted { margin-top: var(--space-2xs); }
.presets { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }

.wall { --tile: 22rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile), 100%), 1fr)); gap: var(--space-sm); }
.wall-note { margin-top: var(--space-md); font-size: var(--text-sm); }

.support {
  margin-top: var(--space-xl); padding: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg);
  background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg);
}
.support-text { max-width: 38rem; display: grid; gap: var(--space-3xs); }
.support-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.support-fine { font-size: var(--text-sm); color: var(--color-muted); }
.support .btn-marigold { border-color: var(--color-ink); }

.tile { background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: auto auto; min-width: 0; }
.tile.dragging { opacity: 0.4; }
.tile.drop-before { box-shadow: -4px 0 0 var(--color-accent), -5px 0 0 var(--color-ink); }
.tile-stage { position: relative; aspect-ratio: 4 / 3; background: #0b0d10; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; }
.tile-stage video, .viewer-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0d10; }
.tile-head { display: flex; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-xs); border-top: var(--rule-ink) solid var(--color-ink); }
.tile-name { font-family: var(--font-display); font-weight: 800; }
.tile-name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--text-sm); line-height: 1.3; overflow-wrap: anywhere; }
.tile-meta { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }
.tile-btns { display: flex; flex: none; }
.icon-btn {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; cursor: pointer;
  background: transparent; color: var(--color-ink); border: var(--rule-hair) solid transparent; border-radius: var(--radius); font: inherit; font-weight: 700;
}
.icon-btn:hover { border-color: var(--color-ink); }
.icon-btn svg { width: 1rem; height: 1rem; }
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* status chip over the video */
.status {
  position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label);
  background: var(--color-paper-2); color: var(--color-ink); padding: 0.15rem 0.5rem; border: var(--rule-hair) solid var(--color-ink); border-radius: 6px; font-family: var(--font-display);
  pointer-events: none;
}
.status::before { content: ""; width: 0.55em; height: 0.55em; background: var(--color-muted); }
.status[data-state="live"]::before { background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-ink); animation: pulse 2s var(--ease-in-out) infinite; }
.status[data-state="offline"] { background: var(--color-ink); color: var(--color-paper); }
.status[data-state="offline"]::before { background: var(--color-paper); }
.status[data-state="paused"] { opacity: 0.8; }
@keyframes pulse { 50% { opacity: 0.35; } }

.tile-msg {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-xs); justify-items: center;
  color: #e7eaee; font-size: var(--text-sm); text-align: center; padding: var(--space-md);
}
.tile-msg .btn { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); pointer-events: auto; }
.tile-msg .btn:hover { background: var(--color-accent); }

/* ---------- Finder ---------- */
.cams-finder {
  border-left: var(--rule-bar) solid var(--color-sign); background: var(--color-paper-3);
  padding: var(--space-md) var(--space-md) 0;
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 0;
}
.filters { display: grid; gap: var(--space-xs); padding-bottom: var(--space-sm); border-bottom: var(--rule-ink) solid var(--color-ink); }
.filters .btn-small { min-height: 2.5rem; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
.filter-row .field { grid-template-columns: 3.25rem minmax(0, 1fr); align-items: center; gap: var(--space-2xs); }
.filters .input { padding: var(--space-2xs) var(--space-xs); }
.filters select.input { padding-right: 2rem; }
.near-btn { justify-self: start; }
.near-btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.finder-status { font-size: var(--text-sm); }

.cam-list-panel { flex: 1; min-height: 0; overflow-y: auto; margin-inline: calc(-1 * var(--space-md)); overscroll-behavior: contain; }
.cam-group h3 {
  position: sticky; top: 0; z-index: 1; background: var(--color-paper-3); font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding: var(--space-xs) var(--space-md) var(--space-3xs); border-bottom: var(--rule-hair) solid var(--color-rule);
  display: flex; justify-content: space-between;
}
.cam-group h3 span { color: var(--color-muted); font-weight: 600; }
.cam-row { display: flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-xs) 0 var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cam-row:hover { background: var(--color-paper-2); }
.cam-row-name {
  flex: 1; min-width: 0; text-align: left; font: inherit; font-size: var(--text-sm); color: inherit;
  background: none; border: 0; padding: var(--space-2xs) 0; cursor: pointer; line-height: 1.3;
}
.cam-row-name:hover .cam-row-title { text-decoration: underline; }
.cam-row-sub { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.cam-row.on { box-shadow: inset 4px 0 0 var(--color-accent); }
.add-btn { flex: none; width: 2.25rem; height: 2.25rem; border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; font: inherit; font-weight: 700; display: grid; place-items: center; padding: 0; }
.add-btn:hover { background: var(--color-accent); }
.add-btn svg { width: 0.9rem; height: 0.9rem; }
.cam-row.on .add-btn { background: var(--color-sign); border-color: var(--color-sign); color: var(--color-on-sign); }
.list-empty { padding: var(--space-lg) var(--space-md); color: var(--color-muted); }

.cam-map-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-inline: calc(-1 * var(--space-md)); }
.cam-map-panel[hidden] { display: none; }
.cam-map { flex: 1; min-height: 20rem; background: var(--color-paper-3); }
.cam-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.04); }
.map-key { font-size: var(--text-xs); padding: var(--space-2xs) var(--space-md); display: flex; align-items: center; gap: 0.4em; border-top: var(--rule-hair) solid var(--color-ink); }
.key-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--color-sign); border: 2px solid var(--color-paper); box-shadow: 0 0 0 1px var(--color-ink); }
.key-dot.key-on { background: var(--color-accent); margin-left: var(--space-xs); }
.leaflet-container { font-family: var(--font-body); }
.leaflet-container a { color: var(--color-ink); }
.leaflet-tooltip { font-weight: 600; border-radius: 6px; border: var(--rule-hair) solid var(--color-ink); box-shadow: none; }

/* ---------- Viewer ---------- */
.viewer {
  width: min(72rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0;
  border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper); color: var(--color-ink);
  overflow: auto;
}
.viewer::backdrop { background: color-mix(in oklab, var(--color-ink) 72%, transparent); }
.viewer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.viewer-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--space-3xs); }
.viewer-actions { display: flex; gap: var(--space-2xs); }
.viewer-stage:fullscreen { max-height: none; aspect-ratio: auto; }
.viewer-stage { position: relative; aspect-ratio: 16 / 9; max-height: 70dvh; width: 100%; background: #0b0d10; }
.viewer-near { padding: var(--space-sm) var(--space-md) var(--space-md); border-top: var(--rule-ink) solid var(--color-ink); }
.near-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.near-list button {
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
  background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius); padding: var(--space-2xs) var(--space-xs); line-height: 1.25;
}
.near-list button:hover { background: var(--color-accent); }
.near-list small { display: block; color: var(--color-muted); font-size: var(--text-xs); }

.cams-credit { padding-block: var(--space-lg); }

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .cams-layout { grid-template-columns: minmax(0, 1fr); }
  .cams-finder { position: static; height: auto; border-left: 0; border-top: var(--rule-ink) solid var(--color-ink); scroll-margin-top: var(--space-sm); }
  .cam-list-panel { max-height: 70vh; }
  .cam-map { height: 65vh; flex: none; }
  .add-jump { display: inline-flex; }
}
@media (max-width: 47.5rem) {
  .wall-tools { width: 100%; }
  .viewer { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; height: 100dvh; border: 0; }
  .viewer-head { padding: var(--space-xs) var(--space-sm); }
  .viewer-near { padding: var(--space-xs) var(--space-sm) var(--space-md); }
}