/* Outil · Coût et production (3D print cost) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pi-
   À gauche : trois vues empilées dans la même case (une pièce, série, bobine) : le grand chiffre, sa légende, les lignes ;
   la note sur les repères ; le lien Filaments. À droite : l'onglet, son panneau (les trois empilés). Un champ commun à deux
   onglets (poids, échecs) est le même réglage. */
.pi .outil-fixe { align-items: stretch; }
.pi-vues { display: grid; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.pi-vue { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pi-vue[hidden] { display: flex; visibility: hidden; }
.pi-grand { height: 1.15em; font: 700 46px/1.15 var(--display); letter-spacing: -.03em; color: var(--papier); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pi-sous { height: 1.3em; margin-bottom: 6px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.pi-ligne { height: 42px; cursor: default; }
.pi-ligne .val { color: var(--papier); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-fort .val { color: var(--peche); }
.pi-alerte .val { color: var(--orange); }
.pi-info { margin: 0; text-wrap: balance; }
.pi-liens { display: flex; justify-content: center; }
.pi-panneaux { display: grid; }
.pi-panneau { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; }
.pi-panneau[hidden] { display: flex; visibility: hidden; }
.pi-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.pi-duree { display: flex; flex-direction: column; }
.pi-duree > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi-duree .champ > span { display: none; }
.pi-puces { flex-wrap: wrap; }
.pi-puces .puce { cursor: pointer; }
@media (max-width: 959px) {
  .pi-grand { font-size: 38px; }
}