/* YogiSoul practice v5 — style pace switcher, flow-aware timeline, salutation blocks */

/* Hero pickers: length + "Practise as" on the dark hero */
.pr-pickers{display:grid;gap:14px;margin-bottom:26px}
.pr-pickers .pr-lengths{margin-bottom:0;justify-self:start}
.pr-pace{display:grid;gap:8px}
.pr-pace-label{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bark-3)}
.pr-hero .ys-pace a{background:rgba(234,223,205,.06);border-color:rgba(234,223,205,.14);color:var(--sand-2);min-width:0;padding:8px 12px}
.pr-hero .ys-pace a small{color:var(--sand-3);opacity:.8}
.pr-hero .ys-pace a:hover{border-color:rgba(234,223,205,.4);background:rgba(234,223,205,.1)}
.pr-hero .ys-pace a[aria-current=true]{background:var(--paper);border-color:var(--paper);color:var(--bark)}
.pr-hero .ys-pace a[aria-current=true] small{color:var(--bark-3)}

/* Timeline segments */
.pr-seg-sal{background:linear-gradient(90deg,#D7B58A,#C26A2E)}
.pr-seg-flow{background:repeating-linear-gradient(90deg,var(--tone) 0 6px,color-mix(in srgb,var(--tone) 70%,#fff) 6px 9px)}
.pr-seg-cool{background:var(--sky,#7E8FA6)}
.pr5-legend{flex-wrap:wrap;gap:8px 18px}
.pr5-legend .sal::before{background:linear-gradient(90deg,#D7B58A,#C26A2E)}
.pr5-legend .flow::before{background:repeating-linear-gradient(90deg,var(--tone) 0 3px,color-mix(in srgb,var(--tone) 70%,#fff) 3px 5px)}
.pr5-legend .cool::before{background:var(--sky,#7E8FA6)}

/* Salutation / flow blocks in the step list */
.pr5-block{margin:6px 0;border-radius:20px;border:1px solid var(--line);background:var(--paper);padding:14px 16px 12px;position:relative;overflow:hidden}
.pr5-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone)}
.pr5-block-sal::before{background:linear-gradient(180deg,#D7B58A,#C26A2E)}
.pr5-block-head{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center}
.pr5-block-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--tone-soft);color:var(--tone)}
.pr5-block-sal .pr5-block-icon{background:#F4E4CC;color:#A9482A}
.pr5-block-name strong{display:block;font:400 21px/1.2 var(--display);color:var(--bark)}
.pr5-block-name small{display:block;font-size:13px;color:var(--bark-3);margin-top:3px}
.pr5-moves{list-style:none;margin:12px 0 0;padding:0 0 4px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}
.pr5-moves li{flex:0 0 74px;display:grid;justify-items:center;gap:3px;text-align:center;scroll-snap-align:start;position:relative}
.pr5-moves li+li::before{content:"";position:absolute;left:-6px;top:28px;width:6px;height:1px;background:var(--line-2,var(--line))}
.pr5-move-img{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--sand-2);border:2px solid var(--line)}
.pr5-move-img img{width:100%;height:100%;object-fit:cover}
.pr5-moves li.is-inhale .pr5-move-img{border-color:#D7B58A}
.pr5-moves li.is-exhale .pr5-move-img{border-color:var(--tone)}
.pr5-moves b{font:500 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bark-3)}
.pr5-moves li.is-inhale b{color:#A9682A}
.pr5-moves li.is-exhale b{color:var(--tone)}
.pr5-moves small{font-size:11.5px;line-height:1.2;color:var(--bark-2)}

/* Aside: what this style means */
.pr5-style{border-radius:var(--r-lg,22px);padding:20px 22px;background:var(--bark);color:var(--sand-2)}
.pr5-style-k{font:500 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#D7B58A;margin:0 0 8px}
.pr5-style p{margin:0;font-size:14px;line-height:1.55;color:var(--sand-3)}
.pr5-style ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pr5-style li{font-size:12px;padding:5px 10px;border-radius:99px;background:rgba(234,223,205,.1);color:var(--sand-2)}

@media (max-width:600px){
  .pr-hero .ys-pace{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .pr-hero .ys-pace li{flex:0 0 auto}
  .pr5-block{padding:12px}
  .pr5-block-head{grid-template-columns:36px 1fr auto;gap:10px}
  .pr5-block-icon{width:36px;height:36px;font-size:17px}
  .pr5-block-name strong{font-size:18px}
  .pr5-moves li{flex-basis:64px}
  .pr5-move-img{width:48px;height:48px}
  .pr5-moves li+li::before{top:24px}
}

/* Wide flow strips scroll inside their block instead of widening the grid column */
.pr-body>*,.pr5-steps,.pr5-block{min-width:0}
.pr5-moves{max-width:100%}

/* Routine builder result: same blocks, outside the practice page */
.rr5{--tone:var(--clay,#A9482A);--tone-soft:var(--clay-soft,#F2DCD0)}
.rr5-block{margin:10px 0}
.rr5-steps{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.rr5-steps>summary{cursor:pointer;font:500 13px/1.2 var(--sans);color:var(--bark-2);padding:4px 0}
.rr5-breath{font:500 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--clay,#A9482A);margin-right:4px}
.rr5-style{margin:14px 0}
.rr5-bar li.is-sal{background:linear-gradient(90deg,#D7B58A,#C26A2E)}
.rr5-bar li.is-flow{background:repeating-linear-gradient(90deg,var(--clay,#A9482A) 0 6px,#d48a66 6px 9px)}
.rr5-bar li.is-rest,.rr5-bar li.is-savasana{background:#7E8FA6}