:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem; max-width: 40rem; margin-inline: auto; }
button { font-size: 1.1rem; padding: .75rem 1.25rem; border-radius: .5rem; }
.muted { color: #6b7280; font-size: .9rem; }
ul.jobs { list-style: none; padding: 0; display: grid; gap: .75rem; }
.job { display: flex; gap: .75rem; border: 1px solid #e5e7eb; border-radius: .6rem; overflow: hidden; }
.job img { width: 40%; max-width: 8rem; object-fit: cover; }
.job__body { padding: .6rem; }
.job__meta { color: #374151; font-size: .9rem; margin-top: .25rem; }
section { margin-block: 1.5rem; }
textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
pre.diff { border: 1px solid #e5e7eb; padding: .6rem; border-radius: .5rem; overflow-x: auto; font-size: .85rem; white-space: pre-wrap; }
.carousel-wrap { display: flex; align-items: center; gap: .25rem; }
.carousel { display: flex; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem; border-radius: .6rem; }
.carousel img { width: 100%; flex-shrink: 0; scroll-snap-align: center; object-fit: cover; max-height: 60vh; border-radius: .6rem; }
.carousel-btn { padding: .4rem .7rem; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; border: 1px solid #d1d5db; margin-inline-end: .25rem; }
.badge--score { background: #1a3c2e; color: #fff; border-color: #1a3c2e; }
.badge--borderline { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.badge--middenhuur { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.badge--band { background: #dcfce7; color: #166534; border-color: #86efac; }
form.inline { display: inline; }
form.inline button { font-size: 1rem; padding: .3rem .6rem; }
.state-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.job__actions { margin-top: .35rem; display: flex; gap: .4rem; align-items: center; }
.draft-form { display: flex; gap: .5rem; margin-top: .5rem; }
.draft-form input[type="text"] { flex: 1; font: inherit; padding: .5rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
.facts { padding-left: 1.1rem; }
.error { color: #b91c1c; }
.drop { color: #166534; font-weight: 600; }
.map { height: 320px; border-radius: .6rem; border: 1px solid #e5e7eb; }
.map--full { height: 72vh; }
.nav { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; font-size: .95rem; }
.nav form.inline button { font-size: .95rem; padding: .3rem .6rem; }
table.sources { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.sources th, table.sources td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
table.sources tr.paused { opacity: .55; }
pre.description { white-space: pre-wrap; border: 1px solid #e5e7eb; padding: .6rem; border-radius: .5rem; font: inherit; }
pre.invite-url { border: 1px solid #e5e7eb; padding: .6rem; border-radius: .5rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.source-form input[type="text"], .source-form input[type="url"], .source-form input[type="number"] { font: inherit; padding: .4rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
ul.compact { gap: .25rem; }