.sayChunk {
  display: block;
  width: 100%;
  padding: 16px 20px;
  margin: 10px 0;
  border-radius: 12px;
  border: 2px solid #6c5fc0;
  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: var(--bia-teal-surface);
  border-color: var(--bia-teal);
  color: var(--bia-fg);
}

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

.sayWordLit {
  color: #6c5fc0;
  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 #6c5fc0;
  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:#6c5fc0;
    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: var(--bia-teal-surface);
    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:var(--bia-teal);
    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:var(--bia-teal);
    display: inline-block;
    border-radius: 8px;
}
.activityProgress.improve {
    color:#fb7179;
    background:#ffe3e4;
}
.activityProgress.progress {
    color:#ffd393;
    background:#fff4e3;
}
.activityProgress.complete {
    background: #e3f9f3;
    color:var(--bia-teal);
}

.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 #6c5fc0;  /* Circle border */
    color:#6c5fc0;
    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:#6c5fc0;
    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:#6c5fc0;
}

.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: #6c5fc0;
    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: #6c5fc0;
    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 #6c5fc0;
  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;
}
.activityResult.exploreCard {
  background: var(--bia-tool-surface);
  border: 1.5px dashed var(--bia-tool-border);
  box-shadow: none;
}
.activityResult.exploreCard:hover {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.08);
}
/* Selected has to survive greyscale and a screenshot: the fill alone was a light lilac on a
   near-white card, which was almost invisible next to an unselected one. Border weight, the
   accent tint and a tick together, plus aria-pressed on the card itself. */
.activityResult.exploreCard.selectedExplore {
  background: var(--bia-pal-lav-bg);
  border: 2.5px solid var(--bia-tool-accent);
  box-shadow: 0 6px 16px -8px rgba(104, 83, 212, 0.45);
}

.activityResult.exploreCard.selectedExplore .activityLabel {
  color: var(--bia-tool-accent);
  font-weight: 700;
}

.activityResult.exploreCard.selectedExplore::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bia-tool-accent);
  /* A tick drawn with two borders rather than a glyph, so it does not depend on the icon
     font that has not shipped yet. */
  background-image: linear-gradient(45deg, transparent 45%, #ffffff 45%, #ffffff 55%, transparent 55%),
                    linear-gradient(-45deg, transparent 60%, #ffffff 60%, #ffffff 70%, transparent 70%);
  background-size: 10px 2px, 6px 2px;
  background-position: 5px 9px, 4px 7px;
  background-repeat: no-repeat;
}

.activityResult.exploreCard {
  position: relative;
}

@media (forced-colors: active) {
  .activityResult.exploreCard.selectedExplore { border-width: 4px; }
}
/* Insight reveal: thinking loader + radar grow-in. The shape group starts at scale(0)
   and animates to scale(1) when .animateIn is added by the JS one frame after mount.
   The thinking dots have a staggered pulse so the user perceives Bia "working". */
.insightSummaryLine {
  margin:8px auto 14px;
  font-size:15px;
  color:#5347a8;
  font-weight:500;
  max-width:420px;
}
.insightRadarShape {
  transform: scale(0);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease-out;
}
.insightRadarShape.animateIn,
svg.animateIn .insightRadarShape {
  transform: scale(1);
  opacity: 1;
}
.insightThinking {
  padding: 8px 0 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.insightThinking svg {
  filter: drop-shadow(0 0 8px rgba(83, 71, 168, 0.18));
}
.radarCenterPulse {
  transform-origin: 200px 160px;
  transform-box: view-box;
  animation: radarCenterPulse 1.6s ease-in-out infinite;
}
@keyframes radarCenterPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0.5; }
}
.insightThinkingText {
  color:#5347a8;
  font-size:13px;
  margin:0;
  font-style:italic;
}

/* Plan celebration sequence: two screens that follow review on first-time completion.
   The radar overlay shows fear-shape vs plan-shape with a staggered grow-in; the ladder
   reveals plan items bottom-up with the goal at the top getting a soft glow. */
.planRadarFearShape, .planRadarPlanShape {
  transform: scale(0);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease-out;
}
.planRadarFearShape.animateIn, .planRadarPlanShape.animateIn {
  transform: scale(1);
  opacity: 1;
}
/* Goal view tab bar: pill-style two-button toggle between the Steps list and
   the Insights pane (radar + stats). Matches the onboarding chip palette so it
   reads as part of Bia's design language. */
.goalTabBar {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 16px auto 20px;
  padding: 4px;
  background: #f7f6ff;
  border: 1px solid #ece9ff;
  border-radius: 999px;
  max-width: 320px;
}
.goalTab {
  flex: 1;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #6b6b82;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.goalTab.active {
  background: #6c5fc0;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(119,106,200,0.25);
}
.goalTab:not(.active):hover {
  color: #1a1a2e;
}

/* Stats row on the Insights tab: three small cards stacked horizontally above
   the radar. Number is the focal element; label sits muted underneath. */
.goalStatsRow {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 20px;
  max-width: 480px;
}
.goalStat {
  flex: 1;
  padding: 14px 8px;
  background: #ffffff;
  border: 1px solid #ece9ff;
  border-radius: 14px;
  text-align: center;
}
.goalStatValue {
  font-size: 26px;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1.1;
}
.goalStatLabel {
  font-size: 12px;
  font-weight: 600;
  color: #6b6b82;
  margin-top: 4px;
}

/* Canvas wrapper for the Chart.js radar. Constrained to a square so Chart.js's
   maintainAspectRatio keeps the radar circular at any viewport width. The wrapper
   itself is intentionally static; the polygon-shape animation happens via Chart.js
   data updates (see x_radarBlobFrames in exercise.js), not via CSS transform. */
