/* ==========================================================================
   ZELENCIO — COMMUNITY
   --------------------------------------------------------------------------
   A market feed. The layout follows the shape people already know, because a
   social feed is not the place to be inventive — anything unfamiliar here
   only makes somebody hunt for the button they expected.

   One column, centred, 640px. Wider than that and a line of text is too long
   to scan comfortably; narrower and media has nowhere to breathe.
   ========================================================================== */

.cm {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 110px;
}

/* ── Top bar ──────────────────────────────────────────────────────────────
   Title, search, notifications, and the reader's own avatar. That avatar is
   the fix for the page having had no route to your own profile at all. */

.cmb {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
}
.cmb__t {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 26px; font-weight: 700; color: var(--ink);
}
.cmb__r { display: flex; align-items: center; gap: 6px; }

.cmb__i {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.cmb__i:hover { background: var(--bg-inset); color: var(--ink); }

.cmb__me { display: block; width: 34px; height: 34px; margin-left: 4px; }
.cmb__me img, .cmb__me .cm-av {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid var(--brand);
}

.cmb__new {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--brand); color: #041018;
  font: 700 13px 'Inter', sans-serif; text-decoration: none;
  white-space: nowrap;
}

/* ── Scopes ───────────────────────────────────────────────────────────── */

.cmt {
  display: flex; gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.cmt::-webkit-scrollbar { display: none; }

.cmt__i {
  position: relative; flex: none;
  padding: 13px 14px;
  font: 600 15px 'Inter', system-ui, sans-serif;
  color: var(--ink-3); text-decoration: none;
  white-space: nowrap;
}
.cmt__i:hover  { color: var(--ink-2); }
.cmt__i.is-on  { color: var(--ink); font-weight: 700; }
.cmt__i.is-on::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--brand);
}

/* ── Movers strip ─────────────────────────────────────────────────────── */

.cmm {
  display: flex; gap: 8px;
  padding: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.cmm::-webkit-scrollbar { display: none; }

.cmm__i {
  display: flex; align-items: center; gap: 7px;
  flex: none;
  padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-raised); text-decoration: none;
}
.cmm__i:hover { border-color: var(--ink-faint); }
.cmm__i img { width: 20px; height: 20px; border-radius: 50%; }
.cmm__s { font: 700 13px 'Inter', sans-serif; color: var(--ink); }
.cmm__p { font: 600 12.5px 'JetBrains Mono', monospace; }
.cmm__p.up   { color: var(--up); }
.cmm__p.down { color: var(--down); }
.cmm__p.flat { color: var(--ink-3); }

.cm-main { padding: 0 12px; }

/* ── Composer ─────────────────────────────────────────────────────────── */

.cmc {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-raised);
}
.cmc__who { border: 0; background: none; padding: 0; cursor: pointer; }
.cmc__who img, .cmc__who .cm-av {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
}
.cmc__box { position: relative; }
.cmc__box textarea {
  width: 100%; min-height: 46px; padding: 10px 0;
  border: 0; background: none; resize: none; color: var(--ink);
  font: 400 17px 'Inter', system-ui, sans-serif; line-height: 1.5;
}
.cmc__box textarea:focus { outline: none; }
.cmc__box textarea::placeholder { color: var(--ink-faint); }

.cmc__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.cmc__tools { display: flex; gap: 2px; }
.cmc__t {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--brand-deep);
  font: 700 15px 'Inter', sans-serif; cursor: pointer;
}
.cmc__t:hover { background: var(--brand-wash); }
.cmc__right { display: flex; align-items: center; gap: 12px; }
.cmc__n { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   THE POST CARD
   ══════════════════════════════════════════════════════════════════════════ */

.cp {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  animation: cm-in .26s ease backwards;
}
@keyframes cm-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cp { animation: none; } }

.cp__h {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 11px; align-items: center;
  margin-bottom: 12px;
}
.cp__av img, .cp__av .cm-av {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
}
.cp__who { min-width: 0; }
.cp__n {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font: 700 15px 'Inter', sans-serif; color: var(--ink); text-decoration: none;
}
.cp__dot, .cp__t { font-weight: 400; font-size: 13.5px; color: var(--ink-3); }
.cp__sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px;
  font-size: 12.5px; color: var(--ink-3);
}
.cp__lh {
  padding: 1px 7px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand-deep);
  font-size: 10.5px; font-weight: 700;
}

