/* ==========================================================================
   The carousel

   Lifted out of dashboard.css on 7 Sep 2026, for the same reason carousel.js
   was lifted out of the two dashboards: it stopped being a dashboard thing.

   The practice acquisition page needed the component and loaded the whole of
   dashboard.css to get it - a thousand lines of unrelated rules, including
   nav overrides whose own comment said "this file is loaded only by the two
   dashboards, so the override cannot reach the marketing pages". They then
   reached one: .nav__links became display:flex, the marketing bar's empty
   spacer turned into a real grid item, and the bar went from two tracks to
   three.

   A component in a page-specific stylesheet is a trap set for whoever needs
   it next. This file is the component and nothing else.

   LOAD ORDER: after dashboard.css where both are used. .carousel__track
   switches off the wrapping columns .card-grid brings with it, and .card-grid
   still lives in dashboard.css.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Carousel

   Scroll-snap does the scrolling. The arrows are a convenience for a mouse,
   which is why they are hidden until JS confirms there is somewhere to go -
   an arrow that cannot move is worse than no arrow.
   -------------------------------------------------------------------------- */
/* min-width: 0, because a carousel is a container and must never be the thing
   that decides how wide its parent is.

   As a flex or grid item it defaults to min-width: auto - "never narrower
   than my content" - and its content is a track holding every card laid end
   to end. On edit-practice that made the wrapper 969px inside a 267px field,
   so the track had room for all three cards and never scrolled: the carousel
   silently became a flat row that overflowed the page instead.

   The dashboards never hit this because their carousels sit in plain block
   containers. Anything putting one inside a grid or flex parent would. */
.carousel { position: relative; min-width: 0; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  /* A fixed track, not minmax(...,1fr). With 1fr the cards divided up the
     whole row, so a carousel holding three came out 350px wide against one
     holding five at 240 - the same card at two sizes depending only on how
     many there happened to be. */
  grid-auto-columns: min(16rem, 76vw);
  /* Tighter than the section rhythm so the wider cards still leave four in
     view. The gap between cards in a scrolling row is a seam, not a break. */
  gap: 12px;

  /* Centered when the cards fit, start-aligned when they do not.

     SAFE center, and the keyword is the whole point. Plain `center` on a
     scroll container is a well-known trap: when the content is wider than the
     track the overflow is split between both ends, and the part that spills
     off the LEFT is unreachable - there is no scrolling to before the origin.
     A row of six cards would lose the first one or two with no way to get to
     them.

     `safe` says: center while everything fits, and fall back to start the
     moment it does not. So a practice with two matches gets them centered under
     the heading, and one with eight gets a scrolling row that begins at the
     beginning. */
  justify-content: safe center;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* The beads report position now. A scrollbar under a row of cards competes
     with them and reads as a browser artifact rather than a control. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* The track lays itself out along a scrolling row, so the wrapping columns
   .card-grid brings with it have to be switched off. */
.carousel__track { grid-template-columns: none; }
@media (min-width: 1080px) {
  /* 16rem, and the peek is why.

     14 was too narrow for chips: at 224px the content box came to 196px and
     two typical chips need 198, a two-pixel miss that put every chip on its
     own row. 15 fixed that and was right until the page widened to match the
     header bar - in a 1200px track four 240px cards leave 192px showing of the
     fifth, which is four fifths of a card. That is not a hint that there is
     more, it is a card someone will try to read.

     At 16rem the same track holds four cards and exactly half of the next:
     4 x 256 + 3 x 12 = 1060, leaving 128px, and half a card is unmistakably a
     peek rather than a fifth card that has been cut off. The chips get 16px
     more room as well. */
  .carousel__track { grid-auto-columns: 16rem; }
}
/* Any direct child, not just .pcard - the track carries regulatory-status
   rows on edit-practice as well as cards here. */
.carousel__track > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   Two is a pair, three is a row

   `safe center` above answers "does it fit". On a wide desktop that produced
   an inconsistency: four cards fit and centered, five overflowed and started at
   the left, so adding one clinician moved the whole row. Same component, same
   page, two different personalities depending on a number nobody chose.

   Above 1080px the question becomes how many. One or two stays centered - a
   pair belongs under its heading. THREE OR MORE aligns left, because it is a
   row, and a row starts at its start even when it would fit centered.

   The heading follows the cards. A centered row under a left heading was the
   thing that looked wrong in the first place; whichever way they go, they go
   together.

   ONLY above 1080px. Below it the fit rule mostly produces this answer already
   - three 16rem cards need 792px, so they start overflowing on a narrow
   desktop and `safe` falls back to start unasked. Mobile is untouched,
   deliberately.
   -------------------------------------------------------------------------- */
/* NO media query. The class already knows.

   carousel.js sets .carousel--centered only when the row is few enough AND
   fits without scrolling, so these rules are correct at every width -
   including the sizes between a phone and 1080px, where the old breakpoint
   left a centered single card under a left-aligned heading. */
.carousel:not(.carousel--centered) .carousel__track { justify-content: start; }

.profile__section:has(.carousel--centered) .profile__h { text-align: center; }

/* The dashboards start from the opposite default: .dash__section-head is
   centered, because it carries a count beside the heading and the pair reads as
   one object. So there a ROW needs pushing left rather than a pair needing
   centering. Same rule underneath. */
.dash__section:has(.carousel:not(.carousel--centered)) .dash__section-head {
  justify-content: flex-start;
}

/* The heart variant does NOT follow the row. It used to - the stack was
   left-aligned whenever the cards scrolled, "or the count floats over a
   heading that has moved out from under it" - but the heart is stacked
   over the heading, so the pair moves together wherever it sits, and the
   pair is the section's title rather than a label on the row. Centered, as
   the masthead above it is (20 Sep 2026; the owner had fixed it before and
   this rule had undone it). */

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: var(--hem-radius-pill);
  border: 0;
  background: var(--hem-teal);
  color: var(--hem-on-teal);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--hem-dur-fast) ease;
}
.carousel__arrow:hover { background: var(--hem-teal-700); }
.carousel__arrow:focus-visible {
  outline: 3px solid var(--hem-teal);
  outline-offset: 2px;
}
.carousel__arrow--prev { left: calc(var(--hem-lede-sm) * -1); }
.carousel__arrow--next { right: calc(var(--hem-lede-sm) * -1); }

