/* camera-views.css — a camera tile with a second view (camera_status_card's
   `alt_view`, e.g. regular + thermal). HTML and CSS only.

   - Tapping the picture opens the full-resolution frame of the view shown,
     exactly like a tile without a second view. Switching is never a tap on
     the picture (operator, 2026-10-18).
   - Each tile has an explicit "Regular | Thermal" control under its picture.
   - A board may carry ONE board-wide toggle (`.cam-board-alt`, a checkbox
     placed before the board's container) that shows every tile's second
     view at once.
   - The switch is a 3-D card turn; with reduced motion it is a cross-fade.

   State, without script: each tile leads with a checkbox `.cam-flip`
   (`hx-preserve`, so a 30 s poll keeps it). The view shown is the board
   toggle XOR the tile's own flip, so a tile can still be switched back while
   the board shows thermal. "B shown" is therefore one of:

     .cam-flip:checked ~ *                                   (no board toggle,
                                                              or it is off)
     .cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ *  (board on)

   and the board-on + flipped case is set back to A by a rule of higher
   specificity placed after them. Every property below follows that
   pattern; keep the three selectors together when editing one.

   Linked by the pages that render such tiles. Not part of output.css because
   that file is generated by Tailwind from template scans and also carries
   classes only Rust-built HTML uses; regenerating it for one component risks
   dropping those. Plain CSS, theme colours via the DaisyUI variables. */

.cam-view-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* What shows for which view. `contents` keeps a wrapper out of the layout,
   so a badge inside it is still a flex item of the badge row. */
.cam-only-a { display: contents; }
.cam-only-b { display: none; }
.cam-flip:checked ~ * .cam-only-a,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-only-a { display: none; }
.cam-flip:checked ~ * .cam-only-b,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-only-b { display: contents; }
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-only-a { display: contents; }
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-only-b { display: none; }

/* The card turn. */
.cam-stage {
  width: 100%;
  height: 100%;
  perspective: 1400px;
}
.cam-stage__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cam-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cam-face > a { display: block; width: 100%; height: 100%; }
.cam-face--b { transform: rotateY(180deg); }
.cam-flip:checked ~ * .cam-stage__inner,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-stage__inner { transform: rotateY(180deg); }
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-stage__inner { transform: none; }

/* Only the face shown takes the tap, so it opens THAT view's frame. A hidden
   back face is not reliably skipped by hit-testing, and under reduced motion
   both faces sit flat in the same place. */
.cam-face--b { pointer-events: none; }
.cam-flip:checked ~ * .cam-face--a,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-face--a { pointer-events: none; }
.cam-flip:checked ~ * .cam-face--b,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-face--b { pointer-events: auto; }
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-face--a { pointer-events: auto; }
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-face--b { pointer-events: none; }

/* Per-tile "Regular | Thermal" control, under the picture. Both options are
   labels for the tile's one checkbox; the option already shown is inert, so
   tapping it never switches away. 2 rem tall options are the touch target on
   a phone. */
.cam-seg {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.cam-seg__opt {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.2s, color 0.2s;
}
.cam-seg__opt--a,
.cam-flip:checked ~ * .cam-seg__opt--b,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-seg__opt--b,
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-seg__opt--a {
  background: var(--color-primary);
  color: var(--color-primary-content);
  pointer-events: none;
}
.cam-flip:checked ~ * .cam-seg__opt--a,
.cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-seg__opt--a,
.cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-seg__opt--b {
  background: transparent;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  pointer-events: auto;
}
.cam-flip:focus-visible ~ * .cam-seg {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Board-wide toggle: a switch whose label sits in the board's polled body;
   its checkbox `.cam-board-alt` sits outside it, before the board container,
   so the choice survives every poll. */
.cam-board-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cam-board-toggle__track {
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  transition: background-color 0.2s;
}
.cam-board-toggle__thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: var(--color-base-100);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform 0.2s;
}
.cam-board-alt:checked ~ * .cam-board-toggle__track { background: var(--color-primary); }
.cam-board-alt:checked ~ * .cam-board-toggle__thumb { transform: translateX(1.1rem); }
.cam-board-alt:focus-visible ~ * .cam-board-toggle__track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cam-stage__inner,
  .cam-flip:checked ~ * .cam-stage__inner,
  .cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-stage__inner,
  .cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-stage__inner {
    transition: none;
    transform: none;
  }
  .cam-face--b {
    transform: none;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .cam-flip:checked ~ * .cam-face--b,
  .cam-board-alt:checked ~ * .cam-flip:not(:checked) ~ * .cam-face--b { opacity: 1; }
  .cam-board-alt:checked ~ * .cam-flip:checked ~ * .cam-face--b { opacity: 0; }
}