/* ==========================================================================
   PLAYER DEMO

   /player-demo is player.html with sample data, so it inherits player.css and
   every feature sheet whole. The only thing it owns is the ribbon across the
   top of the column that says what the visitor is looking at.

   The ribbon is drawn as cabinet chrome, not as a website banner: it uses the
   same gutter bleed as the masthead and the segment strip below it, so the top
   of the column stays one plate with no seam between the notice and the page.
   ========================================================================== */

.pl-demo-bar {
  /* Same bleed as .pl-top: background to the column edge, content on its grid. */
  margin-inline: calc(var(--pl-gutter) * -1);
  padding: .8rem var(--pl-gutter);
  display: flex;
  align-items: center;
  gap: .9rem;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pl-ember) 22%, transparent) 0%,
      transparent 62%),
    var(--reset-panel);
  border-bottom: 1px solid var(--reset-line);
}

.pl-demo-bar__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .7rem;
  background: var(--pl-ember);
  color: #1a1206;
  font-size: .95rem;
}

.pl-demo-bar__text {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .55rem;
  row-gap: .1rem;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--reset-muted);
}

.pl-demo-bar__text b {
  color: var(--reset-cream);
  font-size: .92rem;
  white-space: nowrap;
}

.pl-demo-bar__cta {
  flex: none;
  margin-inline-start: auto;
  gap: .4rem;
}

/* Phones: the sentence is the part that can go, and the button keeps only the
   verb — same split the masthead uses on "Frontline Player". What is left is
   what the ribbon is for, and all of it stays on one line. */
@media (max-width: 700px) {
  .pl-demo-bar { gap: .6rem; padding-block: .55rem; }
  .pl-demo-bar__mark { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
  .pl-demo-bar__text span { display: none; }
  .pl-demo-bar__cta { padding-inline: .75rem; font-size: .74rem; }
  .pl-demo-bar__cta-tail { display: none; }
}