/* devtools.css — dock panel for the local-only dev tools. Hidden by default;
   `~` toggles #devtools.hidden. Never loaded with content on the deployed host
   because the panel DOM is only created when isLocalHost() is true. */

#devtools {
  position: fixed; top: 0; right: 0; width: 360px; height: 100vh; z-index: 9999;
  background: rgba(14, 18, 22, 0.94); color: #cfe;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  display: flex; flex-direction: column; box-shadow: -4px 0 18px rgba(0, 0, 0, .5);
}
#devtools.hidden { display: none; }

.dt-bar { display: flex; gap: 6px; align-items: center; padding: 6px; background: #0a0d10; border-bottom: 1px solid #234; }
.dt-bar strong { color: #5fd; letter-spacing: .15em; }
.dt-bar #dt-search { flex: 1; min-width: 0; background: #11161b; border: 1px solid #2a3a44; color: #cfe; padding: 3px 6px; border-radius: 3px; }
.dt-bar #dt-mini { color: #8ab; font-size: 11px; white-space: nowrap; }
.dt-bar button { background: #20303a; color: #cfe; border: 1px solid #345; border-radius: 3px; cursor: pointer; padding: 2px 6px; }

.dt-body { flex: 1; display: flex; min-height: 0; }
#dt-tabs { display: flex; flex-direction: column; width: 80px; background: #0c1116; overflow-y: auto; flex: 0 0 auto; }
#dt-tabs button { background: none; border: none; color: #9bd; padding: 7px 6px; text-align: left; cursor: pointer; border-left: 3px solid transparent; font: inherit; }
#dt-tabs button.active { color: #fff; background: #16202a; border-left-color: #5fd; }
#dt-tabs button:hover { background: #121b22; }

#dt-content { flex: 1; overflow-y: auto; padding: 6px; }
.dt-pane.hidden { display: none; }

.dt-section { margin-bottom: 8px; border: 1px solid #1e2a33; border-radius: 4px; }
.dt-section-head { width: 100%; text-align: left; background: #14202a; color: #adf; border: none; padding: 5px 7px; cursor: pointer; font-weight: bold; font: inherit; }
.dt-section.collapsed .dt-section-body { display: none; }
.dt-section-body { padding: 5px 7px; }

.dt-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.dt-label { flex: 0 0 116px; color: #9ab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-row input[type=range] { flex: 1; min-width: 0; }
.dt-row input[type=text], .dt-row select { flex: 1; min-width: 0; background: #11161b; border: 1px solid #2a3a44; color: #cfe; padding: 2px 4px; }
.dt-row input[type=color] { flex: 0 0 auto; background: none; border: 1px solid #2a3a44; }
.dt-val { flex: 0 0 46px; text-align: right; color: #cfe; }

.dt-btn { flex: 1; background: #20303a; color: #cfe; border: 1px solid #345; border-radius: 3px; padding: 3px; cursor: pointer; font: inherit; }
.dt-btn:hover { background: #2a4150; }

.dt-log { max-height: 160px; overflow: auto; background: #0a0d10; padding: 4px; white-space: pre-wrap; font-size: 11px; margin: 4px 0 0; border: 1px solid #1e2a33; }