/* Idavoll design tokens. Keep visual changes in this stylesheet. */
:root {
  --ink: #1F1B16; --muted: #6E655A; --faint: #9A9084; --hair: #E6E0D6;
  --bg: #F7F4EE; --surf: #FFFFFF; --green: #2F6B4F; --green-soft: #E3EFE7;
  --amber: #8A5620; --amber-soft: #FBF1E3; --green-tint: #D3E5D9; --green-line: #A9C7B5; --green-muted: #4F5E55; --photo: #E9E1D3; --danger: #9B3B2E;
  /* A destructive action's own button: plainly red. */
  --red: #C4362B;
  /* Idavoll's own mark (design/identity): apricot on aubergine, a standalone Hangout's cover and disc. */
  --aubergine: #482344; --apricot: #FFD5AE;
  /* Each City Hall topic's tone, read by its disc and its cover on What's Happening. One
     lightness, so none shouts, and hues far enough apart to tell at a glance; never green
     (the action colour) nor aubergine (a standalone Hangout's). */
  --tone-wellness: #C6D9C0; --tone-parties: #EBC4BC; --tone-outdoors: #BCD4E0; --tone-arts: #D4C9E3; --tone-games: #E0D2A4;
  /* Each tone 25% over the cream: the ground of a page narrowed to its topic, light enough to
     keep the white pills quiet, still a colour of its own. Muted text keeps 4.5:1 on every one;
     work them out again whenever a tone changes. */
  --wash-wellness: #EBEDE2; --wash-parties: #F4E8E2; --wash-outdoors: #E8ECEA; --wash-arts: #EEE9EB; --wash-games: #F1ECDC;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --tabbar: 76px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--green); text-decoration: none; }
button { font: inherit; color: inherit; }
.icon { flex-shrink: 0; display: block; }
/* City Hall under a pill takes the topic's wash as its ground (body[data-wash], TopicsHelper#wash): whatever sits on the
   ground follows, and the cards stay white. */
:root:has(> body[data-wash="wellness"]) { --bg: var(--wash-wellness); }
:root:has(> body[data-wash="parties"]) { --bg: var(--wash-parties); }
:root:has(> body[data-wash="outdoors"]) { --bg: var(--wash-outdoors); }
:root:has(> body[data-wash="arts"]) { --bg: var(--wash-arts); }
:root:has(> body[data-wash="games"]) { --bg: var(--wash-games); }

/* Phone frame on wide screens; edge to edge on phones. */
.app { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.app--bare { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
@media (min-width: 600px) { .app, .app--bare { box-shadow: 0 0 0 1px var(--hair); } }

.screen { flex: 1 1 auto; display: flex; flex-direction: column; padding-bottom: calc(var(--tabbar) + 16px); }
.content { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 12px; }
.header__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header__title { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.header__title--small { font-size: 22px; }
.header__title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.header__sub { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header__back { width: 36px; height: 36px; margin-left: -8px; display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.header__btns { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 20px; background: var(--surf); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; padding: 0; cursor: pointer; }
/* City Hall's way into the city's Connections: the header's own round button, wearing Idavoll's mark. */
.icon-btn--mark { color: var(--aubergine); }
/* City Hall's way to ask: the header's one primary button. */
.header-ask { height: 40px; padding: 0 18px 0 14px; border-radius: 20px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-shrink: 0; text-decoration: none; }
.city-ask { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: 12px; }
.city-ask .btn { max-width: 220px; }
/* Going in a group chat's header: primary while it is asked, quiet once said. */
.icon-btn--going { background: var(--green); border-color: var(--green); color: #fff; }
.icon-btn--going[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green-soft); color: var(--green); }
/* Wave in a Hangout's group chat header (rooms/wave): a plain round button with the hand. */
.wave-slot, .going-slot { display: contents; }
.icon-btn--wave { font-size: 19px; line-height: 1; cursor: pointer; }
form:has(> .icon-btn) { display: flex; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__items { position: absolute; right: 0; top: 52px; width: 260px; background: var(--surf); border: 1px solid var(--hair); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(31,27,22,0.12); z-index: 15; }
.menu__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.menu__item:hover { background: var(--bg); }
.plus-btn { width: 44px; height: 44px; border-radius: 22px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; padding: 0; }

/* Tab bar */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabbar); border-top: 1px solid var(--hair); background: var(--surf); display: flex; padding: 0 6px; z-index: 10; }
@media (min-width: 600px) { .tabbar { max-width: 430px; left: 50%; transform: translateX(-50%); } }
.tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); font-size: 10.5px; letter-spacing: -0.01em; font-weight: 500; white-space: nowrap; }
.tab.is-active { color: var(--green); font-weight: 600; }
.tab__badge { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Text */
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.day-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; padding-top: 6px; }
.day-label__date { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.day-label__date::before { content: "·"; margin-right: 8px; color: var(--faint); }
/* The screenshots picked for a New Event, shown back before anything is sent. */
.shots { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; }
.shot { display: flex; flex-direction: column; gap: 4px; width: 84px; flex-shrink: 0; }
.shot__img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; border: 1px solid var(--hair); background: var(--photo); }
.shot__name { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.headline { font-family: var(--serif); font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: pretty; }

/* Cards and rows */
.card { background: var(--surf); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card--green { background: var(--green-soft); border-color: transparent; }
.card--amber { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
/* The Plus-off card: a white card at the scale of the cards around it (13px body, 20px serif title, 16px padding), the gem in green. */
.card--plus { padding: 16px; gap: 10px; color: var(--ink); }
/* What Plus gives, on its page, in groups. */
.perks { display: flex; flex-direction: column; gap: 18px; }
.perks__group { margin: 0; }
.perk + .perks__group { margin-top: 10px; }
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk__check { width: 24px; height: 24px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.perk__title { display: block; font-weight: 600; font-size: 16px; }
.perk__sub { text-wrap: pretty; line-height: 1.45; }
.card--plus .plus-bar { background: var(--hair); }
.card--plus .plus-bar__fill { background: var(--green); }
.plus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plus-head__title { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; text-wrap: pretty; }
.plus-head .plus-gem { color: var(--green); }
.plus-way { display: flex; flex-direction: column; gap: 8px; }
.plus-way__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.plus-meter { display: flex; flex-direction: column; gap: 6px; }
.plus-meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.plus-meter__row strong { font-weight: 600; }
.plus-meter__note { font-size: 12px; color: var(--muted); }
.plus-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.plus-or::before, .plus-or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--hair); }
.plus-link { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--green); }
.card--plus-on { background: var(--green-tint); border-color: transparent; color: var(--green); }
.plus-left__head { display: flex; justify-content: space-between; align-items: center; color: inherit; text-decoration: none; }
.plus-left__invite { margin-top: 4px; }
/* The Plus progress bar: a translucent track filled in the card's ink on the green Plus-on tint; a hair track filled green on the white Plus-off card. */
.plus-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.55); overflow: hidden; }
.plus-bar__fill { height: 100%; background: currentColor; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.name-line { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.name-line > span { min-width: 0; overflow-wrap: anywhere; }
/* The quiet invite line on Event and Hangout pages. */
.invite-quiet { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--hair); border-radius: 12px; color: var(--muted); text-decoration: none; }
.invite-quiet__icon { width: 30px; height: 30px; border-radius: 15px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.invite-quiet__head { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.invite-quiet__line { display: block; font-size: 12px; line-height: 1.4; text-wrap: pretty; }
.invite-quiet__cta { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--green); flex-shrink: 0; }

/* A page opened from a shared link, signed out: who invited you, large; the thing in one card; then what Idavoll is and the way in, on green. */
.shared { display: flex; flex-direction: column; }
.shared-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.shared-bar__mark { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.shared-bar__signin { font-size: 14px; font-weight: 600; padding: 12px 0 12px 16px; }
.shared-body { display: flex; flex-direction: column; gap: 24px; padding: 18px 20px 40px; }
.invited-by { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.invited-by__line { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.shared-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; color: var(--ink); text-decoration: none; }
.shared-card__head { display: flex; flex-direction: column; gap: 4px; }
.shared-card__kind { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.shared-card__title { font-family: var(--serif); font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.shared-card__facts { display: flex; flex-direction: column; gap: 7px; }
.shared-card__facts .fact { overflow-wrap: anywhere; }
/* A shared Event's group chat, on a soft green band: the sharer's initial and how many more. */
.shared-card__band { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--green-soft); border-radius: 12px; }
.shared-card__band-faces { display: flex; flex-shrink: 0; }
.shared-card__band-faces .face { border: 2px solid var(--green-soft); box-sizing: border-box; }
.shared-card__band-more { min-width: 36px; height: 36px; padding: 0 6px; border-radius: 18px; background: var(--surf); border: 2px solid var(--green-soft); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--green); }
.shared-card__band-faces .face + .shared-card__band-more { margin-left: -8px; }
.shared-card__band-copy { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.shared-card__band-copy strong { font-size: 15px; font-weight: 600; }
.shared-card__band-copy span { font-size: 14px; color: var(--green); }
.shared-card__foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
.shared-card__foot strong { font-weight: 600; color: var(--ink); }
.shared-card__foot--between { justify-content: space-between; }
.shared-card__people { display: flex; flex-wrap: wrap; gap: 6px; }
.shared-card__people .member-chip { background: var(--bg); }
.shared-card__chat { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.pitch { display: flex; flex-direction: column; gap: 20px; padding: 26px 20px 22px; background: var(--green-soft); border-radius: 20px; }
.pitch__headline { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: pretty; }
.pitch__lines { display: flex; flex-direction: column; gap: 12px; }
.pitch__line { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.pitch__line > span:last-child { padding-top: 5px; }
.pitch__icon { width: 32px; height: 32px; border-radius: 16px; background: var(--surf); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pitch__join { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(47, 107, 79, 0.16); }
.pitch__cta { font-size: 16px; font-weight: 600; text-align: center; padding-bottom: 2px; }
.pitch .agree { color: var(--muted); }
.shared-more { border-top: 1px solid var(--hair); }
.shared-more__toggle { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.shared-more__toggle::-webkit-details-marker { display: none; }
.shared-more[open] .shared-more__toggle .icon { transform: rotate(180deg); }
.shared-more__body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }

/* The first page after onboarding: "You're in." and, on a phone's browser, the app. */
.arrival { display: flex; flex-direction: column; gap: 10px; }
.arrival--wrapped { padding-top: 4px; padding-bottom: 16px; }
.arrived { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; background: var(--green-tint); border-radius: 14px; color: var(--green); font-size: 14px; line-height: 1.45; }
.arrived .icon { margin-top: 1px; }
.arrived strong { font-weight: 600; }
.app-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--green); border-radius: 18px; color: #fff; }
.app-card__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 20px; padding: 0; background: none; border: 0; color: var(--green-tint); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.app-card__head { display: flex; align-items: flex-start; gap: 14px; padding-right: 28px; }
.app-card__icon { width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-card__title { margin: 0 0 5px; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; }
.app-card__line { font-size: 14px; line-height: 1.45; color: var(--green-tint); }
.app-card__get { height: 50px; border-radius: 13px; background: var(--surf); color: var(--green); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; }
.app-card__other { align-self: center; margin-top: -6px; padding: 4px 0; font-size: 13px; color: var(--green-tint); text-decoration: underline; text-underline-offset: 2px; }
/* The chat's slim line: the second ask, closable for good. */
.app-line { display: flex; align-items: center; gap: 10px; margin: 0 20px 6px; padding: 4px 4px 4px 12px; background: var(--green-soft); border-radius: 12px; font-size: 13px; line-height: 1.35; flex-shrink: 0; }
.app-line__text { flex: 1 1 auto; min-width: 0; }
.app-line__text a { font-weight: 600; }
.app-line__close { width: 36px; height: 36px; border-radius: 18px; padding: 0; background: none; border: 0; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }

/* Whether your links vouch for people, as a card on the Invite page; in Settings it is a communication-preference row. */
.vouch { padding: 14px 16px; background: var(--surf); border: 1px solid var(--hair); border-radius: 14px; }
.vouch .communication-preference__label { font-size: 15px; }

/* Admin area: cards with sectioned rows, compact fields, quiet lists. */
.admin-card { background: var(--surf); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.admin-card__head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; }
.admin-card__section { padding: 12px 16px 14px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 10px; }
.admin-card__section .section-label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.admin-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.admin-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
/* A job is working on this city: the line pulses until its lines land and the page refreshes itself */
.admin-working { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; }
.admin-working::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--green); flex-shrink: 0; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.admin-field .edit-box, .admin-inline .edit-box { padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.admin-inline { display: flex; gap: 8px; align-items: center; }
.admin-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.admin-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surf); font-size: 13px; color: var(--muted); text-decoration: none; }
.admin-pill strong { color: var(--ink); }
.admin-pill--live { border-color: var(--green); color: var(--green); }
.admin-pill--live strong { color: var(--green); }
.admin-list { display: flex; flex-direction: column; }
.admin-list__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.admin-list__row:first-child { border-top: 0; padding-top: 2px; }
.admin-list__actions { display: flex; gap: 12px; flex-shrink: 0; }
.admin-list__actions a, .admin-list__actions button { font: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; color: var(--green); }
.admin-list__actions button { color: var(--muted); }
.admin-log { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.admin-log time { color: var(--faint); font-variant-numeric: tabular-nums; }
.profile-footer { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 8px; }
.profile-footer form { display: contents; }
.profile-footer__action { display: inline-flex; align-items: center; height: 32px; padding: 0; margin: 0; background: none; border: 0; font: inherit; font-size: 13px; line-height: 1; color: var(--faint); cursor: pointer; text-decoration: none; }
.portrait-photo { object-fit: cover; flex-shrink: 0; display: block; background: var(--photo); }
.portrait-photo--obscured { filter: saturate(0.9); }
.photo-hero--obscured { filter: none; }
.hero-gate--locked { color: var(--muted); }
.photo-pending { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.92); font-size: 11px; font-weight: 600; color: var(--muted); }
.photo-pending--held { color: var(--danger); }
.plus-gem { flex-shrink: 0; }
.plus-mark { color: var(--green); flex-shrink: 0; vertical-align: -2px; }
.muted-mark { display: inline-flex; flex-shrink: 0; vertical-align: -2px; color: var(--faint); }
/* The drawing stays small; the tap target is a thumb's width around it. */
.plus-mark-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; margin: -12px -8px; }
.header__title .plus-mark-link { transform: translateY(3px); }
.message__author .plus-mark { margin-left: 3px; }
.portrait { overflow: hidden; flex-shrink: 0; }
.portrait svg { display: block; }
.face { border-radius: 50%; color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; flex-shrink: 0; }
/* Under a city's hello: one tap to wave (posts/_wave). */
.wave { padding: 4px 0 2px; }
.wave__form { display: flex; flex-direction: column; gap: 8px; }
/* Idavoll's own account: its mark, apricot on aubergine (PortraitsHelper#house_face). */
.face--house { background: var(--aubergine); color: var(--apricot); }
.post { background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; padding: 18px 18px 12px; display: flex; flex-direction: column; gap: 12px; color: inherit; }
.post__link { display: flex; flex-direction: column; gap: 12px; color: inherit; }
.content--posts { gap: 16px; padding-top: 6px; }
.post__head { display: flex; justify-content: space-between; align-items: center; }
.post__body { font-family: var(--serif); font-size: 18px; line-height: 1.4; text-wrap: pretty; }
.post__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.post__answers { display: flex; align-items: center; min-height: 44px; padding-left: 8px; color: var(--muted); white-space: nowrap; }

/* Reactions: one row of three buttons, the same everywhere a contribution shows.
   20px icons, 14px counts, at least 44px tall, most of it padding. At rest they
   are transparent with a faint warm ring, a compact group under the writing; the
   chosen one alone gets a tinted ground and a filled icon, so the box's job is to
   show what you tapped. Thumbs down stays quiet in grey but is as easy to tap. */
.reactions { display: flex; align-items: center; gap: 4px; margin-left: -2px; }
.reactions form { display: contents; }
.reaction { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--ink); }
.reaction--btn { min-height: 44px; padding: 0 10px 0 8px; border-radius: 12px; border: 1px solid #EFEAE2; background: transparent; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background-color 0.12s, border-color 0.12s, transform 0.12s; }
.reaction--btn:active { transform: scale(0.96); }
.reaction.is-zero span { color: var(--faint); }
.reaction--down { color: var(--muted); }
.reaction--heart.is-mine { color: #C0392B; background: #FBEAE7; border-color: #F3CFC9; }
.reaction--up.is-mine { color: #2F5F9E; background: #E7EEF8; border-color: #C9D8EC; }
.reaction--down.is-mine { color: var(--muted); background: var(--hair); border-color: var(--hair); }
.reaction.is-mine span { color: inherit; font-weight: 600; }

/* Buttons */
.btn { height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; border: 1px solid var(--green); background: var(--green); color: #fff; width: 100%; cursor: pointer; }
.btn--secondary { background: var(--surf); color: var(--ink); border-color: var(--hair); }
.btn--amber { background: var(--amber); border-color: var(--amber); }
.btn--apple { background: #000; border-color: #000; color: #fff; }
.btn--small { height: 44px; }
.btn--compact { height: 38px; font-size: 14px; width: auto; padding: 0 16px; }
/* Google's and Apple's own sign-in buttons render themselves inside these boxes, centred at the width of our buttons. */
.google-signin { display: flex; justify-content: center; min-height: 44px; }
.apple-signin { display: flex; justify-content: center; min-height: 40px; }
/* Inside a shell the bridge swaps a provider's button for the native one; `hidden` must win over the flex displays. */
.google-signin[hidden], .apple-signin[hidden], .btn[hidden] { display: none; }

/* Empty states */
.empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px 60px; text-align: center; color: var(--muted); }
.empty .headline { font-size: 24px; color: var(--ink); }

/* Dev bar, development only */
.devbar { background: #1F1B16; color: #E6E0D6; font-size: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; position: sticky; top: 0; z-index: 20; }
.devbar select { font: inherit; background: #2E2A26; color: #fff; border: 1px solid #4a443d; border-radius: 6px; padding: 3px 6px; }
.devbar a { color: #C9D6C4; }
.devbar__spacer { flex: 1; }

/* Threads, composer, profile, switcher, activity */
.answer { padding: 12px 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; font-size: 15px; scroll-margin-top: 90px; }
/* The answer someone arrived at, from a chat's answer line or from Activity: on green.
   Turbo's visits do not move :target, so the thread marks it too (thread_controller). */
.answer:target, .answer.is-target { background: var(--green-soft); border-top-color: transparent; border-radius: 14px; margin: 0 -12px; padding: 12px; }
.pill { font-size: 11px; color: var(--muted); background: var(--hair); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.composer { position: fixed; bottom: var(--tabbar); left: 0; right: 0; padding: 10px 20px 12px; display: flex; align-items: center; gap: 10px; background: var(--bg); z-index: 9; }
@media (min-width: 600px) { .composer { max-width: 430px; left: 50%; transform: translateX(-50%); } }
.composer__input { flex: 1 1 auto; height: 46px; border-radius: 23px; background: var(--surf); border: 1px solid var(--hair); padding: 0 16px; font: inherit; color: var(--ink); min-width: 0; }
.composer__input:focus { outline: none; border-color: var(--green); }
.composer__send { width: 46px; height: 46px; border-radius: 23px; background: var(--green); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.ask-box { width: 100%; min-height: 150px; border-radius: 14px; background: var(--surf); border: 1px solid var(--hair); padding: 14px 16px; font-family: var(--serif); font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); resize: none; }
.ask-box:focus { outline: none; border-color: var(--green); }
.portrait--hero { width: 100% !important; }
.upsell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px dashed var(--hair); border-radius: 12px; color: var(--muted); font-size: 13px; text-wrap: pretty; }
.blur-lines { display: flex; flex-direction: column; gap: 6px; filter: blur(4px); opacity: 0.7; }
.blur-lines div { height: 9px; border-radius: 5px; background: #B8AD9E; }
/* Where are you? The city switcher and onboarding's city step: the cities in large type, and at the foot a quiet way to ask for another. */
.city-pick { flex: 1 1 auto; gap: 14px; padding-top: 4px; }
.app:has(.city-pick), .app--bare:has(.city-pick) { min-height: calc(100dvh - var(--devbar, 0px)); } /* the foot line stays in view, dev bar or not */
.city-pick__headline { margin: 0; font-size: 32px; font-weight: 400; }
.city-pick__line { margin: 0; }
.city-list { display: flex; flex-direction: column; margin-top: 6px; border-bottom: 1px solid var(--hair); }
.city-list form { display: contents; }
.city-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 72px; padding: 0 4px; border: 0; border-top: 1px solid var(--hair); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.city-row__name { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
.city-ask { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--muted); text-align: center; }
.city-ask__more > summary { display: inline-block; padding: 12px 0; list-style: none; cursor: pointer; }
.city-ask__more > summary::-webkit-details-marker { display: none; }
.city-ask__more > summary strong { color: var(--green); font-weight: 600; }
.city-ask__more[open] > summary { display: none; }
.city-ask__form { display: flex; flex-direction: column; gap: 8px; }
.city-ask__field { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 4px 0 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surf); }
.city-ask__field:focus-within { border-color: var(--green); }
.city-ask__field input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.city-ask__field button { height: 38px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--green); cursor: pointer; }
.city-ask__note { color: var(--danger); }
.city-ask__sent { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 12px 0; }
.city-ask__sent .icon { color: var(--green); }
.city-ask__sent a { font-weight: 600; }
.activity-icon { width: 40px; height: 40px; border-radius: 20px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon--off { background: var(--amber-soft); color: var(--amber); }
.activity-icon--mark { background: color-mix(in srgb, var(--aubergine) 10%, var(--surf)); color: var(--aubergine); }

/* Connections, revealed profiles, edit profile */
.pipe { display: flex; flex-direction: column; padding-top: 6px; }
.pipe__step { display: flex; gap: 14px; align-items: stretch; }
.pipe__rail { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 26px; flex-shrink: 0; }
.pipe__node { width: 26px; height: 26px; border-radius: 13px; background: var(--bg); border: 2px solid var(--hair); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pipe__step--done .pipe__node { background: var(--green); border-color: var(--green); }
.pipe__step--current .pipe__node { background: var(--green-soft); border-color: var(--green); }
.pipe__line { width: 3px; flex: 1 1 auto; min-height: 22px; background: var(--hair); border-radius: 2px; }
.pipe__step--done .pipe__line { background: var(--green); }
.pipe__body { display: flex; flex-direction: column; gap: 5px; padding: 3px 0 18px; min-width: 0; flex: 1 1 auto; }
.pipe__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; }
.pipe__step--next .pipe__label { color: var(--faint); }
.pipe__tag { font-size: 11px; color: var(--green); font-weight: 600; }
.pipe__tag--muted { color: var(--muted); }
.pipe__line-text { font-size: 13px; color: var(--muted); line-height: 1.4; display: flex; align-items: flex-start; gap: 6px; text-wrap: pretty; }
.pipe__line-text .icon { margin-top: 3px; }
.pipe__link { color: var(--green); text-decoration: underline; text-decoration-color: var(--green-soft); text-underline-offset: 2px; }
.photo-thumb { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.photo-thumb--empty { background: var(--photo); display: flex; align-items: center; justify-content: center; }
.photo-hero { width: 100%; height: 230px; border-radius: 16px; object-fit: cover; display: block; }
.photo-tile { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; display: block; background: var(--photo); }
.photo-slot { aspect-ratio: 1; border-radius: 12px; background: var(--surf); border: 1px dashed var(--hair); display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* A picked photo, shown at once while it uploads (photo_upload_controller). */
.photo-slot.is-uploading { position: relative; overflow: hidden; border-style: solid; }
.photo-slot.is-uploading > .icon { display: none; }
.photo-slot__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.photo-slot.is-uploading .photo-pending { animation: pulse 1.2s ease-in-out infinite; }
/* Picked, waiting for the form's Save (How to find me): shown as it is. */
.photo-slot.is-picked { position: relative; overflow: hidden; border-style: solid; }
.photo-slot.is-picked > .icon { display: none; }
.photo-slot.is-picked .photo-slot__preview { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .photo-slot.is-uploading .photo-pending { animation: none; }
}
.photo-remove { width: 24px; height: 24px; border-radius: 12px; border: 0; background: rgba(31,27,22,0.7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.chip { padding: 8px 12px; border-radius: 999px; background: var(--surf); border: 1px solid var(--hair); font-size: 13px; }
.gate { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); font-weight: 600; padding: 0 2px; }
/* A part waiting on yours: a plain white tile like the locked ones, only its plus in green,
   its nudge in grey (profiles/parts), so the profile is not one ask after another. */
.card--gated .gate-nudge { color: var(--muted); }
.photo-empty { width: 100%; border-radius: 16px; background: var(--photo); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.photo-empty__face { font-family: var(--serif); font-weight: 500; }
.photo-empty__note { font-size: 12px; color: var(--muted); }
.hero-gate { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--green); font-size: 12px; font-weight: 600; }
/* A city's Connections: two columns of cards, a portrait and a name, each card one link to the person's page. Nothing else on a card. */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.person-card { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 22px 12px 18px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; color: var(--ink); text-decoration: none; }
.person-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.person-card__name { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; font-size: 15px; font-weight: 600; line-height: 1.25; }
.person-card__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.edit-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.edit-label .green { text-transform: none; letter-spacing: 0; font-size: 12px; text-align: right; }
.edit-box { width: 100%; border-radius: 12px; background: var(--surf); border: 1px solid var(--hair); padding: 12px 14px; font: inherit; color: var(--ink); resize: none; }
.edit-box:focus { outline: none; border-color: var(--green); }
.edit-box--bio { line-height: 1.5; }
.edit-label__count { color: var(--faint); text-transform: none; letter-spacing: 0; font-weight: 500; }
.edit-label--apart { margin-top: 14px; }
/* Socials on the profile editor: one line above, then a row per field, label and box. */
.socials-form__hint { padding: 0 2px; text-wrap: pretty; }
.socials-form { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.socials-form__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 14px; min-height: 48px; }
.socials-form__row + .socials-form__row { border-top: 1px solid var(--hair); }
.socials-form__row:focus-within .socials-form__label { color: var(--green); }
.socials-form__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.socials-form__input { border: 0; background: none; font: inherit; color: var(--ink); padding: 12px 0; min-width: 0; width: 100%; }
.socials-form__input:focus { outline: none; }
.socials-form__input::placeholder { color: var(--faint); }
.green { color: var(--green); }

/* Chat, and the toast */
.message-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.messages { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px 90px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scrollbar-width: none; }
.messages::-webkit-scrollbar { display: none; }
.screen:has(.message-area) { padding-bottom: var(--tabbar); height: 100%; min-height: 0; }
body:has(.devbar) { --devbar: 37px; }
/* The room is pinned to the viewport with the keyboard closed too, as it is with
   the keyboard open (below). Left in the page's flow at 100dvh, its messages did
   not scroll by touch in a phone's browser while the keyboard was down. */
html:has(.message-area), body:has(.message-area) { overflow: hidden; }
.app:has(.message-area) { position: fixed; top: var(--devbar, 0px); bottom: 0; left: 0; right: 0; min-height: 0; overflow: hidden; }
.message { display: flex; flex-direction: column; gap: 10px; }
.message__day { display: none; font-size: 12px; color: var(--faint); text-align: center; padding: 4px 0; }
.message--first-of-day .message__day { display: block; }
.message__row { display: grid; grid-template-columns: 28px minmax(0, 78%); gap: 3px 8px; align-items: end; justify-items: start; }
.message--me .message__row { grid-template-columns: minmax(0, 78%); justify-content: end; justify-items: end; }
.message__avatar { visibility: visible; grid-column: 1; grid-row: 2; }
.message--me .message__avatar, .message--threaded .message__avatar { visibility: hidden; }
.message--me .message__avatar { display: none; }
.message__bubble-wrap { display: contents; }
.message__bubble-wrap > * { grid-column: 2; max-width: 100%; min-width: 0; }
.message--me .message__bubble-wrap > * { grid-column: 1; }
.message__bubble-wrap > .message__author { grid-row: 1; }
.message__bubble-wrap > .message__bubble { grid-row: 2; }
.message__bubble-wrap > .message__meta, .message__bubble-wrap > .message__time { grid-row: 3; }
.message__bubble-wrap > .message__recovery, .message__bubble-wrap > .message__error { grid-row: 4; }
.message__author { font-size: 11px; color: var(--faint); padding-left: 4px; }
.message--me .message__author, .message--threaded .message__author { display: none; }
.message__bubble { padding: 9px 13px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--surf); border: 1px solid var(--hair); font-size: 14px; line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-wrap; }
.message--me .message__bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; background: var(--green); color: #fff; border-color: var(--green); }
.message--pending .message__bubble { opacity: 0.6; }
.message--failed .message__bubble { opacity: 1; background: var(--danger); border-color: var(--danger); }
.message--failed .message__time::after { content: " · Not sent"; color: var(--danger); }
.message__time { font-size: 11px; color: var(--faint); padding: 0 4px; }
.message--threaded { margin-top: -6px; }
.message--update { align-items: center; }
.message__update { font-size: 12px; color: var(--muted); text-align: center; padding: 2px 12px; text-wrap: pretty; overflow-wrap: anywhere; }
.message__update-time { color: var(--faint); margin-left: 4px; }
/* A question about the Event, or an answer to one, under its line (Hangouts::QuestionLines):
   one family, centred under the line's words, never a bubble. The question on a faint
   fill in the serif; the answer a step quieter, a fainter fill with a hairline, in the
   sans, cut to two lines. */
.message--question-line { gap: 6px; }
/* The dates in a date line (Events::Dates) open the Event's dates. */
.message__date { color: var(--green); font-weight: 600; }
.chat-question { display: flex; flex-direction: column; gap: 5px; max-width: 290px; padding: 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--hair) 45%, var(--bg)); color: inherit; text-align: center; }
.chat-question__body { font-family: var(--serif); font-size: 15px; line-height: 1.35; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.chat-question__foot { font-size: 12px; color: var(--muted); }
.chat-question__action { font-weight: 600; color: var(--green); }
.chat-answer { max-width: 290px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--hair) 18%, var(--bg)); color: color-mix(in srgb, var(--ink) 85%, var(--bg)); font-size: 14px; line-height: 1.4; text-align: center; text-wrap: pretty; overflow-wrap: anywhere; }
/* The cut lives inside the padding, so a third line never shows through it. */
.chat-answer__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The Going icon inside the line that says Going is open (MessagesHelper#update_line). */
.message__icon { display: inline-block; margin: 0 1px; vertical-align: -2px; color: var(--ink); }
.message__icon .icon { display: inline-block; vertical-align: top; }
.composer--chat { bottom: var(--tabbar); }
.latest { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); border: 1px solid var(--hair); background: var(--surf); color: var(--green); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(31,27,22,0.08); cursor: pointer; }
.toast { position: fixed; top: calc(var(--devbar, 0px) + 12px); left: 50%; transform: translateX(-50%); z-index: 50; max-width: min(360px, calc(100% - 32px)); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.35; text-align: center; box-shadow: 0 6px 20px rgba(31,27,22,0.18); transition: opacity 0.3s, transform 0.3s; cursor: pointer; }
.toast--gone { opacity: 0; transform: translateX(-50%) translateY(-6px); }
.unread-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--green); display: inline-block; }
.latest[hidden] { display: none; }

/* What's happening */
.fact { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fact__link { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; min-width: 0; }
/* A recurring Event's date with its one faint line under it ("Also on 27 Oct and more · All dates"), or "No next date yet". */
.fact--stack { align-items: flex-start; }
.fact--stack > .icon { margin-top: 2px; }
.fact__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact__strong { font-weight: 600; }
.fact__also { font-size: 13px; color: var(--muted); }
.fact__also-link { color: var(--green); font-weight: 600; }
.member-chip .plus-mark { margin-left: 2px; }
.member-chip { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surf); border: 1px solid var(--hair); font-size: 13px; font-weight: 500; color: var(--ink); }
.member-chip--more { padding: 5px 12px; color: var(--muted); font-weight: 400; }
.amber { color: var(--amber); }
.blurred-chat { position: relative; background: var(--surf); border: 1px solid var(--hair); border-radius: 12px; padding: 14px; overflow: hidden; }
.blurred-chat__lines { display: flex; flex-direction: column; gap: 8px; filter: blur(5px); opacity: 0.55; }
.blurred-chat__lines div { height: 10px; border-radius: 5px; background: #B8AD9E; }
.blurred-chat__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }

/* A Hangout's group chat card (hangouts/_card), the same on an Event's page and a
   standalone Hangout's: faces and the count, the blurred chat, the one button, the
   waiting slots, and the Plus walk-ins under a hairline. */
.hangout-card { padding: 16px; gap: 12px; border-radius: 16px; }
.hangout-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hangout-card__count { color: var(--ink); font-weight: 600; }
.hangout-card__in { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hangout-card__status { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hangout-card__state { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.hangout-card__state--in { color: var(--green); }
.hangout-card__state--waiting { color: var(--amber); }
.hangout-card form { display: flex; }
.faces { display: flex; flex-shrink: 0; }
.faces__face { border: 2px solid var(--surf); box-sizing: border-box; }
.faces__face + .faces__face { margin-left: -7px; }
.blurred-chat--inset { background: var(--bg); border: 0; padding: 12px 14px; }
.blurred-chat--inset .blurred-chat__lines { gap: 7px; }
.blurred-chat--inset .blurred-chat__lines div { height: 9px; }
.hangout-wait { display: flex; flex-direction: column; gap: 10px; }
.hangout-wait__head { display: flex; flex-direction: column; gap: 2px; text-wrap: balance; }
.hangout-wait__foot { font-size: 12px; color: var(--muted); text-align: center; }
.slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surf); border: 1px solid var(--hair); border-radius: 12px; color: inherit; }
.slot--open { border-style: dashed; }
.slot__face { width: 32px; height: 32px; border-radius: 16px; background: var(--bg); border: 1px dashed var(--hair); flex-shrink: 0; }
.slot__text { display: flex; flex-direction: column; min-width: 0; }
.slot__name { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; }
.slot__mark { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Waiting: the yeses as tiles side by side, a said one with a check on its face. */
.yeses { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.yeses .slot { gap: 10px; padding: 10px; min-width: 0; }
.yeses .slot__text { flex: 1; }
.yeses .slot__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yeses .slot__name .plus-mark { margin-left: 4px; }
.yeses .slot--open { background: none; }
.yeses .slot--open .slot__name { font-weight: 500; color: var(--muted); }
.slot__said { position: relative; display: flex; flex-shrink: 0; }
.slot__check { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 8px; border: 2px solid var(--surf); box-sizing: border-box; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.walk-ins { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--hair); color: var(--ink); }
.walk-ins__gem { width: 32px; height: 32px; border-radius: 16px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.walk-ins__text { display: flex; flex-direction: column; gap: 5px; line-height: 1.3; min-width: 0; }
.walk-ins__have { font-size: 14px; font-weight: 600; color: var(--green); }
.walk-ins__count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.walk-ins__dots { display: flex; gap: 3px; }
.walk-ins__dot { width: 8px; height: 8px; border-radius: 4px; background: var(--surf); border: 1.5px solid var(--green-line); }
.walk-ins__dot--used { background: var(--green); border-color: var(--green); }
.walk-ins__earn { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--green); }
.hangout-members { display: flex; flex-wrap: wrap; gap: 8px; }
/* An empty Event Hangout: one quiet button, and what walking in means, under it. */
.hangout-empty { display: flex; flex-direction: column; gap: 8px; }
.hangout-empty form { display: flex; }
/* While the first five walk in: the one line that says so, under the button. */
.hangout-no-waiting { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.45; padding: 0 8px; text-wrap: pretty; }
/* Going, inside an Event's Hangout: the question with its one line, then that you are going and how many are. */
/* Going on an Event page's card: only a pointer to the chat, where the button is
   (rooms/going), and what saying it means; once said, quietly who is. */
.going { font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.going__icon { display: inline-block; margin: 0 1px; vertical-align: -3px; color: var(--ink); }
.going__icon .icon { display: inline-block; vertical-align: top; }
.going--yes { display: flex; align-items: center; gap: 6px; padding: 0; background: none; color: var(--green); font-weight: 600; }
.member-chip__going { color: var(--green); font-weight: 400; }
.btn:disabled { opacity: 0.5; }
/* A plain form at work (busy_controller): its controls stop taking taps and its
   submit button dims, its icon pulsing, until the next page arrives. */
form.is-busy :is(input, textarea, select, button, label) { pointer-events: none; }
form.is-busy .btn[type=submit] { opacity: 0.7; }
form.is-busy .btn[type=submit] svg { animation: pulse 1.2s ease-in-out infinite; }
.busy-slow { font-size: 13px; color: var(--muted); text-align: center; text-wrap: pretty; margin-top: -6px; }
@media (prefers-reduced-motion: reduce) {
  form.is-busy .btn[type=submit] svg { animation: none; }
}
.btn--danger { background: var(--red); border-color: var(--red); }
.settings-delete { align-self: flex-start; margin: 36px 4px 8px; padding: 6px 0; font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
/* Delete account: the button looks disabled until the box is ticked. The box stays required, so a tap before then asks for it. */
.delete-account:has(input[name=confirm_delete]:not(:checked)) .btn--danger { opacity: 0.5; cursor: not-allowed; }

/* Segmented pills; cards and upsells as links */
.seg { padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--surf); border: 1px solid var(--hair); color: var(--muted); }
.seg.is-on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
/* The City Hall pills: two rows of three equal pills, All first, all six in view */
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 2px 20px 10px; }
/* City Hall's intro box sits above the pills: the column's own gap between them. */
.content:has(> .intro) + .topics { padding-top: 12px; }
.topics .seg { text-align: center; white-space: nowrap; padding: 8px 1px; font-size: 11.5px; letter-spacing: -0.015em; }
.topics .seg.is-on { font-weight: 500; } /* the dark fill marks it; a bolder label would grow */
@media (max-width: 380px) { .topics { padding-left: 16px; padding-right: 16px; } }
a.card, a.upsell { text-decoration: none; }

/* Own-content menus */
.own-menu__btn { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--faint); cursor: pointer; }
.own-menu__btn:hover { background: var(--hair); color: var(--ink); }
.menu--own .menu__items { right: 0; }
.menu__item--danger { color: var(--danger); background: none; border: 0; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.menu__items form { display: contents; }
.message__time { display: flex; align-items: center; gap: 6px; }
.message--me .message__time { flex-direction: row-reverse; }

/* City Hall feed: an ongoing conversation carries its reason at the top; the tail is what's under the last card. */
.post__mark { font-size: 12px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 6px; margin-bottom: -2px; }
.post__mark::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--green); flex-shrink: 0; }
.feed-tail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 12px; text-align: center; }
.feed-tail__sentinel { position: absolute; top: -400px; height: 1px; width: 1px; pointer-events: none; }
.feed-tail .btn { max-width: 200px; }

/* Thread composer: a growing box, a reply target above it, and text laid out for reading */
.content--thread { padding-bottom: calc(var(--composer-h, 80px) + 12px); }
.composer--thread { flex-direction: column; align-items: stretch; gap: 8px; }
.composer__row { display: flex; align-items: flex-end; gap: 10px; }
.composer__input--multi { height: 46px; max-height: 160px; padding: 12px 16px; line-height: 1.4; font-size: 15px; resize: none; overflow-y: auto; border-radius: 20px; display: block; }
.composer__target { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); padding: 0 4px; }
.composer__target[hidden] { display: none; }
.composer__target strong { color: var(--ink); font-weight: 600; }
.composer__target .icon { vertical-align: -2px; }
.composer__cancel { background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--green); cursor: pointer; }
.composer__error { font-size: 13px; color: var(--danger); padding: 0 4px; }
/* What a section is for, at its top (Intros): grey, quiet, closable after the first days. */
.intro { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hair) 60%, var(--bg)); color: var(--muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.intro__text { flex: 1; min-width: 0; }
.intro__close { flex-shrink: 0; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: 14px; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.notice { background: var(--green-soft); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.connection-card { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surf); color: color-mix(in srgb, var(--aubergine) 70%, var(--surf)); }
.pipe__supplied { font-size: 13px; color: var(--green); line-height: 1.4; text-wrap: pretty; padding-bottom: 2px; }
/* The ladder of a forming Connection closes on a quiet way to skip ahead: introducing yourself. */
.ladder-skip { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ladder-skip .event-link { align-self: flex-start; }
.ladder-skip__note { padding: 0 2px; text-wrap: pretty; }
/* Introductions: a few words to someone, waiting in their list behind the mark in Chats. */
.quiet-btn { min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.introduction-mark { display: flex; flex-shrink: 0; color: var(--aubergine); }
.introduction-form { gap: 10px; padding-top: 4px; }
.introduction-form__label { margin-top: 8px; }
.introduction-form__box { font-size: 15px; line-height: 1.5; }
.introduction-form__note { padding: 0 2px; text-wrap: pretty; }
.introduction-form__opens { margin-top: 6px; }
.introduction-form__send { margin-top: 8px; }
.introduction-shared { display: flex; align-items: flex-start; gap: 8px; }
.introduction-shared__icon { flex-shrink: 0; margin-top: 2px; }
.introduction-card { position: relative; gap: 10px; padding: 16px; }
.introduction-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--faint); }
.introduction-card__waiting { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.introduction-card__open { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.introduction-card__who { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
.introduction-card__name-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.introduction-card__name { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
.introduction-card__when { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--faint); }
.introduction-card__shared { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.introduction-card__body { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.introduction-card__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: var(--faint); cursor: pointer; }
.introduction-text { font-size: 15px; line-height: 1.5; text-wrap: pretty; white-space: pre-line; overflow-wrap: anywhere; }
.introduction-text--large { font-size: 16px; }
.introduction-sent { gap: 12px; padding-top: 4px; }
.introduction-sent__note { padding: 0 2px; text-wrap: pretty; }
.introduction-sent__back { align-self: flex-start; }
.introduction-out { gap: 14px; padding-top: 4px; }
.introduction-out__words { display: flex; flex-direction: column; gap: 6px; padding: 18px 2px 4px; }
.introduction-out__headline { font-size: 24px; }
.introduction-list { gap: 12px; }
.introduction-list__note { padding: 4px 2px 0; text-wrap: pretty; }
.introduction-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 120px 24px 0; text-align: center; }
.introduction-empty__mark { display: flex; color: color-mix(in srgb, var(--aubergine) 25%, var(--bg)); }
.introduction-empty__headline { font-size: 24px; }
.introduction-answer { gap: 12px; }
.introduction-answer form { display: flex; flex-direction: column; }
.introduction-answer__untold { text-align: center; margin-top: -10px; }
.plus-nudge { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; }
.plus-nudge__gem { width: 32px; height: 32px; border-radius: 16px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plus-nudge__words { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.35; }
.plus-nudge__go { display: flex; align-items: center; gap: 2px; font-weight: 600; color: var(--green); }
.chats-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
/* An ended chat's clock; a Hangout's live chat wears its disc instead (CoversHelper#hangout_disc). */
.chats-group__icon { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chats-group__icon--ended { background: var(--bg); color: var(--faint); border: 1px solid var(--hair); }
.chats-ended summary, .fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.chats-ended summary::-webkit-details-marker, .fold summary::-webkit-details-marker { display: none; }
.chats-ended summary::before, .fold summary::before { content: "▸"; font-size: 11px; }
.chats-ended[open] summary::before, .fold[open] summary::before { content: "▾"; }
/* Activity: new first, then Earlier folded (activity/index). */
.activity-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.activity-nothing-new { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.activity-earlier { margin-top: 8px; }
.composer--ended { justify-content: center; text-align: center; padding: 14px 20px 16px; border-top: 1px solid var(--hair); background: var(--surf); }
.composer__send:disabled { background: var(--hair); color: var(--faint); cursor: default; }
/* Open: a card on the keyboard. Room for a paragraph, Send below the text on the right. */
.composer--thread.is-open { background: var(--surf); border-top: 1px solid var(--hair); border-radius: 18px 18px 0 0; padding: 12px 16px 12px; gap: 10px; box-shadow: 0 -6px 24px rgba(31, 27, 22, 0.06); }
.composer--thread.is-open .composer__row { flex-direction: column; align-items: flex-end; gap: 8px; }
.composer--thread.is-open .composer__input--multi { width: 100%; min-height: 132px; max-height: 260px; border: 0; border-radius: 0; padding: 4px 4px; background: none; }
.composer--thread.is-open .composer__send { width: 40px; height: 40px; border-radius: 20px; }
.composer--thread.is-open .composer__target { padding: 0 4px; }
body.is-composing .tabbar { display: none; }
body.is-composing .composer--thread { bottom: 0; }
.answer__foot { display: flex; justify-content: space-between; align-items: center; }
.reply-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; min-height: 44px; padding: 4px 0 4px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--green); cursor: pointer; }
.reply-ref { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); text-decoration: none; }
.reply-ref--gone { color: var(--faint); font-style: italic; }
.prose { overflow-wrap: anywhere; text-wrap: pretty; }
.prose p { margin: 0; }
.prose p + p { margin-top: 0.6em; }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
/* The public pages (privacy, terms, support): long text that reads well on a phone. */
.prose--page { max-width: 40rem; line-height: 1.55; padding: 4px 0 40px; }
.prose--page h1 { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 8px; }
.prose--page h2 { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 28px 0 8px; }
.prose--page p { margin: 0 0 10px; }
.prose--page p + p { margin-top: 0; }
.prose--page ul { margin: 0 0 10px; padding-left: 20px; }
.prose--page li { margin-bottom: 5px; }
.prose--page li::marker { color: var(--faint); }
.prose--page .prose__lede { font-size: 16px; color: var(--muted); }
.prose--page .prose__updated { margin-top: 32px; font-size: 13px; color: var(--faint); }
.prose__more { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.prose__more a { text-decoration: none; }
/* Under the sign-in buttons: one line, the terms and the privacy policy linked. */
.agree { text-align: center; font-size: 12px; line-height: 1.4; color: var(--faint); padding-top: 4px; text-wrap: pretty; }
.agree a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.site-foot { text-align: center; font-size: 12px; line-height: 1.5; color: var(--faint); padding-top: 14px; }
.site-foot nav { font-weight: 600; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot p { margin: 4px 0 0; }
/* Foot of Help: the public pages, for anyone who wants the long version. */
.help-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 4px 8px; font-size: 13px; font-weight: 600; }
/* Profiles lead with the person and what they said, then the rest */
.identity { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.identity__photo { width: 56px; height: 56px; border-radius: 28px; object-fit: cover; flex-shrink: 0; background: var(--photo); }
/* Only the photo is a block: an initial in its place keeps .face's centring. */
img.identity__photo { display: block; }
.contribution__question { display: block; font-size: 13px; color: var(--muted); text-wrap: pretty; }
.contribution__body { display: block; color: inherit; }
.prose--profile { line-height: 1.5; }
/* Happening keeps the city's board and the viewer's shortlist together. */
.happening-views { display: flex; gap: 24px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.happening-views__link { display: flex; align-items: center; gap: 7px; min-height: 44px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
.happening-views__link[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }
.happening-views__count { min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 12px; line-height: 20px; text-align: center; }
.happening-intro { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.happening-empty { display: flex; flex-direction: column; gap: 14px; padding: 22px 0; }
/* What's Happening narrowed to a topic: the chip that takes it away, and the way back to City Hall. */
.topic-narrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topic-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.topic-ask { margin-top: 12px; }
/* A quiet card that is one link (shared/link_card): City Hall's cards between questions, What's Happening's way back. */
.link-card { color: inherit; text-decoration: none; }
.link-card__title { display: flex; align-items: flex-start; gap: 8px; }
.link-card__title .icon { margin-top: 3px; }
.link-card__title .serif { font-size: 19px; font-weight: 500; line-height: 1.25; text-wrap: pretty; }
.link-card__line { text-wrap: pretty; }
.link-card__cta { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.header__topic { display: inline-flex; align-items: center; gap: 2px; color: var(--green); font-weight: 600; vertical-align: bottom; }
.happening-empty .headline { font-size: 25px; }
.happening-empty p { margin: 0 0 6px; }
/* A card on What's Happening: a cover, then the title in the serif, the practical line, the
   social line and the group chat line. One link to the Event or the Hangout; under an Event,
   the group chat line is its own link to the Hangout section. */
.board-card { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.board-card__link { display: flex; flex-direction: column; color: inherit; }
.board-card__body { display: flex; flex-direction: column; gap: 5.5px; padding: 15px 16px 0; min-width: 0; overflow-wrap: anywhere; }
.board-card__title { font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; text-wrap: pretty; }
/* The place and the cost: a touch larger and darker than muted, still well under the title. */
.board-card__line { font-size: 14px; color: color-mix(in srgb, var(--muted) 90%, var(--ink)); }
/* The month's other dates of a recurring Event, faint: "Also on 27 Oct". */
.board-card__also { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); }
/* The description's opening on an Event's card: plain text (the card is one link), two lines,
   a quarter quieter than muted (about 3.3:1 on white, below the 4.5:1 body-text bar). */
.board-card__lead { font-size: 13.5px; line-height: 1.45; color: color-mix(in srgb, var(--muted) 75%, var(--surf)); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.board-card__people { font-size: 13px; color: var(--green); }
/* A Hangout card names its host right under the title, a touch larger than the lines under it, the name in semibold. */
.board-card__host { font-size: 14px; color: var(--green); }
.board-card__host strong { font-weight: 600; }
.board-card > :last-child { padding-bottom: 17px; }
/* The board breathes: more air between cards than inside them, and more again before
   a new day, which stays close to its own first card. */
.board-card + .board-card { margin-top: 15px; }
.board-card + .day-label { margin-top: 27px; }
/* The group chat in one quiet line: the count and where the viewer stands. */
.happening-chat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.happening-chat__status { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.board-card__body .happening-chat { padding-top: 4px; }
.board-card > .happening-chat { padding: 8px 16px 17px; }
/* The cover: an Event's topic tone with its glyph large and faint, cut off at the edge, the
   neutral hairline and calendar without one, or Idavoll's mark for a standalone Hangout.
   The time (or the board's note) in a white pill; a flyer could take its place one day. */
.cover { position: relative; height: 128px; overflow: hidden; flex-shrink: 0; background: var(--hair); color: var(--ink); }
.cover__glyph { position: absolute; right: 14px; bottom: -14px; display: flex; color: rgba(31,27,22,0.16); }
.cover__mark { position: absolute; right: 22px; top: 18px; display: flex; color: var(--apricot); }
.cover__pill { position: absolute; left: 14px; top: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.92); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.cover__saved { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border-radius: 16px; background: rgba(255,255,255,0.92); color: var(--green); display: flex; align-items: center; justify-content: center; }
.cover__label { position: absolute; left: 16px; bottom: 12px; max-width: calc(100% - 140px); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(31,27,22,0.62); }
.cover--hangout { background: var(--aubergine); }
/* An Event's cover is a slim band (CoversHelper): its glyph and name on its tone, then the
   saved mark and the time at the right. A standalone Hangout keeps the tall cover. */
.cover--band { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; color: rgba(31,27,22,0.62); }
.cover--band > * { position: static; }
.cover--band .cover__glyph { color: inherit; }
.cover--band:not(:has(.cover__label)) .cover__glyph { margin-right: auto; }
.cover--band .cover__label { flex: 1; min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.cover--band .cover__saved { width: 26px; height: 26px; border-radius: 13px; }
.cover--band .cover__pill { padding: 4px 9px; font-size: 12.5px; white-space: nowrap; }
/* The coin above an Event's title on its page: its topic's disc, alone (TopicsHelper#event_coin). */
.event-coin { position: relative; align-self: flex-start; display: flex; border-radius: 20px; }
.event-coin__badge { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 8px; background: var(--surf); box-shadow: 0 0 0 1px var(--hair); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.cover--hangout .cover__label { color: var(--apricot); }
/* The disc: a topic's glyph on its tone, a calendar on a neutral disc without one, the mark on
   aubergine for a standalone Hangout. 40px in the narrowed board's empty state, 44px in Chats. */
.disc { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.disc--row { width: 44px; height: 44px; border-radius: 22px; }
.disc--event, .cover--event { background: var(--hair); }
.disc--event { color: var(--muted); }
.disc--mark { background: var(--aubergine); color: var(--apricot); }
.disc--wellness, .cover--wellness, .btn--wellness { background: var(--tone-wellness); }
.disc--parties, .cover--parties, .btn--parties { background: var(--tone-parties); }
.disc--outdoors, .cover--outdoors, .btn--outdoors { background: var(--tone-outdoors); }
.disc--arts, .cover--arts, .btn--arts { background: var(--tone-arts); }
.disc--games, .cover--games, .btn--games { background: var(--tone-games); }
/* The pressed Interested button in its Event's topic tone (events/actions): ink on the tone. */
.btn--tone { border-color: transparent; color: var(--ink); }

/* Event page: the practical part, then the link out, then who's going */
.prose--event { line-height: 1.5; }
/* Under a description cut to fit: where the rest is, right above the link out. */
.event-rest { margin: 0; }
/* The way out to the organiser: a quiet row, quieter than Interested and the Hangouts, named for what it is. */
.event-link { display: flex; align-items: center; gap: 8px; padding: 2px 2px; font-size: 14px; font-weight: 600; color: var(--green); min-width: 0; }
/* "Add another date", quiet, under the facts, for whoever listed it and staff. */
.event-link--add { align-self: flex-start; margin-top: -4px; }
.event-link__host { font-weight: 400; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.event-link__host::before { content: "·"; margin-right: 8px; color: var(--faint); }
/* An Event page breathes like a person's page: one column of sections with air between them, each section tight inside. */
.event { gap: 30px; padding-top: 12px; padding-bottom: 40px; }
.event__section { display: flex; flex-direction: column; gap: 10px; }

/* How to find each other on the day (Hangouts::Finding): one card of entries, theirs
   first, then the way to add yours and who sees it. */
.event__section.find { gap: 12px; }
.find-list { display: flex; flex-direction: column; padding: 0 16px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; }
.find-entry { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 14px; color: inherit; text-decoration: none; }
.find-entry + .find-entry { border-top: 1px solid var(--hair); }
.find-entry__head { display: flex; align-items: center; gap: 10px; }
.find-entry__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-entry__edit { font-weight: 600; }
.find-entry__text { font-size: 15px; line-height: 1.45; text-wrap: pretty; white-space: pre-line; overflow-wrap: anywhere; }
.find-entry__photos { display: flex; gap: 8px; }
.find-thumb-wrap { position: relative; display: block; }
.find-thumb { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; display: block; background: var(--photo); }
.find__note { text-align: center; text-wrap: pretty; }
/* One entry on its own page, and the form to add or change yours. */
.find-page { gap: 16px; padding-top: 6px; }
.find-page__who { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.find-page__name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.find-page__first { font-size: 17px; font-weight: 600; }
.find-page__text { font-size: 21px; line-height: 1.4; text-wrap: pretty; white-space: pre-line; overflow-wrap: anywhere; }
.find-page__photos { display: flex; flex-direction: column; gap: 10px; }
.find-page__photo { position: relative; }
/* Whole, never cropped: a sign or an entrance is often tall. A very tall one is
   held to most of the screen and shown entire inside it. */
.find-photo { width: 100%; height: auto; max-height: 75vh; border-radius: 16px; object-fit: contain; display: block; background: var(--photo); }
.find-page__all { text-align: center; font-weight: 500; }
.find-form { display: flex; flex-direction: column; gap: 10px; }
.find-form__label { margin-top: 0; }
.find-form__box { font-size: 15px; line-height: 1.5; }
.find-form__alert { color: var(--danger); }
.find-form__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.find-form__photo { position: relative; }
.find-form__remove { position: absolute; top: 6px; right: 6px; }
.find-form__hint { text-wrap: pretty; }
.find-form__note { margin-top: 8px; }
.find-form__save { margin-top: 6px; }
.find-form__delete { align-self: center; }
.event-actions { display: flex; gap: 10px; align-items: flex-start; }
.event-actions form { flex: 1 1 0; min-width: 0; display: flex; }
.event-actions > .btn { flex: 1 1 0; min-width: 0; }
/* Share, with who sharing is for under it (Events::Page#share_line). */
.event-share { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.event-share__line { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.35; text-wrap: balance; }
.event-interest-hint { font-size: 12px; line-height: 1.45; color: var(--muted); }
/* A quiet row of familiar people above the Event actions. */
.event-connections { display: flex; align-items: center; gap: 12px; }
.event-connections__portraits { display: flex; flex-shrink: 0; }
.event-connections__portrait { border: 2px solid var(--bg); }
.event-connections__portrait + .event-connections__portrait { margin-left: -8px; }
.event-connections__copy { min-width: 0; overflow-wrap: anywhere; }
.event-connections__label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.event-connections__sentence { font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.event-connections__sentence strong { font-weight: 600; color: var(--ink); }
/* Interested opens the rest: everything under the header is one frame, the same
   column of sections. Before the tap, a dashed note says what is waiting. */
.event__page { display: flex; flex-direction: column; gap: 30px; }
/* On a phone the text often runs larger (Android follows the system font size), so the
   same 30px reads cramped: half as much air again between the sections there. The
   laptop's column keeps its 30px. */
@media (max-width: 599px) {
  .event { gap: 46px; padding-top: 16px; padding-bottom: 56px; }
  .event__page { gap: 46px; }
}
.event-note { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px dashed var(--hair); border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.event-note strong { color: var(--ink); font-weight: 600; }
.event-note__icon { margin-top: 1px; }
/* The description's first paragraph, cut to two lines; the whole is under "More about it". */
/* An empty Hangout: bringing someone leads the opened page. */
.bring-along { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--green-soft); border-radius: 14px; color: var(--ink); }
.bring-along__icon { width: 36px; height: 36px; border-radius: 18px; background: var(--surf); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bring-along__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bring-along__head { font-size: 15px; font-weight: 600; }
.bring-along__line { font-size: 13px; color: var(--green-muted); text-wrap: pretty; }
/* On the day: the time, how long until it, the place and the way there, on green. */
.day-of { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; background: var(--green-tint); border-radius: 18px; margin-top: -8px; }
.day-of__word { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.day-of__when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.day-of__time { font-family: var(--serif); font-size: 34px; line-height: 1; }
.day-of__countdown { font-size: 14px; color: var(--green); }
.day-of__place { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.day-of__directions { background: var(--surf); border-color: var(--surf); color: var(--green); height: 48px; }
.day-of__cost { font-size: 13px; color: var(--green-muted); overflow-wrap: anywhere; }
/* A recurring Event's other dates, and Add another date, under the day-of card. */
.day-of__dates { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }
/* Edit Event: a recurring Event's dates are changed on All dates. */
.edit-dates { padding: 12px 14px; border-radius: 12px; background: var(--surf); border: 1px solid var(--hair); }
.edit-dates .icon:last-child { margin-left: auto; flex-shrink: 0; }
/* "More about it", folded on the day: a row that opens it. */
.event-more { border-top: 1px solid var(--hair); margin-top: -8px; }
.event-more__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.event-more__toggle::-webkit-details-marker { display: none; }
.event-more__mark { transition: transform 0.15s; }
.event-more[open] .event-more__mark { transform: rotate(180deg); }
.event-more__body { padding-bottom: 4px; }
.event-more__count { font-weight: 400; color: var(--muted); }
/* On the day the questions and "More about it" are two folded rows, one under the other. */
.event-folds { display: flex; flex-direction: column; margin-top: -8px; }
.event-folds .event-more { margin-top: 0; }
/* Questions about an Event (events/questions): the newest three in one card, each with
   its best answer cut to two lines, then the green band to See all. No reactions here. */
.event-questions { display: flex; flex-direction: column; padding: 0 16px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; }
.event-question { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 14px; color: inherit; }
.event-question + .event-question { border-top: 1px solid var(--hair); }
.event-question__body { font-family: var(--serif); font-size: 18px; line-height: 1.35; text-wrap: pretty; overflow-wrap: anywhere; }
.event-question__body p { margin: 0; }
.event-question__answer { display: flex; gap: 10px; align-items: flex-start; }
.event-question__said { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-question__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; }
.event-question__text { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-question__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--faint); }
.event-question__count { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.event-questions__all { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; margin: 0 -16px; border-top: 1px solid var(--green-line); border-radius: 0 0 15px 15px; background: var(--green-soft); font-size: 15px; font-weight: 600; color: var(--green); }
/* A question about an Event: the Event above it on its thread, the way to its page. */
.thread-event { display: flex; align-items: center; gap: 14px; padding: 16px; margin: 6px 0 16px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; color: inherit; }
.thread-event__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.thread-event__label { font-size: 12px; color: var(--muted); }
.thread-event__title { font-family: var(--serif); font-size: 19px; line-height: 1.2; text-wrap: pretty; overflow-wrap: anywhere; }
.thread-event__when { font-size: 13px; color: var(--muted); }
/* And at the top of its City Hall card, "About Bangkok Book Club Meetup": not a link, the card is one. */
.post__event { display: flex; align-items: center; gap: 10px; padding: 13px 14px; margin-bottom: 4px; border-radius: 14px; background: var(--bg); font-size: 14px; line-height: 1.35; color: var(--ink); }
.post__event > svg { flex-shrink: 0; }
.post__event-text { min-width: 0; overflow-wrap: anywhere; }
.post__event-text strong { font-weight: 600; }
/* A word that explains itself: "connections" to Help's answer, in the text's own colour. */
.quiet-link { color: inherit; text-decoration: underline dotted var(--faint); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* A person's page breathes: one column of sections with air between them, each section tight inside. */
.profile { gap: 30px; padding-top: 8px; }
.profile__section { display: flex; flex-direction: column; gap: 10px; }
.profile .section-label { margin-top: 0; }
.profile .identity { padding-top: 4px; }
/* The Bio, in the serif and upright: their own words, not a quote, with the line
   breaks they wrote. */
.profile__bio { font-size: 19px; line-height: 1.45; padding: 0 2px; text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-line; }
.profile--full .profile__bio { font-size: 20px; }
/* Socials on a profile: one row each, label, handle, and the way out when there is one. */
.socials { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.socials__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 14px; min-height: 50px; color: inherit; text-decoration: none; }
.socials__row + .socials__row { border-top: 1px solid var(--hair); }
.socials__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.socials__value { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-hero--tall { height: 300px; }
.profile .profile-footer { padding-top: 0; }

/* New Event: three ways in, link, images, text, with room between them. Not .slot, which is the Hangout card's. */
.submit { gap: 18px; }
.way-in { display: flex; flex-direction: column; gap: 6px; }
.way-in__field { display: flex; align-items: center; gap: 10px; width: 100%; border-radius: 12px; background: var(--surf); border: 1px solid var(--hair); padding: 12px 14px; }
.way-in__field:focus-within { border-color: var(--green); }
.way-in__input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--ink); }
.way-in__input:focus { outline: none; }
.way-in__input::placeholder, .edit-box::placeholder { color: var(--faint); }
.way-in__sub { font-size: 12px; color: var(--faint); padding: 0 4px; }

/* An Event's dates: All dates, its rows, and the forms to add, change or call one off. */
.dates { gap: 12px; padding-top: 6px; }
.dates-list { display: flex; flex-direction: column; padding: 0 16px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; }
.dates-list--menus { padding: 0 6px 0 16px; }
.date-row { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 14px 0; }
.date-row + .date-row { border-top: 1px solid var(--hair); }
.date-row__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.date-row__head { display: flex; align-items: center; gap: 8px; }
.dates-list:not(.dates-list--menus) .date-row__head { justify-content: space-between; }
.date-row__day { font-size: 15px; font-weight: 600; }
.date-row__day--off { color: var(--faint); }
.date-row__time { font-size: 13px; color: var(--muted); }
.date-row__where { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.date-row__note { font-size: 13px; line-height: 1.4; color: var(--muted); font-style: italic; text-wrap: pretty; overflow-wrap: anywhere; }
.date-row__more { width: 44px; height: 44px; margin-top: -10px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.date-row__menu[open] .date-row__more { background: var(--bg); color: var(--ink); }
.date-row__items { width: 220px; top: 36px; right: 4px; z-index: 5; }
.pill--next, .pill--on-now { background: var(--green-soft); color: var(--green); }
.pill--off { background: var(--amber-soft); color: var(--amber); }
.dates-none { font-size: 15px; font-weight: 600; padding: 2px 2px 4px; }
.dates-so-far { font-size: 13px; color: var(--muted); padding: 2px 2px 0; }
.date-form { gap: 8px; padding-top: 4px; }
.date-form__choices { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.date-form__choices .seg { cursor: pointer; font: inherit; font-size: 13px; }
.date-form__submit { margin-top: 10px; }
.date-form__submit--off { margin-top: 12px; }
.date-form__foot { text-align: center; text-wrap: pretty; padding: 2px 8px 0; }
.date-form__note { padding: 2px 2px 0; text-wrap: pretty; }
.date-form__keep { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--green); }
/* New Event: "Another edition of an Event?", then "Or something new". */
.another-of { gap: 0; padding-top: 6px; }
.another-of__label { margin: 0 0 2px; padding: 0 2px; }
.another-of__search { padding: 8px 0 4px; }
.another-of__none { padding: 6px 2px; }
.another-of__list { display: flex; flex-direction: column; padding: 0 2px; }
.another-of__row { color: inherit; padding: 8px 0; }
.another-of__list .another-of__row:first-child { border-top: 0; }
.another-of .disc { width: 32px; height: 32px; border-radius: 16px; }
.another-of .disc .icon { width: 15px; height: 15px; }
.another-of__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.another-of__title { font-size: 14px; font-weight: 600; }
.another-of__last { font-size: 12px; color: var(--muted); }
.another-of__or { margin: 14px 0 0; padding: 14px 2px 0; border-top: 1px solid var(--hair); }
/* After a paste: "Another Benjakitti Tuesday Run?", asked before anything is added. */
.another-date { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--green-soft); border-radius: 16px; }
.another-date[hidden] { display: none; }
.another-date__head { display: flex; align-items: flex-start; gap: 12px; }
.another-date__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.another-date__title { font-size: 15px; font-weight: 600; }
.another-date__line { font-size: 13px; line-height: 1.45; color: var(--green-muted); text-wrap: pretty; }
.another-date__no { min-height: 44px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--green); cursor: pointer; }
/* The form's default button for Enter, out of sight and out of the tab order. */
.default-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.way-in .shots { padding-top: 4px; }

/* Help: folded answers, then the Tell us form and its thanks. */
.qa-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.qa { border-top: 1px solid var(--hair); padding: 13px 4px; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa__mark { transition: transform 0.15s; }
.qa[open] .qa__mark { transform: rotate(90deg); }
.qa__a { font-size: 13px; color: var(--muted); line-height: 1.5; text-wrap: pretty; padding-top: 8px; }
.tell-us { display: flex; flex-direction: column; gap: 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; padding: 8px 12px; border-radius: 999px; background: var(--surf); border: 1px solid var(--hair); font-size: 13px; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.choice:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

/* Chat: quiet acknowledgments, recoverable text and accessible message actions. */
.room-mute { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; min-height: 44px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.room-mute[aria-pressed="true"] { color: var(--green); }
.messages { padding-bottom: calc(var(--chat-composer-height, 72px) + 14px); overflow-anchor: none; }
.message__meta { display: flex; align-items: center; gap: 4px; min-height: 16px; }
.message--me .message__meta { flex-direction: row-reverse; }
.message button:focus-visible, .chat-popover :focus-visible, .room-mute:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.message--selected .message__bubble, .message--highlight .message__bubble { box-shadow: 0 0 0 3px var(--green-soft); }
.chat-popover { position: fixed; margin: 0; inset: auto; border: 1px solid var(--hair); border-radius: 14px; padding: 6px; background: var(--surf); color: var(--ink); box-shadow: 0 8px 24px rgba(31,27,22,.12); overflow: auto; }
.chat-popover .menu__item { border: 0; background: transparent; font: inherit; width: 100%; min-height: 44px; cursor: pointer; text-align: left; text-decoration: none; }
.chat-popover .menu__item:hover { background: var(--bg); }
.chat-popover .menu__item--danger { color: var(--danger); border-top: 1px solid var(--hair); margin-top: 4px; border-radius: 0 0 10px 10px; }
.chat-popover form { margin: 0; }
.chat-popover__label { padding: 8px 12px; font-size: 12px; color: var(--muted); }
.chat-popover--hearts:popover-open { display: flex; flex-direction: column; overflow: hidden; }
.chat-popover--hearts .chat-popover__label { flex-shrink: 0; display: flex; justify-content: space-between; gap: 8px; }
.heart-people { list-style: none; margin: 0; padding: 0 0 4px; min-height: 0; max-height: 180px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.heart-person { padding: 6px 12px; font-size: 14px; overflow-wrap: anywhere; }
.chat-popover .heart-toggle { flex-shrink: 0; border-top: 1px solid var(--hair); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--muted); font-size: 13px; }
.heart-toggle svg { color: #C0392B; }
.heart-toggle.is-mine svg { fill: currentColor; }
/* The badge sits just under its message. Its tap area reaches past it, into the
   gap above and the gap before the next message, without taking room of its own. */
.message-heart { position: relative; display: flex; align-items: center; justify-content: flex-start; background: transparent; border: 0; border-radius: 12px; padding: 0; cursor: pointer; }
.message-heart::before { content: ""; position: absolute; inset: -3px -12px -10px; }
.message--me .message-heart { justify-content: flex-end; }
.message-heart__badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surf); color: var(--muted); font-size: 11px; line-height: 14px; }
.message-heart__badge svg { color: #C0392B; fill: currentColor; }
.message-heart.is-mine .message-heart__badge { color: #C0392B; border-color: #F3CFC9; background: #FBEAE7; }
.message__body { white-space: normal; }
.message__body p { margin: 0 0 .6em; }
.message__body p:last-child { margin: 0; }
.message__body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.message__bubble:has(.message__body), .message__bubble:has(.message__deleted) { white-space: normal; }
.message__reply, .message__pending-reply { display: flex; flex-direction: column; gap: 3px; width: 100%; border: 0; border-left: 2px solid currentColor; border-radius: 4px; padding: 6px 8px; margin: 0 0 7px; color: inherit; background: rgba(110,101,90,.08); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.message--me .message__reply { background: rgba(255,255,255,.12); }
.message__reply span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.message__reply--unavailable { cursor: default; font-style: italic; }
.message--deleted .message__bubble { background: transparent; border-color: var(--hair); color: var(--muted); font-style: italic; padding: 7px 11px; }
.message--deleted:not(.message--me) .message__author { display: block; }
.message--deleted:not(.message--me) .message__avatar { visibility: visible; }
.message__unread { color: var(--green); text-align: center; font-size: 12px; padding: 10px 0; display: flex; align-items: center; gap: 10px; }
.message__unread::before, .message__unread::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.message--failed .message__bubble { background: var(--green); border-color: var(--danger); }
.message--failed .message__time::after { content: none; }
.message__delivery { display: block; }
.message--failed .message__delivery, .message__error { color: var(--danger); }
.message__error { font-size: 12px; }
.message__error:empty { display: none; }
.message__recovery { display: flex; gap: 6px; flex-wrap: wrap; }
.message__recovery button { border: 1px solid var(--hair); background: var(--surf); color: var(--green); font: inherit; font-size: 12px; border-radius: 12px; min-height: 44px; padding: 4px 10px; cursor: pointer; }
.message--pending .message__body { white-space: pre-wrap; }
.composer--chat { display: flex; flex-direction: column; gap: 6px; }
.composer__entry { display: flex; gap: 8px; align-items: flex-end; width: 100%; }
.composer--chat textarea { resize: none; min-height: 46px; max-height: 160px; padding: 11px 16px; font-size: 16px; line-height: 22px; }
.composer__send:disabled { opacity: .4; cursor: default; }
.composer__status { font-size: 12px; color: var(--muted); }
.composer__status:empty { display: none; }
.composer__reply { display: flex; align-items: center; width: 100%; border-left: 2px solid var(--green); padding-left: 10px; color: var(--muted); font-size: 12px; }
.composer__reply div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.composer__reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer__reply strong { color: var(--green); }
.composer__reply button { border: 0; background: none; font: inherit; font-size: 24px; color: var(--muted); width: 44px; height: 44px; cursor: pointer; }
.latest { bottom: calc(var(--chat-composer-height, 72px) + 14px); min-height: 44px; }
[hidden] { display: none !important; }
.ended-drafts { width: 100%; font-size: 13px; }
.ended-drafts summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--green); }
.ended-drafts__text { white-space: pre-wrap; max-height: 120px; overflow: auto; user-select: text; }
.chat--ended .message__recovery { display: none; }

/* Fit the visual viewport while the mobile keyboard is visible. */
body.chat-keyboard-open .devbar { visibility: hidden; }
.app.chat-keyboard-open { position: fixed; top: var(--chat-viewport-top); bottom: auto; left: 0; right: 0; height: var(--chat-viewport-height); }
.app.chat-keyboard-open .screen { height: 100%; min-height: 0; padding-bottom: 0; }
.app.chat-keyboard-open .tabbar { display: none; }
.app.chat-keyboard-open .composer--chat { position: relative; inset: auto; transform: none; width: 100%; flex-shrink: 0; }
.app.chat-keyboard-open .messages { padding-bottom: 14px; }
.app.chat-keyboard-open .latest { bottom: 14px; }

.email-choice { display: flex; align-items: flex-start; gap: 12px; padding: 4px 2px; font-size: 14px; line-height: 1.5; }
.email-choice input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--green); }
.email-preference-error { color: var(--danger); }

/* Compact communication preferences in Settings. */
.communication-preference { display: block; padding: 18px 4px; }
.communication-preference__main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.communication-preference__copy { min-width: 0; }
.communication-preference__label { display: block; font-size: 16px; font-weight: 600; }
.communication-preference__description { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.communication-preference__control { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.communication-preference__control form { margin: 0; }
.communication-preference__state { min-width: 18px; color: var(--muted); font-size: 12px; }
.communication-preference__notice { margin: 8px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.communication-preference__notice:empty { display: none; }
.preference-switch { display: flex; align-items: center; justify-content: center; width: 46px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.preference-switch__track { display: block; width: 44px; height: 26px; padding: 3px; border-radius: 20px; background: var(--hair); transition: background .15s ease; }
.preference-switch__track::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--surf); transition: transform .15s ease; }
.preference-switch[aria-checked="true"] .preference-switch__track { background: var(--ink); }
.preference-switch[aria-checked="true"] .preference-switch__track::after { transform: translateX(18px); }
.preference-switch:disabled { cursor: default; opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .preference-switch__track, .preference-switch__track::after { transition: none; }
}

/* A native button covers the bubble; text, links and reply controls are siblings. */
.message__bubble { position: relative; }
.message__bubble:has(.message__bubble-button) { min-height: 44px; }
.message__bubble-button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; touch-action: manipulation; }
.message__text, .message__reply { position: relative; }
.message__text { pointer-events: none; }
.message__body a { pointer-events: auto; }
.message__author a, .heart-person a, .header__title-text > a { color: inherit; text-decoration: none; }
.message__author a:hover, .heart-person a:hover { text-decoration: underline; }
.message__edited { font-size: 11px; color: var(--faint); padding: 0 4px; }
.message--run-continues .message__time { display: none; }
.message--run-continues .message__meta:not(:has(.message-hearts, .message__edited, .message__delivery)) { display: none; }
.message__error:empty { display: none; }
.message__application { color: var(--green); display: inline-flex; max-width: 100%; vertical-align: bottom; white-space: pre; }
/* "Let Muhammad bin Sa… in": the name gives way, "Let" and "in" never do (let_in_label). */
.let-in { display: flex; min-width: 0; white-space: pre; }
.let-in__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn--let-in { min-width: 0; padding: 0 12px; }
.event__section .card[id^="hangout_application_"] { scroll-margin-top: 90px; }
.header__sub:has(#room-subtitle) { display: flex; align-items: center; gap: 4px; }
#room-subtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.header__sub:has(#room-subtitle) .muted-mark { flex-shrink: 0; }

/* Bring people along. The sheet a group chat's share icon opens (and an Event
   page's Share, for someone inside): a native popover at the foot of the column. */
.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 430px; box-sizing: border-box; border: 0; border-radius: 20px 20px 0 0; padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--surf); color: var(--ink); box-shadow: 0 -8px 30px rgba(31,27,22,0.12); }
.sheet:popover-open { display: flex; flex-direction: column; gap: 6px; }
.sheet::backdrop { background: rgba(31,27,22,0.32); }
.sheet__grip { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--hair); margin-bottom: 10px; }
.sheet__title { font-size: 22px; margin-bottom: 6px; }
.sheet__row { color: inherit; text-decoration: none; }
.sheet__row:first-of-type { border-top: 0; }
.sheet__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sheet__head { font-size: 15px; font-weight: 600; }
.sheet__cancel { min-height: 44px; margin-top: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
button.invite-quiet { width: 100%; background: none; font: inherit; text-align: left; cursor: pointer; }

/* An invitation at the door: who invited you, and what it does for you now. */
.door-invited { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--green); text-wrap: pretty; }
.door-invited svg { flex-shrink: 0; margin-top: 1px; }
.door-invited strong { font-weight: 600; }

/* Invite Connections: rows to pick, nobody picked to begin with, the button counting. */
.picker__list { gap: 6px; padding-bottom: 110px; }
.picker__note { padding: 2px 2px 8px; text-wrap: pretty; }
.picker__label { margin: 0; }
.picker__rows + .picker__label { margin-top: 14px; }
.picker__rows { display: flex; flex-direction: column; }
.picker__rows .row:first-child { border-top: 0; }
.pick { position: relative; cursor: pointer; }
.pick__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pick__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick__check { width: 26px; height: 26px; border-radius: 13px; border: 1.5px solid var(--hair); background: var(--surf); box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; }
.pick__input:checked + .pick__check { background: var(--green); border-color: var(--green); color: #fff; }
.pick__input:focus-visible + .pick__check { outline: 2px solid var(--green); outline-offset: 2px; }
.pick--off { cursor: default; opacity: 0.6; }
.picker__foot { position: fixed; left: 0; right: 0; bottom: var(--tabbar); padding: 12px 20px 14px; background: var(--bg); border-top: 1px solid var(--hair); z-index: 9; }
@media (min-width: 600px) { .picker__foot { max-width: 430px; left: 50%; transform: translateX(-50%); box-sizing: border-box; } }
.picker__foot .btn:disabled { opacity: 0.45; cursor: default; }

/* Right after joining a group chat, only for you, until any tap. */
.chat-tip { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-top: 4px; background: var(--surf); border: 1px solid var(--hair); border-radius: 14px; }
.chat-tip__head { display: flex; flex-direction: column; gap: 2px; padding-right: 32px; }
.chat-tip__title { font-size: 15px; font-weight: 600; }
.chat-tip__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chat-tip__actions form { margin: 0; }
.chat-tip__actions > :only-child { grid-column: 1 / -1; }
.chat-tip__btn { font-size: 14px; }
.chat-tip__close-form { position: absolute; top: 4px; right: 4px; margin: 0; }
.chat-tip__close { width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: var(--faint); cursor: pointer; }

/* Share outside Idavoll: the link alone. */
.share { gap: 20px; padding-top: 20px; padding-bottom: 36px; }
.share__headline { font-size: 30px; line-height: 1.15; }
.share__box { display: flex; flex-direction: column; gap: 10px; }
.share__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; border-radius: 13px; background: var(--surf); border: 1px solid var(--hair); padding: 0 14px; font-size: 14px; }
.share__url { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); min-width: 0; }
.share__go { margin-top: 4px; }
.share__invite { color: inherit; text-decoration: none; }
.share__earn { text-wrap: pretty; line-height: 1.5; }

/* An Event question opened signed out from a member's link. */
.shared-by { display: flex; align-items: center; gap: 10px; }
.shared-question { display: flex; flex-direction: column; gap: 14px; }
.shared-question__head { display: flex; flex-direction: column; gap: 6px; }
.shared-question__body { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 400; overflow-wrap: anywhere; }
.shared-answers { gap: 0; padding: 4px 16px; }
.shared-answer { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.shared-answer + .shared-answer { border-top: 1px solid var(--hair); }
.shared-answer__body { font-size: 16px; line-height: 1.5; }
.shared-answer__hearts { display: flex; align-items: center; gap: 4px; }
.shared-answer__heart { color: var(--danger); }
.shared-answers__more { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; }
.shared-gone { gap: 6px; padding: 18px 16px; align-items: center; text-align: center; }
.shared-gone__line { font-size: 15px; font-weight: 600; }