/* pick: the reader makes a call, then sees mine and why (components/pick.js draws it from JSON).
     <figure class="demo pick" aria-label="Where would you put the work?"><script type="application/json">
       {"options": {"pi": {"label": "Pi", "icon": "<i>…</i>"}, "a": {"key": "A", "label": "…", "detail": "…"}},
        "questions": [{"id": "…", "ask": "…", "img": "…", "alt": "…", "options": ["pi", "codex"], "mine": ["pi"], "why": "…"}]}
     </script></figure>
   One question: pick, see mine, start again. Several: one at a time, then all of them side by side.
   Options with a "detail" are cards with a description; without, they are buttons in a row. */
.pick-sheet { display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: var(--radius);
  background: radial-gradient(circle, rgb(var(--shadow) / 0.08) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-200); box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.06); }
.pick-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--gray-1000); font-variant-numeric: tabular-nums; }
.pick-dots { display: flex; gap: 5px; }
.pick-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); }
.pick-dots span.on { background: var(--gray-1200); }
.pick-art { height: 220px; border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.06); }
.pick-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pick-art.say { display: grid; place-items: center; padding: 24px; font-family: 'Shantell Sans', cursive; font-size: 22px; line-height: 1.3; color: var(--gray-1100); text-align: center; text-wrap: balance; }
.pick-ask { margin: 0; font-size: 17px; line-height: 1.4; color: var(--gray-1200); font-weight: var(--weight-medium); text-wrap: pretty; }
.pick-art.say .pick-ask { font: inherit; color: inherit; }
.pick-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pick-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--surface); color: var(--gray-1200); box-shadow: var(--elevation-raised); font: inherit; font-size: 13px; font-weight: var(--weight-medium); white-space: nowrap;
  cursor: pointer; touch-action: manipulation; transition: box-shadow 150ms ease-out, transform 150ms ease-out; }
.pick-opt i { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; font-style: normal; }
.pick-opt i svg, .pick-opt i img { display: block; width: 16px; height: 16px; }
.pick-opt i svg { fill: currentColor; }
.pick-opt i svg[stroke] { fill: none; }
.pick-opt:active { transform: scale(0.97); }
.pick-opt[aria-pressed=true] { box-shadow: 0 0 0 1.5px var(--gray-1200), var(--elevation-raised); }
.pick-opt:disabled { cursor: default; transform: none; }
.pick-opt:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 3px; }
.pick-opt.is-off { box-shadow: 0 0 0 1.5px #e0a94a, var(--elevation-raised); }
.pick .me { position: absolute; top: -9px; right: -6px; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: #e4f3ea; color: #1f6b3a;
  font-size: 11px; font-weight: var(--weight-medium); visibility: hidden; opacity: 0; transform: scale(0.9); transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.32, 0.72, 0, 1); }
.pick .is-mine .me { visibility: visible; opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) { .pick .me { background: #1e3a2a; color: #8fd3a6; } }
/* cards with a description */
.pick-opts.cards { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.pick-opts.cards .pick-opt { display: grid; gap: 6px; align-content: start; justify-content: stretch; padding: 14px; text-align: left; white-space: normal; font-weight: 400; }
.pick-k { font-family: var(--mono); font-size: 12px; color: var(--gray-1000); }
.pick-opts.cards .pick-label { font-weight: var(--weight-medium); font-size: 15px; line-height: 1.3; }
.pick-d { font-size: 13px; line-height: 1.45; color: var(--gray-1100); text-wrap: pretty; }
.pick-why { min-height: 44px; margin: 0; font-family: 'Shantell Sans', cursive; font-size: 15px; line-height: 1.35; color: #b8751a; text-wrap: pretty; }
.pick-nav { display: flex; justify-content: flex-end; min-height: 40px; }
.pick-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: var(--text-ui);
  font-weight: var(--weight-medium); cursor: pointer; touch-action: manipulation; background: var(--gray-1200); color: var(--on-ink); transition: background-color 150ms ease-out, transform 150ms ease-out; }
.pick-btn.quiet { background: var(--surface); color: var(--gray-1100); box-shadow: var(--elevation-raised); }
.pick-btn:active { transform: scale(0.96); }
.pick-btn[hidden] { display: none; }
.pick-end { margin: 0; padding: 0; list-style: none; }
.pick-end li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; font-size: 14px; line-height: 1.4; color: var(--gray-1200); }
.pick-end li + li { border-top: 1px solid rgb(var(--shadow) / 0.08); }
.pick-end .picks { display: flex; gap: 8px; }
.pick-end .pick-opt { min-height: 36px; padding: 0 10px; cursor: default; }
.pick-end .pick-opt.is-sel { box-shadow: 0 0 0 1.5px var(--gray-1200), var(--elevation-raised); }
@media (hover: hover) and (pointer: fine) {
  .pick-opt:not(:disabled):hover { box-shadow: var(--elevation-raised-hover); }
  .pick-opt[aria-pressed=true]:not(:disabled):hover { box-shadow: 0 0 0 1.5px var(--gray-1200), var(--elevation-raised-hover); }
  .pick-btn:not(.quiet):hover { background: var(--ink-hover); }
}
@media (min-width: 1024px) { .pick-sheet { padding: 20px 32px; } }
@media (max-width: 640px) { .pick-opts.cards { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pick-art { height: 160px; } .pick-art.say { font-size: 19px; } .pick-opts .pick-opt { padding: 0 8px; } .pick-btn { height: 44px; } .pick-end li { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pick-opt, .pick .me, .pick-btn { transition: none; } .pick-opt:active, .pick-btn:active { transform: none; } }