.planRadarChartWrap {
  max-width: 360px;
  width: 100%;
  margin: 12px auto 0;
  aspect-ratio: 1 / 1;
}
.planRadarChartWrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.planRadarLegend {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:10px auto 6px;
  font-size:12px;
  color:#2a2744;
  flex-wrap:wrap;
}
.planLegendSwatch {
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:3px;
  vertical-align:middle;
  margin-right:4px;
}
.planLegendSwatch.planLegendFear { background:rgba(145,135,211,0.5); border:2px solid #5347a8; }
.planLegendSwatch.planLegendPlan { background:rgba(42,140,112,0.4); border:2px dashed #2a8c70; }

.planGapFillers {
  margin: 12px auto 0;
  max-width: 520px;
}
.planGapFillersHeader {
  font-size: 13px;
  color: #6b6b82;
  margin-bottom: 8px;
}
.planGapFillerBtn {
  display: inline-block;
  margin: 4px;
  padding: 8px 14px;
  border-radius: 16px;
  border: 1px dashed #6c5fc0;
  background: #fbfaff;
  color: #5347a8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.planGapFillerBtn:hover { background:#ede9fc; }

/* Ladder reveal: each row wraps the standard activityResult card so the ladder uses
   the same visual language as the rest of the breakdown flow. The wrapper handles the
   staggered fade/scale animation. Goal row gets a green glow treatment so the user
   sees their summit. */
/* Maybe-review step: one card at a time. Card uses a dashed border to signal it isn't
   in the plan yet. Buttons are compact and split: leave-out on the left, add-to-plan
   on the right. */
.maybeReviewCard {
  margin: 16px auto 0;
}
.maybeReviewCard .activityResult {
  border: 2px dashed #b8b0d8;
  background: #faf9fd;
}
.maybeReviewButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px auto 0;
  max-width: 320px;
}
.maybeReviewCompactBtn {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 21px;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
.maybeReviewCompactBtn.primary {
  background: #6c5fc0;
  color: white;
  border: 1px solid #6c5fc0;
}
.maybeReviewCompactBtn.primary:hover {
  background: #7a6fc9;
}
.maybeReviewCompactBtn.secondary {
  background: white;
  color: #6c5fc0;
  border: 1px solid #6c5fc0;
}
.maybeReviewCompactBtn.secondary:hover {
  background: #f3f1fb;
}

/* Unified subtitle style for the goal/activity flow. Title + subtitle is a
   recurring pattern across the breakdown, why, reason, reassure, and explainer
   screens; this class is the single source of truth so they all read the same.
   Palette matches onboardingB.html (muted body grey on white). */
.exerciseSub {
  max-width: 480px;
  margin: 4px auto 18px;
  font-size: 14px;
  color: #6b6b82;
  text-align: center;
  line-height: 1.5;
}

/* Caption shown beneath the radar while the polygon is animating its way through the
   user's rating history. Reserves space and lets them know the page hasn't stalled. */
.radarReplayCaption {
  margin: 14px auto 0;
  font-size: 13px;
  font-style: italic;
  color: #7c739c;
}

/* Expandable "Why this activity?" affordance. Lives at the activityResult root level
   (sibling of the image + label), so it sits at the bottom-left of the card and its
   expanded detail panel can use the full card width. clear:both takes it below the
   inline-block image+label row even though those don't float. */
.activityWhyBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin: 8px 0 0;
  color: #6c5fc0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  clear: both;
}
.activityWhyBtn:hover { background: #f4f1ff; }
.activityWhyBtn svg { stroke: currentColor; opacity: 0.85; }
.activityWhyBtn.rateWhyBtn {
  font-size: 13px;
  margin: 4px auto 12px;
  padding: 6px 10px;
}
.activityWhyDetail {
  background: #f4f1ff;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 6px;
  font-size: 13px;
  color: #2a2744;
  line-height: 1.4;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

/* WHY chips: three equal-weight pills shown after the user picks a SUD value. First two
   commit the item to the plan (the second adds a stretch flag); third leaves it out of
   the plan and routes the rating into explore mode. Chips wrap on narrow viewports so
   each is easy to tap. */
.whyChipsBlock {
  margin: 18px auto 0;
  max-width: 600px;
}
.whyChipsPrompt {
  font-size: 15px;
  color: #2a2744;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}
.whyChips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.whyChip {
  flex: 0 1 auto;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1.5px solid #ece9ff;
  background: #ffffff;
  color: #1a1a2e;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: normal;
  line-height: 1.25;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.whyChip:hover { background:#f7f6ff; border-color:#6c5fc0; }
.whyChip.primary {
  background:#6c5fc0; color:#ffffff; border-color:#6c5fc0;
  box-shadow: 0 6px 20px rgba(119,106,200,0.3);
}
.whyChip.primary:hover {
  background:#5c55da; border-color:#5c55da; color:#ffffff;
  box-shadow: 0 10px 28px rgba(119,106,200,0.4);
  transform: translateY(-1px);
}
.whyChip.maybe {
  border-color:#ece9ff; color:#1a1a2e; background:#ffffff;
}
.whyChip.maybe:hover { background:#f7f6ff; border-color:#6c5fc0; }
.whyChip.skip {
  border-color:#ece9ff; color:var(--bia-muted); background:#ffffff;
}
.whyChip.skip:hover { background:#f7f6ff; color:#1a1a2e; }
.whyChipsHelp {
  font-size: 11px;
  color: #a8a3c4;
  margin-top: 10px;
  text-align: center;
}
.insightFeelsWrongBtn {
  margin-top: 10px !important;
  font-size: 13px;
}

/* "Why probably not?" follow-up. Reuses .whyChips styling for the chip row but adds a
   wider grid for the 4 reason options (cost, convenience, difficulty, other). */
.probablyNotChips .whyChip {
  flex: 1 1 calc(50% - 12px);
  max-width: 260px;
}
@media (max-width: 520px) {
  .probablyNotChips .whyChip { flex: 1 1 100%; max-width: none; }
}
/* Goal-anchored context line on the breakdown screen. Small italic line that says
   "Building toward your goal of X" with a hint of the algorithm's intent. */
.breakdownContext {
  font-size: 12px;
  color: #6c5fc0;
  font-style: italic;
  max-width: 480px;
  margin: 4px auto 12px;
  text-align: center;
  line-height: 1.4;
}
.whyChip:active { transform: scale(0.985); }
.whyChip.primary:active { transform: scale(0.985); }
.whyChipsPlanCount {
  font-size: 12px;
  color: #6b6b82;
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}
@media (max-width: 520px) {
  .whyChip { flex: 1 1 100%; max-width: none; }
}

/* Rate-step commit decision: equal-weight two-button block shown after the user picks
   a rating value. Both buttons advance the flow, the difference is whether the item
   joins the user's plan or stays as a profile-only signal. Stacks vertically on narrow
   viewports so each button is comfortable to tap. */
.rateCommitBlock {
  margin: 18px auto 0;
  max-width: 520px;
}
.rateCommitPrompt {
  font-size: 15px;
  color: #2a2744;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}
.rateCommitButtons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.rateCommitButton {
  flex: 1 1 200px;
  max-width: 240px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 2px solid #5347a8;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
  line-height: 1.25;
}
.rateCommitButton.primary {
  background: #5347a8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(83, 71, 168, 0.25);
}
.rateCommitButton.primary:hover { background: #4a3f95; }
.rateCommitButton.secondary {
  background: #ffffff;
  color: #5347a8;
}
.rateCommitButton.secondary:hover { background: #ede9fc; }
.rateCommitButton:active { transform: translateY(1px); }
.rateCommitPlanCount {
  font-size: 12px;
  color: #6b6b82;
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}
@media (max-width: 480px) {
  .rateCommitButtons { flex-direction: column; }
  .rateCommitButton { max-width: none; flex-basis: auto; }
}

/* Intro + outro screens around the multi-page exploration sequence. Body text is sized
   for comfortable reading, bounded width so long sentences wrap nicely on desktop. */
.explorationIntroBody {
  max-width: 520px;
  margin: 12px auto 18px;
  font-size: 15px;
  color: #2a2744;
  line-height: 1.45;
  text-align: center;
}

.roundBadge {
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  padding:3px 10px;
  border-radius:10px;
  margin-bottom:8px;
  background:#ede9fc;
  color:#5347a8;
}
.roundBadge.breakdown { background:#e9f9f0; color:#1f7a5b; }
.roundBadge.explore   { background:#fff2e3; color:#a16d2c; }
.roundBadge.insight   { background:#ede9fc; color:#5347a8; }
.planProgressHint {
  color:#6b6b82;
  font-size:12px;
  margin-bottom:10px;
}
.pairContrastGrid {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  margin-top:8px;
}
.pairContrastGrid .pairCard {
  width:335px;
  max-width:100%;
}
.exploreBadge {
  display:inline-block;
  background:#ede9fc;
  color:#5347a8;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  padding:3px 10px;
  border-radius:10px;
  margin-bottom:8px;
}
.commitConfirmOverlay {
  position:fixed;
  inset:0;
  background:rgba(42,39,68,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.commitConfirmCard {
  background:#fff;
  border-radius:14px;
  padding:24px;
  max-width:420px;
  width:90%;
  text-align:center;
}
.commitConfirmCard h3 {
  color:#5347a8;
  margin:0 0 8px;
}
.commitConfirmCard p {
  color:#6b6b82;
  font-size:14px;
  margin:0 0 16px;
}
.commitConfirmCard button {
  display:block;
  width:100%;
  margin:6px 0;
}
.alreadyGoalBadge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: #6c5fc0;
  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:#6c5fc0;
}
.dialogueHighlight.gold {
  color:#FFBF00;
}
.dialogueHighlight.red {
  color:#fb7179;
}
.dialogueHighlight.green {
  color:var(--bia-teal);
}
.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, #6c5fc0 18%, var(--bia-teal) 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: #6c5fc0;
  color:white;
}
.customContentOption.white {
  background:white;
}
.customContentOption.white:hover {
  background: #6c5fc0;
}

.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:var(--bia-teal);
}
.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%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.achievementBar {
 position:relative;
  background: #6c5fc0;
  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: var(--bia-teal-surface);
  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: var(--bia-teal-surface);
  color: var(--bia-fg);
}

.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 #6c5fc0;
  outline-offset: -2px;
}

.streakDayCell--inStreak {
  background: linear-gradient(135deg, #6c5fc0 0%, var(--bia-teal) 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, #6c5fc0 0%, var(--bia-teal) 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: #6c5fc0;
  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:var(--bia-teal-surface);
  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: var(--bia-teal-surface);
  color:var(--bia-fg);
}
.smallPreviewSection.purple {
  background: #6c5fc0;
  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: var(--bia-teal-surface);
}

.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: #6c5fc0;  
  border-radius: 4px; 
  width: 100%;
  transition: 0.4s linear;  
  animation: progressAnimationStrike 4s;
  transition-property: width, background-color;    
}

.loading-bar.done {
  height: 18px;
  background-color: #6c5fc0;  
  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: #6c5fc0;
    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: #6c5fc0;
  border:3px solid #6c5fc0;
}

.surveyAnswer.selected {
 background: #e3deff;
 border:3px solid #6c5fc0;
 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: var(--bia-teal-surface);
background: linear-gradient(to top left, #6c5fc0 18%, var(--bia-teal) 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 #6c5fc0;
  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 var(--bia-teal);
}
.targetDiscomfort {
  display: inline-block;
  border-radius: 8px;
  margin:4px;
  padding:8px;
  background:#e3deff;
  border:2px solid #6c5fc0;
}
.discomfortGraphContainer {

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

/* Kids-only exposure intro monster: fixed box matching the source 400x532
   portrait ratio reserves space (no layout shift when the CDN image loads late)
   and keeps it a sensible size. Scoped to the child branch via the
   exposureMonsterImg class in exposure.js. */
.exposureMonsterImg {
  width:auto;height:200px;max-width:50%;aspect-ratio:400/532;
}

.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 #6c5fc0;
  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: #6c5fc0;
  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: #6c5fc0;
}

.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 #6c5fc0;
  
}
.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:var(--bia-muted);
  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:var(--bia-muted);
    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: #6c5fc0;
  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 #6c5fc0;
  outline-color: #6c5fc0;
}

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 #6c5fc0;
  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 #6c5fc0;
  outline-color: #6c5fc0;
}

.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 #6c5fc0;
  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 #6c5fc0;
}
.writeEditable mark {
  background-color: #E3F9F3;
  color: inherit;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--bia-teal);
  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: #443a8f;
  font-size: 0.85rem;
  font-weight: 600;
}

.introSetupExpandText {
  white-space: nowrap;
}

.introSetupChevron {
  flex: 0 0 auto;
  color: #443a8f;
  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 #443a8f;
  outline-offset: 2px;
}

.switchToggle.selected {
  background: var(--bia-teal-surface);
  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:#6c5fc0;
}
.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: #6c5fc0;
}

.exposureContentWrapper {
  min-height: 300px;
}

/* Write stages use a short editable; drop the tall min-height so the Next button
   sits directly under the text area instead of after a large empty gap. */
.exposureContentWrapper.writeStage {
  min-height: 0;
}

.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;
  overflow: hidden;
}

.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: var(--bia-teal-surface);
}

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

.hidden {
    display: none;
}

#bottom-filler {
    height:700px;
}

div.selectExposureContainer {
    display:inline-block;
    vertical-align: top;
    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:#6c5fc0;
  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:#6c5fc0;
  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: var(--bia-teal);
}

.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: #6c5fc0;
}
.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: #595959;
  opacity: 1;
}

.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 #6c5fc0;
}
.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: #6c5fc0;
}

.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: #595959;
  opacity: 1;
}

.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;
  color: #565266;
  opacity: 1;
  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:#6c5fc0;
}
}

