/* Commerces. Remplace la liste de l'ecran des commerces (le bloc 140 garde
   `.site-nav__shop`, que la navigation utilise, et n'est donc pas retire).

   Ce que ce bloc change, par rapport a `.shop-list`:

   - Ouvrir un commerce vient en premier, sur une ligne, au lieu d'un
     formulaire sous la liste. C'est le geste du premier jour, et ce jour-la la
     liste est vide.
   - Les actions d'une ligne tiennent sur un rail a droite, toujours visible,
     dans un ordre fixe: l'action reversible en discret, l'action qui navigue
     en pleine.
   - Renommer se fait dans la ligne, sous le nom qui reste affiche, et non dans
     un panneau qui se deplie ailleurs.
   - Le commerce courant porte un filet sur sa tranche et une surface teintee,
     pas seulement une pastille: il doit se trouver sans lire.

   L'etat courant se lit sur `aria-current`, jamais sur une classe: l'attribut
   porte deja l'information pour la technologie d'assistance, et une classe en
   plus serait une seconde verite libre de diverger. */

/* C'est la largeur de la LIGNE qui decide quand le rail passe dessous, pas
   celle de la fenetre: cet ecran est rendu dans un panneau etroit, et une
   requete sur la fenetre laisserait le rail passer a la ligne tout en gardant
   sa place a droite, ce qui creuse un vide en L. */
.shop-board { display: flex; flex-direction: column; gap: 1.5rem; container-type: inline-size; }

/* La barre de creation. `align-items: flex-end` pose le bouton sur la ligne de
   base du champ plutot que de le faire flotter au-dessus. */
.shop-board__new {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.shop-board__new-field { flex: 1 1 16rem; min-width: 0; }

.shop-board__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}

/* Un filet, pas une carte: le panneau reste seul proprietaire de la surface.
   Le rail transparent est declare ici pour que devenir le commerce courant ne
   decale rien lateralement. */
.shop-board__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.shop-board__row:hover { border-color: var(--line-strong); }

.shop-board__row[aria-current="true"] {
  background: var(--sunk);
  border-left-color: var(--accent);
}

.shop-board__label { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; order: 1; }

.shop-board__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-weight: 600;
}

.shop-board__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  order: 3; margin-left: auto;
}

/* Renommer sur place. Le `details` est un enfant de la LIGNE, pas du rail: il
   lui faut une ligne pleine largeur pour poser son champ, et dans le rail
   cette base etirait le rail lui-meme et poussait son voisin sur une
   troisieme ligne. */
.shop-board__rename { order: 2; min-width: 0; }
.shop-board__rename > summary { list-style: none; cursor: pointer; }
.shop-board__rename > summary::-webkit-details-marker { display: none; }

/* Ouvert, il passe sous le rail et prend toute la largeur: le nom et l'action
   qui navigue restent sur la premiere ligne, et le champ se pose sous le nom
   qu'il renomme. */
.shop-board__rename[open] {
  order: 4; flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem;
}

.shop-board__rename[open] > summary { color: var(--accent); border-color: var(--accent); }

.shop-board__rename-form {
  flex: 1 1 16rem; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem;
}

.shop-board__rename-form .field { flex: 1 1 12rem; min-width: 0; }

/* L'etat vide nomme le resultat et donne le geste suivant, et ce geste est la
   barre de creation juste au-dessus. */
.shop-board__empty {
  margin: 0;
  padding: 1.5rem 1rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  border: 1px dashed var(--line-strong);
  border-radius: 0.5rem;
  text-wrap: pretty;
}

@container (max-width: 30rem) {
  /* Sous la largeur ou un nom et deux boutons partagent une ligne, le rail
     devient une ligne pleine sous le nom plutot qu'un ilot a droite avec du
     vide a cote. */
  .shop-board__row { align-items: flex-start; }
  .shop-board__actions { margin-left: 0; width: 100%; }
  .shop-board__actions > * { flex: 1 1 auto; }
}