:root {
  color-scheme: light;
  --canvas: oklch(0.972 0.0035 255);
  --surface: oklch(0.995 0.0015 255);
  --sunken: oklch(0.941 0.005 255);
  --line: oklch(0.897 0.006 255);
  --ink: oklch(0.178 0.014 262);
  --ink-2: oklch(0.452 0.013 262);
  --ink-3: oklch(0.618 0.011 262);
  --media: oklch(0.198 0.0155 260);
  --media-2: oklch(0.256 0.017 260);
  --on-media: oklch(0.988 0.0015 255);
  --on-media-2: oklch(0.782 0.012 260);
  --signal: oklch(0.706 0.132 213);
  --signal-ink: oklch(0.512 0.114 231);
  --signal-wash: oklch(0.947 0.032 213);
  --ok: oklch(0.588 0.117 154);
  --warn: oklch(0.667 0.132 66);
  --danger: oklch(0.556 0.191 24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, select { min-height: 44px; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
a { color: inherit; }
:focus-visible { border-radius: 3px; outline: 3px solid var(--signal-ink); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.05; letter-spacing: -.04em; }
h2 { margin-bottom: 0; font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -.03em; }
h3 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }

.chrome { position: sticky; top: 0; z-index: 10; min-height: 64px; display: flex; align-items: center; gap: 1.5rem; padding: .75rem max(1.25rem, calc((100vw - 1504px) / 2)); background: rgb(245 246 247 / 88%); backdrop-filter: blur(16px); }
.chrome > p { margin: 0 0 0 auto; color: var(--ink-3); font-size: .75rem; }
.logout-button { min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); }
.brand-mark::before { width: 13px; height: 13px; content: ""; border: 2px solid var(--signal); border-bottom-color: transparent; border-radius: 50%; }
.brand-mark i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }

.page-shell { width: min(1504px, calc(100% - 3rem)); margin: 0 auto; padding: 2rem 0 6rem; }
.page-header, .site-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; }
.page-header > p { margin: 0; color: var(--ink-2); font-size: .82rem; }
.eyebrow, .control-module small, .operator-rail small { display: block; margin-bottom: .6rem; color: var(--ink-3); font-size: .67rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.scope-note { margin-bottom: 2.75rem; padding: .85rem 1rem; border-left: 3px solid var(--signal-ink); background: var(--sunken); color: var(--ink-2); font-size: .82rem; }
.scope-note strong { color: var(--ink); }
.login-shell { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 2rem 1rem 6rem; }
.login-panel { width: min(100%, 420px); padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: .9rem; background: var(--surface); box-shadow: 0 18px 44px -25px rgb(24 32 42 / 50%); }
.login-intro { margin: 1rem 0 1.75rem; color: var(--ink-2); line-height: 1.55; }
.login-panel form { display: grid; gap: 1rem; }
.login-panel label { display: grid; gap: .4rem; color: var(--ink-2); font-size: .78rem; font-weight: 700; }
.login-panel input { min-height: 44px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--surface); color: var(--ink); font: inherit; }
.login-error { min-height: 1.25rem; margin: 0; color: var(--danger); font-size: .78rem; }