/* 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: #6c5fc0;
  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: #6c5fc0; 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: #6c5fc0; 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: #6c5fc0; 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: #6c5fc0; 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: #6c5fc0; }
.act-goal-dot.current { background: var(--bia-teal-surface); 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: var(--bia-teal); font-weight: 700; margin-bottom: 18px; }

/* Phase cards */
/* Shared centered column for the whole activity/moment tool. Keeps cards,
   panels, and buttons on one consistent column on desktop (mirrors the
   onboarding card layout) instead of some elements stretching full-width
   while others cap and center. */
.act-shell-wrap { width: 100%; max-width: 520px; margin: 0 auto; }

.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, #6c5fc0, #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; color: #5f6470; margin-top: 2px; } /* was opacity:0.6 = #898989 3.49:1; solid AA gray */
.act-phase-card.do-ready .act-phase-sub { color: #ffffff; }
.act-phase-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #f0fdf9; color: var(--bia-teal); 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: #6c5fc0; 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: none; 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: none; 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: #6c5fc0; 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: none;
    padding: 18px 24px; font-size: 18px; font-weight: 800;
    background: linear-gradient(135deg, #6c5fc0, #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: #6c5fc0;
    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: #6c5fc0; font-weight: 700; text-transform: none; 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: #6c5fc0; 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: none;
    padding: 16px 24px; font-size: 17px; font-weight: 700;
    background: var(--bia-teal-surface); color: var(--bia-fg); 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: none; letter-spacing: 0.3px; }
.act-arc-arrow { font-size: 22px; color: #ccc; }
.act-arc-note  { font-size: 14px; color: var(--bia-teal); 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: #6c5fc0; text-transform: none; 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: #6c5fc0; 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: none; 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: #6c5fc0; 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: var(--bia-teal); --pcard-accent-bg: rgba(85,204,170,0.08); }
/* Green card's Done button takes the light mint surface so its dark text stays poppy and readable;
   the accent above stays dark teal for the check icon (text on white) and the done-state border. */
.act-pcard--green .act-pcard-done-btn { background: var(--bia-teal-surface); }
.act-pcard--purple { --pcard-accent: #6c5fc0; --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, var(--bia-teal)); 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, var(--bia-teal)); color: #16213a;
    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: #6c5fc0; }

/* ── State: done ─────────────────────────────────────── */
.act-pcard.done {
    border-color: var(--pcard-accent, var(--bia-teal));
    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: #6c5fc0; line-height: 1; }
.act-celebrate-end     { font-size: 52px; font-weight: 900; color: var(--bia-teal); 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: #6a6a72; font-size: 13px; cursor: pointer; padding: 4px 8px; } /* #bbb was 1.78:1; #6a6a72 passes AA */

/* 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: #6c5fc0; 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: #6c5fc0; }
.act-hiw-axis-lbl { font-size: 9px; fill: #bbb; font-family: inherit; }
.act-hiw-peak-lbl { font-size: 9px; fill: #6c5fc0; 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: #595959; 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: #6c5fc0; }

/* 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: #6c5fc0; 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: #6c5fc0; }
.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: none; 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: #6c5fc0; 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: #6c5fc0; 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: #6c5fc0; animation: actBarPulse 2.2s ease-in-out infinite; }
.act-do-bar-seg.done   { background: var(--bia-teal-surface); }
/* 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: none; 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: #6c5fc0; }
.act-do-bar-label--done       { color: var(--bia-teal); }
@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: none; 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: var(--bia-teal); 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: #6c5fc0; 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: none;
    color: #6c5fc0;
    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: none; 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: #6c5fc0;
    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: #6c5fc0;
    cursor: pointer; transition: all 0.15s;
}
.act-coach-prompt-opt:hover { background: rgba(145,135,211,0.08); border-color: #6c5fc0; }
.act-coach-prompt-opt--selected {
    background: #6c5fc0; color: white; border-color: #6c5fc0;
}
.act-coach-prompt-submit {
    border-radius: 12px; padding: 9px 18px; background: #6c5fc0;
    color: white; border-color: #6c5fc0; 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 { border-color: #6c5fc0; }
.act-coach-prompt-text:focus:not(:focus-visible) { outline: none; }
.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: none; letter-spacing: 0.4px;
}
.act-coach-prompt-answered-a {
    display: inline-block; font-size: 13px; font-weight: 700; color: #6c5fc0;
    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: #6c5fc0; color: #6c5fc0; background: rgba(145,135,211,0.06);
}
.act-module-pill--active {
    border-color: #6c5fc0; color: white; background: #6c5fc0;
}

/* ── 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: #6c5fc0; 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, var(--bia-teal), #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: var(--bia-teal); 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: #6c5fc0; border-color: #6c5fc0;
    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, var(--bia-teal), #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: #6c5fc0;
}
.act-scheduler-clear {
    background: none; border: none; color: #6c5fc0;
    font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 4px 2px; white-space: nowrap; flex-shrink: 0;
}
.act-scheduler-clear:hover { color: #6c5fc0; }
.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: var(--bia-teal); }
.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: var(--bia-teal-surface); color: var(--bia-fg);
    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, var(--bia-teal)); }
.act-plan-seg.skipped { background: #ddd; }
.act-plan-seg.active  { background: var(--seg-color, #6c5fc0); animation: actSegPulse 1.8s ease-in-out infinite; }
.act-plan-seg.pending { background: #eee; }
/* Segment accent colors */
.act-plan-seg--green  { --seg-color: var(--bia-teal); }
.act-plan-seg--purple { --seg-color: #6c5fc0; }
.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: var(--bia-teal); 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: var(--bia-teal); 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: #6c5fc0; }

/* 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: var(--bia-teal); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 43; stroke-dashoffset: 43;
}
.act-rev-leaf  { fill: var(--bia-teal); opacity: 0; }
.act-rev-glow  { fill: rgba(145,135,211,0.2); opacity: 0; }
.act-rev-dot   { fill: #6c5fc0; opacity: 0; }
.act-rev-rise  { fill: #6c5fc0; 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: #595959; 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: #6c5fc0; 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: #6c5fc0; border: 2px solid #6c5fc0;
    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: var(--bia-teal-surface); color: var(--bia-fg);
    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: #6c5fc0; font-size: 14px; font-weight: 600; cursor: pointer;
}
.moment-tab--active {
    background: #6c5fc0; color: white; border-color: #6c5fc0;
}

.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: #6c5fc0;
    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: #6c5fc0; 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 #6c5fc0; 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: #6c5fc0;
    text-transform: none; 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: none; 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: #6c5fc0; 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: #6c5fc0;
  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: #6c5fc0;
  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: var(--bia-amber); }

.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: var(--bia-amber); 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: #6c5fc0;
  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: var(--bia-teal-surface);
  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: var(--bia-teal);
  color: #2fa080;
  font-weight: 700;
}
.willingnessHistoryMarker--today {
  border-color: var(--bia-teal);
}

.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: #6c5fc0;
  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: #6c5fc0;
  color: #ffffff;
}
.expReview__choice--partly.selected {
  background: #89C4FF;
  color: #ffffff;
}
.expReview__choice--no.selected {
  background: var(--bia-teal-surface);
  color: var(--bia-fg);
}

@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 var(--bia-teal);
  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; }

/* Hide the page-level X exit button while the on-demand Therapy Toolbox sub-screen
   is open, so users don't read it as "close the toolbox" and exit the exercise. */
body.x-toolbox-active .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;
}

/* First-move orientation line on a fresh live session. */
.act-do2-orient {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6c5fbe;
  background: rgba(145,135,211,0.08);
  border-radius: 14px;
  padding: 11px 16px;
  margin: 0;
}

/* ── 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: #6c5fc0;
  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: #6c5fc0;
  color: #ffffff;
  border-color: #6c5fc0;
}
.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 { border-color: #6c5fc0; }
.act-do2-slot-textarea:focus:not(:focus-visible) { outline: none; }
.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: #6c5fc0;
  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: #6c5fc0;
  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: #6c5fc0;
  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: #6c5fc0;
  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: #6c5fc0;
  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 { border-color: #6c5fc0; }
.act-do2-slot-textinput:focus:not(:focus-visible) { outline: none; }

/* ── 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: #6c5fc0;
  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, var(--bia-teal), #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: #6c5fc0;
  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, #6c5fc0, #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-save:disabled {
  background: #d3d0e0;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.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: #6c5fc0;
  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, #6c5fc0 0%, var(--bia-teal) 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, #6c5fc0 0%, var(--bia-teal) 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: #6c5fc0;
  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, #6c5fc0 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, var(--bia-teal) 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: var(--bia-amber); }
.lastTimeInsight--flat {
  background: rgba(245, 166, 35, 0.18);
}
.lastTimeInsight--flat .lastTimeInsightTitle { color: var(--bia-amber); }
.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: #6c5fc0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: newHighlightSpark 900ms ease-out forwards;
}
.newHighlightSpark--0 { background: #6c5fc0; --sx: 0px;   --sy: -52px; }
.newHighlightSpark--1 { background: var(--bia-teal-surface); --sx: 46px;  --sy: -28px; }
.newHighlightSpark--2 { background: #f5a623; --sx: 46px;  --sy: 28px;  }
.newHighlightSpark--3 { background: #6c5fc0; --sx: 0px;   --sy: 52px;  }
.newHighlightSpark--4 { background: var(--bia-teal-surface); --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: var(--bia-teal);
}
@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: #6c5fc0;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: left;
}

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


/* ===================================================================
   Skip check-in overlay
   Shown on top of the live (paused) exposure when a skip is detected.
   See .claude/specs/skip-checkin-overlay-revamp.md
   =================================================================== */
.skipOverlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 39, 68, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: skipOverlayFade 0.18s ease;
}
@keyframes skipOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.skipOverlayCard {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 24px 22px;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 18px 50px rgba(42, 39, 68, 0.28);
  animation: skipCardIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes skipCardIn {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.skipOverlayClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f3f1fa;
  color: #6b6b82;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.skipOverlayClose:hover { background: #e8e4f6; color: #5347a8; }

.skipOverlayTitle {
  margin: 4px 0 10px;
  font-size: 21px;
  font-weight: 700;
  color: #2d2d44;
}
.skipOverlayReframe {
  margin: 6px 0 12px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #5347a8;
}
.skipOverlayFact {
  margin: 0 auto 6px;
  max-width: 380px;
  font-size: 15px;
  font-weight: 600;
  color: #3a3a52;
}
.skipOverlaySub {
  margin: 0 auto 18px;
  max-width: 380px;
  font-size: 13.5px;
  color: #8a8aa0;
}
.skipOverlayBody {
  margin: 0 auto 20px;
  max-width: 400px;
  font-size: 15px;
  line-height: 1.5;
  color: #555;
}

/* Step 1 reason chips */
.skipReasonChips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.skipReasonChip {
  display: block;
  width: 100%;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 600;
  color: #2d2d44;
  background: #f6f4fc;
  border: 1.5px solid #ece8f8;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.skipReasonChip:hover { background: #efeafa; border-color: #d8d0f0; }

/* Step 2 primary re-engagement button (the dominant choice) */
.skipPrimaryBtn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  background: #6c5fc0;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(145, 135, 211, 0.4);
  transition: background 0.12s ease;
}
.skipPrimaryBtn:hover { background: #7d72c6; }

/* Step 2 secondary options (quiet, subordinate) */
.skipSecondaryOpts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.skipSecondaryOpt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: #ffffff;
  border: 1.5px solid #ece8f8;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.skipSecondaryOpt:hover { background: #faf9fe; border-color: #d8d0f0; }
.skipOptTitle {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #2d2d44;
  margin-bottom: 3px;
}
.skipOptBody {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #6b6b82;
}

/* Exits (quietest) */
.skipExits {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}
.skipExitSkip,
.skipExitMute {
  font-size: 13.5px;
  color: #9a9ab0;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 4px;
}
.skipExitSkip:hover,
.skipExitMute:hover { color: #6b6b82; }

/* Mobile bottom sheet */
.skipOverlaySheet {
  align-items: flex-end;
  padding: 0;
}
.skipOverlaySheet .skipOverlayCard {
  max-width: 100%;
  border-radius: 20px 20px 0 0;
  padding-bottom: 30px;
  max-height: 90vh;
  animation: skipSheetUp 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes skipSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Backoff toast */
.skipToast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #2d2d44;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 12px;
  z-index: 10001;
  box-shadow: 0 8px 24px rgba(42, 39, 68, 0.32);
  animation: skipToastIn 0.2s ease;
}
@keyframes skipToastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Audio/video transcript disclosure (WCAG 1.2.1 / 1.2.3 text alternative). */
.media-transcript { margin: 8px auto 4px; max-width: 700px; text-align: left; }
.media-transcript > summary { cursor: pointer; color: #5b4fb0; font-weight: 600; padding: 4px 2px; }
.media-transcript > summary:hover { text-decoration: underline; }
.media-transcript-body { white-space: pre-wrap; line-height: 1.5; color: #3a3a3a; background: #faf9fe; border-radius: 12px; padding: 12px 14px; margin-top: 6px; }

/* Accessible-game start choice + switch link (Tier-3 shared infra) */
.x_gameChoice { max-width: 520px; margin: 8px auto; text-align: center; }
.x_gcTitle { font-size: 18px; color: #3a3a3a; margin: 6px 0 14px; }
.x_gcOptions { display: flex; flex-direction: column; gap: 12px; }
.x_gcBtn { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
    width: 100%; padding: 14px 16px; border: 2px solid #6c5fc0; border-radius: 14px; background: #fff;
    color: #3a3a3a; cursor: pointer; }
.x_gcBtn:hover { background: #f4f2fd; }
.x_gcBtnLabel { font-size: 16px; font-weight: 600; color: #5b4fb0; }
.x_gcBtnDesc { font-size: 13px; line-height: 1.4; color: #55565f; }
.x_gameSwitchWrap { text-align: center; margin: 12px 0 4px; }
.x_gameSwitchLink { background: none; border: 0; color: #5b4fb0; font-size: 14px; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; padding: 6px 8px; min-height: 24px; }
.x_gameSwitchLink:hover { color: #473d94; }

/* WCAG 1.4.10 reflow: .exposureTool is a fixed 280px (+16px margin) tile that overflows a 320px
   viewport (the resources/toolbox grid). On narrow phones, let tiles fill the row. */
@media (max-width: 400px) {
    .exposureTool {
        display: block;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOAL & ACTIVITY BREAKDOWN TOOL (spec.md)
   Component styles for the rebuilt tool. Lives here rather than in a new
   stylesheet because exercise.css is already attached to every route that
   loads the tool (21 extraCSS sites in server.py); a new file would have to
   be wired into each one, and any route missed would render the tool unstyled.
   Colour comes exclusively from the --bia-* tokens defined in custom.css,
   which are contrast-audited and swap automatically in high-contrast mode.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Icon tile: a rounded square carrying one decorative glyph, used on goal cards,
   ladder rungs, menu rows and the suggestion dock. Size and radius are set
   inline by x_iconTile() so one class serves every size the design calls for. */
.biaIconTile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  vertical-align: middle;
}

.biaIconTile-lav   { background: var(--bia-pal-lav-bg);   color: var(--bia-pal-lav-fg); }
.biaIconTile-teal  { background: var(--bia-pal-teal-bg);  color: var(--bia-pal-teal-fg); }
.biaIconTile-amber { background: var(--bia-pal-amber-bg); color: var(--bia-pal-amber-fg); }
.biaIconTile-rose  { background: var(--bia-pal-rose-bg);  color: var(--bia-pal-rose-fg); }
.biaIconTile-sky   { background: var(--bia-pal-sky-bg);   color: var(--bia-pal-sky-fg); }
.biaIconTile-mint  { background: var(--bia-pal-mint-bg);  color: var(--bia-pal-mint-fg); }

/* Forced-colours (Windows high contrast) drops background colours entirely, which
   would leave the glyph floating with no tile. Give it a real border so the tile
   still reads as an object, and let the system paint the glyph. */
@media (forced-colors: active) {
  .biaIconTile {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* Screen shell. Each goal-tool screen renders inside one of these so padding and
   max width are consistent without every screen restating them. */
.gbScreen {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.gbTitle {
  margin: 4px 0 6px;
  text-align: left;
  color: var(--bia-tool-ink);
}

.gbSubtitle {
  margin: 0 0 18px;
  text-align: left;
  color: var(--bia-tool-body-soft);
  font-size: 0.9em;
  line-height: 1.5;
}

.gbRows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tappable row used by the hub doors and the pack list. A real <button> so it is
   keyboard operable and announced as a control; the framework's data-action wiring
   handles activation. */
.gbRow {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
  box-shadow: 0 8px 20px -12px rgba(40, 30, 90, 0.32);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--bia-tool-ink);
}

.gbRow:hover {
  border-color: var(--bia-tool-accent);
}

.gbRow:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

.gbRowText {
  flex: 1;
  min-width: 0;
}

.gbRowTitle {
  display: block;
  font-weight: 600;
  font-size: 1em;
  color: var(--bia-tool-ink);
  line-height: 1.25;
}

.gbRowSub {
  display: block;
  margin-top: 2px;
  font-size: 0.8em;
  color: var(--bia-tool-muted);
  line-height: 1.35;
}

.gbRowChevron {
  flex: none;
  display: inline-flex;
  color: var(--bia-tool-muted);
}

.gbHubFoot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.8em;
  color: var(--bia-tool-muted);
}

/* Activity row. Overrides the legacy .activityResult card, which was a 335px fixed-width
   inline-block with a 64px photo. The row is fluid, so it fits narrow phones and the
   provider portal's wider panes without a media query, and it leads with the category
   icon tile instead of a per-activity photo. Rules are scoped .activityResult.gbActRow
   so specificity beats the legacy block above without editing it, keeping the two
   readable side by side while the rebuild is in progress. */
.activityResult.gbActRow {
  display: block;
  width: 100%;
  max-width: 420px;
  min-height: 0;
  margin: 0 auto 10px;
  padding: 0;
  font-size: 1rem;
  border-radius: 16px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  box-shadow: 0 5px 15px -10px rgba(40, 30, 90, 0.3);
  overflow: hidden;
  cursor: default;
}

.activityResult.gbActRow:hover {
  box-shadow: 0 8px 20px -12px rgba(40, 30, 90, 0.35);
}

/* The search field is one of the rows visually: same width, same corner, same border and
   shadow. It shipped at the shared .textInput's 335px against 420px rows, with a 5px margin
   that left it touching the first result. */
.gbScreen .textInput.goal {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 54px;
  margin: 4px auto 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  box-shadow: 0 5px 15px -10px rgba(40, 30, 90, 0.3);
  font-size: 0.95rem;
  color: var(--bia-tool-ink);
}

.gbScreen .textInput.goal:focus {
  border-color: var(--bia-tool-accent);
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

/* "Add your own" is not one more thing to pick from the list, it is the way out of the
   list, so it does not wear the list's clothes: dashed rather than solid, no shadow, and
   set apart above by a gap rather than the row rhythm. */
.activityResult.gbActRow#addYourOwn,
.activityResult.gbActRow#addYourOwnNamed {
  margin-top: 16px;
  border-style: dashed;
  border-color: var(--bia-tool-accent);
  background: none;
  box-shadow: none;
}

.activityResult.gbActRow#addYourOwn:hover,
.activityResult.gbActRow#addYourOwnNamed:hover {
  background: var(--bia-pal-lav-bg);
  box-shadow: none;
}

.activityResult.gbActRow#addYourOwn .gbActTitle,
.activityResult.gbActRow#addYourOwnNamed .gbActTitle {
  color: var(--bia-tool-accent);
  font-weight: 600;
}

.gbNoResults {
  margin: 6px 0 10px;
}

/* The offer that follows a search with no results keeps the dashed treatment but drops the
   extra top gap: here it is the answer, not an alternative to a list. */
.gbNoResultsAdd .activityResult.gbActRow#addYourOwnNamed {
  margin-top: 0;
}

/* Selection is not colour-only: the border weight changes and the inner button carries
   aria-pressed, so the state is available visually, structurally and to assistive tech. */
.activityResult.gbActRow.selected {
  border: 2px solid var(--bia-tool-accent);
  box-shadow: 0 8px 20px -8px rgba(104, 83, 212, 0.28);
}

/* The tap target. A real button filling the row. */
.gbActMain {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--bia-tool-ink);
  text-align: left;
  cursor: pointer;
}

.gbActMain.gbActStatic {
  cursor: default;
}

.gbActMain:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: -3px;
}

.gbActTitle {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bia-tool-ink);
}

/* Length modifier field, a sibling of the button rather than a child of it: an input
   inside a clickable row is invalid markup and steals taps. */
.gbActLength {
  padding: 0 14px 12px 66px;
  font-size: 0.85em;
  color: var(--bia-tool-body-soft);
}

.gbActLength input {
  width: 68px;
  padding: 4px 8px;
  border: 1px solid var(--bia-tool-border);
  border-radius: 8px;
  font: inherit;
}

.activityResult.gbActRow .activityWhyBtn {
  margin-left: 14px;
  margin-bottom: 10px;
}

/* The "?" belongs to the card, not under its title. It sat below the row on a negative
   top margin inherited from the old layout, which read as a second line of content. */
.activityResult.gbActRow {
  position: relative;
}

.activityResult.gbActRow .titleMore {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--bia-tool-muted);
}

.activityResult.gbActRow .titleMore svg {
  width: 18px;
  height: 18px;
}

.activityResult.gbActRow .titleMore:hover {
  color: var(--bia-tool-accent);
  background: var(--bia-pal-lav-bg);
}

.activityResult.gbActRow .titleMore:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 1px;
}

/* Keep the title clear of it. Only where the "?" is actually present, so rows without one
   are not left with a ragged gap on the right. */
.activityResult.gbActRow.gbActHasMore .gbActMain {
  padding-right: 42px;
}

.activityResult.gbActRow .titleMoreContent,
.activityResult.gbActRow .activityWhyDetail {
  padding: 0 14px 12px;
}

/* Screen action area: primary then secondary, stacked, full width. */
.gbActions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  /* Room for the primary button's shadow. Desktop has no bottom anchoring, so without
     this the shadow is clipped by the scroll container's edge. */
  padding-bottom: 16px;
}

/* Hero: one activity presented as the subject of the screen, used by the activity door. */
.gbHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 0 6px;
}

.gbHeroTile {
  width: 70px;
  height: 70px;
  border-radius: 20px;
}

.gbHeroTitle {
  margin: 16px 0 0;
  text-align: center;
  color: var(--bia-tool-ink);
}

/* "Why this was chosen" card. Rendered only when a real explanation exists. */
.gbWhyCard {
  /* Space on both sides: on the detail screen the scale's question follows immediately,
     and with only a top margin the card sat pressed against it. */
  margin-top: 16px;
  margin-bottom: 20px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid var(--bia-tool-border);
  background: var(--bia-tool-bg-top);
}

.gbWhyKicker {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--bia-tool-accent);
}

.gbWhyBody {
  margin: 8px 0 0;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--bia-tool-body);
}

/* Explore door. The design gives this screen a dark shell to mark it as a step out of
   plan-building and into a quick diagnostic. */
.gbExploreDoor {
  border-radius: 22px;
  padding: 26px 22px;
  text-align: center;
  background: linear-gradient(180deg, var(--bia-tool-shell-top), var(--bia-tool-shell-bottom));
}

.gbExploreDoor .gbHeroTitle,
.gbExploreDoor .gbExploreBody {
  color: var(--bia-tool-shell-fg);
}

/* The radar art on the explore door. Sized to the panel, and it is the one thing between
   the badge and the title, so it carries the vertical rhythm of that screen. */
.gbExploreArt {
  display: flex;
  justify-content: center;
  margin: 22px auto 6px;
}

.gbExploreArt svg {
  width: 180px;
  height: 180px;
  max-width: 62vw;
  max-height: 62vw;
}

.gbExploreArtRing,
.gbExploreArtSpoke {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}

.gbExploreArtShape {
  fill: rgba(126, 111, 224, 0.38);
  stroke: var(--bia-tool-shell-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.gbExploreArtDot {
  fill: var(--bia-tool-shell-accent);
}

@media (forced-colors: active) {
  .gbExploreArtShape { fill: none; stroke: CanvasText; }
  .gbExploreArtRing,
  .gbExploreArtSpoke,
  .gbExploreArtDot { stroke: CanvasText; fill: CanvasText; }
}

.gbExploreBadge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--bia-tool-shell-accent);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.gbExploreBody {
  margin: 10px 0 0;
  font-size: 0.9em;
  line-height: 1.6;
}

/* Low-emphasis text action, e.g. "I'd rather set a goal". A real button so it is
   focusable and announced, styled flat so it does not compete with the primary CTA. */
.gbTextButton {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--bia-tool-accent);
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
}

.gbExploreDoor .gbTextButton {
  color: var(--bia-tool-shell-muted);
}

/* Forced colours strips the shell's gradient, which would leave light-on-light text.
   Hand the whole panel back to the system palette and keep a border so it still reads
   as a distinct surface. */
@media (forced-colors: active) {
  .gbExploreDoor {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .gbExploreDoor .gbHeroTitle,
  .gbExploreDoor .gbExploreBody,
  .gbExploreDoor .gbExploreBadge,
  .gbExploreDoor .gbTextButton {
    color: CanvasText;
  }
}

/* Small tinted action. The tool's secondary moves were underlined purple text, which read
   as web links dropped into a product made of cards and buttons. Same tint and radius as
   the commit question's third tier, one size down. The explore door keeps the plain text
   treatment: on the dark shell a tinted pill would compete with the primary. */
.gbMiniBtn {
  border: 0;
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-accent);
  border-radius: 12px;
  font: inherit;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 14px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
}

.gbMiniBtn:hover {
  background: var(--bia-tool-border);
}

.gbMiniBtn:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

.gbMiniBtn:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (forced-colors: active) {
  /* The tint is the only thing that makes this read as a control. */
  .gbMiniBtn { border: 1px solid ButtonBorder; }
}

.gbTextButton:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

/* Pack detail: the ladder a pack would add, bottom rung first. An ordered list because
   the sequence is the point; the numbering is suppressed visually since the icon tiles
   and reading order already carry it, but it stays in the markup for screen readers. */
/* The Fear Profile build animation used as an interlude: the shape only. Its own stat and
   sub lines belong to the full reveal, which this is not. */
.gbFpBuild .fpComputeStat,
.gbFpBuild .fpComputeSub {
  display: none;
}

.gbFpBuild .fpCompute {
  padding: 0;
}

/* How this works: three rungs the same shape the ladder takes later, then what the method
   actually is. Its own screen, so it has room to say more than one line. */
.gbHowRungs {
  list-style: none;
  margin: 20px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gbHowRung {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 13px;
  background: var(--bia-tool-surface);
  border: 1.5px solid var(--bia-tool-border);
}

/* Each rung is a step narrower than the one above it, so the shape reads as a climb before
   the words do. */
.gbHowRungs .gbHowRung:nth-child(2) { margin-right: 32px; }
.gbHowRungs .gbHowRung:nth-child(3) { margin-right: 64px; }

.gbHowGoal {
  border-color: var(--bia-tool-accent);
  background: var(--bia-pal-lav-bg);
}

.gbHowRungLabel {
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bia-tool-ink);
}

.gbHowGoal .gbHowRungLabel { color: var(--bia-tool-accent); }

.gbHowPoints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gbHowPoint {
  display: flex;
  gap: 10px;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--bia-tool-body);
}

.gbHowBullet {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--bia-tool-accent);
}

.gbPacksKicker {
  margin: 18px 2px 8px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-accent);
}

.gbPackSteps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gbPackStep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
}

.gbPackStepTitle {
  flex: 1;
  min-width: 0;
  font-size: 0.88em;
  line-height: 1.3;
  color: var(--bia-tool-ink);
}

/* Remove sits behind a divider and stays muted: it is the rarely-wanted action on the row,
   and it must not read as a peer of the stepper it sits beside. */
.gbPackStepRemove {
  border: 0;
  background: none;
  padding: 4px 2px 4px 10px;
  margin-left: 2px;
  border-left: 1px solid var(--bia-tool-border);
  color: var(--bia-tool-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
}

.gbPackStepRemove:hover {
  color: var(--bia-tool-body);
}

.gbPackStepRemove:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.gbPackDroppedTitle {
  margin: 20px 0 6px;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--bia-tool-muted);
}

.gbPackDropped .gbPackStep {
  background: none;
  border-style: dashed;
}

.gbPackDropped .gbPackStepTitle {
  color: var(--bia-tool-body-soft);
}

.gbPackRestore {
  flex: 0 0 auto;
  padding: 4px 2px;
  font-size: 0.8em;
}

.gbEmpty {
  margin: 18px 0;
  text-align: center;
  font-size: 0.9em;
  color: var(--bia-tool-muted);
}

/* Detail and commit screens: the activity being decided on, shown as a compact header so
   the user never loses track of what they are answering about. */
.gbDetailHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.gbDetailTitle {
  margin: 0;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 1.15em;
  line-height: 1.25;
  color: var(--bia-tool-ink);
}

.gbCommitPrompt {
  margin: 18px 0 16px;
  text-align: center;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bia-tool-ink);
}

/* Decline reasons, revealed a tier at a time. Stacked full-width rather than wrapped
   chips: each is a sentence, and a wrapped row of sentences is hard to scan. */
.gbReasons {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.gbReason {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  font: inherit;
  font-weight: 600;
  font-size: 0.92em;
  color: var(--bia-tool-ink);
  text-align: left;
  cursor: pointer;
}

.gbReason:hover {
  border-color: var(--bia-tool-accent);
}

.gbReason:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

/* Soft nudge. Appears once a plan is worth seeing and never blocks the round above it,
   so the user leaves the loop when they choose to rather than when a counter says so. */
.gbNudge {
  margin-top: 20px;
  padding: 16px;
  border-radius: 18px;
  border: 1.5px solid var(--bia-tool-accent);
  background: var(--bia-tool-bg-top);
  text-align: center;
}

.gbNudgeText {
  margin: 0 0 12px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--bia-tool-ink);
}

/* Exploration offered rather than forced: quieter than the nudge, since it is a detour
   the user can ignore. */
.gbOffer {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px dashed var(--bia-tool-border);
  background: var(--bia-tool-surface);
  text-align: center;
}

.gbOfferText {
  margin: 0 0 6px;
  font-size: 0.85em;
  color: var(--bia-tool-body-soft);
}

.gbOfferActions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.gbBackRow {
  margin: 8px 0 16px;
}

/* ── Workbench ───────────────────────────────────────────────────────────── */

.gbWorkGoal {
  margin: 4px 0 14px;
  text-align: center;
  color: var(--bia-tool-ink);
}

/* Target chip: the goal the ladder climbs toward, sitting above its top rung. */
.gbTargetChip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--bia-pal-teal-fg);
  background: var(--bia-tool-bg-top);
}

.gbTargetText { flex: 1; min-width: 0; }

.gbTargetKicker {
  display: block;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-teal-text);
}

