/* ============================================================
   Sync-it Demo — Styles
   All tunable dimensions live in custom properties on :root.
   ============================================================ */

/* ── Design tokens ──
   Reference design width: 1440 px.
   All typography, spacing and radii use clamp() so the UI
   scales smoothly from ~375 px mobile up to 1440+ px desktop.
   Each preferred value is calibrated so clamp() hits its MAX
   at exactly 1440 px viewport width. */
:root {
  /* Colours */
  --clr-bg:            #0d0d1a;
  --clr-stage-bg:      #000;
  --clr-surface:       #1a1a2e;
  --clr-surface-hover: #25254a;
  --clr-accent:        #4a6cf7;
  --clr-accent-hover:  #5b7bf8;
  --clr-text:          #e0e0f0;
  --clr-text-muted:    #8888aa;
  --clr-btn-bg:        #222244;
  --clr-btn-active:    #4a6cf7;
  --clr-btn-text:      #d0d0e8;

  /* Typography — clamp(MIN, PREFERRED, MAX)
     PREFERRED = MAX ÷ 1440 × 100 vw                            */
  --font-family:       system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-label:          clamp(0.65rem, 0.97vw,  0.875rem);
  --fs-btn:            clamp(0.7rem,  1.04vw,  0.9375rem);
  --fs-overlay:        clamp(0.75rem, 1.25vw,  1.125rem);

  /* Spacing — fluid, calibrated to hit MAX at 1440 px */
  --gap-controls:       clamp(6px,  0.69vw,  10px);
  --pad-control-slot:   clamp(8px,  0.97vw,  14px)
                        clamp(12px, 1.67vw,  24px);
  --pad-stage-label:    clamp(4px,  0.56vw,  8px)
                        clamp(10px, 1.25vw,  18px);
  --pad-ctrl-btn:       clamp(6px,  0.69vw,  10px)
                        clamp(14px, 1.67vw,  24px);
  --pad-overlay:        clamp(4px,  0.56vw,  8px)
                        clamp(12px, 1.53vw,  22px);
  --pad-sound-btn:      clamp(3px,  0.42vw,  6px)
                        clamp(10px, 1.11vw,  16px);
  --pad-stage-btn:      clamp(5px,  0.56vw,  8px)
                        clamp(12px, 1.39vw,  20px);
  --pad-body:           clamp(1rem, 3vw,    5rem)
                        clamp(0.5rem, 1.5vw, 2rem);

  /* Radii — fluid, calibrated to hit MAX at 1440 px */
  --radius-btn:         100vmax;                 /* pill shape */
  --radius-surface:     clamp(6px,  0.69vw,  10px);
  --radius-label:       clamp(3px,  0.35vw,  5px);
  --radius-overlay:     clamp(3px,  0.42vw,  6px);

  /* Stage */
  --stage-max-width:    1440px;
  --stage-border-rad:   clamp(8px,  0.97vw,  14px);
  --video-scale:        0.8;       /* shrink video within stage */

  /* Callout text anchor points — tune to align with video callout lines */
  --callout-left:       30.5%;          /* fallback for left-side group  */
  --callout-right:      21%;          /* fallback for right-side group */

  --callout-left-light: 40.5%;   /* move Light sensor right — was 25% */
  --callout-left-display: var(--callout-left); /* OLED display (middle) */
  --callout-right-sync:  35%; /* Sync point (upper)    */
  --callout-right-frames: var(--callout-right);/* Frame LEDs (middle)   */
  --callout-right-mode:  var(--callout-right); /* Mode select (lower)   */

  --callout-top-light:  4%;
  --callout-top-display: 28.5%;    /* OLED display (left-middle slot)  */
  --callout-top-syncpoint:7%;  /* Sync point (right-upper slot)    */
  --callout-top-frames: 27.5%;
  --callout-top-mode:   50.5%;

  /* Responsive breakpoint — controls compact below this */
  --bp-compact-controls: 950px;
}

/* ── Reset & base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #000;
}

body {
  color: var(--clr-text);
  font-family: var(--font-family);
  min-height: 0;
  display: block;
}

/* ── Demo widget wrapper ── */
.syncit-demo {
  width: 100%;
  max-width: var(--stage-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;                 /* no gap — control-slot sits flush below */
}

/* ============================================================
   Stage — 16:9 video container
   aspect-ratio keeps the box at 16:9 regardless of width.
   All overlays are positioned absolutely inside this box.
   ============================================================ */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--clr-stage-bg);
  border-radius: 0 0 var(--stage-border-rad) var(--stage-border-rad);
  overflow: hidden;         /* clip any overlay creep */
}

/* ── Video ── */
.stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: contain;
  transform: scale(var(--video-scale));
  transform-origin: center;
  display: block;
  pointer-events: none;       /* let overlays receive clicks */
}

/* ── Top-left button ── */
.stage-label {
  position: absolute;
  z-index: 2;
  font-family: var(--font-family);
  font-size: var(--fs-label);
  color: var(--clr-text-muted);
  background: rgb(0 0 0 / 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid transparent;
  border-radius: var(--radius-label);
  padding: var(--pad-stage-label);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.stage-label:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--clr-text);
}

.stage-label:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* Active state: speed panel is open */
.stage-label.is-active {
  color: var(--clr-text);
  border-color: rgb(255 255 255 / 0.15);
}

.stage-label--tl {
  top:   3.5%;
  left:  3.5%;
}

