/* ===========================================================================
   Size It Up - feuille des pages de bande (scale/).
   Chargee apres css/corpus.css, dont elle reprend la scene et le tableau.
   Ce qui est propre a une bande : une rangee ou une pile de silhouettes au
   lieu de deux, un trait de reperage, et un numero par silhouette qui renvoie
   au tableau. Aucune couleur en dur : tout passe par les jetons du theme.
   =========================================================================== */

/* --- Scene : plusieurs silhouettes, une seule echelle --------------------- */

/* La scene d'une bande peut etre large : sur un ecran etroit elle se fait
   defiler plutot que de reduire les silhouettes jusqu'a l'illisible. */
.siu-sc-stage {
  padding-bottom: .5rem;
}

.siu-sc-stage .siu-cx-svg {
  min-width: 0;
}

/* Les silhouettes alternent les deux encres du jeu : c'est ce qui permet de
   distinguer deux voisines qui se touchent presque. */
.siu-sc-shape-a {
  fill: var(--primary);
}

.siu-sc-shape-b {
  fill: var(--reference-ink);
}

/* --- Trait de reperage ---------------------------------------------------- */

/* Le reperage de la bande : 2 m sur une page de 2 m. Il coupe la rangee la ou
   la mesure tombe, donc il montre d'un coup qui depasse et qui non. */
.siu-sc-mark {
  stroke: var(--muted-foreground);
  stroke-width: 2;
  stroke-dasharray: 8 7;
  opacity: .7;
}

.siu-sc-marklabel {
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--muted-foreground);
}

/* --- Numeros de rang ------------------------------------------------------ */

/* Le meme numero figure dans le dessin et dans la premiere colonne du
   tableau : c'est la legende, sans avoir a poser douze etiquettes de texte
   dans une rangee ou elles ne tiendraient pas. */
.siu-sc-num {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--muted-foreground);
}

/* --- Tableau d'une bande -------------------------------------------------- */

/* Six colonnes tiennent mal a 360 px : la colonne de rang se resserre et le
   tableau garde le defilement horizontal que corpus.css lui donne deja. */
.siu-sc-page .siu-cx-table td:first-child {
  width: 2.25rem;
  padding-right: 0;
  color: var(--muted-foreground);
}

/* Les noms ne sont pas coupes en plein milieu : ils passent a la ligne sur
   leurs espaces, et le tableau garde son defilement si cela l'elargit. */
.siu-sc-page .siu-cx-table th[scope="row"] {
  hyphens: none;
}

/* --- Corps de page -------------------------------------------------------- */

/* Une bande porte un tableau large et une scene large : elle est un peu plus
   large que la colonne d'un guide, sans depasser la largeur de lecture. */
.siu-sc-page {
  max-width: 74ch;
}

.siu-sc-page .siu-prose {
  margin-top: 2rem;
}

@media (max-width: 599px) {
  .siu-sc-marklabel {
    font-size: 26px;
  }

  .siu-sc-num {
    font-size: 24px;
  }

  /* Une rangee de douze silhouettes ramenee a 330 px ne se lit plus. Sur un
     telephone elle garde sa taille et se fait defiler, comme le tableau. */
  .siu-sc-stage--row {
    overflow-x: auto;
  }

  .siu-sc-stage--row .siu-cx-svg {
    min-width: 480px;
  }
}