.gbTargetTitle {
  display: block;
  font-weight: 600;
  font-size: 0.88em;
  line-height: 1.25;
  color: var(--bia-tool-ink);
}

.gbTargetRating {
  flex: none;
  font-weight: 700;
  color: var(--bia-tool-teal-text);
}

/* The rungs, threaded by a spine so the list reads as a climb rather than a list. */
.gbRungs {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  position: relative;
}

.gbRungs::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--bia-pal-teal-bg), var(--bia-pal-lav-bg));
}

.gbRung {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 13px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
  box-shadow: 0 4px 13px -9px rgba(40, 30, 90, 0.3);
}

/* Steps beyond the user's next one are played down so the ladder points at one thing.
   Opacity alone would be colour-only signalling, so the next step also keeps full
   contrast text while dimmed ones do not carry status wording. */
.gbRung.dim { opacity: 0.55; }

.gbRungMain {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

a.gbRungMain:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.gbRungTitle {
  flex: 1;
  min-width: 0;
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bia-tool-ink);
}

/* Status is words, not just a coloured dot, so it survives greyscale and colour blindness. */
.gbRungStatus {
  flex: none;
  font-size: 0.65em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}

.gbRungStatus.complete { background: var(--bia-pal-mint-bg); color: var(--bia-tool-mint-text); }
.gbRungStatus.progress { background: var(--bia-pal-amber-bg); color: var(--bia-tool-amber-text); }

.gbRungControls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* Secondary rung actions (add a variation, remove). Separated from the stepper by a
   divider and drawn in the muted colour, so the two purple stepper buttons stay the only
   things on the row that look like they change the number. */
.gbRungExtras {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--bia-tool-border);
}

.gbRungExtra {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--bia-tool-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.gbRungExtra:hover {
  color: var(--bia-tool-ink);
  background: var(--bia-tool-bg-top);
}

.gbRungExtra:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 1px;
}

/* The −/N/+ stepper. Targets are 26px, below the 24px minimum only in their icon; the
   button box itself meets it. */
.gbStepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gbStepBtn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 8px;
  border: 0;
  background: var(--bia-pal-lav-bg);
  color: var(--bia-pal-lav-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.gbStepBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

.gbStepBtn:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 1px;
}

.gbStepValue {
  min-width: 16px;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--bia-tool-accent);
}

.gbFloor {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 12px;
  border: 1.5px dashed var(--bia-tool-border);
  font-size: 0.75em;
  font-weight: 600;
  color: var(--bia-tool-muted);
  text-align: center;
}

/* Suggestion dock: always one next move ready, so the workbench is never a blank page. */
.gbDock {
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1.5px solid var(--bia-tool-accent);
  background: var(--bia-tool-surface);
  box-shadow: 0 12px 28px -14px rgba(104, 83, 212, 0.4);
}

