/* ═══════════════════════════════════════════════════════════════════════
   VideoScope — alignement sur le socle StudioTools
   ═══════════════════════════════════════════════════════════════════════

   VideoScope définit ses propres variables (--color-bg-*, --font-*). Plutôt
   que de réécrire ses règles une par une, on REMAPPE ces variables sur les
   jetons du socle : toute l'app adopte le thème d'un coup, et le jour où
   --st-surface change, VideoScope suit sans qu'on y touche.

   Ce qui n'est PAS remappé : les couleurs de tracé des instruments (vert,
   jaune, rouge). Le vert d'une forme d'onde n'est pas une couleur d'interface
   à harmoniser, c'est une convention de métier qui remonte aux Tektronix.
   Les jetons d'état du socle (--st-ok / --st-warn / --st-over) portent déjà
   cette idée : « jamais reteintes, ce sont des repères de régie ».

   Retirer ce fichier de index.html rend à VideoScope son habillage d'origine.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ——— Typographie du socle ——— */
  --font-family-instrument: var(--st-font, system-ui, sans-serif);

  /* ——— Surfaces et texte ——— */
  --color-bg-primary: var(--st-bg, #0a0a0c);
  --color-bg-secondary: var(--st-surface, #121215);
  --color-bg-header: var(--st-surface, #121215);
  --color-bg-panel: var(--st-surface-2, #16161a);
  --color-bg-instrument: var(--st-bg, #0a0a0c);
  --color-text-primary: var(--st-text, #fff);
  --color-text-secondary: var(--st-text-2, #a3a3ad);
  --color-text-tertiary: var(--st-text-3, #6e6e79);
  --color-border-primary: var(--st-line, #26262c);
  --color-border-accent: var(--st-line-2, #35353d);

  /* Accent d'interface : le bleu d'information du socle. */
  --color-accent-blue: var(--st-info, #4aa3ff);
  --color-accent-red: var(--st-over, #ff4444);
  /* --color-accent-green et --color-accent-yellow restent tels quels :
     couleurs de tracé, pas d'interface. */
}

/* ——— Panneau de contrôle : à droite ———
   Il était à gauche, à l'opposé de NewsGrid dont le panneau s'ouvre à
   droite. Deux outils de la même famille ne doivent pas inverser leurs
   réflexes : on cherche ses réglages du même côté partout. */
.controls-panel {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--st-line, #26262c);
}

.main-area {
  margin-left: 0;
  margin-right: var(--controls-width);
}

/* ——— Rayon unique du socle ——— */
.header-btn,
.header-select,
.header-file-input,
.header-icon-btn,
.resizable-panel,
.controls-panel select,
.controls-panel input[type="text"],
.controls-panel input[type="number"] {
  border-radius: var(--st-radius, 8px);
}

/* ——— Titres de section, typographie du socle ———
   Mono capitales espacées, comme dans demo-ui.html. */
.controls-title {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-text-3, #6e6e79);
}

.panel-drag-handle {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-text-3, #6e6e79);
}

/* ——— Le nom de l'app, à côté du logo greffé par la barre commune ——— */
.logo-text {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-text-2, #a3a3ad);
  font-weight: 500;
}

/* ——— Focus visible, cohérent avec le socle ——— */
.header-btn:focus-visible,
.header-select:focus-visible,
.header-icon-btn:focus-visible,
.controls-panel input:focus-visible,
.controls-panel select:focus-visible {
  outline: 2px solid var(--st-accent, #e4002b);
  outline-offset: 1px;
}

/* La liste Web TV vit dans l'en-tête : elle suit le même côté que le reste. */
.vs-webtv__liste {
  background: var(--st-surface-2, #16161a);
  border-color: var(--st-line, #26262c);
  border-radius: var(--st-radius, 8px);
}

/* ═══════════════════════════════════════════════════════════════════════
   En-tête et barre d'état — organisation reprise de LevelScope
   ═══════════════════════════════════════════════════════════════════════
   Les commandes étaient alignées à la file, sans hiérarchie : on cherchait
   « où se change la source » à chaque fois. Elles sont désormais réunies en
   groupes étiquetés — Source, Sortie, Outils — comme LevelScope sépare son
   IN de son OUT. L'étiquette est petite et en retrait : elle sert à trouver,
   pas à décorer.
   ═══════════════════════════════════════════════════════════════════════ */

.header-bar {
  gap: 0;
  justify-content: flex-start;
}

.vs-grp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 100%;
  border-left: 1px solid var(--st-line, #26262c);
  flex-shrink: 0;
}
.vs-grp__lbl {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-text-3, #6e6e79);
  margin-right: 2px;
  white-space: nowrap;
}
.vs-grp__sep {
  width: 1px;
  height: 18px;
  background: var(--st-line, #26262c);
  margin: 0 2px;
}
.vs-grp__spacer { flex: 1 1 auto; }

/* Le sélecteur de caméra ne sert que si une entrée locale est choisie :
   il reste visible mais s'efface tant qu'il est inactif. */
.vs-cam { max-width: 130px; }
.vs-cam:disabled { opacity: 0.35; }

/* Le champ de fichier natif est illisible dans un en-tête dense : on le
   masque et on déclenche par une icône, via le <label>. */
.vs-fichier__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.vs-fichier { cursor: pointer; }

.header-icon-btn .st-icon { font-size: 17px; }

/* ——— Barre d'état ——— */
.vs-status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--st-surface, #121215);
  border-top: 1px solid var(--st-line, #26262c);
  font-family: var(--st-font, system-ui, sans-serif);
  font-size: 10px;
  color: var(--st-text-2, #a3a3ad);
  user-select: none;
  overflow: hidden;
}
.vs-status .status-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.vs-status .status-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-text-3, #6e6e79);
}
.vs-status .status-val { color: var(--st-text, #fff); }
/* Colonnes de chiffres : chasse fixe, sinon la barre danse à chaque image. */
.vs-status .status-val.mono {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.vs-status .status-val.dim { color: var(--st-text-3, #6e6e79); }
.vs-status .status-sep {
  width: 1px;
  height: 12px;
  background: var(--st-line, #26262c);
}
.vs-status .status-spacer { flex: 1 1 auto; }
.vs-status .status-val[data-alerte="1"] { color: var(--st-over, #ff4444); }

/* La zone d'instruments laisse la place au pied. */
.main-area,
.controls-panel {
  height: calc(100vh - 52px - 24px);
}

@media (max-width: 1250px) {
  .vs-grp__lbl { display: none; }
  .vs-status .status-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Reprise de l'en-tête et du menu
   ═══════════════════════════════════════════════════════════════════════
   Diagnostic mesuré avant correction : les commandes de l'en-tête avaient
   CINQ hauteurs (18, 21, 23, 25 et 32 px) et cinq lignes de base. Rien
   n'était aligné, d'où l'impression de désordre. Tout passe donc sur une
   hauteur unique de 26 px, centrée par le conteneur.

   L'étiquette de chaîne, elle, était en 16 px bleu vif dans un en-tête qui
   travaille en 10–11 px : elle criait. Elle revient à l'échelle.
   ═══════════════════════════════════════════════════════════════════════ */

:root { --vs-h: 26px; }

.header-bar {
  height: 46px;
  padding: 0;
}

/* ——— Hauteur unique pour tout ce qui se clique ou se saisit ——— */
.vs-grp .header-icon-btn,
.vs-grp .header-btn,
.vs-grp .header-select,
.vs-grp .vs-webtv__input,
.vs-grp .vs-volume,
.vs-grp .vs-fichier {
  height: var(--vs-h);
  min-height: var(--vs-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1;
  border: 1px solid var(--st-line-2, #35353d);
  background: var(--st-raised, #1c1c21);
  color: var(--st-text, #fff);
  border-radius: var(--st-radius, 8px);
}
.vs-grp .header-icon-btn,
.vs-grp .vs-fichier {
  width: var(--vs-h);
  padding: 0;
  flex-shrink: 0;
}
.vs-grp .header-icon-btn:hover,
.vs-grp .vs-fichier:hover { background: var(--st-hover, #26262c); }
.vs-grp .header-icon-btn:disabled { opacity: 0.35; }
.header-icon-btn .st-icon { font-size: 16px; }

.vs-grp .vs-webtv__input {
  justify-content: flex-start;
  text-align: left;
  width: 176px;
  background: var(--st-surface, #121215);
}
.vs-grp .vs-webtv__input::placeholder { color: var(--st-text-3, #6e6e79); }

/* La chaîne en cours : à l'échelle du reste, et sobre. */
.vs-webtv__actif {
  height: var(--vs-h);
  display: inline-flex;
  align-items: center;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--st-text, #fff);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— Curseur de volume, dessiné plutôt que laissé au navigateur ——— */
.vs-grp .vs-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  padding: 0 6px;
  background: var(--st-surface, #121215);
  cursor: pointer;
}
.vs-volume::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--st-line-2, #35353d);
}
.vs-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--st-text, #fff);
  border: 0;
}
.vs-volume::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--st-line-2, #35353d);
}
.vs-volume::-moz-range-thumb {
  width: 10px; height: 10px; border: 0; border-radius: 50%;
  background: var(--st-text, #fff);
}
/* Coupé : la piste s'éteint, le repère reste pour qu'on sache où l'on est. */
.vs-mute[data-muted="1"] ~ .vs-volume::-webkit-slider-thumb {
  background: var(--st-text-3, #6e6e79);
}

.vs-grp {
  padding: 0 10px;
  gap: 5px;
  border-left: 1px solid var(--st-line, #26262c);
}
.vs-grp[data-grp="tools"] { padding-right: 12px; }
.vs-grp__sep { height: 16px; }

.header-left { padding: 0 12px 0 0; }

/* ——— Le menu ———
   Les cases natives du navigateur, bleues et en relief, jurent avec un
   thème sombre d'instrument. On les redessine sur les jetons du socle. */
.controls-panel { padding: 10px 12px; }

.controls-panel input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 1px solid var(--st-line-2, #35353d);
  border-radius: 3px;
  background: var(--st-surface, #121215);
  position: relative;
  cursor: pointer;
  margin: 0 7px 0 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.controls-panel input[type="checkbox"]:hover {
  border-color: var(--st-text-3, #6e6e79);
}
.controls-panel input[type="checkbox"]:checked {
  background: var(--st-info, #4aa3ff);
  border-color: var(--st-info, #4aa3ff);
}
/* Le coche est dessiné, pas un caractère : net à 13 px. */
.controls-panel input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #0a0a0c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.controls-panel input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--st-accent, #e4002b);
  outline-offset: 1px;
}

.control-check {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--st-text, #fff);
  cursor: pointer;
  padding: 3px 0;
}

.controls-panel select,
.controls-panel input[type="text"],
.controls-panel input[type="number"] {
  width: 100%;
  height: 24px;
  padding: 0 7px;
  font-size: 10.5px;
  background: var(--st-surface, #121215);
  border: 1px solid var(--st-line-2, #35353d);
  color: var(--st-text, #fff);
}

/* Curseurs du menu, même dessin que celui du volume. */
.controls-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
}
.controls-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: var(--st-line-2, #35353d);
}
.controls-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px;
  border-radius: 50%; background: var(--st-text, #fff); border: 0;
}

/* Ligne analysée : le curseur et sa lecture sur une seule ligne. */
.control-row--ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
}
.control-row--ligne input[type="range"] { flex: 1 1 auto; }
.control-readout {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--st-info, #4aa3ff);
}

/* Commandes du radar : trois contrôles sur une ligne, sans les écraser. */
.control-row--loudness {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0 6px;
}
.control-row--loudness select { flex: 1 1 auto; min-width: 0; }
.control-btn {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 9px;
  font-family: var(--st-font, system-ui, sans-serif);
  font-size: 10.5px;
  border: 1px solid var(--st-accent-line, rgba(228, 0, 43, 0.34));
  border-radius: var(--st-radius, 8px);
  background: transparent;
  color: var(--st-accent-text, #ff4152);
  cursor: pointer;
}
.control-btn:hover { background: var(--st-accent-soft, rgba(228, 0, 43, 0.16)); }

/* ═══════════════════════════════════════════════════════════════════════
   Panneau de réglages — masqué, ouvert à la demande
   ═══════════════════════════════════════════════════════════════════════
   Il occupait 260 px en permanence, pris sur les instruments. Il glisse
   maintenant depuis la droite, comme le panneau de NewsGrid, et la zone de
   mesure récupère toute la largeur.

   Il RECOUVRE au lieu de pousser : pousser redimensionnerait les douze
   toiles à chaque image de l'animation, ce qui coûte cher pour un panneau
   qu'on ouvre trois secondes. Dans NewsGrid la poussée se justifie — on y
   surveille des flux en continu ; ici on vient régler puis on referme.
   ═══════════════════════════════════════════════════════════════════════ */

.controls-panel {
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
body.vs-menu-open .controls-panel { transform: none; }

/* La zone d'instruments prend toute la largeur : le panneau ne la mange plus. */
.main-area { margin-right: 0; }

/* Voile discret : il signale que le panneau est modal sans masquer la mesure. */
#vsMenuVoile {
  position: fixed;
  inset: 52px 0 24px 0;   /* sous l'en-tête, au-dessus de la barre d'état */
  z-index: 95;
  background: rgba(2, 6, 23, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
body.vs-menu-open #vsMenuVoile { opacity: 1; visibility: visible; }

#menuToggle[aria-expanded="true"] {
  background: var(--st-hover, #26262c);
  color: var(--st-info, #4aa3ff);
}

@media (prefers-reduced-motion: reduce) {
  .controls-panel { transition: none; }
  #vsMenuVoile { transition: none; }
}

/* ——— Logo de l'application ———
   La flèche de retour faisait double emploi : le logo StudioTools greffé par
   l'appbar ramène déjà au catalogue, et deux chemins de retour côte à côte
   n'aident personne. À sa place, l'icône de l'application, comme le « tv »
   de NewsGrid — même bibliothèque, même taille, même couleur d'accent. */
.vs-logo__icone {
  font-size: 17px;
  line-height: 1;
  color: var(--st-accent-text, #ff4152);
  flex-shrink: 0;
}