.cp__follow {
  padding: 7px 15px;
  border: 0; border-radius: 999px;
  background: var(--brand); color: #041018;
  font: 700 13px 'Inter', sans-serif; cursor: pointer;
  white-space: nowrap;
}
.cp__follow.is-on {
  background: none; border: 1px solid var(--line); color: var(--ink-2);
}

.cp__more {
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: none; color: var(--ink-3);
  font-size: 15px; cursor: pointer; line-height: 1;
}
.cp__more:hover { background: var(--bg-inset); color: var(--ink); }

.cp__x {
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
  overflow-wrap: anywhere; white-space: pre-wrap;
}

/* ── Coin chips ───────────────────────────────────────────────────────────
   Logo and name from SQL, price and change from Firebase. A symbol we do not
   list is dropped rather than shown as an empty chip — a chip with no logo
   and no price tells a reader nothing and looks broken. */

.cp__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.cp__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  background: var(--bg-inset);
  text-decoration: none;
}
.cp__chip:hover { background: var(--bg-sunk); }
.cp__chip img { width: 18px; height: 18px; border-radius: 50%; }
.cp__chipS { font: 700 12.5px 'Inter', sans-serif; color: var(--ink); }
.cp__chipP { font: 600 12px 'JetBrains Mono', monospace; }
.cp__chipP.up   { color: var(--up); }
.cp__chipP.down { color: var(--down); }
.cp__chipP.flat { color: var(--ink-3); }

/* ── Media ────────────────────────────────────────────────────────────── */

.cp__media {
  display: grid; gap: 3px;
  margin-top: 12px;
  border-radius: 14px; overflow: hidden;
}
.cp__m2, .cp__m4 { grid-template-columns: 1fr 1fr; }
.cp__m3 { grid-template-columns: 1fr 1fr; }
.cp__m3 > *:first-child { grid-row: span 2; }
.cp__media img, .cp__media video {
  width: 100%; height: 100%; max-height: 430px; object-fit: cover; display: block;
}
.cp__m1 img, .cp__m1 video { max-height: 500px; object-fit: contain; background: var(--bg-inset); }

/* ── Reactions ────────────────────────────────────────────────────────────
   Only reactions somebody actually gave are shown, plus one button to add
   yours. A permanent row of six empty emoji is noise. */

.cp__rxs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.cp__rx {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.cp__rx:hover  { border-color: var(--ink-faint); }
.cp__rx.is-mine { border-color: var(--brand); background: var(--brand-wash); }
.cp__rxE { font-size: 14px; line-height: 1; }
.cp__rxN { font: 700 12.5px 'Inter', sans-serif; color: var(--ink-2); }

.cp__rxAdd {
  width: 32px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-3); cursor: pointer;
}
.cp__rxAdd:hover { border-color: var(--brand); color: var(--brand-deep); }

