/* Outil · Mots de passe (Passwords) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cd-
   En haut, centré : les onglets. Deux colonnes : à gauche le résultat (cadre de hauteur fixe, lignes en mono ; toucher une
   ligne la copie), une ligne d'infos, Copier et Régénérer ; à droite les réglages de l'onglet (grisés quand ils ne servent pas). */
.cd .outil-fixe { align-items: stretch; }
.cd-haut { display: flex; justify-content: center; }
.cd-haut .seg { width: min(100%, 420px); }
.cd-haut .seg button { padding-inline: 6px; }
@media (min-width: 960px) {
  .cd.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .cd-haut { grid-column: 1 / -1; margin-top: 4px; }
}
.cd-resultat { flex: none; height: 260px; margin: 0; padding: 14px 10px; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; list-style: none;
  background: rgba(242, 240, 235, .025); box-shadow: inset 0 0 0 1px var(--filet-doux); display: flex; flex-direction: column; justify-content: center; }
.cd-resultat.liste { justify-content: flex-start; }
.cd-resultat li { padding: 8px 10px; border-radius: 8px; cursor: copy; text-align: center; overflow-wrap: break-word;
  font: 500 15px/1.45 var(--mono); letter-spacing: .02em; color: var(--papier); transition: background .2s var(--courbe); }
.cd-resultat li:hover { background: rgba(242, 240, 235, .05); }
.cd-resultat.grand li { font-size: 19px; }
.cd-resultat.liste li { font-size: 13.5px; padding: 6px 10px; }
.cd-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.cd-jauge { display: flex; gap: 4px; justify-content: center; height: 4px; margin-top: -8px; }
.cd-jauge i { width: 36px; border-radius: 2px; background: var(--filet); transition: background .3s var(--courbe); }
.cd-jauge i.plein { background: var(--papier); }
.cd-jauge.cache { visibility: hidden; }
.cd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cd-actions .pastille { cursor: pointer; }
.cd-actions .pastille:hover { translate: none; }
.cd-reglages { display: none; flex-direction: column; gap: 22px; }
.cd[data-onglet="mdp"] [data-reglages="mdp"], .cd[data-onglet="chiffres"] [data-reglages="chiffres"], .cd[data-onglet="uuid"] [data-reglages="uuid"] { display: flex; }
.cd-grise { opacity: .3; pointer-events: none; }
.cd-note { margin: 0; font: 400 13px/1.5 var(--corps); color: var(--texte2); }
/* Téléphone : la page part du haut (les onglets n'ont pas tous autant de réglages : centrée, elle bougerait) */
@media (max-width: 959px) { .cd.outil-page { justify-content: flex-start; } }