.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;
}

/* Wrapper the rated-activity row dims when a step is soft locked. The tile itself is
   inline-flex, so the wrapper only needs to be a box the opacity can apply to. */
.activityTileWrap {
  display: inline-block;
  vertical-align: middle;
}

/* Collection thumbnails: a strip of small tiles where a strip of small photos used to be. */
.exposureToolTile {
  display: inline-block;
  margin-right: 2px;
  vertical-align: middle;
}

.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;
}

/* The white variant rests on a 1px border, so the 3px selected one would pull
   its own text in by two pixels and rewrap it. It gets the same weight of ring
   painted inside instead, which changes nothing about what the row measures. */
.checkboxOptionContainer.white.checked {
  border: 1px solid #6c5fc0;
  box-shadow: inset 0 0 0 3px #6c5fc0, 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.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;
}

/* videoReveal: the same cover grid over a playing video rather than a background image. */
.videoRevealContainer {
  background: #000;
}

.videoRevealVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The covers are real buttons here, so the browser's own button styling has to be cleared for
   them to look like the imageReveal cells they sit beside. Focus is left to the app's global
   :focus-visible ring, which is what makes the grid usable without a pointer. */
button.imageRevealCell {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button.imageRevealCell:disabled {
  cursor: default;
}

.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-pill.safety-held { background: rgba(85,204,170,0.12); color: var(--bia-tool-teal-text); }
.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;
  /* Two rows: the icon sits inline to the left of the title, and the body runs the full
     width underneath. The icon used to own a column for the height of the card, so any body
     longer than one line left a wide empty gutter down the left. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon head"
    "body body";
  align-items: center;
  column-gap: 12px;
  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 {
  grid-area: icon;
  position: relative;
  /* Title-sized now that it shares a row with the title rather than balancing the whole card. */
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newHighlightRing {
  position: absolute;
  inset: 0;
  /* The SVG carries width/height attributes, so the size has to be set here too or it keeps
     its authored 84px inside the smaller inline wrap. */
  width: 56px;
  height: 56px;
  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;
  /* Inside the ring, not filling it. */
  max-width: 34px;
  max-height: 34px;
  width: 34px;
  height: 34px;
}
@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: -35px; }
.newHighlightSpark--1 { background: var(--bia-teal-surface); --sx: 31px; --sy: -19px; }
.newHighlightSpark--2 { background: #f5a623; --sx: 31px; --sy: 19px;  }
.newHighlightSpark--3 { background: #6c5fc0; --sx: 0px; --sy: 35px;  }
.newHighlightSpark--4 { background: var(--bia-teal-surface); --sx: -31px; --sy: 19px;  }
.newHighlightSpark--5 { background: #f5a623; --sx: -31px; --sy: -19px; }
@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);
  }
}
.newHighlightHead {
  grid-area: head;
  min-width: 0;
}
/* Kept for any caller still emitting the old wrapper. */
.newHighlightCopy {
  grid-area: head;
  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;
}
.newHighlightBody {
  grid-area: body;
  font-size: 0.92rem;
  color: #4a4663;
  line-height: 1.4;
  margin-top: 8px;
}
.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 46px;
    width: 46px;
    height: 46px;
  }
  .newHighlightRing { width: 46px; height: 46px; }
  .newHighlightIcon img { max-width: 28px; max-height: 28px; width: 28px; height: 28px; }
  .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: 0 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;
}
/* What they are leaving, above the question and set at the same size, so the two read as one
   sentence pair rather than as a caption under a heading. */
.skipOverlayFact {
  margin: 4px 0 4px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  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; }

/* The way past the check-in without giving a reason. Quiet, but a real control: 24px of target
   and a visible focus ring, not a bare word. */
.skipOverlayAnyway {
  display: block;
  margin: 14px auto 0;
  padding: 8px 14px;
  min-height: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bia-link, #5347a8);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: underline;
}
.skipOverlayAnyway:hover { background: #f2effb; }

/* 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.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The icon tile and its corner badge used to live here. They moved to custom.css when
   the goals page and the journey card started drawing them too: those routes load
   journey.css without exercise.css, so a shared primitive cannot live in this file. */

/* 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;
}

/* For the handful of screens whose whole column is centred: the subtitle sits under the
   question it belongs to rather than hanging off the left edge of it. */
.gbSubtitleCenter {
  text-align: center;
}

/* The column the doors, the packs and the activity rows all sit in. The gap is what sets
   their rhythm: a row also carries its own bottom margin, so the two add up and the list
   was looser than it looked in the rule. */
.gbRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Inside this column the row's own margin is redundant: the gap owns the spacing. */
.gbRows .activityResult.gbActRow {
  margin-bottom: 0;
}

/* 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;
  /* Tightened from 10px: a list of these is the main thing on the goal door, and the rhythm
     was loose enough that only three fit above the fold. */
  margin: 0 auto 7px;
  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%;
  /* 14px before. The tile is 40px, so this is the only thing setting the row's height. */
  padding: 11px 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;
}

/* Geometry now comes from c_iconTile's inline size (70), so this class only exists for
   anything else the hero tile needs. Kept as the hook the markup already names. */
.gbHeroTile {
}

.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;
}

.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;
}

/* ── Safety behaviors on the dials screen ────────────────────────────────────
   Its own block below the dials rather than a fourth axis, because a behavior has no
   gentler setting: it is kept or it is dropped. One row is on screen by default and the
   rest are behind "show all", so a user tracking thirty of them meets one question. */

.gbSafety {
  margin-top: 26px;
}

.gbSafetyLead {
  margin: 0 2px 10px;
  font-size: 0.76em;
  line-height: 1.45;
  color: var(--bia-tool-body-soft);
}

.gbSafetyRows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.gbSafetyRow {
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid var(--bia-tool-border);
  background: var(--bia-tool-surface);
}

/* The suggested one is the question being asked, so it reads as a card rather than a row.
   The tag beside the label carries the meaning; weight and border never rely on the tint.
   Deliberately NOT filled with the lavender tint: a selected segmented option is filled
   with that same tint, and on a tinted card the chosen answer would disappear into it. */
.gbSafetyRow--suggested {
  border-color: var(--bia-tool-accent);
  border-width: 2px;
  padding: 10px 11px;
  box-shadow: 0 8px 22px -16px rgba(40, 30, 90, 0.5);
}

.gbSafetyRow--without {
  border-color: var(--bia-tool-teal-text);
}

.gbSafetyRowHead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 9px;
}

.gbSafetyRowLabel {
  flex: 1;
  min-width: 0;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bia-tool-ink);
  overflow-wrap: anywhere;
}

.gbSafetyTag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-accent);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-accent);
}

/* A single "without" sits at the width of its own text rather than stretching across the
   row, which would read as one half of a pair whose other half failed to render. */
.gbPartsOption.gbSafetyOnly {
  flex: 0 1 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.gbSafetyFilter {
  margin-bottom: 12px;
}

.gbSafetyMore {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 4px;
  border: 1px dashed var(--bia-tool-border);
  border-radius: 11px;
  background: none;
  font: inherit;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--bia-tool-accent);
  cursor: pointer;
}

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

.gbSafetySummary {
  margin: 10px 2px 0;
  font-size: 0.74em;
  font-weight: 600;
  color: var(--bia-tool-teal-text);
}

@media (forced-colors: active) {
  .gbSafetyRow--suggested,
  .gbSafetyRow--without {
    border-width: 3px;
  }
}

.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;
}

/* Size and radius come from c_iconTile's inline size (64); centring is this class's own.
   The radius is now 18 rather than 20, the value every other tile derives at that size. */
.gbCommitTile {
  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);
}

/* What the plan covers, under the plan itself. Set apart by a rule rather than a card: it
   is a second section of one screen, not a second screen. */
.gbRevealCoverage {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bia-tool-border);
}

.gbRevealCoverageTitle {
  margin: 0 0 6px;
  font-size: 1em;
  color: var(--bia-tool-ink);
}

/* ── 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);
}

.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. */
/* The pair moved out of .gbActions when the plan question became two answers, and lost the
   centring and the breathing room that container was giving it: it sat hard against the
   reason list and flush left. It centres itself now, and keeps the width cap so it lines up
   with the reasons above it. */
.gbCommitExtras {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 335px;
  margin: 22px auto 0;
}

.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. */
.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;
}

/* ── The sorting animation: activities going into order, easiest first ─────────────────── */
/* A column, not a fixed box. The progress bar lives inside this stage, and while the stage
   had one height and the row inside it claimed all of it, the bar overflowed the bottom and
   sat on top of the line underneath. The row keeps the fixed height; the stage grows to hold
   whatever is under it. */
.gbSortStage {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.gbSortRow {
  position: relative;
  width: 100%;
  height: 150px;
  flex: 0 0 auto;
}

/* Positioned by transform rather than layout, so a swap slides on the compositor instead of
   reflowing the row. `left` is the bar's slot padding; the transform carries the slot.
   The overshoot in the easing is what makes it swoosh rather than slide: the bar arrives
   slightly past its slot and settles back. */
/* Grey until it is home. A bar in the wrong slot has nothing to say yet, so the colour is
   held back and spent at the moment it arrives, which is what makes the row fill in rather
   than merely rearrange. Position is never carried by colour alone: the bar's slot is the
   information, the tint is the reward. */
.gbSortBar {
  position: absolute;
  bottom: 0;
  transform-origin: 50% 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #cfcbe2, #b9b4d2);
  /* Eased both ends and given most of the beat to travel in. A short duration with a springy
     curve is what made this look hurried: the bars snapped rather than moved. */
  transition: transform 230ms cubic-bezier(0.33, 0, 0.2, 1), background 260ms ease-out;
}

.gbSortBar.placed {
  background: linear-gradient(180deg, var(--bia-pal-lav-fg), var(--bia-tool-accent));
}

/* The bar being carried past the others lifts out of the row while it travels, so the eye
   follows one object across rather than watching two swap places. */
.gbSortBar.moving {
  z-index: 2;
  box-shadow: 0 12px 20px -8px rgba(40, 30, 90, 0.55);
  transition: transform 230ms cubic-bezier(0.33, 0, 0.2, 1);
}

/* How far through the sort is. Thin and quiet: it answers "how long" without competing with
   the thing it is measuring. */
.gbSortProgress {
  width: 100%;
  max-width: 260px;
  height: 4px;
  margin: 18px auto 4px;
  border-radius: 3px;
  background: var(--bia-pal-lav-bg);
  overflow: hidden;
}

.gbSortProgressFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--bia-tool-accent);
  transition: width 240ms cubic-bezier(0.33, 0, 0.2, 1);
}

/* Everything lands, and the row turns over to the colour the ladder is drawn in. */
.gbSortRow.settled .gbSortBar,
.gbSortRow.settled .gbSortBar.placed {
  background: linear-gradient(180deg, var(--bia-tool-accent), var(--bia-pal-teal-fg));
  transition: transform 260ms cubic-bezier(0.33, 0, 0.2, 1), background 420ms ease-out;
}

/* ── The radar's two shapes, and what they add up to ───────────────────────────────────── */
.gbRadarLegend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2px;
  font-size: 0.72em;
  color: var(--bia-tool-body);
}

