/* Outil · Topologie (Topology) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : tp- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : le schéma et son info, puis les options. Ordinateur : le schéma à gauche (taille fixe), les options à droite. */
.tp .outil-fixe { align-items: stretch; }

/* Le dessin : toujours le même carré, rempli ; seuls les points et le milieu changent */
.tp-zone { width: min(100%, 340px); aspect-ratio: 1; align-self: center; display: grid; place-items: center; }
@media (min-width: 960px) { .tp-zone { width: min(100%, 46vh, 420px); } }
.tp-zone svg { display: block; width: 100%; height: 100%; }
/* Hauteur fixe (4 lignes, la note la plus longue) : le schéma et les options ne bougent jamais quand le texte change */
.tp-note { height: 4lh; text-wrap: balance; }

/* Les couleurs, opaques (la lumière du fond ne passe pas à travers) : une couleur = un sens.
   Face : encre. Arêtes : papier. Flux (chemins de coupe, Ctrl + R) : jaune. Triangle : orange franc.
   Trou : noir. Point ordinaire : papier, petit. Pôle (3 ou 5 arêtes) : orange, plus gros. */
.tp { --tp-face: #221e1b; --tp-triangle: #b4421a; }
.tp-face { fill: var(--tp-face); }
.tp-trou { fill: var(--noir); }
.tp-arete { fill: none; stroke: rgba(242, 240, 235, .75); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Le flux : les chemins de coupe (Ctrl + R), en jaune comme dans Blender, trait plein et un peu transparent (discret),
   par-dessus les arêtes */
.tp { --tp-flux: #ffd23f; }
.tp-flux { fill: none; stroke: var(--tp-flux); stroke-opacity: .55; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tp-point { fill: var(--papier); }
.tp-pole { fill: var(--orange); }

/* Les deux modes : le sélecteur en haut des options, les réglages du mode choisi dessous */
.tp-modes { width: 100%; }
.tp-panneau { display: flex; flex-direction: column; gap: 22px; }
.tp-panneau[hidden] { display: none; }
.tp-inactif { opacity: .35; pointer-events: none; }

/* Cercle : le triangle inévitable en surbrillance */
.tp-tri { fill: var(--tp-triangle); }

/* Règle graduée : le curseur du kit, et ses crans dessous (un trait par nombre, le nombre écrit) ;
   cercle : seuls les multiples de 4 sont écrits, en pêche (ils tiennent dans un carré) */
.tp-crans { grid-column: 1; position: relative; height: 22px; margin: -2px 9px 0; }
.tp-crans i { position: absolute; top: 0; translate: -50% 0; padding-top: 9px; font: 500 11px/1 var(--mono); font-style: normal; color: var(--texte2); }
.tp-crans i::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 5px; background: var(--filet); }
.tp-crans i.ecrit::before { height: 6px; background: var(--texte2); }
.tp-crans i.quatre { color: var(--peche); }
.tp-crans i.quatre::before { background: var(--peche); }

/* La légende : fixe, la même dans les deux modes */
.tp-legende { margin: -8px 0 0; display: flex; justify-content: center; gap: 18px; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.tp-legende span { display: inline-flex; align-items: center; gap: 7px; }
.tp-legende i { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--filet); }
.tp-l-pole { border-radius: 50% !important; background: var(--orange); box-shadow: none !important; width: 9px !important; height: 9px !important; }
.tp-l-boucle { width: 22px !important; height: 2px !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--tp-flux); opacity: .55; }
.tp-l-triangle { background: var(--tp-triangle); }
/* Flux masqué : sa légende s'efface (sans bouger les autres) */
.tp-legende .tp-eteint { opacity: .3; }