/*
 * Design tokens shared by every component.
 *
 * Each component imports this itself. Component bundles are isolated on the
 * Webflow site (own React root, Shadow DOM), so there is no shared stylesheet
 * to rely on — importing here is what guarantees the tokens exist wherever the
 * component lands.
 */
:host,
:host {
  --batlab-color-fg: #101014;
  --batlab-color-bg: #ffffff;
  --batlab-color-muted: #6b6b76;
  --batlab-color-accent: #1a1aff;
  --batlab-color-border: #e3e3e6;

  --batlab-color-stripe: #f5f6f8;
  --batlab-color-rule: #e4e8ef;
  --batlab-color-ink: #101943;

  --batlab-space-sm: 0.5rem;
  --batlab-space-md: 1rem;
  --batlab-space-lg: 1.5rem;

  --batlab-radius: 0.5rem;

  /*
   * Body type is inherited, so the component adopts whatever the site sets.
   * UI chrome is specified as Inter in the design file — named here with a
   * fallback stack, since this library does not load fonts. The Webflow site
   * has to serve Inter for it to resolve; the stack keeps things sane if not.
   */
  --batlab-font: inherit;
  --batlab-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * The themeable colours are deliberately NOT declared here.
 *
 * A declaration on :host beats a value inherited into the host, so declaring
 * them would mean the component's own default always won and a site-set
 * property could never reach it. Their defaults live at each use site as the
 * second argument to var(), which leaves the cascade intact:
 *
 *   1. a prop on the component sets the property inline — highest priority
 *   2. the site sets it anywhere up the tree and it inherits in
 *   3. neither, and the var() fallback applies
 *
 * Brand values: #00ff98 accent, #033d8d on it (7.67:1), #101943 header.
 */

/*
 * Bat Lab Selector. Values are taken from the Figma frame "Bat Lab Hitting
 * Coach" (file 4eNmx3TCeUcUxWOoLfJqfv, node 6373:2961) through the REST API on
 * 2026-10-08; local tokens so a later design pass edits one block. Headings
 * are Acumin Pro Condensed 900. The site serves it from Adobe Fonts (kit
 * pyn4jhw) under the family name "acumin-pro-condensed", so that name comes
 * first; the fallbacks only matter off-site.
 */
.batlab-coach {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --coach-bg: #07081b;
  --coach-panel: #101943;
  --coach-recap-head: #15264b;
  --coach-recap-row: #121e3d;
  --coach-fg: #ffffff;
  --coach-muted: #d6dce6;
  --coach-accent: #00f092;
  --coach-accent-text: #00ff98;
  --coach-rule: #71ec8e;
  --coach-ink: #07081b;
  --coach-user: #033d8d;
  --coach-card: #f4f6fa;
  --coach-card-text: #2a2d34;
  --coach-score: #00a85f;
  --coach-display:
    "acumin-pro-condensed", "Acumin Pro Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;

  background: var(--coach-bg);
  color: var(--coach-fg);
  font-family: var(--batlab-font-ui);
  padding: 35px 40px 75px;
}

/* Figma sizes include padding; don't depend on the host page setting this. */
.batlab-coach,
.batlab-coach *,
.batlab-coach *::before,
.batlab-coach *::after {
  box-sizing: border-box;
}

.batlab-coach__source {
  display: none;
}

/* Zero specificity, so any class below can set its own margin. */
:where(.batlab-coach) p {
  margin: 0;
}

.batlab-coach__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Buttons */
.batlab-coach__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #081822;
  border: 0;
  padding: 16px 28px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.48px;
  cursor: pointer;
}
.batlab-coach__cta:focus-visible,
.batlab-coach__chip:focus-visible,
.batlab-coach__answer-edit:focus-visible,
.batlab-coach__recap-change:focus-visible,
.batlab-coach__ranking-move:focus-visible {
  outline: 2px solid var(--coach-accent);
  outline-offset: 2px;
}

/* A 1120px column: the badge and progress bar span it, the conversation is
   its left 970px. Coach messages are 649px wide; answers sit right. */