.gbDockHead {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-teal-text);
  margin-bottom: 9px;
}

.gbDockRow {
  display: flex;
  align-items: center;
  gap: 9px;
}

.gbDockTitle {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.85em;
  line-height: 1.25;
  color: var(--bia-tool-ink);
}

/* .standardButton carries min-width:200px and z-index:100 for full-width CTAs. Inside the
   dock's flex row that blew the row open and painted the button over the title, which
   wrapped to one word per line behind it. */
/* Scoped to .gbDock so it outranks .standardButton, which lives in custom.css and wins on
   load order at equal specificity. */
.gbDock .gbDockAdd {
  flex: none;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  z-index: auto;
  padding: 9px 16px;
  font-size: 0.85em;
}

.gbDockEmpty {
  margin: 0;
  font-size: 0.85em;
  color: var(--bia-tool-muted);
}

.gbDockActions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--bia-tool-border);
}

/* Tools grid. */
.gbToolGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gbTool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gbTool:hover { border-color: var(--bia-tool-accent); }

.gbTool:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

.gbToolName {
  font-weight: 700;
  font-size: 0.88em;
  color: var(--bia-tool-ink);
}

.gbToolDesc {
  font-size: 0.75em;
  line-height: 1.35;
  color: var(--bia-tool-muted);
}

/* ── Parts dials ─────────────────────────────────────────────────────────── */

.gbPartsDiff {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gbPartsDiffValue {
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  color: var(--bia-tool-accent);
}

.gbPartsDiffLabel {
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-muted);
}

.gbPartsAxis { margin-top: 16px; }

.gbPartsAxisLabel {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-muted);
  margin-bottom: 7px;
}

.gbPartsOptions {
  display: flex;
  gap: 6px;
}

/* Segmented control. Selection carries a border and weight change as well as fill, so it
   survives greyscale and forced colours rather than relying on the purple alone. */
.gbPartsOption {
  flex: 1;
  min-width: 0;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  font: inherit;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--bia-tool-body-soft);
  cursor: pointer;
}

.gbPartsOption.selected {
  border-color: var(--bia-tool-accent);
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-accent);
  font-weight: 700;
}

.gbPartsOption:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .gbPartsOption.selected {
    border-width: 3px;
  }
}

/* ── Worry chips ─────────────────────────────────────────────────────────── */

.gbWorryChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gbWorryChip {
  padding: 9px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  font: inherit;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--bia-tool-body-soft);
  cursor: pointer;
}

.gbWorryChip.selected {
  border-color: var(--bia-tool-accent);
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-accent);
}

.gbWorryChip:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

/* The note under "something else". Optional by design: the chip already told us the
   catalog's themes missed, and making the sentence mandatory would turn an easy correction
   into a writing task. */
.gbWorryNote {
  margin-top: 16px;
}

.gbFieldLabel {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--bia-tool-body);
}

.gbTextField {
  width: 100%;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1.5px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
  font: inherit;
  font-size: 0.9em;
  color: var(--bia-tool-ink);
}

.gbTextField:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 1px;
}

.gbWorryStep { margin-top: 18px; }

/* Candidate smaller steps. Each row is a toggle plus, when it is being taken, the stepper
   that sets its difficulty: the same shape as a pack rung, because it is the same
   decision. */
.gbWorryStepRow {
  margin-bottom: 8px;
}

.gbWorryStepRow.selected {
  border-color: var(--bia-tool-accent);
}

.gbWorryStepToggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gbWorryStepToggle:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 3px;
  border-radius: 10px;
}

/* An unselected row is still readable, just clearly not being taken. Opacity alone would
   fail greyscale, so the border above changes too. */
.gbWorryStepRow:not(.selected) .gbPackStepTitle {
  color: var(--bia-tool-body-soft);
}

.gbWorryMore {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
}

/* The user's own tweak, under the dials it sits alongside. */
.gbPartsCustom {
  margin-top: 22px;
}

.gbPartsCustomDir {
  margin-top: 8px;
}

.gbWorryStepKicker {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-teal-text);
  margin-bottom: 8px;
}

/* ── Commit hero ─────────────────────────────────────────────────────────────
   The step is the subject of this screen, so it gets the room. */
.gbCommitHero {
  text-align: center;
}

.gbCommitTile {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  margin: 0 auto;
}

/* One focal point. The step is the subject, so it is the only thing on the screen at
   heading size; the rating is a tag on it, the reason is supporting detail, and the question
   is a label on the buttons. Before this the title and the question were within a quarter of
   an em of each other and the why card carried a border, which made three blocks of equal
   loudness and no obvious place to look first. */
.gbCommitTitle {
  margin: 14px 0 0;
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--bia-tool-ink);
}

.gbCommitRating {
  display: inline-block;
  margin: 9px 0 0;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--bia-pal-lav-bg);
  font-size: 0.75em;
  font-weight: 600;
  color: var(--bia-tool-accent);
}

/* Recessive: no border, a softer tint and smaller text than the title above it. */
.gbCommitWhy {
  text-align: left;
  border: 0;
  background: var(--bia-tool-bg-top);
  margin-bottom: 0;
}

.gbCommitWhy .gbWhyBody {
  font-size: 0.85em;
}

/* The question belongs to the buttons, not to the step. Quieter than the title and sitting
   directly above the actions, which is where the user is looking by the time they read it. */
