/* ===========================================================================
   siriusly.ai - shared picker modals (models-picker.js, products-picker.js).

   Those two build their panels from inline styles so they need no template of
   their own, but a header has to reflow on a phone and an inline style
   carries no media query - so the header's chrome lives here, imported by
   design-system.css like the navbar and footer.

   Desktop: title on the left, then the actions (a gender toggle on the
   character picker, the create link, refresh) and the close cross on the
   right, all on one line. Phone: title keeps that line with the close cross,
   the actions take the line under it, and refresh drops to its icon - which
   is what lets the toggle, the create button and it share that one line
   rather than three.
   =========================================================================== */
.sr-picker-overlay { padding: 24px; }
.sr-picker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle, #2a2622);
}
.sr-picker-title {
  margin-right: auto;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-strong, #fff);
}
.sr-picker-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .sr-picker-overlay { padding: 10px; }
  .sr-picker-head { padding: 12px 10px 12px 14px; row-gap: 10px; }
  .sr-picker-title { font-size: 15px; }
  .sr-picker-close { order: 1; }
  .sr-picker-actions { order: 2; flex: 1 1 100%; }
  .sr-picker-actions > a,
  .sr-picker-actions > button { flex: 1 1 auto; justify-content: center; }
  .mp-refresh .sr-picker-btn-label,
  .pp-refresh .sr-picker-btn-label { display: none; }
  .mp-refresh, .pp-refresh { flex: 0 0 auto; }
}