/* SURVEILLANCE ONLY — monitor / camera dimensions are curated here. */
.surveillance-page {
  --installation-width: 960px;
  --camera-height: 36cqw;
  --screen-gap: 18cqw;
  --analysis-color: #6cff00;
  isolation: isolate;
  background: #fff;
}
/* Match the simple back link on the existing individual project pages. */
.surveillance-page .back-link { position: fixed; top: 16px; left: 16px; font-family: "Times New Roman", Times, Georgia, serif; font-size: 12px; color: #777; text-decoration: none; letter-spacing: .02em; transition: color .2s ease; z-index: 100; }
.surveillance-page .back-link:hover { color: #000; }
.surveillance-main { width: min(var(--installation-width), calc(100% - 48px)); margin: 56px auto 60px; }
.installation { container-type: inline-size; position: relative; background: #fff; padding-bottom: 24px; }
.monitor { position: relative; border: 1px solid #111; background: #101010; }
.source-monitor { aspect-ratio: 16 / 9; }
.source-monitor video { display: block; width: 100%; height: 100%; object-fit: contain; }
.surveillance-page button { border: 1px solid #666; background: #fff; color: #111; border-radius: 0; min-height: 32px; padding: 5px 8px; font: 11px/1.4 'Courier New', monospace; }
.surveillance-page button:hover { background: #111; color: #fff; }
.source-caption, .live-caption { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; font: 11px/1.5 'Courier New', monospace; }
/* CAMERA COMPOSITION — left overlap and the gap between screens. */
.source-caption { position: absolute; width: 100%; z-index: 3; padding-left: 37%; justify-content: flex-end; }
.camera-bridge { position: relative; min-height: var(--screen-gap); padding: 52px 14px 18px 37%; }
/* LIVE SUMMARY — readable result beside the camera, sharing the existing data updates. */
.live-summary { position: relative; color: #111; background: #fff; font: 13px/1.45 'Courier New', monospace; }
.live-summary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.live-summary dt { font-size: 11px; padding-top: 2px; }
.live-summary dt, .live-summary dd { margin: 0; overflow-wrap: anywhere; }
.live-summary .analysis-note { margin: 10px 0 0; color: #555; font: 10px/1.45 'Courier New', monospace; }
.camera-window { position: absolute; z-index: 4; left: 2%; top: -20cqw; overflow: hidden; height: var(--camera-height); aspect-ratio: 930 / 1080; }
/* Crop transparent margins with CSS; preserve the saved PNG and its alpha. */
.camera-object { position: absolute; display: block; width: 154.516129%; max-width: none; height: auto; left: -37.634409%; top: 0; }
.retry-analysis { display: block; margin: 8px auto; }

/* ANALYSIS OVERLAYS — archive on the right, local live measurements on the left. */
.archive-data, .live-data {
  position: absolute; z-index: 2; top: 2%; bottom: 2%;
  margin: 0; padding: 0; color: var(--analysis-color);
  font: clamp(6px, 1.15cqw, 11px)/1.2 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  overflow: auto; scrollbar-width: thin;
}
.archive-data { right: 1.5%; width: 76%; text-align: right; }
.archive-data h2 { margin: 0 0 .4em; font: inherit; }
.archive-data pre { margin: 0; padding: 0; border: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; tab-size: 2; }
.archive-data .analysis-note, .live-data .analysis-note { color: inherit; font: inherit; margin: .65em 0 0; }
.archive-data #archive-status { margin: 0 0 .5em; }
.archive-data:has(pre:not(:empty)) #archive-status,
.archive-data h2 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.live-data { left: 1.5%; width: 45%; text-align: left; }
.diagnostics { width: 100%; font: inherit; }
.diagnostic-heading { margin: 0 0 .6em; }
.diagnostics dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1em; margin: 0; }
.diagnostics dt, .diagnostics dd { margin: 0; white-space: nowrap; }
.diagnostics dd { text-align: left; }
.diagnostics .expression-label { margin-top: .4em; }
.diagnostics .expression-value { margin-top: .4em; }
.archive-data:focus-within, .live-data:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.live-monitor { min-height: 0; }
.live-surface { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.live-surface video { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); }
.live-surface canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.camera-gate, .screen-message { z-index: 5; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 20px; color: #ddd; background: #101010; text-align: center; font: 13px/1.7 'Courier New', monospace; }
.surveillance-page .screen-message { width: fit-content; height: fit-content; margin: auto; }
.module-status { padding: 8px 16px; text-align: center; font: 11px/1.5 'Courier New', monospace; }
.surveillance-documentation { margin-top: 72px; background: #fff; padding: clamp(20px, 5vw, 64px); }
.surveillance-documentation header { padding: 0 0 28px; overflow: visible; text-align: center; }
.surveillance-documentation h1, .surveillance-documentation h2 { font: 30px/1.3 Georgia, serif; margin-bottom: 14px; }
.surveillance-documentation h3 { font: 20px/1.4 Georgia, serif; margin: 38px 0 18px; }
.surveillance-documentation p { font: 16px/1.8 Arial, sans-serif; margin-bottom: 20px; }
.surveillance-documentation .project-meta, .surveillance-documentation figcaption, .original-statement a { font: 12px/1.7 'Courier New', monospace; }
.surveillance-documentation figure { margin: 28px 0 38px; }
.surveillance-documentation img { display: block; width: 100%; height: auto; }
.surveillance-documentation video { display: block; width: 100%; max-height: 80svh; background: #111; object-fit: contain; }
.surveillance-documentation .reference-video { max-width: 540px; margin-inline: auto; }
.surveillance-documentation figcaption { margin-top: 10px; }
.surveillance-page .site-footer span { display: inline-block; background: #fff; color: #000; border: 1px solid #111; padding: 6px 10px; }
@media (max-width: 700px) {
  .surveillance-main { width: calc(100% - 24px); margin-top: 56px; }
  .source-caption { font-size: 8px; padding: 8px 8px 8px 37%; gap: 6px; }
  .source-caption button { font-size: 9px; padding-inline: 5px; }
  .camera-bridge { padding: max(56px, calc(16cqw + 18px)) 8px 20px; }
  .live-summary { font-size: 12px; }
  .live-summary dl { column-gap: 12px; }
  .live-summary dt { font-size: 10px; }
  .live-caption { align-items: flex-start; font-size: 10px; }
  .live-caption span { max-width: 70%; }
  .surveillance-documentation { margin-top: 40px; }
}

/* Visible only when a visitor opens the HTML file directly, outside a web server. */
.local-preview-link { display: inline-block; background: #fff; color: #111; padding: 8px 12px; border: 1px solid #666; font: 12px/1.5 "Courier New", monospace; }

/* Text analysis stays readable without widening the camera composition. */
.diagnostics .expression-value { white-space: normal; overflow-wrap: anywhere; }
.diagnostics .expression-label { white-space: normal; }
.analysis-note { margin-top: 18px; font: 11px/1.6 'Courier New', monospace; color: #555; }

/* ARCHIVE FULLSCREEN — click the image; Enter / Space provide keyboard access. */
.source-monitor { cursor: zoom-in; }
.source-monitor:fullscreen, .source-monitor.is-fullscreen { width: 100%; height: 100%; max-width: none; border: 0; background: #000; cursor: zoom-out; }
.source-monitor.is-fullscreen { position: fixed; inset: 0; z-index: 1000; }
body.source-expanded { overflow: hidden; }