/* The demo's front page (synth demo-site), over the API's pledge.css: its
   tokens only, no color of its own. */
[hidden] { display: none !important; }
.seats { display: grid; gap: var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-6); }
@media (min-width: 48rem) {
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.seats > li { display: flex; }
.seat { display: flex; flex-direction: column; width: 100%; }
.seat > h2 { margin-bottom: var(--space-1); }
.seat-plan { color: var(--muted); }
.credentials { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--surface-sunken); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); }
.credentials dt, .credentials dt:first-child { margin: 0; color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-medium); }
.credentials dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; color: var(--text); overflow-wrap: anywhere; }
.credentials code { font-size: var(--text-body); }
.copy { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--text-small); }
.seat-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 30rem) {
  .seat-actions > .button { width: 100%; }
}