/* The platform shell on the design system's tokens (bundle.css). Replaced by the Claude Design canvas in P1b. */
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--ink); }
.top { display: flex; align-items: center; gap: var(--space-24); padding: var(--space-12) var(--space-24); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav { display: flex; gap: var(--space-16); flex: 1; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); }
.who { display: flex; align-items: center; gap: var(--space-12); margin-left: auto; }
.who a { color: var(--ink-2); }
.who form { margin: 0; }
main { max-width: 72rem; margin: 0 auto; padding: var(--space-32) var(--space-24); }
main.narrow { max-width: 26rem; }
h1 { font-size: 1.5rem; margin: 0 0 var(--space-24); }
h2 { font-size: 1.125rem; margin: var(--space-32) 0 var(--space-12); }
.stack { display: grid; gap: var(--space-16); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: end; }
.msg { padding: var(--space-12) var(--space-16); border: 1px solid var(--line); margin: 0 0 var(--space-24); }
.msg.error { border-color: var(--alarm); color: var(--alarm-text); }
.qr { display: inline-block; background: #fff; padding: var(--space-8); }
.qr svg { display: block; width: 12rem; height: 12rem; }
.codes { font-family: var(--font-mono); columns: 2; padding-left: var(--space-24); }
.muted { color: var(--ink-3); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-8) var(--space-24); }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; }
@media (max-width: 40rem) {
  .top { flex-wrap: wrap; padding: var(--space-12) var(--space-16); }
  main { padding: var(--space-24) var(--space-16); }
}

.narrow-form { max-width: 26rem; }