/* v38: compact chapter surface. One real guide docks in a stable empty slot.
 * Reserved text rows assume a title up to 30 and description up to 100 characters.
 */
.bxm-guide-chapter,
.bxm-guide-chapter *,
.bxm-guide-chapter *::before,
.bxm-guide-chapter *::after { box-sizing: border-box; }

.bxm-guide-chapter {
  --chapter-surface: #fffdf1;
  --chapter-line: #e8e2c8;
  --chapter-ink: #25313d;
  --chapter-muted: #59656d;
  --chapter-slot: 96px;
  display: grid;
  grid-template-columns: var(--chapter-slot) minmax(0, 1fr) 320px;
  grid-template-areas: "slot heading footer" "slot message footer";
  column-gap: clamp(20px, 2.1vw, 38px);
  row-gap: 6px;
  align-content: center;
  width: 100%;
  min-width: 0;
  min-height: 132px;
  margin: 0 0 clamp(28px, 2.5vw, 42px);
  padding: 14px clamp(22px, 2.2vw, 40px);
  border: 1px solid var(--chapter-line);
  border-radius: 20px;
  background: var(--chapter-surface);
  color: var(--chapter-ink);
  font-family: "Open Sans", Arial, sans-serif;
  text-align: left;
  box-shadow: none;
  overflow: visible;
}

