/* phone-first: the whole app lives in a phone-width column, rest of the browser stays empty */
html { background: #e9e9ec; }
.telefoon { max-width: 430px; min-height: 100vh; margin: 0 auto; background: var(--pico-background-color); box-shadow: 0 0 24px rgba(0,0,0,.08); }
:root { --pico-font-size: 112.5%; }          /* 18px base on every width; Pico otherwise shrinks it on phones */
.telefoon .container { max-width: none; padding: 0 1rem; }
.telefoon main { padding-top: 0.5rem; }
.telefoon h1 { font-size: 1.7rem; line-height: 1.2; }
.telefoon h2 { font-size: 1.4rem; line-height: 1.25; }
.telefoon h3 { font-size: 1.15rem; }
.telefoon article { padding: 1.1rem; margin-bottom: 1rem; }
.telefoon p { line-height: 1.55; }
.telefoon button, .telefoon [role="button"] { font-size: 1.05rem; padding: 0.85rem 1rem; }
.telefoon table { font-size: 0.95rem; }
.telefoon small { font-size: 0.85em; }
.nav-terug { margin: 0.25rem 0 0.5rem; }
.stembalk { display: flex; height: 0.8rem; border-radius: 4px; overflow: hidden; background: #ddd; margin: 0.5rem 0; }
.stembalk span { display: block; height: 100%; }
.stembalk .voor { background: #2e8b57; }
.stembalk .tegen { background: #c0392b; }
.stembalk span + span { border-left: 1px solid rgba(255,255,255,.5); }
.voor-tekst { color: #2e8b57; font-weight: 600; }
.tegen-tekst { color: #c0392b; font-weight: 600; }
.uitslag { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; color: #fff; }
.uitslag.aangenomen { background: #2e8b57; }
.uitslag.verworpen { background: #c0392b; }
article.stemming header { display: flex; justify-content: space-between; align-items: center; }
article.stemming > a { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.filters { display: flex; gap: 1rem; }
.filters select { margin: 0; }
.motietekst { white-space: pre-wrap; font-family: inherit; font-size: 0.9rem; }
.fout { color: #c0392b; }
nav form { margin: 0; }
nav button { padding: 0.25rem 0.75rem; margin: 0; }
.indieners { display: block; color: var(--pico-muted-color); margin-bottom: 0.4rem; }
.landing { text-align: center; padding: 2rem 1rem; }
.landing .groot { font-size: 1.2rem; padding: 0.9rem 2rem; }
.tekstkeuze { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.tekstkeuze a { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.tekst p { font-size: 1.1rem; line-height: 1.6; }
.argumenten li { font-size: 1rem; }
form.wijzig { display: inline; margin-left: 1rem; }
form.wijzig button { padding: 0.2rem 0.6rem; font-size: 0.8rem; margin: 0; width: auto; }
.stappen i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ccc; margin-left: 0.3rem; }
.stappen i.aan { background: var(--pico-primary); }
.laag { margin-top: 1.5rem; }
.stemvak { margin: 1rem 0 0.5rem; }
.verder { margin: 1.5rem 0 0.5rem; }
.verder .groot { display: block; width: 100%; text-align: center; font-size: 1.2rem; padding: 1.1rem; }
.verder .groot small { display: block; font-size: 0.8rem; font-weight: normal; opacity: 0.85; }
.stemvak.zacht { margin-top: 0.5rem; opacity: 0.85; }
.stemvak.zacht p { margin-bottom: 0.3rem; text-align: center; }
.stemvak.zacht button { padding: 0.65rem; font-size: 0.95rem; }
.argumenten h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.argumenten ul { padding-left: 1.1rem; }
.argumenten li { margin-bottom: 0.6rem; font-size: 0.95rem; }
.bron { display: block; color: var(--pico-muted-color); font-size: 0.75rem; }
.bronkaart { padding: 1rem; margin: 0.75rem 0; }
.bronkaart header, .bronkaart footer { padding: 0; margin: 0 0 0.3rem; background: none; }
.bronkaart footer { margin-top: 0.3rem; }
.brontitel { margin: 0 0 0.4rem; font-style: italic; }

.expertstrip { margin: 1rem 0 0.25rem; }
.stances { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.stance { font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #e5e5e8; color: #333; white-space: nowrap; }
.stance.voor { background: #d8efe1; color: #1e5c3a; }
.stance.tegen { background: #f6dcd8; color: #7a2418; }
.stance.gemengd { background: #f5ead3; color: #6b4b0f; }
.bronkaart header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }