/* Card Style picker (prompt 253): the Pick Card's Theme, Accent, Text, Card
   Background and Font rows, drawn by TOG.cardKit.renderStylePicker in
   card-kit.js. Moved here from templates/picks.html unchanged so the Pick
   Card and the Slip Tracker's share cards wear one copy. Rows wrap; they
   never scroll sideways. Shared palette tokens only, so theme-light.css
   flips them. */
.style-sub-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 800; margin: 10px 0 6px;
}
.style-sub-label:first-of-type { margin-top: 0; }
.style-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.style-chip {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 12px; border-radius: 14px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.style-chip:hover { border-color: var(--gold); color: var(--text); }
.style-chip.active { background: var(--gold); border-color: var(--gold); color: #000 !important; }
.style-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  display: inline-block;
}
.style-swatch:hover { transform: scale(1.1); }
.style-swatch.active {
  border-color: var(--text); transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--gold);
}
.style-chip:focus-visible, .style-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.style-note { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Logo Style (prompt 263): the Line Shop's dropdown pill from
   filter-pill.css, one pick at a time, with Match Logo Colors beside it.
   The row wraps on a phone; nothing scrolls sideways. */
.lk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.lk-wrap .book-filter-btn { min-height: 44px; }
.lk-wrap .book-dropdown-item { min-height: 44px; }
.book-dropdown-item.lk-on { color: var(--gold); font-weight: 600; }
/* Opens upward when the room below runs out (the share sheet's Save bar). */
.book-dropdown.lk-up { top: auto; bottom: calc(100% + 6px); }