:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5; }
body { margin: 0; }
header { padding: 0.75rem 1rem; border-bottom: 1px solid #8884; }
.brand { font-weight: 600; text-decoration: none; color: inherit; }
main { max-width: 36rem; margin: 2rem auto; padding: 0 1rem; }
.actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.button, button { display: inline-block; padding: 0.6rem 1rem; border: 1px solid #8888; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.button:hover, button:hover { background: #8882; }
.error { padding: 0.75rem 1rem; border-left: 4px solid #c33; background: #c331; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
dt { font-weight: 600; }
ul.offices { list-style: none; padding: 0; }
main:has(table) { max-width: 72rem; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #8884; vertical-align: top; }
.row-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.row-actions form, td form { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
nav.settings { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 1.5rem; }
form.filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; }
form.filter label { margin: 0; }
select { padding: 0.4rem; font: inherit; }
code { font-size: 0.85em; word-break: break-all; }
form label, fieldset { display: block; margin: 0.75rem 0; }
input:not([type=radio]) { display: block; width: 100%; padding: 0.4rem; font: inherit; box-sizing: border-box; }
input.link { font-family: ui-monospace, monospace; }