.gbRadarKey {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gbRadarSwatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* The same two colours the chart draws with. Never the only thing marking which is which:
   each swatch is paired with its name. */
.gbRadarSwatchActivity { background: #5347a8; }
.gbRadarSwatchProfile { background: #2f7d72; }

.gbRadarInsight {
  margin: 8px 2px 0;
  font-size: 0.82em;
  line-height: 1.4;
  text-align: center;
  color: var(--bia-tool-body);
}

/* ── The build interlude: the animation, and the line saying what is being built ───────── */
.gbBuilding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.gbBuildLine {
  max-width: 30em;
  text-align: center;
  margin-top: 10px;
}

/* ── What makes this hard: the reasons pass ────────────────────────────────────────────
   The card is the subject of the screen: what the step is, the number just given to it, and
   on the goal the shape of what taking it on involves. It stacks rather than sitting in a
   row, because the radar goes inside it. */
.gbThemesCard {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 14px;
}

.gbThemesCardHead {
  display: flex;
  align-items: center;
  gap: 11px;
}

.gbThemesRadar {
  margin: 0 0 -6px;
}

/* The question follows the card, so it needs the space above it that a screen title would
   otherwise have given it. */
.gbThemesQuestion {
  margin-top: 4px;
}

/* The expander is in the chip row and shaped like a chip, but it is not one of the answers:
   dashed and in the accent, so it reads as the way to see more rather than something to
   pick. */
.gbWorryChip.gbWorryChipMore {
  border-style: dashed;
  border-color: var(--bia-tool-accent);
  color: var(--bia-tool-accent);
  background: transparent;
  font-weight: 600;
}

/* Previous ratings: context for the question, folded away under the scale until asked for. */
.gbRateRefsToggle {
  display: block;
  margin: 0 auto;
}

.gbRateRefsBody {
  margin-top: 8px;
}

/* ── For you: recommendations, packs, and the way to argue with them ─────────────────── */
.gbForYou {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gbForYouRefine {
  display: flex;
  justify-content: center;
  margin: 16px 0 4px;
  text-align: center;
}

/* ── Reference ratings on the rating screen ──────────────────────────────────────────────
   The numbers already given, so the next one is chosen against them rather than in the
   abstract. Quiet by design: it is context for the question, not part of it. */
.gbRateRefs {
  margin: 10px 0 4px;
  text-align: center;
}

.gbRateRef {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 11px;
  background: var(--bia-pal-lav-bg);
  margin-bottom: 6px;
}

.gbRateRefKicker {
  flex: none;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bia-tool-muted);
}

.gbRateRefTitle {
  flex: 1;
  min-width: 0;
  font-size: 0.82em;
  line-height: 1.25;
  color: var(--bia-tool-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* The plan so far, dropped into a screen that is asking about something else. Set apart from
   the question below it by its own surface rather than a heading, so it reads as context. */
.gbPlanBlock {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bia-pal-lav-bg);
}

.gbPlanBlock .gbTargetChip {
  margin-bottom: 8px;
}

.gbPlanBlock .gbRungs {
  gap: 6px;
}

/* ── Parts: the list of versions being built ─────────────────────────────────────────── */
.gbPartsAdd {
  margin-top: 18px;
  text-align: center;
}

.gbScreen .gbPartsAddBtn {
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
}

.gbPartsDuplicate {
  margin: 8px 2px 0;
  font-size: 0.78em;
  line-height: 1.4;
  color: var(--bia-tool-muted);
}

.gbPartsVersions {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gbPartsVersion {
  gap: 8px;
}

/* The direction pair is only a question once there is a change to ask about. The tool's
   .hidden utility loses to .gbPartsOptions on specificity, so it is stated here. */
.gbPartsCustomDir.hidden {
  display: none;
}

/* Two actions on one row inside a normal action column, so a third action can sit above
   them. Mirrors .gbActions.gbActionsRow, including the min-width floor that would otherwise
   push a 320px screen sideways. */
.gbActionsPair {
  display: flex;
  align-items: stretch;
  gap: 9px;
  width: 100%;
}

.gbActionsPair .gbActionSecondary {
  flex: 0 1 auto;
  width: auto;
  max-width: 45%;
  min-width: 0;
  margin: 0;
}

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

/* ── Goal tool: pack picker on the profile screen ────────────────────────────────
   A switch row per pack, the same shape as the onboarding module list: the state is a
   knob that moves plus the row's own weight, never colour on its own. */
.gbPackPicks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gbPackPick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--bia-tool-surface);
  border: 1px solid var(--bia-tool-border);
  cursor: pointer;
}

.gbPackPick.selected {
  border-color: var(--bia-tool-accent);
  box-shadow: 0 10px 24px -16px rgba(104, 83, 212, 0.55);
}

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

.gbPackPickText {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.gbPackPick.selected .gbPackPickMeta {
  color: var(--bia-tool-teal-text);
}

.gbPackPickSwitch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: var(--bia-tool-border);
  transition: background-color 0.2s ease;
}

.gbPackPick.selected .gbPackPickSwitch {
  background: var(--bia-tool-accent);
}

.gbPackPickKnob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(40, 25, 80, 0.28);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

.gbPackPick.selected .gbPackPickKnob {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .gbPackPickSwitch, .gbPackPickKnob { transition: none; }
}

.gbPackQueue {
  margin-top: 0;
  text-align: center;
}

/* ── Goal tool: the ways of changing a rung, inline under it ─────────────────────
   The rung is a flex row, so the panel wraps onto its own full-width line beneath the
   controls rather than squeezing in beside them. */
.gbRung { flex-wrap: wrap; }

.gbRung.open {
  border-color: var(--bia-tool-accent);
}

.gbRungPanel {
  flex: 1 0 100%;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--bia-tool-border);
}

.gbRungPanelActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gbRungPanelBtn {
  border: 1px solid var(--bia-tool-border);
  background: var(--bia-tool-bg-top);
  color: var(--bia-tool-body);
  border-radius: 99px;
  padding: 7px 12px;
  min-height: 32px;
  font-family: inherit;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
}

.gbRungPanelBtn:hover {
  color: var(--bia-tool-ink);
}

.gbRungPanelBtn.on {
  border-color: var(--bia-tool-accent);
  background: var(--bia-pal-lav-bg);
  color: var(--bia-tool-teal-text);
}

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

.gbRungPanelRows {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gbRungPanelRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 11px;
  background: var(--bia-tool-bg-top);
}

.gbRungPanelTitle {
  flex: 1;
  min-width: 0;
  font-size: 0.78em;
  line-height: 1.25;
  color: var(--bia-tool-body);
}

.gbRungPanelAdd {
  flex: 0 0 auto;
}

.gbRungPanelEmpty {
  margin: 9px 0 0;
  font-size: 0.78em;
  color: var(--bia-tool-muted);
}

/* ── Goal tool: a gap in the ladder, drawn as the rung that is not there yet ──── */
.gbGapRung {
  border-style: dashed;
  border-color: var(--bia-tool-accent);
  background: none;
  box-shadow: none;
}

.gbGapText {
  flex: 1;
  min-width: 0;
  font-size: 0.78em;
  line-height: 1.3;
  color: var(--bia-tool-body);
}

.gbGapCta {
  flex: 0 0 auto;
}

/* ── Goal tool: the dock holds several suggestions, not one ──────────────────── */
.gbDockRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gbDockRows .gbDockRow + .gbDockRow {
  padding-top: 8px;
  border-top: 1px solid var(--bia-tool-border);
}

/* Three adds in a column, so each one is sized as a row action rather than as the single
   call to action the dock used to hold. The 24px target floor still clears easily. */
/* .gbScreen .standardButton sets a 52px floor for full-width calls to action, which on a
   12px label makes a square. A row action is not that; 34px still clears the 24px target
   minimum comfortably. */
.gbDock .gbDockRows .gbDockAdd {
  padding: 8px 14px;
  font-size: 0.78em;
  line-height: 1.2;
  min-height: 34px;
  height: auto;
  white-space: nowrap;
  box-shadow: none;
}

/* ── Goal tool: the workbench switcher ───────────────────────────────────────────
   Two tabs and nothing else, so they are worth the room: full width, larger type, and a
   selected tab that is filled rather than merely tinted. */
.goalTabBar.gbWorkTabs {
  max-width: 420px;
  gap: 6px;
  padding: 5px;
}

.goalTabBar.gbWorkTabs .goalTab {
  padding: 13px 18px;
  font-size: 15px;
}

/* ── Safety behaviors through plan, do and review ────────────────────────────
   The commitment a step was built with, carried into the session that runs it. The
   recurring shape is a named behavior beside its current state in words: "still going
   without" or "used it". State is never left to a strikethrough or a tint, because a line
   through text says nothing to a screen reader and nothing in forced colours. */

.act-safety-pledge,
.act-safety-confirm {
    margin-bottom: 14px;
    padding: 12px 13px;
    border-radius: 13px;
    background: rgba(145, 135, 211, 0.07);
}

.act-safety-confirm {
    margin: 0 auto 18px;
    max-width: 420px;
    text-align: left;
}

.act-safety-pledge-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--bia-tool-muted);
    margin-bottom: 9px;
}

.act-safety-pledge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.act-safety-pledge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.act-safety-pledge-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
    overflow-wrap: anywhere;
}

.act-safety-pledge-state {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(85, 204, 170, 0.14);
    color: var(--bia-tool-teal-text);
}

/* Used-anyway is amber, not red: it is a lapse to notice, not a failure to alarm about. */
.act-safety-pledge-item--used .act-safety-pledge-state,
.act-safety-pledge-item--used .act-safety-pledge-btn {
    background: var(--bia-pal-amber-bg);
    color: var(--bia-tool-amber-text);
}

.act-safety-pledge-btn {
    flex: none;
    padding: 6px 13px;
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: rgba(85, 204, 170, 0.14);
    color: var(--bia-tool-teal-text);
    cursor: pointer;
}

.act-safety-pledge-btn:focus-visible {
    outline: 3px solid var(--bia-focus);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .act-safety-pledge-state,
    .act-safety-pledge-btn {
        border: 1px solid currentColor;
    }
    .act-safety-pledge-item--used .act-safety-pledge-state,
    .act-safety-pledge-item--used .act-safety-pledge-btn {
        border-width: 3px;
    }
}

/* Review: what was promised, kept and used, on their own lines. */
.act-review-safety-line {
    margin-top: 7px;
    line-height: 2;
}

.act-review-safety-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--bia-tool-muted);
}

.act-review-body span.tag {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 3px 2px 0;
    border-radius: 999px;
    font-size: 13px;
    background: #e3deff;
    color: #2D2A45;
}

.act-review-body span.tag.tag--held {
    background: rgba(85, 204, 170, 0.16);
    color: var(--bia-tool-teal-text);
}

.act-review-body span.tag.tag--broke {
    background: var(--bia-pal-amber-bg);
    color: var(--bia-tool-amber-text);
}

/* ── "Why this activity?", as themes rather than a sentence ─────────────────────
   Two labelled lists: the themes this step shares with the profile the user has built,
   each with how much of that profile it is, and the ones it would open up that they have
   not rated yet. The percent is never the only thing distinguishing the two lists: each
   has its own sentence above it, and the new-ground pills are outlined rather than filled. */
.gbWhyLine {
  margin: 8px 0 6px;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bia-tool-ink);
}

.gbWhyLine:first-child {
  margin-top: 0;
}

.gbWhyPills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gbWhyPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--bia-pal-lav-bg);
  border: 1px solid transparent;
  font-size: 0.74em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bia-tool-ink);
}

.gbWhyPillPct {
  font-weight: 700;
  color: var(--bia-tool-accent);
}

/* New ground: nothing in the profile to put a number against, so the pill is drawn as an
   outline instead. The wording above it is what says which list this is. */
.gbWhyPill.gbWhyPillNew {
  background: none;
  border-color: var(--bia-tool-border);
  color: var(--bia-tool-body);
}

/* Inside the why card the pill's own tint is within a shade of the card behind it, so the
   fill goes white there and the pills read as objects on the card rather than smudges in it. */
.gbWhyCard .gbWhyPill {
  background: var(--bia-tool-surface);
}

.gbWhyCard .gbWhyPill.gbWhyPillNew {
  background: none;
}

/* ── "What is this?" under the activity's chart ─────────────────────────────────
   Bottom right of the card, quiet until asked. */
.gbWhatIsThisRow {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.gbWhatIsThis {
  border: 0;
  background: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 0.74em;
  font-weight: 600;
  color: var(--bia-tool-accent);
  text-decoration: underline;
  cursor: pointer;
  min-height: 24px;
}

.gbWhatIsThis:hover {
  color: var(--bia-tool-ink);
}

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

.gbWhatIsThisBody {
  margin: 4px 0 0;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--bia-tool-bg-top);
  font-size: 0.76em;
  line-height: 1.5;
  color: var(--bia-tool-body);
}

/* ── Post-practice survey ──────────────────────────────────────────────────
   The four agreement items at the end of a run, the insight screen that
   follows, and the summary card. Answers are always shown as words, never as
   a score, and the movement arrow always has a written equivalent beside it. */

.ppTitle {
  font-weight: 600;
  font-size: 24px;
  max-width: 800px;
  margin: 0 auto 8px;
  line-height: 1.2;
  color: var(--bia-fg);
}

.ppIntro {
  max-width: 800px;
  margin: 0 auto 20px;
  color: var(--bia-muted);
}

.ppItem {
  max-width: 800px;
  margin: 0 auto 28px;
}

.ppInsightList {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.ppInsightRow {
  padding: 14px 0;
  border-bottom: 1px solid rgba(145, 135, 211, 0.18);
}

.ppInsightRow:last-child {
  border-bottom: none;
}

.ppInsightStatement {
  font-size: 0.95rem;
  color: var(--bia-fg);
  margin-bottom: 8px;
}

.ppInsightPair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ppInsightThen {
  font-weight: 600;
  color: var(--bia-muted);
}

.ppInsightNow {
  font-weight: 700;
  color: var(--bia-link);
}

/* The words behind the arrow, for anyone who cannot see it and for print. */
.ppInsightChange {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ppInsightNote {
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 0.9rem;
  color: var(--bia-muted);
}

.ppMove {
  display: inline-flex;
  align-items: center;
  color: var(--bia-muted);
}

.ppMove--same svg {
  opacity: 0.6;
}

.postPracticeSummaryCard {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ppSummaryRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(145, 135, 211, 0.14);
}

.ppSummaryRow:last-child {
  border-bottom: none;
}

.ppSummaryStatement {
  flex: 1 1 240px;
  font-size: 0.9rem;
  color: var(--bia-fg);
  text-align: left;
}

.ppSummaryAnswer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}

/* ── Repeat challenge ─────────────────────────────────────────────────────
   Sits over the finished summary. The run is already saved by the time this
   opens, so declining costs nothing. */

.repeatChallengeCard {
  /* Focus lands here when the dialog opens (tabindex="-1"), which is a programmatic focus on
     a container, not a control. No ring: the card is not something you operate. */
  outline: none;
  position: relative;
  max-width: 440px;
  margin: 12vh auto 0;
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 24px;
  cursor: auto;
}

.repeatChallengeImg {
  width: 96px;
  height: auto;
  margin-bottom: 8px;
}

.repeatChallengeTitle {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--bia-fg);
}

.repeatChallengeBody {
  font-size: 17px;
  line-height: 1.45;
  color: var(--bia-muted);
  margin: 0 0 20px;
}

.repeatChallengeAccept,
.repeatChallengeDecline {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto 10px;
  min-height: 44px;
}

.historyPostPractice {
  margin-top: 8px;
  max-width: 520px;
}

/* ── selectAndConquer round marker ─────────────────────────────────────────
   Which round of the loop is on screen. Real text, not a bar alone, so the
   count is available to a screen reader and in print. */

.conquerRound {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bia-muted);
  margin: 0 0 12px;
  text-align: center;
}

/* The exposure text an elevated write stage is asking about. The heading above it is the ask, so
   this is the content, set apart from it and from the box below. */
.elevatedWriteContent {
  max-width: 640px;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bia-surface, #f6f5fb);
  color: var(--bia-fg);
  line-height: 1.4;
  text-align: left;
}

/* What a media tile is, in place of its authored title. Quiet: the clip is the choice, this only
   says which kind it is. */
.displayKind {
  font-size: 0.75rem;
  color: var(--bia-muted);
  text-align: center;
  margin-bottom: 4px;
}

/* What to do with the item this time round. The item is identical every round, so this line is
   the thing that makes a round its own. */
.conquerPrompt {
  max-width: 520px;
  margin: 0 auto 16px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bia-fg);
  text-align: center;
}

