/* v10 — more communities, scheduled rooms + share links, tips and donations. */

/* ── share sheet ───────────────────────────────────────── */
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-2); font-size: var(--t-s); }
.share-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.share-t { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--surface); color: var(--ink); text-decoration: none; font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; }
.share-t:hover { border-color: var(--line); color: var(--ink); background: var(--sunk); }
.share-people { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.share-person { display: grid; justify-items: center; gap: 4px; width: 64px; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.share-person.is-sent .avatar { box-shadow: 0 0 0 3px var(--overlap); }
.share-person.is-sent span { color: var(--overlap); font-weight: 700; }

/* ── scheduled rooms ───────────────────────────────────── */
.room-scheduled { display: grid; gap: 14px; }
.sched-when { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-m); background: var(--sunk); }
.sched-when > span:last-child { display: grid; gap: 2px; }
.sched-date { display: grid; place-items: center; width: 56px; height: 60px; border-radius: 14px; background: var(--cobalt); color: var(--on-cobalt); flex: none; }
.sched-date span { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.sched-date strong { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.stage-sm { display: flex; flex-wrap: wrap; gap: 12px; }
.stage-sm .room-person { display: grid; justify-items: center; gap: 4px; color: var(--ink); text-decoration: none; }
.sched-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .sched-actions .btn { flex: 1 1 100%; } }

/* ── communities: search + categories ──────────────────── */
.comm-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); margin: 12px 0 10px; }
.comm-search input { flex: 1; min-height: 44px; border: 0; background: none; outline: none; color: var(--ink); }
.comm-search:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.cat-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-row .chip-filter { flex: none; }
@media (max-width: 720px) { .cat-row { margin-inline: -16px; padding-inline: 16px; } }

/* ── tips and donations ────────────────────────────────── */
.support-btn { color: var(--heart); border-color: color-mix(in srgb, var(--heart) 40%, var(--line)); }
.support-btn:hover { background: color-mix(in srgb, var(--heart) 10%, transparent); color: var(--heart); }
.need { padding: 18px; display: grid; gap: 10px; margin-top: 14px; border-left: 4px solid var(--heart); background: linear-gradient(140deg, color-mix(in srgb, var(--heart) 7%, var(--surface)), var(--surface) 60%); }
.need .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--heart); }
.need-title { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.need-story { color: var(--ink-2); }
.need-bar { height: 10px; border-radius: 5px; background: var(--sunk); overflow: hidden; }
.need-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--heart), var(--marigold)); animation: bar-grow 1s var(--ease) both; transform-origin: left; }
.need-nums { font-size: var(--t-s); }
.need-nums strong { font-size: 1.05rem; }
.need-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.need-trust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.support-form { display: grid; gap: 14px; }
.support-who { display: flex; align-items: center; gap: 12px; }
.support-who > span { display: grid; }
.support-modes { margin-top: 0; }
.amounts { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.amount { min-height: 46px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: var(--t-s); cursor: pointer; transition: border-color var(--dur), background var(--dur), transform 140ms var(--ease); }
.amount:hover { border-color: var(--ink-3); }
.amount.is-on { border-color: var(--heart); background: color-mix(in srgb, var(--heart) 12%, var(--surface)); color: var(--heart); }
.amount:active { transform: scale(0.96); }
.support-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 18px 4px; }
.support-burst { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--heart), var(--marigold)); animation: pop 520ms var(--ease-spring, ease) both; box-shadow: 0 0 0 10px color-mix(in srgb, var(--heart) 14%, transparent); }
.ep-support { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 14px; display: grid; gap: 10px; margin: 0; }
.ep-support legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--heart); }
.ep-support [data-need-fields] { display: grid; gap: 10px; }
.ep-support [data-need-fields][hidden] { display: none; }