/* La page Recycleur (recycleur.html) : le cadre de Craft (tools-craft.css, classes ck-), et ce qui lui est propre. */

/* Les ressources à obtenir, dans la colonne de gauche : leur icône à la place de celle du rayon ; la liste est longue,
   elle défile en elle-même */
.ry .ck-cats {
  max-height: calc(100vh - var(--head) - var(--banner, 0px) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.ry .ck-cats .ry-res {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  padding: 6px 14px;
}
.tools-panel .ry-res .ck-ic img,
.tools-panel .ry-res .ck-ic .is-empty {
  width: 26px;
  height: 26px;
}

/* Les objets : sous le titre, ce que dit la grille ; en cherchant une ressource, ce qu'en rend un exemplaire */
.ry-hint {
  margin: -4px 0 12px;
  color: var(--text-soft);
  font-size: 0.9rem;
}
.ry-gain {
  color: var(--state-ok);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
}
.ck-tile.is-on .ry-gain {
  color: var(--gold);
}

/* La fiche : l'état, les quantités (une ou l'autre, et la moyenne), la ressource cherchée marquée */
.ry-wear {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
}
.ry-wear input {
  accent-color: var(--gold);
}
.ry-wear b {
  color: var(--cream);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
  text-align: right;
}
.ry-amount {
  display: grid;
  justify-items: end;
}
.ry-amount small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ck-res li.is-wanted {
  padding-inline: 8px;
  border-left: 3px solid var(--gold);
  background: var(--picked-bg);
}

/* La couleur du recycleur (comme en jeu) ; alimenté : un éclair de miel autour */
.ry-type {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.ry-type.is-green {
  background: #6fa03a;
}
.ry-type.is-yellow {
  background: #d9a93a;
}
.ry-type.is-red {
  background: #b84a35;
}
.ry-type.is-grid {
  box-shadow: 0 0 0 2px #141110, 0 0 0 3px var(--gold);
}
.ry-craft {
  display: inline-flex;
  gap: 8px;
  margin-top: 14px;
}

/* Où les trouver : les monuments de la carte du wipe */
.ry-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 18px;
  margin: 8px 0 10px;
  padding: 0;
  list-style: none;
}
.ry-places li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(var(--sheen-rgb), 0.04);
}
.ry-places i {
  color: var(--gold);
}
.ry-places b {
  color: var(--cream);
  font-family: "Roboto Condensed", sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  #ry-items.is-entering .ck-tile,
  #ry-sheet.is-entering .ck-res li {
    animation: rise-in 0.28s ease both;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
}
@media (max-width: 1180px) {
  .ry .ck-cats {
    max-height: none;
    overflow-y: hidden;
  }
}
.ry .ck-seg button i {
  margin-right: 6px;
}
@media (max-width: 760px) {
  /* Un seul choix sur la ligne (Craft en a deux côte à côte) : toute la largeur */
  .ry .ck-setup__pick {
    grid-column: 1 / -1;
  }
  .ry .ck-setup__pick,
  .ry .ck-setup__pick .rd-catpick,
  .ry .ck-setup__pick select {
    width: 100%;
  }
}