/* ------------------------------------------------------------------
   tendon-micro.css — la vue microscopique du tendon (tendon-micro.js) :
   le fondu de la plongée, la barre de commandes, la légende et l'échelle,
   posés sur la scène (#stage) de n'importe quelle maquette.
------------------------------------------------------------------ */

/* fondu : il cache le passage d'une scène à l'autre */
.tm-fade {
  position: absolute; inset: 0; z-index: 5;
  background: #1b2529; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.tm-fade.is-on { opacity: 1; }

/* pendant la vue, ce qui appartient à la maquette se retire */
#stage.is-micro #labels,
#stage.is-micro #ann-labels,
#stage.is-micro #stage-chips { display: none; }
#app:has(#stage.is-micro) #panel { pointer-events: none; opacity: .5; transition: opacity .3s; }

/* barre de commandes, en bas de la scène */
.tm-bar {
  position: absolute; left: 16px; bottom: 16px; z-index: 7;
  max-width: calc(100% - 32px);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); backdrop-filter: blur(8px);
  animation: tm-in .4s ease-out;
}
.tm-bar .ctl-btn { width: auto; margin: 0; white-space: nowrap; }
.tm-bar .switch { padding: 6px 0; }
.tm-back { font-weight: 600; }

/* jauge des années : le nom de chaque cran au-dessus de la piste
   (même dessin que les jauges à crans des maquettes) */
.tm-years { width: 300px; max-width: 100%; }
.tm-field { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tm-range { width: 100%; margin: 0; display: block; }
.tm-ticks { display: flex; justify-content: space-between; padding: 0 8px; margin-top: -3px; pointer-events: none; }
.tm-ticks i { display: block; width: 2px; height: 6px; border-radius: 1px; background: var(--border-2); }
.tm-tick-labels { position: relative; height: 16px; margin: 4px 0 -2px; pointer-events: none; }
.tm-tick-labels span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap;
}
.tm-tick-labels span:first-child { transform: translateX(-9px); }
.tm-tick-labels span:last-child { transform: translateX(calc(-100% + 9px)); }
.tm-tick-labels span.is-active { color: var(--accent); font-weight: 600; }

/* légende, en haut à gauche */
.tm-legend {
  position: absolute; left: 16px; top: 16px; z-index: 7;
  margin: 0; padding: 8px 12px; list-style: none;
  display: grid; gap: 4px;
  font-size: 12.5px; color: #eef3f4;
  background: rgba(16, 24, 27, .55); border-radius: 10px;
  backdrop-filter: blur(4px);
  animation: tm-in .4s ease-out;
}
.tm-legend li { display: flex; align-items: center; gap: 8px; }
.tm-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

/* échelle : 50 µm à la distance regardée */
.tm-scale {
  position: absolute; left: 16px; bottom: 150px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-size: 12px; color: #eef3f4; pointer-events: none;
}
.tm-scale i { display: block; height: 3px; background: #eef3f4; border-radius: 2px; }

@keyframes tm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* tablette et téléphone : la carte occupe le bas, la barre monte en haut */
@media (max-width: 900px) {
  .tm-bar { top: 12px; bottom: auto; left: 12px; right: 12px; max-width: none; padding: 10px 12px; gap: 8px 12px; }
  .tm-years { width: 100%; }
  .tm-legend { top: auto; bottom: 50%; left: 12px; }
  .tm-scale { bottom: auto; top: 50%; left: auto; right: 16px; align-items: flex-end; }
}
/* téléphone : barre en haut, carte en bas, le vaisseau entre les deux — la
   légende et l'échelle le cacheraient */
@media (max-width: 520px) {
  .tm-legend, .tm-scale { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-fade { transition: none; }
  .tm-bar, .tm-legend { animation: none; }
}