/* Community home, /portals (Shine 2026-11-12; design board 3 desktop and 3b phone, canvas "UNITE Community home
   redesign"). Everything here is scoped to body.ch-on:not(.in-room), so a Portal (body.in-room) and a single post
   keep their own look. The board's values, as drawn:
   ground #070A1C with stars and a violet glow; cards rgba(16,21,58,.85) with a 1px rgba(255,255,255,.08) line and
   22 to 28px corners; headings in Fraunces, words in Plus Jakarta Sans; violet #A78BFA / #C4B5FD, teal #5EEAD4
   (who is going), gold #FDE68A (dates), pink #F9A8D4 (love); the main button is a white pill with navy words.
   Layout: one main column plus a 340px right column from 1240px; one column on a phone with 16px gutters.
   The top bar, the bottom nav and the left nav are not styled here. */

body.ch-on:not(.in-room) {
  --ch-ink: #F4F5FB; --ch-dim: #B7BDE0; --ch-mute: #A9B0D6; --ch-soft: #E5E7F5; --ch-navy: #0B0F2A; --ch-ground: #070A1C;
  --ch-card: rgba(16,21,58,.85); --ch-line: rgba(255,255,255,.08);
  --ch-violet: #A78BFA; --ch-lilac: #C4B5FD; --ch-teal: #5EEAD4; --ch-gold: #FDE68A; --ch-pink: #F9A8D4;
  --ch-serif: 'Fraunces', Georgia, serif; --ch-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  background-color: #070A1C;
}
body.ch-on:not(.in-room) .cosmos {
  background-color: #070A1C;
  background-image:
    radial-gradient(60% 700px at 50% 0%, rgba(124,58,237,.22) 0%, rgba(124,58,237,0) 70%),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 9%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 41%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 83%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 4% 61%, rgba(196,181,253,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 39%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 66%, rgba(147,197,253,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 92%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 22%, rgba(255,255,255,.5) 50%, transparent 51%);
  background-size: 100% 100%, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}
body.ch-on:not(.in-room) .cosmos::before, body.ch-on:not(.in-room) .cosmos::after { display: none; }
/* uni-cosmos.js draws the shared sky; here it takes the board's ground and violet glow, and keeps its stars */
html body.ch-on:not(.in-room) { background-color: #070A1C !important; }
html body.ch-on:not(.in-room) .uni-cosmos { background-color: #070A1C; }
html body.ch-on:not(.in-room) .uni-cosmos-gradient { opacity: 1; background: radial-gradient(60% 700px at 50% 0%, rgba(124,58,237,.22) 0%, rgba(124,58,237,0) 70%), #070A1C; }
body.ch-on:not(.in-room) .container { font-family: var(--ch-sans); color: var(--ch-ink); }
@media (max-width: 1239px) { html body.ch-on:not(.in-room) .container { padding-left: 16px; padding-right: 16px; } }
.ch-narrow { display: none; }

/* What the board does not draw folds away here; each still works from its own page or tab. */
body.ch-on .feed-eyebrow, body.ch-on #tiHero, body.ch-on #uIntent { display: none !important; }
html body.ch-on:not(.in-room) .container > #uniLaunches,
html body.ch-on:not(.in-room) #tiLine, html body.ch-on:not(.in-room) #tiHow { display: none !important; }
html body.ch-on.ch-out:not(.in-room) .container > #intentWrap,
html body.ch-on.ch-out:not(.in-room) .container > #uMore { display: none !important; }
body.in-room #chTonight, body.in-room #chJoin, body.in-room #chRail, body.in-room #chMid { display: none !important; }

/* ---------- order: greeting and faces, tabs, Tonight, the share box, the feed ---------- */
html body.ch-on:not(.in-room) .container > #chHome { order: -35 !important; }
html body.ch-on:not(.in-room) .container > #lenses { order: -34 !important; }
html body.ch-on:not(.in-room) .container > #chTonight { order: -33 !important; }
html body.ch-on:not(.in-room) .container > #intentWrap,
html body.ch-on:not(.in-room) .container > #chJoin { order: -28 !important; }
html body.ch-on:not(.in-room) .container > #chRail { display: none; }
/* a picked tab brings its feed straight up under the tabs */
html body.ch-on.lens-focus:not(.in-room) .container > #chTonight { display: none !important; }

/* ---------- greeting ---------- */
body.ch-on:not(.in-room) .ch-home { display: block; text-align: left; padding: 18px 0 0; }
.ch-hi { margin: 0; font-family: var(--ch-serif); font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: 0; color: var(--ch-ink); }
.ch-hi em { font-style: italic; font-weight: 700; color: #DDD6FE; }
.ch-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ch-dim); max-width: none; }

/* ---------- faces ---------- */
.ch-faces { display: flex; gap: 12px; overflow-x: auto; margin: 22px -16px 0; padding: 4px 16px 4px; scrollbar-width: none; }
.ch-faces::-webkit-scrollbar { display: none; }
.ch-f { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 68px; color: var(--ch-ink); text-decoration: none; }
.ch-ring { width: 68px; height: 68px; border-radius: 50%; padding: 3px; box-sizing: border-box; display: block; background: #2A3368; transition: filter .2s ease, transform .2s ease; }
.ch-f.fresh .ch-ring, .ch-f.fam .ch-ring { background: conic-gradient(from 200deg, #F472B6, #A78BFA, #38BDF8, #5EEAD4, #F472B6); }
.ch-f:hover .ch-ring { filter: brightness(1.15); }
.ch-f:active .ch-ring { transform: scale(.96); }
.ch-ring img, .ch-ring .ch-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #070A1C; box-sizing: border-box; object-fit: cover; }
.ch-ini { background: linear-gradient(135deg, #3B2A8C, #1B2A6B); color: #fff; font-family: var(--ch-sans); font-weight: 800; font-size: 22px; }
.ch-add .ch-ring { background: none; border: 2px dashed rgba(167,139,250,.7); display: grid; place-items: center; color: var(--ch-lilac); padding: 0; }
.ch-f b { font-size: 12px; font-weight: 700; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-sk { width: 68px; height: 92px; border-radius: 34px; background: rgba(255,255,255,.05); }

/* ---------- tabs: one row, the picked one a white pill ---------- */
html body.ch-on:not(.in-room) #lenses { display: flex; justify-content: flex-start; gap: 8px; margin-top: 22px; padding-top: 0; padding-bottom: 4px; border-top: 0; }
html body.ch-on:not(.in-room) #lenses .lens { flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--ch-soft);
  border: 1px solid rgba(255,255,255,.12); font-family: var(--ch-sans); font-weight: 600; font-size: 14px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.ch-on:not(.in-room) #lenses .lens:hover { border-color: rgba(255,255,255,.3); color: #fff; }
html body.ch-on:not(.in-room) #lenses .lens.active { background: #F4F5FB; color: #0B0F2A; border-color: #F4F5FB; font-weight: 800; }
html body.ch-on:not(.in-room) #lenses .lens .em { display: none; }
html body.ch-on:not(.in-room) #lenses.stuck { background: rgba(7,10,28,.9); }

/* ---------- section heads ---------- */
.ch-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.ch-sec-h h2 { margin: 0; font-family: var(--ch-serif); font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--ch-ink); letter-spacing: 0; }
.ch-sec-h a { flex: none; font-size: 13px; font-weight: 700; color: var(--ch-lilac); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; margin: -12px 0; }
.ch-sec-h a:hover { color: #E9E3FF; }
.ch-sec-h.sm { margin-bottom: 4px; }
.ch-sec-h.sm h2 { font-size: 20px; }

/* ---------- Tonight ---------- */
.ch-tonight { margin-top: 22px; }
.ch-tonight[hidden] { display: none; }
.ch-t-row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; }
.ch-t-row::-webkit-scrollbar { display: none; }
.ch-t { flex: 0 0 264px; scroll-snap-align: start; position: relative; height: 340px; border-radius: 22px; overflow: hidden; color: var(--ch-ink); border: 1px solid var(--ch-line);
  display: block; text-decoration: none; background: linear-gradient(160deg, #1E1550 0%, #121845 100%); transition: transform .25s ease, border-color .25s ease; }
.ch-t:hover { transform: translateY(-4px); border-color: #4C3FB0; }
.ch-t-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ch-t-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,28,.75) 0%, rgba(7,10,28,0) 30%, rgba(7,10,28,0) 45%, rgba(7,10,28,.94) 100%); }
.ch-t-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ch-t-when { background: rgba(7,10,28,.8); color: var(--ch-gold); font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 6px 10px; border-radius: 9px; }
.ch-t-kind { display: none; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 10px; }
.ch-t-bot { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.ch-t-bot b { font-family: var(--ch-serif); font-size: 21px; line-height: 1.12; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 12px rgba(7,10,28,.6); }
.ch-t-where { display: none; font-size: 14px; color: var(--ch-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-t-fr { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ch-teal); }
.ch-t-faces { display: flex; padding-right: 8px; }
.ch-t-faces img, .ch-t-faces .ch-ini { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #070A1C; box-sizing: border-box; object-fit: cover; margin-right: -8px; font-size: 11px; display: flex; align-items: center; justify-content: center; }

/* ---------- the share box ---------- */
html body.ch-on:not(.in-room) #intentWrap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; margin: 22px 0 0 !important; padding: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--ch-line); border-radius: 22px; box-sizing: border-box; }
html body.ch-on:not(.in-room) #intentWrap > .ch-me-w { grid-column: 1; grid-row: 1; width: 40px; height: 40px; }
.ch-me { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: 17px; }
html body.ch-on:not(.in-room) #intentWrap > #intent { grid-column: 2; grid-row: 1; width: 100%; box-sizing: border-box; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,10,28,.6); color: var(--ch-ink); padding: 0 56px 0 16px; font-family: var(--ch-sans); font-size: 16px; box-shadow: none; }
html body.ch-on:not(.in-room) #intentWrap > #intent:focus { border-color: rgba(167,139,250,.7); box-shadow: 0 0 0 3px rgba(167,139,250,.16); }
html body.ch-on:not(.in-room) #intentWrap > #intent::placeholder { color: var(--ch-mute); }
html body.ch-on:not(.in-room) #intentWrap > .ti-cam { display: none !important; }
html body.ch-on:not(.in-room) #intentWrap > .ti-send { top: 16px; right: 16px; transform: none; width: 38px; height: 38px; background: #F4F5FB; color: #0B0F2A; box-shadow: none; opacity: 0; pointer-events: none; }
html body.ch-on:not(.in-room) #intentWrap.has-text > .ti-send, html body.ch-on:not(.in-room) #intentWrap.has-photo > .ti-send { opacity: 1; pointer-events: auto; }
html body.ch-on:not(.in-room) #intentWrap > .intent-clear { top: 35px; right: 62px; }
html body.ch-on:not(.in-room) #intentWrap > :not(.ch-me-w):not(#intent):not(.ti-send):not(.intent-clear):not(.ti-cam):not(input):not(.ch-chips) { grid-column: 1 / -1; }
html body.ch-on:not(.in-room) #intentWrap > .ch-chips { grid-column: 1 / -1; }
.ch-chips { display: flex; gap: 6px; align-items: center; }
.ch-chip { flex: 1; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; font-family: var(--ch-sans); font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; min-height: 44px; transition: filter .2s ease; }
.ch-chip:hover { filter: brightness(1.2); }
.ch-chip.pink { background: rgba(244,114,182,.14); color: var(--ch-pink); }
.ch-chip.teal { background: rgba(94,234,212,.12); color: var(--ch-teal); }
.ch-chip.gold { background: rgba(253,230,138,.12); color: var(--ch-gold); }
.ch-aud { display: none; margin-left: auto; font-size: 13px; color: var(--ch-mute); }
.ch-join { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--ch-line); border-radius: 22px; }
.ch-join[hidden] { display: none; }
.ch-join > .ch-me { flex: 0 0 40px; width: 40px; height: 40px; }
.ch-join-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--ch-mute); }
.ch-join-t b { font-size: 15px; font-weight: 800; color: var(--ch-ink); }
.ch-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 999px; background: #F4F5FB; color: #0B0F2A; font-family: var(--ch-sans);
  font-weight: 800; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.ch-pill:hover { background: #fff; transform: translateY(-1px); color: #0B0F2A; }
.ch-pill.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.ch-pill.ghost { background: rgba(167,139,250,.16); color: var(--ch-lilac); }
.ch-pill.ghost:hover { background: rgba(167,139,250,.26); color: #E9E3FF; }

/* the fold of older home blocks stays one quiet line under the share box */
html body.ch-on:not(.in-room) .u-more { margin-top: 12px; }
html body.ch-on:not(.in-room) .u-more-b { min-height: 44px; justify-content: flex-start; padding: 0 8px; border: 0; background: none; color: var(--ch-lilac); font-family: var(--ch-sans); font-size: 13px; font-weight: 700; }

/* ---------- the feed: image-first cards ---------- */
html body.ch-on:not(.in-room) #feed { margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }
html body.ch-on:not(.in-room) #feed > .card { margin: 0 -16px; background: var(--ch-card); border: 0; border-top: 1px solid var(--ch-line); border-bottom: 1px solid var(--ch-line); border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; font-family: var(--ch-sans); }
/* a post reads author, words, picture, actions: the DOM keeps its order, the card lays it out */
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) { display: flex; flex-direction: column; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad { display: contents; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > * { order: 4; margin-left: 16px; margin-right: 16px; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .card-head { order: 1; margin: 0; padding: 14px 16px; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > h3,
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .event-when,
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .body-text { order: 2; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > :not(.card-pad):not(.comments) { order: 3; margin-top: 4px; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .actions { order: 5; margin: 0; padding: 10px 12px; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .actions ~ * { order: 6; }
html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > [hidden] { display: none; }
html body.ch-on:not(.in-room) #feed > .card > .comments { order: 7; }
html body.ch-on:not(.in-room) #feed .card-head { gap: 10px; align-items: center; }
html body.ch-on:not(.in-room) #feed .card-head .avatar, html body.ch-on:not(.in-room) #feed .card-head .avatar-source { width: 40px; height: 40px; flex: 0 0 40px; }
html body.ch-on:not(.in-room) #feed .card-head .avatar:not(:has(img)) { background: linear-gradient(135deg, #3B2A8C, #1B2A6B); color: #fff; }
html body.ch-on:not(.in-room) #feed .card-head .name { font-weight: 800; font-size: 14px; color: var(--ch-ink); }
html body.ch-on:not(.in-room) #feed .card-head .meta { margin-top: 2px; font-size: 12px; color: var(--ch-mute); }
html body.ch-on:not(.in-room) #feed .card-head .meta .cat { color: var(--ch-pink); font-weight: 600; background: none; padding: 0; border: 0; }
html body.ch-on:not(.in-room) #feed .card .body-text { font-family: var(--ch-serif); font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--ch-ink); margin-top: 0; margin-bottom: 12px; }
html body.ch-on:not(.in-room) #feed .card .body-text:empty { display: none; }
html body.ch-on:not(.in-room) #feed .card h3 { font-family: var(--ch-serif); font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--ch-ink); margin-top: 0; margin-bottom: 8px; letter-spacing: 0; }
/* the picture: full width, never cut through a face. Up to 4:5 it shows whole; taller, it keeps the top. */
html body.ch-on:not(.in-room) #feed .card .post-media { display: block; width: 100%; height: auto; max-height: min(125vw, 560px); object-fit: cover; object-position: center 18%; border-radius: 0; margin: 0; background: #0B0F2A; }
html body.ch-on:not(.in-room) #feed .card .post-media.own { max-height: min(125vw, 640px); object-fit: cover; }
html body.ch-on:not(.in-room) #feed .card .yt-wrap .post-media { aspect-ratio: 16 / 9; max-height: none; object-position: center; }
/* a series line ("Today's practice") and its Follow sit on one row; Follow is a quiet 44px outline pill */
html body.ch-on:not(.in-room) #feed .card .c-series { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; margin-top: 4px; font-size: 13px; }
html body.ch-on:not(.in-room) #feed .card .c-series a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ch-lilac); font-weight: 700; text-decoration: none; }
html body.ch-on:not(.in-room) #feed .card .c-follow { flex: none; height: 44px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--ch-ink);
  font-family: var(--ch-sans); font-weight: 700; font-size: 14px; box-shadow: none; }
html body.ch-on:not(.in-room) #feed .card .c-follow.on { border-color: rgba(167,139,250,.5); color: var(--ch-lilac); }
html body.ch-on:not(.in-room) #feed .card .actions { gap: 8px; flex-wrap: wrap; row-gap: 8px; }
html body.ch-on:not(.in-room) #feed .card .actions .act { height: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.14); color: var(--ch-soft);
  font-family: var(--ch-sans); font-weight: 600; font-size: 14px; }
html body.ch-on:not(.in-room) #feed .card .actions .act:hover { border-color: rgba(255,255,255,.3); color: #fff; }
html body.ch-on:not(.in-room) #feed .card .actions .act.act-icon { padding: 0; width: 44px; justify-content: center; }
html body.ch-on:not(.in-room) #feed .card .actions .act.helped { border: 0; background: rgba(244,114,182,.1); color: var(--ch-pink); font-weight: 800; padding: 0 18px; min-width: 0; gap: 8px; transition: transform .2s ease, background .2s ease; }
html body.ch-on:not(.in-room) #feed .card .actions .act.helped:active { transform: scale(1.12); }
html body.ch-on:not(.in-room) #feed .card .actions .act.helped.on { background: rgba(244,114,182,.24); color: var(--ch-pink); box-shadow: none; }
html body.ch-on:not(.in-room) #feed .card .actions .act.helped .heart-icon { width: 18px; height: 18px; fill: none; stroke: var(--ch-pink); stroke-width: 2; filter: none; }
html body.ch-on:not(.in-room) #feed .card .actions .act.helped.on .heart-icon { fill: var(--ch-pink); stroke: var(--ch-pink); }
html body.ch-on:not(.in-room) #feed .card .actions .act.helped .hc { color: var(--ch-pink); margin: 0; }
html body.ch-on:not(.in-room) #feed .card .link-pill { border-radius: 999px; }
html body.ch-on:not(.in-room) #feed .card .link-pill { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: var(--ch-lilac); font-family: var(--ch-sans); font-weight: 700; font-size: 14px; box-shadow: none; align-self: flex-start; }
html body.ch-on:not(.in-room) #feed .card .link-pill:hover { border-color: rgba(167,139,250,.6); color: #E9E3FF; }
html body.ch-on:not(.in-room) #feed .card .avatar-fallback { background: linear-gradient(135deg, #3B2A8C, #1B2A6B) !important; color: #fff; font-family: var(--ch-sans); font-weight: 800; }
html body.ch-on:not(.in-room) #feed .card .card-head .avatar-fallback { width: 40px; height: 40px; flex: 0 0 40px; }
html body.ch-on:not(.in-room) #feed .card .cl-kind:not(:empty) { font-family: var(--ch-sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 6px 10px; border-radius: 9px; background: rgba(253,230,138,.12); color: var(--ch-gold); box-shadow: none; }
html body.ch-on:not(.in-room) #feed .card .reach-chip { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(94,234,212,.12);
  border: 0; color: var(--ch-teal); font-family: var(--ch-sans); font-weight: 700; font-size: 14px; box-shadow: none; align-self: flex-start; }
html body.ch-on:not(.in-room) #feed .card .cl-why { color: var(--ch-mute); font-family: var(--ch-sans); font-size: 13px; }
html body.ch-on:not(.in-room) #feed .card .cl-kind { white-space: nowrap; }
html body.ch-on:not(.in-room) #feed .card .c-uni-tag { font-size: 12px; font-weight: 600; color: var(--ch-mute); background: none; border: 0; padding: 0; }
html body.ch-on:not(.in-room) #feed .card .c-uni-tag::before { content: "· "; }
html body.ch-on:not(.in-room) #feed .card .more-btn { color: var(--ch-mute); }
/* an event: the flyer whole, a dark fade into the card, gold date, serif title, white pill */
html body.ch-on:not(.in-room) #feed > .card.event { border-color: var(--ch-line); }
html body.ch-on:not(.in-room) #feed > .card.event img { display: block; width: 100%; height: auto; max-height: min(125vw, 560px); object-fit: cover; object-position: center 25%; border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
html body.ch-on:not(.in-room) #feed > .card.event .card-pad { position: relative; padding: 12px 18px 18px; }
html body.ch-on:not(.in-room) #feed > .card.event .event-date { font-family: var(--ch-sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ch-gold); }
html body.ch-on:not(.in-room) #feed > .card.event h3 { font-size: 28px; line-height: 1.05; margin: 8px 0; }
html body.ch-on:not(.in-room) #feed > .card.event .event-tag { background: rgba(7,10,28,.8); color: var(--ch-ink); border: 0; border-radius: 9px; font-family: var(--ch-sans); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
html body.ch-on:not(.in-room) #feed .card .event-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html body.ch-on:not(.in-room) #feed .card .event-ctas .btn-primary { flex: 1 1 auto; height: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border-radius: 999px; background: #F4F5FB;
  color: #0B0F2A; font-family: var(--ch-sans); font-weight: 800; font-size: 15px; border: 0; box-shadow: none; }
html body.ch-on:not(.in-room) #feed .card .event-ctas .btn-primary.is-going { background: rgba(94,234,212,.16); color: var(--ch-teal); }
html body.ch-on:not(.in-room) #feed .card .event-ctas .btn-ghost { flex: 1 1 auto; height: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: var(--ch-ink); font-family: var(--ch-sans); font-weight: 700; font-size: 15px; border: 0; }
/* "Remind me" and "Tell me when there's another like this" ran together: one wrapping row, a clear gap */
html body.ch-on:not(.in-room) #feed .card .ev-more-like { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 21px 0 0; color: var(--ch-lilac); font-family: var(--ch-sans); font-weight: 700; font-size: 13px; }
html body.ch-on:not(.in-room) #feed > .card.person { padding-bottom: 4px; }
html body.ch-on:not(.in-room) #feed > .skel { border-radius: 22px; background: rgba(255,255,255,.04); }

/* ---------- phone and tablet: healers and Uni's check-in, inside the feed ---------- */
.ch-mid { display: flex; flex-direction: column; gap: 22px; font-family: var(--ch-sans); }
.ch-m-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.ch-m-row::-webkit-scrollbar { display: none; }
.ch-m-h { flex: 0 0 150px; border-radius: 20px; overflow: hidden; background: var(--ch-card); border: 1px solid var(--ch-line); color: var(--ch-ink); display: block; text-decoration: none; }
.ch-m-h img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 20%; background: #0B0F2A; }
.ch-m-h > span { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.ch-m-b { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ch-teal); }
.ch-m-h b { font-size: 13px; line-height: 1.25; }
.ch-m-w { font-size: 11px; color: var(--ch-mute); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-m-heal .ch-sec-h h2 { font-size: 22px; }

/* in the feed on a wide screen the block also carries the live card and the Soul Tribe box; a phone keeps board 3b's two */
.ch-mid .ch-live, .ch-mid .ch-tribe, .ch-mid .ch-new { display: none; }
@media (min-width: 672px) { .ch-mid .ch-live, .ch-mid .ch-tribe, .ch-mid .ch-new { display: block; } .ch-mid .ch-tribe .ch-pill { width: auto; } }
/* ---------- board 3's "New here?" card ---------- */
.ch-new { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--ch-line); font-family: var(--ch-sans); }
.ch-new-t { margin: 0 0 6px; font-family: var(--ch-serif); font-weight: 700; font-size: 18px; color: var(--ch-ink); }
.ch-new-s { margin: 0 0 4px; font-size: 13px; line-height: 1.55; color: var(--ch-dim); }
.ch-new a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 800; color: var(--ch-lilac); text-decoration: none; }
.ch-new a:hover { color: #E9E3FF; }
/* ---------- the Healers tab and an empty tab ---------- */
.ch-hgrid { font-family: var(--ch-sans); }
.ch-hgrid-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ch-hgrid-in .ch-m-h img, .ch-hgrid-in .ch-m-ini { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; font-size: 44px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 600px) { .ch-hgrid-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
html body.ch-on:not(.in-room) #feed .ch-empty { text-align: left; padding: 24px; border-radius: 24px; background: var(--ch-card); border: 1px solid var(--ch-line); font-family: var(--ch-sans); }
html body.ch-on:not(.in-room) #feed .ch-empty .endcap-line { font-family: var(--ch-serif); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ch-ink); }
html body.ch-on:not(.in-room) #feed .ch-empty .friends-sub { margin: 8px 0 16px; font-size: 14px; line-height: 1.55; color: var(--ch-dim); max-width: 46ch; }
html body.ch-on:not(.in-room) #feed .ch-empty .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 48px; padding: 0 24px; border-radius: 999px; background: #F4F5FB; color: #0B0F2A;
  font-family: var(--ch-sans); font-weight: 800; font-size: 15px; border: 0; box-shadow: none; }
/* ---------- Uni's check-in ---------- */
.ch-uni { border-radius: 26px; padding: 20px; background: linear-gradient(160deg, #241C66, #16134A); border: 1px solid rgba(167,139,250,.35); font-family: var(--ch-sans); color: var(--ch-ink); }
.ch-uni.mid { border-radius: 22px; padding: 16px; }
.ch-uni-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ch-uni-h img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.ch-uni-n { margin: 0; font-weight: 800; font-size: 15px; }
.ch-uni-s { margin: 0; font-size: 12px; color: var(--ch-lilac); }
.ch-uni-q { margin: 0 0 14px; font-family: var(--ch-serif); font-size: 19px; font-weight: 500; line-height: 1.35; }
.ch-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-mood { height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 0; color: var(--ch-ink); font-family: var(--ch-sans); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s ease; }
.ch-mood:hover { background: rgba(255,255,255,.16); }
.ch-mood[aria-pressed="true"] { background: #F4F5FB; color: #0B0F2A; font-weight: 800; }

/* ---------- right column pieces ---------- */
.ch-rail { flex-direction: column; gap: 22px; font-family: var(--ch-sans); color: var(--ch-ink); }
.ch-live a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; min-height: 168px; box-sizing: border-box; padding: 18px 96px 16px 18px; border-radius: 26px; overflow: hidden;
  color: var(--ch-ink); text-decoration: none; border: 1px solid rgba(167,139,250,.35);
  background: radial-gradient(120% 90% at 80% 0%, rgba(124,58,237,.55) 0%, rgba(124,58,237,0) 60%), radial-gradient(90% 80% at 0% 20%, rgba(56,189,248,.28) 0%, rgba(56,189,248,0) 60%), linear-gradient(180deg, #171B4D 0%, #070A1C 100%); }
.ch-live.on a { border-color: rgba(248,113,113,.35); }
.ch-live-b { background: rgba(7,10,28,.8); color: var(--ch-gold); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 5px 9px; border-radius: 7px; }
.ch-live.on .ch-live-b { background: #DC2626; color: #fff; animation: ch-pulse 1.8s ease-in-out infinite; }
@keyframes ch-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.65); } 50% { box-shadow: 0 0 0 7px rgba(248,113,113,0); } }
.ch-live b { font-size: 17px; line-height: 1.3; }
.ch-live .ch-pill { position: absolute; right: 16px; bottom: 16px; }
.ch-rail .ch-h-b { display: none; }
.ch-rail .ch-live b { font-size: 15px; }
@media (min-width: 1500px) { .ch-rail .ch-h-b { display: inline; } }
.ch-box { background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: 26px; padding: 20px; }
.ch-box-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ch-mute); }
.ch-box-sub .pink { color: var(--ch-pink); } .ch-box-sub .violet { color: var(--ch-lilac); }
.ch-h-list { display: flex; flex-direction: column; gap: 12px; }
.ch-h, .ch-s { display: flex; align-items: center; gap: 12px; color: var(--ch-ink); text-decoration: none; min-height: 48px; border-radius: 14px; }
.ch-h:hover b { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ch-h > img, .ch-h > .ch-ini, .ch-s img, .ch-s .ch-ini { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ch-s img, .ch-s .ch-ini { flex-basis: 44px; width: 44px; height: 44px; }
.ch-h-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.ch-h-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-h-t br { display: none; }
.ch-h-t span { display: block; color: var(--ch-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-h-b { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--ch-teal); background: rgba(94,234,212,.1); padding: 5px 8px; border-radius: 8px; }
.ch-add-b { flex: none; height: 44px; padding: 0 16px; border-radius: 999px; border: 0; font-family: var(--ch-sans); font-weight: 800; font-size: 13px; cursor: pointer; background: rgba(167,139,250,.16); color: var(--ch-lilac); }
.ch-add-b.on { background: var(--ch-violet); color: #0B0F2A; }
.ch-s-msg { margin: 12px 0 0; font-size: 13px; color: var(--ch-gold); }
.ch-tribe .ch-pill { width: 100%; box-sizing: border-box; }

/* ---------- 640px and up: cards get their corners back ---------- */
@media (min-width: 672px) {
  html body.ch-on:not(.in-room) #feed > .card { margin: 0; border: 1px solid var(--ch-line); border-radius: 28px; }
}

/* ---------- desktop: main column and the right column, as board 3 ---------- */
@media (min-width: 1240px) {
  /* v3499 (Shine: "I don't like off-center feed"; not "a big fat feed"): one 680px column on the true centre of the
     content area (the body is already padded by the left nav), equal gutters either side. The right column sits in
     the right gutter only when it fits there (community-home.js sets body.ch-rail-on from the measured width);
     otherwise its cards go into the feed after the third post, as on a phone. */
  html body.ch-on:not(.in-room) .container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, var(--ch-feed, 640px)) minmax(0, 1fr) !important; column-gap: 0; align-items: start;
    max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
  html body.ch-on:not(.in-room) .container > :not(#chRail) { grid-column: 2 !important; max-width: none !important; width: auto !important; justify-self: stretch !important; min-width: 0; }
  html body.ch-on:not(.in-room) .container > #chRail { display: none; }
  html body.ch-on.ch-rail-on:not(.in-room) .container > #chRail { display: flex; grid-column: 3 !important; grid-row: 1 / span 90; order: -100 !important; justify-self: start; margin: 28px 0 0 24px;
    width: var(--ch-rail, 240px); box-sizing: border-box; }
  html body.ch-on.ch-rail-on:not(.in-room) .container > #chRail[hidden] { display: none; }
  .ch-m-row { margin: 0; padding: 0 0 4px; }
  .ch-wide { display: inline; } .ch-narrow { display: none; }
  body.ch-on:not(.in-room) .ch-home { padding-top: 28px; }
  .ch-hi { font-size: 40px; }
  .ch-sub { margin-top: 8px; font-size: 16px; }
  .ch-faces { gap: 16px; margin: 26px 0 0; padding: 4px 2px 6px; }
  .ch-f { gap: 8px; min-width: 78px; }
  .ch-ring, .ch-sk { width: 78px; height: 78px; }
  .ch-sk { height: 104px; }
  .ch-f b { max-width: 86px; }
  html body.ch-on:not(.in-room) #lenses { gap: 10px; margin-top: 26px; position: static; }
  html body.ch-on:not(.in-room) #lenses { gap: 8px; }
  html body.ch-on:not(.in-room) #lenses .lens { height: 44px; padding: 0 15px; }
  .ch-tonight { margin-top: 26px; }
  .ch-sec-h { margin-bottom: 14px; }
  .ch-tonight .ch-sec-h h2 { font-size: 26px; }
  .ch-tonight .ch-sec-h a { font-size: 14px; }
  .ch-t-row { gap: 16px; margin: 0; padding: 4px 0; scroll-padding-left: 0; }
  .ch-t { flex-basis: 340px; height: 420px; border-radius: 26px; }
  .ch-t-top { top: 16px; left: 16px; right: 16px; }
  .ch-t-when { font-size: 12px; padding: 7px 11px; border-radius: 10px; }
  .ch-t-kind, .ch-t-where { display: block; }
  .ch-t-bot { left: 20px; right: 20px; bottom: 20px; gap: 10px; }
  .ch-t-bot b { font-size: 26px; }
  .ch-t-fr { font-size: 13px; gap: 10px; }
  .ch-t-faces img, .ch-t-faces .ch-ini { width: 30px; height: 30px; margin-right: -9px; }
  html body.ch-on:not(.in-room) #intentWrap { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 24px; margin-top: 26px !important; }
  html body.ch-on:not(.in-room) #intentWrap > .ch-me-w { width: 46px; height: 46px; }
  html body.ch-on:not(.in-room) #intentWrap > #intent { height: 50px; padding-left: 20px; }
  html body.ch-on:not(.in-room) #intentWrap > .ti-send { top: 24px; right: 24px; }
  html body.ch-on:not(.in-room) #intentWrap > .intent-clear { top: 43px; right: 70px; }
  html body.ch-on:not(.in-room) #intentWrap > .ch-chips { grid-column: 2; gap: 8px; flex-wrap: wrap; }
  .ch-chip { flex: 0 0 auto; }
  .ch-aud { display: inline; }
  .ch-join { margin-top: 26px; padding: 18px; border-radius: 24px; gap: 14px; }
  .ch-join > .ch-me { flex-basis: 46px; width: 46px; height: 46px; }
  .ch-join-t { font-size: 14px; } .ch-join-t b { font-size: 16px; }
  html body.ch-on:not(.in-room) #feed { margin-top: 26px; gap: 26px; }
  html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > * { margin-left: 20px; margin-right: 20px; }
  html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .card-head { padding: 18px 20px; margin: 0; }
  html body.ch-on:not(.in-room) #feed > .card[data-id]:not(.event):not(.person) > .card-pad > .actions { padding: 14px 16px; margin: 0; }
  html body.ch-on:not(.in-room) #feed .card-head { gap: 12px; }
  html body.ch-on:not(.in-room) #feed .card-head .avatar, html body.ch-on:not(.in-room) #feed .card-head .avatar-source { width: 46px; height: 46px; flex-basis: 46px; }
  html body.ch-on:not(.in-room) #feed .card .card-head .avatar-fallback { width: 46px; height: 46px; flex-basis: 46px; }
  html body.ch-on:not(.in-room) #feed .card-head .name { font-size: 15px; }
  html body.ch-on:not(.in-room) #feed .card-head .meta { font-size: 13px; }
  html body.ch-on:not(.in-room) #feed .card .body-text { font-size: 21px; margin-bottom: 16px; }
  html body.ch-on:not(.in-room) #feed .card h3 { font-size: 24px; }
  html body.ch-on:not(.in-room) #feed .card .post-media, html body.ch-on:not(.in-room) #feed .card .post-media.own { max-height: 620px; }
  html body.ch-on:not(.in-room) #feed .card .actions .act { padding: 0 18px; }
  html body.ch-on:not(.in-room) #feed > .card.event img { max-height: 620px; }
  html body.ch-on:not(.in-room) #feed > .card.event .card-pad { padding: 16px 26px 26px; }
  html body.ch-on:not(.in-room) #feed > .card.event h3 { font-size: 36px; }
  html body.ch-on:not(.in-room) #feed > .card.event .event-date { font-size: 12px; letter-spacing: .14em; }
  html body.ch-on:not(.in-room) #feed .card .event-ctas .btn-primary, html body.ch-on:not(.in-room) #feed .card .event-ctas .btn-ghost { flex: 0 0 auto; height: 52px; padding: 0 28px; }
}
@media (max-width: 1239px) {
  .ch-wide { display: none; } .ch-narrow { display: inline; }
  html body.ch-on:not(.in-room) #lenses { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-t, .ch-ring, .ch-pill { transition: none; }
  .ch-live.on .ch-live-b { animation: none; }
}