/* Layout and components. Colours and fonts come from theme.css. */
* { box-sizing: border-box; margin: 0; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }
h1, h2 { font-family: var(--font-heading); }
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--color-brand); color: #ffffff; }
.topbar nav { margin-left: auto; display: flex; gap: 12px; }
.topbar a { color: #ffffff; text-decoration: none; }
.page { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; }
.button { background: var(--color-brand); color: #ffffff; border: 0; border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
.button.secondary { background: var(--color-brand-tint); color: var(--color-brand-strong); }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th { text-align: left; background: var(--color-surface-alt); color: var(--color-text-muted); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.tag { padding: 2px 8px; border-radius: 999px; color: #ffffff; font-size: 12px; }
.tag.ok { background: var(--color-success); }
.tag.late { background: var(--color-warning); }
.tag.failed { background: var(--color-danger); }