/* courses-moves.css — The courses page: a dial to turn between the courses. */

/* courses-dial.css — the wheel on wide screens, the swipeable row below 900px. The site's course list is hidden but stays in the page. */
html[data-moves] .cindex { display: none; }
.cd-dial { position: fixed; right: 0; top: 0; width: 0; height: 0; z-index: 19; }
.cd-rotor { position: fixed; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(13, 24, 19, .8) 70%, rgba(13, 24, 19, .5) 100%); cursor: grab; touch-action: none; will-change: transform; -webkit-user-select: none; user-select: none; }
.cd-dial.is-drag .cd-rotor { cursor: grabbing; }
.cd-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cd-rim circle { fill: none; stroke: #b48a3a; stroke-width: .2; }
.cd-rim .fine { stroke: rgba(205, 191, 154, .6); stroke-width: 1.5; stroke-dasharray: .14 1.56; }
.cd-item { all: unset; position: absolute; left: 0; top: 50%; box-sizing: border-box; display: flex; align-items: baseline; gap: 8px; width: 276px; height: 34px; margin-top: -17px; padding: 0 0 0 14px; white-space: nowrap; line-height: 34px; color: #cdbf9a; transform-origin: var(--r) 17px; cursor: pointer; }
.cd-item b { flex: none; width: 16px; font: 400 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: #b48a3a; }
.cd-item span { font: 500 13.5px/34px Figtree,sans-serif; letter-spacing: -.01em; transition: color .25s; }
.cd-item:hover span, .cd-item.on span { color: #f1ece0; }
.cd-item:focus-visible { outline: 1px solid #b48a3a; outline-offset: -2px; }
.cd-mark { position: fixed; right: 288px; top: 50%; z-index: 1; width: 16px; height: 1px; background: #b48a3a; pointer-events: none; }
.cd-row { display: none; }
@media (min-width: 900px) { html[data-moves] .scene { right: 316px; } }
/* below that, and on any phone on its side, the row shares the bottom line with the arrows, under the thumb and clear of the text */
@media (max-width: 899.98px), (max-height: 500px) and (hover: none) {
  .cd-dial { display: none; }
  .cd-row { position: fixed; z-index: 19; left: 0; right: calc(clamp(16px, 3vw, 40px) + 108px); bottom: clamp(16px, 3vw, 40px); height: 46px; box-sizing: border-box; display: flex; align-items: stretch; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .cd-row::before, .cd-row::after { content: ""; flex: none; width: 50%; }
  .cd-row::-webkit-scrollbar { display: none; }
  .cd-row button { all: unset; flex: none; box-sizing: border-box; display: flex; align-items: center; scroll-snap-align: center; white-space: nowrap; font: 600 16px/1.3 Figtree,sans-serif; letter-spacing: -.01em; color: rgba(205, 191, 154, .6); transition: color .25s, box-shadow .25s; }
  .cd-row button.on { color: #f1ece0; box-shadow: inset 0 -1px #b48a3a; }
  .cd-row button:focus-visible { outline: 1px solid #b48a3a; outline-offset: -2px; }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  html .scene { bottom: calc(clamp(16px, 3vw, 40px) + 62px); }
}
/* phones upright: a long name folds onto two lines rather than leaving the row */
@media (max-width: 699.98px) {
  html .scene { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px); }
  .cd-row { right: calc(max(16px, env(safe-area-inset-right)) + 108px); bottom: max(16px, env(safe-area-inset-bottom)); }
  .cd-row button { max-width: calc(100vw - 150px); white-space: normal; text-align: center; font-size: 15.5px; line-height: 1.15; text-wrap: balance; }
}
@media (max-height: 500px) and (hover: none) {
  html[data-moves] .scene { right: max(16px, env(safe-area-inset-right)); }
  .cd-row { left: 0; right: calc(max(16px, env(safe-area-inset-right)) + 104px); bottom: max(8px, env(safe-area-inset-bottom)); height: 42px; }
}