.cm-pop { animation: cm-pop .32s ease; }
@keyframes cm-pop { 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* The picker that floats above the add button. */
.cp__rxpop {
  position: absolute; z-index: 900;
  display: flex; gap: 2px;
  padding: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
  opacity: 0; transform: translateY(6px) scale(.94);
  transition: opacity .16s ease, transform .16s ease;
}
.cp__rxpop.is-in { opacity: 1; transform: none; }
.cp__rxpop button {
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: none; cursor: pointer; font-size: 19px;
  transition: transform .12s ease;
}
.cp__rxpop button:hover { transform: scale(1.28); background: var(--bg-inset); }
@media (prefers-reduced-motion: reduce) {
  .cp__rxpop, .cp__rxpop button, .cp__rx { transition: none; }
}

/* ── Footer counters ──────────────────────────────────────────────────── */

.cp__f {
  display: flex; align-items: center; gap: 26px;
  margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.cp__st {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-3); font: 600 13px 'Inter', sans-serif;
  text-decoration: none;
}
.cp__st:hover { color: var(--ink); }
.cp__st.is-on { color: var(--up); }

/* ── The more-options sheet ───────────────────────────────────────────── */

.cms { position: fixed; inset: 0; z-index: 9990; }
.cms__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.cms__box {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg-raised);
  border-radius: 20px 20px 0 0;
  animation: cms-up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes cms-up { from { transform: translateY(100%); } }
@media (min-width: 700px) {
  .cms__box {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(380px, 92vw); transform: translate(-50%, -50%);
    border-radius: 18px; animation: none;
  }
}
.cms__grab {
  width: 38px; height: 4px; margin: 4px auto 12px;
  border-radius: 3px; background: var(--line);
}
.cms__t {
  text-align: center; margin-bottom: 10px;
  font: 700 15px 'Inter', sans-serif; color: var(--ink);
}
.cms__i {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 8px;
  border: 0; border-top: 1px solid var(--line-soft);
  background: none; cursor: pointer; text-align: left;
  font: 500 15px 'Inter', sans-serif; color: var(--ink);
}
.cms__i:hover { background: var(--bg-inset); }
.cms__i--bad { color: var(--down); }
.cms__ic { width: 20px; text-align: center; font-size: 16px; color: var(--ink-3); }
.cms__i--bad .cms__ic { color: var(--down); }
.cms__x {
  width: 100%; margin-top: 10px; padding: 13px;
  border: 0; border-radius: 12px;
  background: var(--bg-inset); color: var(--ink);
  font: 600 15px 'Inter', sans-serif; cursor: pointer;
}
/* ── Autocomplete ─────────────────────────────────────────────────────── */

.cm-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  max-height: 250px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-raised);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}
.cm-sug {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer; text-align: left;
}
.cm-sug:hover { background: var(--bg-inset); }
.cm-sug img, .cm-sug .cm-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.cm-sug b { display: block; font-size: 13.5px; color: var(--ink); }
.cm-sug i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }

/* ── Media in the composer ────────────────────────────────────────────── */

.cm-media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cm-media__i {
  position: relative; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden; background: var(--bg-inset);
}
.cm-media__i img, .cm-media__i video { width: 100%; height: 100%; object-fit: cover; }
.cm-media__x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .68); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.cm-media__bar {
  position: absolute; left: 10%; right: 10%; top: 50%;
  height: 3px; border-radius: 2px; background: var(--line);
  overflow: hidden;
}
.cm-media__bar i {
  display: block; height: 100%; width: 40%;
  background: var(--brand);
  animation: cm-up 1.1s ease-in-out infinite;
}
@keyframes cm-up { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

/* ── Poll builder ─────────────────────────────────────────────────────── */

.cm-poll { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--bg-inset); }
.cm-poll__opts { display: grid; gap: 8px; }
.cm-poll__o {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink);
  font: 400 14px 'Inter', sans-serif;
}
.cm-poll__o:focus { outline: none; border-color: var(--brand); }
.cm-poll__row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.cm-mini {
  padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink-2);
  font: 600 12.5px 'Inter', sans-serif; cursor: pointer;
}
.cm-mini--off:hover { border-color: var(--down); color: var(--down); }

/* ── Post card ────────────────────────────────────────────────────────── */

.cm-feed { display: grid; gap: 12px; }

.cm-post {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  animation: cm-in .28s ease backwards;
}
@keyframes cm-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cm-post { animation: none; } }

.cm-post__av img, .cm-post__av .cm-av {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
}
.cm-av--none {
  display: grid; place-items: center;
  background: var(--bg-inset); color: var(--ink-3);
  font: 700 16px 'Inter', sans-serif;
}
.cm-av--lg { width: 84px; height: 84px; font-size: 30px; border-radius: 50%; }

.cm-post__h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cm-post__n {
  font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none;
}
.cm-post__hd, .cm-post__t { font-size: 13px; color: var(--ink-3); }

.cm-tick {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 4px;
  border-radius: 50%;
  background: var(--brand); color: #041018;
  font-size: 9px; font-weight: 900;
  vertical-align: middle;
}

