/* Build Digital persona detail — shelf cards in the two reference columns.
 *
 * The persona detail page renders the SAME card partial the Materials and
 * Courses shelves render. Those stacks scope a handful of presentation
 * tokens and their grid to the shelf's own body class, so this file supplies
 * the tokens under the Personas body class and gives the two columns a
 * single-column stack instead of the shelf grid. It changes no card
 * internals: material and course cards keep their reviewed presentation.
 */

.bdk-client-demo--rbs {
  /* Mirrors .bdk-client-demo--materials in material-card-2d.css. */
  --bdk-radius-card-2d: 0.375rem;
  --bdk-radius-control-2d: 0.25rem;
  /* Mirrors .bdk-client-demo--materials in material-card-2e.css. */
  --bdk-material-2e-edge: 0.55rem;
  --bdk-material-2e-soft: #f3f6f5;
}

/* The reference columns are narrow next to a full shelf row: let each card
   take the column width and stack, rather than inherit the shelf grid. */
.bdk-demo__related-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

/* Both card directions size themselves for a multi-column shelf. In one
   column the reserved height only adds emptiness. */
.bdk-demo__related-cards .bdk-demo-card--material,
.bdk-demo__related-cards .bdk-demo-card.bdk-demo-card--course {
  min-height: 0;
}

/* Labels are filter controls on the shelves and plain terms here. */
.bdk-demo__related-cards .bdk-demo-card__labels span {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--bdk-color-border-warm);
  border-radius: var(--bdk-radius-control);
  color: var(--bdk-color-muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

/* The pillar mark keeps its shelf size without the filter button's affordances. */
.bdk-demo__related-cards .bdk-demo-card__pillar {
  border: 0;
  background: transparent;
  cursor: default;
}

.bdk-demo-card__via {
  margin: 0.35rem 0 0;
  color: var(--bdk-color-muted);
  font-size: 0.72rem;
}

/* The way back to the shelf this card came from. */
.bdk-demo__related-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  color: var(--bdk-color-magenta);
  font-size: 0.78rem;
  font-weight: 700;
  text-underline-offset: 0.18em;
}

@media (max-width: 47.9375rem) {
  .bdk-demo__related-cards {
    gap: 0.75rem;
  }
}

/* --- The rest of a long column, behind one disclosure -------------------- */

/* A scenario can reference many records. Three cards are served, and the
   count on the control states the whole set before anyone opens it. */
.bdk-demo__related-more {
  margin-top: 1rem;
}

.bdk-demo__related-more > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bdk-color-border-warm);
  border-radius: var(--bdk-radius-control);
  background: var(--bdk-color-white);
  color: var(--bdk-color-muted);
  font-size: 0.78rem;
  cursor: pointer;
  list-style: none;
}

.bdk-demo__related-more > summary::-webkit-details-marker {
  display: none;
}

.bdk-demo__related-more > summary:hover,
.bdk-demo__related-more > summary:focus-visible {
  border-color: var(--bdk-color-magenta);
  color: var(--bdk-color-ink);
}

.bdk-demo__related-more-cta {
  color: var(--bdk-color-magenta);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* One control, two states: the closed labels give way to the open ones. */
.bdk-demo__related-more-count--open,
.bdk-demo__related-more-cta--open,
.bdk-demo__related-more[open] .bdk-demo__related-more-count:not(.bdk-demo__related-more-count--open),
.bdk-demo__related-more[open] .bdk-demo__related-more-cta:not(.bdk-demo__related-more-cta--open) {
  display: none;
}

.bdk-demo__related-more[open] .bdk-demo__related-more-count--open,
.bdk-demo__related-more[open] .bdk-demo__related-more-cta--open {
  display: inline;
}

/* The revealed cards continue the column rather than starting a new block. */
.bdk-demo__related-more > .bdk-demo__related-cards {
  margin-top: 1rem;
}