/* YogiSoul — yoga style picker (builder) and pace switcher (practice pages) */
.ys-styles{--ys-gentle:#7E8FA6;--ys-hatha:#A9482A;--ys-vinyasa:#C26A2E;--ys-ashtanga:#7C331D;--ys-yin:#4F5734;--ys-kundalini:#6E4C8A;--ys-kriya:#3E5068}
.ys-styles-intro{margin:-4px 0 14px!important}
.ys-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ys-style{--c:var(--ys-hatha);position:relative;display:grid!important;grid-template-rows:auto auto auto 1fr auto;gap:6px;padding:16px!important;border-radius:18px;border:1.5px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;min-height:0!important;margin:0!important}
.ys-style:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ys-style input{position:absolute;opacity:0;pointer-events:none}
.ys-style:has(input:checked){border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.ys-style:has(input:checked)::after{content:"✓";position:absolute;right:12px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-size:13px}
.ys-style:has(input:focus-visible){outline:2px solid var(--c);outline-offset:3px}
.ys-style-gentle{--c:var(--ys-gentle)}.ys-style-hatha{--c:var(--ys-hatha)}.ys-style-vinyasa{--c:var(--ys-vinyasa)}.ys-style-ashtanga{--c:var(--ys-ashtanga)}
.ys-style-yin{--c:var(--ys-yin)}.ys-style-kundalini{--c:var(--ys-kundalini)}.ys-style-kriya{--c:var(--ys-kriya)}
.ys-style-rhythm{display:flex;align-items:flex-end;gap:2px;height:30px;margin-bottom:6px}
.ys-style-rhythm i{flex:var(--h) 1 0;height:calc(var(--h) * 3px + 6px);border-radius:3px;background:var(--c);opacity:.75}
.ys-style-rhythm i:nth-child(odd){opacity:.45}
.ys-style-name{font:400 26px/1 var(--display);color:var(--bark)}
.ys-style-tag{font:500 12px/1.2 var(--sans);color:var(--c)}
.ys-style-sum{font-size:13.5px;line-height:1.45;color:var(--bark-2)}
.ys-style-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ys-style-chips b{font:500 10.5px/1 var(--sans);padding:5px 8px;border-radius:99px;background:color-mix(in srgb,var(--c) 10%,var(--paper));color:var(--c)}

/* Practice page pace switcher */
.ys-pace{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ys-pace a{display:grid;gap:2px;padding:9px 13px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper);text-decoration:none;color:var(--bark);min-width:96px}
.ys-pace a b{font:500 14px/1.1 var(--sans)}
.ys-pace a small{font-size:11.5px;color:var(--bark-3)}
.ys-pace a:hover{border-color:var(--bark)}
.ys-pace a[aria-current=true]{background:var(--bark);border-color:var(--bark);color:var(--paper)}
.ys-pace a[aria-current=true] small{color:rgba(251,248,242,.7)}

/* Builder: the style step is a full-width block, sized to its panel */
.c-builder fieldset.ys-styles[data-wizard-step]{display:block;container-type:inline-size}
.ys-styles legend{margin-bottom:6px}
@container (max-width:560px){
  .ys-style-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ys-style{padding:12px!important;gap:4px}
  .ys-style-sum{display:none}
  .ys-style-name{font-size:21px}
  .ys-style-tag{font-size:11.5px}
  .ys-style-chips b:nth-child(n+3){display:none}
  .ys-style-chips b{font-size:10px;padding:4px 7px}
  .ys-style-rhythm{height:22px}
}
@container (max-width:300px){.ys-style-grid{grid-template-columns:1fr}}
.ys-style-rhythm{margin-right:30px}