body { font-family: system-ui, sans-serif; max-width: 56rem; margin: 3rem auto; padding: 0 1rem; }
header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
         gap: 0.5rem; border-bottom: 1px solid #e5e2dc; padding-bottom: 0.75rem; margin-bottom: 2rem; }
header h1 { margin: 0; }
header nav a { margin-left: 1.25rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
/* Undoes the page-wide block `span`, which would break a heading over three lines. */
h2 span { display: inline; font-weight: inherit; margin: 0; }
nav.tabs { display: flex; gap: 0.5rem; margin: -1rem 0 1.75rem; }
nav.tabs button { font-size: 0.95rem; padding: 0.4rem 1rem; margin: 0; cursor: pointer;
                  background: none; border: 0; border-bottom: 2px solid transparent; color: #446; }
nav.tabs button[aria-selected="true"] { border-bottom-color: #446; font-weight: 600; color: inherit; }
section[hidden] { display: none; }
.cols { display: flex; gap: 2.5rem; align-items: flex-start; }
form.settings { flex: 0 0 15rem; }
aside.side { flex: 1; min-width: 0; }
label { display: block; margin: 0 0 1.25rem; }
span { display: block; font-weight: 600; margin-bottom: 0.25rem; }
small { color: #666; font-weight: 400; }
select { font-size: 1rem; padding: 0.4rem; }
input { font-size: 1rem; padding: 0.4rem; width: 8rem; }
.field { margin: 0 0 1.25rem; }
label.sub { display: block; margin: 0.6rem 0 0; font-weight: 400; }
label.sub small { display: block; margin-bottom: 0.15rem; }
label.sub select { width: 100%; }
label.src { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; margin: 0 0 0.3rem; }
label.src input { width: auto; padding: 0; }
button { font-size: 1rem; padding: 0.5rem 1.25rem; margin-top: 0.5rem; }
button:disabled { opacity: 0.45; }
/* A setting the chosen mode does not read: shown, so its value is not a surprise on the way back. */
label.off { opacity: 0.45; }
a { color: #446; }
dl.status { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem;
            background: #f4f2ee; padding: 1rem 1.25rem; border-radius: 6px; margin: 0 0 1.75rem; }
dl.status dt { color: #666; }
dl.status dd { margin: 0; }
dl.status dd span { display: inline; font-weight: inherit; margin: 0; }
dl.status dd.update { display: flex; align-items: center; gap: 0.5rem; }
dl.status dd.update button { margin: 0; }
time { border-bottom: 1px dotted #bbb; cursor: help; }
.ok, .bad, .warn { display: inline; font-weight: inherit; margin: 0; }
.ok { color: #3a7d44; }
.bad { color: #a4392f; }
.warn { color: #8a6d1f; }
form.block { margin: 0 0 1.75rem; }  /* the Save button carries no bottom margin of its own */
form.detector input { width: 100%; max-width: 22rem; }
form.detector button { margin-right: 0.5rem; }
form.detector summary { cursor: pointer; color: #446; }
form.detector details { margin-bottom: 1.25rem; }
/* Open, the last field inside carries the gap to the buttons itself. */
form.detector details[open] { margin-bottom: 0; }
form.detector details[open] summary { margin-bottom: 0.75rem; }
#test-result { display: inline; }
form.inline { display: inline; }
form.inline button { font-size: 0.8rem; padding: 0.1rem 0.5rem; margin: 0 0 0 0.5rem; }
ul.species { list-style: none; padding: 0; margin: 0 0 1.75rem;
             display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, max-content));
             justify-content: start; gap: 0.15rem 2.5rem; }
ul.species li { padding: 0.1rem 0; }
ul.species li.noart { color: #aaa; }
ul.species li.noart small { color: #aaa; }
ul.species li.empty { color: #999; }
/* Sized to the image, not the column: a portrait page in a 100%-wide box would
   draw its border around the letterboxing. */
.preview img { display: block; max-width: 100%; max-height: 60vh;
               border: 1px solid #ddd; border-radius: 6px; }
.rendering { display: none; align-items: center; justify-content: center; gap: 0.6rem;
             color: #666; }
/* The box holds its height across a re-render, so the page does not jump.
   Left-aligned: a portrait page centred in the column leaves it lopsided
   against the species list under it. */
.preview { min-height: 14rem; display: flex; align-items: center; justify-content: flex-start;
           margin: 0 0 1.75rem; }
.preview.loading .rendering { display: flex; }
.preview.loading img { display: none; }
/* margin: undoes the page-wide `span` rule, which offsets it from the caption. */
.spinner { width: 1.1rem; height: 1.1rem; margin: 0; border: 2px solid #ddd;
           border-top-color: #888; border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinner.inline { display: inline-block; vertical-align: -0.15rem; }
#bar { width: 7rem; height: 0.55rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@media (max-width: 40rem) {
  .cols { flex-direction: column; }
  form.settings { flex: none; }
}