:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #252623; background: #f6f4ef; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 1rem max(1.25rem, calc((100vw - 1000px)/2)); border-bottom: 1px solid #c9c6bd; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: inherit; text-decoration: none; font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.brand span { color: #bd4c20; }
.brand small { font-weight: 400; font-size: .8rem; }
main { max-width: 1000px; padding: 2rem 1.25rem 4rem; margin: auto; }
h1 { margin: 0; font-size: 1.8rem; }
#filters { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #c9c6bd; }
label { display: grid; gap: .25rem; }
input, input, select, button { min-height: 44px; font: inherit; border: 1px solid #777b70; border-radius: 3px; padding: .5rem .75rem; background: #fff; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #22629b; outline-offset: 3px; }
#feedback { min-height: 1.5rem; }
article { padding: 1.3rem 0; border-bottom: 1px solid #c9c6bd; overflow-wrap: anywhere; }
article h2 { font-size: 1rem; margin: .5rem 0; }
.context { margin: 0; color: #50564d; font-size: .875rem; }
.message { white-space: pre-wrap; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.actions button:first-child { background: #294c3c; border-color: #294c3c; color: #fff; }
.actions button[data-action=delete] { color: #9a291c; }
.vote { color: #a54419; font-size: 1.25rem; letter-spacing: .1em; }
#more { margin-top: 1.5rem; }
[hidden] { display: none !important; }
@media (max-width: 600px) { header { align-items: start; flex-direction: column; gap: .25rem; } header > span { font-size: .875rem; } main { padding-top: 1.5rem; } #filters label { flex: 1; min-width: 135px; } }

.login { max-width: 460px; padding-top: 4rem; }
#login { display: grid; gap: 1rem; margin-top: 2rem; }
#login button { background: #294c3c; border-color: #294c3c; color: #fff; }
#login input { width: 100%; min-width: 0; }
#logout { margin-left: auto; }