.sayChunk {
  display: block;
  width: 100%;
  padding: 16px 20px;
  margin: 10px 0;
  border-radius: 12px;
  border: 2px solid #9187d3;
  background: white;
  font-size: 1.15em;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sayChunk.sayChunkActive {
  cursor: default;
}

.sayChunk.sayChunkDone {
  background: #55ccaa;
  border-color: #55ccaa;
  color: white;
}

.sayWord {
  transition: color 0.1s, font-weight 0.1s;
}

.sayWordLit {
  color: #9187d3;
  font-weight: 700;
}

div.exerciseContainer {
  width:100%;
  height:80%;
  border:none;
}

div.exerciseSceneContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:0;
}

.activityOption {
  height:96px;
  border:1px solid white;
}

.activityReviewSection {
    background:white;
    padding:16px;
    border-radius:16px;
    margin-bottom:8px;
}

.phobiaOption {
  text-align: left;
  background:white;
  border-radius: 16px;
  padding:8px;
  margin-bottom:8px;
  cursor: pointer;
  width: 300px;
  min-width: 25px;
  min-height: 122px;
  vertical-align: top;
  margin-right: 8px;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
  border:1px solid #d9e1e4;;
  display: inline-block;
}
.phobiaOptionTitle {
  font-size: 1.2rem;
  font-weight: 600;
}
.phobiaOption:hover {
  background: #d4ccff;
}
.phobiaOption.selected {
  border:3px solid #9187d3;
  color:#3a3a3a;
}
.activityModiferButton {
    float: right;
    background: #d4ccff;
    border-radius: 8px;
    height: 32px;
    width: 32px;
    cursor: pointer;
    position: relative;
    top: 36px;
    right:-4px;
    z-index: 200;
    margin-top: -32px;
    margin-right:1px;
    box-shadow: 1px 1px 1px rgba(0,0,0, 0.1);
    line-height: 30px;
}
.activityModiferButton:hover {
    background:#776ac8;
    color:white;
}
.activityStatus {
    width:20px;
    height:20px;
    border-radius: 20px;
    margin:-8px;
    position: relative;
    left:10px;
    top:8px;
    display:flex;
    align-items: center;
    justify-content:center;
}

.activityStatus.green {
    background: #55ccaa;
    border:2px solid #FFF;
}
.activityStatus.yellow {
    background: #ffd393;
    border:2px solid #FFF;
}
.activityStatus.red {
    background: #fb7179;
    border:2px solid #FFF;
}

.goalStatus {
    width:24px;
    height:24px;
    border-radius: 24px;
    margin:-24px;
    position: relative;
    left:16px;
    top:8px;
    display:flex;
    align-items: center;
    justify-content:center;
}
.goalStatus.green {
    background: #e3f9f3;
    color:#55ccaa;
    border:2px solid white;
}
.goalStatus.yellow {
    background: #fff4e3;
    color:#ffd393;
    border:2px solid white;
}
.activityProgress {
    margin-right:2px;
    padding:2px;
    padding-left: 4px;
    padding-right: 4px;
    background: #e3f9f3;
    color:#55ccaa;
    display: inline-block;
    border-radius: 8px;
}
.activityProgress.improve {
    color:#fb7179;
    background:#ffe3e4;
}
.activityProgress.progress {
    color:#ffd393;
    background:#fff4e3;
}
.activityProgress.complete {
    background: #e3f9f3;
    color:#55ccaa;
}

.stepsCircle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;  /* Adjust size as needed */
    height: 32px;
    border-radius: 50%;
    border: 2px solid #776ac8;  /* Circle border */
    color:#776ac8;
    background: white;
    font-size: 12px;
    font-weight: 600;
    line-height: 120%;
    text-align: center;
}

.stepsCircle:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 50px; /* Adjust height as needed */
    background-color: #E5DFFB;
    bottom: -63px; /* Ensure it extends below */
    left: 50%;
    transform: translateX(-50%);
}
.stepsCircle.last:after {
    content: none;
}
.stepsWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; /* Keeps everything vertically aligned */
    min-height: 80px; /* Prevents content from shifting */
}
.activityStep {
    cursor: pointer;
    width:280px;
    height: 90px;
    background:white;
    border-radius:16px;
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    padding-left:16px;
    padding-right:16px;
    margin-left:8px;
    justify-content: space-between;
    align-items: center;
    opacity:1;
}
.stepsWrapper.disabled {
    opacity:0.7;
}
.activityStepWrapper {
    width:280px;
    height: 90px;
    background:white;
    border-radius:16px;
}
.activityStep:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}
.activityStepImg {
    width:60px;
    height:60px;
}
.activityStepLabel {
    display:flex;
    justify-content: space-between;
}
.goalNavLabel {
}
.goalNavArrow {
    color:white;
    background:#9187D3;
    border-radius: 10px;
    height:40px;
    width:40px;
    display:flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top:4px;
}
.goalNavArrow.disabled {
    background:#E5DFFB;
}
.goalNavArrow.none {
    color:white;
    background:white;
}

.goalNavContainer {
    max-width: 350px;
    height:64px;
    background: white;
    border-radius: 16px;
    padding:8px;
    display:flex;
    justify-content: space-between;
}

.center-speech-bubble {
  position: relative;
  background: #d4ccff;
  border-radius: .4em;
  padding:8px;
}

.center-speech-bubble:after {
content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 22px solid transparent;
  border-bottom-color: #d4ccff;
  border-top: 0;
  margin-left: -22px;
  margin-top: -22px;
}

.smallLoadingTick {
  width:80px;
  height:8px;
  background:#E5DFFB;
  border-radius: 4px;
  margin-right: 6px;
  display: inline-block;
}
.smallLoadingTick.done {
  background:#9187D3;
}

.ratedActivity {
  width:335px;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
  background:white;
  text-align: center;
  border-radius: 16px;
  vertical-align: middle;

  display: flex;
  align-items: center;
  justify-content: start;

  min-height:80px;
  margin-top:8px;
  margin-bottom:8px;
  padding: 8px;
  font-size: 1.2rem;
  border:1px solid #d9e1e4;
  position: relative;
  z-index: 1;
}
.ratedActivity:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    z-index: -2;
    background-color: #9187D3;
    bottom: -19px;
    left: 40px;
}
.ratedActivity.last:after {
    content: none;
}
.activitySuggestion {
  width:310px;
  background:#d4ccff;
  text-align: center;
  border-radius: 16px;
  vertical-align: middle;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height:60px;
  margin-top:8px;
  margin-bottom:8px;
  padding: 8px;
  font-size: 1.2rem;
  border:3px solid #d4ccff;
  position: relative;
  z-index: 1
}
.activitySuggestion:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    z-index: -2;
    background-color: #9187D3;
    bottom: -19px;
    left: 27.5px;
}
.activitySuggestion.last:after {
    content: none;
}

.activityNav {
  font-size: 16px;
  margin:8px;
}
.activityNav.active {
  font-weight: 700;
}

.titleMore {
    text-align: right;
    margin-top:-24px;
    cursor: pointer;
}
.titleMoreContent {
    text-align: left;
    font-size: 17px;
    line-height: 120%;
}

.activityResult {
  width:335px;
  background:white;
  text-align: center;
  border-radius: 16px;

  display: inline-block;
  background: #ffffff;

  text-align: left;
  min-height:80px;
  margin:4px;
  padding: 16px;
  vertical-align: top;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
  border:1px solid #d9e1e4;
}
.activityResult:hover {
box-shadow: 6px 6px 6px rgba(0,0,0, 0.2);
}
.activityResult.selected {
  border:3px solid #9187D3;
  box-shadow: 6px 6px 6px rgba(0,0,0, 0.2);
}
.activityResult.exercise {
  margin-left:5px;
  margin-right:5px;
  margin-top:4px;
  margin-bottom: 4px;
}
.activityResult.hasAlreadyGoalBadge {
  position: relative;
}
.alreadyGoalBadge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: #9187d3;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  pointer-events: none;
}

.collectionResult {
  width:360px;
  background:white;
  text-align: center;
  border-radius: 16px;

  display: inline-block;
  background: #ffffff;

  text-align: left;
  height:105px;
  margin:8px;
  padding: 16px;
  vertical-align: top;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}
.collectionResult:hover {
box-shadow: 6px 6px 6px rgba(0,0,0, 0.6);
}

.safetyBehavior {
  background: white;
  border-radius: 16px;
  padding-top:16px;
  padding-bottom:16px;
  padding-left:16px;
  padding-right:16px;
  margin-bottom:8px; 
}
.safetyBehaviorSummary {
  display: inline-block;
  width:100%;
  text-align: left
}

.sceneNameContainer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
}
.sceneNameContainer.app {
  margin-top: 48px;
}

.centerQuestion {
  width:80%;
  max-width: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 200px;
  font-size: 2rem;
}



.characterDialogueContainer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 90px;
  width:100%;
  text-align: center;
}
.characterDialogueContainer.app {
  margin-top: 102px;
}

.characterDialogueInner {
  max-width: 600px;
  width:80%;
  font-size: 1.2rem;
  background: white;
  display: inline-block;
  border-radius:16px;
  padding: 8px;
}
.characterDialogueSkip {
  float:right;
}

.characterDialogue {
  text-align: left;
}

.dialogueHighlight {
font-weight: 600;
}
.characterDialogueCanvas {
  width:100%;
}

.characterDialogueImg {
  width:100%;
  object-fit:contain;
}

.dialogueHighlight.blue {
  
  color:#6c63ff;
}
.dialogueHighlight.purple {
  color:#776ac8;
}
.dialogueHighlight.gold {
  color:#FFBF00;
}
.dialogueHighlight.red {
  color:#fb7179;
}
.dialogueHighlight.green {
  color:#55ccaa;
}
.dialogueHighlight.yellow {
  color:#ffd393;
}

