/* Plain and readable; no design work (SPEC.md §6). */
:root { color-scheme: light dark; font: 15px/1.5 system-ui, sans-serif; }
body { margin: 0 auto; max-width: 64rem; padding: 1rem 1.5rem 4rem; }
header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #8884; padding-bottom: .5rem; }
header nav a { margin-right: 1rem; }
h1 small, label small { font-weight: normal; opacity: .7; }
section { margin: 2rem 0; }
label { display: block; margin: .6rem 0; }
input, select, textarea, button { font: inherit; }
textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
button { margin: .4rem .4rem .4rem 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid #8883; vertical-align: top; }
img { object-fit: contain; background: repeating-conic-gradient(#8882 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
form.inline, td form { display: inline; }
fieldset { border: 1px solid #8886; margin: .8rem 0; }
.error { color: #b91c1c; } .ok { color: #15803d; }
.diagnostics .error::before { content: "Error: "; font-weight: 600; }
.diagnostics .warning { color: #92400e; } .diagnostics .warning::before { content: "Warning: "; font-weight: 600; }
.swatches { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; padding: 0; }
.swatches li { display: flex; gap: .5rem; align-items: center; font-size: 13px; }
.codes { columns: 2; } .revoked { opacity: .5; }
.danger { border-top: 1px solid #b91c1c66; padding-top: 1rem; }
pre { overflow: auto; background: #8881; padding: 1rem; }