/* Glass panel base and the components shared by every panel (model, camera, graphics, lights). */
:root {
  --fp-amber: #d9822b;
  --fp-amber-ink: #8a4b00;
  --fp-chip-edge: rgb(255 255 255 / .8);
  --fp-card: rgb(255 255 255 / .5);
  --fp-ease: cubic-bezier(.22, 1, .36, 1);
}
.control-panel {
  --glass-ink: #1d2b31;
  --glass-secondary: #596a70;
  --glass-muted: #74838a;
  --glass-accent: #246fb4;
  --glass-line: rgb(255 255 255 / .68);
  --fx-color: #ffbf81;
  width: 322px;
  min-width: 322px;
  height: calc(100dvh - var(--dock-clear, 96px) - 14px);
  margin: 14px;
  padding: 10px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: var(--glass-ink);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: linear-gradient(145deg, rgb(255 255 255 / .57), rgb(255 255 255 / .37) 58%, rgb(255 255 255 / .48));
  border: 1px solid var(--glass-line);
  border-radius: 27px;
  box-shadow: 0 22px 55px rgb(24 53 65 / .17), 0 4px 15px rgb(24 53 65 / .08), inset 0 1px rgb(255 255 255 / .88), inset 0 -1px rgb(255 255 255 / .38);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
  isolation: isolate;
}
.control-panel[hidden], .control-panel [hidden] { display: none !important; }
.control-panel::-webkit-scrollbar { display: none; }
.control-panel * { box-sizing: border-box; }
.control-panel button, .control-panel input, .control-panel select { font: inherit; }
.control-panel button { color: inherit; cursor: pointer; }
.control-panel :is(button, input, select, summary, a):focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 3px; }
.control-panel h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 650; letter-spacing: 0; }

/* Panel header: icon chip, small group label, title, close button. */
.control-panel .fp-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 6px; }
.control-panel .fp-chip .pk-icon { width: 24px; height: 24px; }
.control-panel .fp-close { line-height: 1; }

/* Sections inside the model and camera panels. */
.model-panel section, .camera-panel section { padding: 16px 2px 18px; border-bottom: 1px solid rgb(78 111 124 / .13); }
.model-panel section:last-of-type, .camera-panel section:last-of-type { border-bottom: 0; }
.model-panel section > h3, .model-panel .heading-row h3 { margin: 0; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--glass-secondary); }
.fixture-light-panel section, .fixture-pane section, .door-panel section { padding: 22px 3px 23px; border-bottom: 1px solid rgb(78 111 124 / .17); }
.control-panel .heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.control-panel .view-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.control-panel .view-tabs button { min-height: 40px; padding: 7px 2px; border: 1px solid var(--fp-chip-edge); border-radius: 14px; background: rgb(255 255 255 / .55); color: var(--glass-secondary); font-size: 12px; font-weight: 550; transition: background-color .2s ease, transform .2s ease, border-color .2s ease; }
.control-panel .view-tabs button:hover { color: var(--glass-ink); background: #fff; transform: translateY(-1px); }
.control-panel .view-tabs button.active { color: var(--fp-amber-ink); font-weight: 650; background: #fff; border-color: var(--fp-amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fp-amber) 26%, transparent); }

.control-panel .range-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 8px; color: var(--glass-secondary); font-size: 12px; }
.control-panel .range-caption output { color: var(--glass-ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.control-panel .range-ends { display: flex; justify-content: space-between; margin-top: 4px; color: var(--glass-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.control-panel input[type="range"] { display: block; width: 100%; height: 22px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; --fill: 50%; }
.control-panel input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--fp-amber) var(--fill), rgb(38 60 50 / .16) var(--fill)); }
.control-panel input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgb(38 60 50 / .16); }
.control-panel input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--fp-amber); }
.control-panel input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .3), 0 0 0 1px rgb(0 0 0 / .05); transition: transform .2s ease; }
.control-panel input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.control-panel input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.control-panel input:disabled { opacity: .48; cursor: default; }

/* Toggle switches: the amber track is shared with the light switches. */
.control-panel .switch { position: relative; display: inline-flex; width: 48px; height: 28px; flex: none; }
.control-panel .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.control-panel .switch span { width: 100%; border-radius: 99px; background: #b6c0c2; box-shadow: inset 0 2px 5px rgb(0 0 0 / .18); transition: background-color .3s ease; }
.control-panel .switch span::after { content: ""; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); transition: transform .38s cubic-bezier(.34, 1.56, .64, 1); }
.control-panel .switch input:checked + span { background: var(--fp-amber); }
.control-panel .switch input:checked + span::after { transform: translateX(20px); }
.control-panel .switch input:focus-visible + span { outline: 2px solid var(--glass-accent); outline-offset: 3px; }


/* Pill buttons in the style of the "switch all lights" actions. */
.control-panel .text-button { padding: 6px 12px; border: 1px solid var(--fp-chip-edge); border-radius: 999px; background: rgb(255 255 255 / .55); color: var(--fp-amber-ink); font-size: 11px; font-weight: 600; white-space: nowrap; transition: background-color .2s ease, transform .2s ease; }
.control-panel .text-button:hover { background: #fff; transform: translateY(-1px); }
.control-panel .layers { display: grid; gap: 4px; margin-top: 10px; }
.control-panel .layer-row { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 4px 10px; border: 1px solid transparent; border-radius: 14px; color: var(--glass-ink); font-size: 13px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.control-panel .layer-row:hover { background: rgb(255 255 255 / .6); border-color: var(--fp-chip-edge); }
.control-panel .layer-row input { position: relative; width: 20px; height: 20px; margin: 0; flex: none; appearance: none; -webkit-appearance: none; border-radius: 7px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1.5px rgb(38 60 50 / .28); transition: background-color .2s ease, box-shadow .2s ease; cursor: pointer; }
.control-panel .layer-row input:checked { background: var(--fp-amber); box-shadow: none; }
.control-panel .layer-row input:checked::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.control-panel .layer-row input:disabled { cursor: default; }
.control-panel .layer-row span { min-width: 0; line-height: 1.25; }
.control-panel .layer-row small { margin-left: auto; color: var(--glass-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.control-panel .layer-row.unavailable { opacity: .45; }
.control-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0; font-size: 12px; }
.control-panel dt { color: var(--glass-secondary); }
.control-panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.control-panel footer { padding: 14px 2px 6px; }
.control-panel footer a { display: block; padding: 11px; color: var(--glass-ink); text-align: center; text-decoration: none; font-size: 12px; font-weight: 600; background: rgb(255 255 255 / .55); border: 1px solid var(--fp-chip-edge); border-radius: 14px; transition: background-color .2s ease; }
.control-panel footer a:hover { background: #fff; }

@media (prefers-reduced-transparency: reduce) {
  .control-panel { background: #f4f8f8; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .control-panel { --glass-ink: #101d23; --glass-secondary: #34434a; --glass-muted: #46575f; --glass-accent: #145e9e; background: #f7fafb; border-color: #587282; }
  .control-panel .camera-coordinate-grid input { border-color: #698698; }
}
@media (prefers-reduced-motion: reduce) {
  .control-panel *, .control-panel *::before, .control-panel *::after { transition-duration: 0s !important; }
}