/* 50 Sensors (#senzory): five tabs, one HUD monitor each; the copy beside it from 900 px. No script: all stack. */

.ar-sensors {
  --ar-sensors-ink: var(--wp--preset--color--ink);
  --ar-sensors-signal: var(--wp--preset--color--chartreuse);
  --ar-sensors-fast: var(--wp--custom--duration--base) var(--ar-ease-expo);
}

.ar-sensors__console { margin-block-start: var(--wp--preset--spacing--50); }
.ar-sensors__note { margin-block-start: var(--wp--preset--spacing--40); text-align: end; }

:is(.ar-sensors__tab, .ar-sensors__bar, .ar-sensors__tag, .ar-sensors__legend span, .ar-sensors__zoom label) {
  font: 700 var(--wp--preset--font-size--x-small) / 1.3 var(--wp--preset--font-family--display);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
}

/* Tabs: under 768 px they scroll sideways, edge to edge */

.ar-sensors__tabs {
  position: relative; display: flex; overflow: auto hidden;
  margin-inline: calc(-1 * var(--ar-gutter)); padding-inline: var(--ar-gutter);
  scroll-padding-inline: var(--ar-gutter); scroll-snap-type: x proximity; scrollbar-width: none;
  border-block-end: 1px solid var(--ar-line-strong);
}

.ar-sensors__tabs::-webkit-scrollbar { display: none; }

.ar-sensors__tab {
  flex: none; min-height: 3rem; padding-inline: 1.25rem; scroll-snap-align: start;
  color: var(--ar-fg-muted); white-space: nowrap;
  transition: color var(--ar-hover), background-color var(--ar-hover);
}

.ar-sensors__tab:focus-visible { outline-offset: -3px; } /* inside: a scroller clips rings */
.ar-sensors__tab:hover { color: var(--ar-fg); }

.ar-sensors__tab[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--ar-fg) 6%, transparent); color: var(--ar-fg);
  box-shadow: inset 0 -2px var(--ar-sensors-signal);
}

@media (min-width: 768px) {
  .ar-sensors__tabs { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .ar-sensors__tab { flex: 1 1 0; }
}

@media (forced-colors: active) {
  .ar-sensors__tab[aria-selected="true"] { border-block-end: 2px solid; } /* no box-shadow there */
}

.ar-sensors__panels { position: relative; margin-block-start: var(--wp--preset--spacing--40); }
.ar-sensors__panel { display: grid; align-items: start; gap: var(--wp--preset--spacing--40) clamp(2rem, 5vw, 4rem); }

.ar-sensors__text {
  padding-block-start: 1rem; color: var(--ar-fg-muted); font-size: var(--wp--preset--font-size--medium); text-wrap: pretty;
  background:
    linear-gradient(var(--ar-fg-muted), var(--ar-fg-muted)) 0 0 / 1.5rem 1px no-repeat,
    linear-gradient(var(--ar-line), var(--ar-line)) 0 0 / 100% 1px no-repeat;
}

@media (min-width: 900px) {
  .ar-sensors__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .ar-sensors__text { padding-block-start: 1.5rem; font-size: var(--wp--preset--font-size--large); }
  .ar-sensors__text strong { display: block; margin-block-end: 0.5rem; font: 700 var(--wp--preset--font-size--heading-s) / 1.22 var(--wp--preset--font-family--display); }
}

.no-js .ar-sensors__panel[hidden] { display: grid !important; margin-block-end: var(--wp--preset--spacing--50); }
.no-js :is(.ar-sensors__tabs, .ar-sensors__zoom) { display: none; }

/* Monitor (strip and overlay layer are aria-hidden) */

.ar-sensors__feed { background-color: var(--ar-sensors-ink); }
.ar-sensors__feed::before { inset: -0.5rem; z-index: 3; }

.ar-sensors__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2rem; padding-inline: 0.75rem; border-block-end: 1px solid var(--ar-line); color: var(--ar-fg-soft);
}

