/* Body Zen Lab: the stroke row (Concept B) and its Rhythm and Grip sheets (lab-rhythm.js). The look is
   prototypes/rhythm-grip/concept-b-row.html: one slim row of two half-width buttons where the grip row was,
   each opening its own bottom sheet on a phone and a small popover from 760 px up. */
.rs-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px;width:100%;box-sizing:border-box;}
body.zen-mode.dock-folded .zen-arousal-dock .rs-row {display:none !important;}
.rs-btn {min-height:52px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:4px 12px 4px 14px;
  border-radius:14px;border:1px solid #ffffff10;background:#ffffff05;color:#e2ecf2;text-align:left;cursor:pointer;
  font:inherit;-webkit-tap-highlight-color:transparent;transition:border-color .3s,box-shadow .3s,background .2s;}
.rs-btn:hover {background:#ffffff09;}
.rs-btn:focus-visible, .rs-sheet :focus-visible {outline:2px solid #9fd6c4aa;outline-offset:2px;}
.rs-btn.rs-flash {border-color:#8dcde955;box-shadow:0 0 18px #8dcde922;}
.rs-txt {display:block;min-width:0;}
.rs-k {display:block;font:600 10.5px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7f8990;}
.rs-v {display:flex;align-items:center;gap:8px;min-width:0;margin-top:3px;font:400 14px/1.25 system-ui,-apple-system,sans-serif;color:#e2ecf2;white-space:nowrap;}
.rs-name {min-width:0;overflow:hidden;text-overflow:ellipsis;}
.rs-chev {width:14px;height:14px;opacity:.55;color:#c3cbd2;}
.rs-arc {flex:none;display:block;}
.rs-arc path {fill:#cfe9f5;}
/* Short screens: the row keeps its two lines but gives back a few pixels to the ring. */
@media (max-height:760px) {
  .rs-row {margin-top:4px;}
  .rs-btn {min-height:46px;padding-block:2px;}
  .rs-v {margin-top:1px;}
}

/* Rhythm dots: one dot per full stroke, a small dot for the still hold. The dot of the sounding half fills on
   the down half and turns into a ring on the up half. */
.rs-dots {display:inline-flex;align-items:center;gap:5px;height:12px;flex:none;}
.rs-dots:empty {display:none;}
.rs-dots i {width:7px;height:7px;border-radius:50%;background:#96bbce4d;flex:none;transition:background .12s,box-shadow .12s,transform .12s;}
.rs-dots i.r {width:3px;height:3px;background:#ffffff38;margin:0 3px;}
.rs-dots i.on {background:#e3f3fb;box-shadow:0 0 9px #96bbcecc;transform:scale(1.28);}
.rs-dots i.on.up {background:transparent;box-shadow:inset 0 0 0 1.5px #e3f3fb,0 0 7px #96bbce99;}
.rs-small {gap:3px;}
.rs-small i {width:5px;height:5px;}
.rs-small i.r {width:3px;height:3px;margin:0 2px;}

/* The 3-second notice of a rhythm or pace change: the one message slot inside the ring, where the task pill
   (lab-tasks.css) sits, which gives way while this shows (countdown outranks a task). */
#lab-rhythm-cd {position:absolute;left:50%;top:30%;z-index:7;display:flex;align-items:center;gap:8px;max-width:calc(100% - 26px);
  padding:3px 3px 3px 12px;border-radius:999px;box-sizing:border-box;background:#23262bdd;border:1px solid #42474f;color:#f5f5f7;
  font:400 12.5px/1.25 system-ui,-apple-system,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(-50%);
  transition:opacity .3s ease,visibility 0s linear .3s;pointer-events:none;}
body.zen-mode #pulse-center > #lab-rhythm-cd {transform:translateX(-50%) scale(calc(1 / var(--beat-scale, 1)));}
#lab-rhythm-cd.is-on {opacity:1;visibility:visible;transition-delay:0s;}
#lab-rhythm-cd .rs-t {overflow:hidden;text-overflow:ellipsis;min-width:0;}
#lab-rhythm-cd b {flex:none;width:24px;height:24px;border-radius:50%;background:#353a43;border:1px solid #59616d;display:grid;place-items:center;
  font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;box-sizing:border-box;}
#lab-rhythm-cd b.rs-pop {animation:rs-pop .35s ease;}
@keyframes rs-pop {from {transform:scale(1.35);} to {transform:scale(1);}}
#pulse-center:has(#lab-rhythm-cd.is-on) #lab-task {opacity:0 !important;visibility:hidden !important;transition:none !important;}
#pulse-center:has(#lab-rhythm-cd.is-on) #pulse-phase-icon {opacity:0 !important;transition:opacity .3s;}

/* Sheets */
.rs-scrim {position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s;}
.rs-scrim.open {opacity:1;pointer-events:auto;}
.rs-sheet {position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:86dvh;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;
  background:#141618;border:1px solid #ffffff12;border-bottom:0;border-radius:22px 22px 0 0;padding:6px 16px calc(18px + env(safe-area-inset-bottom));
  color:#f5f5f7;font:400 14px/1.3 system-ui,-apple-system,sans-serif;text-align:left;
  transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.8,.2,1);box-shadow:0 -18px 50px #00000080;visibility:hidden;}
.rs-sheet.open {transform:none;visibility:visible;}
.rs-sheet:focus {outline:none;}
@media (min-width:760px) {
  .rs-sheet {left:50%;right:auto;width:440px;margin-left:-220px;bottom:24px;border-radius:22px;border-bottom:1px solid #ffffff12;}
}
/* During a session the sheet floats above the arousal scale (lab-rhythm.js place), which stays tappable. */
.rs-sheet.rs-lifted {bottom:var(--rs-lift);max-height:calc(100dvh - var(--rs-lift) - 64px);border-radius:22px;border-bottom:1px solid #ffffff12;padding-bottom:14px;}
.rs-sheet button {font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;}
.rs-grab {width:38px;height:4px;border-radius:4px;background:#ffffff26;margin:4px auto 6px;}
.rs-head {display:flex;align-items:center;justify-content:space-between;min-height:44px;}
.rs-head h2 {margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#f5f5f7;}
.rs-done {min-height:44px;padding:0 6px 0 14px;border:0;background:transparent;color:#9fd6c4 !important;font-size:15px !important;font-weight:550 !important;cursor:pointer;}
.rs-sec {display:flex;align-items:center;justify-content:space-between;margin:0 2px 4px;}
.rs-sec h3 {margin:0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8f989f;font-weight:600;}
.rs-sec small {font-size:12px;color:#7d868d;}

.rs-r-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:14px;}
.rs-r-row.on {background:#ffffff08;box-shadow:inset 0 0 0 1px #9fd6c433;}
.rs-opt {display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding:4px 10px;border:0;background:transparent;text-align:left;border-radius:14px;cursor:pointer;min-width:0;}
.rs-opt b {display:block;font-size:14.5px;font-weight:550;}
.rs-opt small {display:block;font-size:12px;color:#8a949b;margin-top:1px;}
.rs-r-row.on .rs-opt b {color:#eaf6f1;}
.rs-r-row.locked .rs-opt {cursor:default;}
.rs-r-row.locked .rs-opt b {color:#9aa2a8;}
.rs-lock {width:12px;height:12px;margin-left:5px;vertical-align:-1px;opacity:.7;}
.rs-hear {min-height:44px;min-width:44px;margin-right:4px;padding:0 12px;border-radius:999px;border:1px solid #ffffff14;background:#ffffff06;color:#cfdde5 !important;font-size:12.5px !important;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.rs-hear svg {width:12px;height:12px;}
.rs-hear.playing {color:#9fd6c4 !important;border-color:#9fd6c455;}
.rs-sheet.rs-live .rs-hear {visibility:hidden;}   /* during a running session the session itself is the sound */
@media (max-width:380px) {
  .rs-opt {grid-template-columns:70px minmax(0,1fr);gap:8px;padding-inline:8px;}
  .rs-opt .rs-dots {gap:4px;}
  .rs-opt .rs-small {gap:2px;}
  .rs-opt .rs-small i.r {margin:0 1px;}
  .rs-hear {padding:0 10px;margin-right:2px;}
}

.rs-seg {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#ffffff05;border:1px solid #ffffff0d;border-radius:16px;padding:4px;}
.rs-seg button {min-height:60px;border:0;background:transparent;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#9fadb7 !important;font-size:12.5px !important;font-weight:500;cursor:pointer;}
.rs-seg button[aria-pressed="true"] {background:#ffffff0d;color:#eef7fb !important;box-shadow:inset 0 0 0 1px #8dcde933;}
.rs-seg .rs-arc path {fill:#9fc0d0;}
.rs-seg button[aria-pressed="true"] .rs-arc path {fill:#e3f3fb;}
.rs-sq {display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:6px;padding:6px 10px;border:0;background:transparent;border-radius:14px;text-align:left;cursor:pointer;}
.rs-sq b {display:block;font-size:14.5px;font-weight:550;}
.rs-sq small {display:block;font-size:12px;color:#8a949b;margin-top:1px;}
.rs-switch {width:44px;height:26px;border-radius:26px;background:#2b3035;position:relative;transition:background .2s;flex:none;}
.rs-switch::after {content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfd6db;transition:transform .2s;}
.rs-sq[aria-checked="true"] .rs-switch {background:#4f8f7b;}
.rs-sq[aria-checked="true"] .rs-switch::after {transform:translateX(18px);background:#f2fbf7;}
.rs-hint {display:flex;align-items:center;gap:10px;margin:8px 4px 0;font-size:12.5px;color:#8f999f;}
.rs-mini {width:44px;height:44px;flex:none;border-radius:50%;position:relative;background:#1b1e21;box-shadow:inset 0 0 0 1.5px #5d636b;}
.rs-mini svg {position:absolute;inset:0;width:100%;height:100%;}
.rs-foot {display:flex;align-items:center;gap:12px;margin-top:16px;}
.rs-foot small {font-size:12px;color:#7d868d;line-height:1.35;}
.rs-surprise {min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:15px;border:1px solid rgba(255,255,255,.06);
  background:radial-gradient(85% 80% at 50% 45%,#151718,transparent),linear-gradient(#1a1c1e,#1f2123 70%,#222426);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.055);color:#d7e3ea !important;font-size:14px !important;font-weight:500;cursor:pointer;flex:none;}
.rs-surprise svg {width:17px;height:17px;flex:none;}

/* Reduced motion: the dots still step with every half, without glow, swell or slide. */
@media (prefers-reduced-motion:reduce) {
  .rs-dots i {transition:none;}
  .rs-dots i.on {box-shadow:none;transform:none;}
  .rs-dots i.on.up {box-shadow:inset 0 0 0 1.5px #e3f3fb;}
  .rs-sheet, .rs-scrim, .rs-btn, #lab-rhythm-cd, .rs-switch, .rs-switch::after {transition:none !important;}
  #lab-rhythm-cd b.rs-pop {animation:none;}
}