/**
 * Les briques cliquables, communes aux trois vues : boutons, pastilles de filtre,
 * groupes de marqueurs, zoom, sélecteur de rôles, icônes de sort et affixes.
 */

/* ---------- Filtres ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  /* Collée en haut du panneau : bornée par .tl-wrap, elle s'arrête avec la frise.
     Tout l'espace qu'elle survole est du rembourrage, pas de la marge : marges du
     panneau reprises en haut et sur les côtés, gouttière du bas comprise. Sans quoi
     la frise se voit défiler au-dessus des chips et entre eux et les rôles. Les 2 px
     du haut évitent le liseré que laisse un arrondi de sous-pixel. */
  position: sticky;
  top: calc(-1 * var(--pane-pad) - 2px);
  z-index: 30;
  background: var(--bg);
  margin: 4px calc(-1 * var(--pane-padx)) 0;
  padding: calc(var(--pane-pad) + 8px) var(--pane-padx) 12px;
}
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  transition: all 0.12s;
}
.fchip .sw {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: currentColor;
}
.fchip:not(.on) .sw {
  opacity: 0.35;
}
.fchip.on {
  color: var(--fg);
  border-color: var(--line-hot);
  background: var(--raise);
}
.fchip .n {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.65;
}
.sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 2px;
}

/* Groupe de marqueurs : un bouton qui bascule tout, un chevron qui ouvre le détail. */
.group {
  position: relative;
}
.fchip.grp {
  padding-right: 6px;
}
.fchip.grp.part {
  color: var(--fg);
  border-color: var(--line);
}
.fchip.grp.part .sw {
  opacity: 0.6;
}
.fchip .chev {
  font-size: 9px;
  opacity: 0.5;
  padding: 3px 4px 3px 2px;
  margin-left: 1px;
  border-radius: 4px;
}
.fchip .chev:hover {
  opacity: 1;
  background: var(--raise-2);
}
.group .menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  min-width: 215px;
  padding: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 12px 28px #0009;
}
.group .menu.hidden {
  display: none;
}
.mrow {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.mrow:hover {
  background: #1e2634;
}
.mrow.sub {
  padding-left: 20px;
  font-size: 12px;
  font-style: italic;
}
.mrow .box {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid #3b465c;
  border-radius: 3px;
}
.mrow.on {
  color: var(--fg);
}
.mrow.on .box {
  background: var(--accent);
  border-color: var(--accent);
}
.mrow .sw {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 3px;
  background: currentColor;
}
.mrow:not(.on) .sw {
  opacity: 0.3;
}
.mrow .lbl {
  flex: 1;
}
.mrow .n {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.6;
}
.mfoot {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--line-soft);
}
.mall {
  flex: 1;
  padding: 4px;
  border: 0;
  border-radius: 5px;
  background: #1a2130;
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
}
.mall:hover {
  background: var(--line-strong);
  color: var(--fg);
}

/* Mode « à vide » : même liseré rouge que les marqueurs qu'il isole. */
.fchip.flag .idle-sw {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  border: 1.5px solid var(--c-miss);
}
.fchip.flag.on {
  border-color: var(--c-miss);
  color: var(--c-miss);
}

/* Zoom : discret, il ne doit pas concurrencer les filtres. */
.zoom {
  display: inline-flex;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  overflow: hidden;
}
.zbtn {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 3px 9px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.zbtn.fit {
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.zbtn:hover {
  background: var(--raise);
  color: var(--fg);
}

/* Sélecteur de rôles, au-dessus de la colonne des pseudos. */
.rolebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 4px;
}
/* Icône au-dessus, effectif en dessous : cinq rôles tiennent dans la colonne. */
.rolebtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  opacity: 0.35;
  filter: grayscale(1);
  transition: all 0.12s;
}
.rolebtn img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: block;
}
.rolebtn .n {
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1;
  color: var(--muted);
}
.rolebtn:hover {
  opacity: 0.75;
}
.rolebtn.on {
  opacity: 1;
  filter: none;
  border-color: var(--line-hot);
  background: var(--raise);
}
.rolebtn.on .n {
  color: var(--fg);
}

/* ---------- Sorts (tooltips Wowhead) ---------- */
a.ico {
  display: inline-block;
}
.ico.glyph {
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  color: var(--fg);
  background: var(--line);
}
a.spell {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
a.spell:hover {
  text-decoration: underline;
}
[data-tip] {
  cursor: help;
}
.m-verdict.filter[data-tip] {
  cursor: pointer;
}

/* ---------- Affixes ---------- */
.affixes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.affix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 2px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--fg);
  text-decoration: none;
}
.affix:hover {
  border-color: var(--line);
  background: var(--panel-2);
}
.affix img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
}

/* ---------- Spé choisie à la main (jouet) ---------- */
.spec-fixed {
  font-style: normal;
  font-size: 0.8em;
  margin-left: 3px;
  opacity: 0.45;
}
.spec-pick {
  position: fixed;
  z-index: 110;
  min-width: 200px;
  background: var(--float);
  color: var(--fg);
  border: 1px solid var(--line-float);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}