.ar-sensors__rec { display: inline-flex; align-items: center; gap: 0.5rem; }
.ar-sensors__clock { font-family: var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Inter has tabular digits */

.ar-sensors__view { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; background-color: var(--ar-sensors-ink); }
.ar-sensors__view > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-sensors__osd { position: absolute; inset: 0; pointer-events: none; }
.ar-sensors__osd > * { position: absolute; }

.ar-sensors__tag {
  padding: 0.15rem 0.5rem; border: 1px solid var(--ar-line-strong); border-radius: var(--wp--custom--corner--sm);
  background-color: color-mix(in srgb, var(--ar-sensors-ink) 72%, transparent); color: var(--ar-fg); white-space: nowrap;
}

.ar-sensors__guides { inset: 0; width: 100%; height: 100%; }
.ar-sensors__guides path { fill: none; stroke: var(--ar-fg); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* 180°: letterboxed wide picture, ruler, wheel-path guides */
.ar-sensors__view--front > img { object-fit: contain; }
.ar-sensors__view--front .ar-sensors__guides { mask-image: linear-gradient(to top, var(--ar-sensors-ink) 28%, transparent 50%); }

.ar-sensors__ruler {
  inset: 6.6% 8% auto; height: 0.5rem; translate: 0 -50%;
  background: repeating-linear-gradient(to right, var(--ar-fg-muted) 0 1px, transparent 1px 0.75rem);
}

.ar-sensors__tag--fov { top: 6.6%; left: 50%; translate: -50% -50%; }

/* Thermal: the legend is a black-to-white ramp through the same filter */
.ar-sensors__view--thermal > img { object-fit: contain; filter: url(#ar-thermal); }

.ar-sensors__legend {
  inset: 14% 0 14% auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center; gap: 0.5rem; width: 26%; color: var(--ar-fg-soft);
}

.ar-sensors__legend-bar {
  width: 0.75rem; filter: url(#ar-thermal);
  background: linear-gradient(to top, var(--wp--preset--color--ink), var(--wp--preset--color--white));
}

/* PTZ: zoom about the reticle on the distant ridge (script sets --ar-zoom, 1 to 4) */
.ar-sensors__view--ptz { --ar-fx: 16%; --ar-fy: 22%; }
.ar-sensors__view--ptz > img { transform: scale(var(--ar-zoom, 1)); transform-origin: var(--ar-fx) var(--ar-fy); }
.ar-sensors__reticle { left: var(--ar-fx); top: var(--ar-fy); width: clamp(4.5rem, 14%, 7rem); aspect-ratio: 1; translate: -50% -50%; }
.ar-sensors__reticle :is(circle, path) { fill: none; stroke: var(--ar-sensors-signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.ar-sensors__zoom {
  position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 0.75rem;
  padding: 1.5rem 0.75rem 0.5rem; color: var(--ar-fg);
  background: linear-gradient(to top, color-mix(in srgb, var(--ar-sensors-ink) 90%, transparent), transparent);
}

.ar-sensors__zoom-out { /* fixed width */
  flex: none; width: 4rem; text-align: end; white-space: nowrap;
  font: 700 var(--wp--preset--font-size--large) / 1 var(--wp--preset--font-family--display);
}

.ar-sensors__range { flex: 1 1 auto; min-width: 0; height: 2.75rem; margin: 0; accent-color: var(--ar-fg); cursor: pointer; }

/* Rear: mirrored, parking bands from alarm (near) to clear (far) */
.ar-sensors__view--rear > img { transform: scaleX(-1); object-position: 50% 0; }

path.ar-sensors__band--near {
  fill: color-mix(in srgb, var(--wp--preset--color--oxblood) 45%, transparent);
  stroke: color-mix(in srgb, var(--wp--preset--color--oxblood) 55%, var(--wp--custom--color--text-inverse));
}

path.ar-sensors__band--mid { fill: color-mix(in srgb, var(--wp--preset--color--silver) 20%, transparent); stroke: var(--wp--preset--color--silver); }
path.ar-sensors__band--far { fill: color-mix(in srgb, var(--ar-sensors-signal) 20%, transparent); stroke: var(--ar-sensors-signal); }

/* 3D: monochrome depth view under a steel tint, the box locks on a rescuer */
.ar-sensors__view--3d > img { object-position: 50% 0; filter: grayscale(1) contrast(1.2); }
.ar-sensors__tint { inset: 0; background-color: var(--wp--preset--color--steel); mix-blend-mode: color; }

.ar-sensors__track { /* a box seen through four corner squares */
  --ar-c: linear-gradient(var(--ar-sensors-ink) 0 0);
  top: 1.5%; left: 64%; width: 26%; height: 90%; border: 2px solid var(--ar-sensors-signal);
  mask-image: var(--ar-c), var(--ar-c), var(--ar-c), var(--ar-c);
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%; mask-repeat: no-repeat; mask-size: 1.25rem 1.25rem;
}

.ar-sensors__tag--lock {
  top: 3%; right: 36.5%; max-width: 7rem; /* two lines */
  border-color: var(--ar-sensors-signal); color: var(--ar-sensors-signal); white-space: normal;
}

/* Motion: a switch fades the new monitor in over the old one */

.ar-motion .ar-sensors__panel.is-in { animation: ar-sensors-in var(--ar-sensors-fast) both; }
.ar-motion .ar-sensors__panel.is-out { position: absolute; inset: 0 0 auto; pointer-events: none; animation: ar-sensors-out var(--ar-sensors-fast) both; }
.ar-motion .ar-sensors__view--ptz > img { transition: transform var(--wp--custom--duration--fast) var(--ar-ease-expo); }
.ar-motion .ar-sensors__track { animation: ar-sensors-lock 500ms var(--ar-ease-expo) backwards; }

@keyframes ar-sensors-in { from { opacity: 0; } }
@keyframes ar-sensors-out { to { opacity: 0; } }
@keyframes ar-sensors-lock { from { opacity: 0; scale: 1.3; } }