:root { color-scheme: light; font-family: system-ui, sans-serif; color: #17283a; background: #f4f6f8; }
body { margin: 0; }
header, main { max-width: 64rem; margin: auto; padding: 1.5rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1 { font-size: 1.6rem; margin: 0; }
#environments { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
article { border: 1px solid #c7d3df; border-radius: .6rem; background: white; padding: 1.5rem; }
article h2 { margin-top: 0; }
label { display: block; margin: 1rem 0 .4rem; }
input, button { font: inherit; padding: .65rem; border: 1px solid #8192a3; border-radius: .3rem; }
input { box-sizing: border-box; width: 100%; }
button { cursor: pointer; background: #fff; color: #17283a; margin: .5rem .4rem .5rem 0; }
button.primary { background: #164e76; color: white; border-color: #164e76; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, a:focus-visible, article:focus-visible { outline: 3px solid #895008; outline-offset: 2px; }
#message { min-height: 1.5em; }
[hidden] { display: none !important; }
.detail { color: #405870; font-size: .9rem; overflow-wrap: anywhere; }
.pending, .result, .history { border-top: 1px solid #c7d3df; margin-top: 1rem; padding-top: .7rem; }
.history ol { padding-left: 1.2rem; }
.history li { border-bottom: 1px solid #e2e8ee; padding-bottom: .8rem; overflow-wrap: anywhere; }
summary { cursor: pointer; margin-top: 1rem; }
.pending h3 { font-size: 1rem; }
.pending input[type=checkbox] { width: auto; }
.pending input[type=checkbox] + label { display: inline; margin-left: .5rem; }
.error { color: #9e211c; overflow-wrap: anywhere; }