.gbCommit .gbCommitPrompt {
  margin: 0 0 10px;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--bia-tool-body);
}

/* After a decision the outcome leads and the step sits under it, centred with it. */
.gbReassureTitle,
.gbReassureBody {
  text-align: center;
}

.gbReassureTitle {
  margin-top: 22px;
}

/* ── Reveal ──────────────────────────────────────────────────────────────── */

.gbReveal { text-align: center; }

.gbRevealBadge {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-accent);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.gbRevealTitle { margin: 11px 0 4px; text-align: center; color: var(--bia-tool-ink); }

.gbRevealSubtitle {
  margin: 0 12px 14px;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--bia-tool-body-soft);
}

.gbRevealGoal { margin-bottom: 4px; }

.gbRevealRungs { text-align: left; }

/* The cascade is decoration on top of a visible resting state, never the thing that
   makes a rung appear. Animating from opacity:0 would leave the whole ladder invisible
   for anyone whose browser or extension suppresses animations. */
.gbRevealRung.animate {
  animation: gbRevealRungIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

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

@media (prefers-reduced-motion: reduce) {
  .gbRevealRung.animate { animation: none; }
}

.gbRevealRung.start {
  border-color: var(--bia-pal-mint-fg);
  box-shadow: 0 6px 16px -8px rgba(73, 147, 96, 0.4);
}

.gbStartHere {
  display: block;
  margin-top: 2px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-mint-text);
}

.gbRungRating {
  flex: none;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--bia-tool-accent);
}

/* ── Pace ────────────────────────────────────────────────────────────────── */

.gbPaceCard {
  padding: 16px;
  border-radius: 18px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
  box-shadow: 0 6px 18px -12px rgba(40, 30, 90, 0.35);
}

.gbPaceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gbPaceLabel {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--bia-tool-ink);
}

.gbPaceValue { font-size: 1.3em; min-width: 24px; }

.gbPaceEta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bia-tool-border);
}

.gbPaceEtaLabel {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--bia-tool-muted);
}

.gbPaceEtaValue {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--bia-tool-ink);
}

.gbPaceHint {
  margin: 10px 2px 0;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--bia-tool-body-soft);
  text-align: center;
}

.gbTimelineKicker {
  margin: 22px 2px 8px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-accent);
}

/* The weeks read as a route rather than a list: a rail down the week column with a marker
   at each week that starts, so the eye can see how the steps group. The rail is decorative,
   drawn on the container so it cannot be mistaken for content. */
.gbTimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.gbTimeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  /* Faded at both ends rather than inset by a fixed amount: rows change height with their
     title, so any fixed inset leaves a stub above the first marker on some plans and cuts
     into the rail on others. */
  background: linear-gradient(to bottom,
      transparent 0,
      var(--bia-tool-border) 26px,
      var(--bia-tool-border) calc(100% - 26px),
      transparent 100%);
}

.gbTimelineRow {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.gbTimelineWeek {
  flex: none;
  width: 60px;
  padding-left: 22px;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--bia-tool-accent);
}

/* Marker on the rail. Only where a week begins, since that is the only place the grouping
   changes; the rows in between are the same week continuing. */
.gbTimelineRow.newWeek::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bia-tool-accent);
  border: 3px solid var(--bia-tool-surface);
}

.gbTimelineStep {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
}

.gbTimelineRow.goal .gbTimelineStep {
  border-color: var(--bia-tool-accent);
  background: var(--bia-pal-lav-bg);
}

/* The summit label wears teal everywhere else in the tool, but on this row the surface is
   already the lavender tint, so teal on lavender reads as a third colour for no reason. */
.gbTimelineRow.goal .gbStartHere,
.gbTimelineRow.goal .gbRungRating {
  color: var(--bia-tool-accent);
}

/* ── Done ────────────────────────────────────────────────────────────────── */

.gbDone { text-align: center; }

/* The two chips are rows of content, not centred blocks: the screen's text-align was
   pulling their kicker and title into the middle of the card, away from the icon. */
.gbDone .gbTargetChip { text-align: left; }

/* First up is the actionable one, so it gets the accent; the goal it climbs toward keeps
   the teal it wears everywhere else in the tool. Two different borders side by side read as
   two different kinds of thing, which is exactly what they are. */
.gbDoneFirst .gbTargetKicker,
.gbDoneFirst .gbTargetRating {
  color: var(--bia-tool-accent);
}

.gbDoneMedal {
  width: 68px;
  height: 68px;
  margin: 10px auto 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bia-tool-btn-from), var(--bia-pal-teal-fg));
  color: #ffffff;
}

.gbDoneTitle { margin: 16px 0 6px; text-align: center; color: var(--bia-tool-ink); font-size: 1.5em; }

.gbDoneLead {
  text-align: center;
  margin-bottom: 20px;
}

/* A soft ring that settles once, rather than a loop: the moment is worth marking and then
   getting out of the way. Suppressed for anyone who has asked for less motion, in the app
   preference and at the OS level. */