/* The loop's own line, drawn once the loop ends. The canvas is responsive with the aspect ratio
   off, so the wrapper is what gives it a height. */
.conquerChartWrapper {
  height: 260px;
  max-width: 700px;
  margin: 8px auto 0;
}

/* ── Elevated mode intro cell ──────────────────────────────────────────────
   Sits under the guided-exposure toggle. The locked state dims the switch but
   keeps the reason as ordinary readable text beside it. */

.introSetupCell--locked .introSetupTitle {
  color: var(--bia-muted);
}

.switchToggle--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── writeAndSay ───────────────────────────────────────────────────────────
   Write it down, then read your own words back out loud. */

.writeAndSayHint {
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 0.85rem;
  color: var(--bia-muted);
}

.writeAndSayLead {
  max-width: 640px;
  margin: 0 auto 12px;
  font-weight: 600;
  color: var(--bia-fg);
}

/* ── conversation flow type ────────────────────────────────────────────────
   A scripted back and forth, one turn per screen. Spec:
   .claude/specs/conversation-exposure.md */

/* ── the thread ──────────────────────────────────────────────────────────
   What was said sits in a bubble beside whoever said it, and what came before
   stays above it, so a reply screen shows what is being replied to. The side a
   bubble sits on is decoration: the speaker's name is above every one of them,
   so the meaning survives greyscale, a narrow screen and a screen reader. */

.convoThread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 18px;
  text-align: left;
}

.convoTurn {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

.convoYou {
  flex-direction: row-reverse;
}

.convoAvatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-end;
}

.convoCol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
  min-width: 0;
}

.convoYou .convoCol {
  align-items: flex-end;
  margin-left: auto;
}

/* --bia-muted, not --bia-accent: the exposure card sits on a discomfort-tinted
   background, and the accent purple falls to 4.26:1 on it. The label is text,
   so it has to clear 4.5:1 against every tint the card can take. */
.convoName {
  padding: 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bia-muted);
}

.convoBubble {
  padding: 12px 15px;
  border-radius: 18px 18px 18px 6px;
  background: #F1EEF9;
  box-shadow: inset 0 0 0 1px #E9E4F6, 0 1px 2px rgba(30, 20, 80, 0.05);
  color: var(--bia-fg);
  overflow-wrap: anywhere;
}

.convoYou .convoBubble {
  border-radius: 18px 18px 6px 18px;
  background: var(--bia-accent);
  box-shadow: 0 1px 2px rgba(30, 20, 80, 0.05);
  color: var(--bia-on-accent);
}

/* A line of dialogue, at reading size. The fit-to-box text stage belongs to a
   full-bleed exposure item; inside a bubble it would blow one word up to fill
   the card. */
.convoText {
  font-size: 1.05rem;
  line-height: 1.45;
}

/* A video turn is the stage, so its row carries no bubble and no inset. */
.convoBare {
  display: block;
}

.convoBare .convoCol {
  max-width: 100%;
}

/* Narration: what the scene does, rather than what anybody says. No avatar, no
   bubble, no side, because there is no speaker to attribute it to. */
.convoNarration {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 2px auto;
  padding: 0 6px;
  text-align: center;
  color: var(--bia-tool-body);
}

.convoNarration .convoText {
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Turns that have already played. Quieter, so the live one is obviously the
   live one, but not so quiet that the text stops passing AA. */
.convoPast .convoBubble {
  background: #F4F1FB;
  /* An explicit colour rather than opacity: fading text is the one way to make a
     past turn quieter that also takes it below AA. */
  color: var(--bia-muted);
  box-shadow: inset 0 0 0 1px #ECE7F8;
}

.convoPast.convoYou .convoBubble {
  background: #DDD5F7;
  color: var(--bia-tool-ink);
  box-shadow: inset 0 0 0 1px #CFC5F2;
}

.convoPast.convoNarration {
  color: var(--bia-muted);
}

.convoPast .convoText,
.convoPast .convoEcho,
.convoPast .convoNarration {
  font-size: 0.95rem;
}

/* The live turn is the one being read, so it carries the weight: a stronger
   fill and a real edge, where the ones behind it have neither. */
.convoTurn:not(.convoPast) .convoBubble {
  background: #E7E1F8;
  box-shadow: inset 0 0 0 1.5px #D5CCF1, 0 2px 6px rgba(30, 20, 80, 0.06);
}

.convoTurn:not(.convoPast).convoYou .convoBubble {
  background: var(--bia-accent);
  box-shadow: 0 2px 8px rgba(76, 60, 180, 0.22);
}

.convoTurn:not(.convoPast) .convoName {
  color: var(--bia-fg);
}

.convoEchoQuiet {
  font-style: italic;
  opacity: 0.85;
}

.convoPastPart + .convoPastPart {
  margin-top: 8px;
}

.convoPastImage {
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

/* A clip that has already played is a record of it, not a second player. */
.convoPastMedia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.convoPastMedia .biaIcon {
  font-size: 18px;
}

.conversationPart {
  margin-bottom: 12px;
}

.conversationPart:last-child {
  margin-bottom: 0;
}

/* ── the reply ───────────────────────────────────────────────────────────
   The thing being done, so it is its own card under the thread rather than a
   bubble inside it. Next is still the action: the send button in the design
   would be a second one, and everything in the engine (the progress fill, the
   min-character gate, the skip check-in) hangs off Next. */

.convoReply {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #EDEAF8;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(30, 20, 80, 0.05);
  text-align: center;
}

.convoReplyWrite {
  text-align: left;
}

.convoReplyWrite h5 {
  margin-top: 0;
}

/* Whose turn it is, on the card itself. The thread above usually says so, but a reply is
   reachable with nothing above it, and the screen must not stop naming the speaker just
   because the thread happens to be empty. */
.convoReplyWho {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bia-muted);
  text-align: left;
}

.convoReplyWrite .exposureTextArea,
.convoReplyWrite .writeContainer {
  margin-bottom: 0;
}

.conversationSayPrompt {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bia-fg);
  margin-bottom: 16px;
}

/* The line under the prompt when there is no clock: the only thing they need
   to know is how to leave. There used to be a microphone in a circle and a set
   of moving bars here; both read as a control on a screen whose whole message
   is "speak", which is the one impression this feature must never give. */
.conversationSayHint {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bia-muted);
}

.conversationSayTimer {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bia-focus);
}

/* ── the call screen ─────────────────────────────────────────────────────
   The start gate wearing a phone. Answer is the only button: a large easy way
   to not take the call, on the screen whose point is taking it, would be the
   app arguing against itself. The skip link below is still the way out. */

.convoCall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 340px;
  margin: 12px auto 20px;
  padding: 26px 22px 22px;
  box-sizing: border-box;
  border-radius: 22px;
  background: linear-gradient(160deg, #2E2E33, #3B3A44);
  box-shadow: 0 10px 30px rgba(20, 15, 40, 0.35);
}

.convoCallStatus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #C9C6D6;
}

.convoCallDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bia-teal-surface);
}

.convoCallAvatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 6px 0 12px;
}

.convoCallRing {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 2px solid #8E80EA;
  border-radius: 50%;
  opacity: 0;
}

.convoCallGlyph {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bia-accent);
  color: var(--bia-on-accent);
  box-shadow: 0 4px 14px rgba(108, 95, 192, 0.5);
}

.convoCallGlyph .biaIcon {
  font-size: 32px;
}

/* The rings are the phone ringing. Without them the card is a still picture of
   a call rather than a call, so they run, but only where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .convoCallRing {
    animation: convoCallRing 2.4s ease-out infinite;
  }
  .convoCallRing2 {
    animation-delay: 1.2s;
  }
  .convoCallDot {
    animation: convoCallDot 1.4s ease-in-out infinite;
  }
  @keyframes convoCallRing {
    0%   { transform: scale(0.7); opacity: 0.55; }
    100% { transform: scale(1.9); opacity: 0; }
  }
  @keyframes convoCallDot {
    0%, 80%, 100% { opacity: 0.25; }
    40%           { opacity: 1; }
  }
}

.convoCallName {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.convoCallSub {
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: #ADA9BC;
}

.convoCallAnswer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  padding: 14px 20px;
  border: none;
  border-radius: 13px;
  background: #0F766E;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.convoCallAnswer:hover {
  filter: brightness(1.1);
}

.convoCallAnswer:active {
  transform: scale(0.985);
}

.convoCallAnswer:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.convoCallAnswer .biaIcon {
  font-size: 20px;
}

/* The count after answering lands where the answer button stood, so the beat
   happens where the eye already is. */
.convoCallCount {
  min-height: 1.2em;
  margin-top: 10px;
  color: #ffffff;
}

/* ── dialling it yourself ────────────────────────────────────────────────
   Tapping the number out is the exposure. One Call button is not the part
   anybody avoids; the keypad is what makes the moment before it real. */

.convoCall-dial,
.convoCall-contact {
  gap: 0;
}

.convoCallDialWho {
  font-size: 1.05rem;
  margin-bottom: 2px;
}

/* The number as it is written down, above the digits as they are tapped. */
.convoCallTarget {
  margin-bottom: 12px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #ADA9BC;
}

.convoCallDisplay {
  min-height: 34px;
  margin-bottom: 14px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #ffffff;
  word-break: break-all;
}

.convoCallPad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 18px;
}

.convoCallKey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 56px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.convoCallKey:hover {
  background: rgba(255, 255, 255, 0.18);
}

.convoCallKey:active {
  transform: scale(0.94);
}

.convoCallKey:focus-visible,
.convoCallErase:focus-visible,
.convoCallDialButton:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.convoCallDialRow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.convoCallDialRow .convoCallAnswer {
  flex: 1;
  margin-top: 0;
}

/* Shut until what has been tapped matches the number the scene asked for. Dimmed
   rather than hidden: the way on has to be visible before it is available, or the
   keypad reads as leading nowhere. */
.convoCallAnswer:disabled {
  background: #3F4A48;
  color: #9AA5A2;
  cursor: default;
}

.convoCallErase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 52px;
  flex: none;
  border: none;
  border-radius: 13px;
  background: #4A4954;
  color: #D7D5E0;
  cursor: pointer;
  transition: background 120ms ease;
}

.convoCallErase:hover {
  background: #585763;
}

.convoCallErase .biaIcon {
  font-size: 22px;
}

/* ── finding the name ────────────────────────────────────────────────────
   The other contacts are there because a list of one is not a list. They are
   rows, not controls: nothing on this screen is a button that does nothing. */

.convoCallPick {
  margin-bottom: 14px;
  font-size: 0.95rem;
  color: #C9C6D6;
}

.convoCallList {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.convoCallContact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #ADA9BC;
  font-size: 1rem;
  text-align: left;
}

.convoCallContact + .convoCallContact {
  margin-top: 6px;
}

.convoCallContactTarget {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 600;
}

.convoCallInitial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1rem;
  font-weight: 600;
}

.convoCallContactTarget .convoCallInitial {
  background: var(--bia-accent);
  color: var(--bia-on-accent);
}

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

/* The one control on the list, on the row the scene named. */
.convoCallDialButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: #0F766E;
  color: #ffffff;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

.convoCallDialButton:hover {
  filter: brightness(1.15);
}

.convoCallDialButton:active {
  transform: scale(0.94);
}

.convoCallDialButton .biaIcon {
  font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .convoCallKey,
  .convoCallErase,
  .convoCallDialButton {
    transition: none;
  }
  .convoCallKey:active,
  .convoCallDialButton:active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .convoCallAnswer {
    transition: none;
  }
}

/* ── the video stage ─────────────────────────────────────────────────────
   The clip is the exposure, so it runs full width with the speaker named on
   the frame. The player keeps its native controls: the chrome sits around
   them rather than replacing them, so nothing a keyboard or a screen reader
   relies on is reimplemented. */

.convoVideoStage {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #1B1A20;
  box-shadow: 0 12px 34px rgba(20, 15, 40, 0.35);
}

.convoVideoStage .exposureVideo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.convoVideoTop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  pointer-events: none;
}

.convoVideoTopRight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.convoVideoName,
.convoVideoState {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 16, 32, 0.72);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
}

.convoVideoName {
  padding-left: 6px;
}

/* ── what was said earlier ───────────────────────────────────────────────
   The same move the call window makes with its chat button, for the screens
   where the clip is the exposure and there is no window to put one in: the
   turns before this one sit behind a control ON the stage rather than in a
   fold underneath it, so the screen is one thing instead of two. A clock
   rather than a speech bubble, because out of a call this is a record of what
   has happened rather than a conversation you are in.

   .convoVideoTop is pointer-events: none so the chips do not eat clicks meant
   for the player; the one real control in it has to take them back. */

.convoStageHistoryButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 16, 32, 0.72);
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
}

.convoStageHistoryButton:hover {
  background: rgba(20, 16, 32, 0.9);
}

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

.convoStageHistoryButton[aria-expanded="true"] {
  background: var(--bia-accent);
}

.convoStageHistoryButton .biaIcon {
  font-size: 19px;
}

.convoStageHistoryCount {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bia-accent);
  color: var(--bia-on-accent);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* A light sheet at the foot of the stage, inside its rounded edge, so it is
   part of the frame rather than a panel that has appeared beside it. The
   bubbles are the thread's own and are built for a light ground. */
.convoStageHistory {
  max-height: 220px;
  overflow-y: auto;
  padding: 12px 14px;
  background: #ffffff;
}

.convoStageHistoryThread {
  margin-bottom: 0;
}