.cm-badge {
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.cm-badge--off { background: rgba(229, 56, 79, .12); color: var(--down); }

.cm-post__x {
  margin-top: 6px;
  font-size: 15px; line-height: 1.6; color: var(--ink);
  overflow-wrap: anywhere;
}
.cm-link { color: var(--brand-deep); text-decoration: none; }
.cm-coin {
  color: var(--brand-deep); font-weight: 700; text-decoration: none;
  padding: 1px 5px; border-radius: 5px; background: var(--brand-wash);
}

.cm-post__media { display: grid; gap: 5px; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.cm-m2, .cm-m4 { grid-template-columns: 1fr 1fr; }
.cm-m3 { grid-template-columns: 1fr 1fr; }
.cm-m3 > *:first-child { grid-row: span 2; }
.cm-post__media img, .cm-post__media video {
  width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block;
}

.cm-post__acts {
  display: flex; align-items: center; gap: 22px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.cm-act {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font: 600 12.5px 'Inter', sans-serif;
  text-decoration: none; padding: 0;
}
.cm-act:hover { color: var(--ink); }
.cm-act--flat { cursor: default; }
.cm-act.is-on { color: var(--down); }
.cm-act__i { font-size: 15px; }

.cm-pop .cm-act__i { animation: cm-pop .32s ease; }
@keyframes cm-pop { 40% { transform: scale(1.38); } 100% { transform: scale(1); } }

/* ── Poll on a post ───────────────────────────────────────────────────── */

.cm-pollv { display: grid; gap: 7px; margin-top: 12px; }
.cm-pollv__o {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); cursor: pointer; overflow: hidden;
  font-family: inherit;
}
.cm-pollv__o:disabled { cursor: default; }
.cm-pollv__o.is-mine { border-color: var(--brand); }
.cm-pollv__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--brand-wash);
  transition: width .45s ease;
}
@media (prefers-reduced-motion: reduce) { .cm-pollv__bar { transition: none; } }
.cm-pollv__t, .cm-pollv__p { position: relative; font-size: 13.5px; color: var(--ink); }
.cm-pollv__p { font-weight: 700; }
.cm-pollv__f { font-size: 12px; color: var(--ink-3); }

/* ── Comments ─────────────────────────────────────────────────────────── */

.cm-reply {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-raised);
}
.cm-reply textarea {
  flex: 1; min-height: 44px; resize: none;
  border: 0; background: none; color: var(--ink);
  font: 400 15px 'Inter', sans-serif;
}
.cm-reply textarea:focus { outline: none; }

