/* PROVA (ramo prova-metro): il metro a destra e i nomi delle sezioni che volano.
   Il metro misura la pagina da 0 a 24 ore («da mesi a 24 ore»). Script: modules/metro.js */
:root { --metro: 56px; }
body.con-metro { padding-right: var(--metro); }

.metro { position: fixed; top: 0; bottom: 0; right: 0; width: var(--metro); z-index: 900; overflow: hidden;
  background: var(--c-bg); border-left: 1px solid var(--c-line); cursor: crosshair; }
.metro-nastro { position: absolute; left: 0; right: 0; top: 0; will-change: transform;
  background-image: repeating-linear-gradient(to bottom, var(--c-text-subtle) 0 1px, transparent 1px 20px);
  background-size: 12px 100%; background-repeat: no-repeat; background-position: right top; }
.metro-tacca { position: absolute; right: 0; display: flex; align-items: center; gap: 4px; transform: translateY(-50%);
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 10px; color: var(--c-text-subtle); font-variant-numeric: tabular-nums; }
.metro-tacca::after { content: ""; width: 22px; height: 1px; background: var(--c-text-muted); }
.metro-segno { position: absolute; left: 0; right: 0; top: 34%; border-top: 1px solid var(--c-coral); z-index: 2; }
.metro-segno span { position: absolute; right: 3px; top: 3px; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 9px;
  color: var(--c-coral); background: var(--c-bg); padding: 0 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metro-scala { position: absolute; top: 8px; right: 4px; z-index: 3; background: var(--c-bg); font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 9px; color: var(--c-text-subtle); letter-spacing: .06em; }

.metro-volo { position: fixed; inset: 0; pointer-events: none; z-index: 899; transition: opacity .25s; }
.metro-volo span { position: fixed; left: 0; top: 0; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; line-height: 1;
  transform-origin: 0 0; will-change: transform, opacity; white-space: pre; opacity: 0; text-shadow: 0 2px 12px rgba(10, 18, 40, .55); }
.metro-misura { position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; font-family: var(--font-heading); font-weight: 600;
  text-transform: uppercase; line-height: 1; white-space: nowrap; }
.metro-indice { position: fixed; right: calc(var(--metro) + 20px); top: 100px; z-index: 898; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.metro-indice a { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; font-size: 16px; line-height: 1; color: transparent; text-decoration: none; padding: 2px 0; }
.metro-sopra { position: fixed; right: calc(var(--metro) + 20px); top: 16px; z-index: 899; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 11px; letter-spacing: .2em; color: var(--c-text-subtle); text-transform: uppercase; opacity: 0; transition: opacity .3s; text-shadow: 0 1px 8px rgba(10, 18, 40, .6); }
.metro-sopra.si { opacity: 1; }

@media (max-width: 760px) {
  :root { --metro: 26px; }
  .metro-tacca { font-size: 8px; gap: 0; }
  .metro-tacca b { display: none; }
  .metro-tacca::after { width: 12px; }
  .metro-segno span { right: auto; left: 1px; font-size: 8px; }
  .metro-scala, .metro-indice, .metro-sopra { display: none; }
}
@media print { .metro, .metro-volo, .metro-indice, .metro-sopra { display: none; } body.con-metro { padding-right: 0; } }