.bxm-admin-demo__inner > .bxm-guide-chapter { margin-bottom: 18px; }
#bxm-admin-demo-panel { scroll-margin-top: 24px; }
.bxm-guide-chapter__slot {
  grid-area: slot;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--chapter-slot);
  height: var(--chapter-slot);
  min-width: var(--chapter-slot);
  pointer-events: none;
}
.bxm-guide-chapter__marker { display: grid; gap: 8px; min-width: 78px; opacity: .78; }
.bxm-guide-chapter__signature { color: #697579; font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
.bxm-guide-chapter__step { position: relative; display: flex; align-items: center; gap: 10px; color: #5c686c; font-size: 13px; line-height: 1.35; }
.bxm-guide-chapter__step i { position: relative; display: block; width: 6px; height: 6px; flex: 0 0 6px; border: 1px solid #8f9996; border-radius: 50%; background: var(--chapter-surface); }
.bxm-guide-chapter__step:not(:last-child) i::after { content: ""; position: absolute; width: 1px; height: 17px; top: 6px; left: 1.5px; background: #c8cbbd; }
.bxm-guide-chapter[data-active="true"] .bxm-guide-chapter__marker { opacity: 0; visibility: hidden; }

.bxm-guide-chapter__heading { grid-area: heading; align-self: end; min-width: 0; min-height: 58px; margin: 0; }
.bxm-guide-chapter p.bxm-guide-chapter__label { max-width: none; margin: 0 0 4px; padding: 0; color: #60707a; font-size: 12px; font-weight: 600; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.bxm-guide-chapter h3.bxm-guide-chapter__title { max-width: none; margin: 0; padding: 0; color: var(--chapter-ink); font-size: clamp(24px, 1.55vw, 30px); font-weight: 300; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: break-word; }
.bxm-guide-chapter p.bxm-guide-chapter__message { grid-area: message; align-self: start; max-width: 78ch; min-height: 1.5em; margin: 0; padding: 0; color: var(--chapter-muted); font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.bxm-guide-chapter__footer { grid-area: footer; align-self: center; min-width: 0; margin: 0; }
.bxm-guide-chapter__actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 8px; }

/* Use the same pill and two-arrow circle as the homepage hero, scoped smaller. */
.bxm-guide-chapter a.bxm-action.bxm-guide-chapter__primary {
  grid-column: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 5px 6px 5px 16px;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  background: #2769d1;
  box-shadow: none;
  font: 600 15px/1.35 "Open Sans", Arial, sans-serif;
  text-decoration: none !important;
  touch-action: manipulation;
}
.bxm-guide-chapter__primary > [data-guide-label] { min-width: 0; overflow-wrap: break-word; }
.bxm-guide-chapter__primary .bxm-action__arrow { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; color: #fff; background: #ffffff26; }
.bxm-guide-chapter__primary .bxm-action__arrow svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.bxm-guide-chapter__primary .bxm-action__arrow svg:last-child { transform: translateX(-165%); }
.bxm-guide-chapter a.bxm-action.bxm-guide-chapter__primary:is(:hover, :focus-visible) { background: #1c55b2; color: #fff !important; }
.bxm-guide-chapter__primary:is(:hover, :focus-visible) .bxm-action__arrow { background: #fff; color: #1c55b2; }
.bxm-guide-chapter__primary:is(:hover, :focus-visible) .bxm-action__arrow svg:first-child { transform: translateX(165%); }
.bxm-guide-chapter__primary:is(:hover, :focus-visible) .bxm-action__arrow svg:last-child { transform: none; }

.bxm-guide-chapter button.bxm-guide-chapter__control { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid #d9d6c4; border-radius: 50%; background: transparent; color: #465d6c; box-shadow: none; font: inherit; cursor: pointer; touch-action: manipulation; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.bxm-guide-chapter button.bxm-guide-chapter__next { justify-self: end; }
.bxm-guide-chapter button.bxm-guide-chapter__dismiss { justify-self: start; }
.bxm-guide-chapter__control svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.bxm-guide-chapter button.bxm-guide-chapter__control:is(:hover, :focus-visible) { border-color: #2769d1; color: #2769d1; background: #fff; }
.bxm-guide-chapter button.bxm-guide-chapter__control:disabled { border-color: #dfddce; color: #9a9f96; opacity: .65; cursor: default; }
.bxm-guide-chapter :is(a, button):focus-visible { outline: 2px solid #2769d1; outline-offset: 4px; }
.bxm-guide-chapter__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1100px) {
  .bxm-guide-chapter { --chapter-slot: 96px; grid-template-columns: var(--chapter-slot) minmax(0, 1fr) 300px; column-gap: 20px; min-height: 132px; padding: 14px 22px; }
  .bxm-guide-chapter__heading { min-height: 52px; }
  .bxm-guide-chapter h3.bxm-guide-chapter__title { font-size: 24px; }
  .bxm-guide-chapter p.bxm-guide-chapter__message { font-size: 16px; }
}

@media (max-width: 900px) {
  .bxm-guide-chapter { --chapter-slot: 88px; grid-template-columns: var(--chapter-slot) minmax(0, 1fr); grid-template-areas: "slot heading" "slot message" "footer footer"; column-gap: 18px; row-gap: 8px; padding: 16px 18px; }
  .bxm-guide-chapter__actions { grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 8px; }
  .bxm-guide-chapter a.bxm-action.bxm-guide-chapter__primary { grid-column: auto; min-height: 54px; }
  .bxm-guide-chapter button.bxm-guide-chapter__control { justify-self: center; }
}

@media (max-width: 600px) {
  .bxm-guide-chapter { --chapter-slot: 72px; grid-template-areas: "slot heading" "message message" "footer footer"; column-gap: 12px; row-gap: 8px; padding: 14px; border-radius: 16px; margin-bottom: 26px; }
  .bxm-guide-chapter__heading { align-self: center; min-height: 84px; }
  .bxm-guide-chapter__marker { min-width: 67px; gap: 6px; }
  .bxm-guide-chapter__signature { font-size: 11px; }
  .bxm-guide-chapter__step { gap: 8px; font-size: 12px; }
  .bxm-guide-chapter__step:not(:last-child) i::after { height: 14px; }
  .bxm-guide-chapter p.bxm-guide-chapter__label { font-size: 11px; letter-spacing: .035em; }
  .bxm-guide-chapter h3.bxm-guide-chapter__title { font-size: 22px; line-height: 1.2; }
  .bxm-guide-chapter p.bxm-guide-chapter__message { min-height: 4.5em; font-size: 16px; line-height: 1.5; }
  .bxm-guide-chapter a.bxm-action.bxm-guide-chapter__primary { gap: 8px; padding: 6px 7px 6px 14px; font-size: 14px; }
  .bxm-guide-chapter__primary .bxm-action__arrow { width: 30px; height: 30px; flex-basis: 30px; }
}

/* Short titles and descriptions still reserve their longest supported layout. */
@media (max-width: 360px) {
  .bxm-guide-chapter__heading { min-height: 120px; }
  .bxm-guide-chapter p.bxm-guide-chapter__message { min-height: 6em; }
  .bxm-guide-chapter a.bxm-action.bxm-guide-chapter__primary { min-height: 64px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .bxm-guide-chapter *, .bxm-guide-chapter *::before, .bxm-guide-chapter *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}