.cm-comments { display: grid; gap: 4px; }
.cm-c { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; }
.cm-c--reply { padding-left: 40px; }
.cm-c__av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cm-c__h { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.cm-c__h b { font-size: 13.5px; color: var(--ink); }
.cm-c__h span { font-size: 12px; color: var(--ink-3); }
.cm-c__x { margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cm-c__r {
  margin-top: 5px; border: 0; background: none; padding: 0;
  color: var(--ink-3); font: 600 12px 'Inter', sans-serif; cursor: pointer;
}
.cm-c__r:hover { color: var(--brand-deep); }

/* ── Profile ──────────────────────────────────────────────────────────── */

.cm-cover {
  height: 150px;
  background: linear-gradient(120deg, var(--bg-inset), var(--bg-sunk));
  background-size: cover; background-position: center;
}
@media (min-width: 700px) { .cm-cover { height: 210px; } }

.cm-head { display: flex; align-items: flex-end; gap: 14px; margin-top: -42px; flex-wrap: wrap; }
.cm-head__av img, .cm-head__av .cm-av {
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid var(--bg); object-fit: cover; display: block;
}
.cm-head__b { flex: 1; min-width: 0; padding-bottom: 4px; }
.cm-head__n { margin: 0; font-size: 21px; font-weight: 700; color: var(--ink); }
.cm-head__h { display: flex; gap: 8px; align-items: center; margin-top: 4px;
              font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.cm-head__act { padding-bottom: 4px; }

.cm-about { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.cm-stats { display: flex; gap: 22px; margin: 16px 0; flex-wrap: wrap; }
.cm-stat b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.cm-stat span { font-size: 12px; color: var(--ink-3); }

.cm-lhlink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--brand); border-radius: 12px;
  background: var(--brand-wash);
  color: var(--brand-deep); font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.cm-lhlink__c { font-size: 18px; }

/* ── Right rail, cards, misc ──────────────────────────────────────────── */

.cm-aside { display: none; }
@media (min-width: 1160px) { .cm-aside { display: grid; gap: 12px; align-self: start;
                                         position: sticky; top: 84px; } }

.cm-card {
  padding: 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-raised);
}
.cm-card__h { font-size: 12px; font-weight: 700; letter-spacing: .07em;
              text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.cm-card__p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

.cm-mini-id {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; text-decoration: none;
}
.cm-mini-id img, .cm-mini-id .cm-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cm-mini-id__n { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cm-mini-id__h { display: block; font-size: 12px; color: var(--ink-3); }

.cm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px;
  border: 0; border-radius: 999px;
  background: var(--brand); color: #041018;
  font: 700 14px 'Inter', sans-serif; cursor: pointer; text-decoration: none;
}
.cm-btn:hover { filter: brightness(1.06); }
.cm-btn--sm { padding: 8px 18px; font-size: 13px; }
.cm-btn--ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.cm-btn.is-on { background: var(--bg-inset); color: var(--ink); }
.cm-btn[disabled] { opacity: .5; cursor: default; }

.cm-signin {
  padding: 26px 20px; margin-bottom: 16px;
  border: 1px dashed var(--line); border-radius: 16px;
  text-align: center;
}
.cm-signin strong { display: block; font-size: 16px; color: var(--ink); }
.cm-signin p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.cm-signin__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.cm-limits { display: grid; gap: 8px; margin-bottom: 18px; }
@media (min-width: 560px) { .cm-limits { grid-template-columns: repeat(3, 1fr); } }
.cm-limit {
  padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg-raised);
}
.cm-limit__k { display: block; font-size: 12px; color: var(--ink-3); }
.cm-limit__v { display: block; margin-top: 4px;
               font-family: 'JetBrains Mono', monospace;
               font-size: 17px; font-weight: 700; color: var(--ink); }

.cm-handle { position: relative; }
.cm-handle__at {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 15px;
}
.cm-handle input { padding-left: 30px; }

.cm-search input {
  width: 100%; padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink);
  font: 400 15px 'Inter', sans-serif;
}
.cm-search input:focus { outline: none; border-color: var(--brand); }

.cm-results { display: grid; gap: 4px; }
.cm-res {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px; text-decoration: none;
}
.cm-res:hover { background: var(--bg-inset); }
.cm-res img, .cm-res .cm-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cm-res b { display: block; font-size: 14px; color: var(--ink); }
.cm-res i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); }

.cm-notes { display: grid; gap: 2px; }
.cm-note { display: flex; gap: 12px; padding: 13px 12px; border-radius: 10px; text-decoration: none; }
.cm-note:hover { background: var(--bg-inset); }
.cm-note__i {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-inset); color: var(--brand-deep); font-size: 14px;
}
.cm-note__t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.cm-note__d { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

.cm-pickid {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg); cursor: pointer; margin-bottom: 8px; text-align: left;
}
.cm-pickid:hover { border-color: var(--brand); }
.cm-pickid img, .cm-pickid .cm-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cm-pickid b { display: block; font-size: 14px; color: var(--ink); }
.cm-pickid i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }

.cm-empty { padding: 46px 20px; text-align: center; }
.cm-empty--sm { padding: 26px 16px; }
.cm-empty__i { font-size: 30px; color: var(--ink-faint); margin-bottom: 12px; }
.cm-empty__t { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.cm-empty__d { margin: 8px auto 0; max-width: 42ch; font-size: 13.5px;
               line-height: 1.6; color: var(--ink-3); }

.cm-more {
  display: block; width: 100%; margin-top: 14px; padding: 13px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-raised); color: var(--ink-2);
  font: 600 14px 'Inter', sans-serif; cursor: pointer;
}
.cm-more:hover { border-color: var(--brand); color: var(--brand-deep); }

.cm-err {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 9px;
  background: rgba(229, 56, 79, .1); color: var(--down);
  font-size: 13px;
}

/* ── Skeletons ────────────────────────────────────────────────────────── */

.cm-skel {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: 16px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-raised);
}
.cm-skel__av { width: 44px; height: 44px; border-radius: 50%; }
.cm-skel__b { display: grid; gap: 8px; align-content: start; }
.cm-skel__l { height: 11px; border-radius: 5px; }
.cm-skel__av, .cm-skel__l {
  background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-sunk) 37%, var(--bg-inset) 63%);
  background-size: 400% 100%;
  animation: cm-shim 1.3s ease infinite;
}
@keyframes cm-shim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .cm-skel__av, .cm-skel__l { animation: none; }
}

