:root { color-scheme: light; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  color: #111;
  background: #fff;
  line-height: 1.4;
}
.skip {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 3;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  background: #fff;
  color: #042;
}
.skip:not(:focus):not(:focus-visible) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-block: 0.6rem;
  padding-inline: 1rem;
  border-block-end: 0.125rem solid #111;
}
nav {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: center;
  gap: 0.75rem;
}
a { color: #042; }
main {
  padding-block: 1rem 3rem;
  padding-inline: 1.2rem;
}
h1 {
  font-size: 1.4rem;
  margin-block: 0 0.8rem;
  margin-inline: 0;
}
.table-wrap {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(31.25rem, 80dvh);
  container-type: inline-size;
  margin-block-end: 1rem;
}
.table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  inline-size: 100%;
}
.table-wrap caption {
  text-align: start;
  font-weight: 700;
  padding-block-end: 0.4rem;
}
.table-wrap th,
.table-wrap td {
  border: 1px solid #222;
  padding-block: 0.3rem;
  padding-inline: 0.45rem;
  text-align: start;
  vertical-align: top;
}
.table-wrap thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}
.table-wrap th { background: #eee; }
.table-wrap tbody th {
  position: sticky;
  inset-inline-start: 0;
  background: #fff;
}
button, .btn, .action {
  background: #042;
  color: #fff;
  border: 0.125rem solid #042;
  padding-block: 0.35rem;
  padding-inline: 0.7rem;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.action {
  font-size: 1.35rem;
  padding-block: 0.85rem;
  padding-inline: 1.3rem;
  margin-block: 0 0.6rem;
  margin-inline: 0 0.6rem;
}
button.danger { background: #fff; color: #800; border-color: #800; }
.banner {
  background: #a00;
  color: #fff;
  margin: 0;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  font-weight: 700;
}
.err {
  background: #fee;
  border: 0.125rem solid #800;
  padding-block: 0.5rem;
  padding-inline: 0.7rem;
}
.ok {
  background: #efe;
  border: 0.125rem solid #060;
  padding-block: 0.5rem;
  padding-inline: 0.7rem;
}
.low {
  outline: 0.1875rem solid #c90;
  background: #fffbe6;
  padding: 0.7rem;
}
.notice {
  border: 0.125rem solid #111;
  padding: 0.7rem;
  background: #f4f4f4;
  max-inline-size: 46rem;
}
label { display: block; margin-block: 0.25rem 0.75rem; }
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
  padding-block: 0.4rem;
  padding-inline: 0.5rem;
}
textarea { inline-size: min(36rem, 100%); max-inline-size: 100%; }
fieldset {
  border: 0.125rem solid #111;
  margin-block: 0 1rem;
  padding: 0.75rem;
  min-inline-size: 0;
}
legend { font-weight: 700; padding-inline: 0.25rem; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
}
.sign svg { inline-size: min(24rem, 100%); block-size: auto; display: block; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0.1875rem solid #042;
  outline-offset: 0.125rem;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: #800;
  outline: 0.1875rem solid #800;
}
dialog[open] {
  max-inline-size: min(32rem, calc(100% - 2rem));
  padding: 1rem;
  border: 0.125rem solid #111;
}
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
  overflow: hidden;
  overscroll-behavior: contain;
}
@media (pointer: coarse) {
  a, button, input, select, textarea {
    min-block-size: 3rem;
  }
}
@container (width < 37.5rem) {
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    margin-block-end: 1.5rem;
    border: 1px solid #ccc;
  }
  .table-wrap tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: #eee;
  }
  .table-wrap td[data-label]::before,
  .table-wrap tbody th[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
  }
}
@media print {
  header, .noprint, .banner, .skip { display: none; }
}