.convoVideoCaption {
  padding: 12px 16px 14px;
  background: #24222C;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* The listening half of a video exchange: the same person, the same frame, waiting while you
   answer. Smaller than the talking clip, because the reply below it is the thing being done. */
.convoVideoListening {
  max-width: 320px;
  margin-bottom: 16px;
}

/* ── the video call ──────────────────────────────────────────────────────
   A generic meeting, not a branded one: a title bar, the other person's
   frame, your own picture in the corner of it, and the two controls anybody
   expects. It holds the faces only. The line, the player, the box to type in
   and the prompt to speak all render below it exactly as they do outside a
   call, so nothing about how a reply works changes because it is on camera. */

.convoMeeting {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 14px;
  border-radius: 20px;
  overflow: hidden;
  background: #1B1A20;
  box-shadow: 0 12px 34px rgba(20, 15, 40, 0.35);
}

.convoMeetingBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #26242E;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

.convoMeetingTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convoMeetingGlyph {
  font-size: 1.05rem;
}

.convoMeetingBarRight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* The bar used to name the person here too, which put their name on the screen
   three times: in the title, in this chip and on the frame. The frame is the one
   that earns it, because that is where a video call puts a name; the bar says
   what the call is. */

/* The camera and microphone live behind this once the call is running. 44px
   so it is a real target, drawn small so it stays chrome. */
.convoMeetingGear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -6px -10px 0;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #C9C6D6;
  cursor: pointer;
}

.convoMeetingGear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

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

.convoMeetingGear .biaIcon {
  font-size: 20px;
}

.convoMeetingGear[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* Shut by default, and out of the accessibility tree while it is, so the
   gear's aria-expanded is telling the truth. */
.convoMeetingSettings {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── the chat panel ──────────────────────────────────────────────────────
   What has been said so far, where a video call keeps it: behind a chat
   button in the window itself. It used to be a <details> line under the
   call, which read as a second thing on the screen rather than as part of
   the one thing the screen is.

   A light sheet over the dark window, the way every meeting app draws its
   chat: the bubbles are the thread's own, unchanged, and they are built for
   a light ground. */

.convoMeetingChatButton {
  position: relative;
}

.convoMeetingChatCount {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bia-accent);
  color: var(--bia-on-accent);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.convoMeetingChat {
  max-height: 240px;
  overflow-y: auto;
  padding: 12px 14px;
  background: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.convoMeetingChatThread {
  margin-bottom: 0;
}

.convoMeetingStage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  background: #14131A;
}

.convoMeetingRemote {
  position: relative;
  width: 100%;
}

.convoMeetingRemote .exposureVideo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.convoMeetingRemoteName,
.convoMeetingRemoteState {
  position: absolute;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(20, 16, 32, 0.78);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Both chips ride along the TOP of the frame, the way the standalone video
   stage already names its speaker. The bottom strip belongs to the player's
   own controls: a name sitting on the scrubber is a name over the one part of
   the frame the user has to be able to hit. */
.convoMeetingRemoteName {
  left: 10px;
  top: 10px;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convoMeetingRemoteState {
  right: 10px;
  top: 10px;
}

/* ── the self view ───────────────────────────────────────────────────────
   Their own face: a thumbnail over the other person's frame, or the whole of
   the screen on a turn with no clip to watch, which is the audio and typed
   case. With no camera it is a head and shoulders in a circle, which is an
   ordinary way to be on a call rather than a broken state. */

.convoSelfTile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #2A2833;
}

.convoSelfPip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 108px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(10, 8, 20, 0.5);
  outline: 2px solid rgba(255, 255, 255, 0.18);
  outline-offset: -2px;
}

/* Sitting over a clip, the thumbnail clears the player's own control bar. The
   frame keeps its native controls rather than reimplementing them, so covering
   the volume and the fullscreen button with a picture of your own face would
   be taking them away by another route. */
.convoMeetingRemote + .convoSelfPip {
  bottom: 52px;
}

.convoSelfLead {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 320px;
}

.convoSelfVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A self view that is not mirrored reads as somebody else. */
  transform: scaleX(-1);
}

.convoSelfAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8F8BA6;
}

.convoSelfName {
  position: absolute;
  left: 7px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 16, 32, 0.78);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
}

.convoSelfLead .convoSelfName {
  left: 10px;
  bottom: 10px;
  font-size: 0.75rem;
  padding: 4px 11px;
}

/* The state is read, not seen: the picture cannot say whether the camera is
   on, and colour must not be the thing that does. It is visible text in the
   lead tile and screen-reader text in the thumbnail, where there is no room. */
.convoSelfState {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(20, 16, 32, 0.78);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.convoSelfPip .convoSelfState {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── the other person, with no clip of them ──────────────────────────────
   A card rather than a black rectangle: a blank frame reads as a call that
   has dropped. */

.convoRemoteCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px;
  color: #ffffff;
  text-align: center;
}

.convoRemotePip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  gap: 3px;
  width: 108px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #2A2833;
  box-shadow: 0 4px 14px rgba(10, 8, 20, 0.5);
}

.convoRemoteName {
  font-size: 0.9rem;
  font-weight: 600;
}

.convoRemotePip .convoRemoteName {
  font-size: 0.75rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convoRemoteState {
  color: #C9C6D6;
  font-size: 0.76rem;
  font-weight: 500;
}

.convoRemotePip .convoRemoteState {
  font-size: 0.68rem;
}

/* The line under the frame, for anyone who did not catch it. Same job as the
   standalone video stage's caption, so it reads the same. */
.convoMeetingCaption {
  padding: 12px 16px 14px;
  background: #24222C;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ── the controls ────────────────────────────────────────────────────────
   Camera and microphone, named in text as well as drawn, because an icon
   with a line through it is exactly the kind of state a glyph alone gets
   wrong. Turning one off stops the track, so the light on the device goes
   out and the label is telling the truth. */

.convoMeetingControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: #26242E;
}

.convoMeetingControl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #3D3A49;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.convoMeetingControl:hover {
  background: #4A4657;
}

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

/* Off is a slash icon, an outlined rather than filled button, and aria-pressed
   reading false: three signals, none of them colour. Meeting apps use red for
   this and Bia does not, because red here means a discomfort rating of 8 or
   more and nothing else. */
.convoControlOff {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}

.convoControlOff:hover {
  background: rgba(255, 255, 255, 0.1);
}

.convoMeetingPrivacy {
  margin: 0;
  padding: 0 14px 12px;
  background: #26242E;
  color: #C9C6D6;
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

/* ── the lobby and the ringing screen ────────────────────────────────────
   Both are the ordinary start gate wearing a meeting app, so they inherit
   .convoCall and only add what is theirs. */

.convoCall-video,
.convoCall-videoRing {
  max-width: 360px;
}

.convoCall-video .convoMeetingControls,
.convoCall-videoRing .convoMeetingControls,
.convoCall-video .convoMeetingPrivacy,
.convoCall-videoRing .convoMeetingPrivacy {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
}

.convoCall-video .convoMeetingControls,
.convoCall-videoRing .convoMeetingControls {
  padding: 12px 0 4px;
}

.convoLobbyTitle {
  margin-bottom: 2px;
}

.convoLobbyPreview {
  position: relative;
  width: 100%;
  margin: 8px 0 2px;
  border-radius: 16px;
  overflow: hidden;
}

/* Big enough to be a real look at your own face, small enough that the three
   steps and Join still fit on a phone without scrolling. */
.convoLobbyPreview .convoSelfLead {
  max-height: 190px;
}

/* On the ringing screen the preview is not a thumbnail over anything, it is
   the answer to "what will they see": centred, under their name, before the
   choice rather than after it. */
.convoRingSelf {
  position: relative;
  width: 108px;
  height: 81px;
  margin: 6px auto 0;
}

.convoRingSelf .convoSelfPip {
  right: 0;
  bottom: 0;
}

.convoJoinButton {
  width: 100%;
  justify-content: center;
}

/* ── the lobby, step by step ─────────────────────────────────────────────
   Camera, microphone, join, numbered so it is obvious which one is being
   asked. Two toggles and a Join button all live at once made the two hardest
   parts of the screen look optional and left it unclear what Join would
   actually turn on. The number is decoration (aria-hidden): the list is a
   real <ol>, so its order is in the markup, and the current row carries
   aria-current="step". */

/* The list sits on the call panel's dark gradient (#2E2E33 -> #3B3A44), so
   every colour here is light-on-dark and measured against the LIGHTER stop,
   which is the worse case for light text. White is 11.2:1 there and #C9C6D6,
   the quiet tone the meeting bar already uses, is 6.7:1. */

.convoLobbySteps {
  width: 100%;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.convoLobbyStep {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
}

/* A finished step is one line: the label and what was decided share a row. With
   three steps and a preview above them, two-line rows put Join under the fold
   on a phone, and Join is the point of the screen. */
.convoLobbyStepDone {
  padding: 8px 0;
}

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

.convoLobbyStep + .convoLobbyStep {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.convoLobbyNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bia-accent);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.convoLobbyNum .biaIcon {
  font-size: 17px;
}

.convoLobbyStepDone .convoLobbyNum {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* A step that has not been reached is quieter, but never below AA: it still
   has to be readable, because it is what says what is coming. */
.convoLobbyStepAhead .convoLobbyNum {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  color: #C9C6D6;
}

.convoLobbyBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 3px;
}

.convoLobbyLabel {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
}

.convoLobbyStepAhead .convoLobbyLabel,
.convoLobbyStepDone .convoLobbyLabel {
  color: #C9C6D6;
  font-weight: 500;
}

.convoLobbyOutcome {
  font-size: 0.85rem;
  font-weight: 600;
  color: #C9C6D6;
}

.convoLobbyActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.convoLobbyGo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--bia-accent);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.convoLobbyGo:hover {
  filter: brightness(1.12);
}

.convoLobbyGo .biaIcon {
  font-size: 19px;
}

/* Skipping is a real answer, so it is a real control rather than fine print,
   and it is plainly the quieter of the two. */
.convoLobbySkip {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.convoLobbySkip:hover {
  background: rgba(255, 255, 255, 0.12);
}

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

/* Counting into the call: everything that was setup has done its job and gets
   out of the way, so 3, 2, 1 is the only thing on the screen. The count is
   inside the Join button, so it happens where the press happened rather than
   somewhere else on the screen. */
.convoCallCounting .convoLobbyStep-cam,
.convoCallCounting .convoLobbyStep-mic,
.convoCallCounting .convoMeetingPrivacy,
.convoCallCounting .convoLobbyPreview,
.convoCallCounting .convoLobbyNum,
.convoCallCounting .convoLobbyLabel {
  display: none;
}

.convoCallCounting .convoLobbyStep {
  padding: 0;
  border-top: 0;
}

.convoJoinButton .conversationStartCount {
  display: none;
}

/* The button keeps its shape and loses its words: the same target the press
   landed on is where the number appears. */
.convoJoinButton.conversationStartCounting {
  min-height: 84px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  opacity: 1;
}

.convoJoinButton.conversationStartCounting .convoJoinGlyph,
.convoJoinButton.conversationStartCounting .convoJoinLabel {
  display: none;
}

/* colour: inherit, not the token. The base .conversationStartCount is dark ink
   for the play circle, which sits on a light card; this one sits on the call's
   dark panel and takes the button's own white. */
.convoJoinButton.conversationStartCounting .conversationStartCount {
  display: block;
  color: inherit;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 420px) {
  .convoSelfPip,
  .convoRemotePip {
    width: 88px;
  }
  .convoMeetingControl {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* The folded thread (.convoThreadFold, a <details> line under the clip) lived here.
   Every screen that used it now carries the thread inside its own frame instead: the
   call window behind its chat button, the video stage behind its history control. Same
   idea, one element on the screen rather than two. */

/* ── the text conversation ───────────────────────────────────────────────
   The `textConversation` stage: the same scripted exchange drawn as a phone.
   Spec: .claude/specs/conversation-exposure.md

   Blue on an Apple device, green on everything else, because that is the one
   detail that decides whether a mock thread reads as a phone or as a diagram of
   one. The hexes are NOT Apple's #007AFF and #34C759: both of those carry white
   text at about 3:1, which fails AA outright. These are the same two hues taken
   down to 6.0:1 and 5.4:1, so the thread still reads as blue and green and the
   words in it are actually legible. */

.txtPhone {
  --txt-mine-bg: #0A5ECC;
  --txt-mine-fg: #ffffff;
  --txt-theirs-bg: #EEEDF2;
  --txt-surface: #ffffff;
  --txt-bar-bg: #F6F5FA;
  --txt-edge: #E4E1EF;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 16px;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--txt-surface);
  box-shadow: inset 0 0 0 1px var(--txt-edge), 0 6px 20px rgba(30, 20, 80, 0.10);
  overflow: hidden;
  text-align: left;
}

.txtPhone-android {
  --txt-mine-bg: #1F7A3D;
}

/* ── who this is ─────────────────────────────────────────────────────────
   A phone names the person once, at the top, rather than over every bubble.
   Every bubble still carries the name for a screen reader (.sr-only), so the
   side and the colour are never the only things saying who wrote it. */

.txtBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--txt-bar-bg);
  box-shadow: inset 0 -1px 0 var(--txt-edge);
}

.txtBarWho {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.txtBarName {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--bia-fg);
  overflow-wrap: anywhere;
}

.txtBarSub {
  font-size: 0.76rem;
  color: var(--bia-muted);
}

/* ── the thread ──────────────────────────────────────────────────────────
   One continuous screen you scroll, not a stack of cards that replace each
   other, which is why it holds more turns than the spoken thread and scrolls
   inside itself instead of pushing the composer off the bottom. */

.txtThread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  max-height: 46vh;
  overflow-y: auto;
}

.txtMsg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.txtYou {
  flex-direction: row-reverse;
}

.txtAvatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-end;
}

.txtCol {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 76%;
  min-width: 0;
}

.txtYou .txtCol {
  align-items: flex-end;
  margin-left: auto;
}

.txtBubble {
  padding: 9px 14px;
  border-radius: 18px 18px 18px 5px;
  background: var(--txt-theirs-bg);
  color: var(--bia-fg);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.txtYou .txtBubble {
  border-radius: 18px 18px 5px 18px;
  background: var(--txt-mine-bg);
  color: var(--txt-mine-fg);
}

/* A line inside a bubble is already at reading size; the fit-to-box text stage
   belongs to a full-bleed exposure item and would blow one word up to fill the
   card here. */
.txtBubble .convoText {
  font-size: 1rem;
  line-height: 1.4;
}

.txtBubble .convoEcho,
.txtBubble .convoEchoQuiet {
  font-size: 1rem;
}

/* Where a sent message has got to. Never colour alone and never an icon alone:
   it says the word, because "two grey ticks" is a thing you have to already
   know. Only ever under the newest message the user sent. */
.txtReceipt {
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bia-muted);
}

