/* Shared camera console: focus | zoom | joystick, speed, then presets.
   Full-size joystick interaction area: 198px. */
.source-control-panel.ptz-remote .compact-google-layout,#ptz-control:not([hidden]) {
 display:grid;grid-template-columns:48px 48px minmax(0,198px);grid-template-rows:auto auto auto;
 gap:10px 12px;justify-content:center;width:100%;max-width:358px;box-sizing:border-box;
 padding:0 8px;margin:30px auto 8px;align-items:center;
}
.source-control-panel.ptz-remote .compact-navigation,#ptz-control .ptz-tools {display:contents;}
.source-control-panel.ptz-remote .compact-navigation .source-dpad,#ptz-control .ptz-tools>.dpad {
 grid-column:3;grid-row:1;width:100%;max-width:198px;height:auto;aspect-ratio:1;
 box-sizing:border-box;margin:0;justify-self:center;box-shadow:0 2px 4px #0005;
}
.source-control-panel.ptz-remote .compact-google-layout>.compact-rockers,#ptz-control .ptz-tools>.zoom {
 grid-column:2;grid-row:1;align-self:stretch;position:relative;width:48px;height:auto;min-height:0;
 margin:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr);align-content:stretch;gap:8px;z-index:1;
}
.source-control-panel.ptz-remote .compact-google-layout>.ptz-focus,#ptz-control .ptz-tools>#focus-tools {grid-column:1;}
.source-control-panel.ptz-remote .remote-rocker.ptz-spring-rocker,#ptz-control .ptz-spring-rocker {
 position:relative;overflow:visible;height:100%;min-height:0;min-width:0;background:transparent;
 border:0;border-radius:16px;box-shadow:none;
}
.source-control-panel.ptz-remote .remote-rocker.ptz-spring-rocker::after,#ptz-control .ptz-spring-rocker::after {
 content:'';position:absolute;inset:0 25%;border:1px solid #3b4145;border-radius:16px;
 background:linear-gradient(100deg,#292d30,#191c1f);box-shadow:inset 0 1px #ffffff0b,0 2px 3px #0005;
 pointer-events:none;z-index:0;
}
/* Labels and Auto sit outside the full-length focus and zoom rails. */
.source-control-panel.ptz-remote .ptz-spring-rocker>small,#ptz-control .ptz-tools>.zoom::before {
 position:absolute;top:-22px;bottom:auto;left:0;width:100%;z-index:2;pointer-events:none;
 color:var(--ink-dim,var(--dim,#b7c1ca));text-align:center;
 font:600 11px/14px var(--sans,system-ui);letter-spacing:.06em;
}
#ptz-control .ptz-tools>.zoom::before {content:'Z';}
#ptz-control .ptz-tools>#focus-tools::before {content:'F';}
#ptz-control .ptz-tools>.ptz-spring-rocker {height:auto;}
.source-control-panel.ptz-remote .focus-auto,#ptz-control #focus-auto {
 grid-column:3;grid-row:1;align-self:end;justify-self:start;position:relative;
 width:48px;min-width:0;min-height:24px;height:24px;z-index:2;
 padding:0;border-radius:10px;border:1px solid #3d444b;background:linear-gradient(#2d3237,#1c2024);
 color:#b8c1ca;font-size:10px;box-shadow:inset 0 1px #ffffff0a;
}
.ptz-spring-rocker input.ptz-spring {position:absolute!important;inset:0;width:100%!important;height:100%!important;padding:12px 0!important;box-sizing:border-box;filter:none;z-index:1;}
.ptz-spring-rocker input.ptz-spring::-webkit-slider-runnable-track {
 width:7px;border:1px solid #090b0c;border-radius:6px;background:#0b0d0f;
 box-shadow:inset 1px 0 3px #000,1px 0 #ffffff0b;
}
.ptz-spring-rocker input.ptz-spring::-moz-range-track {
 width:7px;border:1px solid #090b0c;border-radius:6px;background:#0b0d0f;
 box-shadow:inset 1px 0 3px #000,1px 0 #ffffff0b;
}
.ptz-spring-rocker input.ptz-spring::-webkit-slider-thumb {
 width:42px;height:42px;margin-left:-18px;border-radius:10px;border:1px solid #080a0b;
 background:linear-gradient(#5abe84,#5abe84) center/24px 3px no-repeat,
 repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px),linear-gradient(90deg,#141719,#303539 28%,#252a2d 65%,#111416);
 box-shadow:inset 0 1px 1px #ffffff22,inset 0 -2px 2px #0008,0 3px 5px #0009;
}
.ptz-spring-rocker input.ptz-spring::-moz-range-thumb {
 width:42px;height:42px;border-radius:10px;border:1px solid #080a0b;
 background:linear-gradient(#5abe84,#5abe84) center/24px 3px no-repeat,
 repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px),linear-gradient(90deg,#141719,#303539 28%,#252a2d 65%,#111416);
 box-shadow:inset 0 1px 1px #ffffff22,inset 0 -2px 2px #0008,0 3px 5px #0009;
}
.source-control-panel.ptz-remote .ptz-speed-control,#ptz-control .speed {
 grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;width:100%;max-width:none;margin:0;padding:0;gap:9px;
 background:transparent;font:500 10px/14px var(--sans,system-ui);letter-spacing:.04em;
 color:var(--ink-dim,var(--dim,#8e9ba7));text-align:left;
}
#ptz-control .speed>span:last-child {display:none;}
.ptz-remote .ptz-speed-control input,#ptz-control .speed input {
 appearance:none;-webkit-appearance:none;display:block;width:100%;height:28px;min-height:28px;
 box-sizing:border-box;margin:0;padding:0;background:transparent;border:0;border-radius:0;cursor:ew-resize;touch-action:pan-y;
}
.ptz-remote .ptz-speed-control input::-webkit-slider-runnable-track,#ptz-control .speed input::-webkit-slider-runnable-track {
 height:5px;border:1px solid #090b0d;border-radius:4px;background:#23282c;box-shadow:inset 0 1px 2px #0009,0 1px #ffffff16;
}
.ptz-remote .ptz-speed-control input::-moz-range-track,#ptz-control .speed input::-moz-range-track {
 height:3px;border:1px solid #090b0d;border-radius:4px;background:#23282c;box-shadow:inset 0 1px 2px #0009,0 1px #ffffff16;
}
.ptz-remote .ptz-speed-control input::-webkit-slider-thumb,#ptz-control .speed input::-webkit-slider-thumb {
 appearance:none;-webkit-appearance:none;width:28px;height:16px;margin-top:-6px;border:1px solid #101315;border-radius:5px;
 background:linear-gradient(#65be8a,#65be8a) center/2px 8px no-repeat,linear-gradient(#40474c,#202529);
 box-shadow:inset 0 1px #ffffff25,0 2px 3px #0006;
}
.ptz-remote .ptz-speed-control input::-moz-range-thumb,#ptz-control .speed input::-moz-range-thumb {
 width:26px;height:14px;border:1px solid #101315;border-radius:5px;
 background:linear-gradient(#65be8a,#65be8a) center/2px 8px no-repeat,linear-gradient(#40474c,#202529);
 box-shadow:inset 0 1px #ffffff25,0 2px 3px #0006;
}
.ptz-remote .ptz-speed-control input:focus-visible,#ptz-control .speed input:focus-visible {outline:2px solid #69b18a;outline-offset:3px;border-radius:5px;}
.source-control-panel.ptz-remote .ptz-preset-column,#ptz-control #presets {
 grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 align-self:start;align-content:start;width:100%;max-width:320px;margin:0;justify-self:center;gap:10px;
}
.source-control-panel.ptz-remote .ptz-preset-column .ptz-preset,
#ptz-control .preset>button[data-preset=go],#ptz-control .preset>button[data-preset=save] {
 display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:auto;
 min-height:0;aspect-ratio:1;padding:4px 2px;border:1px solid #373d46;border-radius:50%;
 background:linear-gradient(#2b3038,#1a1e25);color:#edf1f6;box-shadow:inset 0 1px #ffffff07,0 2px 3px #0005;
}
.source-control-panel.ptz-remote .ptz-preset-column .ptz-preset strong,#ptz-control .preset strong {color:#edf1f6;font:500 20px/1.1 var(--sans,system-ui);}
.source-control-panel.ptz-remote .ptz-preset-column .ptz-preset span,#ptz-control .preset span {max-width:100%;color:#a5afb9;font:400 8px/12px var(--sans,system-ui);}
.source-control-panel.ptz-remote .ptz-preset-column .ptz-preset.active {border-color:#64ae85;box-shadow:inset 0 0 0 1px #64ae8533,0 2px 3px #0005;}
#ptz-control .preset {padding:0;border:0;background:transparent;}
#ptz-control .preset>button.edit {aspect-ratio:auto;border-radius:6px;font-size:9px;}
#ptz-control .section-title {grid-column:1/-1;grid-row:4;margin:0;}
#ptz-control>.hint {grid-column:1/-1;grid-row:5;margin:0;}
html.light .ptz-stick-guides {stroke:#58616a;opacity:.85;}
@media(max-width:370px){
 .source-control-panel.ptz-remote .compact-google-layout,#ptz-control:not([hidden]) {column-gap:10px;padding-inline:4px;row-gap:8px;}
 .source-control-panel.ptz-remote .ptz-preset-column,#ptz-control #presets {gap:7px;}
 .source-control-panel.ptz-remote .ptz-preset-column .ptz-preset strong,#ptz-control .preset strong {font-size:18px;}
}