* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 system-ui,sans-serif; background: #fff; color: #212529; }
main { max-width: 68rem; padding: 1rem; margin: 0 auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h1,h2 { overflow-wrap: anywhere; }
a { color: #064dab; } a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #0759c1; outline-offset: 2px; }
.toolbar,.fields { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 1rem 0; }
.toolbar { justify-content: space-between; }
.toolbar label { flex: 1 1 10rem; }
.fields > label { flex: 1 1 10rem; }
input:not([type=checkbox]),select,textarea { display: block; width: 100%; padding: .5rem; border: 1px solid #9ca8b8; border-radius: .3rem; font: inherit; }
button { padding: .55rem .9rem; border: 1px solid #0759c1; border-radius: .3rem; color: #fff; background: #0759c1; font: inherit; cursor: pointer; }
.panel { padding: 1rem; border: 1px solid #d9dde2; border-radius: .4rem; margin: 1rem 0; }
.panel > label { display: block; margin-bottom: .75rem; }
input[type=checkbox] { margin-right: .4rem; }
.calendar,.list { width: 100%; border-collapse: collapse; }
.calendar { table-layout: fixed; }
th { text-align: left; } .calendar th { text-align: center; }
.calendar td { height: 6rem; border: 3px solid #fff; padding: .2rem; vertical-align: top; overflow-wrap: anywhere; }
.calendar td > a { display: block; color: inherit; min-height: 5.2rem; text-decoration: none; }
.calendar td > a:hover { outline: 2px solid #0759c1; outline-offset: -2px; }
.day { display: block; font-weight: 700; font-size: 1.1rem; }
.day-label { display: block; hyphens: auto; font-size: .78rem; }
.empty { background: #f6f7f8; }
.state-green { background: #e4f2e7; color: #1a512a; }
.state-blue { background: #e3edff; color: #143c75; }
.state-amber { background: #fff0c2; color: #634800; }
.state-red { background: #f9dddd; color: #7c2323; }
.state-gray { background: #e5e7eb; color: #303741; }
.list th,.list td { padding: .45rem; border-bottom: 1px solid #d9dde2; }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.legend li { padding: .2rem .45rem; border-radius: .2rem; font-size: .85rem; }
.hint { font-size: .9rem; color: #495057; }
.error { padding: .8rem; color: #7c2323; background: #f9dddd; border-radius: .3rem; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 480px) {
 main { padding: .5rem; } h1 { font-size: 1.3rem; }
 .calendar td { height: 5.6rem; padding: .1rem; border-width: 2px; }
 .day-label { font-size: .65rem; line-height: 1.3; }
 .calendar td > a { min-height: 5.2rem; }
}

.toolbar select,.toolbar input[type=month] { height: 2.85rem; min-height: 2.85rem; }
.single-tool { flex: 1 1 10rem; }
.single-tool > span,.single-tool > strong { display: block; }
.single-tool > strong { min-height: 2.85rem; padding: .5rem 0; }