/* An arrow shows only when there is somewhere to go in its direction.
   carousel.js already sets [hidden] on an arrow with nothing to scroll to -
   the start arrow at the start, the end arrow at the end, both on a row that
   fits - but the display: grid above out-specified the attribute, so every
   arrow drew regardless (found 2026-10-07). This restores it everywhere the
   carousel is used. The beads take the same fix: no position dots under a
   row that does not move. */
.carousel__arrow[hidden],
.beads[hidden] { display: none; }

/* Touch devices scroll by hand; the arrows only take up room. */
@media (hover: none) {
  .carousel__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Pending badge

   Says on the card itself what state it is in, so a card lifted out of its
   section - by a screenshot, or by someone scrolling past the heading - still
   cannot be mistaken for a match.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Beads

   Position and a control at once - each bead jumps to its card, and carries
   the practice name as its label so a screen reader is told where it goes
   rather than "slide 3 of 5".
   -------------------------------------------------------------------------- */
.beads {
  list-style: none;
  margin: var(--form-gap) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--hem-space-2);
}

.bead {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--hem-radius-pill);
  background: var(--hem-teal-200);
  cursor: pointer;
  transition: background-color var(--hem-dur-fast) ease,
              width var(--hem-dur-fast) ease;
}
.bead:hover { background: var(--hem-teal-300); }

/* The current bead widens as well as darkens, so position survives being
   read by someone who cannot separate the two teals. */
.bead[aria-current="true"] {
  background: var(--hem-teal);
  width: 26px;
}

/* The bead itself is 10px, well under any sane target size, so the hit area
   is enlarged around it rather than by inflating the dot. */
.beads li { display: grid; place-items: center; min-width: 24px; min-height: 24px; }

.bead:focus-visible {
  outline: 3px solid var(--hem-teal);
  outline-offset: 3px;
}

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