/* Shared profile, summary, form-section and media-player layouts.
   Appearance roles belong to ui.css / icons.css; no publisher page overrides. */
.sfui-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sfui-gap); min-width: 0; }
.sfui-card-grid--5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sfui-card-grid--6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
.sfui-card-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sfui-card-grid--compact { gap: var(--sfui-space-12); }
.sfui-card-grid--reviews { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sfui-review-card { overflow-wrap: anywhere; }
.sfui-avatar { --sfui-avatar-size: calc(var(--sfui-space-48) * 2); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--sfui-avatar-size); max-width: 100%; aspect-ratio: 1; overflow: hidden; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-round-radius); background: var(--sfui-soft); color: var(--sfui-text); font-size: var(--sfui-size-hero); font-weight: var(--sfui-weight-bold); }
.sfui-avatar--small { --sfui-avatar-size: var(--sfui-space-48); font-size: var(--sfui-size-subtitle); }
.sfui-avatar--large { --sfui-avatar-size: calc(var(--sfui-space-48) * 3); }
.sfui-avatar--soft { border-radius: var(--sfui-control-radius); }
.sfui-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sfui-profile-card { display: flex; flex-direction: column; align-items: center; gap: var(--sfui-space-16); text-align: center; }
.sfui-profile-card__identity { display: grid; justify-items: center; gap: var(--sfui-space-16); width: 100%; min-width: 0; }
.sfui-profile-card .sfui-card__title { font-size: var(--sfui-size-subtitle); }
.sfui-profile-card .sfui-socials { justify-content: center; margin-top: auto; }
.sfui-profile-card .sfui-tag { max-width: 100%; white-space: normal; }
.sfui-profile-card.sfui-profile-card--covered { align-items: stretch; gap: 0; padding: 0; overflow: hidden; text-align: start; }
.sfui-profile-card__cover { aspect-ratio: 3 / 1; overflow: hidden; background: var(--sfui-soft); }
.sfui-profile-card__cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sfui-profile-card__body { padding: 0 var(--sfui-card-padding) var(--sfui-card-padding); margin-top: calc(-1 * var(--sfui-space-32)); position: relative; }
.sfui-profile-card--covered .sfui-profile-card__identity { justify-items: start; }
.sfui-summary-card { display: flex; align-items: center; gap: var(--sfui-space-16); }
.sfui-summary-card--compact { --sfui-card-padding: var(--sfui-space-12); --sfui-card-title-size: var(--sfui-size-subtitle); gap: var(--sfui-space-12); }
.sfui-summary-card__copy { min-width: 0; }
.sfui-summary-card--control { flex: 1 1 0; color: var(--sfui-text); font: inherit; text-align: start; cursor: pointer; }
.sfui-summary-card--control .sfui-summary-card__copy { display: grid; gap: var(--sfui-space-4); overflow-wrap: anywhere; }
.sfui-summary-card--control:is(:hover,[aria-selected="true"],[aria-current="page"]) { border-color: var(--sfui-focus-border); }
.sfui-form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.sfui-form-section > legend { float: none; width: 100%; margin-bottom: var(--sfui-space-16); padding: 0; color: var(--sfui-text); font-size: var(--sfui-size-subtitle); font-weight: var(--sfui-weight-bold); }
.sfui-form-section > .sfui-muted { margin-bottom: var(--sfui-space-16); }
.sfui-flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sfui-space-12); min-width: 0; }
.sfui-flow--between { justify-content: space-between; }
.sfui-flow__body { flex: 1; min-width: 0; }
.sfui-player { position: relative; display: grid; grid-template-columns: minmax(0,1fr); width: 100%; max-width: 100%; min-width: 0; min-height: calc(var(--sfui-space-48) * 6); overflow: hidden; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-control); }
.sfui-player::before { content: ''; grid-area: 1 / 1; width: 100%; aspect-ratio: 16 / 9; pointer-events: none; }
.sfui-player > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sfui-player__placeholder { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sfui-space-12); min-width: 0; padding: var(--sfui-card-padding); text-align: center; }
.sfui-record-list { display: grid; gap: var(--sfui-space-16); min-width: 0; }
.sfui-record { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sfui-space-16); min-width: 0; padding-block: var(--sfui-space-16); border-bottom: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-record:first-child { padding-top: 0; }
.sfui-record:last-child { padding-bottom: 0; border-bottom: 0; }
.sfui-record__copy { flex: 1 1 240px; min-width: 0; }
.sfui-record__value { flex: 0 1 auto; }
/* Profile hero metrics reuse the catalog rating geometry and shared colour palette. */
.sfui-page-header--profile .sfui-page-header__actions { min-width: 0; max-width: none; }
.sfui-rating-summary--metric .sfui-rating-summary__stars { justify-content: center; min-width: calc(5 * var(--sfui-icon-small) + 4 * var(--sfui-space-4) + 2 * var(--sfui-space-12)); color: var(--sfui-tone-accent); background: color-mix(in srgb,var(--sfui-tone-accent) 24%,var(--sfui-primary-ink)); }
.sfui-profile-metrics { display: flex; align-items: center; gap: var(--sfui-space-32); min-width: 0; }
.sfui-profile-metrics__item { display: block; min-width: 0; border-radius: var(--sfui-control-radius); }
.sfui-profile-metrics__item[data-sfui-metric="rating"] { order: 3; }
.sfui-profile-metrics__item[data-sfui-metric="followers"] { order: 2; }
.sfui-profile-metrics__item[data-sfui-metric="following"] { order: 1; }
.sfui-profile-metrics__item:hover .sfui-rating-summary__stars { filter: brightness(1.08); }
@media (max-width: 991.98px) {
  .sfui-page-header--profile .sfui-page-header__inner { grid-template-columns: minmax(0,1fr); }
  .sfui-page-header--profile .sfui-page-header__actions { width: 100%; }
  .sfui-profile-metrics { gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .sfui-profile-metrics::-webkit-scrollbar { display: none; }
  .sfui-profile-metrics .sfui-profile-metrics__item { flex: 0 0 100%; order: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .sfui-profile-metrics.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
}
@media (max-width: 1199.98px) {
  .sfui-card-grid:not(.sfui-card-grid--2):not(.sfui-card-grid--reviews) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sfui-card-grid--reviews { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  .sfui-flow--hero { justify-content: center; }
  .sfui-card-grid:not(.sfui-card-grid--2):not(.sfui-card-grid--reviews) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sfui-card-grid--reviews { grid-template-columns: minmax(0,1fr); }
  .sfui-profile-card { padding: var(--sfui-space-12); gap: var(--sfui-space-12); }
  .sfui-profile-card__identity { gap: var(--sfui-space-12); }
  .sfui-profile-card .sfui-avatar--large { --sfui-avatar-size: calc(var(--sfui-space-48) * 2); }
}
@media (max-width: 575.98px) {
  .sfui-card-grid--2 { grid-template-columns: minmax(0,1fr); }
}

/* Shared account navigation and native media selection, also available to other forms. */
.sfui-section-nav--list { max-height: var(--sfui-scroll-list-height); overflow-y: auto; padding: var(--sfui-space-4); }
.sfui-section-nav--list .sfui-section-nav__links { display: grid; overflow: visible; margin: 0; padding: 0; }
.sfui-media-picker__options { display: grid; grid-template-columns: repeat(auto-fill,minmax(var(--sfui-space-48),1fr)); gap: var(--sfui-space-12); max-height: var(--sfui-scroll-list-height); overflow-y: auto; padding: var(--sfui-space-4); }
.sfui-media-picker--cover .sfui-media-picker__options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sfui-media-picker__option { position: relative; min-width: 0; cursor: pointer; }
.sfui-choice--media { display: block; padding: var(--sfui-space-4); overflow: hidden; }
.sfui-choice--media > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sfui-button-radius); }
.sfui-media-picker--cover .sfui-choice--media > img { aspect-ratio: var(--sfui-media-cover-ratio); }
.sfui-media-picker__option > input:checked + .sfui-choice { border-color: var(--sfui-focus-border); background: var(--sfui-soft); box-shadow: var(--sfui-focus-ring); }
.sfui-media-picker__option > input:focus-visible + .sfui-choice { outline: var(--sfui-focus-width) solid var(--sfui-frame-accent); outline-offset: var(--sfui-space-2); box-shadow: var(--sfui-focus-ring); }