/* K-166 — who checks (the checker picker on /check and the task page). Linked in <head> only by the pages that show
   the picker (check.html, home.html, landing.html), so a page without the picker is unchanged. Morpheus tokens
   (morpheus.css). UI UX Pro Max rules: native radio inputs in a fieldset with a visible legend; each option is a chip
   (name, then cost; the default also says "Default") at least 44 px high, 8 px apart, one per row on a phone (no
   wrapped names), side by side when there is room; the checked chip has a check icon and a green border (never the
   colour alone); keyboard focus shows the site's 2 px ring on the chip; names and legend 16 px; cost, default and note
   16 px on a phone and 14 px from 576 px (sizes the pages already use); 4.5:1 or more; no motion with
   prefers-reduced-motion. */
.v-pick { border: 0; margin: 1rem 0 0; padding: 0; min-width: 0; }
.v-pick-task { margin: 0 0 1rem; }
.v-pick-legend {
  float: none; width: auto; padding: 0; margin: 0 0 0.5rem;
  font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--m-text);
}
.v-pick-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.v-pick-opt { position: relative; margin: 0; cursor: pointer; flex: 1 1 12rem; min-width: 0; }
@media (min-width: 768px) { .v-pick-opt { flex: 0 1 auto; } }
.v-pick-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.v-pick-chip {
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; height: 100%;
  position: relative; min-height: 2.75rem; padding: 0.45rem 2rem 0.45rem 0.85rem;
  border: 1px solid var(--m-input-border); border-radius: 10px; background: var(--m-input-bg); color: var(--m-text);
  transition: border-color var(--m-dur-fast) var(--m-ease), background-color var(--m-dur-fast) var(--m-ease);
}
.v-pick-name { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.v-pick-cost, .v-pick-default, .v-pick-note { font-size: 1rem; line-height: 1.4; color: var(--m-text-2); }
.v-pick-default { color: var(--m-green); font-weight: 600; }
@media (min-width: 576px) { .v-pick-cost, .v-pick-default, .v-pick-note { font-size: 0.875rem; } }
.v-pick-ic { position: absolute; top: 0.55rem; right: 0.6rem; display: none; width: 1rem; height: 1rem;
  color: var(--m-green); stroke-width: 2.5; }   /* top right, in the space the padding keeps: no shift */
.v-pick-opt:hover .v-pick-chip { border-color: var(--m-border-hover); }
.v-pick-input:checked + .v-pick-chip { border-color: var(--m-green); background: rgba(0, 255, 136, 0.08); }
.v-pick-input:checked + .v-pick-chip .v-pick-ic { display: block; }
.v-pick-input:focus-visible + .v-pick-chip { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.v-pick-note { margin: 0.5rem 0 0; max-width: 38em; }   /* about 75 characters per line */
@media (prefers-reduced-motion: reduce) { .v-pick-chip { transition: none; } }