/* Layout of the demo console screen. Every color, size, radius and font comes
   from tokens.css; the component classes (.topbar .btn .card .tablewrap
   .table .msg .chip) come from the copied components.css. This file only lays
   the page out, the way the demo screens under apps/landing/demo do. */

body {
  font: var(--text-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  margin: 0;
}

.topbar { position: sticky; top: 0; z-index: 10; }

.page {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 600px) {
  .page { padding: var(--space-6) var(--space-6) var(--space-10); }
}

/* -- cards --------------------------------------------------------------- */

.card__title {
  margin: 0;
  font: var(--text-block-title);
  font-size: 17px;
}

.card__meta {
  margin: 0;
  font: var(--text-help);
  color: var(--color-text-secondary);
}

/* The partner identity: label and value pairs from the tokens. */
.who { margin: 0; display: grid; gap: var(--space-2); }
.who__row { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--space-3); }
.who__row dt { font: var(--text-label); color: var(--color-text-secondary); align-self: start; }
.who__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* -- claims tables -------------------------------------------------------- */

.claims__val { white-space: normal; overflow-wrap: anywhere; }
.claims__json {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--size-table);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* -- error list ----------------------------------------------------------- */

.msg ul { margin: 0; padding-left: var(--space-5); }
.msg li { overflow-wrap: anywhere; }