@layer primitives{.option-cards{gap:var(--space-2);border:0;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));min-width:0;margin:0;padding:0;display:grid}.option-cards-legend{margin:0 0 var(--space-2);color:var(--ink);font-size:var(--text-md);font-weight:var(--weight-strong);line-height:var(--leading-snug);padding:0}.option-card{--option-card-pad:var(--space-3);--option-card-gap:var(--space-1);--option-card-body-gap:var(--space-1);--option-card-min-height:44px;--option-card-bg:var(--surface-raised);gap:var(--option-card-gap);min-height:var(--option-card-min-height);min-width:0;padding:var(--option-card-pad);box-sizing:border-box;border:1px solid var(--line-control);border-radius:var(--radius-control);background:var(--option-card-bg);color:var(--ink);font-size:var(--text-sm);line-height:var(--leading-snug);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);flex-direction:column;display:flex;position:relative}.option-card:hover{border-color:var(--accent)}@media (hover:hover){.option-card:hover{box-shadow:var(--elevation-1);transform:translateY(-1px)}}.option-card:active{transition-duration:var(--dur-press);transform:scale(.98)}.option-card-input{opacity:0;width:100%;height:100%;cursor:inherit;margin:0;position:absolute;inset:0}.option-card:has(.option-card-input:focus-visible){outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}.option-card:has(.option-card-input:checked){border-color:var(--accent);background:var(--surface-selected);box-shadow:inset 0 0 0 1px var(--accent)}.option-card:has(.option-card-input:checked):before{content:"";box-sizing:border-box;pointer-events:none;animation:option-card-tick var(--dur-base) var(--ease-spring) both;position:absolute}.option-card:has(.option-card-input:checked):after{content:"";box-sizing:border-box;pointer-events:none;animation:option-card-tick var(--dur-base) var(--ease-spring) both;position:absolute}.option-card:has(.option-card-input:checked):before{border:2px solid var(--surface-raised);border-radius:var(--radius-round);background:var(--accent);width:18px;height:18px;top:-7px;right:-7px}.option-card:has(.option-card-input:checked):after{border:solid var(--ink-on-accent);border-width:0 2px 2px 0;width:6px;height:9px;top:-4px;right:-1px;transform:rotate(45deg)}@keyframes option-card-tick{0%{opacity:0;scale:.4}}.option-card-title{color:var(--ink);font-size:var(--text-md);font-weight:var(--weight-strong);line-height:var(--leading-tight);font-variant-numeric:tabular-nums}.option-card-meta{color:var(--ink-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.option-card-badge{margin-top:var(--space-1);display:flex}.option-card-reason{color:var(--ink-muted);font-size:var(--text-sm);line-height:var(--leading-snug)}.option-card:has(.option-card-input:disabled){border-style:dashed;border-color:var(--line-strong);background:var(--surface-sunken);color:var(--ink-subtle);box-shadow:none;cursor:not-allowed;transform:none}.option-card:has(.option-card-input:disabled) :is(.option-card-title,.option-card-meta){color:var(--ink-subtle)}.option-card[data-variant=swatch]{--option-card-gap:var(--space-3);flex-direction:row;align-items:center}.option-card-swatch{border-radius:var(--radius-round);background:var(--swatch,var(--surface-sunken));width:28px;height:28px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);flex:none}.option-card-body{gap:var(--option-card-body-gap);flex-direction:column;min-width:0;display:flex}.option-card[data-variant=image]{--option-card-pad:var(--space-2) var(--space-2) var(--space-3)}.option-card-media{aspect-ratio:4/3;margin-bottom:var(--space-2);border-radius:calc(var(--radius-control) * .75);background:var(--surface-sunken);display:block;overflow:hidden}.option-card-media>img{object-fit:cover;width:100%;height:100%;display:block}@media (prefers-reduced-motion:reduce){.option-card:hover,.option-card:active{transform:none}}}