/* ==========================================================================
   PROFILE — AND WHY THE TWO KINDS LOOK DIFFERENT
   --------------------------------------------------------------------------
   Somebody arriving from a post has to tell at a glance whether they are
   reading a project that can list a coin, or a social space that cannot.

   So a Launch Hub profile carries the brand cyan, a ribbon and a Projects
   tab. A community is quieter and has none of them. Same page, two clearly
   different things.
   ========================================================================== */

.cm-profile .cm-cover { position: relative; }

.cm-profile.is-lh .cm-cover {
  background-image: linear-gradient(125deg,
      color-mix(in srgb, var(--brand) 22%, var(--bg-sunk)), var(--bg-sunk));
  border-bottom: 2px solid var(--brand);
}
.cm-profile.is-community .cm-cover {
  background-image: linear-gradient(125deg, var(--bg-inset), var(--bg-sunk));
}

.cm-ribbon {
  position: absolute; left: 16px; bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--brand); color: #041018;
  font: 700 11px 'Inter', sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}

.cm-pwrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }

.cm-phead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-top: -40px;
}
.cm-phead__av img, .cm-phead__av .cm-av {
  width: 88px; height: 88px; border-radius: 50%;
  border: 3px solid var(--bg); object-fit: cover; display: block;
}
.cm-profile.is-lh .cm-phead__av img,
.cm-profile.is-lh .cm-phead__av .cm-av { border-color: var(--brand); }

.cm-phead__act { padding-bottom: 6px; }

.cm-pname {
  margin: 14px 0 0;
  font-size: 22px; font-weight: 700; color: var(--ink);
}
.cm-phandle {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 5px;
  font-size: 14px; color: var(--ink-3);
}
.cm-badge--lh { background: var(--brand-wash); color: var(--brand-deep); }

.cm-joined { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }

/* Followers and following are buttons — a count you cannot open is a dead
   end, and somebody's following list is how you find who to read next. */
.cm-pstats { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0 18px; }
.cm-pstat {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit;
}
.cm-pstat--flat { cursor: default; }
.cm-pstat b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.cm-pstat span { font-size: 12.5px; color: var(--ink-3); }
.cm-pstat:not(.cm-pstat--flat):hover b { color: var(--brand-deep); }

.cm-ptabs {
  display: flex; gap: 2px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.cm-ptabs::-webkit-scrollbar { display: none; }

.cm-ptab {
  position: relative; flex: none;
  padding: 13px 15px;
  border: 0; background: none; cursor: pointer;
  font: 600 14px 'Inter', sans-serif; color: var(--ink-3);
  white-space: nowrap;
}
.cm-ptab.is-on { color: var(--ink); }
.cm-ptab.is-on::after {
  content: ''; position: absolute;
  left: 13px; right: 13px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--brand);
}

/* ── Launch Hub link block ────────────────────────────────────────────── */

.cm-lhlink {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px;
  gap: 12px; align-items: center;
  padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--brand); border-radius: 13px;
  background: var(--brand-wash);
  text-decoration: none;
}
.cm-lhlink__i {
  width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--brand); color: #041018; font-size: 17px;
}
.cm-lhlink b { display: block; font-size: 14.5px; color: var(--ink); }
.cm-lhlink i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.cm-lhlink__c { color: var(--brand-deep); font-size: 18px; }

/* ── Projects ─────────────────────────────────────────────────────────── */

.cm-projects { display: grid; gap: 8px; }
.cm-proj {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px;
  gap: 12px; align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-raised); text-decoration: none;
}
.cm-proj:hover { border-color: var(--brand); }
.cm-proj img, .cm-proj .cm-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cm-proj b { display: block; font-size: 14.5px; color: var(--ink); }
.cm-proj i { display: block; font-style: normal; font-size: 12.5px; color: var(--brand-deep); }
.cm-proj__c { color: var(--ink-faint); font-size: 17px; }

.cm-people { display: grid; gap: 3px; }

