:root { color-scheme: light dark; }

body {
  font: 1rem/1.5 system-ui, sans-serif;
  max-width: 60rem;
  margin: 1rem auto;
  padding: 0 1rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.brand { text-decoration: none; }

header nav form {
  flex: 1 1 20rem;
  margin: 0;
}

.search-box {
  position: relative;
}

.search-box input[type=search] {
  width: 100%;
  box-sizing: border-box;
  padding: .4rem .6rem;
  font: inherit;
  border: 1px solid CanvasText;
  border-radius: 4px;
  background: Field;
  color: FieldText;
}

#live-results {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 24rem;
  overflow-y: auto;
  background: Canvas;
  color: CanvasText;
  border: 1px solid CanvasText;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

#live-results li { padding: 0; }
#live-results li + li { border-top: 1px solid color-mix(in srgb, CanvasText 15%, transparent); }
#live-results a {
  display: block;
  padding: .4rem .6rem;
  text-decoration: none;
  color: inherit;
}
#live-results a:hover,
#live-results a:focus {
  background: color-mix(in srgb, AccentColor 20%, transparent);
}
#live-results small { opacity: .7; }

#ver {
  padding: .35rem .5rem;
  font: inherit;
}

main { min-height: 50vh; }

footer {
  margin-top: 3rem;
  font-size: .875rem;
  opacity: .8;
  border-top: 1px solid currentColor;
  padding-top: 1rem;
}

ul { padding-left: 1.25rem; }
dt { margin-top: 1rem; }
dt code { font-weight: bold; }
.type { font-family: monospace; opacity: .75; margin-left: .5rem; }
.req {
  font-size: .75rem;
  text-transform: uppercase;
  margin-left: .5rem;
  padding: 0 .25rem;
  border: 1px solid currentColor;
}
mark { background: yellow; color: black; }

output#results { display: block; }
output#results ul { list-style: none; padding: 0; }
output#results li {
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
}