.batlab-coach__frame {
  max-width: 1120px;
  margin: 0 auto;
  /* Whole pixels, so card edges don't blur on an odd-width page. */
  margin-inline: max(0px, round(down, calc((100% - 1120px) / 2), 1px));
  display: flex;
  flex-direction: column;
}
.batlab-coach__thread {
  max-width: 970px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.batlab-coach__thread--asking {
  padding-bottom: 45vh;
}
.batlab-coach__thread > * {
  max-width: 649px;
}
/* The 9px rule sits outside the 649px card, as in the Figma. */
.batlab-coach__thread > .batlab-coach__question {
  max-width: 658px;
}
.batlab-coach__thread > .batlab-coach__decision,
.batlab-coach__thread > .batlab-coach__picks,
.batlab-coach__thread > .batlab-coach__empty {
  max-width: none;
}
.batlab-coach__badge {
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, var(--coach-accent) 34%, transparent);
  color: var(--coach-accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 18.6px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
  padding: 7px 14px;
}
.batlab-coach__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font-size: 11px;
  line-height: 15.9px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
}
.batlab-coach__progress-track {
  flex: 1;
  height: 9px;
  background: rgb(255 255 255 / 0.12);
  border-radius: 999px;
}
.batlab-coach__progress-fill {
  height: 100%;
  background: var(--coach-accent-text);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.batlab-coach__decision {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 85px;
}
.batlab-coach__decision--divider {
  margin-top: 20px;
  padding-top: 35px;
  border-top: 1px solid rgb(255 255 255 / 0.33);
}
.batlab-coach__decision-eyebrow {
  color: var(--coach-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 18.6px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
}
.batlab-coach__decision-title {
  margin: 0;
  font-family: var(--coach-display);
  font-size: 36px;
  font-weight: 900;
  line-height: 43.2px;
  text-transform: uppercase;
}

/* Figma: 18px above the speaker row (on top of the 15px gap after an answer),
   10px from it to the message. */
.batlab-coach__speaker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: -5px;
  color: var(--coach-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.33px;
}
/* Right under a decision title: 18px in all (3px + the 15px gap). */
.batlab-coach__decision + .batlab-coach__speaker {
  margin-top: 3px;
}
/* The intro: 18px under the progress bar, 16px above its message. */
.batlab-coach__speaker:first-child {
  margin-bottom: 1px;
}
.batlab-coach__avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  background: var(--coach-accent);
  color: var(--coach-ink);
  font-family: var(--coach-display);
  font-size: 21px;
  font-weight: 900;
}

.batlab-coach__bubble,
.batlab-coach__question {
  background: var(--coach-panel);
  padding: 20px 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}
.batlab-coach__bubble--dots {
  align-self: flex-start;
  padding: 13px 25px;
}
.batlab-coach__bubble-title {
  margin: 0 0 16px;
  font-family: var(--coach-display);
  font-size: 25px;
  font-weight: 900;
  line-height: 30px;
}
.batlab-coach__typed {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.batlab-coach__question {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 9px solid var(--coach-rule);
}
.batlab-coach__prompt {
  color: var(--coach-accent-text);
  font-family: var(--coach-display);
  font-size: 25px;
  font-weight: 900;
  line-height: 30px;
  text-transform: uppercase;
}
.batlab-coach__prompt:focus {
  outline: none;
}
.batlab-coach__instruction {
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
}
.batlab-coach__why-label {
  color: var(--coach-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}
.batlab-coach__why {
  color: var(--coach-muted);
}

/* Answer chips and the user's answers */
.batlab-coach__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.batlab-coach__chip {
  min-width: 150px;
  background: #ffffff;
  color: #081822;
  border: 2px solid transparent;
  padding: 14px 28px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.48px;
  cursor: pointer;
}
.batlab-coach__chip:hover,
.batlab-coach__chip[aria-pressed="true"] {
  border-color: var(--coach-accent);
}
.batlab-coach__answer-wrap {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  max-width: min(360px, 85%);
}
.batlab-coach__you {
  color: var(--coach-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.33px;
}
/* Figma: short answers are a fixed 150px, longer ones hug their text. */
.batlab-coach__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 150px;
  background: var(--coach-user);
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 700;
  line-height: 19.2px;
  letter-spacing: 0.48px;
}
.batlab-coach__answer-edit {
  flex: none;
  display: grid;
  place-items: center;
  /* 24px: the WCAG minimum tap target. */
  width: 24px;
  height: 24px;
  margin: -2px -8px -2px 0;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.batlab-coach__answer-edit .batlab-coach__icon {
  width: 16px;
  height: 16px;
}
.batlab-coach__answer:hover .batlab-coach__answer-edit,
.batlab-coach__answer-edit:focus-visible {
  opacity: 1;
}
/* No hover on touch screens: keep the pencil visible. */
@media (hover: none) {
  .batlab-coach__answer-edit {
    opacity: 0.8;
  }
}
.batlab-coach__ranking-summary-title {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
}
.batlab-coach__ranking-summary {
  margin: 0;
  padding-left: 1.2em;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

/* Swing weight and material art */
.batlab-coach__arts {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.batlab-coach__art-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--coach-panel);
  padding: 20px 15px;
}
.batlab-coach__art-label {
  color: var(--coach-accent-text);
  font-family: var(--coach-display);
  font-size: 25px;
  font-weight: 900;
  line-height: 30px;
  text-transform: uppercase;
}
.batlab-coach__art {
  padding: 5px 0;
}
.batlab-coach__art img,
.batlab-coach__art-svg {
  display: block;
  width: 100%;
  height: auto;
}
.batlab-coach__art-body {
  font-size: 13px;
  line-height: 23px;
}

/* Decision results */
.batlab-coach__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--coach-accent);
  color: var(--coach-ink);
  padding: 25px 28px;
}
.batlab-coach__result-eyebrow {
  color: var(--coach-panel);
  font-size: 15px;
  font-weight: 700;
  line-height: 19.2px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}
.batlab-coach__result-title {
  margin: 0;
  font-family: var(--coach-display);
  font-size: 64px;
  font-weight: 900;
  line-height: 57px;
  text-transform: uppercase;
}
.batlab-coach__result-title:focus {
  outline: none;
}
.batlab-coach__result-headline {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
}
.batlab-coach__result .batlab-coach__art {
  padding: 0;
}
.batlab-coach__result-body {
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

/* Ranking */
.batlab-coach__ranking {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--coach-panel);
  padding: 25px;
}
.batlab-coach__ranking-eyebrow {
  color: var(--coach-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 13.3px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
}
.batlab-coach__ranking-heading {
  margin-top: -5px;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
}
.batlab-coach__ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.batlab-coach__ranking-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--coach-accent);
  background: var(--coach-panel);
  padding: 10px 20px 10px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
}
/* Grip, number and label: the drag handle. */
.batlab-coach__ranking-handle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
/* Keyboard focus shows on the row itself (its border and fill), not as a
   second outline drawn inside it. */
.batlab-coach__ranking-handle:focus-visible {
  outline: none;
}
.batlab-coach__ranking-item:has(.batlab-coach__ranking-handle:focus-visible) {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
  background: var(--coach-recap-head);
}
/* The row being dragged lifts above the others while they slide. */
.batlab-coach__ranking-item--dragging {
  z-index: 1;
  background: var(--coach-recap-head);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.45);
}
.batlab-coach__ranking-item--dragging .batlab-coach__ranking-handle {
  cursor: grabbing;
}
.batlab-coach__ranking-grip {
  color: var(--coach-accent);
}
.batlab-coach__ranking-pos {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: var(--coach-accent);
  color: var(--coach-ink);
  font-size: 14px;
  font-weight: 700;
}
.batlab-coach__ranking-label {
  flex: 1;
}
.batlab-coach__ranking-move {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--coach-accent);
  cursor: pointer;
}
.batlab-coach__ranking-move:disabled {
  color: rgb(214 220 230 / 0.35);
  cursor: default;
}
.batlab-coach__ranking-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.batlab-coach__ranking-scale {
  color: var(--coach-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 12.1px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
}
/* 42px tall in the Figma: 10px padding plus a 1px stroke. */
.batlab-coach__ranking .batlab-coach__cta {
  align-self: auto;
  padding: 11px 28px;
  font-size: 14px;
}

/* Recap panel */
.batlab-coach__recap-wrap {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.batlab-coach__recap-updated:empty {
  display: none;
}
.batlab-coach__recap-updated {
  color: var(--coach-accent-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.batlab-coach__recap dl {
  margin: 0;
}
.batlab-coach__recap-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--coach-recap-head);
  padding: 25px 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.2px;
  letter-spacing: 0.98px;
  text-transform: uppercase;
}
.batlab-coach__recap-head strong {
  color: var(--coach-card);
  font-family: var(--coach-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0;
}
.batlab-coach__recap-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 25px;
  background: var(--coach-recap-row);
  padding: 25px 28px;
  border-top: 1px solid rgb(228 232 239 / 0.16);
  font-size: 14px;
  line-height: 20px;
}
.batlab-coach__recap-row:first-child {
  border-top: 0;
}
.batlab-coach__recap-row dt {
  color: var(--coach-accent);
  font-weight: 600;
}
.batlab-coach__recap-row dd {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px 35px;
  color: var(--coach-card);
  font-weight: 500;
}
.batlab-coach__recap-value ol {
  margin: 0;
  padding-left: 1.2em;
  line-height: 25px;
}
.batlab-coach__recap-change {
  align-self: start;
  min-height: 24px;
  margin-top: -2px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--coach-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  cursor: pointer;
}
.batlab-coach__recap-editor {
  grid-column: 1 / -1;
}
.batlab-coach__recap-editor .batlab-coach__chip {
  min-width: 90px;
  padding: 10px 18px;
  font-size: 14px;
}
.batlab-coach__recap-editor .batlab-coach__ranking {
  padding: 0;
  background: none;
}
.batlab-coach__cta--send {
  align-self: flex-end;
  padding: 11px 20px;
  font-size: 14px;
}

/* Recommended bats: 270 / 400 / 270 columns, gap 15, top match in the middle.
   On wide screens "Top match" sits on its own row above the middle card, and
   the side cards start lower (label 19 + gap 10), so the image/text seams of
   all three cards line up (images 264 vs 293). */
.batlab-coach__picks {
  display: grid;
  /* minmax(0, …): a long name or the score row must not widen the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  margin-top: 70px;
}
.batlab-coach__pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.batlab-coach__pick-label {
  color: var(--coach-card);
  font-family: var(--coach-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
}
.batlab-coach__pick--top .batlab-coach__pick-label {
  color: var(--coach-accent);
  font-size: 38px;
  line-height: 26px;
}
@media (min-width: 760px) {
  .batlab-coach__picks--n2,
  .batlab-coach__picks--n3 {
    padding-top: 41px;
  }
  .batlab-coach__picks--n3 {
    grid-template-columns: 27fr 40fr 27fr;
  }
  .batlab-coach__picks--n2 {
    grid-template-columns: 40fr 27fr;
  }
  .batlab-coach__picks--n3 .batlab-coach__pick--top {
    order: 2;
  }
  .batlab-coach__picks--n3 .batlab-coach__pick:last-child {
    order: 3;
  }
  .batlab-coach__pick--top {
    position: relative;
  }
  .batlab-coach__pick--top .batlab-coach__pick-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 15px;
  }
  .batlab-coach__pick .batlab-coach__card {
    flex: 1;
  }
}
.batlab-coach__card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--coach-card);
  color: var(--coach-ink);
}
.batlab-coach__card-img {
  display: flex;
  overflow: hidden;
  background: #ffffff;
  height: 264px;
  padding: 12px;
}
.batlab-coach__card--hero .batlab-coach__card-img {
  height: 293px;
}
.batlab-coach__card-img img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.batlab-coach__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  font-size: 12px;
  line-height: 17px;
}
.batlab-coach__card-name {
  margin: 0;
  font-family: var(--coach-display);
  font-size: 23px;
  font-weight: 900;
  line-height: 26px;
  text-transform: uppercase;
}
.batlab-coach__card--hero .batlab-coach__card-name {
  font-size: 38px;
  line-height: 43px;
}
.batlab-coach__card-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--coach-score);
  font-family: var(--coach-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 24px;
}
.batlab-coach__card-score strong {
  font-weight: 900;
}
.batlab-coach__card-out-of {
  opacity: 0.4;
}
.batlab-coach__card--hero .batlab-coach__card-out-of {
  opacity: 0.2;
}
.batlab-coach__card-score > span:first-child {
  white-space: nowrap;
}
.batlab-coach__card--hero .batlab-coach__card-score {
  gap: 15px;
  min-height: 44px;
  font-size: 57px;
  line-height: 42.4px;
}
/* Figma: 89×28 on the side cards, 143×44 on the top match. */
.batlab-coach__card-badge {
  display: block;
  height: 28px;
  width: auto;
}
.batlab-coach__card--hero .batlab-coach__card-badge {
  height: 44px;
}
.batlab-coach__card-medal {
  background: #f5d000;
  color: var(--coach-ink);
  font-family: var(--batlab-font-ui);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 8px;
}
.batlab-coach__card-stands {
  font-weight: 700;
}
.batlab-coach__card-stands strong {
  font-weight: 700;
}
.batlab-coach__card-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--coach-card-text);
  margin-top: -4px;
  margin-bottom: 12px;
}
/* CMS rich text: reset what the site's tag styles would otherwise bring in. */
.batlab-coach__card-highlights p,
.batlab-coach__card-highlights li {
  margin: 0;
}
.batlab-coach__card-highlights :where(ul, ol) {
  margin: 0;
  padding-left: 1.1em;
}
.batlab-coach__card-highlights a {
  color: inherit;
  text-decoration: underline;
}
.batlab-coach__card-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: auto;
}
.batlab-coach__card-buy,
.batlab-coach__card-review {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14.5px;
  text-decoration: none;
}
.batlab-coach__card-buy {
  background: var(--coach-accent);
  color: var(--coach-ink);
}
.batlab-coach__card-review {
  background: var(--coach-ink);
  color: #ffffff;
}
.batlab-coach__empty {
  color: var(--coach-muted);
}
.batlab-coach__restart {
  align-self: center;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 16px 51px;
  color: var(--coach-panel);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .batlab-coach {
    padding: 25px 16px 50px;
  }
  .batlab-coach__chip {
    min-width: 0;
    flex: 1;
  }
  .batlab-coach__result-title {
    font-size: 48px;
    line-height: 52px;
  }
  .batlab-coach__recap-head,
  .batlab-coach__recap-row {
    padding: 18px 20px;
  }
  .batlab-coach__recap-row {
    grid-template-columns: 68px 1fr;
    gap: 15px;
  }
}

/* Reveal: pop-in, fade-in, typing dots, screen-reader text. popMs (220),
   staggerMs (120), fadeMs (600) and fadeStaggerMs (300) must match TIMING in
   useReveal.ts. */
@keyframes batlab-coach-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.batlab-coach__pop {
  animation: batlab-coach-pop 220ms ease-out both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes batlab-coach-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.batlab-coach__fade {
  animation: batlab-coach-fade 600ms ease-out both;
  animation-delay: calc(var(--i, 0) * 300ms);
}
@keyframes batlab-coach-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: none;
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.batlab-coach__dots {
  display: inline-flex;
  gap: 10px;
}
.batlab-coach__dots span {
  width: 9px;
  height: 9px;
  background: #d9d9d9;
  animation: batlab-coach-dot 1s ease-in-out infinite;
}
.batlab-coach__dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.batlab-coach__dots span:nth-child(3) {
  animation-delay: 0.3s;
}
.batlab-coach__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .batlab-coach__pop,
  .batlab-coach__fade,
  .batlab-coach__dots span {
    animation: none;
  }
}