/* =====================================================================
   Developer chrome only — the camera authoring panel and the debug
   overlay. The site's own design lives in site.css; nothing here should
   style page content, or the two files will fight and this one will win
   by load order.

   Both panels are fixed and were a fixed width, which on a narrow viewport
   pushed past the right edge and gave the CUSTOMER-FACING page a
   horizontal scrollbar — while invisible. Dev tooling must never be able
   to do that, so both are capped to the layout width here.
   ===================================================================== */
#adm, #dbg{ max-width:calc(var(--vw, 100vw) - 24px); }

/* =====================================================================
   Camera authoring panel
   ===================================================================== */
/* The map tools: search, day/night, and the gear. One cluster in the nav,
   sharing a look, because they are the same KIND of control -- things you
   do to the map rather than places you go on the page. */
.nav-tools{ display:flex; align-items:center; gap:2px; margin-left:14px; flex:0 0 auto; }

.nav-tool, .nav-gear{ width:30px; height:30px; display:grid; place-items:center;
  position:relative; border:0; background:none; padding:0; cursor:pointer;
  color:inherit; opacity:.5; border-radius:50%; flex:0 0 auto;
  transition:opacity .3s var(--ease-out), color .3s var(--ease-out),
             background .3s var(--ease-out); }
.nav-tool:hover, .nav-gear:hover{ opacity:1; color:var(--accent); }
.nav-tool svg, .nav-gear svg{ width:18px; height:18px; display:block; }
/* an engaged tool stays lit, so "is search open" is answerable without
   looking for the bar itself */
.nav-tool.on{ opacity:1; color:var(--accent); background:rgba(226,112,58,.14); }

/* One button, two icons, crossfaded. A day/night control that shows the
   state you are IN reads the same as one that shows the state you would
   move to, so the only way to make it unambiguous is for the change to be
   visibly a change. */
#map-night .ico-sun, #map-night .ico-moon{
  grid-area:1/1; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); }
#map-night .ico-moon{ opacity:0; transform:rotate(-40deg) scale(.7); }
#map-night.on .ico-sun{ opacity:0; transform:rotate(40deg) scale(.7); }
#map-night.on .ico-moon{ opacity:1; transform:none; }

#adm{
  position:fixed; top:12px; left:12px; z-index:310; width:268px;
  background:rgba(8,14,18,.94); border:1px solid var(--line);
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--bone-dim);
  opacity:0; visibility:hidden; transform:translate3d(0,-6px,0);
  transition:opacity .25s, transform .25s, visibility .25s;
  max-height:calc(100vh - 24px); overflow-y:auto;
}
#adm.open{ opacity:1; visibility:visible; transform:none; }
.adm-h{ display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--line); color:var(--bone); }
.adm-h b{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; flex:1; }
.adm-status{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.adm-status.ok{ color:#5fbf7f; }
.adm-status.warn{ color:var(--accent); }
.adm-x{ font-size:15px; line-height:1; color:var(--muted); }

.adm-list{ padding:6px; border-bottom:1px solid var(--line); max-height:210px; overflow-y:auto; }
.adm-item{ display:flex; align-items:stretch; gap:2px; margin-bottom:2px; border:1px solid transparent; }
.adm-item:hover{ border-color:var(--line); }
.adm-item.on{ border-color:var(--accent); background:rgba(226,112,58,.10); }
.adm-pick{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; text-align:left;
  padding:4px 6px; font:inherit; color:var(--bone-dim); }
.adm-item:hover .adm-pick, .adm-item.on .adm-pick{ color:var(--bone); }
.adm-pick i{ font-style:normal; font-size:9px; color:var(--muted); }
.adm-pick span{ flex:1; font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-pick em{ font-style:normal; font-size:8.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.adm-mini{ width:18px; font-size:11px; line-height:1; color:var(--muted); flex:0 0 auto; }
.adm-mini:hover{ color:var(--bone); }
.adm-del:hover{ color:var(--accent); }

.adm-edit{ padding:9px 10px 10px; }
.adm-row{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.adm-row label{ width:56px; font-size:10px; color:var(--muted); }
.adm-row select, .adm-row input[type=range]{ flex:1; min-width:0; font:inherit; accent-color:var(--accent); }
.adm-row select{ background:rgba(232,238,241,.06); color:var(--bone);
  border:1px solid var(--line); padding:2px 4px; }

.adm-find{ gap:5px; }
.adm-find input{ flex:1; min-width:0; font:inherit; font-size:10.5px; padding:3px 5px;
  background:rgba(232,238,241,.06); border:1px solid var(--line); color:var(--bone); }
.adm-find #adm-num{ flex:0 0 46px; }
.adm-find button{ padding:3px 9px; border:1px solid var(--line); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); flex:0 0 auto; }
.adm-find button:hover{ border-color:var(--accent); color:var(--bone); }
.adm-find .adm-wide{ flex:1; }

.adm-keys{ margin:8px 0; font-size:9.5px; line-height:1.7; color:var(--muted); }
.adm-keys b{ color:var(--bone-dim); font-weight:500; }
#adm-read{ margin:0 0 9px; white-space:pre-wrap; font-size:10px; line-height:1.5; color:var(--muted); }
.adm-btns{ display:flex; gap:5px; }
.adm-btns button{ flex:1; padding:5px 0; border:1px solid var(--line); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); }
.adm-btns button:hover{ border-color:var(--accent); color:var(--bone); }
.adm-btns .adm-primary{ border-color:rgba(226,112,58,.5); color:var(--bone); }

.adm-more{ margin-top:9px; border-top:1px solid var(--line); padding-top:8px; }
.adm-more summary{ cursor:pointer; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.adm-more summary:hover{ color:var(--bone-dim); }
.adm-toggles{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; padding-top:8px; }
.adm-toggles label{ display:flex; align-items:center; gap:5px; cursor:pointer; font-size:10px; }
.adm-toggles input{ accent-color:var(--accent); margin:0; }

/* =====================================================================
   Debug overlay (F2)
   ===================================================================== */
#dbg{
  /* Positioned from the LEFT off --vw. `right` resolves against the
     scrollbar-inclusive viewport exactly as width:100% does, so right:12px
     put this 12px past the true edge and scrolled the page sideways. */
  position:fixed; top:12px; left:max(12px, calc(var(--vw, 100vw) - 262px));
  z-index:300; width:250px;
  background:rgba(8,14,18,.93); border:1px solid var(--line);
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--bone-dim);
  opacity:0; visibility:hidden; transform:translate3d(0,-6px,0);
  transition:opacity .25s, transform .25s, visibility .25s;
  max-height:calc(100vh - 24px); overflow-y:auto;
}
#dbg.open{ opacity:1; visibility:visible; transform:none; }
.dbg-h{ display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid var(--line); color:var(--bone); }
.dbg-h b{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.dbg-x{ font-size:15px; line-height:1; color:var(--muted); padding:0 2px; }
.dbg-b{ padding:10px; }
.dbg-pause{ display:flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--bone); cursor:pointer; }
.dbg-slider{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.dbg-slider input{ flex:1; min-width:0; accent-color:var(--accent); }
.dbg-jump{ display:flex; gap:4px; margin-bottom:11px; }
.dbg-jump button{ flex:1; padding:3px 0; border:1px solid var(--line); font-size:10px; color:var(--bone-dim); }
.dbg-jump button:hover{ border-color:var(--accent); color:var(--bone); }
.dbg-rows{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px;
  padding:9px 0; margin-bottom:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dbg-rows label{ display:flex; align-items:center; gap:5px; cursor:pointer; font-size:10px; }
.dbg-rows input, .dbg-pause input{ accent-color:var(--accent); margin:0; }
#dbg-out{ margin:0 0 9px; white-space:pre-wrap; word-break:break-word;
  font-size:10px; line-height:1.5; color:var(--muted); }
.dbg-copy{ width:100%; padding:5px 0; border:1px solid var(--line); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-dim); }
.dbg-copy:hover{ border-color:var(--accent); color:var(--bone); }

/* ==================================================================
   Address search — the frontend component.
   Uses the site's own tokens, not the panel's: this is chrome a
   visitor sees, so it has to belong to the page rather than look
   like an inspector that escaped.
   ================================================================== */
#addr{
  position:fixed; z-index:70;
  top:calc(var(--nav-h) + 18px);
  left:50%; width:min(440px, calc(var(--vw) - 32px));
  transform:translate3d(-50%,-10px,0);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--move) var(--ease-out),
             transform var(--move) var(--ease-out),
             visibility var(--move);
}
#addr.on{ opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(-50%,0,0); }