/* A comment shown on a profile, linking back to its post. */
.cm-cx {
  display: block; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--bg-raised); text-decoration: none;
}
.cm-cx__t { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.cm-cx__m { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* ── The compose button ───────────────────────────────────────────────── */

.cm-fab {
  position: fixed;
  right: 18px; bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 500;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--brand); color: #041018;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
  cursor: pointer;
  transition: transform .16s ease;
}
.cm-fab:hover { transform: scale(1.06); }
.cm-fab:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .cm-fab { transition: none; } }

@media (min-width: 1160px) {
  /* On a wide screen the composer is already visible, so the button moves
     out of the way of the right rail rather than floating over it. */
  .cm-fab { right: 32px; bottom: 32px; }
}

/* ── The invitation bar ───────────────────────────────────────────────── */

.cm-prompt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--bg-raised);
}
.cm-prompt__i {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-wash); color: var(--brand-deep); font-size: 15px;
}
.cm-prompt__t { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }

/* Community rendered inside another page — the Launch Hub profile tab. */
.cm-inline { padding: 0; }
.cm-inline .cm-feed { gap: 10px; }

/* ── Classes the rewrite left without rules ───────────────────────────── */

.cmc__b { min-width: 0; }
.cm-c__b { min-width: 0; }
.cm-note__b { flex: 1; min-width: 0; }
.cm-narrow { max-width: 640px; margin: 0 auto; padding-top: 16px; }

/* The explore page still uses the plain tab strip. */
.cm-tabs {
  display: flex; gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tab {
  position: relative; flex: none;
  padding: 12px 15px;
  border: 0; background: none; cursor: pointer;
  font: 600 14.5px 'Inter', system-ui, sans-serif;
  color: var(--ink-3); text-decoration: none; white-space: nowrap;
}
.cm-tab.is-on { color: var(--ink); }
.cm-tab.is-on::after {
  content: ''; position: absolute;
  left: 13px; right: 13px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--brand);
}

/* Upload preview on the manage form. An upload with no visible result reads
   as an upload that did not happen. */
.cm-prev { margin-top: 10px; }
.cm-prev img {
  width: 76px; height: 76px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line);
}
.cm-prev--wide img { width: 100%; max-width: 320px; height: 96px; border-radius: 12px; }
.cm-prev.is-busy { opacity: .5; }

/* The number beside each footer icon. Named, so the live poll writes to the
   right one instead of counting children by position. */
.cp__stN { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MEDIA VIEWER, VIDEO, REACTORS, DISCOVERY
   ========================================================================== */

/* ── Full screen ──────────────────────────────────────────────────────── */

.cmv {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .93);
  animation: cmv-in .18s ease;
}
@keyframes cmv-in { from { opacity: 0; } }

.cmv__m {
  max-width: 100%; max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}
.cmv__x, .cmv__dl {
  position: absolute; top: calc(16px + env(safe-area-inset-top));
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 21px; cursor: pointer; text-decoration: none;
}
.cmv__x  { right: 16px; }
.cmv__dl { right: 66px; font-size: 19px; }
.cmv__x:hover, .cmv__dl:hover { background: rgba(255, 255, 255, .26); }

/* ── Video with our own controls ──────────────────────────────────────────
   A default control bar looks like a file preview rather than part of the
   site, and its menu leads places we do not control. */

.cpv { position: relative; display: block; cursor: pointer; }
.cpv video { width: 100%; height: 100%; display: block; object-fit: cover; }

.cpv__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 30px; color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
  background: rgba(0, 0, 0, .18);
  transition: opacity .18s ease;
}
.cpv.is-playing .cpv__play { opacity: 0; }

.cpv__full {
  position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 14px;
}
.cpv__full:hover { background: rgba(0, 0, 0, .78); }

/* ── The reaction total, and who reacted ──────────────────────────────── */

.cp__rxAll {
  padding: 5px 12px;
  border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--ink-3);
  font: 600 12.5px 'Inter', sans-serif; cursor: pointer;
}
.cp__rxAll:hover { color: var(--ink); background: var(--bg-inset); }

.cmr { max-height: 52vh; overflow-y: auto; margin: 4px 0 10px; }
.cmr__i {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 6px; text-decoration: none;
}
.cmr__i:hover { background: var(--bg-inset); border-radius: 10px; }
.cmr__i img, .cmr__i .cm-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cmr__b { flex: 1; min-width: 0; }
.cmr__b b { display: block; font-size: 14px; color: var(--ink); }
.cmr__b i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.cmr__e { font-size: 19px; }

