/* "Mitbring- & Helferlisten" — the card page section (O5), in the card's own
   flow after the reply form, on the card's cream paper with its ink and
   script face (card.css tokens). Mobile first.
   Frame, title, items and fields: the card's compact system (public/shared/card.css «Compact sections»). */
.su-center { text-align: center; }
.su-sub { font-size: 16px; font-weight: 600; margin: 0 0 var(--sp-1); }
.su-list-title { font-size: 19px; font-weight: 600; margin: 0 0 2px; overflow-wrap: anywhere; }
.su-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.su-slot { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.08); }
.su-slot.is-full { background: rgba(255,255,255,0.6); }
.su-slot-top { display: flex; min-width: 0; }
.su-slot-main { min-width: 0; }
.su-slot-title { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.su-meta { font-size: 13px; color: #6f6a65; overflow-wrap: anywhere; }
.su-state { display: flex; font-size: 13px; }
.su-count { font-weight: 600; }
.su-bar { display: block; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; }
.su-fill { display: block; height: 100%; background: var(--rose-1, #9d5a63); border-radius: 999px; }
.su-need { color: #6f6a65; }
.su-full { color: #3f6b43; font-weight: 600; }
.su-people { display: flex; flex-wrap: wrap; gap: 6px; }
.su-person { font-size: 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; padding: 2px 9px; background: #fff; overflow-wrap: anywhere; }
.su-person.is-mine { border-color: var(--rose-1, #9d5a63); background: rgba(157,90,99,0.08); }
.su-btn { font: inherit; font-size: 14px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--rose-1, #9d5a63); background: var(--rose-1, #9d5a63); color: #fff; cursor: pointer; justify-self: start; }
.su-btn:disabled { opacity: .55; cursor: default; }
.su-link { font: inherit; font-size: 13px; background: none; border: none; color: var(--rose-2, #7a3b46); cursor: pointer; padding: 6px 2px; text-decoration: underline; }
.su-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.su-mine { background: rgba(255,255,255,0.92); border: 1px solid rgba(157,90,99,0.35); }
.su-mine-item { padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 2px; }
.su-mine-item:first-of-type { border-top: none; }
.su-form { display: flex; flex-direction: column; border-top: 1px dashed rgba(0,0,0,0.15); padding-top: var(--sp-2); margin-top: var(--sp-1); }
.su-field { display: flex; flex-direction: column; gap: 2px; }
.su-label { font-size: 13px; color: #6f6a65; }
.su-input { font: inherit; font-size: 16px; border: 1px solid rgba(0,0,0,0.18); border-radius: 10px; background: #fff; color: #333; width: 100%; box-sizing: border-box; }
.su-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.su-check input { margin-top: 3px; flex: none; }
.su-hint { font-size: 13px; color: #8c8681; margin: 2px 0; }
.su-flash { font-size: 13px; margin: var(--sp-1) 0; }
.su-flash:empty { margin: 0; }
.su-flash.ok { color: #3f6b43; }
.su-flash.error { color: #a33; }