/* v27 background music style pickers (account sheets, host panels, sound settings). Reuses .jlt-host / .jlt-lock / .jlt-switch from reactions.css. */
.jlm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .4rem 0 .3rem; }
@media (min-width: 560px) { .jlm-grid:not(.jlm-compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jlm-card { position: relative; display: flex; align-items: center; gap: .5rem; min-height: 3.6rem; padding: .5rem 2.3rem .5rem .55rem; border-radius: 1rem; text-align: left;
  border: 3px solid rgba(133,77,14,.15); background: #fff; color: #713f12; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; font-family: inherit; }
.jlm-card:hover { transform: translateY(-2px); }
.jlm-card:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.jlm-card[aria-checked="true"] { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(250,204,21,.45), 0 6px 16px rgba(113,63,18,.14); background: #fffbeb; }
.jlm-card[aria-checked="true"]::after { content: '✓'; position: absolute; top: -.55rem; left: -.45rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #f59e0b; color: #fff;
  font-weight: 900; font-size: .8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.jlm-card:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.jlm-e { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.jlm-sunny .jlm-e { background: #fde68a; } .jlm-cozy .jlm-e { background: #e0e7ff; } .jlm-uke .jlm-e { background: #fbcfe8; }
.jlm-island .jlm-e { background: #a7f3d0; } .jlm-starlight .jlm-e { background: #312e81; } .jlm-classic .jlm-e { background: #f3f4f6; }
.jlm-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.jlm-t b { font-weight: 900; font-size: .85rem; }
.jlm-t small { font-weight: 700; font-size: .68rem; color: rgba(133,77,14,.75); margin-top: .1rem; }
.jlm-play { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: #713f12; color: #fff; font-size: .7rem; padding-left: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.jlm-play.is-on { background: #f59e0b; padding-left: 0; }
.jlm-compact .jlm-card { min-height: 3rem; padding: .35rem 2.2rem .35rem .4rem; border-width: 2px; }
.jlm-compact .jlm-t small { display: none; }
.jlm-compact .jlm-e { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
.jlm-row { display: flex; align-items: center; gap: .6rem; }
.jlm-bed { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
@media (prefers-reduced-motion: reduce) { .jlm-card { transition: none; } .jlm-card:hover { transform: none; } }