.userResponseContainer {
position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 40px;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.userReponse {
  background: white;
  border-radius: 16px;
  font-size: 1.2rem;
  padding:8px;
  width: 80%;
  margin:4px;
  cursor: pointer;
  display: inline-block;
}

.userReponse:hover {
  color:white;
  background:#6c63ff;
}

.dialogueBounce {
  display: inline-block;
  opacity: 0;
  transform: scale(0); /* Start small */
  animation: bounceIn 0.5s forwards;
}

@keyframes bounceIn {
  0% {
    transform: scale(0); /* Start very small */
    opacity: 0;
  }
  50% {
    transform: scale(1.5); /* Bounce up slightly larger */
    opacity: 1;
  }
  70% {
    transform: scale(0.9); /* Bounce down a bit smaller */
    opacity: 1;
  }
  100% {
    transform: scale(1); /* End at normal size */
    opacity: 1;
  }
}

@keyframes containerBounceIn {
  0% {
    transform: scale(0); /* Start very small */
    opacity: 0;
  }
  50% {
    transform: scale(1.2); /* Bounce up slightly larger */
    opacity: 1;
  }
  70% {
    transform: scale(0.9); /* Bounce down a bit smaller */
    opacity: 1;
  }
  100% {
    transform: scale(1); /* End at normal size */
    opacity: 1;
  }
}

.dialogueContainerBounce {
  animation: containerBounceIn 0.6s ease-in-out;
}

.dialogueContainer {
  text-align: left;
  background: white;
  border-radius: 16px;
  padding:8px;
  margin-bottom: 8px;
}

.exerciseContainer.square {
  border-radius: 0px;
}
.surveyTitle {
  font-size: 35px;
}
.surveyHeader {
  background: linear-gradient(108.07deg, #E3DEFF -5.2%, #e3f9f3 103.39%);
  border-radius: 26px;
  padding: 20px;
}

.surveyPercentContainer {
  height:30px;
  width:90%;
  border-radius: 8px;
}

.unlockedDanceText {
  font-size: 32px;
  font-weight: 600;
  background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tamDivOption:hover {
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.9);
}
.tamDivOption {
  z-index:1000;
  pointer-events: all;
  cursor: pointer;
  background:white;
  border-radius: 8px;
  max-width:200px;
  margin:8px;
  display: inline-block;
  padding:12px;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}
.tamDivOption.selected {
  background: #e3deff;
}

.verticalActionOption {
  padding:10px;
  border-bottom:1px solid #eee;
  cursor: pointer;
  text-align: center;
}
.verticalActionOption:hover {
  background: #e3deff;
}

.verticalActionContainer {
  position: absolute;
  height:400px;
  background: white;
  border-radius: 8px;
  overflow-y:scroll;
  width:160px;
  z-index: 1000;
}

.verticalActionLocked {
  position: absolute;
  height:100px;
  background: white;
  padding:8px;
  border-radius: 8px;
  width:200px;
  z-index: 1000
}

.stablesFeedOptionContainer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 50px;
}

.sceneMessageSimple {
  background:white;
  border-radius:8px;
  padding:8px;
  margin: 8px;
}

.exerciseScenePadding {
  padding-top:80px;
  padding-left:70px;
  padding-right:70px;
}

.actionIcon {
  max-width: 160px;
  max-height: 80px;
  vertical-align: middle;
  display: inline-block;
}
.actionContainerOuter {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 40px;
  width: 100%;
}
.actionContainer {
  text-align: center;
}
.actionContainer.horizontal {
  overflow: auto;
  overflow-y: hidden;
  width:100%;
  white-space: nowrap;
}

.actionOption:hover {
  background: #e3deff;
}

.actionOption {
  cursor: pointer;
  background: white;
  border-radius: 8px;
  margin-right: 8px;
  margin-top: 8px;
  padding:10px;
  width:180px;
  height:100px;
  display: inline-block;
  margin-bottom: 2px;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}

.actionOption.clear {
  background: none;
  width:100px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.actionOptionContainer {
  width:100%;
  overflow-x:auto;
  text-align: center;
}

.customContentOption {
  background:#e3deff;
  border-radius: 16px;
  display: inline-block;
  margin-right:8px;
  margin-top: 8px;
  padding:8px;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
  cursor: pointer;
}
.customContentOption:hover {
  background: #9187d3;
  color:white;
}
.customContentOption.white {
  background:white;
}
.customContentOption.white:hover {
  background: #9187d3;
}

.exerciseH2 {
  font-weight: 500;
  font-size: 34px;
  line-height: 110%;
}

.exerciseH3 {
  font-weight: 500;
  font-size: 24px;
  line-height: 120%;
}
.exerciseH3.inline {
    display: inline-block;
}

.achievementDropContainer {
  text-align: center;
  overflow:hidden;
  position:relative;
  display:inline-block;
}

.achievementDropContainer:after {
    content:" ";
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    z-index:2;
    transition: all 2s ease;
}

.achievementDropContainer.show:after {
    left:100%
}

.achievementStatBefore {
  display:inline-block;
  font-size: 90px;
  vertical-align: middle;
  color:#fb7179;
}
.achievementStatAfter {
  display:inline-block;
  font-size: 90px;
  vertical-align: middle;
  color:#55ccaa;
}
.achievementDropArrow {
  display:inline-block;
  vertical-align: middle;
  overflow: hidden;
}

.achievementBarContainer {
  background: white;
  position: relative;
  border-radius: 8px;
  height:64px;
  width:80%;
  overflow:none;
  max-width: 400px;
  display: inline-block;
  text-align: left;
  z-index: 100;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}
.achievementBarText {
  position: absolute;
  color:#3A3A3A;
  font-size: 50px;
  z-index: 100;
  left: 50%;
  transform: translate(-50%, -120%);
  height:64px;
}

.achievementBar {
 position:relative;
  background: #9187d3;
  display: inline-block;
  height: 100%;
  border-radius: 8px 0px 0px 8px;
  transition: background-color 1s linear;
  z-index: -1;
}
.achievementBarNew {
  text-align: center;
  overflow:hidden;
  position:relative;
  display:inline-block;
  background: #55ccaa;
  display: inline-block;
  height: 100%;
  z-index: -1;
  border-radius: 0px 8px 8px 0px;
  transition: background-color 5s ease-out;
}

.achievementBarNew.one {
    border-radius: 8px 8px 8px 8px;
}

.achievementBarNew:after {
    content:" ";
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    z-index:2;
    transition: all 2s ease-out;
}

.achievementBarNew.show:after {
    left:100%
}

.customExposureContent {
  background:white;
  border-radius: 16px;
  margin-top:8px;
  margin-bottom:8px;
  padding:8px;
  padding-left: 16px;
}
.customExposureContentRemove {
  color:#fb7179;
  text-align: right;
  cursor: pointer;
  margin-left: 16px;
}

.surveyPercentValue {
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  min-width:20px;
  padding-left: 8px;
}

.streakHighlight {
  background: #ffffff;
}

.streakWeek {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px 4px;
  max-width: 360px;
  margin: 0 auto;
}

.streakDay {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.streakDayLetter {
  font-size: 11px;
  font-weight: 600;
  color: #8c84b5;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.streakDayCell {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efecfb;
  color: #6b6b82;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  border: 1px solid rgba(145, 135, 211, 0.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 2px 4px -2px rgba(58, 47, 105, 0.10);
  transition: background 0.55s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
@media (max-width: 400px) {
  .streakDayCell { width: 34px; height: 34px; font-size: 12px; }
}

.streakDayCell--miss {
  background: #efecfb;
  color: #b3aed6;
}

.streakDayCell--done {
  background: #55ccaa;
  color: #ffffff;
}

.streakDayCell--done .streakDayCheck {
  opacity: 1;
}

.streakDayCell--future {
  background: transparent;
  color: #c8c0ec;
  border: 1.5px dashed #c8c0ec;
}

.streakDayCell--today {
  background: #efecfb;
  color: #2a2744;
  outline: 2px solid #776ac8;
  outline-offset: -2px;
}

.streakDayCell--inStreak {
  background: linear-gradient(135deg, #776ac8 0%, #55ccaa 100%);
  background-size: 180% 180%;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(119, 106, 200, 0.45);
  animation: streakDayGlow 3.2s ease-in-out infinite;
}

.streakDayCell--inStreak .streakDayCheck {
  opacity: 1;
}

.streakDayCell--earned {
  background: linear-gradient(135deg, #776ac8 0%, #55ccaa 100%);
  color: #ffffff;
  outline: none;
  animation: streakDayEarnedPop 0.7s ease;
}

.streakDayCell--earned .streakDayCheck {
  opacity: 1;
}

.streakDayCheck {
  position: absolute;
  bottom: 4px;
  right: 4px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: opacity 0.35s ease 0.1s;
}

@keyframes streakDayEarnedPop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(85, 204, 170, 0); }
  40% { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(119, 106, 200, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(85, 204, 170, 0); }
}

@keyframes streakDayGlow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 0 0 4px rgba(119, 106, 200, 0.35), 0 0 0 rgba(85, 204, 170, 0);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 10px rgba(119, 106, 200, 0.55), 0 0 6px rgba(85, 204, 170, 0.35);
  }
}

.streakWeekSubtitle {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #776ac8;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.streakWeekSubtitle--reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .streakDayCell--earned { animation: none; }
  .streakDayCell, .streakWeekSubtitle { transition: none; }
}

.surveyPercentBar {
  display:inline-block;
  background:#55ccaa;
  height:100%;
  border-radius: 8px;
  vertical-align: top;
}

.surveyResultsContainer {
  text-align:left;
}

.getStartedOption {
  text-align: left;
  background: white;
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  margin-right:1px;
  border: 3px solid transparent;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.smallPreviewSection {
  background:white;
  border-radius: 16px;
  padding:16px;
  margin:8px;
  display: inline-block;
}
.smallPreviewSection.dark {
  background: #4e4e4e;
  color:white;
}
.smallPreviewSection.green {
  background: #55ccaa;
  color:white;
}
.smallPreviewSection.purple {
  background: #9187d3;
  color:white;
}
.smallPreviewSection.blue {
  background: #6c63ff;
  color:white;
}
.singleSurveyQuestionContainer {
  text-align: center;
  margin-top:16px;
  width:100%;
  background: #FAF7F4;
  border-radius: 16px;
  padding:30px;
  margin-bottom:20px;
}
.journeyPreviewPhase {
  margin: 8px;
  padding:8px;
  border-radius: 6px;
  background: #e3deff;
  display: inline-block;
}
.journeyPreviewExercise {
  display: inline-block;
  height: 16px;
  border-radius: 1px;
  width: 16px;
  margin: 2px;
}
.journeyPreviewExercise.lesson {
  background: #6c63ff;
}
.journeyPreviewExercise.exposure {
  background: #4e4e4e;
}
.journeyPreviewExercise.game {
  background: #55ccaa;
}

.fadeIn {
  opacity:0;
  transition:opacity 1s linear;
}

.loading {
  padding: 2px;
  background: #e3deff;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.loading-bar { 
  height: 18px;
  background-color: #776ac8;  
  border-radius: 4px; 
  width: 100%;
  transition: 0.4s linear;  
  animation: progressAnimationStrike 4s;
  transition-property: width, background-color;    
}

.loading-bar.done {
  height: 18px;
  background-color: #776ac8;  
  border-radius: 4px; 
  width: 100%;
}

.progressBarContainer {
    width: 100%;
    height: 16px;
    margin-bottom: 16px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    text-align: left;
}

.progressBarInner {
    height: 100%;
    background-color: #776ac8;
    transition: width 0.5s ease;
    margin-left: 0;
    margin-right: auto;
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}

.exerciseNav {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap
}

.mantra {
  border-radius: 8px;
  font-size: 2.0rem;
  padding:16px;
  margin:16px;
  background:#E3DEFF;
  margin-bottom:26px;
  display: inline-block;
}

.groundingPrompt {
  border-radius: 8px;
  padding:16px;
  margin:16px;
  background:#E3DEFF;
  margin-bottom:26px;
}

.surveyQuestionTitle {
  font-size: 25px;
  margin-top: 8px;
}
.surveyQuestionSubTitle {
  font-size: 18px;
  margin:0px;
  margin-bottom: 4px;
}
.surveyAnswer {
  margin-bottom: 4px;
  padding: 8px;
  display: inline-block;
  border-radius: 8px;
  background: #3a3a3a;
  color:white;
  width: 300px;
  cursor: pointer;
  border:3px solid #3a3a3a;
}
.surveyAnswer:hover {
  background: #9187d3;
  border:3px solid #9187d3;
}

.surveyAnswer.selected {
 background: #e3deff;
 border:3px solid #9187d3;
 color:#3a3a3a;
}

.surveyMore {
  margin-left: 16px;
}

.milestoneSummarySection {
  background: white;
  border-radius: 16px;
  margin-bottom: 8px;
  margin-top: 8px;
}

.exerciseSummarySection {
  background: white;
  border-radius: 16px;
  margin-bottom: 8px;
  position: relative;
  padding:16px;
}
.exerciseSummarySection.front {
  position: relative;
  z-index: 100;
}
.exerciseSummarySection.fade1 {
  opacity: 0;
  animation: fadeInAnimation ease 2.5s 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.exerciseSummarySection.fade2 {
  opacity: 0;
  animation: fadeInAnimation ease 2.5s 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.exerciseSummarySection.fade3 {
  opacity: 0;
  animation: fadeInAnimation ease 2.5s 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.exerciseSummarySection.fade4 {
  opacity: 0;
  animation: fadeInAnimation ease 2.5s 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.exerciseSummarySection.fade5 {
  opacity: 0;
  animation: fadeInAnimation ease 2.5s 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.exerciseSummaryCallout {
  border-radius: 16px;
  text-align: center;
  padding: 8px;
}

.exerciseSummaryCallout.red {
  background: #ffe3e4;
  
}
.exerciseSummaryCallout.green {
  background: #e3f9f3;
}
.exerciseSummaryCallout.purple {
  background: #e3deff;
}

.milestoneCompleteTitle {
  background: #55ccaa;
background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.discomfortChartWrapper {

}

.placementContent {
  padding: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: white;
  border:3px solid #9187d3;
  text-align: center;
}

.placementTestContainer {
  padding: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: #e3deff;
  text-align: center;
}

.summaryCallout {
  border-radius: 16px;
  background: #e8dff1;
  padding: 16px;
  margin-bottom: 8px;
}

.pauseMotivation {
  display: inline-block;
  width:100%;
  padding:16px;
  border-radius: 16px;
}

.pauseMotivationContainer {
  padding:16px;
  margin: 16px;
  border-radius: 16px;
  text-align: center;
}

.progressCheckIn {
  padding:16px;
  padding-top: 32px;
  text-align:center;
  border-radius:16px 16px 0px 0px;
  margin-left: -5px;
  margin-right: -5px;
  margin-top: -20px;
}

.dirtyDiscomfort {
  display: inline-block;
  border-radius: 8px;
  margin:4px;
  padding:8px;
  background:#ffe3e4;
  border:2px solid #fb7179;
}
.cleanDiscomfort {
  display: inline-block;
  border-radius: 8px;
  margin:4px;
  padding:8px;
  background:#eaf2f7;
  border:2px solid #55ccaa;
}
.targetDiscomfort {
  display: inline-block;
  border-radius: 8px;
  margin:4px;
  padding:8px;
  background:#e3deff;
  border:2px solid #9187d3;
}
.discomfortGraphContainer {

}
.lessonImage {
  width:100%;height:100%;max-width:400px;max-height:400px;margin-bottom: 16px;object-fit: contain;
}

.dialogueQuestion {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 8px;
}

.dialogueTitle {
  text-align: center;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 600;
}

.dialoguePrefix {
  text-align: center;
  margin-bottom: 16px;
}

.dialogueAnswerContainer {
  text-align: center;
}

.dialogueAnswerOption2 {
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid #9187d3;
  width:280px;
  text-align: left;
  height:140px;
  margin:8px;
  padding: 16px;
  font-size: 1.2rem;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  vertical-align: top;
  cursor: pointer;
}
.dialogueAnswerOption2:hover {
  background:#d4ccff;
}

.dialogueAnswerOption {
  background: #ffffff;
  border-radius: 16px;
  width:211px;
  text-align: center;
  height:112px;
  margin:8px;
  padding: 16px;
  font-size: 1.2rem;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  vertical-align: top;
  cursor: pointer;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.dialogueAnswerOption.clear {
  margin-top: 16px;
  background: none;
}

.dialogueAnswerOption.shadow {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.dialogueAnswerOption.narrow {
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  border: 3px solid transparent;
  cursor: pointer;
}

.dialogueAnswerOption.wide {
  height:211px;
  font-size: 1.2rem;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}
.dialogueAnswerOptionImg {
  height:80px;
  margin-bottom:16px;
}
.dialogueAnswerOptionImg2 {
  margin-bottom: 16px;
  height:30px;
}
.dialogueAnswerOption.start {
  background: #776ac8;
  color:white;
  font-weight: 600;
  height:80px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.dialogueAnswerOption.start:hover {
  background: #9187d3;
}

.dialogueAnswerOption.visited {
  background: #e3f9f3;
}

.dialogueAnswerOption:hover {
  background: #e5dffb;
}

.selectableDialogueOption:hover {
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}

.dialogueAnswerOption.horizontal {
  width:100%;
  margin-right:0px;
  margin-left: 0px;
  height:80px;
  max-width: 600px;
}

.selectableDialogueOption {
  background: #ffffff;
  border-radius: 16px;
  min-width:80px;
  text-align: center;
  height:80px;
  margin:4px;
  padding: 8px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  vertical-align: top;
  cursor: pointer;
  border: 1px solid #9187d3;
  
}
.selectableDialogueOption.active {
  background:#e3deff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.introPathImg {
  width:100%;
  vertical-align: middle;
  display:inline-block;
}

.introPathText {
  margin-left:8px;
  width:60%;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.introPath {
  display: inline-block;
  background: #ebe8ff;
  border-radius: 16px;
  width:100%;
  text-align: left;
  margin:8px;
  padding: 16px;
  vertical-align: top;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}

.introPath:hover {
  background: #beb3ff;
}

.exposureToolImg {
  width:100%;
  max-height:75px;
  object-fit: contain;
  vertical-align: middle;
  display:inline-block;
}
.activityImg {
  height:65px;
  width:65px;
  object-fit: contain;
  vertical-align: middle;
  display:inline-block;
}

.activityLabel {
  margin-left:8px;
  width:210px;
  margin-top:-10px;
  margin-bottom: -10px;
  font-size:17px;
  line-height:140%;
  font-weight: 400;
  overflow-y:auto;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
}
.activityLabel.fullWidth {
  width:100%;
}
.activityDiscomfort {
  color:#848280;
  font-weight: 400;
}
.activityDiscomfortNumber {
  font-weight: 600;
  font-size: 14px;
}

.exposureToolLabel {
  margin-left:8px;
  width:60%;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}
.exposureToolLabel.fullWidth {
  width:100%;
}

.exposureTool {
  display: inline-block;
  background: #ffffff;
  border-radius: 16px;
  width:280px;
  text-align: left;
  height:105px;
  margin:8px;
  padding: 16px;
  vertical-align: top;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);

}
.exposureTool.disabled {
  background: #C4C0BE;

}

.exposureToolOption {
  background: #ffffff;
  border-radius: 16px;
  width:211px;
  text-align: center;
  height:211px;
  margin:8px;
  padding: 16px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  vertical-align: top;
  cursor: pointer;
  font-size: 1.2rem;
  
}

.activityOptionsContainer {

}

.exposureToolOption.clear {
  background:none;
}

.exposureToolOption.small {
  height:110px;
}

.exposureToolOption:hover {
  box-shadow: 3px 3px 3px rgba(0,0,0, 0.3)
}

.exposureTool:hover {
  
  box-shadow: 3px 3px 3px rgba(0,0,0, 0.6));
}

.dialogueAnswerOptionText {
  display: inline-block;
  white-space: wrap;
}

.flexAlign {
  display: flex;
      align-items: center;
      justify-content: space-between;
}

.justDropped {
  background-image:none !important; 
         -o-animation: fadeIt 2s ease-in-out; 
            animation: fadeIt 2s ease-in-out;
}
@-o-keyframes fadeIt {
  0%   { background-color: #e5dffb; }
  100% { background-color: white; }
}
@keyframes fadeIt {
  0%   { background-color: #e5dffb; }
  100% { background-color: white; }
}

.compareTable {
  width:100%;
}

.compareList {
  padding: 0;
  list-style-position: inside;
}

.bigOnly {

}

.smallBlock {
  display:none;
}

.smallInline {
  display:none;
}

.nextBackContainer {
  background:white;
  border-radius: 16px;
  padding:8px;
  margin:8px;
  margin-left: 0px;
  text-align: center;
}
.nextBackContainer.clear {
  background: none
 }

.smallTitle {
  font-weight:600;font-size: 24px;max-width:800px;
}

.activityReviewSubtitle {
    font-size: 12px;
    color:#848280;
    line-height: 110%;
    margin-bottom: 4px;
}

.activityReviewText {
    font-size: 17px;
    color:#3A3A3A;
    line-height: 140%;
}

.shortSelectOneOption {
  margin: 0px;
  margin-left: 10px;
  font-weight:500;
  font-size: 18px;
  max-width:800px;
  cursor: pointer;
}

.historyStatus {
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 8px;
}

.creamBackground {
  border-radius: 26px;
  padding:20px;
  padding-left:70px;
  padding-right:70px;
}
.gradientBackgroundExercise {
  background: linear-gradient(108.07deg, #E3DEFF -5.2%, #e3f9f3 103.39%);
  border-radius: 26px;
  padding:20px;
  padding-left:70px;
  padding-right:70px;
}
.gradientBackground {
  background: linear-gradient(108.07deg, #E3DEFF -5.2%, #e3f9f3 103.39%);
}
.whiteBackgroundExercise {
  background: white;
  border-radius: 26px;
  padding:20px;
  padding-left:70px;
  padding-right:70px;
}
.clearBackgroundExercise {
background: none;
}

.popoupExerciseBackground {
  border-radius: 16px;
  padding: 16px;
  margin:0px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/waves3.png");

}

.historyData {
  display: inline-block;
  font-weight: 600;
    font-size: 16px;
    line-height: 120%;
}

.historyEntry {
  background-color: #e3deff;
  border-radius: 16px;
  margin-bottom: 8px;
  padding:16px;
  list-style-type: none;
}

.historyDate {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}

.journeyEntryDate {
  font-size: 1.2rem;
  margin-top: 8px;
  margin-bottom: 8px;
}

.journeyPrompt {
  margin: 8px;
  margin-bottom: 0px;
  padding:8px;
  background:#e3deff;
  display: inline-block;
  border-radius: 16px;
  cursor: pointer;
}

.journeyPrompt:hover {
  background: #9187d3;
  color:#FFFFFF;
}

.journalEntryContainer {
  background:#e3deff;
  border-radius: 16px;
  padding:8px;
  margin-top:8px;
  min-height: 40px;
}

.journalDelete {
  display: inline-block;
  margin-right: 4px;
  float:right;
  cursor: pointer;
}

.journalEntryText {
  margin-left: 8px;
  width:90%;
  height: 100%;
}

.journalEntry.active {
  width:100%;
  max-width:600px;
  height:300px;
  margin-top:5px;
  border-radius: 16px;
  border: none;
  padding: 10px;
  resize:both;
  outline: none;

  -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.journalEntry.active:focus {
  border:1px solid #776ac8;
  outline-color: #776ac8;
}

textarea.exposureTextArea {
  width:100%;
  max-width:600px;
  height:100px;
  margin-top:5px;
  border-radius: 16px;
  border: none;
  padding: 10px;
  resize:both;
  outline: none;
  border: 1px solid #9187d3;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

textarea.exposureTextArea:focus {
  border:1px solid #776ac8;
  outline-color: #776ac8;
}

.writeContainer {
  position: relative;
  display: block;
  width: 100%;
  max-width: 600px;
  margin-top: 5px;
}
.writeEditable {
  display: block;
  width: 100%;
  height: 100px;
  padding: 10px;
  margin: 0;
  border-radius: 16px;
  border: 1px solid #9187d3;
  background: white;
  color: inherit;
  box-sizing: border-box;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-y: auto;
  outline: none;
  text-align: left;
}
.writeEditable:focus {
  border: 1px solid #776ac8;
}
.writeEditable mark {
  background-color: #E3F9F3;
  color: inherit;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #55CCAA;
  font-weight: bold;
}
div.exerciseComponent {
  overflow: auto; /* Required to expand around the floating internal divs - https://stackoverflow.com/questions/4604005/how-to-make-a-div-grow-in-height-while-having-floats-inside */
  width:100%;
  padding:0px;
  margin: 0px;
}

video.exerciseVideo {
  max-width:600px;
  max-height:400px;
  width:95%;
}

video.exposureVideo {
  max-width:600px;
  width:95%;
}
video.exposureVideo.greyscale {
  filter: gray;
  -webkit-filter: grayscale(1); 
  filter: grayscale(1); 
}
video.exposureVideo.blurry {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
video.exposureVideo.greyscaleblurry {
  filter: gray;
  -webkit-filter: blur(2px) grayscale(1);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px) grayscale(1);
}

div.exerciseComponentEdit {
  float:right;
}

div.exerciseComponentContent {
  float:left;
  width:100%;
  
}

div.pageBreakContainer {
  width:100%;
  text-align: center;
}

button.exerciseBackButton {
  float:left;
}

button.exerciseNextButton {
  float:right;
}

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}
#hover-content-op {
    display:block;
}
#parent:hover #hover-content-op {
    display:none;
}
#parent {
    position:relative;
}

.exerciseIntro {
  background:   #d4ccff;
border-radius: 26px;
padding: 20px;
margin-top: 16px;
}

.exerciseIntro.introSetupCard {
  padding: 0;
  overflow: hidden;
}

.introSetupRow {
  display: flex;
  align-items: stretch;
}

.introSetupCell {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 20px;
  text-align: left;
}

.introSetupDivider {
  width: 1px;
  background: rgba(58, 47, 105, 0.18);
  margin: 14px 0;
  flex: 0 0 auto;
}

.introSetupCellTop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.introSetupCellTop--clickable {
  cursor: pointer;
}

.introSetupTextWrap {
  flex: 1 1 auto;
  min-width: 0;
}

.introSetupTitle {
  font-weight: 700;
  font-size: 1rem;
  color: #2c2552;
  line-height: 1.2;
}

.introSetupSub {
  font-size: 0.85rem;
  color: #4a3f9c;
  margin-top: 3px;
  line-height: 1.35;
}

.introSetupSub.purpleLink {
  cursor: pointer;
}

.introSetupExpand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5a4fbf;
  font-size: 0.85rem;
  font-weight: 600;
}

.introSetupExpandText {
  white-space: nowrap;
}

.introSetupChevron {
  flex: 0 0 auto;
  color: #5a4fbf;
  transition: transform 200ms ease;
}

.introSetupCellTop--clickable:hover .introSetupChevron {
  transform: translateY(2px);
}

.introSetupSwitchWrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.introSetupSwitchLabel {
  font-weight: 700;
  font-size: 0.95rem;
  color: #2c2552;
  min-width: 28px;
  text-align: right;
}

.switchToggle {
  position: relative;
  width: 50px;
  height: 28px;
  background: #b3a8e0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease;
  flex: 0 0 auto;
  border: 1px solid rgba(58, 47, 105, 0.18);
}

.switchToggle:focus {
  outline: 2px solid #5a4fbf;
  outline-offset: 2px;
}

.switchToggle.selected {
  background: #55ccaa;
  border-color: rgba(38, 120, 92, 0.35);
}

.switchToggleKnob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 200ms ease;
}

.switchToggle.selected .switchToggleKnob {
  transform: translateX(22px);
}

.introSetupBody {
  padding-top: 12px;
  font-size: 0.92rem;
  color: #2c2552;
  text-align: left;
}

.introSetupBody ul {
  margin: 0;
  padding-left: 20px;
}

.introSetupBody li {
  margin: 4px 0;
}

.introSetupBody p {
  margin: 0 0 8px;
}

@media (max-width: 720px) {
  .introSetupRow {
    flex-direction: column;
  }
  .introSetupDivider {
    width: auto;
    height: 1px;
    margin: 0 18px;
  }
}

.exerciseToolboxFooter {
  background:   #d4ccff;
border-radius: 26px;
padding: 20px;
margin-top: 16px;
}

.exerciseIntro.animated {
  background: linear-gradient(to right, #E3DEFF  50%, transparent 0);
  background-size: 200% 100%;
  background-position: right;
  animation: makeItfadeIn 2s 0.3s forwards;
}

.exerciseComplete {
  display: inline-block;
}

.exerciseComplete.animated {
  animation: scale .5s ease-in-out 2.5s both;
}

@keyframes makeItfadeIn {
  100% {
    background-position: left;
  }
}

.scaleWrapper {
  padding: 4px; 
  background: #3A3A3A;
  border-radius: 16px;
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 968px;
}

.scaleWrapper.small {
}

.scaleWrapper.medium {
}

.audioControlContainer {
  background: white;
  border-radius: 100px;
  display:inline-block;
  padding:5px;
  height: 64px;
}

.audioIcon {
  margin-left:15px;
  cursor: pointer;
}

.audioPlayButton {
  background: none;
  border: none;
  margin:5px;
}

.audioPlayButton:focus {
  border: none;
}
.fitWord {
  overflow-wrap: break-word; 
  word-wrap: break-word; 
  word-break: break-word;
}

.scaleWrapper.phobiaSeverity {
  margin-bottom: 16px;
}
.scaleWrapper.checkin {
  margin-bottom: 16px;
}


.scaleWrapper.phobiaSeverity.done {
  background-color:#9187d3;
}
.scaleWrapper.checkin.done {
  
}

.scaleWrapper .scaleOption {
  width: 83px;
  height: 83px;
  background: #4E4E4E;
  border-radius: 16px;
  color:#FFFFFF;
  display:inline-block;
  margin:2px;
  text-align: center;
  padding-top: 16px;
  font-size: 36px;
  cursor: pointer;
  display: inline-block;
}

.scaleOption.medium {
  width:auto;
  font-size: 26px;
  padding-top: 20px;
  padding-right: 8px;
  padding-left: 8px;
  display: inline-block;
}

.scaleWrapper .scaleOption.phobiaSeverity {

}
.scaleWrapper .scaleOption.checkin {
  height:40px;
}
.scaleOption.phobiaSeverity {
  min-height: 40px; 
  height: auto; 
  
  display: flex;
  align-items: center; 
  justify-content: center;
  
  flex: 1; 
  min-width: 120px;
  
  font-size: 16px;
  line-height: 1.2;
  padding: 8px 12px;
  box-sizing: border-box;
  color: white;
}
.scaleOption.phobiaSeverity.long {
  min-width:100%;
}
.scaleOption.checkin {
  width:auto;
  font-size: 16px;
  padding-top: 8px;
  padding-right: 8px;
  padding-left: 8px;
  display: inline-block;
}

.tipList {
  padding: 0;
}
.tipList li {
  list-style-position: inside;
  border: 1px solid #C4C0BE;
  border-radius: 16px;
  margin-bottom: 8px;
  padding: 30px 15px 30px 40px;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  white-space: normal;
}

.exposureImage {

}
.exposureImage.greyscale {
  filter: gray;
  -webkit-filter: grayscale(1); 
  filter: grayscale(1); 
}
.exposureImage.blurry1 {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}
.exposureImage.greyscaleblurry1 {
  filter: gray;
  -webkit-filter: blur(1px) grayscale(1);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px) grayscale(1);
}
.exposureImage.blurry2 {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
.exposureImage.greyscaleblurry2 {
  filter: gray;
  -webkit-filter: blur(2px) grayscale(1);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px) grayscale(1);
}
.exposureImage.blurry5 {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.exposureImage.greyscaleblurry5 {
  filter: gray;
  -webkit-filter: blur(5px) grayscale(1);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px) grayscale(1);
}

.scaleWrapper input[type=radio] {
    display:none;
}

.scaleWrapper input[type=checkbox] {
    display:none;
}

.scaleWrapper input[type=radio]:checked + .scaleOption {
    background-color: white;
    color:#4E4E4E;
}

.scaleWrapper input[type=checkbox]:checked + .scaleOption {
    background-color: white;
    color:#4E4E4E;
}

.scaleOption:hover {
  background-color: #9187D3;
}

.exposureContentWrapper {
  min-height: 300px;
}

.exposureContent {
  padding-top: 20px;
}

.exposureTextStage {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  height: 20vh;
  min-height: 220px;
  max-height: 360px;
  padding: 20px;
}

.exposureTextStageInline {
  width: 164px;
  height: 164px;
  min-height: 0;
  max-height: none;
  padding: 8px;
  line-height: normal;
}

.exposureTextFit {
  display: inline-block;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}

.breathingBox {
  width:200px;
  height: 200px;
  border-width:10px;
  border-style:solid;
  border-color: #3A3A3A #3A3A3A #3A3A3A #3A3A3A;
  text-align: center;
  margin:20px;
  padding-top: 70px;
  -webkit-transition : border 2000ms ease-out; 
  -moz-transition : border 2000ms ease-out;
  -o-transition : border 2000ms ease-out;
}

.mainExposureContent {
  border-radius: 26px;
  margin-top: 16px;
  width:100%;
  padding-top:20px;
  padding-bottom:20px;
  padding-left: 5px;
  padding-right: 5px;
  min-height: 300px;
  transition: background-color 1s linear;
  touch-action: manipulation;
}

.mainExposureContent.summary {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}

.next {
    display:      inline-block;
    float:right;
    margin-left:  auto;
    margin-right: 0;
}

.phaseProgress {
    background: #FFFFFF;
    height: 12px;
    margin-left:5px;
    display: inline-block;
    text-align: center; 
    border-radius: 2px;
    
}

.complete {
  background-color: #55CCAA;
}

.in-progress {
  background-color: #E3F9F3;
}

.hidden {
    display: none;
}

#bottom-filler {
    height:700px;
}

div.selectExposureContainer {
    display:inline-block;
    height: 200px;
    width:200px;
    padding:10px;
    margin: 5px;
    background: #FFFFFF;
  box-shadow: 0px 4px 30px rgba(216, 207, 200, 0.25);
  border-radius: 16px;
}

div.selectExposureContainer:hover {
  background-color: #E5DFFB;
}

div.selectExposureContent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    width: 180px;
    text-align: center;
    overflow: hidden;
}

ul.listOrder {
  display: table;
  margin: 0 auto;
  padding-left:0px;
  width:100%;
  min-width: 200px;
  max-width: 400px;
  padding-bottom:10px;
}

li.hierarchyEntry {
  padding:10px;
  margin-right:1px;
  box-shadow:1px 1px 1px rgba(0,0,0, 0.3);
  list-style-type:none;
  background: white;
  border-radius: 10px;
  margin-bottom: 5px;
  min-height: 56px;
}

.hierarchyEntry.active {
  margin-left:20px;
  margin-right:-20px;
  background: #e3f9f3;
  box-shadow: 0px 4px 15px rgba(0,0,0, 0.5);
}

.hierarchyLeftIcon {
  background: #E5DFFB;
  color:#9187D3;
  margin:-10px;
  border-radius: 10px 0px 0px 10px;
  height: 56px;
  width:25px;
  font-size: 25px;
  line-height: 56px;
}

.exerciseOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ratedActivityEdit {
  background: white;
  border-radius: 16px;
  padding:16px;
  margin:8px;
  text-align: center;
}

.activityExpand {
  color:#9187D3;
  margin:-19px;
  margin-left: 0px;
  height: 105px;
  width:25px;
  font-size: 25px;
  line-height: 105px;
}

.hierarchyAboutText {
  margin-left: 30px;
}

div.hierarchyAbout {
  float:right;
  color:blue;
  text-decoration:underline;
}

div.listSelectAbout:hover {
  float:right;
  cursor: pointer;
}

div.tagSelector {
  border: 1px solid #d9e1e4;
  margin-top: 10px;
  margin-bottom: 10px;
  padding:10px;
  min-width: 200px;
  max-width: 600px;
  background: white;
  border-radius: 10px;
  cursor: pointer;
}

input.tagCheckbox {
  margin:10px;
  margin-left: 5px;
  transform: scale(1.5);
  accent-color: #55CCAA;
}

.volumeSlideContainer {
  display:inline-block;
  margin:15px;
  width:50px;
}

.seekSlideContainer {
  display:inline-block;
  margin:15px;
  width:100px;
}
.audioTimeContainer {
  display:inline-block;
  font-family: monospace;
  margin-right: 8px;
}

.volumeSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%; 
  background: #4e4e4e;
  cursor: pointer;
}

.volumeSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4e4e4e;
  cursor: pointer;
}

.seekSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.seekSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 12px;
  border-radius: 0px; 
  background: #4e4e4e;
  cursor: pointer;
}

.seekSlider::-moz-range-thumb {
  width: 6px;
  height: 12px;
  border-radius: 0px;
  background: #4e4e4e;
  cursor: pointer;
}

.historyContainer {
  background: rgba(255, 250, 246, 0.6);
  border-radius: 16px;
  padding: 16px;
  width:100%;
}

.hierarchyPhaseName {

}

.hierarchyPhaseName.long {
  font-size: 0.9rem;
}


.questionnaireSection {
  background: #e3deff;
  border-radius: 26px;
  padding: 30px;
  padding-top: 70px;
  padding-bottom: 70px;
  margin-right:20px;
  max-width: 600px;
  min-width: 300px;
  margin-bottom:16px;
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.questionnaireQuestionContainer {

  display: inline-block;
  max-width: 450px;
  width:100%;
  vertical-align: middle
}

.emailBuilderOption {
  display: inline-block;
  margin:2px;
  padding:4px;
  padding-left: 8px;
  padding-right: 8px;
  background: #d3d3d3;
  border-radius:8px;
  cursor: pointer;
}
.emailBuilderOption:hover {
  background: #9187d3;
}
.emailBuilderOption.selected {
  background: #e3deff;
}
.emailBuilderInputBlock {
  padding-left:10px;
  border-left: 2px solid black;
  margin-bottom:8px;
}

.preTitle {
  font-weight: 400;
  font-size: 18px;
  line-height: 110%;
  letter-spacing: 0.04em;
  color: #3A3A3A;
  opacity: 0.7;
}

.questionnaireTitle {
  font-weight: 500;
  font-size: 60px;
  line-height: 110%;
  padding-bottom: 20px;
}

.questionnaireTitle.long {
  font-size: 40px;
}

.stepOptionContainer {
  text-align: left;
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  border: 3px solid transparent;
}
.stepOptionContainer.horizontal {
  display: inline-block;
  margin-right: 8px;
}
.stepOptionOuter {
  overflow-x:auto;
  white-space: nowrap;
}

.levelOptionContainer {
  text-align: left;
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  white-space: wrap;
  border: 3px solid transparent;
}
.levelOptionContainer.horizontal {
  display: inline-block;
  margin-right: 8px;
}
.levelOptionOuter {
  overflow-x:auto;
  white-space: nowrap;
}

.levelOptionContainer.green {
  background:#e3f9f3;
}
.levelOptionContainer.red {
  background:#ffe3e4;
}
.levelOptionContainer.purple {
  background:#e3deff;
}
.levelIdea {
  margin-top:16px;
}

.checkboxOptionContainer {
  text-align: left;
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  border: 3px solid transparent;
}

.checkboxOptionContainer.dark {
  background: #e3deff;
}
.checkboxOptionContainer.white {
  background: white;
  margin-right:1px;
  border:1px solid #d9e1e4;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.checkboxOptionContainer.black {
  background: #3a3a3a;
  color:white;
}

.checkboxOptionContainer.checked {
  border:3px solid #9187d3;
}
.addAnotherTextInput {
  width: 335px;
  max-width: 95%;
  background: #FFFFFF;
  border-radius: 16px;
  align-items: center;
  margin:5px;
  padding:4px;
  padding-left: 8px;
  border:0;
  outline:0;
}

.checkBox {
  transform: scale(1.5);
  margin-right:10px;
}

.checkBox.purple {
  accent-color: #9187d3;
}

.titleComponent {
  font-style: normal;
  font-weight: 500;
  font-size: 3rem;
  line-height: 110%;
}

.pretitleComponent {
  font-weight: 400;
  font-size: 18px;
  line-height: 110%;
  letter-spacing: 0.04em;
  color: #3A3A3A;
  opacity: 0.7;
}

.subtitleComponent {
  font-style: normal;
  font-weight: 500;
  font-size: 1.8rem;
}

.textComponent {
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;

  color: #0C0C0C;
}

.componentTitle {
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 125%;
  color: #3A3A3A;
}

.chapterTrackContainer {
  background: #e3deff;
  border-radius: 16px;
  text-align: center;
  margin:3px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.chapterTrackTitle {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  margin: 10px;
  text-align: center;
  cursor: pointer;
  
  color: #4e4e4e;
}

.chapterTrackTitle.active {
  background: #3A3A3A;
  border-radius: 10px;
  color:white;
  height:48px;
  padding:16px;
}

.dynamicTagTitle {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 110%;
}

.dynamicTagDescription {
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 140%;
}


.tipTitle {
  display: inline-block;
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  color: #3A3A3A;
  margin-bottom: 15px; 
}
.tipContent {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 140%;
  color: #3A3A3A;
}

.quizResultsContainer {
  background: white;
  border-radius: 26px;
  padding: 30px;
  margin-bottom: 8px;
}

.quizResultsDetails {
  display: inline-block;
}

.quizResultsBarContainer {
  width:285px;
  text-align: center;
}

.severityBar {
  position: relative;
  text-align: center;
  border-radius: 8px;
  margin:-1px;
  width:150px;
  height:500px;
  background: rgb(227,249,243);
  background: linear-gradient(180deg, rgba(227,249,243,1) 0%, rgba(255,244,227,1) 49%, rgba(255,227,228,1) 100%); 
}

.severyLevel {
  line-height: 100px;
  width:151px;
  height:101px;
  margin:-1px;
  border:1px solid #3A3A3A;
}

.severyLevel.roundedTop {
  border-radius: 8px 8px 0px 0px;
}

.severyLevel.roundedBottom {
  border-radius: 0px 0px 8px 8px;
}

.userSeverityLevel {
  position: absolute;
  left:130px;
  width: 151px;
  text-align: right;
  border-radius: 1px;
  border-bottom: 2px solid #3A3A3A;
}

.dialogueBack {
  margin-top: 8px;
  text-align: left;
  opacity: 0.7;
  cursor: pointer;
}

.dialogueBack:hover {
  opacity: 1.0;
}

.selectOneOptionContainer.white {
  background: white;
  margin-right:1px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

@media only screen and (max-width: 1200px) {
	.bigOnly {
		display:none;
	}
	.smallOnly {
		display:inline-block;
	}
	.smallInline {
    	display: inline-block;
    	width:45%;
  	}
  	.smallBlock {
    	display: block;
  	}
  	.questionnaireQuestionContainer {

  display: inline-block;
  max-width: none;
  width:100%;
  vertical-align: middle
}
}

@media only screen and (max-width: 768px) {
  .safetyBehaviorSummary {
  width:100%;
}

.componentTitle {
  line-height: 108%;
}

.smallOnly {
		display:inline-block;
	}
.safetyBehaviorEdit {
  width:100%;
}
  .dialogueAnswerOption.wide {
    width:280px;
    height: 180px;
  }
  .dialogueAnswerOption.narrow {
    width:280px;
    height:100px;
  }
  .dialogueAnswerOption {
    width:140px;
    height: 140px;
  }

  .discomfortGraphContainer {
    max-width: 340px;
  }

  .selectOneOptionContainer {
    margin-top: 8px;
  }

  label {
    margin-bottom: 0px;
  }

  .dialogueQuestion {
    text-align: left;
  }

  .standardButtonNext {

  }

  .questionnaireSection {
    margin-right: 0px;
    padding-bottom: 10px;
    padding-top: 20px;
    padding-left: 16px;
    min-width: 320px;
  }
  .nextBackContainer {
    margin-right: 0px;
    max-width: 450px;
  }

  .checkboxOptionContainer {
    padding:8px;
    margin-top: 8px;
    margin-left:auto;
    margin-right:auto;
  }

  .tipList li {
    padding: 8px;
  }

  .smallInline {
    display: inline-block;
    width:45%;
  }
  .smallBlock {
    display: block;
  }
  .bigOnly {
    display:none;
  }
  .historyStatus {
    padding: 8px;
  }
  .scaleWrapper {
    
  }
  .scaleWrapper .scaleOption.small {
    height: 48px;
    width: 48px;
    border-radius: 10px;
    font-size: 16px;
    padding-top: 12px;
  }

  .scaleWrapper .scaleOption.medium {
    height: 48px;
    border-radius: 10px;
    font-size: 14px;
    padding-top: 12px;
  }

  .creamBackground {
    padding-left:12px;
    padding-right:12px;
  }

  .customContentOption {
    display: block;
  }
  .dialogueAnswerOptionImg {
    display: inline-block;
    height:80px;
  }
  .smallLoadingTick {
  width:40px;
  height:4px;
  background:#E5DFFB;
  border-radius: 2px;
  margin-right: 3px;
  display: inline-block;
}
.smallLoadingTick.done {
  background:#9187D3;
}
}

/* Interactive Image Exposure */
.imageInteractContainer {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 280px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0% 0%;
  border-radius: 8px;
  overflow: hidden;
  transition: background-size 0.4s ease, background-position 0.4s ease;
}

.imageInteractGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
}

.imageRevealCell {
  background: #1a1a1a;
  cursor: pointer;
  border: 1px solid #333;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.imageRevealCell.revealed {
  background: transparent;
  pointer-events: none;
  border-color: transparent;
}

.imageRevealCell:hover:not(.revealed) {
  opacity: 0.7;
}

.imageSpecifyCell {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease;
}

.imageSpecifyCell:hover {
  background: rgba(255, 255, 255, 0.25);
}

.scratchRevealCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  border-radius: 8px;
}

.zoomRevealBtn {
  margin-top: 10px;
  padding: 8px 22px;
  background: #9187d3;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s ease;
}

.zoomRevealBtn:hover {
  background: #7a6fc4;
}

@media only screen and (max-width: 768px) {
  .imageInteractContainer {
    max-width: 100%;
    height: 220px;
  }
}

/* ================================================================
   Activity Module — Redesign
   ================================================================ */

.act-back-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; color: #9187d3; font-weight: 600;
    margin-bottom: 12px; text-decoration: none;
}
button.act-back-link { background: none; border: none; cursor: pointer; padding: 0; }

/* Goal context banner (top of start screen) */
.act-goal-banner {
    display: flex; flex-direction: column; gap: 8px;
    text-align: center;
    background: rgba(145,135,211,0.07); border-radius: 16px;
    padding: 12px 16px; margin-bottom: 16px;
    border: 1.5px solid rgba(145,135,211,0.15);
}
.act-goal-banner-text {
    font-size: 13px; color: #9187d3; font-weight: 500; line-height: 1.3;
}
.act-goal-banner-name {
    font-weight: 700;
}
.act-goal-banner .act-goal-dots {
    margin-left: 0;
}
.act-goal-banner-pos {
    font-size: 12px; font-weight: 700; color: #9187d3; opacity: 0.8;
}

/* Goal context strip */
.act-goal-strip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(145,135,211,0.08); border-radius: 14px;
    padding: 10px 14px; margin-bottom: 16px;
    font-size: 13px; color: #9187d3; font-weight: 600; flex-wrap: wrap;
}
.act-goal-strip-label { opacity: 0.65; font-weight: 500; }
.act-goal-strip-name  { font-weight: 700; flex: 1; min-width: 0; }
.act-goal-strip-pos   { font-size: 12px; opacity: 0.7; margin-left: auto; }
.act-goal-dots        { display: flex; gap: 5px; align-items: center; margin-left: auto; }
.act-goal-dot         { width: 8px; height: 8px; border-radius: 50%; background: #e0dcf8; flex-shrink: 0; transition: all 0.2s; }
.act-goal-dot.done    { background: #9187d3; }
.act-goal-dot.current { background: #55ccaa; width: 10px; height: 10px; }

/* Hub */
.act-hub-title     { font-size: 24px; font-weight: 800; margin: 4px 0 18px; text-align: center; }
.act-session-count { text-align: center; font-size: 13px; color: #55ccaa; font-weight: 700; margin-bottom: 18px; }

/* Phase cards */
.act-phase-cards { display: flex; flex-direction: column; gap: 11px; margin: 4px 0; }
.act-phase-card {
    display: flex; align-items: center; gap: 14px;
    background: white; border-radius: 20px; padding: 16px 18px;
    cursor: pointer; transition: all 0.2s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-decoration: none;
}
.act-phase-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-1px); }
.act-phase-card.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
.act-phase-card.plan-done { border-color: rgba(85,204,170,0.3); }
.act-phase-card.do-ready {
    background: linear-gradient(135deg, #9187d3, #7b6fc7);
    color: white; box-shadow: 0 6px 20px rgba(145,135,211,0.3);
}
.act-phase-card.has-sessions { border-color: rgba(145,135,211,0.25); }
.act-phase-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.act-phase-info { flex: 1; min-width: 0; }
.act-phase-name { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.2; }
.act-phase-sub  { font-size: 13px; opacity: 0.6; margin-top: 2px; }
.act-phase-card.do-ready .act-phase-sub { opacity: 0.85; }
.act-phase-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #f0fdf9; color: #55ccaa; white-space: nowrap; flex-shrink: 0; }
.act-phase-badge--optional { background: #f5f5f5; color: #bbb; font-weight: 600; }

/* Goal chip inside do/start */
.act-goal-chip { font-size: 13px; color: #9187d3; font-weight: 600; margin-bottom: 10px; }

/* Briefing */
.act-briefing { padding-bottom: 8px; }
.act-briefing-title { font-size: 26px; font-weight: 800; margin: 0 0 12px; line-height: 1.2; }
.act-motivation-label { font-size: 12px; color: #3A3A3A; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.act-motivation-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.act-motivation-pill  { display: inline-block; padding: 8px 16px; border-radius: 99px; background: rgba(85,204,170,0.12); color: #1d7a5f; font-size: 14px; font-weight: 600; }

/* Coach callout */
.act-coach-callout { padding: 14px 18px; border-radius: 18px; font-size: 15px; line-height: 1.6; margin: 0 0 16px; overflow: hidden; }
.act-coach-callout.purple { background: rgba(145,135,211,0.08); }
.act-coach-callout.green  { background: rgba(85,204,170,0.08); }
.act-coach-callout.red    { background: rgba(251,113,121,0.07); }
.act-coach-callout-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.6; margin-bottom: 6px; }
.act-prev-stats { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.act-prev-stat  { font-size: 13px; padding: 3px 10px; border-radius: 99px; background: rgba(145,135,211,0.1); color: #9187d3; font-weight: 700; }
.act-prev-stat.end    { background: rgba(85,204,170,0.12); color: #1d7a5f; }
.act-prev-stat.safety { background: rgba(251,113,121,0.1);  color: #c44; }

/* Start / already-did */
.act-start-btn {
    display: block; width: 100%; max-width: 420px;
    padding: 18px 24px; font-size: 18px; font-weight: 800;
    background: linear-gradient(135deg, #9187d3, #7b6fc7);
    color: white; border: none; border-radius: 20px;
    cursor: pointer; transition: all 0.2s;
    margin: 20px auto 0;
    box-shadow: 0 6px 20px rgba(145,135,211,0.35);
}
.act-start-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(145,135,211,0.45); }
.act-start-btn:active { transform: translateY(0); }
.act-start-btn.act-start-btn-greyed {
    background: linear-gradient(135deg, #bbb, #aaa);
    box-shadow: none; cursor: default;
}
.act-start-btn.act-start-btn-greyed:hover { transform: none; box-shadow: none; }
.act-sud-hint {
    text-align: center; color: #fb7179; font-size: 13px;
    margin-top: 10px; font-weight: 600;
}
.act-already-did {
    display: block; text-align: center; color: #776ac8;
    font-size: 14px; margin-top: 14px; cursor: pointer;
    
    background: none; border: none; width: 100%; padding: 6px;
}
.act-already-did:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Live coaching */
.act-live-title  { font-size: 17px; font-weight: 700; margin: 0 0 14px; color: #555; }
.act-steps-card  { background: white; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; overflow: hidden; }
.act-checkin-widget {
    background: white; border-radius: 24px;
    padding: 24px 20px 18px; text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07); margin: 4px 0 12px;
    overflow: hidden;
}
.act-checkin-prompt { font-size: 13px; color: #9187d3; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.act-checkin-num    { font-size: 80px; font-weight: 900; line-height: 1; color: #ddd; transition: color 0.35s, transform 0.2s; display: block; margin: 2px 0 4px; }
.act-checkin-num.active { transform: scale(1.04); }
.act-checkin-coach  { font-size: 15px; color: #666; margin: 6px 0 2px; min-height: 22px; font-style: italic; display: none; }
.act-checkin-count  { font-size: 12px; color: #ccc; margin-top: 8px; }
.act-tool-hint {
    display: inline-block; font-size: 13px; color: #9187d3; font-weight: 600;
    border: 1.5px solid rgba(145,135,211,0.3); border-radius: 99px;
    padding: 7px 16px; cursor: pointer; transition: all 0.2s;
}
.act-tool-hint:hover { background: rgba(145,135,211,0.08); }
.act-done-btn {
    display: block; width: 100%; max-width: 420px;
    padding: 16px 24px; font-size: 17px; font-weight: 700;
    background: #55ccaa; color: white; border: none;
    border-radius: 18px; cursor: pointer; transition: all 0.2s;
    margin: 0 auto; box-shadow: 0 4px 14px rgba(85,204,170,0.3);
}
.act-done-btn:hover     { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(85,204,170,0.4); }
.act-done-btn:disabled  { background: #ccc; box-shadow: none; transform: none; cursor: not-allowed; }

/* Discomfort arc */
.act-arc-card  { background: rgba(145,135,211,0.06); border-radius: 20px; padding: 20px; text-align: center; margin-bottom: 20px; }
.act-arc-row   { display: flex; align-items: center; justify-content: center; gap: 16px; }
.act-arc-stat  { text-align: center; }
.act-arc-num   { font-size: 44px; font-weight: 900; line-height: 1; }
.act-arc-label { font-size: 12px; color: #aaa; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.act-arc-arrow { font-size: 22px; color: #ccc; }
.act-arc-note  { font-size: 14px; color: #55ccaa; font-weight: 600; margin-top: 10px; }

/* Log session */
.act-log-header { text-align: center; margin-bottom: 20px; }
.act-log-title  { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.act-log-sub    { font-size: 14px; color: #888; margin: 0; }
.act-sud-card   { background: white; border-radius: 18px; padding: 16px 18px; margin-bottom: 10px; overflow: hidden; }
.act-sud-label  { font-size: 13px; font-weight: 700; color: #9187d3; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 10px; }

/* Plan cards */
.act-plan-card { background: white; border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; overflow: hidden; }
.act-plan-detail-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; color: #9187d3; font-weight: 600;
    cursor: pointer; padding: 10px 0; border: none; background: none; width: 100%;
}
.act-plan-detail-area      { display: none; overflow: hidden; }
.act-plan-detail-area.open { display: block; }
.act-review-field-label    { font-size: 12px; color: #aaa; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.act-review-field-val      { font-size: 16px; color: #333; font-weight: 500; }

/* Plan steps link */
.act-plan-steps-link {
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #9187d3; font-weight: 600;
    padding: 14px 0 6px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

/* ── Planning cards (pcard) ──────────────────────────────────── */
.act-pcard {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: border-color 0.25s, box-shadow 0.25s;
}

/* Accent colours */
.act-pcard--green  { --pcard-accent: #55ccaa; --pcard-accent-bg: rgba(85,204,170,0.08); }
.act-pcard--purple { --pcard-accent: #9187d3; --pcard-accent-bg: rgba(145,135,211,0.08); }
.act-pcard--red    { --pcard-accent: #fb7179; --pcard-accent-bg: rgba(251,113,121,0.06); }

/* Card top — always visible */
.act-pcard-top {
    padding: 16px 18px 0;
}
.act-pcard-header {
    display: flex; align-items: center; gap: 10px; padding-bottom: 14px;
}
.act-pcard-label {
    font-size: 15px; font-weight: 700; flex: 1; line-height: 1.3;
}
/* Inline check icon in header — hidden by default, shown when done */
.act-pcard-check {
    font-size: 16px; color: var(--pcard-accent, #55ccaa); font-weight: 700;
    flex-shrink: 0; display: none;
}

/* Done summary row — hidden by default, shown when done */
.act-pcard-done-row {
    display: none; align-items: center; gap: 8px;
    padding: 0 0 14px;
}
.act-pcard-done-text {
    flex: 1; font-size: 14px; color: #666; font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Skipped row — hidden by default, shown when skipped */
.act-pcard-skip-row {
    display: none; align-items: center;
    padding: 0 0 14px;
}
.act-pcard-skip-label {
    font-size: 13px; color: #ccc; font-style: italic;margin-right:12px;
}

/* Card body — the interactive form area */
.act-pcard-body {
    border-top: 1px solid #f0f0f0;
    padding: 14px 18px 16px;
    background: var(--pcard-accent-bg, rgba(145,135,211,0.04));
}
.act-pcard-hint {
    font-size: 13px; color: #3a3a3a; margin: 0 0 12px; line-height: 1.5;
}
.act-pcard-fields {
    overflow: hidden; /* contain exerciseComponentContent floats */
}
.act-pcard-actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.04);
}
.act-pcard-done-btn {
    flex: 1; padding: 12px 16px; font-size: 15px; font-weight: 700;
    background: var(--pcard-accent, #55ccaa); color: white;
    border: none; border-radius: 14px; cursor: pointer; transition: all 0.2s;
}
.act-pcard-done-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.act-pcard-skip-btn {
    font-size: 14px; color: #3a3a3a; background: none; border: none;
    cursor: pointer; font-weight: 500; padding: 8px 6px;
    white-space: nowrap;
}
.act-pcard-skip-btn:hover { color: #776ac8; }

/* ── State: done ─────────────────────────────────────── */
.act-pcard.done {
    border-color: var(--pcard-accent, #55ccaa);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.act-pcard.done .act-pcard-check        { display: inline; }
.act-pcard.done .act-pcard-done-row     { display: flex; }
.act-pcard.done .act-pcard-skip-row     { display: none; }
.act-pcard.done .act-pcard-body         { display: none; }

/* ── State: skipped ──────────────────────────────────── */
.act-pcard.skipped {
    box-shadow: none;
    background: #fafafa;
    border-color: transparent;
}
.act-pcard.skipped .act-pcard-done-row  { display: none; }
.act-pcard.skipped .act-pcard-skip-row  { display: flex; }
.act-pcard.skipped .act-pcard-body      { display: none; }
.act-pcard.skipped .act-pcard-label     { opacity: 0.45; }
.act-pcard.skipped .act-pcard-top       { padding-bottom: 0; }

/* Plan confirmed */
.act-confirm-wrap  { text-align: center; padding: 16px 0; }
.act-confirm-emoji { font-size: 52px; display: block; margin-bottom: 10px; }
.act-confirm-title { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.act-confirm-sub   { font-size: 15px; color: #888; margin: 0 0 4px; }

/* Session celebrate */
.act-celebrate-wrap    { text-align: center; padding: 12px 0; }
.act-celebrate-emoji   { font-size: 48px; display: block; margin-bottom: 6px; }
.act-celebrate-title   { font-size: 28px; font-weight: 900; margin: 0 0 4px; }
.act-celebrate-arc     { background: white; border-radius: 20px; padding: 20px; margin: 18px 0; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.act-celebrate-arc-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.act-celebrate-peak    { font-size: 52px; font-weight: 900; color: #9187d3; line-height: 1; }
.act-celebrate-end     { font-size: 52px; font-weight: 900; color: #55ccaa; line-height: 1; }
.act-celebrate-arrow   { font-size: 24px; color: #ccc; }
.act-celebrate-arc-note { font-size: 14px; color: #888; margin-top: 10px; }
.act-celebrate-motivation {
    font-style: italic; font-size: 16px; color: #555; line-height: 1.6;
    margin: 16px 0; padding: 16px 20px;
    background: rgba(145,135,211,0.06); border-radius: 16px;
}
.act-celebrate-note { font-size: 14px; color: #888; margin-bottom: 24px; line-height: 1.5; }
.act-celebrate-btns { display: flex; flex-direction: column; gap: 10px; }

/* How it works link */
.act-how-link-wrap { text-align: center; margin-top: 28px; }
.act-how-link { background: none; border: none; color: #bbb; font-size: 13px; cursor: pointer; padding: 4px 8px; }

/* How it works slides */
.act-hiw-slide { display: flex; flex-direction: column; align-items: center; }
.act-hiw-svg-wrap { width: 100%; max-width: 300px; margin: 16px auto 8px; }
.act-hiw-svg { width: 100%; height: auto; display: block; }
.act-hiw-curve { stroke: #9187d3; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.act-hiw-curve--session { stroke-dasharray: 300; stroke-dashoffset: 300; animation: act-hiw-draw 1.2s ease forwards 0.2s; }
.act-hiw-curve--s1 { stroke-dasharray: 180; stroke-dashoffset: 180; animation: act-hiw-draw 0.8s ease forwards 0.1s; }
.act-hiw-curve--s2 { stroke-dasharray: 160; stroke-dashoffset: 160; animation: act-hiw-draw 0.8s ease forwards 0.4s; }
.act-hiw-curve--s3 { stroke-dasharray: 140; stroke-dashoffset: 140; animation: act-hiw-draw 0.8s ease forwards 0.7s; }
@keyframes act-hiw-draw { to { stroke-dashoffset: 0; } }
.act-hiw-fill { fill: rgba(145,135,211,0.08); stroke: none; }
.act-hiw-fill--s1 { fill: rgba(145,135,211,0.12); opacity: 0; animation: act-hiw-fadein 0.4s ease forwards 0.9s; }
.act-hiw-fill--s2 { fill: rgba(145,135,211,0.09); opacity: 0; animation: act-hiw-fadein 0.4s ease forwards 1.0s; }
.act-hiw-fill--s3 { fill: rgba(145,135,211,0.06); opacity: 0; animation: act-hiw-fadein 0.4s ease forwards 1.1s; }
@keyframes act-hiw-fadein { to { opacity: 1; } }
.act-hiw-dot { fill: #9187d3; }
.act-hiw-axis-lbl { font-size: 9px; fill: #bbb; font-family: inherit; }
.act-hiw-peak-lbl { font-size: 9px; fill: #9187d3; font-family: inherit; font-weight: 700; }
.act-hiw-node-lbl { font-size: 11px; font-weight: 700; font-family: inherit; text-anchor: middle; }
.act-hiw-title { font-size: 18px; font-weight: 800; color: #333; margin: 12px 0 6px; text-align: center; }
.act-hiw-sub { font-size: 14px; color: #888; line-height: 1.6; text-align: center; margin: 0 0 8px; max-width: 320px; }
.act-hiw-nav { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; }
.act-hiw-dots { display: flex; gap: 8px; }
.act-hiw-dot-pip { width: 8px; height: 8px; border-radius: 50%; background: #ddd; cursor: pointer; transition: background 0.2s; }
.act-hiw-dot-pip.active { background: #9187d3; }

/* Review */
.act-review-header       { background: white; border-radius: 20px; padding: 20px; margin-bottom: 14px; text-align: center; }
.act-review-summary-num  { font-size: 44px; font-weight: 900; color: #9187d3; line-height: 1; }
.act-review-summary-label { font-size: 14px; color: #aaa; }
.act-review-avg-peak     { font-size: 13px; color: #aaa; margin-top: 4px; }
.act-reset-details       { margin-top: 24px; text-align: center; }
.act-reset-summary       { display: inline; font-size: 13px; color: #bbb; cursor: pointer; list-style: none; }
.act-reset-summary::-webkit-details-marker { display: none; }
.act-review-chart-wrap   { margin-bottom: 16px; text-align: center; }
.act-review-card         { background: white; border-radius: 20px; overflow: hidden; margin-bottom: 10px; }
.act-review-card-header  { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; user-select: none; }
.act-review-card-date    { font-size: 14px; font-weight: 700; color: #333; flex: 1; }
.act-review-stats        { display: flex; gap: 5px; flex-wrap: wrap; }
.act-review-pill         { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.act-review-pill.peak    { background: rgba(145,135,211,0.1); color: #9187d3; }
.act-review-pill.end     { background: rgba(85,204,170,0.12); color: #1d7a5f; }
.act-review-pill.safety  { background: rgba(251,113,121,0.1); color: #c44; }
.act-review-chevron      { transition: transform 0.2s; color: #ccc; flex-shrink: 0; }
.act-review-card.open .act-review-chevron { transform: rotate(90deg); }
.act-review-body         { display: none; padding: 0 18px 18px; border-top: 1px solid #f5f5f5; overflow: hidden; }
.act-review-card.open .act-review-body   { display: block; }

/* ── Review reflection ───────────────────────────────────────────────────── */
.act-review-pill.rev-done { background: rgba(85,204,170,0.14); color: #1d7a5f; }
.act-review-card.reviewed .act-review-card-date { color: #555; }

.act-rev-section {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}
.act-rev-answers { display: flex; flex-direction: column; gap: 10px; }
.act-rev-answer-row { background: #fafafa; border-radius: 12px; padding: 10px 14px; }
.act-rev-answer-q {
    font-size: 11px; font-weight: 700; color: #aaa;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.act-rev-answer-a { font-size: 14px; color: #333; line-height: 1.5; }

/* Do-card specific elements */
.act-expect-num {
    font-size: 52px; font-weight: 900; color: #9187d3; line-height: 1; text-align: center; padding: 8px 0;
}
.act-docard-step {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; line-height: 1.4;
}
.act-docard-step:last-child { border-bottom: none; }
.act-docard-step-num {
    font-size: 12px; font-weight: 700; color: #9187d3; flex-shrink: 0; min-width: 18px;
}

/* ── Do-phase progress bar (Prepare · 5×Active · Reflect) ────────────────── */
.act-do-bar { margin: 0 0 20px; }
.act-do-bar-main {
    display: flex; align-items: center; gap: 4px;
}
.act-do-bar-seg {
    flex: 2; height: 7px; border-radius: 4px; background: #e8e8f0;
    transition: background 0.4s;
}
.act-do-bar-seg.active { background: #9187d3; animation: actBarPulse 2.2s ease-in-out infinite; }
.act-do-bar-seg.done   { background: #55ccaa; }
/* Active block sits between Prepare and Reflect and is wider so the bar reads
   as Prepare → Active → Reflect with Active as the centerpiece. */
.act-do-bar-seg--active { flex: 3; }
.act-do-bar-labels {
    display: flex; margin-top: 5px;
}
.act-do-bar-label {
    flex: 2; font-size: 10px; font-weight: 700; color: #ccc;
    text-transform: uppercase; letter-spacing: 0.3px; transition: color 0.3s;
}
.act-do-bar-label--mid        { flex: 3; text-align: center; }
.act-do-bar-label:last-child  { text-align: right; }
.act-do-bar-label--active     { color: #9187d3; }
.act-do-bar-label--done       { color: #55ccaa; }
@keyframes actBarPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Briefing screen (do/start) ───────────────────────────────────────────── */
.act-brief-section {
    background: white; border-radius: 18px; padding: 16px 18px;
    margin-bottom: 12px; overflow: hidden;
}
.act-brief-section--goal {

}
.act-brief-section--coach {

}
.act-brief-section-label {
    font-size: 11px; font-weight: 700; color: #aaa;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px;
}
.act-brief-check-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 0; font-size: 14px; color: #444; line-height: 1.4;
}
.act-brief-check-icon {
    color: #55ccaa; font-weight: 800; flex-shrink: 0; margin-top: 1px;
}
.act-brief-expect-row {
    display: flex; align-items: baseline; gap: 4px;
}
.act-brief-expect-num {
    font-size: 48px; font-weight: 900; color: #9187d3; line-height: 1;
}
.act-brief-expect-denom {
    font-size: 20px; color: #bbb; font-weight: 500;
}
.act-brief-expect-note {
    font-size: 13px; color: #888; margin-left: 8px; align-self: center;
}
.act-brief-goal-text {
    font-size: 16px; color: #333; font-style: italic; line-height: 1.6; font-weight: 500;
}
.act-brief-actions {
    margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}

/* ── Initial SUD screen (do/initial-sud) ─────────────────────────────────── */
.act-sud-intro { text-align: center; padding: 8px 0 4px; }

/* ── Guidance portal — sticky sibling above exerciseContainer (do/begin) ──── */
#actGuidancePortal {
    display: none;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 8px 0 0;
    background: transparent;
}

/* ── Guidance box label strip (do/begin) ─────────────────────────────────── */
.act-guidance-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9187d3;
    background: rgba(255,255,255,0.8);
    margin: -20px -8px 0px -8px;
    padding: 7px 22px;
    border-radius: 18px 18px 0 0;
    border-bottom: 1px solid rgba(145,135,211,0.12);
    transition: opacity 0.2s ease;
}

/* ── Guidance box (do/begin) ─────────────────────────────────────────────── */
.act-guidance-box {
    background: linear-gradient(135deg, rgba(248,246,255,0.57), rgba(241,247,255,0.57));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px; padding: 8px 8px; margin-bottom: 16px;
    border: 1.5px solid rgba(145,135,211,0.18);
}
.act-guidance-msg {
    font-size: 16px; line-height: 1.7; color: #333; font-weight: 500;
    transition: opacity 0.15s ease;
}

/* ── Guidance history log (do/begin) ─────────────────────────────────────── */
.act-guidance-history {
    max-height: 240px; overflow-y: auto; scroll-behavior: smooth;
    display: flex; flex-direction: column; gap: 14px;
    padding-bottom: 0px; /* reserve space for absolute "Latest" button */
    scrollbar-width: thin; scrollbar-color: rgba(145,135,211,0.25) transparent;
    position: relative; /* makes this the offsetParent for child entries */
}
.act-guidance-history::-webkit-scrollbar { width: 4px; }
.act-guidance-history::-webkit-scrollbar-track { background: transparent; }
.act-guidance-history::-webkit-scrollbar-thumb { background: rgba(145,135,211,0.3); border-radius: 99px; }
.act-guidance-entry {
    display: flex; flex-direction: column; gap: 4px;
}
.act-guidance-entry + .act-guidance-entry {
    padding-top: 14px;
    border-top: 1px solid rgba(145,135,211,0.12);
}
.act-guidance-trigger-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: #aaa;
}
@keyframes actEntryIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.act-guidance-entry--new {
    animation: actEntryIn 0.35s ease forwards;
}
/* Absolute-positioned — never affects layout, no resize flash */
.act-guidance-latest-btn {
    display: none;
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    align-items: center; gap: 4px;
    padding: 5px 14px; border-radius: 99px;
    font-size: 12px; font-weight: 700; color: #9187d3;
    background: rgba(255,255,255,0.92); border: 1.5px solid rgba(145,135,211,0.35);
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(145,135,211,0.18);
}

/* ── Coach prompts ───────────────────────────────────────────────────────── */
.act-coach-prompt {
    margin-top: 10px; display: inline-block;
}
.act-coach-prompt-q {
    font-size: 13px; font-weight: 600; color: #555;
}
.act-coach-prompt-options {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
}
.act-coach-prompt-opt {
    padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 600;
    background: white; border: 1.5px solid #e0ddf5; color: #9187d3;
    cursor: pointer; transition: all 0.15s;
}
.act-coach-prompt-opt:hover { background: rgba(145,135,211,0.08); border-color: #9187d3; }
.act-coach-prompt-opt--selected {
    background: #9187d3; color: white; border-color: #9187d3;
}
.act-coach-prompt-submit {
    border-radius: 12px; padding: 9px 18px; background: #9187d3;
    color: white; border-color: #9187d3; align-self: flex-start;
}
.act-coach-prompt-submit:hover { background: #7c72c0; }
.act-coach-prompt-text {
    width: 100%; min-height: 70px; padding: 10px 12px;
    border-radius: 12px; border: 1.5px solid #e8e8f0; font-size: 14px;
    color: #333; resize: none; box-sizing: border-box;
    font-family: inherit;
}
.act-coach-prompt-text:focus { outline: none; border-color: #9187d3; }
.act-coach-prompt-answered {
    margin-top: 8px; display: flex; flex-direction: column; gap: 3px;
}
.act-coach-prompt-answered-q {
    font-size: 11px; color: #aaa; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.act-coach-prompt-answered-a {
    display: inline-block; font-size: 13px; font-weight: 700; color: #9187d3;
    padding: 5px 12px; border-radius: 8px; background: rgba(145,135,211,0.1);
}

/* ── Module pills ──────────────────────────────────────────────────────────── */
.act-modules {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.act-module-pill {
    padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600;
    background: white; border: 1.5px solid #e8e8f0; color: #555;
    cursor: pointer; transition: all 0.18s;
}
.act-module-pill:hover {
    border-color: #9187d3; color: #9187d3; background: rgba(145,135,211,0.06);
}
.act-module-pill--active {
    border-color: #9187d3; color: white; background: #9187d3;
}

/* ── Expandable sections (do/begin) ──────────────────────────────────────── */
.act-expand {
    background: white; border-radius: 18px; margin-bottom: 10px;
    overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.act-expand[open] { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.act-expand-summary {
    padding: 15px 18px; font-size: 15px; font-weight: 700; color: #333;
    cursor: pointer; user-select: none; list-style: none;
    display: flex; align-items: center; gap: 8px;
}
.act-expand-summary::after {
    content: '›'; margin-left: auto; color: #ccc; font-size: 18px;
    transition: transform 0.2s;
}
.act-expand[open] .act-expand-summary::after { transform: rotate(90deg); }
.act-expand-summary::-webkit-details-marker { display: none; }
.act-expand > :not(summary) { padding: 0 18px 16px; }
.act-expand-sud-val {
    font-size: 13px; color: #9187d3; font-weight: 600;
}
.act-checkin-count {
    font-size: 12px; color: #aaa; text-align: center; padding-top: 6px;
}

/* ── Big done button (do/begin) ──────────────────────────────────────────── */
.act-done-wrap {
    padding: 24px 0 8px; position: sticky; bottom: 0;
    background: linear-gradient(to top, rgba(246,245,255,1) 60%, rgba(246,245,255,0));
}
.act-done-big {
    display: block; width: 100%; max-width: 420px;
    padding: 20px 24px; font-size: 19px; font-weight: 800;
    background: linear-gradient(135deg, #55ccaa, #3db896);
    color: white; border: none; border-radius: 20px;
    cursor: pointer; transition: all 0.2s; margin: 0 auto;
    box-shadow: 0 6px 24px rgba(85,204,170,0.4);
    letter-spacing: -0.2px;
}
.act-done-big:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(85,204,170,0.5); }
.act-done-big:active { transform: translateY(0); }

/* ── Done confirm screen (do/done-confirm) ───────────────────────────────── */
.act-done-confirm-wrap {
    text-align: center; padding: 20px 0;
}
.act-done-confirm-icon {
    font-size: 52px; color: #55ccaa; font-weight: 900;
    line-height: 1; margin-bottom: 16px;
}
.act-done-confirm-title {
    font-size: 26px; font-weight: 800; margin: 0 0 8px;
}
.act-done-confirm-sub {
    font-size: 15px; color: #888; margin: 0 0 28px; line-height: 1.5;
}

/* ── Reflection cards (do/complete) ──────────────────────────────────────── */
.act-reflect-card {
    background: white; border-radius: 20px; padding: 18px 20px;
    margin-bottom: 12px; overflow: hidden;
}
.act-reflect-q {
    font-size: 15px; font-weight: 700; margin: 0 0 12px; color: #333;
}

/* ── Proactive guidance box glow (#1 & #2) ───────────────────────────────── */
@keyframes actGuidancePing {
    0%   { border-color: rgba(145,135,211,0.7); box-shadow: 0 0 0 5px rgba(145,135,211,0.12); }
    100% { border-color: rgba(145,135,211,0.18); box-shadow: none; }
}
.act-guidance-box--proactive {
    animation: actGuidancePing 1.8s ease forwards;
}

/* ── Mindset picker (do-phase "My goal" tool) ────────────────────────────── */
.act-mindset-picker {
    display: flex; flex-direction: column; gap: 10px;
}
.act-mindset-option {
    width: 100%; text-align: left;
    background: #fafafa; border: 1.5px solid #e8e8f0; border-radius: 14px;
    padding: 12px 14px; cursor: pointer; transition: all 0.2s;
    -webkit-tap-highlight-color: transparent; user-select: none;
    display: flex; flex-direction: column; gap: 4px;
}
.act-mindset-option:active { opacity: 0.7; transform: scale(0.985); }
.act-mindset-option-label {
    font-size: 15px; font-weight: 700; color: #333; line-height: 1.2;
}
.act-mindset-option-hint {
    font-size: 12px; font-weight: 500; color: #888; line-height: 1.3;
}
.act-mindset-option--active {
    background: #9187d3; border-color: #9187d3;
    box-shadow: 0 2px 10px rgba(145,135,211,0.32);
}
.act-mindset-option--active .act-mindset-option-label,
.act-mindset-option--active .act-mindset-option-hint { color: white; }
.act-mindset-hint {
    font-size: 11px; color: #bbb; text-align: center;
    margin-top: 10px; font-weight: 500; letter-spacing: 0.1px;
}
.act-mindset-reminder {
    background: #f3f1ff; color: #6c63ff;
    border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
    font-size: 13px; font-weight: 600; line-height: 1.3;
}

/* ── Done button warn state (at peak) ────────────────────────────────────── */
.act-done-big--warn {
    background: linear-gradient(135deg, #55ccaa, #3db896) !important;
    box-shadow: 0 6px 24px rgba(85,204,170,0.4) !important;
}
.act-done-big--warn:hover {
    box-shadow: 0 10px 28px rgba(85,204,170,0.5) !important;
}

/* ── Done confirm warn variant ───────────────────────────────────────────── */
.act-done-confirm-icon--warn {
    color: #e8975a; font-size: 52px; font-weight: 900;
    line-height: 1; margin-bottom: 16px;
    font-style: normal;
}

/* ── Plan card sequential reveal ─────────────────────────────────────────── */
@keyframes actCardReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.act-pcard--pending {
    display: none;
}
.act-pcard--pending.revealed {
    display: block;
    animation: actCardReveal 0.35s ease forwards;
}
.act-pcard--blue { --pcard-accent: #89C4FF; --pcard-accent-bg: rgba(137,196,255,0.08); }

/* Plan completion banner */
.act-plan-completion {
    text-align: center;
    padding: 24px 16px 8px;
}
.act-plan-completion.act-pcard--pending {
    display: none;
}
.act-plan-completion.revealed {
    display: block;
    animation: actCardReveal 0.4s ease forwards;
}

/* Tap-to-edit: done/skipped card tops are clickable */
.act-pcard.done .act-pcard-top,
.act-pcard.skipped .act-pcard-top { cursor: pointer; user-select: none; }
.act-pcard.done .act-pcard-top:hover,
.act-pcard.skipped .act-pcard-top:hover { background: rgba(0,0,0,0.015); border-radius: 18px 18px 0 0; }

/* Activity date/time picker */
.act-scheduler-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 8px;
}
.act-scheduler-row-label {
    font-size: 14px; font-weight: 600; color: #555;
    min-width: 48px;
}
.act-scheduler-optional { font-weight: 400; color: #aaa; }
.act-scheduler-field-wrap {
    display: flex; align-items: center; gap: 8px; flex: 1;
}
input[type="date"].act-scheduler-input,
input[type="time"].act-scheduler-input {
    flex: 1; padding: 10px 12px; box-sizing: border-box;
    background: #f8f8f8; border-radius: 10px;
    border: 2px solid #e0e0e0; font-size: 15px; color: #333;
    cursor: pointer; min-width: 0;
}
input[type="date"].act-scheduler-input:focus,
input[type="time"].act-scheduler-input:focus {
    outline: none; border-color: #9187d3;
}
.act-scheduler-clear {
    background: none; border: none; color: #9187d3;
    font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 4px 2px; white-space: nowrap; flex-shrink: 0;
}
.act-scheduler-clear:hover { color: #776ac8; }
.act-scheduler-clear--hidden { visibility: hidden; pointer-events: none; }
.act-scheduler-time-row--disabled {
    opacity: 0.4; pointer-events: none;
}

/* Prep interactive checklist */
.act-prep-checklist {
    background: white; border-radius: 20px; overflow: hidden;
    margin-bottom: 12px; border: 2px solid rgba(137,196,255,0.5);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.act-prep-checklist-header { padding: 16px 18px 12px; border-bottom: 1px solid #f0f0f0; }
.act-prep-checklist-title { font-size: 15px; font-weight: 700; color: #333; margin: 0 0 3px; }
.act-prep-checklist-sub { font-size: 13px; color: #aaa; margin: 0; }
.act-prep-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid #f5f5f5; transition: background 0.15s;
}
.act-prep-item:last-child { border-bottom: none; }
.act-prep-item.item-done { background: rgba(85,204,170,0.05); }
.act-prep-item.item-skipped { background: #fafafa; }
.act-prep-item-status { font-size: 17px; flex-shrink: 0; display: none; }
.act-prep-item.item-done .act-prep-item-status { display: block; color: #55ccaa; }
.act-prep-item.item-skipped .act-prep-item-status { display: block; color: #ddd; content: '—'; }
.act-prep-item-text { flex: 1; font-size: 14px; color: #333; line-height: 1.4; }
.act-prep-item.item-done .act-prep-item-text { color: #bbb; text-decoration: line-through; }
.act-prep-item.item-skipped .act-prep-item-text { color: #ccc; }
.act-prep-item-btns { display: flex; gap: 6px; flex-shrink: 0; }
.act-prep-item.item-done .act-prep-item-btns,
.act-prep-item.item-skipped .act-prep-item-btns { display: none; }
.act-prep-item-done-btn {
    padding: 7px 14px; background: #55ccaa; color: white;
    border: none; border-radius: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: filter 0.15s; white-space: nowrap;
}
.act-prep-item-done-btn:hover { filter: brightness(1.08); }
.act-prep-item-skip-btn {
    padding: 7px 8px; background: none; color: #ccc;
    border: none; font-size: 13px; cursor: pointer; font-weight: 500; white-space: nowrap;
}
.act-prep-item-skip-btn:hover { color: #aaa; }

/* ── Fixed bottom plan progress bar ─────────────────────────────────────── */
.act-plan-bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 10px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.act-plan-bottom-inner {
    display: flex; gap: 5px; max-width: 600px; margin: 0 auto;
}
.act-plan-seg {
    flex: 1; height: 5px; border-radius: 99px; background: #eee;
    transition: background 0.35s ease;
}
.act-plan-seg.done    { background: var(--seg-color, #55ccaa); }
.act-plan-seg.skipped { background: #ddd; }
.act-plan-seg.active  { background: var(--seg-color, #9187d3); animation: actSegPulse 1.8s ease-in-out infinite; }
.act-plan-seg.pending { background: #eee; }
/* Segment accent colors */
.act-plan-seg--green  { --seg-color: #55ccaa; }
.act-plan-seg--purple { --seg-color: #9187d3; }
.act-plan-seg--red    { --seg-color: #fb7179; }
.act-plan-seg--blue   { --seg-color: #89C4FF; }
@keyframes actSegPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}
/* Spacer so content isn't hidden behind the fixed bar */
.act-plan-bottom-pad { height: 60px; }

/* Plan complete circle + checkmark animation */
.act-plan-anim-wrap {
    display: flex; flex-direction: column; align-items: center; padding: 8px 16px 4px;
}
.act-plan-anim-svg { width: 130px; height: 130px; overflow: visible; }
.act-plan-anim-bg { fill: rgba(85,204,170,0.08); }
.act-plan-anim-circle {
    fill: none; stroke: #55ccaa; stroke-width: 6;
    stroke-dasharray: 264; stroke-dashoffset: 264; stroke-linecap: round;
    transform-origin: 50px 50px; transform: rotate(-90deg);
}
.act-plan-anim-check {
    fill: none; stroke: #55ccaa; stroke-width: 6;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 75; stroke-dashoffset: 75;
}
.act-plan-anim-svg.animate .act-plan-anim-circle {
    animation: actPlanCircleFill 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
}
.act-plan-anim-svg.animate .act-plan-anim-check {
    animation: actPlanCheckDraw 0.4s cubic-bezier(0.4,0,0.2,1) 0.6s forwards;
}
@keyframes actPlanCircleFill { to { stroke-dashoffset: 0; } }
@keyframes actPlanCheckDraw  { to { stroke-dashoffset: 0; } }

/* Safety behavior tracker (extends act-pcard pattern) */
.sb-top-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.sb-top-header-text { flex: 1; min-width: 0; }
.sb-top-header-link { font-size: 14px; flex-shrink: 0; padding-top: 4px; }

/* Closed-state summary: multi-row labeled values */
.sb-card-summary {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}
.sb-card-summary-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 2px;
}
.sb-card-summary-row:last-child { margin-bottom: 0; }
.sb-card-summary-label {
    color: #aaa;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    min-width: 78px;
    letter-spacing: 0.2px;
}
.sb-card-summary-val {
    color: #555;
    flex: 1;
    word-break: break-word;
}

/* Click-to-edit affordance on closed cards */
.sb-card .act-pcard-top { cursor: pointer; user-select: none; transition: background 0.15s; }
.sb-card .act-pcard-top:hover { background: rgba(145,135,211,0.05); }
.sb-card .act-pcard-header { align-items: center; }
.sb-card-edit-affordance {
    flex-shrink: 0;
    color: #c7c0e8;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    transition: color 0.15s;
}
.sb-card .act-pcard-top:hover .sb-card-edit-affordance { color: #9187d3; }

/* Skipped state: show summary faded rather than empty skip-row */
.sb-card.skipped .act-pcard-skip-row { display: none; }
.sb-card.skipped .act-pcard-done-row { display: flex; }
.sb-card.skipped .act-pcard-top { opacity: 0.55; }

/* Fullscreen edit page (plan-style step cards) */
.sb-edit-page {
    padding: 4px 4px 24px;
    display: flow-root;
}
.sb-edit-back {
    margin-bottom: 18px;
}
.sb-edit-page-title {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin: 8px 0 22px;
    line-height: 1.25;
    color: #2a2a2a;
}
.sb-edit-finish {
    text-align: center;
    margin-top: 16px;
    padding-top: 8px;
}

/* Completion banner with Done button */
.sb-completion {
    text-align: center;
    padding: 24px 16px 16px;
    margin-top: 16px;
}
.sb-completion--hidden { display: none; }
.sb-completion .standardButton { margin-top: 8px; }

/* Page transitions */
@keyframes sbPageEnterEdit {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sbPageEnterList {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.sb-page-enter-edit { animation: sbPageEnterEdit 0.25s cubic-bezier(0.4,0,0.2,1); }
.sb-page-enter-list { animation: sbPageEnterList 0.25s cubic-bezier(0.4,0,0.2,1); }

/* ── Reflect complete: growth animation ──────────────────────────────────── */
/* Leaf rotation is baked into SVG transform attribute — CSS only handles opacity */
.act-rev-anim-svg { overflow: visible; }
.act-rev-bg  { fill: rgba(145,135,211,0.07); }

.act-rev-ground {
    stroke: rgba(145,135,211,0.25); stroke-width: 2; stroke-linecap: round; fill: none;
    opacity: 0;
}
.act-rev-stem {
    fill: none; stroke: #55ccaa; stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 43; stroke-dashoffset: 43;
}
.act-rev-leaf  { fill: #55ccaa; opacity: 0; }
.act-rev-glow  { fill: rgba(145,135,211,0.2); opacity: 0; }
.act-rev-dot   { fill: #9187d3; opacity: 0; }
.act-rev-rise  { fill: #9187d3; opacity: 0; }

/* Triggered by .animate class */
.act-rev-anim-svg.animate .act-rev-ground {
    animation: actRevFade 0.3s ease 0.1s forwards;
}
.act-rev-anim-svg.animate .act-rev-stem {
    animation: actRevStemDraw 0.65s ease-out 0.15s forwards;
}
.act-rev-anim-svg.animate .act-rev-leaf-l {
    animation: actRevFade 0.4s ease 0.72s forwards;
}
.act-rev-anim-svg.animate .act-rev-leaf-r {
    animation: actRevFade 0.4s ease 0.94s forwards;
}
.act-rev-anim-svg.animate .act-rev-glow {
    animation: actRevFade 0.5s ease 1.15s forwards;
}
.act-rev-anim-svg.animate .act-rev-dot {
    animation: actRevFade 0.3s ease 1.2s forwards;
}
.act-rev-anim-svg.animate .act-rev-rise-1 {
    animation: actRevRise 1.1s ease-out 1.35s forwards;
}
.act-rev-anim-svg.animate .act-rev-rise-2 {
    animation: actRevRise 1.1s ease-out 1.5s forwards;
}
.act-rev-anim-svg.animate .act-rev-rise-3 {
    animation: actRevRise 1.1s ease-out 1.42s forwards;
}

@keyframes actRevFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes actRevStemDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes actRevRise {
    0%   { opacity: 0;   transform: translateY(0px);   }
    25%  { opacity: 0.9; transform: translateY(-7px);  }
    100% { opacity: 0;   transform: translateY(-24px); }
}

/* ── Moment tool ──────────────────────────────────────────────────────────── */
/* Modifier: simplified progress bar (no Prepare/Reflect segments) */
.act-do-bar--moment .act-do-bar-active-group { flex: 1; }

/* Entry screen */
.moment-entry {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 40px 8px 24px;
}
.moment-entry-icon { font-size: 48px; margin-bottom: 16px; }
.moment-entry-title { font-size: 22px; font-weight: 800; color: #2d2d44; margin: 0 0 10px; }
.moment-entry-sub {
    font-size: 15px; color: #888; line-height: 1.6; margin: 0 0 32px; max-width: 320px;
}
.moment-btn-primary {
    width: 100%; max-width: 320px; padding: 16px; margin-bottom: 12px;
    background: #9187d3; color: white; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 700; cursor: pointer;
}
.moment-btn-primary:active { background: #7b71bb; }
.moment-btn-secondary {
    width: 100%; max-width: 320px; padding: 14px;
    background: none; color: #9187d3; border: 2px solid #9187d3;
    border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.moment-btn-secondary:active { background: rgba(145,135,211,0.08); }

/* Log-past success screen */
.moment-log-success {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 48px 16px 32px;
}
.moment-log-success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: #55ccaa; color: white;
    font-size: 28px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.moment-log-success-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.moment-log-success-sub   { font-size: 14px; color: #888; margin: 0 0 28px; }

/* History view */
.moment-history { padding: 4px 0; }
.moment-history-top { display: flex; flex-direction: column; }
.moment-history-title { font-size: 20px; font-weight: 800; margin: 0 0 12px; }

.moment-tab-bar {
    display: flex; gap: 8px; margin-bottom: 16px;
}
.moment-tab {
    flex: 1; padding: 10px; border-radius: 10px;
    border: 2px solid #e0ddf5; background: white;
    color: #9187d3; font-size: 14px; font-weight: 600; cursor: pointer;
}
.moment-tab--active {
    background: #9187d3; color: white; border-color: #9187d3;
}

.moment-history-list { display: flex; flex-direction: column; gap: 10px; }
.moment-history-item {
    background: white; border-radius: 14px; padding: 14px 16px;
}
.moment-history-item-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.moment-history-date  { font-size: 14px; font-weight: 700; color: #2d2d44; }
.moment-history-title { font-size: 14px; font-weight: 700; color: #2d2d44; flex: 1 1 auto; margin-right: 10px; }
.moment-history-title + .moment-history-date { font-size: 12px; font-weight: 600; color: #888; }
.moment-history-badge {
    font-size: 11px; font-weight: 700; color: #9187d3;
    background: rgba(145,135,211,0.12); border-radius: 6px; padding: 2px 7px;
}
.moment-history-suds  { font-size: 13px; color: #888; margin-bottom: 4px; }
.moment-history-suds span { margin-right: 14px; }
.moment-history-suds b { color: #2d2d44; }
.moment-history-notes { font-size: 13px; color: #aaa; font-style: italic; }

/* Calendar heatmap */
.cal-heatmap { width: 100%; }
.cal-heatmap-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.cal-heatmap-title { font-size: 16px; font-weight: 700; color: #2d2d44; }
.cal-heatmap-nav {
    background: none; border: none; cursor: pointer;
    font-size: 22px; color: #9187d3; padding: 4px 10px;
    border-radius: 8px; line-height: 1;
}
.cal-heatmap-nav:hover { background: rgba(145,135,211,0.1); }
.cal-heatmap-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-heatmap-day-name {
    text-align: center; font-size: 11px; font-weight: 600;
    color: #bbb; padding: 2px 0 6px;
}
.cal-heatmap-cell {
    aspect-ratio: 1; border-radius: 6px;
    background: #f4f2fd;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.cal-heatmap-cell--empty { background: transparent; }
.cal-heatmap-cell--today { outline: 2px solid #9187d3; outline-offset: -2px; }
.cal-heatmap-day-num {
    font-size: 12px; color: #bbb;
}
.cal-heatmap-cell--active .cal-heatmap-day-num { color: white; font-weight: 700; }
.cal-heatmap-cell--tappable { cursor: pointer; }
.cal-heatmap-cell--tappable:hover { filter: brightness(1.12); }

/* Entry detail rows (inside history list and overlay) */
.moment-detail-row { margin-top: 10px; }
.moment-detail-label {
    font-size: 11px; font-weight: 700; color: #9187d3;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px;
}
.moment-detail-text { font-size: 14px; color: #444; line-height: 1.5; }
.moment-detail-sep {
    font-size: 12px; font-weight: 700; color: #aaa;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-top: 1px solid #f0eeff; margin: 14px 0 10px; padding-top: 10px;
}

/* Day overlay */
.moment-day-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(45,45,68,0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: momentOverlayIn 0.22s ease;
}
@keyframes momentOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.moment-day-overlay-card {
    background: white; border-radius: 24px 24px 0 0;
    width: 100%; max-width: 520px; max-height: 80vh;
    display: flex; flex-direction: column;
    animation: momentCardIn 0.28s cubic-bezier(0.16,1,0.3,1);
}
@keyframes momentCardIn {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.moment-day-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 12px; border-bottom: 1px solid #f0eeff; flex-shrink: 0;
}
.moment-day-overlay-title { font-size: 17px; font-weight: 800; color: #2d2d44; }
.moment-day-overlay-close {
    background: #f4f2fd; border: none; border-radius: 50%;
    width: 30px; height: 30px; font-size: 18px; cursor: pointer;
    color: #9187d3; display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.moment-day-overlay-body {
    padding: 16px 20px 28px; overflow-y: auto;
}

/* --- Unified exposure completion summary --- */

/* Flat hero: white surface, a green border that traces the perimeter, then
   the card body shifts to light green and very slowly transitions into a
   purple→green wash. */
.exerciseIntro.summaryHero {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 26px 22px 24px;
  margin: 0 auto 12px;
  color: #2a2744;
  position: relative;
  z-index: 5;
  box-shadow: 0 2px 14px -6px rgba(58, 47, 105, 0.10);
  max-width: 700px;
  isolation: isolate;
}

.exerciseIntro.summaryHero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(145, 135, 211, 0.55) 0%,
    rgba(85, 204, 170, 0.55) 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.exerciseIntro.summaryHero > * {
  position: relative;
  z-index: 1;
}

.summaryHeroBorder {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.exerciseIntro.summaryHero center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.exerciseIntro.summaryHero b {
  color: #2fa080;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  display: inline-block;
}

.exerciseIntro.summaryHero .summaryHeroTitle {
  margin: 16px 0 6px;
  font-size: 1.45rem;
  font-weight: 700;
  text-align: center;
  color: #2a2744;
  line-height: 1.25;
}

.exerciseIntro.summaryHero .summaryHeroBody {
  margin: 0 auto;
  max-width: 560px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #4a4560;
  text-align: center;
}

.exerciseIntro.summaryHero .exerciseSummaryCallout {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: #2a2744;
  border-radius: 14px;
}
.exerciseIntro.summaryHero .exerciseSummaryCallout .standardButton {
  margin-top: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .exerciseIntro.summaryHero {
    animation:
      heroCalmEnter 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards,
      heroBgGreen 700ms 1650ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .exerciseIntro.summaryHero::before {
    animation: heroGradientFade 9000ms 2600ms ease-in-out forwards;
  }
  .summaryHeroBorder rect {
    animation: heroBorderDraw 1400ms 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .exerciseIntro.summaryHero b {
    animation: heroTextRise 650ms 600ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .exerciseIntro.summaryHero .summaryHeroTitle {
    animation: heroLineRise 700ms 850ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .exerciseIntro.summaryHero .summaryHeroBody {
    animation: heroLineRise 700ms 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
}

@keyframes heroCalmEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroBgGreen {
  to { background-color: rgba(85, 204, 170, 0.18); }
}

@keyframes heroGradientFade {
  to { opacity: 1; }
}

@keyframes heroBorderDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes heroTextRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroLineRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mainExposureContent.summary {
  background: transparent;
  border-radius: 24px;
  padding: 28px 10px 8px !important;
  position: relative;
  z-index: 1;
}

.mainExposureContent.summary > div[style*="padding:10px"],
.mainExposureContent.summary > div[style*="padding: 10px"] {
  padding: 4px 6px 10px !important;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.mainExposureContent.summary .exerciseSummarySection {
  background: #ffffff;
  border: 1px solid #ecebf5;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(58, 58, 58, 0.04);
  margin: 0 0 12px 0;
  padding: 18px 20px;
  max-width: 700px;
}

.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] {
  background: #ffffff !important;
  border: 1px solid #ecebf5;
}

.mainExposureContent.summary .discomfortChartCard .discomfortChartWrapper,
.mainExposureContent.summary .thisExerciseStatsCard .discomfortChartWrapper,
.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] .discomfortChartWrapper {
  background: linear-gradient(180deg, rgba(251,113,121,0.08) 0%, rgba(145,135,211,0.06) 55%, rgba(85,204,170,0.08) 100%);
  border-radius: 14px;
  padding: 12px 8px;
  margin-top: 6px;
  min-height: 240px;
  text-align: center;
  position: relative;
}

.mainExposureContent.summary .discomfortChartCard .discomfortChartWrapper canvas,
.mainExposureContent.summary .thisExerciseStatsCard .discomfortChartWrapper canvas,
.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] .discomfortChartWrapper canvas {
  min-height: 220px !important;
}

.mainExposureContent.summary .exerciseSummarySection h3,
.mainExposureContent.summary .exerciseSummarySection h4,
.mainExposureContent.summary .exerciseSummarySection h5 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #2a2744;
}

.mainExposureContent.summary .exerciseSummarySection h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

.mainExposureContent.summary .exerciseSummarySection h5 {
  font-size: 14px;
  color: #2a2744;
  font-weight: 600;
}

.mainExposureContent.summary #statusSummary {
  padding: 0 !important;
  color: #4a4a62;
  font-size: 14px;
  line-height: 1.5;
}

.mainExposureContent.summary .exerciseSummarySection[style*="#d4ccff"] {
  background: #f3f0ff !important;
  border: 1px solid #e0d9ff;
}

/* Unified label used in the top-left of every summary card */
.summaryCardLabel {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: none;
  color: #9187d3;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: left;
}

.summaryCardLabel b {
  font-weight: 600;
}

.summaryCardBody {
  width: 100%;
}

.summaryCardBody--center {
  text-align: center;
}

.mainExposureContent.summary .summaryCard {
  text-align: left;
}

.mainExposureContent.summary .achievementBarContainer {
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  border: 1px solid #ecebf5;
  background: #fbfaff;
}

.mainExposureContent.summary .exerciseSummarySection.front[style*="background:none"],
.mainExposureContent.summary .exerciseSummarySection.front[style*="background: none"] {
  background: transparent !important;
  border: none;
  box-shadow: none;
  padding: 10px 4px 4px;
}

.mainExposureContent.summary .exerciseSummarySection.front[style*="background:none"] h5,
.mainExposureContent.summary .exerciseSummarySection.front[style*="background: none"] h5 {
  text-align: left;
  margin-bottom: 10px;
  padding-left: 4px;
}

.mainExposureContent.summary .exposureTool {
  background: #ffffff;
  border: 1px solid #ecebf5;
  box-shadow: none;
  border-radius: 16px;
  width: calc(33.333% - 12px);
  min-width: 170px;
  height: auto;
  min-height: 76px;
  padding: 12px 14px;
  margin: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 1rem;
  vertical-align: middle;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mainExposureContent.summary .exposureTool:hover {
  box-shadow: 0 6px 16px rgba(145, 135, 211, 0.18);
  border-color: #d9d2f7;
  transform: translateY(-1px);
}

.mainExposureContent.summary .exposureTool > div:first-child {
  width: 48px !important;
  flex: 0 0 48px;
  text-align: center;
}

.mainExposureContent.summary .exposureToolImg {
  max-height: 48px;
  width: 48px;
}

.mainExposureContent.summary .exposureToolLabel {
  text-align: left;
  width: auto !important;
  margin-left: 4px;
  font-size: 0.98rem;
  color: #2a2744;
  line-height: 1.25;
  flex: 1 1 auto;
}

.mainExposureContent.summary #adherenceSummaryMount.exerciseSummarySection {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 4px;
}

.mainExposureContent.summary .achievementDropContainer {
  background: #fbfaff;
  border: 1px solid #ecebf5;
  border-radius: 14px;
  padding: 10px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .mainExposureContent.summary {
    padding: 24px 6px 8px !important;
  }
  .mainExposureContent.summary .exposureTool {
    width: 100%;
    margin: 4px 0;
  }
  .exerciseIntro.summaryHero {
    padding: 18px 14px 24px;
  }
  .exerciseIntro.summaryHero center {
    gap: 10px;
  }
  .exerciseIntro.summaryHero .exerciseComplete img {
    max-width: 60px;
    max-height: 60px;
  }
  .exerciseIntro.summaryHero b {
    font-size: 1.2rem;
  }
}

/* Unified skill summary card structure shared by expectancy, affect label, safety drop */
.skillSummaryCard {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.skillSummaryCard::after {
  content: 'skill';
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #6f64b8;
  background: rgba(145, 135, 211, 0.14);
  border: 1px solid rgba(145, 135, 211, 0.28);
  border-radius: 999px;
  padding: 3px 9px;
  pointer-events: none;
}

.skillSummaryHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding-right: 60px;
}

.skillSummaryIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(145, 135, 211, 0.14);
  color: #9187d3;
  flex: 0 0 auto;
}

.skillSummaryTitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2a2744;
}

.skillSummaryBody {
  margin: 0 0 12px;
}

.skillSummaryFooter {
  text-align: center;
  font-size: 0.85rem;
  color: #7a7591;
  margin: 12px auto 0;
  max-width: 560px;
  font-style: italic;
  border-top: 1px solid rgba(145, 135, 211, 0.14);
  padding-top: 10px;
}

.skillSummaryIconImg {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 auto;
}

.willingnessSummaryCard {
  background: linear-gradient(135deg, #f0fbf6 0%, #f4f7ff 100%);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(85, 204, 170, 0.08);
}
/* ── Shared summary stat row (used by This Exercise, Willingness, Expectancy) ── */
.summaryStatRow {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.summaryStat {
  flex: 1 1 0;
  min-width: 90px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px -4px rgba(58, 47, 105, 0.08);
}
.summaryStatNum {
  font-size: 1.65rem;
  font-weight: 700;
  color: #3a3a3a;
  line-height: 1;
  margin-bottom: 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.summaryStatLbl {
  font-size: 0.78rem;
  color: #7a7591;
  letter-spacing: 0.02em;
}
.summaryStat--red { background: rgba(251, 113, 121, 0.14); }
.summaryStat--red .summaryStatNum { color: #c95058; }
.summaryStat--green { background: rgba(85, 204, 170, 0.18); }
.summaryStat--green .summaryStatNum { color: #2fa080; }
.summaryStat--purple { background: rgba(145, 135, 211, 0.18); }
.summaryStat--purple .summaryStatNum { color: #5d52a3; }
.summaryStat--orange { background: rgba(245, 166, 35, 0.18); }
.summaryStat--orange .summaryStatNum { color: #a35d0a; }

.summaryStatArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8c0e6;
  flex: 0 0 auto;
  width: 16px;
}
@media (max-width: 480px) {
  .summaryStatArrow { display: none; }
  .summaryStatRow { gap: 8px; }
}
@media (max-width: 380px) {
  .summaryStat { padding: 8px 4px; min-width: 0; }
  .summaryStatNum { font-size: 1.4rem; }
}

/* Delta pill below a summary stat (e.g. "+1 from last") */
.summaryStatDelta {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.summaryStatDelta--down { color: #2f8e72; background: rgba(85, 204, 170, 0.18); }
.summaryStatDelta--up   { color: #a35d0a; background: rgba(245, 166, 35, 0.18); }
.summaryStatDelta--flat { color: #6a6680; background: rgba(145, 135, 211, 0.14); }

/* Opportunity badge on a summary stat tile */
.summaryStatBadge {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #9187d3;
  color: #ffffff;
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(145, 135, 211, 0.40);
  white-space: nowrap;
  pointer-events: none;
}
.summaryStat--opportunity {
  background: rgba(145, 135, 211, 0.18);
  box-shadow:
    0 0 0 2px rgba(145, 135, 211, 0.35),
    0 2px 8px -4px rgba(58, 47, 105, 0.08);
}
.summaryStat--opportunity .summaryStatNum { color: #5a4fb0; }
.willingnessEntries {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  row-gap: 8px;
  column-gap: 10px;
  margin-top: 6px;
}
.willingnessEntry {
  display: contents;
}
.willingnessEntryLabel {
  font-size: 0.85rem;
  color: #7a7591;
  font-weight: 600;
  white-space: nowrap;
}
.willingnessEntryBar {
  height: 8px;
  background: rgba(145, 135, 211, 0.14);
  border-radius: 999px;
  overflow: hidden;
  min-width: 40px;
}
.willingnessEntryFill {
  height: 100%;
  background: #55ccaa;
  border-radius: 999px;
}
.willingnessEntryValue {
  text-align: right;
  font-weight: 700;
  color: #3a3a3a;
  font-size: 0.95rem;
  min-width: 18px;
}

/* Expandable willingness history (past sessions with willingness data). */
.willingnessHistory {
  margin-top: 14px;
  border-top: 1px solid rgba(145, 135, 211, 0.14);
}
.willingnessHistoryToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 12px 0 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.willingnessHistoryToggleText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.willingnessHistoryToggleLabel {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2a2744;
}
.willingnessHistoryToggleCount {
  font-size: 0.78rem;
  color: #7a7591;
  letter-spacing: 0.02em;
}
.willingnessHistoryToggleChevron {
  color: #2fa080;
  flex: 0 0 auto;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.willingnessHistory.is-open .willingnessHistoryToggleChevron {
  transform: rotate(180deg);
}
.willingnessHistoryBody {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 240ms ease;
}
.willingnessHistory.is-open .willingnessHistoryBody {
  max-height: 720px;
  opacity: 1;
}
.willingnessHistoryBodyInner {
  padding: 6px 0 6px;
}
.willingnessHistoryChartWrap {
  position: relative;
  height: 200px;
}
.willingnessHistoryChartWrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.willingnessHistoryMarkersScroll {
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.willingnessHistoryMarkers {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.willingnessHistoryMarker {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(85, 204, 170, 0.25);
  color: #5d52a3;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.willingnessHistoryMarker.is-active {
  background: rgba(85, 204, 170, 0.18);
  border-color: #55ccaa;
  color: #2fa080;
  font-weight: 700;
}
.willingnessHistoryMarker--today {
  border-color: #55ccaa;
}

.expectancySummaryCard {
  background: linear-gradient(135deg, #f4f1ff 0%, #e8f7f1 100%);
  border-radius: 16px;
  padding: 20px 20px 18px;
  margin-bottom: 8px;
  box-shadow: 0 2px 12px rgba(145, 135, 211, 0.10);
  animation: expSummEntry 0.45s ease-out;
}
@keyframes expSummEntry {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.expSumm__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #9187d3;
  font-weight: 600;
  margin-bottom: 14px;
}

.expSumm__table {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
}

.expSumm__thead,
.expSumm__tr {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: center;
  gap: 10px;
}

.expSumm__thead {
  padding: 10px 6px 8px;
  border-bottom: 1px solid rgba(145, 135, 211, 0.18);
}

.expSumm__th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #7a7591;
  font-weight: 600;
}
.expSumm__th--actual {
  text-align: center;
}

.expSumm__tr {
  padding: 12px 6px;
  border-bottom: 1px solid rgba(145, 135, 211, 0.10);
  animation: expSummRowIn 0.4s ease-out backwards;
}
.expSumm__tr:last-child {
  border-bottom: none;
}
.expSumm__tr:nth-child(2) { animation-delay: 0.05s; }
.expSumm__tr:nth-child(3) { animation-delay: 0.13s; }
.expSumm__tr:nth-child(4) { animation-delay: 0.21s; }
.expSumm__tr:nth-child(5) { animation-delay: 0.29s; }
.expSumm__tr:nth-child(6) { animation-delay: 0.37s; }
.expSumm__tr:nth-child(7) { animation-delay: 0.45s; }
@keyframes expSummRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.expSumm__td {
  font-size: 0.95rem;
  color: #2f2f2f;
  line-height: 1.35;
  word-wrap: break-word;
  min-width: 0;
}

.expSumm__td--predicted {
  color: #4a4560;
}

.expSumm__td--arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8b3c8;
}

.expSumm__td--actual {
  text-align: center;
}

.expSumm__finding {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  min-width: 70px;
  text-align: center;
}
.expSumm__finding--no {
  background: rgba(85, 204, 170, 0.18);
  color: #2f8e72;
}
.expSumm__finding--partly {
  background: rgba(137, 196, 255, 0.22);
  color: #3b78b3;
}
.expSumm__finding--yes {
  background: rgba(145, 135, 211, 0.20);
  color: #5d52a3;
}
.expSumm__finding--unanswered {
  background: rgba(184, 179, 200, 0.20);
  color: #8a8499;
  font-weight: 500;
}

.expSumm__note {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 10px 14px;
  color: #4a4560;
  font-style: italic;
  font-size: 0.9rem;
}

@media (max-width: 540px) {
  .expectancySummaryCard {
    padding: 16px 14px 14px;
  }
  .expSumm__thead,
  .expSumm__tr {
    grid-template-columns: 1fr 22px auto;
    gap: 8px;
  }
  .expSumm__td {
    font-size: 0.9rem;
  }
  .expSumm__finding {
    padding: 4px 12px;
    font-size: 0.82rem;
    min-width: 56px;
  }
}

.expReview__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expReview__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  text-align: left;
}

.expReview__pred {
  font-size: 1rem;
  color: #2f2f2f;
  line-height: 1.35;
  min-width: 0;
  word-wrap: break-word;
}

.expReview__choices {
  display: inline-flex;
  background: rgba(145, 135, 211, 0.10);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.expReview__choice {
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #6a6680;
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
}
.expReview__choice:hover {
  color: #2f2f2f;
}
.expReview__choice:active {
  transform: scale(0.96);
}
.expReview__choice--yes.selected {
  background: #9187d3;
  color: #ffffff;
}
.expReview__choice--partly.selected {
  background: #89C4FF;
  color: #ffffff;
}
.expReview__choice--no.selected {
  background: #55ccaa;
  color: #ffffff;
}

@media (max-width: 540px) {
  .expReview__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .expReview__choices {
    justify-self: stretch;
  }
  .expReview__choice {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    font-size: 0.84rem;
  }
}

.affectLabelSummaryCard {
  background: linear-gradient(135deg, #fff4f4 0%, #f4f1ff 100%);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(251, 113, 121, 0.08);
}
.affectLabelSummaryHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.affectLabelSummaryIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(251, 113, 121, 0.12);
  color: #fb7179;
  flex: 0 0 auto;
}
.affectLabelSummaryCard h5 {
  margin: 0;
  color: #3a3a3a;
}
.affectLabelSummaryBody {
  text-align: center;
  color: #3a3a3a;
  margin: 0 auto 12px;
  max-width: 560px;
  font-size: 0.95rem;
}
.affectLabelPills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.affectLabelPill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  color: #3a3a3a;
  border: 1px solid rgba(145, 135, 211, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  animation: affectLabelPillPop 0.5s ease-out backwards;
}
.affectLabelPill:nth-child(2) { animation-delay: 0.08s; }
.affectLabelPill:nth-child(3) { animation-delay: 0.16s; }
.affectLabelPill:nth-child(4) { animation-delay: 0.24s; }
.affectLabelPill:nth-child(5) { animation-delay: 0.32s; }
.affectLabelPill:nth-child(6) { animation-delay: 0.40s; }
.affectLabelPill:nth-child(7) { animation-delay: 0.48s; }
.affectLabelPill:nth-child(8) { animation-delay: 0.56s; }
.affectLabelPill--custom {
  background: rgba(145, 135, 211, 0.12);
  color: #5d52a3;
  font-style: italic;
  border-color: rgba(145, 135, 211, 0.4);
}
.affectLabelSummaryFootnote {
  text-align: center;
  font-size: 0.85rem;
  color: #7a7591;
  margin: 0 auto;
  max-width: 520px;
  font-style: italic;
}
@keyframes affectLabelPillPop {
  0% { opacity: 0; transform: translateY(6px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.safetyDropList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px auto;
}
.safetyDropRow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.safetyDropChip {
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}
.safetyDropCoach {
  background: rgba(85, 204, 170, 0.12);
  border-left: 3px solid #55ccaa;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin: 4px 0 6px 12px;
  font-size: 0.92rem;
  color: #2f2f2f;
  animation: safetyDropCoachIn 0.3s ease-out;
}
@keyframes safetyDropCoachIn {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.safetyDropPriorNote {
  font-size: 0.92rem;
  color: #5d52a3;
  font-style: italic;
  max-width: 560px;
  margin: 0 auto 8px;
}

.safetyDropSummaryCard {
  background: linear-gradient(135deg, #f0f9ff 0%, #f4fff8 100%);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(85, 204, 170, 0.08);
}
.safetyDropSummaryHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.safetyDropSummaryIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(85, 204, 170, 0.18);
  color: #2fa080;
  flex: 0 0 auto;
}
.safetyDropSummaryCard h5 {
  margin: 0;
  color: #3a3a3a;
}
.safetyDropSummaryHeadline {
  text-align: center;
  color: #3a3a3a;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 auto 14px;
  max-width: 560px;
}
.safetyDropMetrics {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.safetyDropMetric {
  flex: 1 1 0;
  min-width: 90px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.safetyDropMetric--start {
  background: rgba(251, 113, 121, 0.14);
}
.safetyDropMetric--dropped {
  background: rgba(85, 204, 170, 0.18);
}
.safetyDropMetric--end {
  background: rgba(145, 135, 211, 0.14);
}
.safetyDropMetricNum {
  font-size: 1.65rem;
  font-weight: 700;
  color: #3a3a3a;
  line-height: 1;
  margin-bottom: 2px;
}
.safetyDropMetric--start .safetyDropMetricNum {
  color: #c95058;
}
.safetyDropMetric--dropped .safetyDropMetricNum {
  color: #2fa080;
}
.safetyDropMetric--end .safetyDropMetricNum {
  color: #5d52a3;
}
.safetyDropMetricLbl {
  font-size: 0.78rem;
  color: #7a7591;
  letter-spacing: 0.02em;
}
.safetyDropBreakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.safetyDropBreakdownRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.safetyDropBreakdownLabel {
  font-size: 0.85rem;
  color: #7a7591;
  font-weight: 600;
  flex: 0 0 auto;
}
.safetyDropBreakdownPills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.safetyDropPill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.88rem;
}
.safetyDropPill--dropped {
  background: rgba(85, 204, 170, 0.22);
  color: #2fa080;
  font-weight: 500;
}
.safetyDropPill--still {
  background: rgba(145, 135, 211, 0.18);
  color: #5d52a3;
}
.safetyDropEmpty {
  color: #7a7591;
  font-style: italic;
  font-size: 0.9rem;
}
.safetyDropSummaryFootnote {
  text-align: center;
  font-size: 0.85rem;
  color: #7a7591;
  margin: 0 auto;
  max-width: 520px;
  font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────────────
   DO/begin v2 layout: journal feed + composer + bottom sheet
   Wraps the existing act-* content (no content/label changes) in a new
   visual shell. Works on mobile and desktop.
   ─────────────────────────────────────────────────────────────────────────── */

.act-do2-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: -4px 0 0;
}
@media (max-width: 600px) {
  .act-do2-shell {
    gap: 12px;
    margin: -4px 0 0;
  }
}

/* Hide the page-level X exit button while the live exposure shell is active. */
body.act-hide-exit .exitButton { display: none !important; }

/* ── Compact title (no background, no done icon) ────────────────────── */
.act-do2-header--minimal {
  background: transparent;
  padding: 0 4px;
  text-align: center;
}
.act-do2-header--minimal .act-do2-title {
  font-size: 13px;
  font-weight: 600;
  color: #7d7d8c;
  letter-spacing: 0.2px;
  margin: 0;
  line-height: 1.3;
}

/* ── Status panel: facts (SUD readout, band pill, phase, elapsed) ────── */
.act-status-panel {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 20px 14px;
  box-shadow: 0 1px 3px rgba(43,43,58,0.04);
}
.act-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.act-status-readout {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.act-status-num {
  font-size: 36px;
  font-weight: 700;
  color: #2b2b3a;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.act-status-num--empty { color: #c8c6d6; font-weight: 600; }
.act-status-denom {
  font-size: 16px;
  color: #7d7d8c;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.act-status-trend {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}
.act-status-trend--up     { background: #fff3ef; color: #d97e3a; }
.act-status-trend--down   { background: #e9faf3; color: #36a482; }
.act-status-trend--steady { background: #f3f1fa; color: #7d7d8c; }
.act-status-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.act-status-pill--mild     { background: #e9faf3; color: #36a482; }
.act-status-pill--elevated { background: #f6f2e1; color: #b18a3a; }
.act-status-pill--high     { background: #fff3ef; color: #d97e3a; }
.act-status-pill--peak     { background: #fde7e3; color: #c14a3a; }
.act-status-pill--unknown  { background: #f3f1fa; color: #7d7d8c; }
.act-status-pill--signal   { background: #ecebf5; color: #6c5fbe; }
.act-status-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.act-status-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #7d7d8c;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.act-status-secondary {
  margin-top: 8px;
  font-size: 13px;
  color: #6c5fbe;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.act-status-secondary-num {
  color: #2b2b3a;
  margin-left: 4px;
}

/* ── Tools sheet: skill subheader, chip picker, slot helpers ─────────── */
.act-do2-tools-subhead {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #9187d3;
  margin: 6px 0 -2px;
}
.act-do2-slot-helper {
  font-size: 13px;
  color: #5a5a68;
  margin: 0 0 10px;
  line-height: 1.5;
}
.act-do2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.act-do2-chip {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f1fa;
  color: #6c5fbe;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.act-do2-chip.selected {
  background: #9187d3;
  color: #ffffff;
  border-color: #9187d3;
}
.act-do2-slot-textarea {
  width: 100%;
  min-height: 64px;
  border-radius: 10px;
  border: 1px solid #ececf2;
  padding: 10px 12px;
  font-size: 14px;
  color: #2b2b3a;
  font-family: inherit;
  resize: vertical;
  background: #ffffff;
  box-sizing: border-box;
}
.act-do2-slot-textarea:focus { outline: none; border-color: #9187d3; }
.act-do2-pred-recap {
  background: #f6f5fb;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.act-do2-pred-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #9187d3;
  margin-bottom: 6px;
}
.act-do2-pred-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.act-do2-pred-chip {
  background: #ffffff;
  border: 1px solid #d8d6e8;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #2b2b3a;
  font-weight: 600;
}
.act-do2-pred-text {
  margin-top: 8px;
  font-size: 13px;
  color: #2b2b3a;
  font-style: italic;
  line-height: 1.5;
}
.act-arc-label-top {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #9187d3;
  margin-bottom: 8px;
}

/* ── Recommended actions: deterministic next-move buttons ────────────── */
.act-recs-panel {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 1px 3px rgba(43,43,58,0.04);
}
.act-recs-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #9187d3;
  margin-bottom: 10px;
}
.act-recs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.act-rec-btn {
  background: #f6f5fb;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #2b2b3a;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.act-rec-btn:hover { background: #ecebf5; border-color: #d8d6e8; transform: translateY(-1px); }
.act-rec-btn:active { transform: translateY(0); }

/* ── Event log rows (history overlay) ────────────────────────────────── */
.act-evt-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f5fb;
  margin-bottom: 6px;
  font-size: 13px;
}
.act-evt-time {
  color: #7d7d8c;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  flex: 0 0 auto;
  min-width: 56px;
}
.act-evt-type {
  font-weight: 700;
  color: #6c5fbe;
  font-size: 11px;
  letter-spacing: 0.4px;
  flex: 0 0 auto;
  min-width: 64px;
}
.act-evt-val {
  color: #2b2b3a;
  flex: 1 1 auto;
  word-break: break-word;
}

/* ── Focus card (legacy, retained for cached prompts only) ────────────── */
.act-do2-focus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.act-do2-focus .act-guidance-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 20px 20px;
  box-shadow: 0 1px 3px rgba(43,43,58,0.04);
  transition: box-shadow 0.4s;
}
.act-do2-focus .act-guidance-history {
  display: block;
  max-height: none;
  overflow: visible;
  padding: 0;
}
/* Hide every entry except the most recent — that one IS the focus card */
.act-do2-focus .act-guidance-entry {
  display: none;
}
.act-do2-focus .act-guidance-entry:last-child {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.act-do2-focus .act-guidance-trigger-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
  color: #9187d3;
  margin-bottom: 8px;
}
.act-do2-focus .act-guidance-msg {
  font-size: 16px;
  line-height: 1.55;
  color: #2b2b3a;
  font-weight: 400;
  font-style: normal;
  background: transparent;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
}
.act-do2-focus .act-coach-prompt {
  margin-top: 14px;
}
.act-do2-focus .act-coach-prompt-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.act-do2-focus .act-coach-prompt-opt {
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #f3f1fa;
  border: 1px solid transparent;
  color: #6c5fbe;
  cursor: pointer;
  font-weight: 600;
}
.act-do2-focus .act-coach-prompt-opt:hover {
  background: #9187d3;
  color: white;
}
/* "Latest" jump button is no longer relevant in single-focus mode */
.act-do2-focus .act-guidance-latest-btn { display: none !important; }

/* ── Tool slot: pulled-in tool below the focus card ───────────────────── */
.act-do2-tool-slot {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 1px 3px rgba(43,43,58,0.04);
  display: flex;
  flex-direction: column;
}
.act-do2-slot-body {
  width: 100%;
  min-width: 0;
}
.act-do2-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.act-do2-slot-title {
  font-size: 13px;
  font-weight: 700;
  color: #2b2b3a;
  letter-spacing: 0.2px;
}
.act-do2-slot-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f6f5fb;
  border: none;
  color: #7d7d8c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.act-do2-slot-close:hover { background: #ecebf5; color: #2b2b3a; }
.act-do2-slot-close svg { width: 12px; height: 12px; }
.act-do2-slot-body > * { margin-top: 0; }
.act-do2-slot-aux {
  font-size: 12px;
  color: #7d7d8c;
  margin-bottom: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.act-do2-slot-aux-label { color: #a8a8b4; }
.act-do2-slot-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.act-do2-slot-footer .act-do2-sheet-save {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 10px 22px;
}
.act-do2-slot-textinput {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ececf2;
  padding: 10px 12px;
  font-size: 14px;
  color: #2b2b3a;
  font-family: inherit;
  background: #ffffff;
  box-sizing: border-box;
  margin-bottom: 6px;
}
.act-do2-slot-textinput:focus { outline: none; border-color: #9187d3; }

/* ── Bottom action bar: history link (left) + tools tab (right) ──────── */
.act-do2-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}
.act-do2-history-link {
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 13px;
  color: #9187d3;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.act-do2-history-link:hover { color: #6c5fbe; text-decoration: underline; }
.act-do2-history-link-placeholder { flex: 1; }
.act-do2-tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #ececf2;
  color: #2b2b3a;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(43,43,58,0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.act-do2-tools-tab:hover  { transform: translateY(-1px); border-color: #d8d6e8; box-shadow: 0 4px 12px rgba(43,43,58,0.06); }
.act-do2-tools-tab:active { transform: translateY(0); }
.act-do2-tools-tab svg { width: 16px; height: 16px; }

.act-do2-bottom-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Done button (small, bottom-right pill) ──────────────────────────── */
.act-do2-done-bottom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #55ccaa, #3db896);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(85,204,170,0.28);
  transition: transform 0.12s, box-shadow 0.12s;
}
.act-do2-done-bottom:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(85,204,170,0.36); }
.act-do2-done-bottom:active { transform: translateY(0); }
.act-do2-done-bottom.act-do2-done-bottom--warn {
  background: linear-gradient(135deg, #e8975a, #d97e3a);
  box-shadow: 0 4px 12px rgba(232,151,90,0.28);
}

/* ── Tools grid ───────────────────────────────────────────────────────── */
.act-do2-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Single-column tile list on narrow phones — two columns force the labels to
   truncate at common phone widths (≤480px), and tap targets feel cramped. */
@media (max-width: 480px) {
  .act-do2-tools { grid-template-columns: 1fr; gap: 8px; }
}
.act-do2-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  padding: 14px 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  box-shadow: 0 1px 3px rgba(43,43,58,0.04);
  min-height: 64px;
}
.act-do2-tool:hover {
  transform: translateY(-1px);
  border-color: #d8d6e8;
  box-shadow: 0 4px 12px rgba(43,43,58,0.06);
}
.act-do2-tool:active { transform: translateY(0); }
.act-do2-tool-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #f3f1fa;
  color: #9187d3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-do2-tool-icon svg { width: 18px; height: 18px; }
.act-do2-tool-body {
  flex: 1 1 auto;
  min-width: 0;
}
.act-do2-tool-title {
  font-size: 13px;
  font-weight: 700;
  color: #2b2b3a;
  margin: 0 0 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-do2-tool-sub {
  font-size: 12px;
  color: #7d7d8c;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-do2-tool--alert .act-do2-tool-icon {
  background: #fff3ef;
  color: #e8975a;
}
.act-do2-tool--alert .act-do2-tool-sub {
  color: #e8975a;
  font-weight: 600;
}

/* ── Bottom sheet (one section at a time, opened from a tile) ────────── */
.act-do2-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 36, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 9999;
}
.act-do2-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 8px 0 16px;
  transform: translate(-50%, 100%);
  transition: transform 0.25s ease;
  z-index: 10000;
  min-height: 56vh;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(43,43,58,0.18);
}
/* Match Bootstrap container widths so the sheet aligns with #pageContainer */
@media (min-width: 576px) { .act-do2-sheet { max-width: 540px; } }
@media (min-width: 768px) { .act-do2-sheet { max-width: 720px; } }
@media (min-width: 992px) { .act-do2-sheet { max-width: 960px; } }
@media (min-width: 1200px){ .act-do2-sheet { max-width: 1140px; } }
.act-do2-shell.act-do2-more-open .act-do2-scrim {
  opacity: 1;
  pointer-events: auto;
}
.act-do2-shell.act-do2-more-open .act-do2-sheet {
  transform: translate(-50%, 0);
}

.act-do2-sheet-save {
  display: block;
  width: 100%;
  margin: 16px 0 4px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #9187d3, #6c5fbe);
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(108,95,190,0.28);
  transition: transform 0.12s, box-shadow 0.12s;
}
.act-do2-sheet-save:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(108,95,190,0.35); }
.act-do2-sheet-save:active { transform: translateY(0); }
.act-do2-sheet-grab {
  width: 36px; height: 4px;
  background: #ececf2;
  border-radius: 2px;
  margin: 4px auto 8px;
  cursor: grab;
}
.act-do2-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid #ececf2;
}
.act-do2-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: #2b2b3a;
  margin: 0;
  flex: 1;
}
.act-do2-sheet-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f6f5fb;
  border: none;
  color: #7d7d8c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.act-do2-sheet-close:hover { background: #ecebf5; color: #2b2b3a; }
.act-do2-sheet-close svg { width: 14px; height: 14px; }
.act-do2-sheet-body {
  padding: 14px 16px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.act-do2-sheet-section { display: none; }
.act-do2-sheet-section--active { display: block; }

/* ── History overlay (full coachHistory) ──────────────────────────────── */
.act-do2-history-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 36, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10001;
}
.act-do2-history-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 8px 0 16px;
  transform: translate(-50%, 100%);
  transition: transform 0.25s ease;
  z-index: 10002;
  min-height: 56vh;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(43,43,58,0.18);
}
@media (min-width: 576px) { .act-do2-history-sheet { max-width: 540px; } }
@media (min-width: 768px) { .act-do2-history-sheet { max-width: 720px; } }
@media (min-width: 992px) { .act-do2-history-sheet { max-width: 960px; } }
@media (min-width: 1200px){ .act-do2-history-sheet { max-width: 1140px; } }
.act-do2-shell.act-do2-history-open .act-do2-history-scrim {
  opacity: 1;
  pointer-events: auto;
}
.act-do2-shell.act-do2-history-open .act-do2-history-sheet {
  transform: translate(-50%, 0);
}
.act-do2-history-list {
  padding: 14px 16px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.act-do2-history-entry {
  background: #fbfaff;
  border: 1px solid #ececf2;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.act-do2-history-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.act-do2-history-entry .act-guidance-trigger-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #9187d3;
  margin-bottom: 0;
}
.act-do2-history-time {
  font-size: 11px;
  color: #a8a8b4;
  font-weight: 500;
  flex: 0 0 auto;
}
.act-do2-history-entry .act-guidance-msg {
  font-size: 13px;
  line-height: 1.5;
  color: #4a4658;
  white-space: pre-wrap;
}
.act-do2-history-entry .act-coach-prompt-answered {
  margin-top: 8px;
  font-size: 12px;
  color: #6c5fbe;
  background: #f3f1fa;
  border-radius: 8px;
  padding: 6px 10px;
}

/* Inside the sheet: existing components keep their classes; we just neutralize
   the act-expand wrapper styling so checkboxes/scales render as flat content. */
.act-do2-sheet-section .act-expand,
.act-do2-sheet-section .act-expand[open] {
  background: transparent;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}
.act-do2-sheet-section .act-expand-summary { display: none; }
.act-do2-sheet-section .act-expand > :not(summary) {
  padding: 0;
}
.act-do2-sheet-section .act-modules {
  margin-bottom: 0;
}
.act-do2-sheet-section .act-module-pill {
  flex: 1 1 calc(50% - 8px);
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
}
@media (min-width: 600px) {
  .act-do2-sheet-section .act-module-pill {
    flex: 1 1 calc(33.333% - 8px);
  }
}

/* =========================================================================
   Exposure completion summary, polish pass.
   Targets the same classes already produced by buildCompleteSummary() in
   js/exposure.js. No markup changes. Single-column stack capped at the
   container's 700px max-width.
   ========================================================================= */

.mainExposureContent.summary {
  background: transparent;
}

.mainExposureContent.summary > div[style*="padding:10px"],
.mainExposureContent.summary > div[style*="padding: 10px"] {
  padding: 6px 6px 14px !important;
}

.mainExposureContent.summary .exerciseSummarySection {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid rgba(145, 135, 211, 0.12);
  border-radius: 20px;
  padding: 20px 22px;
  margin: 0 0 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 28px -18px rgba(58, 47, 105, 0.22),
    0 2px 6px -2px rgba(58, 47, 105, 0.06);
}

.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%) !important;
  border: 1px solid rgba(145, 135, 211, 0.12);
}

.mainExposureContent.summary .summaryCardLabel {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #6f64b8;
  font-weight: 700;
  margin-bottom: 14px;
  text-align: left;
}

.mainExposureContent.summary .discomfortChartCard {
  padding: 22px 22px 18px;
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(145, 135, 211, 0.10), transparent 70%),
    radial-gradient(420px 220px at 100% 100%, rgba(85, 204, 170, 0.10), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid rgba(145, 135, 211, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 22px 44px -22px rgba(58, 47, 105, 0.30),
    0 4px 10px -4px rgba(58, 47, 105, 0.08);
}

.mainExposureContent.summary .discomfortChartCard .discomfortChartWrapper,
.mainExposureContent.summary .thisExerciseStatsCard .discomfortChartWrapper,
.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] .discomfortChartWrapper {
  background:
    linear-gradient(180deg, rgba(251,113,121,0.07) 0%, rgba(145,135,211,0.05) 55%, rgba(85,204,170,0.10) 100%),
    #ffffff;
  border: 1px solid rgba(145, 135, 211, 0.10);
  border-radius: 16px;
  padding: 14px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mainExposureContent.summary .achievementBarContainer {
  border-radius: 14px;
  border: 1px solid rgba(145, 135, 211, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 14px -8px rgba(58, 47, 105, 0.16);
  height: 56px;
}

.expectancySummaryCard,
.affectLabelSummaryCard,
.safetyDropSummaryCard {
  border-radius: 20px;
  border: 1px solid rgba(145, 135, 211, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 28px -18px rgba(58, 47, 105, 0.18),
    0 2px 6px -2px rgba(58, 47, 105, 0.05);
}

.expectancySummaryCard {
  background: linear-gradient(160deg, #f5f2ff 0%, #ffffff 55%, #ecf9f3 100%);
}
.affectLabelSummaryCard {
  background: linear-gradient(160deg, #fff5f5 0%, #ffffff 55%, #f4f1ff 100%);
}
.safetyDropSummaryCard {
  background: linear-gradient(160deg, #effaf5 0%, #ffffff 55%, #eef7ff 100%);
}

.expSumm__table {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 14px -10px rgba(58, 47, 105, 0.10);
}

.affectLabelPill {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px -3px rgba(58, 47, 105, 0.10);
}

.safetyDropMetric {
  box-shadow: 0 2px 8px -4px rgba(58, 47, 105, 0.08);
}

.mainExposureContent.summary .exposureTool {
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
  border: 1px solid rgba(145, 135, 211, 0.18);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 20px -12px rgba(58, 47, 105, 0.20);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.mainExposureContent.summary .exposureTool:hover {
  border-color: rgba(145, 135, 211, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 30px -16px rgba(58, 47, 105, 0.30);
  transform: translateY(-2px);
}

/* Hero, tighter integration with the new card surfaces below it */
.exerciseIntro.summaryHero {
  box-shadow: 0 2px 10px -4px rgba(58, 47, 105, 0.10);
}

/* Coordinated, satisfying entrance for the stack */
@media (prefers-reduced-motion: no-preference) {
  .mainExposureContent.summary .exerciseSummarySection,
  .mainExposureContent.summary .expectancySummaryCard,
  .mainExposureContent.summary .affectLabelSummaryCard,
  .mainExposureContent.summary .safetyDropSummaryCard {
    animation: summaryCardEnter 540ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(1),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(1) { animation-delay: 40ms; }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(2),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(2) { animation-delay: 110ms; }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(3),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(3) { animation-delay: 180ms; }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(4),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(4) { animation-delay: 250ms; }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(5),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(5) { animation-delay: 320ms; }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(6),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(6) { animation-delay: 390ms; }
  .mainExposureContent.summary > div[style*="padding:10px"] > *:nth-child(n+7),
  .mainExposureContent.summary > div[style*="padding: 10px"] > *:nth-child(n+7) { animation-delay: 460ms; }
}

@keyframes summaryCardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Discomfort chart wrapper: explicit height fixes blur on small screens.
   Chart.js needs a sized parent when maintainAspectRatio=false; min-height
   alone causes the canvas to render at one resolution then be CSS-stretched. */
.mainExposureContent.summary .discomfortChartCard .discomfortChartWrapper,
.mainExposureContent.summary .thisExerciseStatsCard .discomfortChartWrapper,
.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] .discomfortChartWrapper {
  height: 240px;
  min-height: 0;
  position: relative;
}
.mainExposureContent.summary .discomfortChartCard .discomfortChartWrapper canvas,
.mainExposureContent.summary .thisExerciseStatsCard .discomfortChartWrapper canvas,
.mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] .discomfortChartWrapper canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none;
  max-height: none;
}
@media (min-width: 600px) {
  .mainExposureContent.summary .discomfortChartCard .discomfortChartWrapper,
  .mainExposureContent.summary .thisExerciseStatsCard .discomfortChartWrapper,
  .mainExposureContent.summary .exerciseSummarySection[style*="linear-gradient"] .discomfortChartWrapper {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .mainExposureContent.summary .thisExerciseStatsCard {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ── Streak hero: big circular badge + motivational copy ──────────────── */
.streakHighlight .streakHero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 4px auto 14px;
  max-width: 560px;
}
.streakHeroBadge {
  position: relative;
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(119, 106, 200, 0.45) 0%, rgba(85, 204, 170, 0.45) 100%);
  box-shadow: 0 6px 14px rgba(119, 106, 200, 0.30), 0 0 8px rgba(119, 106, 200, 0.35);
  box-sizing: border-box;
  overflow: hidden;
}
.streakHeroBadge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #776ac8 0%, #55ccaa 100%);
  animation: streakHeroBadgeFill 1800ms cubic-bezier(0.22, 0.61, 0.36, 1) 500ms backwards;
}
@keyframes streakHeroBadgeFill {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.streakHeroInner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.streakHeroNum {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  animation: streakHeroNumPop 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 1300ms backwards;
}
@keyframes streakHeroNumPop {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.streakHeroUnit {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  margin-top: 4px;
}
.streakHeroCopy {
  flex: 1 1 220px;
  min-width: 200px;
  text-align: left;
}
.streakHeroLine {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a2744;
  line-height: 1.35;
  margin-bottom: 6px;
}
.streakHeroSub {
  font-size: 0.92rem;
  color: #6a6680;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .streakHighlight .streakHero {
    gap: 14px;
  }
  .streakHeroCopy {
    text-align: center;
    flex: 1 1 100%;
  }
  .streakHeroBadge { width: 110px; height: 110px; }
  .streakHeroNum { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .streakHeroNum { animation: none; }
  .streakHeroBadge::before { animation: none; }
}
/* Same scroll-into-view gate as .newHighlightsCard--primed: paused until
   c_onVisible drops the --primed class. */
.streakHighlight--primed .streakHeroNum,
.streakHighlight--primed .streakHeroBadge::before {
  animation-play-state: paused !important;
}

/* ── Done CTA: quiet but unmistakable end of the screen ───────────────── */
.summaryDoneSection {
  margin-top: 4px !important;
  padding: 16px 0 28px !important;
}
.summaryDoneButton {
  display: inline-block;
  padding: 12px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #9187d3 0%, #55ccaa 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 14px 28px -14px rgba(58, 47, 105, 0.40);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.summaryDoneButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 18px 32px -14px rgba(58, 47, 105, 0.50);
}
.summaryDoneButton:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* ── Expectancy footer (now matches the affect / safety footer styling) ── */
.expectancySummaryFootnote {
  text-align: center;
  font-size: 0.85rem;
  color: #7a7591;
  margin: 12px auto 0;
  max-width: 520px;
  font-style: italic;
}

/* ── Collapsible session history card ─────────────────────────────────── */
.sessionHistoryCard {
  padding: 0 !important;
  overflow: hidden;
}
.sessionHistoryToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sessionHistoryToggle:hover {
  background: rgba(145, 135, 211, 0.05);
}
.sessionHistoryToggleText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sessionHistoryToggleLabel {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2a2744;
}
.sessionHistoryToggleCount {
  font-size: 0.78rem;
  color: #7a7591;
  letter-spacing: 0.02em;
}
.sessionHistoryToggleChevron {
  color: #9187d3;
  flex: 0 0 auto;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sessionHistoryCard.is-open .sessionHistoryToggleChevron {
  transform: rotate(180deg);
}

/* CSS-driven open/close: max-height transition reveals the body. */
.sessionHistoryBody {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 240ms ease;
}
.sessionHistoryCard.is-open .sessionHistoryBody {
  max-height: 720px;
  opacity: 1;
}
.sessionHistoryBodyInner {
  padding: 0 20px 18px;
  border-top: 1px solid rgba(145, 135, 211, 0.14);
  padding-top: 16px;
}
.sessionHistoryChartWrap {
  position: relative;
  height: 220px;
}
.sessionHistoryChartWrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.sessionHistoryMarkersScroll {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.sessionHistoryMarkersScroll::-webkit-scrollbar { height: 6px; }
.sessionHistoryMarkersScroll::-webkit-scrollbar-thumb {
  background: rgba(145, 135, 211, 0.3);
  border-radius: 3px;
}
.sessionHistoryMarkers {
  display: inline-flex;
  gap: 8px;
  padding: 2px 2px;
}
.sessionHistoryMarker {
  flex: 0 0 auto;
  border: 1px solid var(--marker-border, rgba(145, 135, 211, 0.28));
  background: var(--marker-bg, #ffffff);
  color: #4a4560;
  font: 600 0.82rem/1.2 inherit;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sessionHistoryMarker:hover {
  border-color: rgba(145, 135, 211, 0.65);
  color: #2a2744;
}
.sessionHistoryMarker:active { transform: scale(0.97); }
.sessionHistoryMarker.is-active {
  background: linear-gradient(135deg, #9187d3 0%, #7d72c4 100%);
  border-color: #7d72c4;
  color: #ffffff;
  box-shadow: 0 6px 14px -8px rgba(58, 47, 105, 0.40);
}
.sessionHistoryMarker--today {
  border-color: rgba(85, 204, 170, 0.50);
  color: #2f8e72;
}
.sessionHistoryMarker--today.is-active {
  background: linear-gradient(135deg, #55ccaa 0%, #3aae8c 100%);
  border-color: #3aae8c;
  color: #ffffff;
}

/* Insights: only render when a pattern is detected. Each insight is a
   gentle observation, never a verdict. Lives inside the This Exercise
   card directly under the tile row (or callout). */
.thisExerciseStatsCard .lastTimeInsights {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(145, 135, 211, 0.14);
}
.lastTimeInsights {
  margin-top: 18px;
}
.lastTimeInsightsHeader {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #6f64b8;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: left;
}
.lastTimeInsight {
  background: rgba(145, 135, 211, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px -4px rgba(58, 47, 105, 0.08);
}
.lastTimeInsight:last-child { margin-bottom: 0; }
.lastTimeInsight--start {
  background: rgba(145, 135, 211, 0.18);
}
.lastTimeInsight--start .lastTimeInsightTitle { color: #5a4fb0; }
.lastTimeInsight--end {
  background: rgba(245, 166, 35, 0.18);
}
.lastTimeInsight--end .lastTimeInsightTitle { color: #a35d0a; }
.lastTimeInsight--flat {
  background: rgba(245, 166, 35, 0.18);
}
.lastTimeInsight--flat .lastTimeInsightTitle { color: #a35d0a; }
.lastTimeInsight--decrease {
  background: rgba(85, 204, 170, 0.18);
}
.lastTimeInsight--decrease .lastTimeInsightTitle { color: #2fa080; }
.lastTimeInsightTitle {
  font-weight: 700;
  font-size: 0.96rem;
  color: #2a2744;
  margin-bottom: 4px;
}
.lastTimeInsightBody {
  font-size: 0.9rem;
  color: #4a4560;
  line-height: 1.5;
}

/* Callout below the 3-tile row, e.g. "discomfort is at its peak, repeat" */
.thisExerciseCallout {
  margin-top: 14px;
}
.thisExerciseCallout .exerciseSummaryCallout {
  background: #e3deff;
  border: 1px solid rgba(145, 135, 211, 0.30);
  color: #2a2744;
  text-align: left;
  padding: 26px 14px 12px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  position: relative;
}
.thisExerciseCallout .exerciseSummaryCalloutLabel {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: #5a4fb0;
}
.thisExerciseCallout .exerciseSummaryCallout .standardButton {
  margin-top: 10px;
}

/* New highlights unlocked card (exposure summary) */
.newHighlightsCard {
  overflow: hidden;
  position: relative;
}
.newHighlightsCard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(145,135,211,0.10) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: newHighlightSweep 1400ms ease 200ms forwards;
}
/* Hold every animation in this card until the c_onVisible scroll observer
   removes the --primed class. Otherwise the reveal plays before the user
   has scrolled the section into view. */
.newHighlightsCard--primed::before,
.newHighlightsCard--primed .newHighlightCard,
.newHighlightsCard--primed .newHighlightRingFill,
.newHighlightsCard--primed .newHighlightIcon,
.newHighlightsCard--primed .newHighlightSpark {
  animation-play-state: paused !important;
}
@keyframes newHighlightSweep {
  to { transform: translateX(100%); }
}
.newHighlightsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newHighlightCard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6f3ff 0%, #ecfaf4 100%);
  border: 1px solid #e2dcf6;
  opacity: 0;
  transform: scale(0.7) translateY(10px);
  animation: newHighlightPop 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes newHighlightPop {
  0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.newHighlightIconWrap {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newHighlightRing {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 6px 14px rgba(119, 106, 200, 0.22));
}
.newHighlightRingFill {
  animation: newHighlightRingDraw 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes newHighlightRingDraw {
  to { stroke-dashoffset: 0; }
}
.newHighlightIcon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: newHighlightIconBounce 900ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: inherit;
}
.newHighlightIcon img {
  display: block;
  max-width: 56px;
  max-height: 56px;
}
@keyframes newHighlightIconBounce {
  0%   { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.newHighlightSpark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9187d3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: newHighlightSpark 900ms ease-out forwards;
}
.newHighlightSpark--0 { background: #9187d3; --sx: 0px;   --sy: -52px; }
.newHighlightSpark--1 { background: #55ccaa; --sx: 46px;  --sy: -28px; }
.newHighlightSpark--2 { background: #f5a623; --sx: 46px;  --sy: 28px;  }
.newHighlightSpark--3 { background: #9187d3; --sx: 0px;   --sy: 52px;  }
.newHighlightSpark--4 { background: #55ccaa; --sx: -46px; --sy: 28px;  }
.newHighlightSpark--5 { background: #f5a623; --sx: -46px; --sy: -28px; }
@keyframes newHighlightSpark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  35%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.6);
  }
}
.newHighlightCopy {
  flex: 1 1 auto;
  min-width: 0;
}
.newHighlightPill {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: #6f64b8;
  background: rgba(145, 135, 211, 0.14);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 6px;
}
.newHighlightTitle {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2a2744;
  line-height: 1.3;
  margin-bottom: 4px;
}
.newHighlightBody {
  font-size: 0.92rem;
  color: #4a4663;
  line-height: 1.4;
}
.newHighlightBig {
  font-weight: 800;
  color: #6f64b8;
  font-size: 1.05em;
}
.newHighlightRed {
  font-weight: 800;
  color: #fb7179;
}
.newHighlightGreen {
  font-weight: 800;
  color: #55ccaa;
}
@media (max-width: 480px) {
  .newHighlightCard {
    gap: 12px;
    padding: 12px 12px;
  }
  .newHighlightIconWrap {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
  }
  .newHighlightRing { width: 68px; height: 68px; }
  .newHighlightIcon img { max-width: 44px; max-height: 44px; }
  .newHighlightTitle { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .newHighlightCard,
  .newHighlightIcon,
  .newHighlightRingFill,
  .newHighlightSpark,
  .newHighlightsCard::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .newHighlightSpark { display: none; }
}

/* Instructions card rendered inside an exposure flow (e.g. firstExposureGuide). */
.exposureInstructions {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin: 16px auto;
  max-width: 520px;
  text-align: left;
  border: 1px solid rgba(145, 135, 211, 0.16);
  box-shadow: 0 4px 10px -4px rgba(58, 47, 105, 0.08);
}

.exposureInstructionsLabel {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #9187d3;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: left;
}

.exposureInstructionsBody {
  font-size: 1.05em;
  line-height: 1.5;
  color: #333;
}