/* ── Top-right button ── */
.stage-btn {
  position: absolute;
  z-index: 3;
  top:   3.5%;
  right: 3.5%;
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.28vw, 5px);
  font-size: var(--fs-label);
  color: var(--clr-text);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-btn);
  padding: var(--pad-stage-btn);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.stage-btn:hover,
.stage-btn:focus-visible {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.25);
}

.stage-btn-chevron {
  font-size: 1.2em;
  line-height: 1;
  transition: transform 0.25s;
}

/* Active state: measure panel is selected */
.stage-btn.is-active .stage-btn-chevron {
  transform: rotate(90deg);
}

/* ============================================================
   Overlay instructional text
   Positioned in the lower portion of the stage.
   ============================================================ */
.overlay-text {
  position: absolute;
  z-index: 2;
  left: 38%;
  top: 10%;
  transform: translateY(-50%);
  width: 30%;
  max-width: 40rem;
  font-size: var(--fs-overlay);
  color: var(--clr-text);
  text-align: center;
  line-height: 1.4;
  padding: var(--pad-overlay);
  border-radius: var(--radius-overlay);
}

/* ── Play / Mute sound button ── */
.sound-btn {
  position: absolute;
  z-index: 3;
  bottom: 23%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-family);
  font-size: var(--fs-label);
  color: var(--clr-text-muted);
  background: rgb(0 0 0 / 0.40);
  border: 1px solid rgb(255 255 255 / 0.10);
  border-radius: var(--radius-btn);
  padding: var(--pad-sound-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sound-btn:hover {
  background: rgb(255 255 255 / 0.10);
  border-color: rgb(255 255 255 / 0.20);
  color: var(--clr-text);
}

.sound-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* When sound is enabled, highlight the button */
.sound-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--clr-btn-active);
  border-color: var(--clr-btn-active);
}

/* ============================================================
   Callout text overlays — visible only in normal speed mode.
   Each callout rests at the end of a line drawn in the video.
   All positions use percentage-based custom properties so they
   scale with the 16:9 stage and can be tuned in one place.
   ============================================================ */

.callout-overlays {
  /* grouping wrapper — no layout impact */;
}

.callout-text {
  position: absolute;
  z-index: 2;
  font-size: clamp(0.7rem, 0.9vw, .9rem);
  color: var(--clr-text);
  text-align: left;
  max-width: 10%;
  line-height: 1.35;
  pointer-events: none;
}

.callout-title {
  display: block;
  color: var(--clr-accent);
  font-weight: 600;
  margin-bottom: 2px;
}

.callout-desc {
  display: block;
  color: var(--clr-text-muted);
}

/* ── Light sensor — top-left ── */
.callout--light-sensor {
  top:  var(--callout-top-light);
  left: var(--callout-left-light);
}

/* ── OLED display — left-middle ── */
.callout--sync-point {
  top:  var(--callout-top-display);
  left: var(--callout-left-display);
}

/* ── Sync point — right-upper ── */
.callout--oled {
  top:   var(--callout-top-syncpoint);
  right: var(--callout-right-sync);
  text-align: right;
}

/* ── Frame no. LEDs — right-middle ── */
.callout--frame-leds {
  top:   var(--callout-top-frames);
  right: var(--callout-right-frames);
  text-align: right;
}

/* ── Mode select — right-lower ── */
.callout--mode-select {
  top:   var(--callout-top-mode);
  right: var(--callout-right-mode);
  text-align: right;
}

/* ============================================================
   Control slot — overlaid at the bottom of the stage.
   Shrink-wraps the button group with a subtle blurred backing.
   ============================================================ */
.control-slot {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(20px, 15%, 88px);
  transform: translateX(-50%);
}

/* Ensure the hidden attribute always works, even when CSS sets display */
[hidden] {
  display: none !important;
}

/* Both bars sit in the same grid cell (shared slot) */
.control-bar {
  display: flex;
  gap: var(--gap-controls);
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(6px, 0.6vw, 10px);
  border-radius: var(--radius-btn);
}

/* ── Individual control button ── */
.ctrl-btn {
  font-family: var(--font-family);
  font-size: var(--fs-btn);
  color: var(--clr-btn-text);
  background: var(--clr-btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: var(--pad-ctrl-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ctrl-btn:hover {
  background: var(--clr-surface-hover);
  border-color: rgb(255 255 255 / 0.10);
}

.ctrl-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* Active / selected state */
.ctrl-btn.is-active {
  background: var(--clr-btn-active);
  color: #fff;
  border-color: var(--clr-btn-active);
}

/* ============================================================
   Responsive — structural changes only.
   Sizing is handled by clamp() in the :root tokens.
   ============================================================ */

/* Below 600 px: full-width control slot with horizontal scroll */
@media (max-width: 600px) {
  .control-slot {
    width: calc(100% - 1rem);
    max-width: none;
  }

  .control-bar {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* hide scrollbar on Firefox */
    flex-wrap: nowrap;
  }

  .control-bar::-webkit-scrollbar {
    display: none;                  /* hide scrollbar on Chrome/Safari */
  }

  .ctrl-btn {
    flex-shrink: 0;
  }

  /* Mobile: wider, lower overlay */
  .overlay-text {
    left: 50%;
    top: auto;
    bottom: 16%;
    transform: translateX(-50%);
    width: 85%;
    max-width: none;
  }
}