/* ============================================================
   <pb-selection-bar> — the top-right selection card
   ------------------------------------------------------------
   Lives in the page top bar (`.main-top`, right-aligned). A white
   pill card holding exactly MAX(5) slots — the first `count` are
   filled with the selected talents' initials (left avatar on top,
   overlapping), the rest are ghost silhouettes — plus a trailing
   "Weiter" CTA that turns dark primary once anything is selected.
   Both the zone and the button open the request modal.

   Design: rebuilt after the user's original "avatar slots +
   Weiter" bar, translated into the current token language
   (surface card + shadow instead of borders, near-black primary
   instead of the old green, concentric inner radius).
   ============================================================ */

pb-selection-bar { display: contents; }

/* Local component tokens. */
:where(pb-selection-bar) {
  --sel-av-size: 2.625rem;   /* avatar / ghost slot diameter              */
  --sel-pad: 0.5rem;         /* card inset — inner radius stays concentric */
  --sel-overlap: -0.75rem;   /* negative margin → stacked overlap         */
  --sel-ring: 0.125rem;      /* ring that punches each slot out of its    */
                             /* neighbour (matches the card surface)      */
}

/* ---- The card (the whole click target) ---- */
.sel-zone {
  margin-left: auto;          /* pushes the card to the top-right         */
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: var(--sel-pad);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* The avatar stack — kept as a `.cart-btn` hook so the pop/shake
   feedback animations can target it. */
.cart-btn {
  display: flex;
  align-items: center;
  padding-left: 0.25rem;
}

/* ---- Slots ---- */
.sel-av {
  position: relative;   /* Anker für das Profilfoto (.sel-av-img) */
  width: var(--sel-av-size);
  height: var(--sel-av-size);
  flex: none;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-left: var(--sel-overlap);                  /* overlap the previous slot */
  box-shadow: 0 0 0 var(--sel-ring) var(--surface); /* punch-out ring            */
  transition: transform var(--dur) var(--ease);

  /* default = ghost silhouette */
  background: var(--surface-2);
  color: var(--surface);
}
.sel-av:first-child { margin-left: 0; }

/* Ghost silhouette — centred in the circle (no rim crop). */
.sel-av svg {
  width: 62%;
  height: 62%;
}

/* Filled slot = a selected talent (initials avatar, app-wide style). */
.sel-av.filled {
  background: var(--avatar);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-body);
  text-transform: uppercase;
  user-select: none;
}

/* Profilfoto im belegten Slot — füllt den Kreis, mittig beschnitten
   (gleiche Behandlung wie auf den Talent-Karten). */
.sel-av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* ---- "Weiter" button — the .pb-btn-lg reference (size lives in
   button.css); here only the context bits: concentric radius, the
   quiet default fill and the has-selection primary state. ---- */
.sel-go {
  flex: none;
  /* concentric with the card: outer radius − card inset */
  border-radius: calc(var(--r-xl) - var(--sel-pad));
  background: var(--surface-2);
  color: var(--text-soft);
}
.sel-go:hover { background: var(--surface-3); color: var(--text); }

/* Once anything is selected → dark primary CTA. */
.sel-go.has {
  background: var(--primary);
  color: var(--primary-text);
}
.sel-go.has:hover { background: var(--primary-hover); }

/* Focus ring (matches the shared focus-visible style). */
.sel-go:focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-offset);
}

/* ---- Feedback animation (hook on `.cart-btn`) ----
   `.pop` fires when a talent was just added. Eine volle Auswahl meldet
   sich per Toast (das frühere `.shake` hatte keinen Auslöser mehr). */
.cart-btn.pop   { animation: cart-pop 0.36s var(--ease); }

@keyframes cart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---- Grosser Viewport — die Karte steht fest ----
   Sie sitzt optisch weiter in der Kopfzeile (`.main-top`), hängt aber
   nicht mehr an ihr: `--chrome-mid-y` ist die Mittelachse von Logo und
   Krümelpfad, `translateY(-50%)` zentriert die Karte darauf, unabhängig
   von ihrer Höhe. Der Krümelpfad darf damit wegscrollen, ohne die
   Auswahl mitzunehmen — sie ist der eine Punkt, der auf jeder Seite
   erreichbar bleiben muss.

   `.main-top` behält seine `min-height`, die Karte liegt also genau
   über dem Platz, den sie vorher im Fluss hatte — es entsteht kein
   Loch und nichts rutscht nach.

   Ist das Talent-Fenster angedockt, verschmälert es `.app-main` per
   `margin-right`. Eine am Viewport fixierte Karte macht das nicht mit,
   darum rückt sie hier um dieselbe Strecke nach innen. ---- */
@media (min-width: 768px) {
  .sel-zone {
    position: fixed;
    top: var(--chrome-mid-y);
    right: clamp(1.5rem, 4vw, 3.5rem);
    transform: translateY(-50%);
    margin-left: 0;
    /* unter Seitenleiste und allen Overlays, über dem Seiteninhalt */
    z-index: calc(var(--z-sidebar) - 20);
  }
  html.td-docked .sel-zone {
    right: calc(
      var(--td-dock-w, 26.5rem) + var(--rail-gap) * 2 + clamp(1.5rem, 4vw, 3.5rem)
    );
    transition: right 0.32s var(--ease);  /* im Takt der .app-main-Marge */
  }
  html.td-dock-resizing .sel-zone { transition: none; }
}

/* ---- Small viewport — shrink the card a touch and float it as a
   fixed island bottom-centre (the .app-main mobile padding-bottom
   reserves exactly this space; see layout.css). ---- */
@media (max-width: 767.98px) {
  :where(pb-selection-bar) {
    --sel-av-size: 2.25rem;
    --sel-overlap: -0.625rem;
  }
  .sel-zone {
    position: fixed;
    left: 50%;
    bottom: calc(var(--rail-gap) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    margin-left: 0;
    z-index: var(--z-sidebar);   /* same island layer as .mtop */
    box-shadow: var(--shadow-md); /* floats over content — a touch more lift */
  }
  .sel-go { padding: 0 0.9375rem; }
}

/* Duenner Trenner zwischen "Weiter" und "Registrieren" (17.08.): die
   beiden Knoepfe verfolgen verschiedene Ziele — Auswahl fortsetzen vs.
   Konto anlegen — und sollen nicht wie ein Paar wirken. Bewusst leicht:
   currentColor mit wenig Deckkraft traegt in hell UND dunkel, ohne dass
   ein eigener Token noetig waere. Kuerzer als die Knoepfe, damit er
   trennt statt zu rahmen. */
.sel-div {
  flex: none;
  align-self: center;
  width: 1px;
  height: 1.25rem;
  background: currentColor;
  opacity: 0.14;
}