/* ValuFlor — "Where to start" market picker (partials/wheel.html + js/wheel.js).
   Without the script, on a phone, for reduced-motion visitors and in print this is a plain grid of the
   six market cards. wheel.js adds .is-on on screens 700px and wider; only then does the design's 3D
   wheel appear, with one card beside it.
   .wheel carries the design's 34px gap under the section intro, so a page includes the partial bare. */

.wheel{margin-top:34px}
.mt-s>.wheel,.mt-m>.wheel,.mt-l>.wheel,.mt-xl>.wheel{margin-top:0}   /* the page already spaced it */
.wheel__pick{display:none}
.wheel__cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr))}

/* ── the wheel: 25deg per row on a 172px drum, seen from 1000px (the angles are set by wheel.js) ── */
.wheel__drum{
  /* a row at the front of the drum is drawn 1000/(1000 - 172) = 1.208x its size; inset by this much it fills the column exactly */
  --wheel-inset:8.6%;
  position:relative;height:clamp(272px,30vw,340px);perspective:1000px;cursor:grab;
  -webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 81%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 81%,transparent)}
.wheel__drum::before{content:"";position:absolute;left:0;right:0;top:50%;height:54px;margin-top:-27px;
  border-top:1px solid var(--vfacc);border-bottom:1px solid var(--vfacc);opacity:.4;pointer-events:none}
.wheel__ring{position:absolute;inset:0;transform-style:preserve-3d}
.wheel__item{position:absolute;left:var(--wheel-inset);right:var(--wheel-inset);top:50%;height:54px;margin:-27px 0 0;
  display:flex;align-items:center;gap:12px;padding:0 14px;background:none;border:0;border-radius:3px;text-align:left;cursor:pointer;
  transform-origin:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  color:var(--vfink);font:500 clamp(1rem,1.5vw,1.15rem)/1.15 var(--head);letter-spacing:-.022em;
  transition:transform .42s cubic-bezier(.22,.85,.2,1),opacity .3s ease,color .3s ease,font-weight .2s ease}
.wheel__item[aria-selected="true"]{color:var(--vfink);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.42rem)}
.wheel__item:focus-visible{outline-offset:-8px}   /* inside the row: the fade mask cuts anything drawn outside the drum */
.wheel__num{font:600 10.5px/1 var(--mono);letter-spacing:.1em;width:20px;flex:none;color:var(--vffaint);transition:color .3s ease}
.wheel__item[aria-selected="true"] .wheel__num{color:var(--vfacct)}
.wheel__drum.is-spin,.wheel__drum.is-spin .wheel__item{cursor:grabbing}
.wheel__drum.is-spin .wheel__item{transition:none}     /* a drag tracks the pointer; it eases only when let go */

.wheel__ctl{display:flex;align-items:center;gap:8px;margin-top:10px}
.wheel__arrow{cursor:pointer;background:transparent;border:1px solid var(--vfline);color:var(--vfmut);border-radius:3px;
  padding:8px 13px;font:600 12px/1 var(--mono);transition:border-color .18s ease,color .18s ease}
.wheel__arrow:hover{border-color:var(--vfacc);color:var(--vfink)}
.wheel__arrow[aria-disabled="true"],.wheel__arrow[aria-disabled="true"]:hover{opacity:.45;cursor:default;border-color:var(--vfline);color:var(--vfmut)}
.wheel__hint{font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vfmut)}
@media (pointer:coarse){
  .wheel__arrow{min-width:44px;min-height:44px}
}

/* ── wheel on: two columns, one card at a time. The six cards share one grid cell so the panel
      keeps the height of the tallest and nothing below it moves as the wheel turns. ── */
@media screen and (min-width:700px){
  .wheel.is-on{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(18px,3vw,44px);align-items:center}
  .wheel.is-on .wheel__pick{display:block;min-width:0}
  .wheel.is-on .wheel__stage{min-width:0}
  .wheel.is-on .wheel__cards{grid-template-columns:minmax(0,1fr);gap:0}
  .wheel.is-on .mcard{grid-area:1/1;visibility:hidden}
  .wheel.is-on .mcard.is-cur{visibility:visible}
}

/* v2: the picker answers the cursor */
.wheel__item:hover{color:var(--vfacct)}
.wheel__item:hover .wheel__num{color:var(--vfacct)}
.wheel__arrow:hover{background:var(--vfacc);border-color:var(--vfacc);color:var(--vfonacc)}
.wheel__drum{height:clamp(300px,32vw,380px)}
.wheel.is-on .mcard{min-height:clamp(300px,28vw,360px)}