.addr-field{
  display:flex; align-items:center; gap:10px;
  padding:0 6px 0 14px; height:46px;
  background:rgba(11,17,22,.82);
  border:1px solid var(--line);
  border-radius:23px;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  transition:border-color var(--tap) var(--ease-out), background var(--tap) var(--ease-out);
}
#addr:focus-within .addr-field{ border-color:rgba(226,112,58,.55); background:rgba(11,17,22,.92); }
#addr.open .addr-field{ border-radius:23px 23px 0 0; }

.addr-ico{ width:17px; height:17px; flex:0 0 auto; fill:none;
  stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; }
#addr:focus-within .addr-ico{ stroke:var(--accent); }

#addr-in{
  flex:1; min-width:0; height:100%; border:0; outline:0; background:none;
  color:var(--bone); font:300 14px/1 var(--sans, inherit); letter-spacing:.01em;
}
#addr-in::placeholder{ color:var(--muted); }

.addr-clear{
  width:32px; height:32px; flex:0 0 auto; border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:19px; line-height:1; border-radius:50%;
  transition:color var(--tap) var(--ease-out), background var(--tap) var(--ease-out);
}
.addr-clear:hover{ color:var(--bone); background:rgba(232,238,241,.08); }

.addr-list{
  list-style:none; margin:0; padding:0; max-height:0; overflow:hidden;
  background:rgba(11,17,22,.94); border:1px solid var(--line); border-top:0;
  border-radius:0 0 14px 14px;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  transition:max-height var(--move) var(--ease-out);
}
#addr.open .addr-list{ max-height:340px; overflow-y:auto; }

.addr-list li{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 15px; cursor:pointer;
  border-left:2px solid transparent;
  transition:background var(--tap) var(--ease-out), border-color var(--tap) var(--ease-out);
}
.addr-list li:hover{ background:rgba(232,238,241,.05); }
.addr-list li.on{ background:rgba(226,112,58,.10); border-left-color:var(--accent); }
.addr-l{ flex:1; font-size:13.5px; font-weight:300; color:var(--bone-dim); }
.addr-list li.on .addr-l, .addr-list li:hover .addr-l{ color:var(--bone); }
.addr-n{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

.addr-tag{
  margin:9px auto 0; width:max-content; max-width:100%;
  padding:5px 13px; border-radius:14px;
  background:rgba(11,17,22,.8); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:11px; letter-spacing:.04em; color:var(--bone-dim);
}
.addr-tag b{ font-weight:400; color:var(--bone); }
.addr-tag i{ font-style:normal; color:var(--muted); }

/* On a phone the bar owns the top of the screen rather than floating
   in the middle of it — a 440px pill centred on a 390px viewport is
   a pill with its ends cut off. */
@media (max-width:640px){
  #addr{ top:calc(var(--nav-h) + 8px); width:calc(var(--vw) - 20px); }
  .addr-field{ height:44px; }
}