/* "Which stay suits you?" (assets/stay-picker.js): a frosted card above the three stays, the answers are pills, the suggestion is a small card.
   Colours, radii and type come from the shared tokens and the glass set (assets/glass.css). */
.pick { width: 100%; max-width: 720px; margin: 0 auto var(--s5); padding: var(--s3); border: 1px solid var(--glass-light-edge); border-radius: var(--dock-r-in); background: var(--glass-light-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); color: var(--ink); }
.pick:empty { display: none; }
.pick-head { margin: 0 0 var(--s2); }
.pick-h { margin: 0; font-family: var(--font); font-size: var(--fs-h3); font-weight: var(--w-light); line-height: var(--lh-h3); color: var(--ink); }
.pick-sub { margin: 4px 0 0; font-size: var(--fs-caption); color: var(--ink-70); }
.pick[data-state="result"] .pick-sub, .pick[data-state="asking"] .pick-sub { display: none; }
.pick-q { margin: 0 0 var(--s2); padding: 0; border: 0; min-width: 0; animation: pick-in 360ms var(--ez-alt) both; }
.pick-q[hidden], .pick-res[hidden] { display: none; }
.pick-q legend { padding: 0; margin: 0 0 var(--s1); font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--sage-dk); }
.pick-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pick-c { position: relative; display: inline-flex; }
.pick-c input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick-c span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--glass-light-edge); border-radius: var(--dock-r-in); background: var(--glass-light-tint);
  font-size: var(--fs-caption); line-height: 1.25; color: var(--ink); transition: background var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt), border-color var(--t-base) var(--ez-alt); }
.pick-c:hover span { background: var(--ink-08); }
.pick-c input:checked + span { background: var(--sage-dk); border-color: var(--sage-dk); color: var(--white); }
.pick-c input:focus-visible + span { outline: 2px solid var(--sage-dk); outline-offset: 2px; }
.pick-res { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border-lt); animation: pick-in 420ms var(--ez-alt) both; }
.pick-card { display: flex; align-items: center; gap: var(--s2); }
.pick-img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-md); background: var(--travertine); }
.pick-txt { min-width: 0; }
.pick-k { margin: 0 0 2px; font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--sage-dk); }
.pick-name { margin: 0; font-size: var(--fs-h3); font-weight: var(--w-light); line-height: var(--lh-h3); color: var(--ink); }
.pick-name:focus { outline: none; }
.pick-meta { margin: 2px 0 0; font-size: var(--fs-caption); color: var(--ink-70); }
.pick-why { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pick-why li { position: relative; padding-left: 18px; font-size: var(--fs-body-tight); line-height: var(--lh-body); color: var(--ink-70); }
.pick-why li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 1px; background: var(--sage-dk); }
.pick-big { margin: 0 0 var(--s2); font-size: var(--fs-body-tight); line-height: var(--lh-body); color: var(--ink-70); }
.pick-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.pick-all { font-size: var(--fs-caption); color: var(--sage-dk); border-bottom: 1px solid var(--sage-20); text-decoration: none; }
.pick-all:hover { border-bottom-color: var(--sage-dk); }
.pick-alt { margin: var(--s2) 0 0; font-size: var(--fs-caption); color: var(--ink-70); }
.pick-altb, .pick-again { padding: 0; border: 0; border-bottom: 1px solid var(--sage-20); background: none; font: inherit; color: var(--sage-dk); cursor: pointer; }
.pick-altb:hover, .pick-again:hover { border-bottom-color: var(--sage-dk); }
.pick-again { display: block; margin-top: var(--s2); font-size: var(--fs-caption); color: var(--ink-70); border-bottom-color: transparent; }
.pick-altb:focus-visible, .pick-again:focus-visible, .pick-all:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 3px; }
@keyframes pick-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .pick { padding: var(--s2); } .pick-img { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) { .pick-q, .pick-res { animation: none; } .pick-c span { transition: none; } }