/* Shared navigation and legible chrome for the private household viewer. */
body.cctv-app {
  --app-surface:#181b1b;
  --app-ink:#f4f1e8;
  --app-muted:#b2b9b5;
  --app-accent:#7bd6c4;
  --app-line:#39423e;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;
}
.cctv-app .global-navigation {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-bottom:1px solid var(--app-line);
  background:var(--app-surface);
}
.cctv-app .global-navigation a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:8px 18px;
  color:var(--app-muted);
  font-size:16px;
  font-weight:650;
  text-decoration:none;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.cctv-app .global-navigation a[aria-current="page"] { color:var(--app-accent); border-bottom-color:var(--app-accent); }
.cctv-app .global-navigation a:focus-visible { outline:3px solid var(--app-accent); outline-offset:-4px; }
.cctv-app .global-navigation a:hover { color:var(--app-ink); }
.cctv-app .primary-navigation a { flex:1; }
.cctv-app .touch-guide { display:none; margin:0; color:var(--app-muted); font-size:14px; line-height:1.5; }
.cctv-app .workspace { gap:16px; }
.cctv-app .workspace-header h2 { margin:3px 0 0; font-size:26px; }
.cctv-app .camera-panel.active { transform:none; }
.cctv-app .panel-title strong { font-size:17px; }
.cctv-app .panel-actions button { min-height:44px; }
.cctv-app .viewer-options { border-top:1px solid var(--line); border-bottom:0; padding-top:8px; }
.cctv-app .camera-capture-status { margin:0; padding:10px 14px; color:var(--app-accent); font-size:14px; line-height:1.5; }
.cctv-app .camera-capture-status:empty { display:none; }
.cctv-app .camera-capture-status.error { color:#ffa6a6; }

/* The house retains its existing lighting; controls match the rest of the app. */
body.cctv-site {
  color-scheme:dark;
  --ink:var(--app-ink); --muted:var(--app-muted); --faint:#9ca6a0;
  --line:var(--app-line); --line-strong:#56625c;
  --accent:var(--app-accent); --accent-soft:#253d36; --accent-ink:var(--app-accent);
  --paper:var(--app-surface); --page:#11110f; --rail:#202724;
}
.cctv-site .topbar { min-height:72px; }
.cctv-site .app-navigation { border-bottom:0; }
.cctv-site .app-navigation a { padding-inline:14px; }
.cctv-site button:hover,.cctv-site a.icon-button:hover { background:#2c3b34; }
.cctv-site .view-modes { background:#27312c; }
.cctv-site .view-modes button[aria-pressed="true"] { background:#37483f; }
.cctv-site .scene-tools select { font-size:14px; min-height:44px; }
.cctv-site .view-modes button { font-size:14px; min-height:44px; }
.cctv-site .layer-control { font-size:14px; }
.cctv-site .floating-tools { background:#202724ed; }
.cctv-site .floating-tools .icon-button:hover { background:#35473d; }
.cctv-site .camera-marker:hover { background:transparent; }
.cctv-site .camera-location { margin-top:14px; }
.cctv-site .camera-recordings { font-size:16px; }
.cctv-site .camera-marker[aria-pressed="true"] span { color:#102f27; }

@media (pointer:coarse) and (max-width:768px), (pointer:coarse) and (max-width:1024px) and (max-height:768px) {
  .cctv-app .touch-guide { display:block; }
}
@media (max-width:760px) {
  body.cctv-app { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  body.cctv-app:has(#viewerPanel[hidden]) { padding-bottom:0; }
  .cctv-app .global-navigation {
    position:fixed;
    inset:auto 0 0;
    z-index:30;
    margin:0;
    width:100%;
    gap:0;
    padding:4px 8px calc(4px + env(safe-area-inset-bottom));
    border-top:1px solid var(--app-line);
    border-bottom:0;
  }
  .cctv-app .global-navigation a {
    flex:1;
    min-height:54px;
    padding:8px 4px;
    font-size:16px;
    border-bottom:0;
    border-top:3px solid transparent;
  }
  .cctv-app .global-navigation a[aria-current="page"] { border-top-color:var(--app-accent); }
  .cctv-app .workspace { padding:16px 14px; gap:14px; }
  .cctv-app .workspace-header { flex-direction:row; align-items:center; gap:12px; }
  .cctv-app .workspace-header h2 { font-size:23px; }
  .cctv-app .status-cluster { display:grid; justify-items:end; gap:3px; font-size:13px; }
  .cctv-app .panel-head { min-height:62px; padding:9px 10px; gap:8px; }
  .cctv-app .panel-title strong { font-size:16px; }
  .cctv-app .panel-actions { gap:6px; }
  .cctv-app .panel-actions button { padding-inline:9px; }
  .cctv-site .topbar { min-height:64px; padding:10px 16px; }
  .cctv-site .scene-area { height:min(480px,55svh); }
  .cctv-site .scene-tools { min-height:100px; }
}