/* What the scene does rather than what anybody says: a day break, a note that
   the thread has gone quiet. Down the middle, no bubble, no side, no avatar. */
.txtSystem {
  display: block;
  text-align: center;
  padding: 6px 10px;
}

.txtSystemText,
.txtSystemText .convoText {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--bia-muted);
}

/* Built into the thread and not shown yet: the message is still arriving. */
.txtArriving,
.txtHidden {
  display: none;
}

/* ── they are typing ─────────────────────────────────────────────────────
   The wait is the exposure, so the dots are a real beat rather than a spinner:
   they come on, they go off, they come on again. The same fact is put into the
   screen's live region in words, because somebody who cannot see three dots
   move should not be the only person who misses them stopping. */

.txtTypingBubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 15px;
}

.txtDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bia-muted);
  opacity: 0.45;
}

@media (prefers-reduced-motion: no-preference) {
  .txtDot {
    animation: txtDotPulse 1.25s infinite ease-in-out;
  }
  .txtDot:nth-child(2) { animation-delay: 0.16s; }
  .txtDot:nth-child(3) { animation-delay: 0.32s; }
}

@keyframes txtDotPulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Reduced motion still needs three dots that read as three dots rather than as
   one flat grey row, so the difference is carried by opacity instead. */
@media (prefers-reduced-motion: reduce) {
  .txtDot:nth-child(2) { opacity: 0.65; }
  .txtDot:nth-child(3) { opacity: 0.9; }
}

/* The message landing. Small on purpose: it marks the arrival, it is not an
   entrance. */
@media (prefers-reduced-motion: no-preference) {
  .txtLanded .txtBubble {
    animation: txtLand 180ms ease-out;
  }
}

@keyframes txtLand {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── writing one ─────────────────────────────────────────────────────────
   The box sits where a message is written, at the foot of the thread. Next is
   still the action and says Send: everything in the engine (the min-character
   gate, the progress fill, the skip check-in) hangs off Next, and a second Send
   button beside it would be a second answer to the same question. */

.txtCompose {
  padding: 12px 14px 14px;
  background: var(--txt-bar-bg);
  box-shadow: inset 0 1px 0 var(--txt-edge);
}

.txtCompose h5 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bia-fg);
  text-align: left;
}

.txtCompose .writeContainer {
  margin-top: 0;
  max-width: 100%;
}

.txtCompose .writeEditable,
.txtCompose .exposureTextArea {
  width: 100%;
  height: 88px;
  min-height: 88px;
  border-radius: 20px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .txtPhone {
    max-width: 100%;
  }
  .txtThread {
    max-height: 40vh;
  }
  .txtCol {
    max-width: 82%;
  }
}

/* High-contrast mode: the two bubble hues go to >=7:1 with their white text,
   and the received bubble takes a real edge rather than relying on a fill that
   is nearly the panel it sits on. */
html[data-a11y-contrast="high"] .txtPhone {
  --txt-mine-bg: #08408C;
  --txt-theirs-bg: #E7E5EE;
  --txt-edge: #444444;
}

html[data-a11y-contrast="high"] .txtPhone-android {
  --txt-mine-bg: #14532D;
}

html[data-a11y-contrast="high"] .txtBubble {
  box-shadow: inset 0 0 0 1px var(--txt-edge);
}

/* Forced colours throw every fill away, so the two sides have to be told apart
   by shape and edge instead. */
@media (forced-colors: active) {
  .txtBubble {
    border: 1px solid CanvasText;
  }
  .txtYou .txtBubble {
    border-width: 2px;
  }
}

/* ── the scenario card ───────────────────────────────────────────────────
   What the scene is, before it starts. The exchange count is derived from the
   turn list, so there is nothing to author and nothing to get out of step. */

.convoScenario {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 22px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #DAD3FB;
  text-align: left;
}

.convoScenarioKicker {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bia-focus);
}

.convoScenarioTitle {
  margin: 0 0 10px;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--bia-fg);
}

.convoScenarioText {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bia-tool-body);
}

.convoScenarioMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.convoScenarioPill {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bia-tool-ink);
}

/* A choice of what to say is a list of lines, so it uses the same stacked rows
   every other picker in the exposure does. Each row is one line of dialogue;
   pressing it chooses and plays it, so there is no selected state to draw. */
.stackedOptions .toggleOption.conversationChoice {
  padding-right: 44px;
  position: relative;
}

.stackedOptions .toggleOption.conversationChoice::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid var(--bia-accent);
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

.conversationAmbientBar {
  max-width: 640px;
  margin: 0 auto 12px;
  text-align: right;
}

/* WCAG 1.4.2: a background loop that starts on its own needs a control. */
.conversationAmbientToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--bia-border);
  border-radius: 16px;
  background: transparent;
  font-size: 0.85rem;
  color: var(--bia-muted);
  cursor: pointer;
}

.conversationAmbientToggle:hover {
  border-color: var(--bia-accent);
  color: var(--bia-fg);
}

.conversationAmbientState {
  font-weight: 600;
  color: var(--bia-fg);
}

/* The start gate: a play circle that counts 3, 2, 1 before the turn runs. */

.conversationStartTitle {
  max-width: 640px;
  margin: 0 auto 20px;
  text-align: center;
  color: var(--bia-fg);
}

.conversationStartWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 32px;
}

.conversationStartButton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: 0;
  border: 3px solid var(--bia-accent);
  border-radius: 50%;
  background: var(--bia-tool-bg-top);
  color: var(--bia-accent);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.conversationStartButton:hover:not(:disabled) {
  background: var(--bia-on-accent);
  transform: scale(1.04);
}

.conversationStartButton:disabled {
  cursor: default;
}

/* The play triangle sits a little right of centre so it reads as centred. */
.conversationStartIcon {
  display: flex;
  margin-left: 6px;
}

.conversationStartCount {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bia-fg);
}

.conversationStartCounting {
  border-color: var(--bia-border);
}

@media (prefers-reduced-motion: no-preference) {
  .conversationStartCounting {
    animation: conversationCountPulse 1s ease-out infinite;
  }
  @keyframes conversationCountPulse {
    0%   { box-shadow: 0 0 0 0 rgba(108, 95, 192, 0.35); }
    100% { box-shadow: 0 0 0 18px rgba(108, 95, 192, 0); }
  }
}

/* Auto-advance: the bar that stands where the Next button was, filling on its own. */

.conversationAutoBar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 220px;
  max-width: 100%;
  height: 48px;
  margin-top: 16px;
  border: 1px solid var(--bia-border);
  border-radius: 24px;
  background: var(--bia-tool-bg-top);
}

.conversationAutoFill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--bia-tool-bg-top);
  filter: brightness(0.92);
  transition: width 0.2s linear;
}

.conversationAutoText {
  position: relative;
  font-weight: 600;
  color: var(--bia-fg);
}

/* A cue: a clip playing under a reply screen rather than as a turn of its own.
   Sized down, because the reply is the point and the clip is the setting. */

.conversationCue {
  max-width: 420px;
  margin: 0 auto 20px;
  text-align: center;
}

.conversationCue p {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--bia-muted);
}

.conversationCue audio {
  width: 100%;
}

.conversationCue .exposureVideo,
.conversationCue .exposureImage {
  max-height: 200px;
}

/* A count running by itself, with nothing to press. Same circle as the start
   button so the 3, 2, 1 lands in the same place, without the affordance. */
.conversationStartButton.conversationStartAuto {
  border-color: var(--bia-border);
  background: var(--bia-tool-bg-top);
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPOSURE UI POLISH
   One row treatment shared by every list of things you can pick inside an
   exposure: the phobia-severity and check-in scales, the select-one and
   select-all components, and the expectancy / affect-label / safety-drop
   chips. All of them used to be a reflowed line of pills whose widths came
   from their words, so no two screens lined up. They are stacked, full width
   and left aligned now, and each one carries a real radio or checkbox mark so
   single choice and multiple choice are told apart before anything is pressed.

   Geometry is shared through the tokens below so a row is the same object
   wherever it appears; only the mark changes shape.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --x-row-radius: 13px;
  --x-row-border: #EAE6F7;        /* resting edge, decorative: the label carries contrast */
  --x-row-mark: #C9C2E6;          /* unchecked mark ring */
  --x-row-sel-bg: #F3F0FF;        /* selected fill, near-white so label contrast is unaffected */
  --x-row-shadow: 0 1px 2px rgba(30, 20, 80, 0.04);
  --x-row-sel-shadow: 0 2px 8px rgba(76, 60, 180, 0.10);
  --x-row-hover-bg: #FBFAFF;
  --x-row-hover-border: #C8BFF0;
  --x-mark-size: 22px;
  --x-mark-left: 16px;
  --x-row-pad-left: 52px;         /* --x-mark-left + --x-mark-size + a 14px gutter */
}

/* ── Stacked chip lists (expectancy, affect label, safety drop, mid-run yes/no) ──
   .toggleOption keeps its inline pill shape everywhere else in the product; it
   is only inside .stackedOptions that it becomes a row.

   The mark is drawn on the row itself rather than on a child, so every row type
   gets it from one place and it never depends on the markup underneath. It is
   absolutely positioned, so its place does not move as a label wraps to two
   lines, and it is painted with an inset shadow rather than a border so a state
   change cannot shift anything by a pixel and a half. The dot is a radial
   gradient rather than a second box: one paint, and it cannot drift out of its
   ring at any zoom. The tick is present at rest and revealed on selection, so
   its geometry is settled before it is ever seen. ── */
.stackedOptions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 560px;
  margin: 12px auto;
  text-align: left;
}

