body { max-width: 42rem; margin: 2rem auto; padding: 0 1rem; font: 1.0625rem/1.5 Georgia, "Times New Roman", serif; color: #1a1a1a; background: #fff; }
@media (prefers-color-scheme: dark) { body { color: #e6e6e6; background: #141414; } a { color: #9cc4ff; } }
h1 { font-weight: normal; font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-weight: normal; font-size: 1.25rem; margin: 2rem 0 .25rem; border-bottom: 1px solid #ccc; }
h2 small { color: #888; font-size: .75em; }
#count { color: #666; margin: -.75rem 0 1.5rem; }
.draft { color: #a33; font-style: italic; }
/* Filters: one row per kind. A small label in a fixed column on the left, the controls
   wrapping in a block of their own on the right; on a phone the label sits above the controls. */
form { margin: 1.5rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
form .row { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; padding: .5rem 0; }
form .row + .row { border-top: 1px solid #eee; }
.rowlabel { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.ctl { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; min-width: 0; }
.ctl label { white-space: nowrap; }
select { max-width: 100%; }
@media (max-width: 40rem) { form .row { grid-template-columns: 1fr; row-gap: .3rem; } }
#q { flex: 1 1 14rem; font: inherit; padding: .3rem .5rem; }
select, button { font: inherit; }
button.clear { font-size: .85rem; padding: .1rem .5rem; border: 1px solid #bbb; border-radius: .25rem; background: transparent; color: inherit; cursor: pointer; }
button.clear:hover { border-color: #666; }
dl { margin: 0; }
dt { margin-top: .6rem; }
dd { margin: 0 0 0 1.25rem; }
dd small { color: #666; }
@media (prefers-color-scheme: dark) { dd small, .rowlabel { color: #999; } h2 { border-color: #444; } form { border-color: #333; } form .row + .row { border-color: #2a2a2a; } button.clear { border-color: #555; } }
.none { color: #666; }