/* Page layout for the OneiD demo client. Colours, type, spacing and the ol- components come
   from the Oltin UI Standard (wwwroot/oltin, generated); this file only arranges them. */

body { margin: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }

.demo-wrapper { max-width: 960px; margin: 0 auto; padding: 0 var(--space-6); }

.demo-header { border-bottom: 1px solid var(--line); }
.demo-header .demo-wrapper { display: flex; align-items: center; gap: var(--space-4); min-height: var(--size-header); }
.demo-header img { display: block; height: 28px; width: auto; }

.demo-hero { padding: var(--space-12) 0 var(--space-8); max-width: 640px; }
.demo-hero > * + * { margin-top: var(--space-4); }
.demo-eyebrow { color: var(--brand); text-transform: uppercase; }
.demo-steps { padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--ink-muted); }

a.ol-btn { text-decoration: none; }
.ol-btn-row { flex-wrap: wrap; justify-content: flex-start; }

.demo-card { margin-bottom: var(--space-6); padding: var(--space-6); }
.demo-card > * + * { margin-top: var(--space-3); }

.demo-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); }
.demo-kv dt { color: var(--ink-muted); }
.demo-kv dd { overflow-wrap: anywhere; }

.demo-wrap { overflow-wrap: anywhere; white-space: pre-wrap; }
.ol-table td { height: auto; padding-block: var(--space-2); vertical-align: top; }

.demo-token-title { margin-top: var(--space-6); }
.demo-token { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); }
.demo-token pre, .demo-card > pre { margin: var(--space-1) 0 0; }
.demo-raw summary { cursor: pointer; color: var(--link); }
.demo-raw pre { margin-top: var(--space-2); }
.demo-result { margin-top: var(--space-4); }

.demo-footer { padding-top: var(--space-6); padding-bottom: var(--space-10); border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .demo-wrapper { padding: 0 var(--space-4); }
  .demo-kv, .demo-token { grid-template-columns: minmax(0, 1fr); }
  .demo-kv { gap: 0; }
  .demo-kv dd { margin-bottom: var(--space-3); }
  .demo-hero { padding-top: var(--space-8); }
}