.stackedOptions .toggleOption {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--x-row-radius);
  background: #ffffff;
  color: var(--bia-fg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  box-shadow: inset 0 0 0 1.5px var(--x-row-border), var(--x-row-shadow);
  transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.stackedOptions .toggleOption:hover {
  background: var(--x-row-hover-bg);
  color: var(--bia-fg);
  box-shadow: inset 0 0 0 1.5px var(--x-row-hover-border), var(--x-row-shadow);
}

/* Chosen is purple, which is the colour a chip has always turned. Stacking them
   was a layout change; the tinted fill this used to carry was a repaint that came
   with it and did not belong. White on #6c5fc0 is 5.0:1.

   The weight does not change. A row holds a whole sentence, and bolder text is
   wider text: on a label that wraps, ticking it rewrapped the line and every row
   under it jumped. Nothing about the selected state may change what the row
   measures, which is why the ring is an inset shadow rather than a border and
   why the tick is drawn at rest and only revealed. */
.stackedOptions .toggleOption.selected,
.stackedOptions .toggleOption.selected:hover {
  background: var(--bia-accent);
  color: var(--bia-on-accent);
  box-shadow: inset 0 0 0 1.5px var(--bia-accent), var(--x-row-sel-shadow);
}

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

/* .checkable multi-selects, .selectable picks one. */
.stackedOptions.checkable .toggleOption,
.stackedOptions.selectable .toggleOption {
  position: relative;
  padding-left: var(--x-row-pad-left);
}

.stackedOptions.checkable .toggleOption::before,
.stackedOptions.selectable .toggleOption::before {
  content: "";
  position: absolute;
  left: var(--x-mark-left);
  top: 50%;
  transform: translateY(-50%);
  width: var(--x-mark-size);
  height: var(--x-mark-size);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px var(--x-row-mark);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.stackedOptions.selectable .toggleOption::before {
  border-radius: 50%;
}

.stackedOptions.checkable .toggleOption::after {
  content: "";
  position: absolute;
  left: calc(var(--x-mark-left) + 7px);
  top: 50%;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0;
  transition: opacity 140ms ease;
}

.stackedOptions.checkable .toggleOption.selected::before {
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #ffffff;
}

/* The tick is knocked out of the mark in the row's fill, so it reads on a
   purple row the way it read on a white one. */
.stackedOptions.checkable .toggleOption.selected::after {
  opacity: 1;
  border-color: var(--bia-accent);
}

.stackedOptions.selectable .toggleOption.selected::before {
  background: radial-gradient(circle at center, #ffffff 0 5.5px, transparent 5.5px);
  box-shadow: inset 0 0 0 1.5px #ffffff;
}

/* The mid-run yes / no pair is two options, not a list: side by side and equal
   width, which is neither a reflowed line nor a stack of two. */
.safetyMidQYesNo.stackedOptions {
  flex-direction: row;
  gap: 10px;
  margin: 0 0 4px;
}

.safetyMidQYesNo.stackedOptions .toggleOption {
  flex: 1 1 0;
}

/* The safety-drop list keeps its own row wrapper, since each chip has a coaching
   note underneath it, so the stack gap belongs to the wrapper rather than the chip. */
.safetyDropList.stackedOptions {
  gap: 8px;
}

.safetyDropList.stackedOptions .safetyDropRow {
  display: flex;
  flex-direction: column;
}

/* Was an inline-styled times sign with no target of its own. */
.safetyDropCustomDelete {
  margin-left: 8px;
  padding: 0 6px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
}

.safetyDropCustomDelete:hover {
  background: rgba(108, 95, 192, 0.12);
}

/* ── The phobia-severity and check-in scales ───────────────────────────────
   Same rows, built from the real radio and checkbox inputs x_buildScaleHtml
   already emits, so the mark shape follows the input type with no JavaScript
   involved. These were a centred, wrapped line of dark grey blocks whose widths
   came from the length of each answer; on a five-point scale that put two
   answers on one line and three on the next, and nothing lined up down the
   column. The 0 to 10 number scales are untouched. */
.scaleWrapper.phobiaSeverity,
.scaleWrapper.checkin {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 9px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* The wrapper used to fill purple once an answer was given. That is the row's
   job now, and the fill would otherwise show through between rows. */
.scaleWrapper.phobiaSeverity.done,
.scaleWrapper.checkin.done {
  background-color: transparent;
}

.scaleWrapper.phobiaSeverity .scaleOption.phobiaSeverity,
.scaleWrapper.checkin .scaleOption.checkin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  height: auto;
  min-height: 52px;
  margin: 0;
  padding: 13px 16px 13px var(--x-row-pad-left);
  border-radius: var(--x-row-radius);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

/* Colour is the scale's own, not this treatment's: stacking the answers and giving
   them a radio mark was a layout change and had no business repainting them. Dark
   by default, purple once answered, the colours it has always used. The light
   treatment is opt-in (theme: 'light' on the component) and scoped below, so the
   two never argue about specificity. */
.scaleWrapper.phobiaSeverity:not(.light) .scaleOption.phobiaSeverity,
.scaleWrapper.checkin:not(.light) .scaleOption.checkin {
  background: #4E4E4E;
  color: #ffffff;
  box-shadow: none;
}

/* .long was a way of forcing a wide answer onto a line of its own. Every row is
   its own line now, so it has nothing left to do. */
.scaleWrapper.phobiaSeverity .scaleOption.phobiaSeverity.long,
.scaleWrapper.checkin .scaleOption.checkin.long {
  min-width: 0;
}

.scaleWrapper.phobiaSeverity .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin .scaleOption.checkin::before {
  content: "";
  position: absolute;
  left: var(--x-mark-left);
  top: 50%;
  transform: translateY(-50%);
  width: var(--x-mark-size);
  height: var(--x-mark-size);
  border-radius: 50%;
  transition: background 140ms ease, box-shadow 140ms ease;
}

/* On the dark scale the mark is drawn in the text colour: the row colours it would
   otherwise use do not exist against #4E4E4E. */
.scaleWrapper.phobiaSeverity:not(.light) .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin:not(.light) .scaleOption.checkin::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

.scaleWrapper.phobiaSeverity.light .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin.light .scaleOption.checkin::before {
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px var(--x-row-mark);
}

/* A multi-answer scale is built from checkboxes, so its mark is square and
   carries a tick. Nothing in the builder has to know. */
.scaleWrapper.phobiaSeverity input[type=checkbox] + .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin input[type=checkbox] + .scaleOption.checkin::before {
  border-radius: 7px;
}

.scaleWrapper.phobiaSeverity input[type=checkbox] + .scaleOption.phobiaSeverity::after,
.scaleWrapper.checkin input[type=checkbox] + .scaleOption.checkin::after {
  content: "";
  position: absolute;
  left: calc(var(--x-mark-left) + 7px);
  top: 50%;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0;
  transition: opacity 140ms ease;
}

/* -- the dark scale, which is the default ------------------------------- */

.scaleWrapper.phobiaSeverity:not(.light) .scaleOption.phobiaSeverity:hover,
.scaleWrapper.checkin:not(.light) .scaleOption.checkin:hover {
  background-color: #5C5C5C;
  color: #ffffff;
}

/* Answered turns the row purple, which is what this scale has always done with a
   chosen answer. White on #6c5fc0 is 5.0:1. */
.scaleWrapper.phobiaSeverity:not(.light) input:checked + .scaleOption.phobiaSeverity,
.scaleWrapper.checkin:not(.light) input:checked + .scaleOption.checkin {
  background-color: var(--bia-accent);
  color: #ffffff;
}

.scaleWrapper.phobiaSeverity:not(.light) input[type=radio]:checked + .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin:not(.light) input[type=radio]:checked + .scaleOption.checkin::before {
  background: radial-gradient(circle at center, #ffffff 0 5.5px, transparent 5.5px);
  box-shadow: inset 0 0 0 1.5px #ffffff;
}

.scaleWrapper.phobiaSeverity:not(.light) input[type=checkbox]:checked + .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin:not(.light) input[type=checkbox]:checked + .scaleOption.checkin::before {
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #ffffff;
}

/* The tick is drawn in the row's own fill, so it reads as knocked out of the mark. */
.scaleWrapper.phobiaSeverity:not(.light) input[type=checkbox]:checked + .scaleOption.phobiaSeverity::after,
.scaleWrapper.checkin:not(.light) input[type=checkbox]:checked + .scaleOption.checkin::after {
  border-color: var(--bia-accent);
}

/* A purple ring on a purple row is invisible, so the dark scale focuses in white. */
.scaleWrapper.phobiaSeverity:not(.light) input:focus-visible + .scaleOption.phobiaSeverity,
.scaleWrapper.checkin:not(.light) input:focus-visible + .scaleOption.checkin {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* -- the light scale, opt in with theme: 'light' ------------------------ */

.scaleWrapper.phobiaSeverity.light .scaleOption.phobiaSeverity,
.scaleWrapper.checkin.light .scaleOption.checkin {
  background: #ffffff;
  color: var(--bia-fg);
  box-shadow: inset 0 0 0 1.5px var(--x-row-border), var(--x-row-shadow);
}

.scaleWrapper.phobiaSeverity.light .scaleOption.phobiaSeverity:hover,
.scaleWrapper.checkin.light .scaleOption.checkin:hover {
  background-color: var(--x-row-hover-bg);
  color: var(--bia-fg);
  box-shadow: inset 0 0 0 1.5px var(--x-row-hover-border), var(--x-row-shadow);
}

.scaleWrapper.phobiaSeverity.light input:checked + .scaleOption.phobiaSeverity,
.scaleWrapper.checkin.light input:checked + .scaleOption.checkin {
  background-color: var(--x-row-sel-bg);
  color: var(--bia-focus);
  box-shadow: inset 0 0 0 1.5px var(--bia-accent), var(--x-row-sel-shadow);
}

.scaleWrapper.phobiaSeverity.light input[type=radio]:checked + .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin.light input[type=radio]:checked + .scaleOption.checkin::before {
  background: radial-gradient(circle at center, var(--bia-accent) 0 5.5px, #ffffff 5.5px);
  box-shadow: inset 0 0 0 1.5px var(--bia-accent);
}

.scaleWrapper.phobiaSeverity.light input[type=checkbox]:checked + .scaleOption.phobiaSeverity::before,
.scaleWrapper.checkin.light input[type=checkbox]:checked + .scaleOption.checkin::before {
  background: var(--bia-accent);
  box-shadow: inset 0 0 0 1.5px var(--bia-accent);
}

.scaleWrapper.phobiaSeverity.light input:focus-visible + .scaleOption.phobiaSeverity,
.scaleWrapper.checkin.light input:focus-visible + .scaleOption.checkin {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

/* Shared: the tick appears once the box is checked, whichever theme it is in. */
.scaleWrapper.phobiaSeverity input[type=checkbox]:checked + .scaleOption.phobiaSeverity::after,
.scaleWrapper.checkin input[type=checkbox]:checked + .scaleOption.checkin::after {
  opacity: 1;
}

/* ── select-one and select-all components ─────────────────────────────────
   .selectOneOptionContainer is shared with the scheduler, hierarchy placement
   and the imaginal prompt picker, none of which are a pick-one-of-these list.
   The mark is therefore scoped to .selectControl, which only the two select
   builders in exercise.js add. */
.selectOneOptionContainer.selectControl {
  position: relative;
  padding: 14px 16px 14px var(--x-row-pad-left);
  margin-top: 10px;
  border: 1.5px solid var(--x-row-border);
  border-radius: var(--x-row-radius);
  background: #ffffff;
  box-shadow: var(--x-row-shadow);
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

/* The label sits in a width:80% inline block written by the builder. Inside a
   row that already reserves the mark's gutter it only needs to fill what is left. */
.selectOneOptionContainer.selectControl > div {
  width: auto !important;
  margin-right: 0 !important;
  display: block;
}

.selectOneOptionContainer.selectControl::before {
  content: "";
  position: absolute;
  left: var(--x-mark-left);
  top: 50%;
  transform: translateY(-50%);
  width: var(--x-mark-size);
  height: var(--x-mark-size);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px var(--x-row-mark);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.selectOneOptionContainer.selectControlRadio::before {
  border-radius: 50%;
}

.selectOneOptionContainer.selectControlCheck::after {
  content: "";
  position: absolute;
  left: calc(var(--x-mark-left) + 7px);
  top: 50%;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0;
  transition: opacity 140ms ease;
}

.selectOneOptionContainer.selectControl:hover {
  background: var(--x-row-hover-bg);
  border-color: var(--x-row-hover-border);
}

.selectOneOptionContainer.selectControl.selected {
  background: var(--x-row-sel-bg);
  border: 1.5px solid var(--bia-accent);
  box-shadow: var(--x-row-sel-shadow);
}

/* Colour only, and the mark beside it. Bolding the label rewraps it, which moves
   every row underneath the one that was just picked. */
.selectOneOptionContainer.selectControl.selected .shortSelectOneOption {
  color: var(--bia-focus);
}

.selectOneOptionContainer.selectControlRadio.selected::before {
  background: radial-gradient(circle at center, var(--bia-accent) 0 5.5px, #ffffff 5.5px);
  box-shadow: inset 0 0 0 1.5px var(--bia-accent);
}

.selectOneOptionContainer.selectControlCheck.selected::before {
  background: var(--bia-accent);
  box-shadow: inset 0 0 0 1.5px var(--bia-accent);
}

.selectOneOptionContainer.selectControlCheck.selected::after {
  opacity: 1;
}

/* Forced colours drops every background and inset shadow, so selection would
   vanish from all three row types at once. A real border is the one thing the
   mode keeps, and a pixel of layout shift matters less than losing the state. */
@media (forced-colors: active) {
  .stackedOptions .toggleOption.selected,
  .selectOneOptionContainer.selectControl.selected,
  .scaleWrapper.phobiaSeverity input:checked + .scaleOption.phobiaSeverity,
  .scaleWrapper.checkin input:checked + .scaleOption.checkin {
    border: 3px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stackedOptions .toggleOption,
  .stackedOptions .toggleOption::before,
  .stackedOptions .toggleOption::after,
  .selectOneOptionContainer.selectControl,
  .selectOneOptionContainer.selectControl::before,
  .selectOneOptionContainer.selectControl::after,
  .scaleWrapper.phobiaSeverity .scaleOption.phobiaSeverity,
  .scaleWrapper.checkin .scaleOption.checkin {
    transition: none;
  }
}

/* ── Phase progress ────────────────────────────────────────────────────────
   Was a row of white blocks on a lavender page, which meant an empty phase read
   the same as a filled one. The empty track is a tint of the page now and a
   completed phase is the teal fill, so the bar says how far along the run is at
   a glance. Kept as separate segments because the games (paint, crossword,
   wordle, sentence) emit the same markup and address segments by id. */
.phaseProgress {
  background: #C9BFF2;
  height: 10px;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(80, 60, 160, 0.10);
  transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.phaseProgress.complete {
  background: linear-gradient(90deg, #39C39E, #2FA891);
  box-shadow: none;
}

/* The phase being worked through. A lighter green than a finished one: a half-filled
   segment claimed a position inside the phase that the bar does not actually know, and
   read as a rendering glitch next to its solid neighbours. */
.phaseProgress.in-progress {
  background: #86DCC0;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .phaseProgress {
    transition: none;
  }
}

/* ── Tool tiles ────────────────────────────────────────────────────────────
   A row on a phone, where a fixed 280px tile overflowed the viewport and a
   centred label under a large illustration cost most of the screen; side by
   side from tablet up, where three fit across and a grid reads faster than a
   column. The old fixed 280x105 box is gone, and with it the narrow-screen
   override that existed only to undo it. */
.exposureTool {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  height: auto;
  min-height: 76px;
  margin: 8px auto;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #EDEAF8;
  border-radius: 16px;
  box-shadow: var(--x-row-shadow);
  text-align: left;
  font-size: 1rem;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.exposureTool:hover {
  border-color: var(--bia-accent);
  box-shadow: 0 4px 14px rgba(76, 60, 180, 0.12);
  transform: translateY(-1px);
}

.exposureTool.disabled:hover {
  transform: none;
  border-color: #EDEAF8;
  box-shadow: var(--x-row-shadow);
}

/* The media half. The glyph tile sets its own size inline; a kids illustration
   is held to the same square so the two never change the height of the row.
   The !important overrides a width:30% written inline by the older callers. */
.exposureToolMedia,
.exposureTool > div:first-child {
  width: 48px !important;
  flex: 0 0 48px;
  margin-right: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

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

.exposureTool .exposureToolLabel {
  flex: 1 1 auto;
  width: auto;
  margin-left: 0;
  text-align: left;
  font-weight: 500;
  line-height: 1.3;
}

@media (min-width: 700px) {
  .exposureTool {
    display: inline-flex;
    width: 280px;
    margin: 8px;
    vertical-align: top;
  }
}

/* The pause and unlock cards keep their illustrations and their square shape;
   only the surface is brought into line with the rows above them. */
.exposureToolOption {
  background: #ffffff;
  border: 1.5px solid #EDEAF8;
  border-radius: 16px;
  box-shadow: var(--x-row-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.exposureToolOption:hover {
  border-color: var(--bia-accent);
  box-shadow: 0 4px 14px rgba(76, 60, 180, 0.12);
  transform: translateY(-1px);
}

.exposureToolOption.clear {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .exposureTool,
  .exposureToolOption {
    transition: none;
  }
  .exposureTool:hover,
  .exposureToolOption:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIDE THE WAVE
   The pause screen's break. The curve is the whole argument: discomfort rises,
   crests and comes back down on its own, and each wave after it is smaller. A
   dot rides it while a countdown runs, so sitting still is something being done
   rather than something being waited out. Built by x_rideWaveHtml in
   js/exercise.js, so the exposure pause screen, an activity and the urge
   surfing tool all mount the same card.
   ═══════════════════════════════════════════════════════════════════════════ */

.rideWave {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 20px;
  padding: 20px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #EDEAF8;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(30, 20, 80, 0.05);
  text-align: left;
}

.rideWaveHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rideWaveTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bia-fg);
}

.rideWaveBody {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bia-muted);
}

/* Height comes from the viewBox aspect, so the curve keeps its proportions and the dot
   stays round at every width. Capped so a wide card does not turn the chart into a
   billboard the buttons have to be scrolled past. */
.rideWaveChart svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
}

.rideWaveGrid line {
  stroke: #EFE9FA;
  stroke-width: 1;
}

.rideWaveCalm {
  stroke: #D9D2F2;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.rideWaveArea {
  fill: var(--bia-accent);
  opacity: 0.09;
}

.rideWaveLine {
  fill: none;
  stroke: var(--bia-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rideWaveHalo {
  fill: var(--bia-accent);
  opacity: 0.16;
}

.rideWaveDot {
  fill: #ffffff;
  stroke: var(--bia-accent);
  stroke-width: 3;
}

.rideWaveFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.rideWaveTimer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--x-row-sel-bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--bia-focus);
}

.rideWaveTimerDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bia-accent);
  flex: none;
}

/* The way back in. Hidden until the break is over, so the screen asks for the
   whole wave first and only then offers the door: the point of the pause is
   staying long enough to watch the curve come down. */
.rideWaveCta {
  display: none;
  flex: 1 1 auto;
  min-height: 48px;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: var(--bia-accent);
  color: var(--bia-on-accent);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.rideWave.done .rideWaveCta {
  display: inline-block;
}

.rideWaveCta:hover {
  filter: brightness(1.06);
}

.rideWaveCta:active {
  transform: scale(0.985);
}

.rideWaveAdd {
  min-height: 44px;
  padding: 11px 16px;
  border: 1.5px solid #DCD6F2;
  border-radius: 11px;
  background: #ffffff;
  color: var(--bia-link);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.rideWaveAdd:hover {
  border-color: var(--bia-accent);
  background: var(--x-row-hover-bg);
}

.rideWaveAdd:active {
  transform: scale(0.985);
}

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

/* On a narrow screen the card takes the full width of the content box and the
   two controls stack, so neither ends up a half-width target. */
@media (max-width: 480px) {
  .rideWave {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .rideWaveFoot {
    flex-direction: column;
    align-items: stretch;
  }
  .rideWaveTimer {
    justify-content: center;
  }
  .rideWaveAdd,
  .rideWave.done .rideWaveCta {
    display: block;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rideWaveCta,
  .rideWaveAdd {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THERAPY TOOLBOX
   Every tool used to draw its own screen: a centred <h2>, a paragraph, a
   reflowed row of pills and a button, with the sense of progress carried only
   by the page background quietly sliding from mint to lavender. Seven tools,
   seven layouts, and nothing to tell you how far through one you were.

   They share one shell now. The card names the tool, shows its steps as a
   segmented bar, states the one instruction for this step, holds the body, and
   ends with back / skip. The mint-to-lavender shift survives, moved off the
   page and onto the card where it reads as this tool's progress rather than as
   the room changing colour.

   Built by x_toolShell in js/exercise.js. The per-tool blocks below only add
   what is theirs: a body map, a breath circle, a mantra rail.
   ═══════════════════════════════════════════════════════════════════════════ */

.xTool {
  --x-tool-bg: #E9E6FF;
  --x-tool-edge: #D6CEF7;
  --x-tool-dot: var(--bia-accent);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 16px;
  padding: 22px;
  background: var(--x-tool-bg);
  border: 1px solid var(--x-tool-edge);
  border-radius: 24px;
  text-align: left;
  transition: background 600ms ease, border-color 600ms ease;
}

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

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

/* A control that belongs to the whole tool rather than to the step on screen
   sits at the end of the title row, out of the way of the way on. */
.xToolHeadAside {
  margin-left: auto;
  flex: none;
}

.xToolDot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--x-tool-dot);
  transition: background 500ms ease;
}

.xTool .xToolTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bia-fg);
  text-align: left;
}

/* The steps. A segment per screen the tool will ask for, filled as each one is
   left behind, so "how much of this is left" is answerable before starting. The
   fill is the same colour as the head dot, which is itself walking from mint to
   lavender, so the bar and the card agree at every step. */
.xToolSteps {
  display: flex;
  gap: 6px;
  width: 100%;
}

.xToolStep {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(120, 110, 180, 0.18);
  transition: background 500ms ease;
}

.xToolStep.done {
  background: var(--x-tool-dot);
}

.xTool .xToolInstruction {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4A4860;
  text-align: center;
}

.xToolBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

/* The body's own text sits inside a card that is already centred and padded, so
   the wide margins these elements carry elsewhere are dropped here. */
.xToolBody p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4A4860;
  text-align: center;
}

.xToolBody h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bia-fg);
  text-align: center;
}

.xToolBody .stackedOptions {
  margin: 0 auto;
}

/* One action per step, full width: the tools are a sequence and the way on is
   never in competition with anything else on the card. */
.xTool .xToolCta {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 15px 20px;
  border: none;
  border-radius: 14px;
  background: var(--bia-accent);
  color: var(--bia-on-accent);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.xTool .xToolCta:hover {
  filter: brightness(1.06);
}

.xTool .xToolCta:active {
  transform: scale(0.99);
}

/* Waiting on the step's own work: the practice is the point, and a button that
   is still there but plainly not ready says so without removing itself and
   moving everything underneath it. */
.xTool .xToolCta[aria-disabled="true"],
.xTool .xToolCta[aria-disabled="true"]:hover {
  background: #E1DCF5;
  color: #5C5878;
  filter: none;
  cursor: default;
}

.xTool .xToolSecondary {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px 18px;
  border: 1.5px solid #DCD6F2;
  border-radius: 12px;
  background: #ffffff;
  color: var(--bia-link);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.xTool .xToolSecondary:hover {
  border-color: var(--bia-accent);
  background: var(--x-row-hover-bg);
}

/* Back and skip are the two ways out of a step and they sit together, at the
   bottom, in the same place on every tool. Skip used to be a floated link that
   x_showTool bolted on underneath whatever the tool had drawn, so its position
   moved with the content above it. */
.xToolNav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.xToolNavSpacer {
  flex: 1;
}

.xTool .xToolBack,
.xTool .xToolSkip {
  min-height: 44px;
  padding: 10px 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease;
}

.xTool .xToolBack {
  color: var(--bia-muted);
}

.xTool .xToolBack:hover {
  color: var(--bia-fg);
}

.xTool .xToolSkip {
  color: var(--bia-link);
}

.xTool .xToolSkip:hover {
  color: var(--bia-focus);
}

.xTool .xToolCta:focus-visible,
.xTool .xToolSecondary:focus-visible,
.xTool .xToolBack:focus-visible,
.xTool .xToolSkip:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .xTool {
    padding: 18px 15px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xTool,
  .xToolDot,
  .xToolStep,
  .xTool .xToolCta,
  .xTool .xToolSecondary,
  .xTool .xToolBack,
  .xTool .xToolSkip {
    transition: none;
  }
}

/* ── The white panel a tool works inside ──────────────────────────────────
   The card is tinted, so anything that has to be read against a field of its
   own (a prompt, a mantra, a list of sensations) gets this. ── */
.xToolPanel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #ECE7F8;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(76, 60, 180, 0.06);
  text-align: left;
}

.xToolEyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bia-link);
}

.xToolCount {
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: var(--bia-link);
}

/* ── Menu tiles ───────────────────────────────────────────────────────────
   A tile said only the tool's name, which for "Engage" or "Grounding" is not
   enough to choose by when the reason you are here is that you are struggling.
   The subtitle says what the tool does, so the list can be read rather than
   remembered. ── */
.exposureToolText {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.exposureToolText .exposureToolLabel {
  display: block;
  font-weight: 600;
  line-height: 1.2;
}

.exposureToolSub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--bia-muted);
}

.toolboxIntro {
  max-width: 560px;
  margin: 0 auto 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bia-muted);
  text-align: center;
}

/* ═══ Body check-in ════════════════════════════════════════════════════════
   Was three lists of words: where, what, and a line to agree with. A list of
   body parts is a vocabulary test; finding the feeling on a picture of yourself
   is the skill the tool is actually teaching. The figure is walked one area at
   a time so it stays a guided practice rather than a diagram to poke at, and
   every area is also a labelled control so it works without the picture. ═══ */

.xBodyStage {
  position: relative;
  width: 176px;
  height: 330px;
  align-self: center;
}

.xBodyFigure {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.xBodyFill {
  fill: #EFEAFA;
  stroke: #D6CCEF;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The area under discussion, lit from underneath. It slides between areas
   rather than cutting, which is what makes the tool feel like it is walking you
   somewhere instead of redrawing. */
.xBodyGlow {
  position: absolute;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(108, 95, 192, 0.32) 0%, rgba(108, 95, 192, 0.11) 48%, transparent 70%);
  transition: left 500ms ease, top 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.xBodySpot {
  position: absolute;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* The target is 32px so it can be hit; the mark inside it is small so the
   figure is not covered in dots. */
.xBodySpot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 2px rgba(108, 95, 192, 0.6), 0 1px 2px rgba(76, 60, 180, 0.2);
  transition: width 180ms ease, height 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

/* Noted and current are different sizes as well as different fills, so the
   figure still reads as a record of where you have been in a screenshot, in
   forced colours, and to anyone who cannot separate the two purples. */
.xBodySpot.noted::before {
  width: 14px;
  height: 14px;
  background: var(--bia-accent);
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgba(76, 60, 180, 0.4);
}

.xBodySpot.current::before {
  width: 18px;
  height: 18px;
  background: var(--bia-accent);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(108, 95, 192, 0.22), 0 1px 4px rgba(76, 60, 180, 0.4);
}

.xBodySpot:focus-visible {
  outline: 3px solid var(--bia-focus);
  outline-offset: 0;
  border-radius: 50%;
}

/* The card centres its own prose, but a panel is a thing being filled in and
   its heading belongs over the left edge of what it labels. */
.xToolBody .xBodyPanelName,
.xToolBody .xBodyPanelHint {
  text-align: left;
}

.xBodyPanelName {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bia-fg);
}

.xBodyPanelHint {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--bia-muted);
}

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

/* Sensations are short words and there are five of them, so here the pill is
   right where the stacked row is right elsewhere: they read as a palette to
   pick from, and a column of five two-word rows would be a page of its own. */
.xBodyChip {
  min-height: 40px;
  padding: 10px 15px;
  border: 1.5px solid #DFD9F0;
  border-radius: 999px;
  background: #ffffff;
  color: #4A4860;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

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

.xBodyChip[aria-pressed="true"],
.xBodyChip[aria-pressed="true"]:hover {
  background: var(--bia-accent);
  border-color: var(--bia-accent);
  color: var(--bia-on-accent);
}

/* aria-pressed is the only thing separating a chosen chip from an unchosen one
   once forced colours has thrown the fill away. */
@media (forced-colors: active) {
  .xBodyChip[aria-pressed="true"] {
    border: 3px solid CanvasText;
  }
  .xBodySpot.noted::before,
  .xBodySpot.current::before {
    background: CanvasText;
  }
}

.xBodyNote {
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 11px 14px;
  border: 1.5px solid #E1DBF3;
  border-radius: 13px;
  background: #FBFAFF;
  color: var(--bia-fg);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
}

.xBodyNote:focus {
  outline: none;
  border-color: var(--bia-accent);
  box-shadow: 0 0 0 3px rgba(108, 95, 192, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .xBodyGlow,
  .xBodySpot::before,
  .xBodyChip {
    transition: none;
  }
}

/* ═══ Urge surfing ═════════════════════════════════════════════════════════
   Almost nothing here is its own. The sentence sits in the shared white panel,
   the things to pick are the body check-in's chips, the wave is the pause
   screen's break card and the two ratings are the product's own scale. What is
   left is the one line the urge gets written on and the three numbers at the
   end. ═══ */

/* The question sits over the list it asks, on the left edge of it, the way every
   other panel heading in the tools does. */
.xToolBody .xUrgeSentence {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bia-fg);
  text-align: left;
}

/* The list is the shared stacked rows. A written-in one keeps the row and puts
   the way to remove it beside the row rather than inside it, so the row is still
   a checkbox and the delete is still its own target. */
.xToolBody .xUrgeList {
  margin: 0;
  max-width: none;
}

.xUrgeRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.xUrgeDelete {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.xUrgeDelete:hover {
  background: var(--x-row-hover-bg);
}

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

.xUrgeDelete img {
  width: 14px;
  height: 14px;
}

.xUrgeAddRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xToolBody .xUrgeCustomInput {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border: 1.5px solid #E1DBF3;
  border-radius: 13px;
  background: #FBFAFF;
  color: var(--bia-fg);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.xToolBody .xUrgeCustomInput:focus {
  outline: none;
  border-color: var(--bia-accent);
  box-shadow: 0 0 0 3px rgba(108, 95, 192, 0.15);
}

.xUrgeAdd {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid #E1DBF3;
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
}

.xUrgeAdd:hover {
  border-color: var(--bia-accent);
  background: var(--x-row-hover-bg);
}

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

.xUrgeAdd img {
  width: 18px;
  height: 18px;
}

/* The break card carries its own outer margin for the pause screen, where it is
   the only thing on the page. Inside the tool the card is one item in a gap-ed
   column, so the margin would double the space above and below it. */
.xToolBody .rideWave {
  margin: 0;
}

.xUrgeGuidance {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4A4860;
}

/* Three numbers, evenly weighted. The change is not coloured: which way it went
   is carried by the sign in front of it, which survives a screenshot, a
   colour-blind reader and forced colours alike. */
.xUrgeStats {
  display: flex;
  gap: 10px;
}

.xUrgeStat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 6px;
  background: #ffffff;
  border: 1px solid #ECE7F8;
  border-radius: 16px;
}

.xUrgeStatNum {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--bia-fg);
}

.xUrgeStatLbl {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bia-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .xUrgeDelete,
  .xUrgeAdd {
    transition: none;
  }
}

/* ═══ Breathing ════════════════════════════════════════════════════════════
   The circle was already the tool. What was missing was the pairing: the phrase
   sat still underneath while the circle moved, so which half of it belonged to
   the in-breath was something you worked out rather than something you were
   shown. Both halves are on the same clock as the circle now, one the person
   sets from the pace control in the corner of the card, and the round
   count says how much of the practice is left. ═══ */

.xBreathStage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 210px;
  align-self: center;
}

.xBreathHalo,
.xBreathCircle {
  border-radius: 50%;
}

/* Both of these scale for nine seconds at a time inside a card whose own
   background is being transitioned between rounds. will-change puts each of them
   on its own layer up front, so the breath is composited: without it the circle
   is re-rasterised against the card on every frame, blurred drop shadow and all,
   and the pacing the whole tool depends on visibly stutters. */
.xBreathHalo {
  position: absolute;
  width: 190px;
  height: 190px;
  background: var(--bia-accent);
  opacity: 0.2;
  animation: xBreatheHalo var(--x-breath-cycle, 9s) ease-in-out infinite;
  will-change: transform, opacity;
}

/* No drop shadow. A 26px blur on the one element that scales for nine seconds
   at a time is the most expensive thing in this animation, and the halo sitting
   32px proud of the circle was already covering nearly all of it: what it cost
   in smoothness it was not paying back in depth. */
.xBreathCircle {
  position: relative;
  width: 158px;
  height: 158px;
  background: linear-gradient(145deg, #7d70d0, #6c5fc0);
  animation: xBreathe var(--x-breath-cycle, 9s) ease-in-out infinite;
  will-change: transform;
}

@keyframes xBreathe {
  0%, 100% { transform: scale(0.62); }
  45%, 55% { transform: scale(1); }
}

@keyframes xBreatheHalo {
  0%, 100% { transform: scale(0.6); opacity: 0.1; }
  50% { transform: scale(1.05); opacity: 0.26; }
}

@keyframes xBreatheIn {
  0% { opacity: 0.3; }
  12%, 44% { opacity: 1; }
  56%, 100% { opacity: 0.3; }
}

@keyframes xBreatheOut {
  0%, 44% { opacity: 0.3; }
  56%, 92% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* The pace control. Two presses and the length of a breath between them, small
   and quiet in the corner: it is there for the person who needs it and it is not
   competing with the circle. Both buttons keep their place at the ends of the
   range and go flat instead of vanishing, so the range is legible from the
   control itself. */
.xBreathPace {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.xBreathPaceBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bia-link);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.xBreathPaceBtn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.xBreathPaceBtn:hover {
  background: #ffffff;
  color: var(--bia-accent);
}

.xBreathPaceBtn[aria-disabled="true"],
.xBreathPaceBtn[aria-disabled="true"]:hover {
  background: transparent;
  color: #B4AECD;
  cursor: default;
}

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

.xBreathPaceValue {
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bia-fg);
}

@media (prefers-reduced-motion: reduce) {
  .xBreathPaceBtn {
    transition: none;
  }
}

.xBreathPhrase {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.xBreathWord {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bia-accent);
}

.xBreathCue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.xBreathCueDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C7C1DE;
}

.xBreathIn,
.xBreathOut {
  animation-duration: var(--x-breath-cycle, 9s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.xBreathIn { animation-name: xBreatheIn; }
.xBreathOut { animation-name: xBreatheOut; }

.xBreathCue .xBreathIn { color: var(--bia-accent); }
.xBreathCue .xBreathOut { color: var(--bia-muted); }

/* Reduced motion, either from the OS or from the in-app setting. Nothing
   scales, pulses or fades; the same 1s tick that counts the rounds flips a
   class instead, so the tool still tells you which half of the breath you are
   on. It has to keep working: the pacing IS the tool, and a still circle with
   two equally lit words paces nothing. */
.xBreathStage.xBreathStill .xBreathHalo,
.xBreathStage.xBreathStill .xBreathCircle {
  animation: none;
  will-change: auto;
}

.xBreathStill .xBreathCircle {
  transform: scale(0.62);
  transition: transform var(--x-breath-still, 3800ms) ease-in-out;
}

.xBreathStill.xBreathPhaseIn .xBreathCircle {
  transform: scale(1);
}

.xBreathStill .xBreathHalo {
  opacity: 0.12;
}

.xToolBody.xBreathStillBody .xBreathIn,
.xToolBody.xBreathStillBody .xBreathOut {
  animation: none;
  opacity: 0.3;
  transition: opacity 300ms ease;
}

.xToolBody.xBreathStillBody.xBreathPhaseIn .xBreathIn,
.xToolBody.xBreathStillBody.xBreathPhaseOut .xBreathOut {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .xBreathHalo,
  .xBreathCircle,
  .xBreathIn,
  .xBreathOut {
    animation: none;
    will-change: auto;
  }
  .xBreathCircle {
    transform: scale(0.62);
    transition: none;
  }
  .xBreathPhaseIn .xBreathCircle {
    transform: scale(1);
  }
  .xBreathIn,
  .xBreathOut {
    opacity: 0.3;
    transition: none;
  }
  .xBreathPhaseIn .xBreathIn,
  .xBreathPhaseOut .xBreathOut {
    opacity: 1;
  }
}

/* ═══ Mantra ═══════════════════════════════════════════════════════════════
   Four stages, and each one is now practised rather than passed: the card is
   tapped once per repetition and the way on unlocks when the repetitions are
   done. Before this, "say it silently three times" and "press continue" were
   the same gesture, so the tool could be finished without being used. ═══ */

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

.xMantraStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.xMantraStageDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E7E2F6;
  color: #4F4C60;
  font-size: 12px;
  font-weight: 700;
}

.xMantraStage.current .xMantraStageDot {
  background: var(--bia-accent);
  color: var(--bia-on-accent);
}

.xMantraStage.done .xMantraStageDot {
  background: var(--bia-teal);
  color: #ffffff;
}

.xMantraStageName {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--bia-muted);
  text-align: center;
}

.xMantraStage.current .xMantraStageName {
  font-weight: 600;
  color: var(--bia-fg);
}

.xMantraCard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 32px 22px;
  border: 1px solid #EBE6F8;
  border-radius: 24px;
  /* Near white rather than the design's mint-to-lavender wash. The shell behind
     it is already making that walk, and a card tinted the same way as the card it
     sits on disappears into it at the start of the tool. */
  background: linear-gradient(150deg, #ffffff, #F7F5FF);
  box-shadow: 0 2px 10px rgba(76, 60, 180, 0.06);
  font-family: inherit;
}

.xMantraVerb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bia-teal);
}

.xMantraWords {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bia-fg);
  text-align: center;
}

.xMantraReps {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.xMantraRep {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #DED8F0;
  transition: background 200ms ease;
}

.xMantraRep.done {
  background: var(--bia-teal);
}

@media (forced-colors: active) {
  .xMantraRep.done,
  .xMantraStage.done .xMantraStageDot,
  .xMantraStage.current .xMantraStageDot {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xMantraRep {
    transition: none;
  }
}

/* ═══ Grounding ════════════════════════════════════════════════════════════
   Five senses, five counts, all five on screen. The tool used to show one
   prompt at a time with no sense of the shape of the exercise, which is the one
   thing 5-4-3-2-1 has going for it: you can feel yourself counting down. Done
   senses stay visible and ticked, the one being worked is open, and the rest
   wait in front of you. ═══ */

.xGroundList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xGroundRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.xGroundNum {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #EDEAF8;
  color: #4F4C60;
  font-size: 14px;
  font-weight: 700;
}

.xGroundName {
  flex: 1;
  font-size: 14px;
  line-height: 1.3;
  color: var(--bia-muted);
}

.xGroundRow.done .xGroundNum {
  background: var(--bia-teal);
  color: #ffffff;
}

.xGroundRow.done .xGroundName {
  color: #4A4860;
}

.xGroundTick {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--bia-teal);
}

/* The sense being worked lifts out of the list onto white, so the difference
   between "doing this one" and "these are coming" is not carried by opacity. */
.xGroundRow.current {
  display: block;
  padding: 15px;
  background: #ffffff;
  border: 1.5px solid var(--bia-accent);
  box-shadow: 0 4px 14px rgba(76, 60, 180, 0.12);
  border-radius: 16px;
}

.xGroundCurrentHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.xGroundRow.current .xGroundNum {
  background: var(--bia-accent);
  color: var(--bia-on-accent);
}

.xGroundRow.current .xGroundName {
  font-size: 16px;
  font-weight: 700;
  color: var(--bia-fg);
}

.xGroundItems {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xGroundItem {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The confirm row and its optional note are siblings, never nested: a row that
   wrapped a text field would be a control containing a control, which the
   data-action framework correctly refuses to make a button. */
.xGroundConfirm {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--x-row-border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--bia-fg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.xGroundConfirm:hover {
  border-color: var(--x-row-hover-border);
  background: var(--x-row-hover-bg);
}

/* The countdown, on the row. Five lines that all read "Something I can see" tell
   you nothing about how far through five you are, so each one is numbered and
   the numerals line up under each other. */
.xGroundItemNum {
  flex: none;
  width: 16px;
  margin-right: -5px;   /* the row's gap belongs between the pair, not inside it */
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--bia-muted);
}

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

.xGroundConfirm[aria-checked="true"] .xGroundItemNum {
  color: var(--bia-accent);
}

.xGroundConfirmBox {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--x-row-mark);
  border-radius: 8px;
  background: #ffffff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.xGroundConfirm[aria-checked="true"] {
  border-color: var(--bia-accent);
  background: var(--x-row-sel-bg);
}

.xGroundConfirm[aria-checked="true"] .xGroundConfirmBox {
  border-color: var(--bia-accent);
  background: var(--bia-accent);
}

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

/* An author rule that sets display outranks the user agent's
   [hidden] { display: none }, and this wrapper is a flex item, so the guard is
   spelled out rather than left to the browser. */
.xGroundNoteWrap[hidden] {
  display: none;
}

.xGroundNote {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1.5px solid #E1DBF3;
  border-radius: 12px;
  background: #FBFAFF;
  color: var(--bia-fg);
  font-family: inherit;
  font-size: 14px;
}

.xGroundNote:focus {
  outline: none;
  border-color: var(--bia-accent);
  box-shadow: 0 0 0 3px rgba(108, 95, 192, 0.15);
}

@media (forced-colors: active) {
  .xGroundConfirm[aria-checked="true"] {
    border: 3px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xGroundConfirm {
    transition: none;
  }
}

/* ═══ Invite discomfort ════════════════════════════════════════════════════
   Anxiety gets one card and one voice, in the accent, so the thing being
   answered back to is unmistakably not you. What you say back is a list of
   stacked rows, which is what every other list of things to pick in an exposure
   already is. ═══ */

.xInviteSays {
  box-sizing: border-box;
  padding: 30px 22px;
  border-radius: 22px;
  background: linear-gradient(150deg, #7d70d0, #5b4fb8);
  box-shadow: 0 12px 30px rgba(76, 60, 180, 0.28);
  text-align: center;
}

.xInviteSaysLabel {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}

.xInviteSaysText {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

/* ═══ Engage ═══════════════════════════════════════════════════════════════
   One question, on its own, big enough to be the thing on the screen. ═══ */

.xEngagePrompt {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bia-fg);
  text-align: center;
}

.xEngageInput {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  padding: 13px 15px;
  border: 1.5px solid #E1DBF3;
  border-radius: 14px;
  background: #ffffff;
  color: var(--bia-fg);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.xEngageInput:focus {
  outline: none;
  border-color: var(--bia-accent);
  box-shadow: 0 0 0 3px rgba(108, 95, 192, 0.15);
}

/* ── Defined terms inside a lesson ────────────────────────────────────────
   A term the lesson has declared in its glossaryTerms list. Marked with a dotted
   underline rather than a link colour, because it does not navigate: it opens the
   definition over the lesson so the reader keeps their place. c_registerDataActions
   gives the span button semantics and Enter/Space; the styling here only has to make
   it look tappable and keep the focus ring visible. */
.lessonTerm {
  color: var(--bia-link);
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  /* Never split a term across lines: half a dotted phrase reads as a typo. */
  white-space: nowrap;
}

/* A long term is allowed to wrap rather than push the paragraph sideways. */
@media (max-width: 480px) {
  .lessonTerm { white-space: normal; }
}

.lessonTerm:hover {
  color: var(--bia-accent);
}

.glossaryTermOverlay {
  /* The shared .overlay handles the backdrop and the z-index; this only positions the
     card and gives it room to breathe on a small screen. */
  padding: 16px;
}

.glossaryTermCard {
  position: relative;
  max-width: 420px;
  margin: 18vh auto 0;
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 22px 24px;
  text-align: left;
  cursor: auto;
  box-shadow: 0 18px 44px rgba(38, 30, 82, 0.28);
}

.glossaryTermClose {
  position: absolute;
  top: 10px;
  right: 10px;
  /* 44px: the card is opened by a tap inside running prose, so the way out has to be at
     least as easy to hit as the way in. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--bia-muted);
  cursor: pointer;
  border-radius: 50%;
}

.glossaryTermClose:hover {
  color: var(--bia-fg);
  background: #f3f1fb;
}

.glossaryTermLabel {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--bia-accent);
  margin-bottom: 6px;
  /* Room for the close control, so a long label never runs under it. */
  padding-right: 40px;
}

.glossaryTermTitle {
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bia-fg);
  margin: 0 0 10px;
  padding-right: 40px;
}

.glossaryTermBody {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bia-muted);
}

@media (max-width: 560px) {
  .glossaryTermCard {
    margin-top: 12vh;
    padding: 20px 18px 22px;
  }
}