.gbDoneMedal.animate {
  animation: gbDoneMedalIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gbDoneMedalIn {
  from { transform: scale(0.7); box-shadow: 0 0 0 0 rgba(104, 83, 212, 0.35); }
  60%  { transform: scale(1.04); box-shadow: 0 0 0 16px rgba(104, 83, 212, 0); }
  to   { transform: scale(1); box-shadow: 0 0 0 0 rgba(104, 83, 212, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gbDoneMedal.animate { animation: none; }
}

/* Staggered entrance for the payoff screen. Each element carries its own delay inline, and
   the resting state is visible: the class is what animates, so an element that never gets
   the class is still on screen. */
.gbRise {
  animation: gbRiseIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gbRiseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gbRise { animation: none; }
}

/* The plan as three numbers. Equal columns so no one of them reads as the headline. */
.gbStatRow {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.gbStat {
  flex: 1 1 0;
  /* The three sit on one line whatever their labels say: "In progress" was wrapping to two
     lines while the row stopped short of the column edges. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 13px 6px;
  border-radius: 15px;
  text-align: center;
}

.gbStatValue {
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.1;
}

.gbStatLabel {
  font-size: 0.68em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bia-tool-body-soft);
}

.gbStat-lav  { background: var(--bia-pal-lav-bg); }
.gbStat-teal { background: var(--bia-pal-teal-bg); }
.gbStat-amber { background: var(--bia-pal-amber-bg); }
.gbStat-mint { background: var(--bia-pal-mint-bg); }
.gbStat-lav .gbStatValue  { color: var(--bia-tool-accent); }
.gbStat-teal .gbStatValue { color: var(--bia-tool-teal-text); }
.gbStat-amber .gbStatValue { color: var(--bia-tool-amber-text); }
.gbStat-mint .gbStatValue { color: var(--bia-tool-mint-text); }

@media (forced-colors: active) {
  /* The tints are what separate the three, and forced colours drops them. */
  .gbStat { border: 1px solid CanvasText; }
}

.gbDoneFirst {
  margin-bottom: 8px;
  border-color: var(--bia-tool-accent);
}

.gbInsightsRefine {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.gbInsightsRefine .outlineButton.goal {
  margin: 0;
}

/* ── Shelf review ────────────────────────────────────────────────────────── */

.gbShelfProgress {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-muted);
  margin-bottom: 10px;
  text-align: center;
}

.gbShelfReason {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.85em;
  color: var(--bia-tool-body-soft);
}

.gbShelfActions {
  flex-direction: row;
  gap: 9px;
}

/* min-width:0 for the same reason as the parts row: .standardButton carries a 200px floor
   from custom.css, and a flex item honours that as a minimum, so two of them side by side
   asked for more than a narrow column had and scrolled the screen sideways. */
.gbShelfActions button {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}

/* ── Scale: light theme + meaning line ───────────────────────────────────────
   Opt in with theme:'light' on the component. The scale's default is a charcoal
   wrapper with white numerals, which is right on the dark exposure screens it was
   built for but reads as a different product inside a light surface such as the
   goal tool. Every existing caller is untouched.
   ─────────────────────────────────────────────────────────────────────────── */

/* Colour only. The light treatment must not change a single dimension: the dark scale's
   metrics are what every caller was laid out against, and this one sits in a screen whose
   primary action is measured from the bottom of it.
   Three things here were size changes and are gone: padding (4px in the default, raised to
   10px), a 4px gap on top of the options' own 2px margins, and a real 1px border, which is
   inside the width but adds two pixels of height. The border is an inset shadow instead, so
   it paints without taking part in layout. */
.scaleWrapper.light {
  background: var(--bia-tool-surface);
  box-shadow: inset 0 0 0 1px var(--bia-tool-border),
              0 5px 18px -12px rgba(40, 30, 90, 0.3);
}

/* The selected state needs a border, and a border on the selected option only would move
   the glyph by 1.5px as selection changed. Both states carry it, and it is an inset shadow
   rather than a border so it cannot affect the box either way. */
.scaleWrapper.light .scaleOption {
  background: var(--bia-tool-bg-top);
  color: var(--bia-tool-body);
  font-weight: 600;
}

.scaleWrapper.light .scaleOption:hover {
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-accent);
}

/* Selection carries a border and weight change as well as fill, so it survives
   greyscale and forced colours rather than relying on the purple alone. */
.scaleWrapper.light input[type=radio]:checked + .scaleOption,
.scaleWrapper.light input[type=checkbox]:checked + .scaleOption {
  background: var(--bia-tool-accent);
  box-shadow: inset 0 0 0 1.5px var(--bia-tool-accent);
  color: #ffffff;
  font-weight: 700;
}

.scaleWrapper.light input[type=radio]:focus-visible + .scaleOption,
.scaleWrapper.light input[type=checkbox]:focus-visible + .scaleOption {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  /* Forced colours drops the fill and the inset shadow, so selection needs a real border
     here. Layout shift does not matter in that mode the way losing the state would. */
  .scaleWrapper.light input[type=radio]:checked + .scaleOption,
  .scaleWrapper.light input[type=checkbox]:checked + .scaleOption {
    border: 3px solid CanvasText;
  }
}

/* The meaning sentence. Always present, even when empty, and holds its own height:
   the text appearing or changing must not move anything below it, which on this
   screen is the primary call to action. Two lines is enough for every string in
   the set at mobile width; a third would only be reached by much longer copy. */
.scaleMeaning {
  min-height: 2.8em;
  margin: 10px auto 0;
  max-width: 420px;
  padding: 0 8px;
  font-size: 0.9em;
  line-height: 1.4;
  text-align: center;
  color: #FFFFFF;
}

.scaleMeaning.light {
  color: var(--bia-tool-body);
  font-weight: 600;
}

/* ── Mobile: call to action at the bottom of the screen ──────────────────────
   x_fitScreenHeight gives .gbScreen a min-height reaching the bottom of the
   viewport, so margin-top:auto sinks the actions to the bottom when the screen is
   short. When the content is taller the min-height is already exceeded, auto
   collapses to 0, and the buttons simply follow the content and scroll with it.
   Desktop is untouched: the JS returns early above 600px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gbScreen {
    display: flex;
    flex-direction: column;
  }

  .gbScreen > .gbActions {
    margin-top: auto;
    padding-top: 24px;
    /* Clear of home indicators and notches, and of the primary button's own shadow: it
       reaches about 14px below the button, and .exerciseComponent is a scroll container
       that was cutting it off square. */
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }

  /* Screens whose content is short leave a crater between a title pinned to the top and
     buttons pinned to the bottom. Marking the content block as the filler adds two more
     auto margins, so the free space is shared three ways and the content settles a third
     of the way down instead of clinging to the top bar. When the content is tall there is
     no free space to share and nothing moves. */
  .gbScreen > .gbFill {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Explore door: a full-bleed dark panel rather than a card on a light page, matching
   the design's full-screen treatment. Breaks the container's horizontal padding with a
   viewport-width negative margin, and grows to fill the flex column that
   x_fitScreenHeight establishes on mobile. */
.gbExploreDoor {
  border-radius: 0;
  /* .gbScreen caps itself at 420px and centres; that has to go for the panel to reach the
     edges. The negative margins themselves are set in px by x_fitScreenHeight rather than
     with calc(50% - 50vw): vw counts the scrollbar and the containing block does not, so
     the vw version drifted whenever the page stopped being scrollable. */
  max-width: none;
  padding: 40px 24px;
}

.gbExploreDoor > * {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Two auto margins split the leftover space: the content block settles in the middle of
   the panel and the actions sit at the bottom, which is the shape of the design's
   full-screen treatment. justify-content:center cannot do both at once. */
.gbExploreDoor > .gbExploreBadge {
  margin-top: auto;
  /* A flex item stretches to the cross axis by default, which turned the pill into a
     full-width bar. Size it to its own text instead. */
  align-self: center;
  width: auto;
}

.gbExploreDoor > .gbActions {
  margin-top: auto;
}

/* .exerciseComponent is overflow:auto so it contains the floats the older components use.
   That also makes it a horizontal scroller, and the tool's screens are a column of cards
   and segmented controls where a few pixels over gives that box its own sideways scrollbar
   under the content. Vertical scrolling is untouched. Scoped to the tool so every other
   exercise keeps the behaviour it was built with. */
body.gbToolActive .exerciseComponent {
  overflow-x: hidden;
}

/* Full-bleed screens need their scroll-container ancestor to stop clipping. Toggled by
   x_fitScreenHeight for the one screen that bleeds, so every other exercise keeps the
   overflow behaviour it was built with. */
body.gbFullBleedActive .exerciseComponent {
  overflow: visible;
}

/* A full-bleed screen owns the whole page, not just the component box. Painting only the
   panel left a light strip along the top carrying the logo, the exit button and the back
   row, which read as a different page sitting above the screen. The body paints the shell
   instead, so it covers the canvas at any scroll height, and the panel goes transparent so
   there is no seam where two gradients of different heights meet. */
body.gbFullBleedActive {
  background: linear-gradient(180deg, var(--bia-tool-shell-top), var(--bia-tool-shell-bottom));
}

body.gbFullBleedActive .gbExploreDoor {
  background: transparent;
}

/* The decorative light blob is drawn behind the page and would sit on the dark shell. */
body.gbFullBleedActive #biaCircle {
  display: none;
}

/* Chrome that was styled for a light page. The exit chip is #3A3A3A on white; on the
   shell it disappears, so it becomes a light scrim instead. */
body.gbFullBleedActive .exitButton {
  background: rgba(255, 255, 255, 0.16);
}

body.gbFullBleedActive .exitButton:hover {
  background: rgba(255, 255, 255, 0.3);
}

body.gbFullBleedActive .gbBackBtn {
  color: var(--bia-tool-shell-fg);
}

@media (forced-colors: active) {
  body.gbFullBleedActive {
    background: Canvas;
  }
}

/* ── Top bar ─────────────────────────────────────────────────────────────────
   Just a way back. The three-segment phase bar that used to live here mapped to
   choose-goal / build-plan / confirm, which stopped describing most screens once
   the tool grew doors, a workbench, packs and dials: the explore door announced
   "Building your plan" before a plan existed. Orientation now comes from the
   screen's own title and the soft nudge, which counts real decisions.
   ─────────────────────────────────────────────────────────────────────────── */
.gbTopBar {
  display: flex;
  align-items: center;
  margin: 8px 0 12px;
}

.gbBackBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--bia-tool-body);
  cursor: pointer;
}

.gbBackBtn:hover {
  background: var(--bia-tool-bg-top);
  color: var(--bia-tool-ink);
}

.gbBackBtn:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   The design's buttons carry a gradient, a soft coloured shadow and a heavier
   label; the flat fill they replace looked inert beside them. Bia's own audited
   purples are used, not the mock's, so white text stays above 4.5:1 across the
   whole sweep. Scoped to the tool so the rest of the product is untouched.
   ─────────────────────────────────────────────────────────────────────────── */
.gbScreen .standardButton,
.gbScreen .standardButton.goal {
  background: linear-gradient(135deg, var(--bia-tool-btn-from), var(--bia-tool-btn-to));
  border-radius: 15px;
  box-shadow: 0 10px 22px -8px rgba(97, 81, 204, 0.5);
  font-weight: 700;
  font-size: 1rem;
  min-height: 52px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.gbScreen .standardButton:hover {
  box-shadow: 0 12px 26px -8px rgba(97, 81, 204, 0.6);
}

.gbScreen .standardButton:active {
  transform: scale(0.985);
}

.gbScreen .standardButton:disabled {
  background: var(--bia-tool-border);
  color: var(--bia-tool-muted);
  box-shadow: none;
}

.gbScreen .outlineButton,
.gbScreen .outlineButton.goal {
  background: var(--bia-tool-surface);
  border: 1.5px solid var(--bia-tool-border);
  border-radius: 14px;
  color: var(--bia-tool-accent);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 48px;
  box-shadow: none;
}

.gbScreen .outlineButton:hover {
  border-color: var(--bia-tool-accent);
  background: var(--bia-tool-bg-top);
}


/* The two reshape-it options. Buttons rather than text links: they are real ways forward,
   and an underlined link under two full-width choices reads as fine print. Tinted rather
   than outlined, and shorter, so they read as a third tier under the yes/no instead of two
   more empty white boxes competing with the secondary above them. */
.gbCommitExtras {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  /* .gbActions centres its children, so without a width the row shrank to its content and
     the pair sat narrower than the buttons above, at unequal widths. The cap matches the
     one the shared button styles put on the yes/no, so all four line up. */
  width: 100%;
  max-width: 335px;
}

.gbScreen .gbCommitExtras .outlineButton.goal {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  border: 0;
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-accent);
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
  min-height: 42px;
  padding: 10px 8px;
  box-shadow: none;
  /* The shared button styles keep labels on one line, which clipped "Change the details"
     mid-word at this width. These two are short phrases, so let them wrap. */
  white-space: normal;
  line-height: 1.2;
  overflow: visible;
}

.gbScreen .gbCommitExtras .outlineButton.goal:hover {
  background: var(--bia-tool-border);
  border: 0;
}

@media (forced-colors: active) {
  /* The tint is what separates these from the page, and forced colours drops it. */
  .gbScreen .gbCommitExtras .outlineButton.goal {
    border: 1px solid ButtonBorder;
  }
}

/* The dark shell inverts: a white-bordered ghost button reads better than a light
   card floating on the panel. */
.gbExploreDoor .outlineButton,
.gbExploreDoor .outlineButton.goal {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--bia-tool-shell-fg);
}

/* Parts: the step being shaped, with its difficulty called out. Matches the design's
   treatment, where the number the dials move is the most prominent thing on screen. */
.gbPartsIntro {
  text-align: center;
  margin-bottom: 14px;
}

.gbPartsCard {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
  box-shadow: 0 8px 22px -14px rgba(40, 30, 90, 0.4);
}

.gbPartsCardText {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9em;
  line-height: 1.25;
  color: var(--bia-tool-ink);
}

.gbPartsKicker {
  margin: 18px 2px 4px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-accent);
}

/* Two actions on one row: a narrow secondary beside a primary that takes the rest. */
.gbActions.gbActionsRow {
  flex-direction: row;
  align-items: stretch;
  gap: 9px;
}

/* min-width:0 matters as much as max-width here. .standardButton carries min-width:200px
   from custom.css for full-width CTAs, which a flex item honours as a floor: at 320px the
   pair asked for more than the column had and pushed the screen sideways. */
.gbActions.gbActionsRow .gbActionSecondary {
  flex: 0 1 auto;
  width: auto;
  max-width: 45%;
  min-width: 0;
  margin: 0;
}

.gbActions.gbActionsRow .gbActionPrimary {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}