/* sc-os-picker-v1 (SC-N520): logo cards for the operating-system choice. Colours come from the page tokens with neutral fallbacks so
   both themes work. */
.sc-os{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.sc-os__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sc-os__card{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left;
  background:var(--sc-surface-2,rgba(127,127,127,.06));color:inherit;border:1px solid var(--sc-border,rgba(127,127,127,.28));
  transition:border-color .15s ease,background-color .15s ease}
.sc-os__card:hover{border-color:var(--sc-accent,#4f8cff)}
.sc-os__card:focus-visible,.sc-os__ver:focus-visible{outline:2px solid var(--sc-accent,#4f8cff);outline-offset:2px}
.sc-os__card.is-on{border-color:var(--sc-accent,#4f8cff);background:var(--sc-accent-soft,rgba(79,140,255,.12));box-shadow:inset 0 0 0 1px var(--sc-accent,#4f8cff)}
.sc-os__logo{width:28px;height:28px;flex:0 0 28px}
.sc-os__txt{display:flex;flex-direction:column;min-width:0}
.sc-os__name{font-weight:600;font-size:.92rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-os__sub{font-size:.76rem;opacity:.7;line-height:1.2}
.sc-os__vers{display:flex;flex-wrap:wrap;gap:6px}
.sc-os__ver{padding:5px 12px;border-radius:999px;cursor:pointer;font-size:.82rem;color:inherit;background:transparent;
  border:1px solid var(--sc-border,rgba(127,127,127,.32))}
.sc-os__ver.is-on{border-color:var(--sc-accent,#4f8cff);background:var(--sc-accent-soft,rgba(79,140,255,.14));font-weight:600}
.sc-os__native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:480px){.sc-os__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}