/* site.css: kit.v1d.io's own rules (row 787), tokens only: the page, a section for each part, its four modes side by side where there is room, and the lines the examples use. */
html { background: var(--bg); color: var(--fg); font-family: var(--font); }
body { margin: 0; padding: 0 16px 48px; max-width: 1200px; margin-inline: auto; }
body[data-example] { margin: 0; padding: 12px; max-width: none; }   /* a phone frame: the part, 12 px round it */
header { padding: 32px 0 8px; }
h1 { margin: 0 0 6px; font-size: var(--type-page); }
header p { margin: 0 0 12px; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
nav a { color: var(--fg); }
section { padding: 32px 0 8px; border-top: 1px solid var(--border); margin-top: 24px; }
h2 { margin: 0 0 4px; font-size: var(--type-heading); }
.about { margin: 0 0 16px; color: var(--muted); max-width: 70ch; }
.modes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.modes > figure:last-child { grid-column: 1 / -1; }   /* the phone frame has room for its 390 px */
figure { margin: 0; min-width: 0; padding: 14px; background: var(--card); border-radius: var(--radius); }
figcaption { margin-bottom: 10px; color: var(--muted); font-size: var(--type-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
iframe { display: block; box-sizing: content-box; width: 390px; max-width: 100%; height: 160px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.example-stack { display: grid; gap: 8px; }
.example-caption { margin: 8px 0 0; color: var(--muted); font-size: var(--type-small); }
.example-none, .example-refused { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--raised); font-size: var(--type-body); line-height: 1.5; }
.example-none { color: var(--muted); }
.example-refused { color: var(--warn); }
footer { padding-top: 32px; color: var(--muted); font-size: var(--type-small); }