/* ── Discovery headings on the explore page ───────────────────────────── */

.cmd__h {
  margin: 18px 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.cmd__h:first-child { margin-top: 4px; }

/* A post body is tappable, so it should say so. */
.cp__x, .cp__media { cursor: pointer; }
.cp__x a, .cp__media a { cursor: pointer; }

/* ==========================================================================
   AVATARS — SHAPE CARRIES MEANING
   --------------------------------------------------------------------------
   A person or a community is a CIRCLE. A Launch Hub project is a ROUNDED
   SQUARE. The same convention X uses for people against organisations, and
   for the same reason: you should be able to tell a project from a person
   before reading a single word.

   Verification adds a ring and a badge — blue for a profile, gold for a
   project — so the two kinds of verification are never confused either.
   ========================================================================== */

.cma {
  position: relative; display: block;
  width: 44px; height: 44px; flex: none;
}
.cma img, .cma__ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-inset); color: var(--ink-3);
  font: 700 16px 'Inter', sans-serif;
}

/* Launch Hub: a project, not a person. */
.cma--lh img, .cma--lh .cma__ph { border-radius: 13px; }

/* Verified profile — blue. */
.cma--v img, .cma--v .cma__ph {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
}

/* Verified Launch Hub — gold, because it is a different claim. */
.cma--vlh img, .cma--vlh .cma__ph {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #f5a524;
}

.cma__tick {
  position: absolute; right: -3px; bottom: -3px;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--brand); color: #041018;
  font-size: 9px; font-weight: 900; line-height: 1;
}
.cma--vlh .cma__tick { background: #f5a524; }

.cma--sm { width: 34px; height: 34px; }
.cma--sm .cma__ph { font-size: 13px; }
.cma--sm .cma__tick { width: 14px; height: 14px; font-size: 7.5px; }
.cma--lg { width: 88px; height: 88px; }
.cma--lg .cma__ph { font-size: 30px; }

/* ── Profiles to follow, every ten posts ──────────────────────────────────
   A feed of nothing but posts gives a new reader no way to build one worth
   reading. This is the only thing that turns a first visit into a second. */

.cmsug {
  padding: 16px 0 16px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-raised);
}
.cmsug:empty { display: none; }

.cmsug__h2 {
  margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.cmsug__row {
  display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding-right: 14px;
}
.cmsug__row::-webkit-scrollbar { display: none; }

.cmsug__i {
  display: grid; justify-items: center; gap: 4px;
  flex: none; width: 132px;
  padding: 16px 10px 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg);
  text-decoration: none; text-align: center;
}
.cmsug__i:hover { border-color: var(--brand); }
.cmsug__n {
  margin-top: 8px;
  font: 700 13.5px 'Inter', sans-serif; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmsug__h { font-size: 12px; color: var(--ink-3);
            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmsug__f {
  margin-top: 8px; padding: 7px 16px;
  border-radius: 999px;
  background: var(--brand); color: #041018;
  font: 700 12.5px 'Inter', sans-serif;
}
.cmsug__f.is-on { background: var(--bg-inset); color: var(--ink-2); }

/* ── A search result you can act on ───────────────────────────────────────
   One per row, with a button at the end. A list you can only look at makes
   somebody open a profile just to press Follow and come back. */

.cmres {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.cmres:last-child { border-bottom: 0; }
.cmres__l { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
            text-decoration: none; }
.cmres__b { min-width: 0; }
.cmres__b b { display: block; font-size: 14.5px; color: var(--ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmres__b i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Identity switcher ────────────────────────────────────────────────────
   Which profile you are acting as has to be visible from anywhere, or
   somebody posts as the wrong one and finds out afterwards. */

.cmb__me { position: relative; border: 0; background: none; padding: 0; cursor: pointer; }
.cmb__sw {
  position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--bg);
  background: var(--brand); color: #041018;
  font-size: 8px; font-weight: 900;
}

.cm-pickid.is-on { border-color: var(--brand); background: var(--brand-wash); }
.cm-pickid__on { margin-left: auto; color: var(--brand-deep); font-weight: 900; }

/* The sheet's links share the row styling with its buttons. */
a.cms__i { text-decoration: none; }