/* Shared manual activity demonstrations. Keep all panel heights reserved. */
.activity-product-showcase { position: relative; }
.activity-product-showcase[data-tabs-ready] { display: grid; grid-template-columns: minmax(0, 1fr); }
.activity-product-showcase[data-tabs-ready] > h2 { grid-column: 1; grid-row: 1; }
.activity-product-showcase[data-tabs-ready] > [role="tablist"] { grid-column: 1; grid-row: 2; margin-top: 0; }
.activity-product-showcase[data-tabs-ready] > [role="tabpanel"] { grid-column: 1; grid-row: 3; align-self: start; min-height: 0; margin-top: 0; }
.activity-product-showcase[data-tabs-ready] > [role="tabpanel"][hidden] { display: grid; visibility: hidden; pointer-events: none; }
.activity-group-showcase > [role="tabpanel"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px 22px; }
.activity-group-showcase > [data-panel-kind="setup"] figure { grid-column: 1; grid-row: 1; }
.activity-group-showcase > [data-panel-kind="setup"] .activity-group-copy { grid-column: 2 / 4; grid-row: 1; }
.activity-group-showcase > :is([data-panel-kind="head-to-head"], [data-panel-kind="stats"]) figure { grid-column: 3; grid-row: 1; }
.activity-group-showcase > :is([data-panel-kind="head-to-head"], [data-panel-kind="stats"]) .activity-group-copy { grid-column: 1 / 3; grid-row: 1; }
.activity-group-showcase > [data-panel-kind="leaderboard"] figure { grid-column: 2; grid-row: 1 / 3; }
.activity-group-showcase > [data-panel-kind="leaderboard"] .activity-group-copy, .activity-group-leaderboard-points { display: contents; }
.activity-group-leaderboard-points li:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.activity-group-leaderboard-points li:nth-child(2) { grid-column: 3; grid-row: 1; }
.activity-group-leaderboard-points li:nth-child(3) { grid-column: 3; grid-row: 2; }
.activity-group-showcase .activity-group-leaderboard-points li + li { margin-top: 0; }
/* The screenshot includes its complete frame; animate that single image. */
.activity-product-showcase[data-tabs-ready] figure > img,
.activity-product-showcase[data-tabs-ready] [data-required-image] { position: relative; z-index: 1; transform-origin: top left; }
@media (max-width: 800px) {
  .activity-group-showcase > [role="tabpanel"] { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .activity-group-showcase > [role="tabpanel"] figure { order: -1; }
  .activity-group-showcase > [role="tabpanel"][data-panel-kind] figure,
  .activity-group-showcase > [role="tabpanel"][data-panel-kind] .activity-group-copy { grid-column: auto; grid-row: auto; }
  .activity-group-showcase > [data-panel-kind="leaderboard"] .activity-group-copy { display: block; }
  .activity-group-showcase .activity-group-leaderboard-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .activity-group-showcase .activity-group-leaderboard-points li:nth-child(n) { grid-column: auto; grid-row: auto; }
  /* Keep the complete preview close to its controls on short phone screens.
     svh stays stable when browser chrome opens or closes; the text remains
     full-sized below the image. Unenhanced/no-JS panels retain their layout. */
  .activity-product-showcase[data-tabs-ready] > [role="tabpanel"] figure {
    width: min(250px, max(200px, calc(48.9vh - 103px)), 100%);
    justify-self: center;
  }
  @supports (height: 100svh) {
    .activity-product-showcase[data-tabs-ready] > [role="tabpanel"] figure {
      width: min(250px, max(200px, calc(48.9svh - 103px)), 100%);
    }
  }
}
/* Keep label wrapping identical when selection changes on narrow phones. */
.activity-product-showcase [role="tab"] { font-weight: 600; }