.site-composition { display: grid; gap: 3.5rem; }
.site-pair, .site-tail { display: grid; gap: 2rem; }
.site-module { display: block; text-decoration: none; }
.fixture-label { display: block; margin-bottom: .3rem; color: var(--ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-name-link { min-height: 44px; width: fit-content; display: inline-flex; align-items: center; margin-bottom: .65rem; cursor: pointer; text-decoration: none; }
.site-name-link strong { font-size: 1.08rem; letter-spacing: -.02em; }
.density-lead .site-name-link strong { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.site-preview-link { display: block; border-radius: .65rem; cursor: pointer; text-decoration: none; }
.site-preview-link:focus-visible { outline-offset: 4px; }
.site-preview { position: relative; display: grid; gap: .5rem; min-height: 0; }
.site-preview > .media-thumb { min-width: 0; min-height: 0; aspect-ratio: 16 / 9; }
.preview-1 { width: min(100%, 640px); grid-template-columns: 1fr; }
.preview-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-3 { grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.preview-3 > .media-thumb:first-child { grid-row: 1 / -1; }
.site-preview .preview-extra { display: none; }
.preview-overflow { position: absolute; right: .75rem; bottom: .75rem; z-index: 1; padding: .4rem .6rem; border-radius: 999px; background: rgb(10 14 19 / 82%); color: var(--on-media); font-size: .72rem; font-weight: 750; }
.site-no-cameras { min-height: 150px; display: grid; place-items: center; border-radius: .45rem; background: var(--sunken); color: var(--ink-3); font-size: .75rem; }
.context-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .55rem; color: var(--ink-2); font-size: .8rem; }
.context-line > span + span::before { content: "·"; margin-right: 1rem; color: var(--line); }

.status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-transform: capitalize; white-space: nowrap; }
.status > span { width: .75rem; text-align: center; }
.status-online { color: var(--ok); }
.status-offline { color: var(--danger); }
.status-unknown { color: var(--warn); }

.media-surface { position: relative; min-height: 100%; display: grid; overflow: hidden; place-items: center; border-radius: .65rem; background: linear-gradient(145deg, var(--media-2), var(--media)); color: var(--on-media); isolation: isolate; }
.media-grid { position: absolute; inset: 0; z-index: -1; opacity: .06; background-image: repeating-linear-gradient(45deg, transparent 0 8px, #fff 8px 9px); }
.media-label { color: var(--on-media-2); font-size: .61rem; font-weight: 700; letter-spacing: .15em; text-align: center; text-transform: uppercase; }
.media-unavailable { filter: saturate(.2); }
.media-unavailable .media-label { color: var(--on-media); }
.media-thumb { min-height: 100%; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.8rem; color: var(--ink-2); font-size: .8rem; }
.breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumbs span { color: var(--ink-3); }
.site-header { padding-bottom: 1.5rem; }
.site-header .context-line, .focus-header .context-line { margin-top: 1rem; }
.variant-button { padding: .55rem 1rem; border: 0; border-radius: 999px; background: var(--sunken); color: var(--ink); font-weight: 700; }
.reading { display: flex; align-items: baseline; gap: 1rem; width: fit-content; padding: .7rem 1rem; background: var(--sunken); font-size: .82rem; }
.reading span, .reading small { color: var(--ink-3); }
.reading strong { font-variant-numeric: tabular-nums; }
.content-section { margin-top: 4rem; }
.content-section > header { margin-bottom: 1.25rem; }

.camera-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .875rem; }
.wall-solo { grid-template-columns: 1fr; }
.wall-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.camera-frame { position: relative; min-height: 210px; display: block; overflow: hidden; border-radius: .75rem; box-shadow: 0 18px 44px -25px rgb(24 32 42 / 50%); text-decoration: none; }
.camera-media-link { position: absolute; inset: 0; display: block; border-radius: inherit; cursor: pointer; }
.camera-media-link:focus-visible { z-index: 2; outline: 3px solid var(--signal-ink); outline-offset: -5px; box-shadow: inset 0 0 0 6px var(--signal-wash); }
.camera-solo { min-height: min(62vw, 680px); }
.camera-frame > .media-surface, .camera-media-link > .media-surface { position: absolute; inset: 0; }
.camera-overlay { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 3rem 1rem 1rem; color: var(--on-media); background: linear-gradient(transparent, rgb(10 14 19 / 88%)); }
.camera-overlay { pointer-events: none; }
.camera-overlay strong { font-size: .95rem; }
.capability-marks { display: inline-flex; gap: .55rem; color: var(--on-media-2); font-size: .8rem; }
.camera-openable { transition: transform .18s, box-shadow .18s; }
.camera-openable:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -23px rgb(24 32 42 / 62%); }
.camera-disabled { cursor: not-allowed; opacity: .72; }
.empty-note { padding: 2rem; border-radius: .65rem; background: var(--sunken); color: var(--ink-2); text-align: center; }

.control-grid { display: grid; gap: 1rem; }
.control-module { min-width: 0; display: flex; flex-direction: column; padding: 1.25rem; border-radius: .9rem; background: var(--surface); box-shadow: 0 7px 24px -18px rgb(24 32 42 / 55%); }
.control-module > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.control-module small { margin-bottom: .25rem; }
.observed { display: flex; align-items: baseline; gap: .65rem; margin: 1.2rem 0 0; }
.observed span { color: var(--ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.control-body { display: grid; gap: 1rem; margin-top: 1.1rem; padding-bottom: 1.25rem; }
.tactile-pair { display: flex; gap: .5rem; }
.tactile-key { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--surface); color: var(--ink); font-weight: 750; box-shadow: 0 1px 2px rgb(24 32 42 / 8%), 0 4px 10px -6px rgb(24 32 42 / 40%); }
.tactile-key:active { transform: translateY(1px); }
.tactile-key[aria-pressed="true"] { border-color: var(--signal); background: var(--signal-wash); color: var(--signal-ink); }
.tactile-primary { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.action-group > small, .control-body > div > small { margin-bottom: .5rem; }
.action-row, .speaker-row { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.action-row label, .speaker-row label { display: grid; gap: .35rem; color: var(--ink-3); font-size: .72rem; font-weight: 700; }
.relay-mode-help { margin: 1rem 0 0; }
/* Approved relay control - Minimal / Elegant */
.relay-control { display: grid; gap: 1.05rem; }
.relay-power-toggle { display: grid; grid-template-columns: 1fr 1fr; min-height: 54px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 2px rgb(24 32 42 / 5%); }
.relay-power-button { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .75rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
.relay-power-button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--sunken); color: var(--ink); }
.relay-power-button:active:not(:disabled) { transform: scale(.985); }
.relay-power-button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--signal-ink); outline-offset: -3px; }
.relay-power-button[aria-pressed="true"] { background: var(--ok); color: white; box-shadow: 0 8px 20px -12px rgb(20 120 55 / 65%); }
.relay-power-off[aria-pressed="true"] { background: var(--ink-2); color: white; box-shadow: 0 8px 20px -12px rgb(24 32 42 / 55%); }
.relay-power-button:disabled { cursor: not-allowed; opacity: .45; }
.relay-power-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.relay-schedule { display: grid; gap: .45rem; color: var(--ink-2); font-size: .78rem; font-weight: 650; }
.relay-schedule > span { padding-left: .05rem; }
.relay-schedule select { width: 100%; min-height: 44px; }
.control-module:has(.relay-control) .control-body { margin-top: 1.15rem; padding-bottom: 0; }

select { min-width: 145px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--surface); color: var(--ink); }
.speaker-row > p { max-width: 20ch; margin: 0; color: var(--ink-3); font-size: .74rem; }
.unavailable { margin: 1rem 0 0; color: var(--warn); font-size: .75rem; }
.feedback-register { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin: 1.25rem -1.25rem -1.25rem; padding: .65rem 1.25rem; border-radius: 0 0 .9rem .9rem; background: var(--sunken); color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.control-module > .feedback-register { margin-top: auto; }
.feedback-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.feedback-accepted .feedback-dot { background: var(--warn); }
.feedback-completed .feedback-dot { background: var(--ok); }
.feedback-failed .feedback-dot { background: var(--danger); }
.feedback-failed { color: var(--danger); }
.feedback-prototype .feedback-dot { background: var(--signal-ink); }

.focus-header { margin-bottom: 1.4rem; }
.focus-layout { display: grid; gap: 1rem; }
.focus-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .75rem; background: linear-gradient(145deg, var(--media-2), var(--media)); box-shadow: 0 20px 48px -22px rgb(24 32 42 / 55%); color: var(--on-media); }
.focus-media video { width: 100%; height: 100%; display: block; object-fit: contain; background: #050608; }
.media-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; color: var(--on-media-2); font-weight: 700; text-align: center; }
.media-state-live .media-status { inset: auto auto 1rem 1rem; display: block; padding: .35rem .55rem; border-radius: .3rem; background: rgb(10 14 19 / 75%); color: var(--on-media); font-size: .7rem; }
.media-state-reconnecting .media-status { inset: auto 1rem 1rem; display: block; padding: .5rem .7rem; border-radius: .35rem; background: rgb(10 14 19 / 82%); }
.fullscreen-key { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; min-height: 36px; padding: .35rem .65rem; border: 1px solid rgb(255 255 255 / 28%); border-radius: .35rem; background: rgb(10 14 19 / 76%); color: var(--on-media); font-weight: 700; }
.reopen-key { position: absolute; z-index: 2; left: 50%; top: calc(50% + 2rem); transform: translateX(-50%); padding: .5rem .8rem; border: 1px solid rgb(255 255 255 / 35%); border-radius: .4rem; background: var(--surface); color: var(--ink); font-weight: 750; }
.focus-media:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.operator-rail { overflow: hidden; border-radius: .9rem; background: var(--surface); box-shadow: 0 7px 24px -18px rgb(24 32 42 / 55%); }
.operator-rail > header { padding: 1.1rem 1.1rem 0; }
.operator-rail > header p { margin: 0; color: var(--ink-3); font-size: .74rem; line-height: 1.5; }
.operator-rail section { padding: 1.1rem; border-bottom: 1px solid var(--line); }
.operator-rail section > p { margin-bottom: .7rem; color: var(--ink-3); font-size: .72rem; }
.ptz-joystick { position: relative; width: min(100%, 210px); aspect-ratio: 1; margin: .35rem auto .55rem; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, var(--surface) 0 11%, transparent 11.5%), repeating-radial-gradient(circle, transparent 0 24%, var(--line) 24.5% 25%, transparent 25.5% 49%), var(--sunken); box-shadow: inset 0 5px 14px rgb(24 32 42 / 14%); cursor: grab; touch-action: none; user-select: none; }
.ptz-joystick::before, .ptz-joystick::after { content: ""; position: absolute; background: var(--line); pointer-events: none; }
.ptz-joystick::before { width: 1px; inset: 0 auto 0 50%; }
.ptz-joystick::after { height: 1px; inset: 50% 0 auto; }
.ptz-joystick:active { cursor: grabbing; }
.ptz-joystick:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.ptz-joystick.is-disabled { opacity: .45; cursor: not-allowed; }
.joystick-dead-zone { position: absolute; width: 24%; aspect-ratio: 1; left: 38%; top: 38%; border: 1px dashed var(--ink-3); border-radius: 50%; pointer-events: none; }
.joystick-handle { position: absolute; z-index: 1; width: 22%; aspect-ratio: 1; left: 39%; top: 39%; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); box-shadow: 0 4px 10px rgb(24 32 42 / 35%); pointer-events: none; will-change: transform; }
.joystick-readout { display: none; }
.home-key { position: absolute; z-index: 3; width: 48px; height: 48px; min-height: 0; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 3px 9px rgb(24 32 42 / 20%); }
.home-key svg { width: 27px; height: 27px; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.operator-rail section > .deferred-note { margin: .55rem 0 0; text-align: center; }
.zoom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.zoom-pair button { border: 1px solid var(--line); background: var(--surface); font-size: 1.2rem; box-shadow: 0 3px 8px -4px rgb(24 32 42 / 45%); }
.zoom-pair button span { margin-left: .3rem; font-size: .75rem; }
.deferred-entry { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; border-radius: .45rem; background: var(--sunken); color: var(--ink-2); }
.deferred-entry strong { color: var(--ink-3); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.playback-control { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .9rem; border: 1px solid var(--ink); border-radius: .45rem; background: var(--ink); color: var(--canvas); font-weight: 750; text-decoration: none; box-shadow: 0 1px 2px rgb(24 32 42 / 8%), 0 4px 10px -6px rgb(24 32 42 / 40%); }
.playback-control:active { transform: translateY(1px); }
.other-cameras > div { display: flex; flex-wrap: wrap; gap: 1rem; }
.other-cameras a, .other-cameras article { width: 176px; display: grid; gap: .45rem; margin: 0; text-decoration: none; }
.other-cameras .media-thumb { min-height: 96px; }
.other-cameras strong { font-size: .78rem; }
.other-cameras .status { font-size: .7rem; }
.other-cameras article { opacity: .7; }

@media (min-width: 700px) {
  .site-pair, .site-tail { align-items: stretch; }
  .site-module { height: 100%; display: flex; flex-direction: column; }
  .site-name-link { min-height: 3.5rem; align-items: flex-start; }
  .site-preview-link { flex: 0 0 auto; }
  .density-lead .site-preview { height: clamp(360px, 34vw, 520px); }
  .density-medium .site-preview { height: clamp(260px, 22vw, 320px); }
  .density-small .site-preview { height: clamp(112px, 9vw, 136px); }
  .site-preview > .media-thumb { width: 100%; height: 100%; aspect-ratio: auto; }
  .site-module > .context-line { margin-top: auto; padding-top: .75rem; }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .site-pair, .site-tail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-wall { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .wall-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camera-lead { grid-column: span 2; grid-row: span 2; min-height: 436px; }
  .focus-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .site-tail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .chrome > p { max-width: 145px; text-align: right; }
  .page-shell { width: min(100% - 2rem, 1504px); padding-top: 1.25rem; }
  .page-header, .site-header { align-items: start; flex-direction: column; }
  .site-composition, .site-pair, .site-tail { gap: 4rem; }
  .site-module .site-preview { height: auto; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: .5rem; }
  .site-module .site-preview .media-thumb { width: auto; height: auto; min-width: 0; min-height: 0; aspect-ratio: 16 / 9; }
  .site-module .site-preview .preview-extra { display: grid; }
  .site-module .preview-overflow { display: none; }
  .site-module .site-preview.preview-odd .media-thumb:first-child { grid-column: 1 / -1; grid-row: auto; }
  .site-module .site-preview.preview-single, .site-module .site-preview.preview-zero { grid-template-columns: 1fr; }
  .density-lead .site-preview { min-height: 0; }
  .wall-pair { grid-template-columns: 1fr; }
  .camera-frame { min-height: 58vw; }
  .speaker-row { align-items: stretch; flex-direction: column; }
  .speaker-row label, .speaker-row select, .speaker-row > button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Dynamic three-slot Live View */
.content-section[data-camera-section] > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-note { max-width: 34ch; margin: 0; color: var(--ink-3); font-size: .78rem; text-align: right; }
.live-camera-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-camera-slot { position: relative; min-width: 0; border-radius: .75rem; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.live-camera-slot .camera-frame { height: 100%; }
.camera-drag-handle { position: absolute; z-index: 4; inset: .65rem .65rem auto auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 35%); border-radius: 999px; background: rgb(10 14 19 / 72%); color: white; font: inherit; font-weight: 800; letter-spacing: -.22em; cursor: grab; touch-action: none; backdrop-filter: blur(8px); }
.camera-drag-handle:active { cursor: grabbing; }
.camera-drag-handle:focus-visible { outline: 3px solid var(--signal-ink); outline-offset: 2px; }
.is-camera-dragging { opacity: .5; transform: scale(.985); }
.live-camera-slot.is-drop-target { box-shadow: 0 0 0 4px var(--signal), 0 20px 48px -22px rgb(24 32 42 / 55%); transform: translateY(-2px); }
.available-cameras { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.available-cameras > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.available-cameras > header h3 { margin-top: .1rem; }
.available-cameras > header > span { min-width: 28px; padding: .2rem .5rem; border-radius: 999px; background: var(--sunken); color: var(--ink-2); font-size: .72rem; font-weight: 700; text-align: center; }
.available-camera-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.available-camera { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); }
.available-camera-link { min-height: 88px; display: grid; grid-template-columns: 106px minmax(0, 1fr); align-items: center; gap: .75rem; padding-right: 3rem; color: var(--ink); text-decoration: none; }
.available-camera-thumb { width: 106px; min-height: 88px; }
.available-camera-link > span:last-child { min-width: 0; display: grid; gap: .35rem; }
.available-camera-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.available-camera .camera-drag-handle { inset: 50% .45rem auto auto; transform: translateY(-50%); width: 36px; height: 36px; }

@media (max-width: 959px) {
  .live-camera-wall { grid-template-columns: 1fr; }
  .live-camera-slot .camera-frame { min-height: 52vw; }
  .content-section[data-camera-section] > header { align-items: start; flex-direction: column; }
  .section-note { text-align: left; }
}

@media (max-width: 560px) {
  .available-camera-list { grid-template-columns: 1fr; }
  .available-camera-link { grid-template-columns: 88px minmax(0, 1fr); }
  .available-camera-thumb { width: 88px; }
}

/* Available camera list stays lightweight: active slots own preview surfaces. */
.available-camera-link { grid-template-columns: 1fr; min-height: 64px; padding: .7rem 3.4rem .7rem .9rem; }
.available-camera-link > span { min-width: 0; display: grid; gap: .35rem; }
.camera-drag-handle { width: 44px; height: 44px; }
.available-camera .camera-drag-handle { width: 44px; height: 44px; }
.camera-drag-handle svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.is-camera-selected { box-shadow: 0 0 0 3px var(--signal); }

/* HardyEdge brand mark shared by prototype and production shells */
.hardyedge-mark{width:34px;height:38px;flex:none}
.brand strong{display:inline-flex;align-items:baseline}
.hardy-word{color:var(--ink)}
.edge-word{color:#0a84ff}