/* ===========================================================================
   Boutique de connexions — feuille de style PARTAGÉE par /app et /admin.

   Pendant de `shared/store.js` : le module rend le MÊME markup sur les deux
   surfaces, ces règles l'habillent donc au même endroit (une rangée qui change
   ici change partout). Rien de spécifique à une surface : seuls les JETONS de
   thème sont lus, et chacun avec un repli pour la console admin, dont la
   palette ne porte pas les variables « verre » de Crystal :
     --glass-brd  → --border        (filet entre rangées)
     --dur        → .18s            (durée de transition)
     --radius-pill→ 999px           (badges)
     --card2      → --panel2        (fond des champs de la modale)
   Les primitives propres à chaque surface (boutons `.cta`, vitre `.glass`)
   restent définies par sa feuille : c'est sa peau, pas la boutique.
   =========================================================================== */

/* LISTE compacte (pas une grille de cartes). Groupes → titres discrets ; rangées
   denses posées sur une vitre, séparées par des filets fins. La barre d'outils
   (recherche + chips) coiffe les résultats ; ceux-ci gardent l'écart entre
   groupes. */
.store-list{display:flex;flex-direction:column;gap:18px}
.store-results{display:flex;flex-direction:column;gap:26px}

/* Barre d'outils : recherche plein-texte + filtre par catégorie (rendue par
   shared/store.js). Sans elle, ~200 fiches sont inutilisables (GOAL). Mêmes
   jetons de thème que le reste, avec repli pour la console admin. */
.store-toolbar{display:flex;flex-direction:column;gap:12px}
.store-search{
  width:100%;padding:12px 16px;border-radius:14px;font:inherit;font-size:15px;
  background:var(--card2, var(--panel2));border:1px solid var(--border);color:var(--txt);
  transition:border-color var(--dur, .18s) var(--ease),box-shadow var(--dur, .18s) var(--ease);
}
.store-search::placeholder{color:var(--muted)}
.store-search:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.store-chips{display:flex;flex-wrap:wrap;gap:8px}
.store-chip{
  padding:7px 13px;border-radius:var(--radius-pill, 999px);font:inherit;font-size:13px;font-weight:600;
  background:var(--card2, var(--panel2));border:1px solid var(--glass-brd, var(--border));
  color:var(--muted);cursor:pointer;
  transition:background var(--dur, .18s) var(--ease),color var(--dur, .18s) var(--ease),
             border-color var(--dur, .18s) var(--ease);
}
.store-chip:hover{color:var(--txt)}
.store-chip.active{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
/* Filtre sans résultat : message discret, jamais un écran vide muet. */
.store-empty{color:var(--muted);font-size:14px;text-align:center;padding:32px 8px}
.store-group{display:flex;flex-direction:column}
.store-grp-title{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 4px 10px;
}
.store-rows{overflow:hidden;padding:0}
.store-row{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:12px 16px;min-height:56px;
  border-bottom:1px solid var(--glass-brd, var(--border));   /* filet fin entre rangées */
  transition:background var(--dur, .18s) var(--ease);
}
.store-row:last-child{border-bottom:0}
.store-row.clickable{cursor:pointer}
.store-row.clickable:hover{background:color-mix(in srgb,var(--txt) 5%,transparent)}
.store-row.on .store-ico{color:var(--ok)}
.store-ico{
  display:grid;place-items:center;width:34px;height:34px;flex:none;color:var(--txt);
}
/* Taille de l'icône/gemme = celle passée à l'adaptateur `icon(nom, N)` de l'hôte —
   pas de re-dimensionnement CSS (l'attribut SVG et --gem-sz inline font foi). */
.store-row-main{flex:1 1 auto;min-width:0}
.store-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.store-row-head h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.store-row-desc{
  color:var(--muted);font-size:13px;margin:2px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.store-row-foot{flex:none}
.store-row-foot .cta.small{min-height:44px}      /* cible tactile ≥44px (GOAL §3bis) */
.store-badge{
  display:inline-block;padding:2px 9px;border-radius:var(--radius-pill, 999px);
  font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent);
}
.store-badge.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
/* Jeton OAuth expiré/en erreur : badge « Expiré » teinté du jeton d'alerte,
   avec repli --danger pour la console admin qui ne porte pas --warn de Crystal. */
.store-badge.warn{background:color-mix(in srgb,var(--warn, var(--danger)) 16%,transparent);color:var(--warn, var(--danger))}
/* Erreur en place sous une rangée (échec de lancement du consentement OAuth). */
.store-err{color:var(--danger);font-size:12.5px;margin:4px 0 0}
.store-err[hidden]{display:none}
/* Fiche OAuth : les rangées d'instance portent plusieurs actions — laisse-les
   s'aligner sans casser la cible tactile. */
.store-row-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Rangée enfant d'une instance connectée (multi-instances) : légèrement en
   retrait et teintée pour se rattacher visuellement à la fiche parente. */
.store-instance{padding-left:34px;background:color-mix(in srgb,var(--txt) 2.5%,transparent)}
.store-instance .store-ico{width:28px;height:28px}
.store-instance .store-row-head h3{font-size:14px;font-weight:500}

/* Formulaire de secret de la modale de connexion (rendu par `secretFields`) :
   le module pose `.sm-lbl` / `.sm-note` / `.sm-field`, jamais la classe `.field`
   d'une surface — elle désigne un champ chez Crystal et un CONTENEUR de champ
   dans la console admin. */
.sm-lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.sm-note{font-size:13px;color:var(--muted);line-height:1.45}
.sm-field{
  width:100%;margin-top:2px;padding:13px 16px;border-radius:14px;font:inherit;font-size:15px;
  background:var(--card2, var(--panel2));border:1px solid var(--border);color:var(--txt);
  transition:border-color var(--dur, .18s) var(--ease),box-shadow var(--dur, .18s) var(--ease);
}
.sm-field::placeholder{color:var(--muted)}
.sm-field:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}