/* FieldSync hardware camera setup screen.
 *
 * Dark, like the replay panel, for the same reason: it is a picture-judging
 * surface and every officiating room in the world is lit that way. Sizes are for
 * gloves and bifocals at arm's length on a windy infield -- nothing tappable is
 * under 52px in its short dimension, and the sliders are deliberately fat
 * because they are adjusted while looking at the PICTURE, not at the control.
 */

.csBack {
  position: fixed; inset: 0; z-index: 9000;
  background: #05070a;
  display: flex; align-items: stretch; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.csPanel {
  flex: 1 1 auto; max-width: 1100px;
  display: flex; flex-direction: column;
  color: #e9eef5; background: #0c0f14;
  overflow: hidden;
  /* Inside the native app shell this overlay is appended to <body>, so it does
     not inherit the shell's safe-area padding. Without these the Done button --
     the only way out of a full-screen panel -- sits under the notch on an iPad
     in portrait, and the panel has no other exit. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.csHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; min-height: 56px;
  border-bottom: 1px solid #1b2430;
}
.csTitle { font-size: 20px; font-weight: 700; }
.csClose {
  min-width: 108px; height: 46px; font: inherit; font-size: 17px; font-weight: 700;
  color: #e9eef5; background: #172030; border: 1px solid #2b3648; border-radius: 10px;
}

/* ── Stage ───────────────────────────────────────────────────────────── */
.csStage {
  position: relative; flex: 0 0 auto;
  background: #000; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.csCanvas { max-width: 100%; max-height: 100%; display: block; }

/* A frame we do not have is a plate, never an overlay on a stale picture -- the
   same rule the replay panel obeys. A still image under a live badge is the one
   lie a setup screen must not tell, because someone will aim the camera by it. */
.csPlate {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: #05070a; color: #cbd6e6; font-size: 18px;
}
.csPlate.on { display: flex; }

.csBadge {
  position: absolute; right: 10px; top: 10px;
  background: rgba(8,12,18,.82); color: #6ee7a8;
  padding: 4px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Centre line: the reference for putting the lens on the judged plane. Dashed
   and thin so it never hides the board edge it is being matched against. */
.csAlign { position: absolute; inset: 0; display: none; pointer-events: none; }
.csAlign.on { display: block; }
.csAlign::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; margin-left: -.5px;
  background: repeating-linear-gradient(#7dd3fc 0 10px, transparent 10px 18px);
}
.csAlign::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 64px; margin-left: -32px;
  border-left: 1px solid rgba(125,211,252,.26);
  border-right: 1px solid rgba(125,211,252,.26);
}

/* ── Meters ──────────────────────────────────────────────────────────── */
.csMeters { display: flex; gap: 10px; padding: 10px 14px 4px; }
.csMeter { flex: 1 1 0; background: #111a26; border-radius: 10px; padding: 9px 12px; }
.csMeterName { font-size: 12px; letter-spacing: .10em; color: #8b9bb1; font-weight: 700; }
.csMeterHint { font-size: 13px; color: #7f8fa6; margin-top: 5px; line-height: 1.35; }
.csMeterBig { font-size: 20px; font-weight: 700; margin-top: 4px; }
.csMeterBig.ok   { color: #6ee7a8; }
.csMeterBig.warn { color: #fbbf24; }
.csMeterBig.bad  { color: #f87171; }

.csBar {
  position: relative; height: 16px; margin-top: 7px;
  background: #0a121c; border-radius: 8px; overflow: hidden;
}
.csBarFill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #2f6fb5, #6ee7a8);
  transition: width .12s linear;
}
/* Peak-hold decays slowly, so focus can be found by overshooting and coming
   back -- which is how anyone actually focuses a lens by hand. */
.csBarPeak { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fde68a; }

/* ── Controls ────────────────────────────────────────────────────────── */
.csControls { flex: 1 1 auto; overflow-y: auto; padding: 6px 14px 18px; overscroll-behavior: contain; }
.csRow { padding: 10px 0; border-bottom: 1px solid #141d29; }
.csRowHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.csName { font-size: 17px; font-weight: 700; }
.csVal { font-size: 17px; color: #7dd3fc; font-variant-numeric: tabular-nums; }
.csNote { font-size: 14px; color: #8b9bb1; line-height: 1.4; margin-top: 5px; }

.csRange {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 40px; margin: 6px 0 0; background: transparent;
}
.csRange::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: #1d2938; }
.csRange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; margin-top: -13px; border-radius: 50%;
  background: #7dd3fc; border: 3px solid #0c0f14;
}
.csRange::-moz-range-track { height: 8px; border-radius: 4px; background: #1d2938; }
.csRange::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%; background: #7dd3fc; border: 3px solid #0c0f14;
}

.csRowToggle { display: flex; flex-direction: column; align-items: flex-start; }
.csToggle {
  min-height: 52px; min-width: 220px; padding: 0 18px;
  font: inherit; font-size: 17px; font-weight: 700;
  color: #e9eef5; background: #172030; border: 1px solid #2b3648; border-radius: 10px;
}
.csToggle.on { background: #2f6fb5; border-color: #4f93de; color: #fff; }

@media (max-width: 760px) {
  .csMeters { flex-direction: column; }
  .csTitle { font-size: 17px; }
}

/* Controls whose real value the server does not know yet. Shown rather than
   hidden, because the official still needs to see what is adjustable -- but
   inert, so nothing is written until they choose to take over. */
.csRow.unknown { opacity: .55; }
.csRow.unknown .csVal { color: #8b9bb1; }
.csTakeover {
  margin: 4px 0 10px; padding: 9px 12px; border-radius: 8px;
  background: #3a2410; border: 1px solid #6b4415; color: #fcd9a4;
  font-size: 14px; line-height: 1.4;
}

/* A section for something this device cannot do. Greyed rather than hidden:
   hiding it makes an official wonder whether the feature exists at all, and the
   commonest case -- an iPad, which no model of can read a tag -- deserves an
   answer rather than an absence. */
.dvSectionOff { opacity: .55; }
.dvSectionOff .dvSectionTitle::after {
  content: " — unavailable here";
  font-weight: 400;
  opacity: .8;
}
.dvSectionOff button:disabled { cursor: not-allowed; }