/* The lobby's catalyst picker (lobby.js loadoutHtml / wireCatalysts), in the solo lobby and the online room:
   a row per phase with icon chips, the picked one's name, and a one-line summary under it; the full tip is the
   card's .lb-tip. Plus the (i) on the Catalysts heading. Loaded after mobile-menus.css. */
#lobby .loadout.cp { gap: var(--s2); }
#lobby .cp-row { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); grid-template-areas: "ph chips name" ". desc desc"; align-items: center; column-gap: var(--s2); row-gap: 3px; }
#lobby .cp-ph { grid-area: ph; font: 800 10px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ph); }
#lobby .cp-chips { grid-area: chips; display: flex; gap: var(--s1); }
#lobby .cp-chip { --c: 5px; display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn); margin: 0; padding: 0; border: 1px solid var(--m-line); background: rgba(10, 16, 27, .9); color: var(--muted); font: 700 13px var(--ui); cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background .12s, border-color .12s; }
#lobby .cp-chip .ci { display: block; width: 20px; height: 20px; line-height: 20px; text-align: center; }
#lobby .cp-chip .svgi { background: #8fa3bf; }
#lobby .cp-chip:hover { border-color: var(--m-line-hi); background: rgba(24, 38, 58, .9); }
#lobby .cp-chip:hover .svgi { background: #dff6ff; }
#lobby .cp-chip.on { border-color: var(--ph); background: color-mix(in srgb, var(--ph) 20%, rgba(10, 16, 27, .95)); color: #fff; box-shadow: inset 0 -2px 0 var(--ph); }
#lobby .cp-chip.on .svgi { background: var(--ph); }
#lobby .cp-chip:focus { outline: none; }
#lobby .cp-chip:focus-visible { outline: 2px solid var(--m-line-hi); outline-offset: 1px; clip-path: none; }
#lobby .cp-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px var(--ui); color: var(--fg); }
#lobby .cp-desc { grid-area: desc; font: 400 11px/1.35 var(--ui); color: var(--muted); }

/* The (i) on the heading: hover or focus shows what catalysts are; a tap toggles it. */
#lobby .cp-info { flex: none; align-self: center; display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 0 0 auto; padding: 0; border: 1px solid var(--m-line-hi); border-radius: 50%;
  background: rgba(20, 32, 50, .7); color: #a9bad3; font: italic 700 10px/1 Georgia, serif; letter-spacing: 0; text-transform: none; cursor: help; }
#lobby .cp-info:hover, #lobby .cp-info:focus-visible { color: #fff; border-color: #dff6ff; outline: none; }
#lobby .lb-tip .cp-help { margin: 4px 0 0; color: var(--fg); line-height: 1.45; }

/* The online room's side column also holds the six seats, and on a mouse screen under ~860 px tall it would
   scroll; there the summary lines go (hover or focus still gives the full tip). Touch keeps them. */
@media (hover: hover) and (pointer: fine) and (max-height: 860px) {
  #lobby .mp-side .cp-row { grid-template-areas: "ph chips name"; }
  #lobby .mp-side .cp-desc { display: none; }
}

/* Touch: 44 px targets; the (i) sits before the fold chevron. */
@media (pointer: coarse) and (max-width: 1024px), (pointer: coarse) and (max-height: 500px), (max-width: 760px) {
  #lobby .cp-chip { width: 44px; height: 44px; }
  #lobby .cp-chip .ci { width: 24px; height: 24px; line-height: 24px; }
  #lobby .cp-info { width: 28px; height: 28px; font-size: 13px; }
  #lobby .cp-desc { font-size: 12px; }
}