/* ═══════════════════════════════════════════════════════════════════════════
   LA ESCALA DEL CIELO · cuántas estrellas caben en un brillo de fondo

   Seis lecturas reales de la red de fotómetros del Cabildo y, al lado de cada
   una, cuántas estrellas del catálogo quedan por encima del límite que ese
   brillo impone. Es la misma cuenta que hace la aplicación y la misma que fija
   `src/lib/stars/catalog.test.ts`, que existe precisamente para que estas seis
   cifras no se queden mintiendo si el catálogo cambia.

   POR QUÉ UNA BARRA Y NO UNA TABLA. Porque el argumento no son los números, es
   la DISTANCIA entre ellos: del peor punto de la red al Roque no se multiplica
   por dos ni por diez, se multiplica por noventa y cinco. Una tabla de seis
   filas deja eso en letra pequeña; seis barras lo enseñan sin leer nada.

   Las barras reutilizan `.barra` de `secciones.css` y su `data-barra`, que ya
   sabe animarse al entrar en pantalla desde `revelar.js`. No hacía falta un
   mecanismo nuevo para dibujar una escala más.
   ═══════════════════════════════════════════════════════════════════════════ */

.escala-cielo{
  margin:0;border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;background:rgba(20,19,17,.88);
}

.escala-hd{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line-soft);
  background:rgba(8,10,18,.6);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-faint);
}
.escala-hd b{color:var(--amber);font-weight:600;letter-spacing:.1em}

.sqm{
  display:grid;gap:.4rem .9rem;align-items:center;
  padding:.8rem 1.1rem;border-top:1px solid var(--line-soft);
}
.sqm:first-of-type{border-top:0}
/* Cuatro columnas en cuanto caben: el brillo medido, dónde se midió, la barra
   y la cuenta. Por debajo de 720 px la barra pasa a ocupar la línea entera,
   que es la única de las cuatro que no se puede encoger sin dejar de decir
   nada. */
@media (min-width:720px){
  .sqm{grid-template-columns:5.2rem minmax(0,10rem) minmax(0,1fr) 5.4rem}
}

.sqm-brillo{
  font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--amber);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.sqm-sitio{font-size:.85rem;color:var(--fg-dim)}
/* `.barra` viene de `secciones.css` con `flex:none` y un ancho tope de 150 px,
   que es lo que le toca al lado de una fila del panel del modelo. Aquí la barra
   ES el argumento —la escala se lee de un vistazo o no se lee— así que ocupa
   toda su columna y engorda de 3 a 5 px. */
.sqm .barra{margin:0;flex:1 1 auto;width:auto;max-width:none;height:5px}
.sqm-cuenta{
  font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--fg);
  font-variant-numeric:tabular-nums;text-align:left;
}
@media (min-width:720px){.sqm-cuenta{text-align:right}}
.sqm-cuenta small{display:block;font-size:.55rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-top:.15rem}

/* La fila del Roque es el techo de la escala y se marca como tal: es el dato
   que explica por qué el observatorio está donde está. */
.sqm--techo{background:rgba(226,180,92,.05)}
.sqm--techo .sqm-sitio{color:var(--fg)}

.escala-pie{
  padding:.95rem 1.1rem;border-top:1px solid var(--line-soft);
  background:rgba(8,10,18,.45);
  font-size:.88rem;color:var(--fg-faint);margin:0;
}
.escala-pie b{color:var(--fg-dim)}

/* ── lo que además se dibuja arriba ──────────────────────────────────────── */
/* Cuatro piezas del cielo que no son estrellas sueltas. Rejilla llana, sin
   caja: la caja ya la tiene la escala de al lado y dos cajas seguidas hacen
   que la sección parezca un formulario. */
.cielo-piezas{display:grid;gap:1.6rem;margin-top:clamp(2rem,5vh,3rem)}
@media (min-width:760px){.cielo-piezas{grid-template-columns:repeat(2,1fr);gap:2rem 2.4rem}}
@media (min-width:1100px){.cielo-piezas{grid-template-columns:repeat(4,1fr)}}
.cielo-pieza{position:relative;padding-top:1.15rem;border-top:1px solid var(--line-soft)}
.cielo-pieza::before{content:"";position:absolute;top:-1px;left:0;width:2rem;height:1px;background:var(--amber)}
.cielo-pieza h3{margin-bottom:.6rem;font-size:1rem}
.cielo-pieza p{font-size:.9rem;margin:0}