:root { color-scheme: light dark; font-family: system-ui, sans-serif; } body { margin: 0; } header, main { max-width: 1100px; margin: auto; padding: 1rem; } header { display: flex; gap: 1rem; justify-content: space-between; } nav { display: flex; gap: 1rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card, section { border: 1px solid #777; border-radius: .5rem; padding: 1rem; margin: 1rem 0; } .health-healthy { border-color: #16803c; } .health-warning, .health-degraded { border-color: #b7791f; } .health-critical, .health-reconciliation_failed { border-color: #c53030; } dt { font-weight: 700; } dd { margin: 0 0 .5rem; overflow-wrap: anywhere; } table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 1px solid #777; padding: .4rem; text-align: left; } .notice { color: #b45309; } @media (max-width: 600px) { table { font-size: .8rem; } header { display: block; } }